/* ===== Accessible Booking Calendar (WCAG 2.2 AA) ===== */
:root{
  --abc-primary:#2F3A4A;
  --abc-primary-2:#27313E;
  --abc-accent:#C4B5FD;
  --abc-text:#121212;
  --abc-bg:#FAFAFC;
  --abc-muted:#5B6573;
  --abc-base-3:#EEF1F6;
  --abc-radius:16px;
  --abc-ring-outer: 3px solid var(--abc-accent);

  /* toned-down error tokens */
  --abc-danger:#9F2A23;
  --abc-danger-ink:#6E1E1E;
  --abc-danger-bg:#FCECEF;
  --abc-danger-border:#F3C6C9;

  /* light-mode defaults used elsewhere */
  --abc-border:#D6DAE3;
  --abc-focus-contrast:#fff;
}

/* iOS zoom/jank guard — keeps OSK behavior predictable */
.abc-modal input,
.abc-modal textarea,
.abc-modal select { font-size: 16px; }

/* CTA baseline (opener button outside the modal) */
.abc-booking-wrap .cta-btn{
  font-weight:600;
  border-radius:999px;
  padding:.7rem 1rem;
}

.abc-booking-open[data-tooltip]{ position:relative; }

.abc-booking-open[data-tooltip]:hover::after,
.abc-booking-open[data-tooltip]:focus-visible::after{
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--abc-primary);
  color: #fff;
  padding: .4rem .6rem;
  border-radius: 8px;
  font-size: .9rem;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 1000;
}
.abc-booking-open[data-tooltip]:hover::before,
.abc-booking-open[data-tooltip]:focus-visible::before{
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translate(-50%, -6px) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--abc-primary);
  z-index: 1001;
}

/* optional dark tweak */
@media (prefers-color-scheme: dark){
  .abc-booking-open[data-tooltip]:hover::after,
  .abc-booking-open[data-tooltip]:focus-visible::after,
  .abc-booking-open[data-tooltip]:hover::before,
  .abc-booking-open[data-tooltip]:focus-visible::before{
    background: #171C23;
  }
}

/* ===== Modal shell ===== */
.abc-modal[hidden]{ display:none !important; }
/* Absolutely inert when hidden (covers optimizers/reordering) */
.abc-modal[hidden],
.abc-modal[hidden] .abc-modal__backdrop,
.abc-modal[hidden] .abc-modal__panel{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.abc-modal{
  position: fixed; inset: 0;
  z-index: 9999999999;
  font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--abc-text);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.abc-modal__backdrop{
  position: fixed; inset: 0;
  z-index: 0;
  background: rgba(0,0,0,.5);
}
.abc-modal__panel{
  position: relative;
  z-index: 1;
  width: min(800px, calc(100% - 24px));
  max-height: 92vh;
  overflow: auto;
  background: var(--abc-bg);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--abc-radius); /* slightly rounded corners */
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
  padding: 20px 20px 24px;
  outline: 0;
}

.abc-modal__panel input,
.abc-modal__panel textarea {
  -webkit-user-select: text;
  user-select: text;
  caret-color: auto;
}

/* Prevent page scroll while modal is open */
@supports selector(body:has(.abc-modal:not([hidden]))) {
  body:has(.abc-modal:not([hidden])) { overflow: hidden; }
}

/* ===== Title & notes ===== */
/* Modal title — centered with balanced spacing */
.abc-modal-title{
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.3;
  margin: .25rem 0 .35rem;   /* top | sides | bottom */
  color: var(--abc-primary);
  text-wrap: balance;
}

@media (max-width:520px){
  .abc-modal-title{ font-size:1.45rem; }
}
.abc-required-note{
  color: var(--abc-muted);
  margin: .4rem 0 1.1rem;
  text-align: center;
}

/* Booking footer note under the form */
.abc-terms-note{
  color: var(--abc-muted);
  margin: .6rem 0 .6rem;   /* a bit closer to the button */
  text-align: left;        /* matches body text alignment */
  font-size: .9rem;
}
.abc-privacy-note{
  color: var(--abc-muted);
  margin: .4rem 0 1.1rem;
  text-align: left;
  font-size: .9rem;
}

/* hide alerts by default; show only when .is-visible is added by JS */
#abc-booking-modal .abc-alert{ display:none; }
#abc-booking-modal .abc-alert.is-visible{ display:block; }

/* ===== Form spacing & usability ===== */
.abc-form{
  display:block;
  margin: 0;                        /* avoid duplicate margins later */
}
.abc-form label{ font-weight:600; }
.abc-form textarea{ resize:vertical; min-height:140px; }

/* Make the "(optional)" hint lighter and softer */
.abc-label-optional{
  font-weight: 400;         /* lighter than the main label */
  font-size: 0.9em;         /* slightly smaller */
  color: #5B6573;           /* your muted text tone */
  margin-left: .5rem;      /* small gap after "Website" */
}

/* =========================================
   abc   Booking form — placeholder styling
   (clear placeholder look + AA-ish contrast)
   Scope: booking modal + abc   form fields
   ========================================= */

#abc-booking-modal .abc-field input::placeholder,
#abc-booking-modal .abc-field textarea::placeholder,
#abc-booking-modal .abc-field select::placeholder{
  /* Dark enough to read on white/light surfaces */
  color: #5B6573;     /* your muted token */
  opacity: 1;         /* avoid faint browser defaults */
  font-weight: 400;   /* prevents “label weight” feel */
}

/* Make sure actual user input remains stronger than placeholder */
#abc-booking-modal .abc-field input,
#abc-booking-modal .abc-field textarea{
  color: var(--abc-text, #121212);
}

/* Special case: readonly "Selected date" field placeholder */
#abc-booking-modal .abc-date-display::placeholder{
  color: #5B6573;
  opacity: 1;
  font-weight: 400;
}

/* Dark theme: keep placeholder readable on your dark inputs */
@media (prefers-color-scheme: dark){
  #abc-booking-modal .abc-field input::placeholder,
  #abc-booking-modal .abc-field textarea::placeholder,
  #abc-booking-modal .abc-date-display::placeholder{
    color: rgba(245,247,250,.75); /* readable but still secondary */
    opacity: 1;
  }
}

/* High contrast: let the OS decide (don’t fight forced-colors) */
@media (forced-colors: active){
  #abc-booking-modal .abc-field input::placeholder,
  #abc-booking-modal .abc-field textarea::placeholder,
  #abc-booking-modal .abc-date-display::placeholder{
    forced-color-adjust: auto;
    color: GrayText;
  }
}

/* Make focus jump clearly visible */
.abc-form input,
.abc-form select,
.abc-form textarea,
#abc-time-select, .abc-date-display{
  scroll-margin-top: 18vh;          /* keep focused field away from top edge */
  touch-action: manipulation;  /* hint to treat tap as activation */
}
.abc-form input:focus-visible,
.abc-form select:focus-visible,
.abc-form textarea:focus-visible,
#abc-time-select:focus-visible,
.abc-date-display:focus-visible{
  outline: var(--abc-ring-outer);
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff;
}

/* 3) Make Terms/Privacy links pop, but still tasteful */
#abc-booking-modal .abc-consent a,
#abc-booking-modal .abc-terms-note a,
#abc-booking-modal .abc-privacy-note a{
  color: var(--abc-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;  /* clearer underline for low vision */
}
#abc-booking-modal .abc-consent a:hover,
#abc-booking-modal .abc-terms-note a:hover,
#abc-booking-modal .abc-privacy-note a:hover{
  filter: brightness(0.95);        /* subtle hover without color shift */
}

/* Consent block: two columns (checkbox | text) */
#abc-booking-modal .abc-consent{
  display:grid;
  grid-template-columns: 1.2rem 1fr;
  column-gap:.6rem;
  row-gap:.35rem;
}

