/* Phase 7.9: Search UI Consistency
   Keeps existing search logic intact while normalizing the home hero and doctors listing filter UI. */

.vr-search-card--compact{
  width:max-content;
  max-width:100%;
  margin-left:0;
  margin-right:auto;
  text-align:left;
  padding:16px;
  border-radius:28px;
}

.vr-search-card--compact .vr-search-card__topline{
  justify-content:flex-start;
  text-align:left;
}

.vr-search-card--compact .vr-search-card__topline > div:first-child{
  min-width:0;
}

.vr-search-card--compact .vr-search-card__badge{
  margin-left:auto;
}

.vr-search-card__grid--single-row{
  display:grid;
  grid-template-columns:minmax(280px,320px) minmax(190px,220px) minmax(165px,190px) minmax(170px,190px);
  gap:10px;
  align-items:stretch;
  justify-content:start;
}

.vr-search-card--hero .vr-search-card__grid--single-row{
  grid-template-columns:minmax(300px,340px) minmax(205px,230px) minmax(160px,190px) minmax(180px,200px);
}

.vr-search-card--listing .vr-search-card__grid--listing{
  grid-template-columns:minmax(250px,300px) minmax(180px,210px) minmax(180px,210px) minmax(155px,180px) minmax(175px,195px);
}

.vr-search-card--compact .vr-field,
.vr-search-card--compact .vr-btn--search{
  min-height:62px;
}

.vr-search-card--compact .vr-btn--search{
  width:100%;
  height:100%;
  min-width:0;
  padding-inline:18px;
  justify-content:center;
  white-space:nowrap;
}

.vr-search-card--compact .vr-field span,
.vr-search-card--compact .vr-select__button,
.vr-search-card--compact .vr-field--search input{
  text-align:left;
}

.vr-search-card--compact .vr-select__button{
  justify-content:space-between;
}

.vr-doctors-listing-hero .vr-hero__content,
.vr-doctors-listing-hero .vr-search-card{
  margin-left:0;
  margin-right:auto;
}

.vr-doctors-listing-hero .vr-search-card{
  margin-top:28px;
}

.vr-doctors-listing-hero .vr-hero__content{
  text-align:left;
}

.vr-doctors-listing-hero .vr-hero__content h1,
.vr-doctors-listing-hero .vr-hero__content p{
  margin-left:0;
  margin-right:auto;
}

/* Keep the old filter class from forcing a different layout. */
.vr-doctors-filter.vr-search-card--compact{
  display:block;
}

@media (max-width: 1180px){
  .vr-search-card--compact{
    width:100%;
  }
  .vr-search-card--hero .vr-search-card__grid--single-row,
  .vr-search-card--listing .vr-search-card__grid--listing{
    grid-template-columns:1fr 1fr;
  }
  .vr-search-card--compact .vr-btn--search{
    min-height:58px;
  }
}

@media (max-width: 720px){
  .vr-search-card--compact{
    width:100%;
    border-radius:24px;
    padding:14px;
  }
  .vr-search-card--compact .vr-search-card__topline{
    display:block;
  }
  .vr-search-card--compact .vr-search-card__badge{
    margin-left:0;
    margin-top:12px;
  }
  .vr-search-card--hero .vr-search-card__grid--single-row,
  .vr-search-card--listing .vr-search-card__grid--listing,
  .vr-search-card__grid--single-row{
    grid-template-columns:1fr;
  }
}


/* Phase 7.9.1: Listing Search Layout Fix
   Keep the listing search below the title, inside the container, above all nearby cards, and readable. */
.vr-doctors-listing-hero .vr-container{
  display:block !important;
  max-width:var(--container);
  overflow:visible;
}

.vr-doctors-listing-hero{
  overflow:visible;
  position:relative;
  z-index:20;
}

.vr-doctors-listing-hero .vr-hero__content{
  max-width:760px;
  margin-left:0;
  margin-right:auto;
  position:relative;
  z-index:21;
}

.vr-doctors-listing-hero .vr-search-card{
  width:100%;
  max-width:1120px;
  margin-top:24px;
  margin-left:0;
  margin-right:auto;
  position:relative;
  z-index:999;
  overflow:visible;
}

