/* MostHelt home search alignment hotfix — 2026-08-30
   Normalizes native <select> rendering (especially Safari / browser zoom)
   so field icons, text and dropdown arrows never overlap. */

.mh-home-v3 .mh3-search-row > *{
  min-width:0;
}

.mh-home-v3 .mh3-field{
  position:relative;
  min-width:0;
}

.mh-home-v3 .mh3-field > svg{
  position:absolute;
  left:14px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  z-index:2;
  pointer-events:none;
}

/* Do not let Safari's native select chrome ignore our left padding. */
.mh-home-v3 .mh3-field select{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-width:100%;
  padding-left:42px!important;
  padding-right:40px!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  background-image:none!important;
  text-indent:0!important;
  white-space:nowrap;
  text-overflow:ellipsis;
  cursor:pointer;
}

/* Consistent single dropdown chevron instead of Safari's native up/down pair. */
.mh-home-v3 .mh3-field::after{
  content:"";
  position:absolute;
  z-index:3;
  right:16px;
  top:50%;
  width:7px;
  height:7px;
  border-right:2px solid #60756f;
  border-bottom:2px solid #60756f;
  transform:translateY(-68%) rotate(45deg);
  pointer-events:none;
}

/* Keep focus ring on the field shell instead of shifting the native control. */
.mh-home-v3 .mh3-field select:focus{
  box-shadow:none!important;
  outline:0!important;
}

/* At zoomed/tablet widths give the long specialty label a little more room. */
@media (min-width:621px) and (max-width:820px){
  .mh-home-v3 .mh3-search-row{
    grid-template-columns:minmax(0,1.35fr) minmax(0,.82fr) 126px!important;
  }
  .mh-home-v3 .mh3-search-btn{
    padding-inline:12px;
    white-space:nowrap;
  }
}