/* Keep label clickable, but don’t create a second grid that fights the parent */
#abc-booking-modal .abc-consent__label{
  grid-column: 1 / -1;
  margin:0;
}

/* Put checkbox + text into the parent grid */
#abc-booking-modal .abc-consent__label{
  display: contents; /* key trick */
}

/* Heavier checkbox (consistent cross-browser) */
#abc-booking-modal .abc-consent input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;     /* modern guarantee */
  place-self: start;       /* key: don’t stretch in grid */
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid rgba(47,58,74,.45);
  border-radius: 4px;
  background: #fff;
  display: inline-grid;
  place-items: center;
  margin: .1rem 0 0 0;
}

/* Checked state */
#abc-booking-modal .abc-consent input[type="checkbox"]:checked{
  background: var(--abc-primary);
  border-color: var(--abc-primary);
}

/* Checkmark */
#abc-booking-modal .abc-consent input[type="checkbox"]:checked::after{
  content: "";
  width: .55rem;
  height: .3rem;
  border: 3px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  margin-top: -1px;
}

/* Focus ring stays your brand ring */
#abc-booking-modal .abc-consent input[type="checkbox"]:focus-visible{
  outline: var(--abc-ring-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* Dark mode tweak */
@media (prefers-color-scheme: dark){
  #abc-booking-modal .abc-consent input[type="checkbox"]{
    background: #0F1319;
    border-color: rgba(238,241,246,.35);
  }
}

/* Forced-colors: revert to native so Windows HC draws it perfectly */
@media (forced-colors: active){
  #abc-booking-modal .abc-consent input[type="checkbox"]{
    appearance: auto;
    -webkit-appearance: checkbox;
    background: Canvas;
    border: 1px solid ButtonText;
  }
}

#abc-booking-modal .abc-consent__text{
  grid-column:2;
  grid-row:1;
}

/* Error row spans full width, but internally aligns icon/text to columns */
#abc-booking-modal .abc-consent .abc-field-error{
  grid-column: 1 / -1 !important;
  grid-row: 2;
  margin: .25rem 0 0 0 !important;

  display:grid;                              /* not flex */
  grid-template-columns: 1.25rem 1fr;        /* icon under checkbox */
  column-gap:.6rem;
  align-items:start;
}

#abc-booking-modal .abc-consent .abc-err-icon{
  grid-column:1;
  margin-top: 0;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1;
  display: inline-grid;
  place-items: center;          /* centers the icon inside the box */
}

#abc-booking-modal .abc-consent .abc-error-msg{
  grid-column:2;
}

/* --- Consent: prevent label bold from affecting the error --- */

/* If the JS inserts the error inside the consent label/text, force normal weight */
#abc-booking-modal .abc-consent__label .abc-field-error,
#abc-booking-modal .abc-consent__label .abc-field-error *,
#abc-booking-modal .abc-consent__text .abc-field-error,
#abc-booking-modal .abc-consent__text .abc-field-error *{
  font-weight: 400 !important;
  font-size: .95rem !important;
  line-height: 1.35;
}

/* Keep the consent sentence bold (only this part) */
#abc-booking-modal .abc-consent__text{
  font-weight: 600;
}

#abc-booking-modal .abc-field--consent .abc-field-error{
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-top: .35rem !important;
}

/* Date readout + time select positioning */
.abc-date-field{ margin-bottom:.9rem; }
.abc-time-native{ margin: 1rem 0 .75rem; }

/* ===== Layout: top row (identity + calendar), then notes full width ===== */
@media (min-width:820px){
  /* Keep the FORM itself simple */
  #abc-booking-form.abc-form{ display:block; }

  /* TOP ROW: fields | calendar, then notes spans both */
  #abc-booking-modal #abc-booking-form .abc-form-row--top{
    display:grid;
    grid-template-columns: minmax(320px, 460px) minmax(300px, 1fr);
    grid-template-areas:
      "fields cal"
      "notes  notes";
    gap: 16px 24px;
    align-items: stretch;
  }

  #abc-booking-modal .abc-form-left-top .abc-field{
    padding: .7rem 1rem;
  }
  #abc-booking-modal .abc-form-left-top .abc-field input{
    min-height: 42px;
  }

  /* Place the wrappers */
  #abc-booking-modal #abc-booking-form .abc-form-row--top > .abc-form-col--fields{
    grid-area: fields;
    min-width: 0;
  }

  #abc-booking-modal #abc-booking-form .abc-form-row--top > .abc-form-col--calendar{
    grid-area: cal;
    min-width: 0;
    align-self: stretch;
    display: flex;
  }

  /* Notes is now a direct child of the top row */
  #abc-booking-modal #abc-booking-form .abc-form-row--top > .abc-field--notes{
    grid-area: notes;
    margin: 0; /* spacing handled by grid gap */
  }

  /* Identity group becomes the vertical stack */
  #abc-booking-modal #abc-booking-form .abc-identity-group{
    display: grid;
    gap: 16px;
  }

  /* Remove default margins inside identity stack so gap controls spacing */
  #abc-booking-modal #abc-booking-form .abc-identity-group > p.abc-field{
    margin: 0;
  }

  /* Calendar should stretch nicely */
  #abc-booking-modal #abc-booking-form .abc-form-col--calendar .abc-cal{
    width: 100%;
    max-width: 520px;
    margin: 0;
    display:flex;
    flex-direction:column;
    flex: 1 1 auto;
  }

  #abc-booking-modal #abc-booking-form .abc-form-col--calendar .abc-cal-grid{
    flex: 1 1 auto;
  }

  /* Notes textarea height on desktop */
  #abc-booking-modal .abc-field--notes textarea{
    min-height: 120px;
  }

  /* Rest row stays full width beneath */
  #abc-booking-modal #abc-booking-form .abc-form-row--rest{
    margin-top: 12px;
  }

  #abc-booking-modal #abc-booking-form .abc-form-row--rest .abc-form-full{
    grid-template-columns: 1fr;
    justify-items: stretch;
    width: 100%;
    max-width: none;
  }

  #abc-booking-modal #abc-booking-form .abc-form-row--rest .abc-form-full > *{
    width: 100%;
    max-width: none;
  }
}

/* Mobile sheet (≤480px) */
@media (max-width: 480px){
  .abc-modal__panel{
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

.abc-optional{ color:var(--abc-muted); font-weight:400; }

/* ===========================
   Booking – “Schedule” section
   =========================== */
/* Keep width consistency, but don’t mess with typography everywhere */
#abc-booking-modal .abc-date-field,
#abc-booking-modal .abc-date-actions,
#abc-booking-modal .abc-time-native{
  width: 100%;
  max-width: none;
}

/* Typography only for the timezone note */
#abc-booking-modal #abc-tz-note{
  width: 100%;
max-width: none;
  margin-top: .5rem;
  font-size: .9rem;      /* .82rem is a bit tiny in practice */
  line-height: 1.45;
  opacity: .9;
}

/* Group date + time into a soft panel */
#abc-booking-modal .abc-date-field{
  position: relative;
  padding: .9rem 1.2rem;
  border: 1px solid rgba(47,58,74,.12);
  border-radius: 14px;
  background: rgba(238,241,246,.35); /* subtle “section” cue */
  margin-top: .9rem;
}

/* ===== Field frames (mirror Selected date panel) ===== */
/* 1) The frame belongs to the wrapper */
#abc-booking-modal .abc-field{
  position: relative;
  padding: .9rem 1.2rem;
  border: 1px solid rgba(47,58,74,.12);
  border-radius: 14px;
  background: rgba(238,241,246,.35);
}

/* 2) Label sits inside the same frame */
#abc-booking-modal .abc-field > label{
  display: block;
  margin: 0 0 .45rem;
}