.vr-doctors-listing-hero .vr-search-card__grid--listing{
  grid-template-columns:minmax(220px,1.25fr) minmax(160px,.85fr) minmax(160px,.85fr) minmax(145px,.7fr) minmax(155px,.75fr);
  gap:8px;
  width:100%;
}

.vr-search-card--compact{
  padding:12px;
}

.vr-search-card--compact .vr-field,
.vr-search-card--compact .vr-btn--search{
  min-height:54px;
}

.vr-search-card--compact .vr-field{
  padding:10px 12px;
  position:relative;
  z-index:1;
}

.vr-search-card--compact .vr-field.is-open{
  z-index:1002;
}

.vr-search-card--compact .vr-field--search input,
.vr-search-card--compact input[type="search"],
.vr-search-card--compact input[type="text"]{
  color:#171433 !important;
  -webkit-text-fill-color:#171433;
  caret-color:#7b4dff;
}

.vr-search-card--compact .vr-field--search input::placeholder,
.vr-search-card--compact input[type="search"]::placeholder{
  color:#8b8fa3;
  -webkit-text-fill-color:#8b8fa3;
}

.vr-search-card--compact .vr-select__menu{
  z-index:1005;
}

.vr-search-card--compact .vr-btn--search{
  padding-inline:14px;
  font-size:14px;
}

@media (max-width:1180px){
  .vr-doctors-listing-hero .vr-search-card__grid--listing{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:720px){
  .vr-doctors-listing-hero .vr-search-card{
    max-width:100%;
    margin-top:18px;
  }
  .vr-doctors-listing-hero .vr-search-card__grid--listing{
    grid-template-columns:1fr;
  }
}


/* Phase 11.0.13 — Doctors Listing Mobile Polish + Full-Width Cards
   Scope: /doctors listing page only. Keeps homepage doctor carousel untouched. */
.vr-doctors-listing-page{
  overflow-x:hidden;
}
.vr-doctors-listing-hero .vr-hero__content p{
  color:rgba(255,255,255,.76);
}
.vr-doctors-listing-results .vr-doctor-grid{
  align-items:stretch;
}
@media (max-width:760px){
  .vr-doctors-listing-hero{
    padding:34px 0 38px!important;
    overflow:hidden!important;
    background-position:center top!important;
  }
  .vr-doctors-listing-hero .vr-container{
    width:calc(100% - 28px)!important;
    max-width:calc(100% - 28px)!important;
    overflow:visible!important;
  }
  .vr-doctors-listing-hero .vr-eyebrow{
    max-width:100%;
    margin-bottom:18px;
    padding:10px 14px;
    font-size:13px;
    line-height:1.25;
    white-space:normal;
  }
  .vr-doctors-listing-hero .vr-hero__content{
    max-width:100%;
  }
  .vr-doctors-listing-hero .vr-hero__content h1{
    max-width:100%;
    font-size:clamp(38px,11.5vw,52px)!important;
    line-height:1.02!important;
    letter-spacing:-.055em;
    margin-bottom:14px;
  }
  .vr-doctors-listing-hero .vr-hero__content p{
    max-width:100%;
    font-size:15px;
    line-height:1.65;
    color:rgba(255,255,255,.78)!important;
    margin-bottom:0;
  }
  .vr-doctors-listing-hero .vr-search-card{
    margin-top:24px!important;
    padding:16px!important;
    border-radius:28px!important;
    box-shadow:0 24px 70px rgba(15,23,42,.20)!important;
  }
  .vr-doctors-listing-hero .vr-search-card__topline{
    display:flex!important;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .vr-doctors-listing-hero .vr-search-card__topline strong{
    font-size:17px;
    line-height:1.2;
  }
  .vr-doctors-listing-hero .vr-search-card__topline span{
    font-size:13px;
    line-height:1.45;
    margin-top:5px;
  }
  .vr-doctors-listing-hero .vr-search-card__badge{
    flex:0 0 auto;
    margin:0!important;
    padding:8px 11px;
    font-size:12px;
  }
  .vr-doctors-listing-hero .vr-search-card__grid--listing{
    gap:10px!important;
    margin-top:14px;
  }
  .vr-doctors-listing-hero .vr-search-card--compact .vr-field,
  .vr-doctors-listing-hero .vr-search-card--compact .vr-btn--search{
    min-height:58px!important;
    border-radius:20px!important;
  }
  .vr-doctors-listing-hero .vr-search-card--compact .vr-field{
    padding:11px 14px!important;
  }
  .vr-doctors-listing-hero .vr-search-card--compact .vr-field--search input,
  .vr-doctors-listing-hero .vr-search-card--compact .vr-select__button strong{
    font-size:15px;
  }
  .vr-doctors-listing-hero .vr-btn--search{
    height:58px!important;
    font-size:15px!important;
  }
  .vr-doctors-listing-results{
    overflow:hidden;
    padding-top:48px!important;
  }
  .vr-doctors-listing-results .vr-container{
    width:calc(100% - 28px)!important;
    max-width:calc(100% - 28px)!important;
  }
  .vr-doctors-listing-results .vr-section-head{
    margin-bottom:22px;
  }
  .vr-doctors-listing-results .vr-section-head h2{
    font-size:clamp(34px,10vw,46px);
    line-height:1.04;
    letter-spacing:-.05em;
  }
  .vr-doctors-listing-results .vr-section-head p{
    font-size:16px;
    line-height:1.6;
  }
  .vr-doctors-listing-results .vr-doctor-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .vr-doctors-listing-results .vr-doctor-card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex:0 0 auto!important;
    margin:0!important;
    border-radius:30px!important;
  }
  .vr-doctors-listing-results .vr-doctor-card__media{
    aspect-ratio:4/3.35!important;
  }
}
@media (max-width:430px){
  .vr-doctors-listing-hero .vr-container,
  .vr-doctors-listing-results .vr-container{
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
  }
  .vr-doctors-listing-hero .vr-search-card{
    padding:14px!important;
    border-radius:26px!important;
  }
  .vr-doctors-listing-results .vr-doctor-card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex-basis:auto!important;
  }
}

