/* V95 — appointment modal lock, brand picker scrolling, larger hero ticker */
html,body{max-width:100%;overflow-x:hidden}
body.modal-open{position:fixed;inset:0;width:100%;overflow:hidden!important;touch-action:none}

/* Lock the appointment dialog to the viewport and prevent lateral drift */
#appointmentModal{
  position:fixed!important;
  inset:50% auto auto 50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(760px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:min(88dvh,900px)!important;
  margin:0!important;
  padding:clamp(24px,4vw,42px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  box-sizing:border-box!important;
}
#appointmentModal form,
#appointmentModal .modal-head,
#appointmentModal .fields,
#appointmentModal fieldset{min-width:0!important;max-width:100%!important;width:100%!important}
#appointmentModal .modal-close{position:sticky!important;top:0!important;float:right;z-index:20;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#11151c!important;border:1px solid rgba(255,255,255,.25)!important;box-shadow:0 10px 28px rgba(0,0,0,.55);margin:-8px -6px 4px 12px}

/* Brand selector inside appointment modal scrolls independently */
#appointmentModal .brand-picker{
  overflow:hidden!important;
  min-width:0!important;
  padding:18px 14px 16px!important;
}
#appointmentModal .brand-choice-grid{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:10px!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:4px 4px 14px!important;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x!important;
  scrollbar-width:thin;
  scrollbar-color:#e51b23 #202329;
}
#appointmentModal .brand-choice-grid::-webkit-scrollbar{height:7px}
#appointmentModal .brand-choice-grid::-webkit-scrollbar-track{background:#202329;border-radius:999px}
#appointmentModal .brand-choice-grid::-webkit-scrollbar-thumb{background:#e51b23;border-radius:999px}
#appointmentModal .brand-choice{
  flex:0 0 138px!important;
  width:138px!important;
  min-width:138px!important;
  max-width:138px!important;
  scroll-snap-align:start;
  min-height:92px!important;
}
#appointmentModal .brand-choice-help{flex-basis:150px!important;width:150px!important;min-width:150px!important;max-width:150px!important}

/* Make the hero announcement ticker larger and easier to read */
.topline{height:46px!important;font-size:.98rem!important;line-height:1!important}
.topline-group{height:46px!important}
.topline-group span,.topline-group a{font-size:.98rem!important;font-weight:800!important;letter-spacing:.16em!important;padding-inline:clamp(28px,5vw,68px)!important}
.topline-group i{font-size:1rem!important}
.site-header{top:46px!important}

@media(max-width:620px){
  .topline{height:54px!important;font-size:.9rem!important}
  .topline-group{height:54px!important}
  .topline-group span,.topline-group a{font-size:.9rem!important;letter-spacing:.13em!important;padding-inline:34px!important}
  .site-header{top:54px!important}
  #appointmentModal{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:90dvh!important;padding:22px 14px 28px!important;border-radius:18px!important}
  #appointmentModal .modal-head{padding-right:4px}
  #appointmentModal .brand-choice{flex-basis:132px!important;width:132px!important;min-width:132px!important;max-width:132px!important}
  #appointmentModal .brand-choice-help{flex-basis:145px!important;width:145px!important;min-width:145px!important;max-width:145px!important}
}