#abc-booking-modal .abc-field input:not([type="checkbox"]):not([type="radio"]),
#abc-booking-modal .abc-field textarea{
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: .55rem .2rem .45rem;
  color: var(--abc-text);
}

/* 4) Focus ring belongs to the whole component, not just the input */
#abc-booking-modal .abc-field:focus-within{
  outline: var(--abc-ring-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* 5) Don’t double-ring: neutralize the input outline inside framed fields */
#abc-booking-modal .abc-field input:focus-visible,
#abc-booking-modal .abc-field textarea:focus-visible{
  outline: none;
  box-shadow: inset 0 -1px 0 var(--abc-border);
}

/* 6) Invalid state: apply to the wrapper so it reads as one component */
#abc-booking-modal .abc-field:has([aria-invalid="true"]){
  border-color: var(--abc-danger) !important;
  box-shadow: 0 0 0 2px rgba(159,42,35,.14);
}

/* And keep your focus+invalid combo strong but tidy */
#abc-booking-modal .abc-field:has([aria-invalid="true"]):focus-within{
  outline: 3px solid var(--abc-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(159,42,35,.18) !important;
}

/* Keep Selected date + Clear date as a single unit */
#abc-booking-modal .abc-date-group{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "date  clear";
  align-items: end;
  column-gap: 12px;
max-width: none;
  width: 100%;
  margin-top: .9rem;
}

/* Place children */
#abc-booking-modal .abc-date-group .abc-date-field{
  grid-area: date;
  margin: 0;              /* important: avoid “double spacing” inside the wrapper */
}

#abc-booking-modal .abc-date-group .abc-date-actions{
  grid-area: clear;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  justify-content: flex-end;
}

/* Optional: on narrow widths, stack Clear date under the date field */
@media (max-width:520px){
  #abc-booking-modal .abc-date-group{
    grid-template-columns: 1fr;
    grid-template-areas:
      "date"
      "clear";
    row-gap: 10px;
  }
  #abc-booking-modal .abc-date-group .abc-date-actions{
    justify-content: flex-start; /* feels more natural when stacked */
  }
}

#abc-booking-modal .abc-date-actions .abc-clear-date{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .3rem .5rem; /* slightly smaller */
  border-radius: 999px;
  border: 1px solid rgba(47,58,74,.08); /* was .18 */
  background:rgba(250,250,252,.6);             /* subtle fill (matches your page bg vibe) */
  color: var(--abc-muted); /* was primary-2 (darker) */
}

#abc-booking-modal .abc-date-actions .abc-clear-date:hover{
  background: rgba(238,241,246,.45); /* was .7 */
}

#abc-booking-modal .abc-date-actions .abc-clear-date:active{
  background:rgba(238,241,246,1);
}

#abc-booking-modal .abc-clear-date[disabled]{
  opacity:.8;
  color:#5B6573;
  cursor:not-allowed;
  border-color: rgba(47,58,74,.18);
}
#abc-booking-modal .abc-clear-date[disabled]:focus-visible{
  outline: none;
  box-shadow: none;
}

#abc-booking-modal .abc-clear-date:focus-visible{
  outline: var(--abc-ring-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* Time: match the date field width */
#abc-booking-modal #abc-time-select{
  max-width: none;
  width: 100%;
}

/* Keep the consent visually separated (reduces perceived clutter) */
#abc-booking-modal .abc-consent{
  border-top: 1px solid rgba(47,58,74,.12);
  padding-top: .85rem;
  margin-top: .85rem;
}

/* Close button */
.abc-modal .abc-modal__close{
  position:absolute; top:14px; right:16px; left:auto;
  display: inline-grid;          /* <-- enables place-items */
  place-items: center;           /* center both axes */
  width:44px; height:44px;
  padding: 0;                    /* avoid offset from default padding */
  border-radius:999px;
  border:1px solid #D6DAE3;
  background:#fff;
  color:var(--abc-primary);
  font: inherit;
  font-size: 22px;
  line-height: 1;
}

/* If the glyph still looks slightly high/low in your font, nudge it */
.abc-modal .abc-modal__close > span,
.abc-modal .abc-modal__close svg{
  display:block;
}

.abc-modal .abc-modal__close:focus-visible{
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--abc-primary);
}

/* Safer spacing rhythm: keep it off the schedule cluster */
#abc-booking-modal .abc-field-error,
#abc-booking-modal .abc-form .cta-btn{
  margin-top: .65rem;
  margin-bottom: .85rem;
}

/* ===== Alerts – softer appearance, clearer spacing ===== */
.abc-alert{
  display:block;
  margin:0 0 .9rem;                 /* collapsed margin */
  padding:.75rem 1rem;
  border-radius:12px;
  background:#FEEAEA;               /* soft red */
  border:1px solid #F2B8B5;         /* subtle border */
  color:#7A271A;                    /* darker text for contrast */
  line-height:1.35;

  /* robust wrapping */
  overflow-wrap:anywhere;           /* modern */
  word-wrap:break-word;             /* legacy fallback */
}

/* ===== Calendar ===== */
#abc-booking-modal .abc-cal{
  padding: .7rem .85rem .85rem;
  border-radius: 14px;
  background: rgba(238,241,246,.22);           /* super subtle */
  outline: 1px solid rgba(47,58,74,.08);       /* “hint”, not a border */
  outline-offset: 0;
margin:.15rem 0 1rem;
}

/* Calendar label above the toolbar */
#abc-booking-modal .abc-cal-label{
  margin: 0 0 .4rem;
  display:block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--abc-primary);
}

/* Slightly tighter on small screens */
@media (max-width:520px){
  #abc-booking-modal .abc-cal-label{
    font-size: .98rem;
    margin-bottom: .35rem;
  }
}

/* Dark mode: keep it readable */
@media (prefers-color-scheme: dark){
  #abc-booking-modal .abc-cal-label{
    color: #F3F6FA;
  }
}

/* High contrast / forced colors: let system handle colors */
@media (forced-colors: active){
  #abc-booking-modal .abc-cal-label{
    color: CanvasText;
  }
}

.abc-cal-toolbar{
  display:flex; align-items:center; gap:.75rem; column-gap:.6rem;
  margin:.2rem 0 .4rem;
}
.abc-cal-title{
  flex:1 1 auto; text-align:center;
  font-weight:700; font-size:1.05rem; line-height:1.2;
  margin:0; color:var(--abc-primary);
}

.abc-cal-prev, .abc-cal-next{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid #D6DAE3;
  background:#fff;
  color:var(--abc-primary);

  display:inline-grid;
  place-items:center;   /* true center */
  padding:0;
  line-height:0;          /* kills font baseline nudging */
  font-size:18px;
}

.abc-cal-prev:focus-visible, .abc-cal-next:focus-visible{
  outline:var(--abc-ring-outer); outline-offset:2px; box-shadow:0 0 0 2px #fff;
}

.abc-yearwrap{
  flex: 0 0 auto;              /* don’t let it shrink */
}

/* Year select */		
.abc-yearwrap select{
  border:1px solid #D6DAE3; border-radius:var(--abc-radius); background:#fff;
  padding:.3rem .5rem; min-height:32px;   min-width: 5.5rem; font-size:.95rem;
}
.abc-yearwrap select:focus{
  outline:var(--abc-ring-outer); outline-offset:2px; box-shadow:0 0 0 2px #fff;
}

.abc-cal-grid > .abc-cal-head{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  gap:3px;
}

