/* =========================================================
   OPÇÃO B - HERO FILTER (override)
   ========================================================= */

.cvc-search-card--hero{
  border-radius: 18px;
}

/* tira excesso de texto que confunde no mobile */
@media (max-width: 575.98px){
  .cvc-search-card--hero .cvc-search-helper{ display:none; }
}

/* range: remove as labels fixas no hero (deixa só valores dinâmicos) */
.cvc-search-card--hero .cvc-range-labels{
  display: none;
}

/* inputs mais consistentes */
.cvc-search-card--hero .cvc-input-hero{
  border-radius: 12px;
}

/* foco visível */
.cvc-search-card--hero .cvc-input-hero:focus{
  box-shadow: 0 0 0 .20rem rgba(109, 40, 217, .18);
}

/* =========================================================
   HERO FILTER — destaque dos campos (sem quebrar JS/GET)
   ========================================================= */

.cvc-search-card--hero{
  border-radius: 18px;
}

/* bloco visual por campo */
.cvc-search-card--hero .cvc-field{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px 12px;
  margin-bottom: 10px;
}

/* labels menos “gritadas”, mais legíveis no mobile */
.cvc-search-card--hero .cvc-label-small{
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 600;
  margin-bottom: 8px;
}

/* inputs */
.cvc-search-card--hero .cvc-input-hero,
.cvc-search-card--hero .form-control,
.cvc-search-card--hero .form-select{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

/* foco bem visível (ajuda MUITO no iPhone) */
.cvc-search-card--hero .cvc-input-hero:focus,
.cvc-search-card--hero .form-control:focus,
.cvc-search-card--hero .form-select:focus{
  border-color: rgba(109,40,217,.55);
  box-shadow: 0 0 0 .22rem rgba(109,40,217,.18);
}

/* helper discreto */
.cvc-search-card--hero .cvc-search-helper{
  color: rgba(0,0,0,.55);
  font-size: .86rem;
  margin-top: 10px;
}


/* =========================
   SEARCH CARD (HERO) - POLIMENTO
   ========================= */

.cvc-search-card--hero{
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  background: #fff;
}

/* blocos internos: mais “leve” (menos cara de formulário chato) */
.cvc-search-card--hero .cvc-form-block{
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  padding: 12px;
}

/* labels com mais contraste (muito claro = parece desabilitado) */
.cvc-search-card--hero .cvc-label-small{
  color: rgba(15, 23, 42, .78);
  font-weight: 600;
}

/* inputs/selects: altura + foco bem visível (psicologia: “estou no controle”) */
.cvc-search-card--hero .cvc-input-hero,
.cvc-search-card--hero .form-select{
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background-color: #fff;
}

/* foco acessível */
.cvc-search-card--hero .cvc-input-hero:focus,
.cvc-search-card--hero .form-select:focus{
  border-color: rgba(103, 52, 255, .55);
  box-shadow: 0 0 0 .22rem rgba(103, 52, 255, .14);
}

/* garante que o select pareça select (seta visível) */
.cvc-search-card--hero .form-select{
  padding-right: 2.75rem;
  background-position: right .9rem center;
}

/* valores do range como “badge” */
.cvc-range-values{
  display: inline-flex;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(103, 52, 255, .18);
  background: rgba(103, 52, 255, .06);
  color: rgba(15, 23, 42, .78);
  font-weight: 600;
}

/* texto auxiliar final: menos peso visual */
.cvc-search-helper{
  margin-top: 10px;
  color: rgba(15, 23, 42, .60);
}