/* Phase 11.0.14 — Doctors Listing Search Input Visual Match
   Keep the keyword search field visually identical to select fields on mobile. */
@media (max-width:760px){
  .vr-doctors-listing-hero .vr-search-card--compact .vr-field--search{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:5px!important;
    min-height:58px!important;
    padding:11px 14px!important;
    border-radius:20px!important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfbff 100%)!important;
    border:1px solid rgba(15,23,42,.08)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(15,23,42,.05)!important;
    overflow:hidden!important;
  }

  .vr-doctors-listing-hero .vr-search-card--compact .vr-field--search span{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:0!important;
    color:#6b7280!important;
    font-size:13px!important;
    line-height:1.15!important;
    font-weight:800!important;
    background:transparent!important;
    -webkit-text-fill-color:currentColor!important;
    user-select:none;
  }

  .vr-doctors-listing-hero .vr-search-card--compact .vr-field--search span i{
    color:#7b4dff!important;
    -webkit-text-fill-color:#7b4dff!important;
  }

  .vr-doctors-listing-hero .vr-search-card--compact .vr-field--search input,
  .vr-doctors-listing-hero .vr-search-card--compact .vr-field--search input[type="search"]{
    display:block!important;
    width:100%!important;
    min-height:24px!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    color:#111827!important;
    -webkit-text-fill-color:#111827!important;
    font-size:15px!important;
    line-height:1.35!important;
    font-weight:650!important;
  }

  .vr-doctors-listing-hero .vr-search-card--compact .vr-field--search input::placeholder{
    color:#8b8fa3!important;
    -webkit-text-fill-color:#8b8fa3!important;
    opacity:1!important;
    font-weight:500!important;
  }

  .vr-doctors-listing-hero .vr-search-card--compact .vr-field--search:focus-within{
    border-color:rgba(123,77,255,.28)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 0 0 3px rgba(123,77,255,.10),0 12px 28px rgba(15,23,42,.08)!important;
  }
}