/* Month grid */
.abc-cal-grid{ display:grid; width:100%; gap:3px; padding-bottom: .25rem; }
.abc-cal-grid > [role="row"]{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:3px;
}
.abc-cal-grid > [role="row"] > .abc-cal-dow{
  font-weight:600; text-align:center; padding:.1rem 0 .18rem;
  color:var(--abc-primary); font-size:.92rem;
}
/* Ensure no stray margins on the final row */
.abc-modal .abc-cal-grid > [role="row"]:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Day tiles — 28px target (?24px) */
.abc-cal-grid > [role="row"] > .abc-cal-cell{ min-height:28px; }
.abc-cal-grid .abc-cal-day{
  width:100%; min-height:28px;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  background:#fff; border:1px solid #D6DAE3; border-radius:var(--abc-radius);
  color:var(--abc-text); font:inherit; font-size:.98rem; font-weight:600; line-height:1;
}

/* Keyboard-only focus ring
   1) Reset any previous :focus styles (including .abc-cal-grid .abc-cal-day:focus)
   2) Show ring only on :focus-visible when supported
   3) Fallback: show on :focus in older browsers
*/
.abc-cal-grid .abc-cal-day:focus,
.abc-cal-day:focus{
  outline: none;
  box-shadow: none;
}

@supports selector(:focus-visible){
  .abc-cal-day:focus-visible{
    outline: var(--abc-ring-outer);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
  }
}

@supports not selector(:focus-visible){
  /* Old browsers: use :focus */
  .abc-cal-grid .abc-cal-day:focus,
  .abc-cal-day:focus{
    outline: var(--abc-ring-outer);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
  }
}

/* Disabled / unavailable days – unified light-theme rules */
.abc-cal-grid .abc-cal-day[aria-disabled="true"],
.abc-cal-day.is-unavailable{
  position: relative;
  pointer-events: none;
  background:#EDEFF4;      /* still fine as a secondary cue */
  border-color:#CBD2E0;
  color:#475569;
  border-style: dotted;    /* ← structural, survives grey/HC */
  opacity: 1;              /* stop fading them out */
  cursor: not-allowed;
}

/* Extra explicit cue: small "×" badge */
.abc-cal-grid .abc-cal-day[aria-disabled="true"]::after,
.abc-cal-day.is-unavailable::after{
  content:"×";
  position:absolute;
  top:2px;
  right:4px;
  font-size:.7rem;
  line-height:1;
}

/* Hover (mouse only) */
@media (hover:hover){
  .abc-cal-day:not([aria-disabled="true"]):not(.is-unavailable):hover{
    background: var(--abc-base-3);
    border-color:#CBD2E0;
    cursor:pointer;
  }
}

/* ===== Responsive calendar behavior (abc  ) ===== */

/* Compact controls (month / optional day / year) */
.abc-datepick-compact[hidden]{ display:none !important; }

.abc-datepick-compact{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.5rem;
  align-items:end;
  margin:.25rem 0 .75rem;
}

/* Inputs/selects */
#abc-cal-month,
#abc-cal-day,
#abc-cal-year{
  border:1px solid var(--abc-border, #D6DAE3);
  border-radius:var(--abc-radius);
  background:#fff;
  color:var(--abc-text, #121212);
  padding:.45rem .5rem;
  min-height:44px;                 /* ?44px tap size */
  font:inherit;
}

#abc-cal-month:focus-visible,
#abc-cal-day:focus-visible,
#abc-cal-year:focus-visible{
  outline: var(--abc-ring-outer, 3px solid var(--abc-accent, #C4B5FD));
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff;       /* contrast ring separator */
}

/* Toolbar + nav buttons get a little tighter on small screens */
@media (max-width:520px){
  /* Keep the grid visible on mobile — do NOT hide it */
  .abc-cal-toolbar{ gap:.4rem; }
  .abc-cal-prev,
  .abc-cal-next{
    width:40px; height:40px;       /* touch size */
    border-radius:var(--abc-radius);
  }

  /* If you also show a desktop year dropdown (.abc-yearwrap),
     hide that on small screens to avoid duplicate year controls. */
  .abc-yearwrap{ display:none !important; }

  /* Larger day cells for touch */
  .abc-cal-grid .abc-cal-day{
    min-height:44px;
  }
}

/* ===== Light mode grid polish ===== */
.abc-cal-grid > [role="row"] > .abc-cal-dow{
  color: var(--abc-muted, #5B6573);
}
.abc-cal-grid .abc-cal-day{
  background:#fff;
  color:var(--abc-text, #121212);
  border:1px solid var(--abc-border, #D6DAE3);
  border-radius:10px;
}
.abc-cal-grid .abc-cal-day:focus-visible{
  outline: var(--abc-ring-outer, 3px solid var(--abc-accent, #C4B5FD));
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff;
}
.abc-cal-grid .abc-cal-day[aria-disabled="true"],
.abc-cal-grid .abc-cal-day:disabled{
  background:#F5F7FB;
  border-color:#E1E6EF;
  color:#8B94A3;
  opacity:1;
  cursor:not-allowed;
}
.abc-cal-grid .abc-cal-day[aria-selected="true"]{
  background: color-mix(in srgb, var(--abc-accent) 20%, transparent);  /* Purple-tinted background (your brand accent) */
  border: 2px solid color-mix(in srgb, var(--abc-accent) 75%, transparent);  /* Stronger purple border (2px, not 1px) */
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--abc-accent) 95%, transparent);  /* Prominent inner purple ring */
  background-clip: padding-box;
  position: relative;
}
.abc-cal-day.is-today:not(.is-selected){
  box-shadow: inset 0 0 0 2px #C7CBD5;
}

/* ===== Dark mode (prefers-color-scheme) =====
   Uses an on-dark text token fallback for proper contrast. */
@media (prefers-color-scheme: dark){
  .abc-cal-prev,
  .abc-cal-next,
  .abc-yearwrap select{
    background:#0F1319;
    color:var(--abc-on-dark, #E2E6ED);
    border-color:var(--abc-border);
  }

  .abc-cal-prev:focus-visible,
  .abc-cal-next:focus-visible,
  .abc-yearwrap select:focus-visible{
    outline:3px solid var(--abc-accent, #C4B5FD);
    outline-offset:2px;
    box-shadow:0 0 0 2px var(--abc-focus-contrast, #0B1020);
  }

  .abc-cal-grid > [role="row"] > .abc-cal-dow{
    color:#E2E6ED;
  }

  .abc-cal-grid .abc-cal-day{
    min-height:28px;
    background:#0F1319;
    color:var(--abc-on-dark, #E2E6ED);
    border-color:rgba(226,230,237,0.15);
  }

  .abc-cal-grid .abc-cal-day:focus-visible{
    outline:3px solid var(--abc-accent, #C4B5FD);
    outline-offset:2px;
    box-shadow:0 0 0 2px var(--abc-focus-contrast, #0B1020);
  }

  .abc-cal-grid .abc-cal-day[aria-disabled="true"],
  .abc-cal-grid .abc-cal-day:disabled{
    background:#0F1319;
    border-color:rgba(226,230,237,0.12);
    color:#A8B0BE;
    opacity:1;
  }
.abc-cal-grid .abc-cal-day[aria-selected="true"]{
    background:#0f241b;
    border-color:#1d3a2e;
    box-shadow: inset 0 0 0 2px #1d3a2e;
  background-clip: padding-box;
  }

  .abc-cal-day.is-today:not(.is-selected){
    box-shadow: inset 0 0 0 2px #3f4a63;
  }

  .abc-cal-grid .abc-cal-day[aria-disabled="true"],
  .abc-cal-day.is-unavailable{
    border-style: dotted;
  }

  /* Compact selects in dark mode */
  #abc-cal-month,
  #abc-cal-day,
  #abc-cal-year{
    background:#0F1319;
    color:var(--abc-on-dark, #E2E6ED);
    border-color:var(--abc-border);
  }

  #abc-cal-month:focus-visible,
  #abc-cal-day:focus-visible,
  #abc-cal-year:focus-visible{
    outline:3px solid var(--abc-accent, #C4B5FD);
    outline-offset:2px;
    box-shadow:0 0 0 2px var(--abc-focus-contrast, #0B1020);
  }
}


/* ===== Date readout ===== */
/* Selected date pill */
.abc-date-field label{
  display:inline-block;
  margin-bottom:.35rem;
}

.abc-date-field .abc-date-display{
  min-width: 20ch;
  width:100%;
  /* if you previously added ellipsis, keep or remove as you prefer */
  text-overflow: ellipsis;      /* keep = tidy truncation */
  overflow:hidden;
  white-space:nowrap;
  padding:.6rem .9rem;
  font-size:1rem;
  font-variant-numeric: tabular-nums;
  border: 0;
}

@media (max-width: 520px){
  .abc-date-field .abc-date-display{ font-size:.95rem; }
  .abc-success { margin-top:.2rem; }
  .abc-consent label{ grid-template-columns:1.15rem 1fr; gap:.5rem; }
}

/* Required field star (muted red + alignment — consolidated) */
.abc-req-star{
  color: var(--abc-danger);
  font-weight: 600;
  line-height: 1;
  transform: translateY(.1em);
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.05em;        /* baseline nudge to match label text */
  margin-left: .15em;  /* tiny breathing room from label */
}

/* ===== Time list (native select that JS fills) ===== */
#abc-booking-modal .abc-time-native{ max-width: none; margin:1rem 0 1rem; }
#abc-booking-modal .abc-time-native[hidden]{ display:none !important; }
#abc-booking-modal .abc-time-native label{ font-weight:600; display:block; margin:0 0 .25rem; }

/* Native <select> – keep it boring and compatible */
#abc-booking-modal .abc-time-native #abc-time-select{
  position: relative;
  z-index: 3;
  width: 100%;
max-width: none;
  min-height: 44px;
  border: 1px solid #D6DAE3;
  border-radius: 10px;
  padding: .6rem .7rem;
  background: #fff;

  /* leave native controls alone on mobile */
  -webkit-appearance: menulist;
          appearance: menulist;
  touch-action: manipulation;
  pointer-events: auto;
}
#abc-time-select:focus{
  outline: var(--abc-ring-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* Make the checkbox easier to see and focus */
.abc-form input[type="checkbox"]{
  accent-color: var(--abc-primary);
}
.abc-form input[type="checkbox"]:focus-visible{
  outline: var(--abc-ring-outer);
  outline-offset: 2px;
}

/* ===== Booking modal: Actions row (Clear form + Request booking) ===== */
#abc-booking-modal .abc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:center;
  align-items:center;

  margin-top: 1rem;
  padding-bottom: 1.25rem;   /* extra breathing room inside the modal */
}

/* Shared baseline for both buttons */
#abc-booking-modal .abc-actions .abc-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.7rem 1.2rem;
  border-radius:var(--abc-radius);
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition: filter .2s ease, transform .15s ease, background-color .2s ease, border-color .2s ease;
}

/* Secondary: Clear form (visibly secondary, not “heavy”) */
#abc-booking-modal .abc-actions .abc-clear-form{
  background: transparent;
  color: var(--abc-muted, #5B6573);               /* calmer text */
  border: 1px solid rgba(47,58,74,.10);          /* softer edge */
  box-shadow: none;
  padding: .62rem 1.05rem;                        /* slightly smaller than primary */
  min-height: 42px;                               /* tiny de-emphasis without breaking tap size too much */
}

@media (hover:hover){
  #abc-booking-modal .abc-actions .abc-clear-form:hover{
    background: rgba(238,241,246,.55);           /* lighter hover */
    border-color: rgba(47,58,74,.14);
    transform: translateY(-1px);
    filter:none;
  }
}

#abc-booking-modal .abc-actions .abc-clear-form:focus-visible{
  outline: var(--abc-ring-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* Primary: Request booking */
#abc-booking-modal .abc-actions .abc-submit.cta-btn{
  display:inline-flex;
  justify-content:center;
  color:#fff;
  border:1px solid var(--abc-primary);
  background-color:var(--abc-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}

/* Override theme hover styles inside the booking modal */
#abc-booking-modal .abc-actions .abc-submit.cta-btn,
#abc-booking-modal .abc-actions .abc-submit.cta-btn:visited{
  color:#fff;
  background-color:var(--abc-primary);
}

#abc-booking-modal .abc-actions .abc-submit.cta-btn:hover,
#abc-booking-modal .abc-actions .abc-submit.cta-btn:focus-visible{
  color:#fff !important;
  background-color:var(--abc-primary) !important;
  filter: brightness(1.1);
  text-decoration:none;
}

#abc-booking-modal .abc-actions .abc-action:active{
  transform: translateY(0);
}

#abc-booking-modal .abc-actions .abc-submit.cta-btn:focus-visible{
  outline: var(--abc-ring-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* Mobile: stack buttons (Clear form above, both full-width) */
@media (max-width: 560px){
  #abc-booking-modal .abc-actions{
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding-bottom: 1.5rem;
  }
  #abc-booking-modal .abc-actions .abc-action{
    width: 100%;
  }
}

/* Dark theme variants */
@media (prefers-color-scheme: dark){
  #abc-booking-modal .abc-actions .abc-clear-form{
    color: rgba(255,255,255,.82);
    border-color: rgba(238,241,246,.14);
    background: transparent;
  }
  @media (hover:hover){
    #abc-booking-modal .abc-actions .abc-clear-form:hover{
      background: rgba(26,35,50,.55);
      border-color: rgba(238,241,246,.18);
    }
  }
  #abc-booking-modal .abc-actions .abc-clear-form:focus-visible{
    outline: 3px solid var(--abc-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--abc-focus-contrast);
  }

  #abc-booking-modal .abc-actions .abc-submit.cta-btn{
    background-color:var(--abc-primary);
    border: 1px solid var(--abc-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
  }
  #abc-booking-modal .abc-actions .abc-submit.cta-btn:hover{
    filter: brightness(1.1);
  }
  #abc-booking-modal .abc-actions .abc-submit.cta-btn:focus-visible{
    outline: 3px solid var(--abc-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--abc-focus-contrast);
  }
  /* Field frames (dark) — mirror Selected date panel vibe */
  #abc-booking-modal .abc-field{
    border-color: rgba(238,241,246,.14);
    background: rgba(26,35,50,.55);
  }

  #abc-booking-modal .abc-field > label{
    color: var(--abc-text);
  }

  #abc-booking-modal .abc-field input,
  #abc-booking-modal .abc-field textarea{
    background:#0F1319;
    color:var(--abc-text);
    border-color:var(--abc-border);
  }

  #abc-booking-modal .abc-field input:focus-visible,
  #abc-booking-modal .abc-field textarea:focus-visible{
    outline: 3px solid var(--abc-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--abc-focus-contrast);
  }
}

/* =========================================================
   Prevent double borders: when a control sits inside a card
   wrapper (.abc-field), let the wrapper own the error border.
   ========================================================= */

#abc-booking-modal .abc-field [aria-invalid="true"]{
  border-color: transparent !important;
  box-shadow: none !important;
}

.abc-form [aria-invalid="true"]:focus-visible,
#abc-time-select[aria-invalid="true"]:focus-visible,
.abc-date-display[aria-invalid="true"]:focus-visible{
  outline: 3px solid var(--abc-accent);
  outline-offset:2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(159,42,35,.18) !important;
}

/* 4) Inline error icon & text alignment (global) */
#abc-booking-modal .abc-field-error{
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin-top: .45rem;
  color: var(--abc-danger);
  font-size: .95rem;
  line-height: 1.35;
  max-width: 40ch;   
}
#abc-booking-modal .abc-field-error .abc-err-icon{
  flex: 0 0 auto;
  margin-right: .2rem;
  margin-top: .1em;
  font-weight: 800;
  font-size: .9em;
  line-height: 1;
  opacity: .9;
}

#abc-booking-modal .abc-date-field .abc-field-error{
  margin-top: .35rem;
  padding-left: .9rem; /* keep alignment with date text */
  background: none;
  border: 0;
}

/* never generate pseudo text (keeps SR output clean) */
.abc-field-error::before{ content:none; }

/* Timezone note below time select */
#abc-tz-note {
  font-size: .85rem;              /* slightly smaller */
  color: var(--abc-muted, #5f6b7a);
  font-style: normal;             /* no italics */
  font-weight: 400;               /* keep it light */
}

/* Dark theme variant */
@media (prefers-color-scheme: dark) {
  #abc-tz-note {
    color: var(--abc-muted, #A7B1C2);
    opacity: .8;
    font-style: normal;           /* ensure no italics in dark mode either */
    font-weight: 400;
  }
}

/* Date: match time select border clarity when invalid */
#abc-booking-modal .abc-date-display[aria-invalid="true"]{
  border: 1px solid transparent !important;
  background: transparent !important;
}

/* --- Date error: reduce big pink area --- */

#abc-booking-modal .abc-date-field:has(.abc-date-display[aria-invalid="true"]){
  background: rgba(238,241,246,.35) !important;
  border-color: var(--abc-danger) !important;
  box-shadow: none;
}

/* Dark mode: keep the date display consistent */
@media (prefers-color-scheme: dark){
  #abc-booking-modal .abc-date-display{
    background:#0F1319;
    border-color: var(--abc-border);
  }
  }

/* ===== Utilities ===== */
.abc-hp,
.abc-visually-hidden{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; clip-path: inset(50%) !important;
  white-space:nowrap !important; border:0 !important;
}
.abc-sr{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important;
  white-space:nowrap !important; border:0 !important;
}
/* Neutralize UA glow */
.abc-form input:invalid, .abc-form select:invalid, .abc-form textarea:invalid{ box-shadow:none; }

/* Keep helper text invisible but announced */
.abc-modal #abc-cal-help{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; clip-path: inset(50%) !important;
  white-space:nowrap !important; border:0 !important;
}

/* Force-hide anything the JS marks hidden while success view is shown */
#abc-booking-modal [hidden],
#abc-booking-modal .abc-visually-removed {
  display: none !important;
  visibility: hidden !important;
}

/* While success is open, prevent the panel from scrolling the old content into view */
#abc-booking-modal .abc-modal__panel.abc-success-open {
  overflow: hidden !important;
}

/* ===== Motion preferences (iOS-friendly) ===== */
/* Make the panel scrollable like a native sheet on iOS */
.abc-modal__panel{
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: contain;
}

/* Animate in without leaving a persistent transform */
@media (prefers-reduced-motion: no-preference){
  /* Remove any persistent transform/transition from the base state */
  .abc-modal__panel{ transform: none; opacity: 1; transition: none; }

  /* Play a one-shot animation so final state is "transform: none" */
  .abc-modal:not([hidden]) .abc-modal__panel{
  transform: none !important; 
    animation: abc  PanelIn .18s ease-out both;
  }
  .abc-modal:not([hidden]) .abc-modal__backdrop{
    animation: abc  BackdropIn .18s ease-out both;
  }

  @keyframes abc  PanelIn {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: none;            opacity: 1; }
  }
  @keyframes abc  BackdropIn {
    from { opacity: 0; }
    to   { opacity: .5; } /* visually matches your backdrop */
  }
}

/* When hidden, just fade out; no transform needed */
@media (prefers-reduced-motion: no-preference){
  .abc-modal[hidden] .abc-modal__panel{ opacity: 0; }
}

/* ===== Admin bar offset ===== */
@media (min-width:782px){
  body.admin-bar .abc-modal__panel{ margin-top: calc(4vh + 32px); }
}

/* ===== Success dialog polish (clean + consistent) ===== */
/* Success panel container */
.abc-success {
  max-width: 560px;
  margin: .25rem auto 0;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--abc-surface, #fff);
  border: 1px solid #114628;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Title + check pill */
.abc-success-title{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .55rem;     /* moved inside the rule */
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--abc-primary, #0f172a);
}

.abc-success-title::before{
  /* visual only; SR-safe if you used aria-label on the h3 */
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 1.4em; height: 1.4em;      /* consistent hitbox */
  font-weight: 800;
  line-height: 1;
  color: #1E7D48;
  background: rgba(30,125,72,.12);
  border-radius: 999px;
transform: translateY(2px);
}

/* Recap text */
.abc-success-recap{
  margin: 0 0 .5rem;
line-height: 1.5;
  font-size: .985rem;
  color: var(--abc-muted, #475569);
}
.abc-success-recap strong{ color: var(--abc-primary, #0f172a); }
.abc-success-tz{ opacity: .75; font-weight: 500; }

/* Second line in recap: local time */
.abc-success-local{
  display: inline-block;
  margin-top: .15rem;
  font-size: .95em;
  color: var(--abc-muted, #64748b);
}

/* “Next steps” */
.abc-success-next{
  margin: 0 0 .85rem;
line-height: 1.5;
  font-size: .95rem;
  color: var(--abc-muted, #475569);
}

/* Close button */
.abc-success-close{
  appearance: none;
  display: inline-block;
  padding: .65rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
  background: #1E7D48;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-top: .9rem;   /* subtle tighten under the text */
}

.abc-modal .abc-success-close:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.abc-modal .abc-success-close:active{ transform: translateY(0); }
.abc-modal .abc-success-close:focus-visible{
  outline: var(--abc-ring-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
/* Button: only full-width on narrow screens */
@media (max-width: 480px){
  .abc-success-close{ width: 100%; }
}

/* Optional dark mode */
@media (prefers-color-scheme: dark){
  .abc-success{
    background: #0b1220;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
  }
  .abc-success-recap,
  .abc-success-next{ color: #cbd5e1; }
}

/* Mobile tweak: full-width button */
@media (max-width: 480px){
  .abc-success-close{ width: 100%; }
}

/* Gentle pop-in that respects reduced motion */
@media (prefers-reduced-motion: no-preference){
  .abc-success { animation: abc  SuccessIn .24s ease-out; }
  @keyframes abc  SuccessIn {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
}

/* ===== Dark mode ===== */
@media (prefers-color-scheme: dark){
  .abc-modal{
    color-scheme: dark;
  --abc-bg: #0F1319;
  --abc-text: #E2E6ED;
  --abc-primary: #E2E6ED;
  --abc-muted: #A8B0BE;
  --abc-base-3: #171C23;
  --abc-border: rgba(226,230,237,0.12);
  --abc-focus-contrast: #0F1319; /* Match dark bg */
    /* dark error tokens (muted) */
    --abc-danger:#ffb4ab;
    --abc-danger-ink:#3b1b1b;
    --abc-danger-bg:#2a1515;
    --abc-danger-border:#5a2d2d;
  }

.abc-modal__panel{ background:var(--abc-base-3); border-color:rgba(226,230,237,0.15); box-shadow:0 24px 70px rgba(0,0,0,.7); }

  .abc-modal-title{ color:#E2E6ED; }
.abc-cal-title{ color:#E2E6ED !important; }
  .abc-privacy-note,.abc-terms-note{ color:var(--abc-muted); }
 .abc-required-note { color: #A8B0BE; font-size: .95rem;opacity:.95; }

  .abc-cal-prev,.abc-cal-next,.abc-yearwrap select{
    background:#0F1319; color:var(--abc-text); border-color:var(--abc-border);
  }
  .abc-cal-prev:focus-visible,.abc-cal-next:focus-visible,.abc-yearwrap select:focus{
    outline:3px solid var(--abc-accent); outline-offset:2px; box-shadow:0 0 0 2px var(--abc-focus-contrast);
  }

  .abc-cal-grid > [role="row"] > .abc-cal-dow{ color:#E2E6ED; }

  .abc-cal-grid .abc-cal-day{
    background:#0F1319; color:var(--abc-text); border-color:rgba(226,230,237,0.15);
  }
  .abc-cal-grid .abc-cal-day:focus{
    outline:3px solid var(--abc-accent); outline-offset:2px; box-shadow:0 0 0 2px var(--abc-focus-contrast);
  }
  .abc-cal-grid .abc-cal-day[aria-disabled="true"]{
    opacity:1; color:#A8B0BE; background:#0F1319; border-color:rgba(226,230,237,0.12);
  }
.abc-cal-day.is-selected,
.abc-cal-grid .abc-cal-day[aria-selected="true"],
.abc-cal-cell[aria-selected="true"] .abc-cal-day{
  outline: none; 
  background: color-mix(in srgb, var(--abc-accent) 15%, transparent);  /* Purple-tinted background */
  border: 2px solid color-mix(in srgb, var(--abc-accent) 65%, transparent);  /* Stronger purple border (2px, not 1px) */
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--abc-accent) 85%, transparent);  /* Prominent inner purple ring */
  background-clip: padding-box;  /* Ensures background doesn't show under border */
  position: relative;  /* Allows proper layering */
}
.abc-cal-day.is-today:not(.is-selected){ box-shadow: inset 0 0 0 2px rgba(226,230,237,0.25); }
  #abc-time-select, .abc-date-display{
    background:#0F1319; color:var(--abc-text); border-color:var(--abc-border);
  }
  #abc-time-select:focus,.abc-date-display:focus{
    outline:3px solid var(--abc-accent); outline-offset:2px; box-shadow:0 0 0 2px var(--abc-focus-contrast);
  }

  .abc-clear-date{ color:var(--abc-text); border-color:rgba(226,230,237,0.15); background:transparent; }
  .abc-clear-date[disabled]{ opacity:.55; border-color:rgba(226,230,237,0.12); }
  .abc-date-actions .abc-clear-date{
    color:var(--abc-text);
    text-decoration-color: rgba(231,236,244,.7);
  }

  .abc-modal .abc-modal__close{ background:#0F1319; color:#E2E6ED; border-color:var(--abc-border); }

  .abc-date-actions{ border-bottom:1px solid rgba(226,230,237,0.12); }

  /* Keep required star red in dark mode as well */
  .abc-req-star{ color: var(--abc-danger); }
}

/* Dark-mode hover refinement */
@media (prefers-color-scheme: dark) and (hover:hover){
  .abc-cal-day:not([aria-disabled="true"]):hover{
    background:#171C23; border-color:rgba(226,230,237,0.15);
  }
}

/* Never show a focus ring on elements we explicitly removed from tab order */
.abc-modal [tabindex="-1"]:focus { outline: 0 !important; }

/* iOS “be gentle” block – keep fields tappable and above misc overlays */
@supports (-webkit-touch-callout: none) {
  .abc-form input,
  .abc-form select,
  .abc-form textarea {
    position: relative;           /* avoid weird overlay intersections */
    z-index: 2;
    touch-action: manipulation;   /* tap to activate, not to pan/zoom */
    -webkit-user-select: text;    /* caret-friendly */
  }
}

/* ===== Fix: mobile time <select> reliably opens ===== */
/* 3) Pointer-events sanity (plugins sometimes leave stale disabled styles) */
#abc-time-select[disabled]{ pointer-events: none; }
#abc-time-select:not([disabled]){
  pointer-events: auto;
  visibility: visible;         /* in case a skin hid it */
  display: block;              /* ensure it exists in layout */
}

/* 4) If a wrapper plugin survived, nuke it in CSS as well (belt & suspenders) */
.abc-time-native .select2-container,
.abc-time-native .choices,
.abc-time-native .nice-select{
  display: none !important;
}

/* 5) iOS Safari: while the select is focused/opening, kill momentum scrolling
      so the OS sheet isn’t cancelled by the scroll container. */
@supports selector(.abc-modal__panel:has(#abc-time-select:focus)) {
  .abc-modal__panel:has(#abc-time-select:focus){
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: contain;
  }
}

/* Picker opening state: belt & suspenders for iOS */
@supports selector(.abc-modal__panel:has(#abc-time-select)) {
  .abc-modal[data-abc-picking-time="1"] .abc-modal__panel{
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: contain;
  }
}

/* Ensure SR double-tap uses the platform picker cleanly */
#abc-time-select{
  /* Prefer default touch behavior for assistive tech */
  touch-action: auto !important;
  /* Keep it clearly tappable above nearby elements */
  z-index: 20 !important;
  pointer-events: auto !important;
}

/* ===== Mobile time list (radio group) ===== */
.abc-time-mobile[hidden]{ display:none !important; }

.abc-time-mobile__fieldset{ margin:.25rem 0 0; border:0; padding:0; }
.abc-time-mobile__list{ display:grid; gap:.4rem; max-width:380px; }

/* Row style */
.abc-time-mobile__item{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem;
  min-height:44px;                        /* WCAG 2.5.8 target size */
  border:1px solid var(--abc-border, #D6DAE3);
  border-radius:10px;
  background: var(--abc-field-bg, #FFFFFF);
  color: var(--abc-primary-2, #27313E);
  user-select:none;
}
.abc-time-mobile__item:hover{ filter:brightness(1.02); }

.abc-time-mobile__item input[type="radio"]{
  width:1.25rem; height:1.25rem; accent-color: var(--abc-primary, #2F3A4A);
}
.abc-time-mobile__item:has(input[type="radio"]:focus-visible){
  outline: var(--abc-ring-outer, 3px solid var(--abc-accent, #C4B5FD));
  outline-offset:2px; box-shadow:0 0 0 2px #fff;
}

.abc-time-mobile__label{ font-variant-numeric: tabular-nums; font-weight:600; }

/* Dark mode rows */
@media (prefers-color-scheme: dark){
  .abc-time-mobile__item{
    background:#F6F7F8;
    border-color:#B5B8C0;
    color:var(--abc-primary-2, #27313E);
  }
}

/* ===== Modal mobile ergonomics ===== */
@supports (max-height: 100dvh){ .abc-modal__panel{ max-height:88dvh; } }
.abc-modal__panel{ padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
@media (max-width:520px){
  .abc-form input, .abc-form select, .abc-form textarea, #abc-time-select, .abc-date-display{
    scroll-margin-bottom:25vh;
  }
}

/* Utility: visually hidden, still accessible to SR */
.abc-visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ===== Toggle button ===== */
#abc-time-toggle{
  display:flex; align-items:center; justify-content:space-between;
  inline-size:100%;
  padding:.8rem 1rem;
  border-radius:12px;
  border:1px solid var(--abc-border, #D6DAE3);
  /* subtle tactile depth */
  background-color: var(--abc-field-bg, #FFFFFF);
  background-image: linear-gradient(#FFFFFF, #F4F5F6);
  /* dark ink on light bg */
  color: var(--abc-primary-2, #27313E);
  font: 600 1rem/1.3 var(--abc-font, "Noto Sans", system-ui, sans-serif);
  min-height:44px;
  text-align:left;
}

/* Placeholder tone (AA) */
#abc-time-toggle.is-placeholder .abc-time-toggle__label{
  color: #A8B0BE; /* AA on the light panel */
}

/* Dark theme toggle */
@media (prefers-color-scheme: dark){
  #abc-time-toggle{
    background-color:#F6F7F8;
    background-image: linear-gradient(#FFFFFF, #F4F5F6);
    border-color:#B5B8C0;
    color:var(--abc-primary-2, #27313E);
  }
}

/* Make sure globals can't center or hide contents */
.abc-form #abc-time-toggle{
  justify-content:space-between; /* enforce two ends */
  text-align:left;
}

/* Label: ensure it takes space and truncates (prevents “blank pill”) */
#abc-time-toggle .abc-time-toggle__label{
  display:block;                 /* guard against resets */
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  visibility:visible; opacity:1; /* defeat accidental hiding */
}

/* Chevron — inline SVG, style the polyline directly (beats inline attrs) */
#abc-time-toggle .abc-time-toggle__chev{
  width:14px; height:14px;
  margin-inline-start:.75rem;
  flex:0 0 auto;
  transition: transform .2s ease;
  pointer-events:none;                   /* never steals taps */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.12)); /* subtle clarity on light bg */
}
/* Force stroke on the child so it can't be overridden by inline attrs */
#abc-time-toggle .abc-time-toggle__chev polyline{
  stroke:var(--abc-primary);
  stroke-width:2.25;                     /* a hair thicker for legibility */
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

#abc-time-toggle[aria-expanded='true'] .abc-time-toggle__chev{
  transform: rotate(180deg);
}

/* Dark theme: keep label + chevron readable */
@media (prefers-color-scheme: dark){
  #abc-time-toggle.is-placeholder .abc-time-toggle__label{ color:#A8B0BE; }
  #abc-time-toggle .abc-time-toggle__chev{
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.18));
  }
  #abc-time-toggle .abc-time-toggle__chev polyline{
    stroke:var(--abc-primary);
  }
}

/* Collapse/expand list */
.abc-time-mobile__list[hidden]{ display:none !important; }

/* Hide the entire radiogroup (legend + list) when collapsed */
.abc-time-mobile__wrap[hidden]{ display:none !important; }

/* Stronger specificity so global button styles can't override ink */
.abc-form #abc-time-toggle{ color:var(--abc-primary-2, #27313E); }
.abc-form #abc-time-toggle.is-placeholder{ color:#A8B0BE; }
@media (prefers-color-scheme: dark){
  .abc-form #abc-time-toggle{ color:var(--abc-primary-2, #27313E); }
  .abc-form #abc-time-toggle.is-placeholder{ color:#A8B0BE; }
}
/* Optional: bump contrast further when users enable Higher Contrast */
@media (prefers-contrast: more){
  #abc-time-toggle.is-placeholder .abc-time-toggle__label{ color:#9FA7B5; }
  #abc-time-toggle .abc-time-toggle__chev polyline{ stroke-width:2.5; }
}

/* ===== High contrast / forced-colors safety for booking modal ===== */
@media (forced-colors: active){

  /* Let the system own colors; keep structure */
  #abc-booking-modal .abc-modal__backdrop{
    /* avoid semi-transparent gray on top of HC palettes */
    background: Canvas;
  }

  #abc-booking-modal .abc-modal__panel{
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  /* Form fields + date pill + time select */
  #abc-booking-modal .abc-form input,
  #abc-booking-modal .abc-form select,
  #abc-booking-modal .abc-form textarea,
  #abc-booking-modal #abc-time-select,
  #abc-booking-modal .abc-date-display{
    forced-color-adjust: auto;
    background: Canvas;
    color: CanvasText;
    border: 1px solid ButtonText;
  }

  #abc-booking-modal .abc-form input:focus-visible,
  #abc-booking-modal .abc-form select:focus-visible,
  #abc-booking-modal .abc-form textarea:focus-visible,
  #abc-booking-modal #abc-time-select:focus-visible,
  #abc-booking-modal .abc-date-display:focus-visible{
    outline: 2px solid ButtonText;
    outline-offset: 2px;
    box-shadow: none;
  }

  /* Field frames in HC */
  #abc-booking-modal .abc-field{
    background: Canvas;
    border: 1px solid ButtonText;
  }

  #abc-booking-modal .abc-field input,
  #abc-booking-modal .abc-field textarea{
    background: Canvas;
    color: CanvasText;
    border: 1px solid ButtonText;
  }

  /* Calendar controls */
  #abc-booking-modal .abc-cal-prev,
  #abc-booking-modal .abc-cal-next,
  #abc-booking-modal .abc-yearwrap select{
    background: Canvas;
    color: ButtonText;
    border: 1px solid ButtonText;
  }

  #abc-booking-modal .abc-cal-prev:focus-visible,
  #abc-booking-modal .abc-cal-next:focus-visible,
  #abc-booking-modal .abc-yearwrap select:focus-visible{
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  /* Calendar days: make focus + selection obvious */
  #abc-booking-modal .abc-cal-day{
    background: Canvas;
    color: CanvasText;
    border: 1px solid ButtonText;
  }

  #abc-booking-modal .abc-cal-day:focus-visible{
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

/* Selected day – cover both class and ARIA attribute */
  #abc-booking-modal .abc-cal-day.is-selected,
  #abc-booking-modal .abc-cal-day[aria-selected="true"],
  #abc-booking-modal .abc-cal-cell[aria-selected="true"] .abc-cal-day{
    background: Highlight !important;
    color: HighlightText !important;
    border: 2px solid Highlight !important;
    outline: 2px solid HighlightText !important;
    outline-offset: 1px;
    box-shadow: none !important;
  }

/* Disabled / unavailable days – mirror selectors + structural cues */
  #abc-booking-modal .abc-cal-grid .abc-cal-day[aria-disabled="true"],
  #abc-booking-modal .abc-cal-day.is-unavailable{
    background: Canvas !important;
    color: GrayText !important;              /* may map close to CanvasText, but fine */
    border: 2px dotted ButtonText !important;
    opacity: 1 !important;
    pointer-events: none;
  }

  #abc-booking-modal .abc-cal-grid .abc-cal-day[aria-disabled="true"]::after,
  #abc-booking-modal .abc-cal-day.is-unavailable::after{
    content:"×";
    position:absolute;
    top:2px;
    right:3px;
    font-size:.8rem;
    line-height:1;
  }

  /* Mobile time radio rows + toggle pill */
  #abc-booking-modal .abc-time-mobile__item,
  #abc-booking-modal #abc-time-toggle{
    background: Canvas;
    color: CanvasText;
    border: 1px solid ButtonText;
  }

  #abc-booking-modal .abc-time-mobile__item:has(input[type="radio"]:focus-visible),
  #abc-booking-modal #abc-time-toggle:focus-visible{
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  #abc-booking-modal .abc-clear-date{
    display: inline-flex;
    padding-inline: 2px;
  }

  #abc-booking-modal .abc-form .cta-btn{
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
}

  /* Error fields – make them structurally different in HC */
  #abc-booking-modal .abc-field-error input,
  #abc-booking-modal .abc-field-error textarea,
  #abc-booking-modal .abc-field-error select{
    border: 2px dashed ButtonText !important;
    outline: none !important;         /* avoid double border + outline noise */
    forced-color-adjust: auto;
  }

  /* Error message text inside the same wrapper */
  #abc-booking-modal .abc-field-error .abc-error-msg{
    color: CanvasText !important;     /* let HC map this appropriately */
  }

#abc-booking-modal .abc-success {
  border-width: 2px !important;
}

  /* If a field contains an invalid control, make the whole field obvious */
  #abc-booking-modal .abc-field:has([aria-invalid="true"]){
    border: 2px dashed ButtonText !important;
  }

  /* And make the invalid control itself dashed as well */
  #abc-booking-modal [aria-invalid="true"]{
    border: 2px dashed ButtonText !important;
    outline: none !important;
}

  /* Primary CTA + success close button */
  #abc-booking-modal .abc-form .cta-btn,
  #abc-booking-modal .abc-success-close{
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
    box-shadow: none;
  }

  #abc-booking-modal .abc-form .cta-btn:focus-visible,
  #abc-booking-modal .abc-success-close:focus-visible{
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  /* Optional: hide decorative success icon “?” so HC doesn’t overpaint it */
  #abc-booking-modal .abc-success-title::before{
    content: "";
  }
}