/* ==========================================================================
   Appointments — public booking pages, iOS 26 liquid glass
   --------------------------------------------------------------------------
   Loaded by Views/public/_theme_head.php on /booking, /booking/view/<hash>
   and /booking/payment/<hash>. Those pages are standalone documents (Tailwind
   play CDN for layout utilities, no app stylesheet), so everything about
   colour lives HERE, as tokens.

   Two palettes, declared once on :root (light) and redefined on
   html.nz-apt-dark. The dark class is put on <html> by the head script:
   from prefers-color-scheme in "follow the device" mode (switching live when
   the OS switches), or fixed by the admin, or forced by a flat background
   colour — a dark colour means light text, a light colour dark text, always
   (appointments_public_theme()).

   Two rules this file exists to keep:
     - black text is never painted on a dark surface
     - white text is never painted on a white or light surface
   So no colour is written as a literal on a component; every colour is a
   token, and the ink painted ON the brand colour (--apt-on-brand) is chosen
   from the brand's own brightness on the server.

   Layout comes from appointments_public_layout.css (the Tailwind-named
   utilities the markup uses; the play CDN is gone since iteration 3). The
   colour utilities Tailwind used to define (text-slate-500, bg-white, …) are
   NOT in that sheet: they are defined below, on the tokens, under
   `html body.nz-apt`, so a colour class that slips into the markup in a
   later edit still follows the theme instead of staying white.

   Measured with tests/appointments_public_theme.spec.js: change a token, run
   the test.
   ========================================================================== */

:root {
    /* ---- light ---- */
    --apt-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --apt-page: #eef0f5;
    --apt-page-gradient: radial-gradient(1200px 700px at 8% -10%, rgba(var(--apt-brand-rgb), .16), transparent 60%),
        radial-gradient(900px 600px at 100% 100%, rgba(var(--apt-brand-rgb), .10), transparent 55%),
        linear-gradient(160deg, #f6f7fb 0%, #e9ecf3 100%);
    --apt-ink: #1a1a1c;
    /* body text — 15:1 on the page, 13.8:1 on glass */
    --apt-ink-2: #3d434d;
    /* secondary — 9.2:1 on glass */
    --apt-ink-soft: #5a6270;
    /* muted — 5.9:1 on glass; never lighter than this */
    --apt-glass: rgba(255, 255, 255, .70);
    --apt-glass-strong: rgba(255, 255, 255, .88);
    --apt-glass-side: rgba(255, 255, 255, .34);
    --apt-card: rgba(255, 255, 255, .64);
    --apt-stroke: rgba(26, 26, 28, .09);
    --apt-hairline: rgba(26, 26, 28, .07);
    --apt-highlight: rgba(255, 255, 255, .9);
    --apt-field: rgba(255, 255, 255, .80);
    --apt-field-focus: rgba(255, 255, 255, .98);
    --apt-chip: rgba(26, 26, 28, .06);
    --apt-chip-hover: rgba(26, 26, 28, .10);
    --apt-veil: rgba(247, 248, 250, .64);
    --apt-shadow: 0 10px 34px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --apt-shadow-lift: 0 18px 44px rgba(16, 24, 40, .13), 0 1px 2px rgba(16, 24, 40, .05);
    --apt-danger-ink: #a8213e;
    --apt-danger-bg: rgba(210, 35, 71, .10);
    --apt-success-ink: #0b6b4d;
    --apt-success-bg: rgba(11, 127, 91, .12);
    --apt-warn-ink: #7a4a00;
    --apt-warn-bg: rgba(255, 159, 10, .16);
    --apt-info-ink: #1f4fd8;
    --apt-info-bg: rgba(31, 79, 216, .10);
    --apt-scroll: rgba(26, 26, 28, .18);
    --apt-radius: 28px;
    --apt-radius-md: 18px;
    --apt-radius-sm: 14px;
    --apt-blur: blur(22px) saturate(160%);
    /* the ink ON the brand colour: set by the head partial from the brand's
       brightness; white here is only the fallback for a dark brand */
    --apt-on-brand: #ffffff;
    --apt-brand-rgb: 37, 99, 235;
    --apt-brand: #2563eb;
}

html.nz-apt-dark {
    /* ---- dark ---- */
    --apt-page: #15171e;
    --apt-page-gradient: radial-gradient(1200px 700px at 8% -10%, rgba(var(--apt-brand-rgb), .22), transparent 60%),
        radial-gradient(900px 600px at 100% 100%, rgba(var(--apt-brand-rgb), .12), transparent 55%),
        linear-gradient(160deg, #1b1d26 0%, #111318 100%);
    --apt-ink: #f2f4f8;
    /* 15.6:1 on the page, 12.9:1 on glass */
    --apt-ink-2: #c9cede;
    /* 9.4:1 on glass */
    --apt-ink-soft: #a3aabb;
    /* 6.1:1 on glass */
    --apt-glass: rgba(37, 41, 50, .66);
    --apt-glass-strong: rgba(37, 41, 50, .90);
    --apt-glass-side: rgba(255, 255, 255, .03);
    --apt-card: rgba(255, 255, 255, .055);
    --apt-stroke: rgba(255, 255, 255, .11);
    --apt-hairline: rgba(255, 255, 255, .08);
    --apt-highlight: rgba(255, 255, 255, .09);
    --apt-field: rgba(255, 255, 255, .07);
    --apt-field-focus: rgba(255, 255, 255, .12);
    --apt-chip: rgba(255, 255, 255, .08);
    --apt-chip-hover: rgba(255, 255, 255, .14);
    --apt-veil: rgba(20, 22, 30, .70);
    --apt-shadow: 0 10px 34px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .3);
    --apt-shadow-lift: 0 18px 44px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
    --apt-danger-ink: #ff93a6;
    --apt-danger-bg: rgba(255, 80, 110, .16);
    --apt-success-ink: #86e3b9;
    --apt-success-bg: rgba(52, 199, 89, .16);
    --apt-warn-ink: #ffd27f;
    --apt-warn-bg: rgba(255, 159, 10, .16);
    --apt-info-ink: #9db3ff;
    --apt-info-bg: rgba(143, 168, 255, .14);
    --apt-scroll: rgba(255, 255, 255, .22);
}

/* --------------------------------------------------------------- the page */

html {
    background: var(--apt-page);
}

body.nz-apt {
    font-family: var(--apt-font);
    -webkit-font-smoothing: antialiased;
    color: var(--apt-ink-2);
    background: var(--apt-page-gradient), var(--apt-page);
    background-attachment: fixed;
    min-height: 100vh;
    transition: background-color .3s ease, color .3s ease;
}

/* a picture background: the fixed layer under everything, veiled per theme */
body.nz-apt.nz-apt-has-image {
    background: transparent !important;
}

.nz-apt-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.nz-apt-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--apt-veil);
}

body.nz-apt ::selection {
    background: rgba(var(--apt-brand-rgb), .28);
}

/* ------------------------------------------------------------- surfaces */

/* the one big glass sheet of a page */
.nz-apt-shell {
    background: var(--apt-glass);
    background-image: linear-gradient(180deg, var(--apt-highlight) 0, rgba(255, 255, 255, 0) 48px);
    -webkit-backdrop-filter: var(--apt-blur);
    backdrop-filter: var(--apt-blur);
    border: 1px solid var(--apt-stroke);
    border-radius: var(--apt-radius);
    box-shadow: var(--apt-shadow);
    color: var(--apt-ink-2);
}

/* the sidebar of the booking sheet: a slightly different tint, hairline edge */
.nz-apt-side {
    background: var(--apt-glass-side);
    border-color: var(--apt-hairline);
}

/* a card inside the sheet */
.nz-apt-card {
    background: var(--apt-card);
    border: 1px solid var(--apt-stroke);
    border-radius: var(--apt-radius-md);
    box-shadow: inset 0 1px 0 var(--apt-highlight);
    color: var(--apt-ink-2);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease, background .22s ease;
}

button.nz-apt-card:hover:not(:disabled),
a.nz-apt-card:hover {
    box-shadow: inset 0 1px 0 var(--apt-highlight), var(--apt-shadow);
    transform: translateY(-1px);
    border-color: rgba(var(--apt-brand-rgb), .35);
}

button.nz-apt-card:active:not(:disabled) {
    transform: scale(.985);
}

.nz-apt-card.selected,
.selectable-card.selected,
.gateway-card.selected {
    border-color: rgba(var(--apt-brand-rgb), .7);
    background: rgba(var(--apt-brand-rgb), .10);
    box-shadow: 0 0 0 3px rgba(var(--apt-brand-rgb), .18);
}

/* ------------------------------------------------------------------ ink */

.nz-apt-title,
body.nz-apt h1,
body.nz-apt h2,
body.nz-apt h3,
body.nz-apt h4 {
    color: var(--apt-ink);
    letter-spacing: -.01em;
}

.nz-apt-ink { color: var(--apt-ink); }
.nz-apt-ink-2 { color: var(--apt-ink-2); }
.nz-apt-soft { color: var(--apt-ink-soft); }

.nz-apt-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apt-ink-soft);
}

/* the brand mark: a logo (light + dark pair) or the first letter */
.nz-apt-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    max-width: 180px;
    flex: 0 0 auto;
}

.nz-apt-logo img {
    max-height: 48px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.nz-apt-logo .nz-apt-logo-dark { display: none; }
html.nz-apt-dark .nz-apt-logo .nz-apt-logo-light { display: none; }
html.nz-apt-dark .nz-apt-logo .nz-apt-logo-dark { display: block; }

.nz-apt-logo.is-initial {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--apt-brand);
    color: var(--apt-on-brand);
    font-weight: 700;
    font-size: 20px;
    box-shadow: 0 6px 16px rgba(var(--apt-brand-rgb), .32), inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* ------------------------------------------------------------------ brand */

.appointments-brand-text { color: var(--apt-brand); }
.appointments-brand-bg { background-color: var(--apt-brand); color: var(--apt-on-brand); }
.appointments-brand-bg-light { background-color: rgba(var(--apt-brand-rgb), .12); }
.appointments-brand-border { border-color: var(--apt-brand); }
.appointments-brand-ring { --tw-ring-color: var(--apt-brand); }

html.nz-apt-dark .appointments-brand-text {
    /* the brand may be a dark blue; lift it so it reads on the dark glass */
    color: color-mix(in srgb, var(--apt-brand) 62%, #ffffff);
}

/* a panel painted in the brand colour (the appointment page's sidebar):
   every text inside is the ink chosen FOR that colour by measured contrast,
   never plain white. The shade over the colour goes in the direction that
   RAISES the contrast (darker under white ink, lighter under dark ink), and
   so does the fill of a pill — both set by appointments_public_theme().
   Nothing here is dimmed with opacity: a "soft" label is a mix of the ink
   and the brand, so what is painted is what is measured. */
.nz-apt-brand-panel {
    background: var(--apt-brand-panel-overlay), var(--apt-brand);
    color: var(--apt-on-brand);
}

.nz-apt-brand-panel .nz-apt-on-brand-soft {
    color: color-mix(in srgb, var(--apt-on-brand) 90%, var(--apt-brand));
}

.nz-apt-brand-panel .nz-apt-pill {
    background: var(--apt-brand-pill);
    border: 1px solid color-mix(in srgb, var(--apt-on-brand) 22%, transparent);
    color: var(--apt-on-brand);
}

/* --------------------------------------------------------------- buttons */

.nz-apt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    padding: 14px 22px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
    text-decoration: none;
}

.nz-apt-btn:active:not(:disabled) { transform: scale(.97); }

/* a disabled action is a quiet chip with soft ink — never the brand colour
   faded with opacity, which paints white text on a pale ground */
.nz-apt-btn:disabled,
.nz-apt-btn.is-primary:disabled,
.appointments-btn-primary:disabled {
    background: var(--apt-chip);
    color: var(--apt-ink-soft);
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
}

.nz-apt-btn.is-primary,
.appointments-btn-primary {
    background: var(--apt-brand);
    color: var(--apt-on-brand);
    box-shadow: 0 8px 22px rgba(var(--apt-brand-rgb), .30), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.nz-apt-btn.is-primary:hover:not(:disabled),
.appointments-btn-primary:hover:not(:disabled) {
    box-shadow: 0 12px 28px rgba(var(--apt-brand-rgb), .38), inset 0 1px 0 rgba(255, 255, 255, .22);
    filter: brightness(1.04);
}

.nz-apt-btn.is-glass {
    background: var(--apt-glass-strong);
    -webkit-backdrop-filter: var(--apt-blur);
    backdrop-filter: var(--apt-blur);
    border-color: var(--apt-stroke);
    color: var(--apt-ink);
    box-shadow: inset 0 1px 0 var(--apt-highlight), 0 1px 2px rgba(16, 24, 40, .06);
}

.nz-apt-btn.is-glass:hover:not(:disabled) {
    box-shadow: inset 0 1px 0 var(--apt-highlight), var(--apt-shadow);
}

.nz-apt-btn.is-sm {
    padding: 9px 16px;
    font-size: 13px;
}

/* the quiet text link with a chevron ("back to …") */
.nz-apt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--apt-brand);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

html.nz-apt-dark .nz-apt-link {
    color: color-mix(in srgb, var(--apt-brand) 62%, #ffffff);
}

/* hover is an underline, never a dimmed colour: the brand blue at 80%
   opacity measured 3.5:1 on the light page */
.nz-apt-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* the round icon button of the month switcher */
.nz-apt-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--apt-stroke);
    background: var(--apt-card);
    color: var(--apt-ink-2);
    cursor: pointer;
    transition: background .2s ease;
}

.nz-apt-icon-btn:hover { background: var(--apt-chip-hover); }

/* a small chip: "Step 1 of 4" */
.nz-apt-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--apt-chip);
    color: var(--apt-ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- fields */

.nz-apt-field,
body.nz-apt #bookingForm input:not([type=radio]):not([type=checkbox]),
body.nz-apt #bookingForm textarea,
body.nz-apt #bookingForm select {
    width: 100%;
    padding: 13px 14px;
    background: var(--apt-field);
    border: 1px solid var(--apt-stroke);
    border-radius: var(--apt-radius-sm);
    color: var(--apt-ink);
    box-shadow: inset 0 1px 0 var(--apt-highlight);
    outline: none;
    font: inherit;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.nz-apt-field::placeholder,
body.nz-apt #bookingForm input::placeholder,
body.nz-apt #bookingForm textarea::placeholder {
    color: var(--apt-ink-soft);
    opacity: 1;
}

.nz-apt-field:focus,
body.nz-apt #bookingForm input:focus,
body.nz-apt #bookingForm textarea:focus,
body.nz-apt #bookingForm select:focus {
    background: var(--apt-field-focus);
    border-color: rgba(var(--apt-brand-rgb), .7);
    box-shadow: 0 0 0 4px rgba(var(--apt-brand-rgb), .16);
}

body.nz-apt #bookingForm label,
body.nz-apt .nz-apt-label {
    color: var(--apt-ink-2);
    font-size: 14px;
    font-weight: 500;
}

body.nz-apt #bookingForm input[type=radio] {
    accent-color: var(--apt-brand);
    width: 16px;
    height: 16px;
}

body.nz-apt select.nz-apt-select {
    padding: 6px 28px 6px 10px;
    font-size: 12px;
    border-radius: 10px;
    background: var(--apt-field);
    border: 1px solid var(--apt-stroke);
    color: var(--apt-ink);
    outline: none;
}

/* ------------------------------------------------------------- calendar */

.appointments-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.nz-apt-day {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--apt-ink);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.nz-apt-day:hover:not(:disabled) {
    background: rgba(var(--apt-brand-rgb), .14);
}

.nz-apt-day:disabled { cursor: not-allowed; }

.nz-apt-day.is-past {
    color: var(--apt-ink-soft);
    opacity: .45;
}

.nz-apt-day.is-off {
    color: var(--apt-ink-soft);
    background: var(--apt-chip);
    opacity: .7;
}

.nz-apt-day.is-holiday {
    color: var(--apt-danger-ink);
    background: var(--apt-danger-bg);
}

.nz-apt-day.is-selected,
.nz-apt-day.is-selected:hover {
    background: var(--apt-brand);
    color: var(--apt-on-brand);
    box-shadow: 0 6px 16px rgba(var(--apt-brand-rgb), .32);
    transform: scale(1.04);
}

.nz-apt-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 6px;
}

.nz-apt-legend-dot.is-off { background: var(--apt-danger-bg); border: 1px solid var(--apt-danger-ink); }
.nz-apt-legend-dot.is-selected { background: var(--apt-brand); }

/* a time slot */
.nz-apt-slot {
    padding: 11px 8px;
    border-radius: 999px;
    border: 1px solid var(--apt-stroke);
    background: var(--apt-card);
    color: var(--apt-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.nz-apt-slot:hover {
    border-color: rgba(var(--apt-brand-rgb), .6);
    background: rgba(var(--apt-brand-rgb), .10);
}

.nz-apt-slot.is-selected {
    background: var(--apt-brand);
    border-color: transparent;
    color: var(--apt-on-brand);
}

/* ----------------------------------------------------------- notices */

.nz-apt-alert {
    padding: 14px 16px;
    border-radius: var(--apt-radius-sm);
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid transparent;
}

.nz-apt-alert.is-danger { background: var(--apt-danger-bg); color: var(--apt-danger-ink); border-color: rgba(210, 35, 71, .18); }
.nz-apt-alert.is-success { background: var(--apt-success-bg); color: var(--apt-success-ink); border-color: rgba(11, 127, 91, .18); }
.nz-apt-alert.is-warning { background: var(--apt-warn-bg); color: var(--apt-warn-ink); border-color: rgba(255, 159, 10, .22); }
.nz-apt-alert.is-info { background: var(--apt-info-bg); color: var(--apt-info-ink); border-color: rgba(31, 79, 216, .18); }

.nz-apt-success-mark {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--apt-success-bg);
    color: var(--apt-success-ink);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--apt-success-bg) 50%, transparent);
}

/* the loading veil over the content column */
.nz-apt-loading {
    background: color-mix(in srgb, var(--apt-glass-strong) 85%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--apt-ink-2);
}

/* the timeline of the appointment page: the rail runs down the left */
.nz-apt-timeline::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--apt-hairline);
}

.nz-apt-timeline-dot {
    border: 4px solid var(--apt-glass-strong);
    box-shadow: 0 0 0 1px var(--apt-stroke);
}

/* ----------------------------------------------------------- utilities */

.appointments-fade-in {
    animation: appointmentsFadeIn .3s ease-in-out;
}

@keyframes appointmentsFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .appointments-fade-in { animation: none; }
    .nz-apt-card, .nz-apt-btn, .nz-apt-day, .nz-apt-slot { transition: none; }
}

body.nz-apt ::-webkit-scrollbar { width: 6px; }
body.nz-apt ::-webkit-scrollbar-track { background: transparent; }
body.nz-apt ::-webkit-scrollbar-thumb { background: var(--apt-scroll); border-radius: 10px; }

/* ==========================================================================
   Tailwind utilities re-pointed at the tokens.
   Specificity (0,3,0) on purpose: the play CDN injects its <style> after
   this sheet, so an equal-specificity rule would lose. Anything below is a
   safety net — the markup should use the components above.
   ========================================================================== */

html body.nz-apt .text-slate-900,
html body.nz-apt .text-slate-800,
html body.nz-apt .hover\:text-slate-800:hover { color: var(--apt-ink); }

html body.nz-apt .text-slate-700,
html body.nz-apt .text-slate-600 { color: var(--apt-ink-2); }

html body.nz-apt .text-slate-500,
html body.nz-apt .text-slate-400,
html body.nz-apt .text-slate-300,
html body.nz-apt .text-slate-200 { color: var(--apt-ink-soft); }

/* white text only ever sits on the brand colour in these pages */
html body.nz-apt .text-white { color: var(--apt-on-brand); }
html body.nz-apt .text-white\/60,
html body.nz-apt .text-white\/40 { color: var(--apt-on-brand); opacity: .78; }

html body.nz-apt .bg-white,
html body.nz-apt .bg-slate-50,
html body.nz-apt .bg-slate-50\/50,
html body.nz-apt .bg-slate-100,
html body.nz-apt .hover\:bg-slate-50:hover,
html body.nz-apt .hover\:bg-slate-100:hover { background-color: var(--apt-card); }

html body.nz-apt .bg-slate-200,
html body.nz-apt .hover\:bg-slate-200:hover { background-color: var(--apt-chip-hover); }

html body.nz-apt .bg-white\/80 { background-color: color-mix(in srgb, var(--apt-glass-strong) 85%, transparent); }

html body.nz-apt .border,
html body.nz-apt .border-slate-100,
html body.nz-apt .border-slate-200,
html body.nz-apt .border-white,
html body.nz-apt .divide-slate-100 > * { border-color: var(--apt-stroke); }

html body.nz-apt .bg-red-50,
html body.nz-apt .bg-red-100 { background-color: var(--apt-danger-bg); }
html body.nz-apt .text-red-700,
html body.nz-apt .text-red-600,
html body.nz-apt .text-red-400 { color: var(--apt-danger-ink); }
html body.nz-apt .border-red-100,
html body.nz-apt .border-red-200 { border-color: rgba(210, 35, 71, .18); }

html body.nz-apt .bg-green-50,
html body.nz-apt .bg-green-100 { background-color: var(--apt-success-bg); }
html body.nz-apt .text-green-700,
html body.nz-apt .text-green-500 { color: var(--apt-success-ink); }
html body.nz-apt .border-green-100 { border-color: rgba(11, 127, 91, .18); }

html body.nz-apt .bg-amber-50 { background-color: var(--apt-warn-bg); }
html body.nz-apt .text-amber-800 { color: var(--apt-warn-ink); }
html body.nz-apt .border-amber-100,
html body.nz-apt .border-amber-200 { border-color: rgba(255, 159, 10, .22); }

html body.nz-apt .bg-blue-50,
html body.nz-apt .hover\:bg-blue-100:hover { background-color: var(--apt-info-bg); }
html body.nz-apt .text-blue-600 { color: var(--apt-info-ink); }

/* ------------------------------------------------------------------ print */

@media print {
    .no-print { display: none !important; }
    html, body.nz-apt { background: #fff !important; color: #111 !important; }
    .nz-apt-bg { display: none; }
    .nz-apt-shell { box-shadow: none; border: 1px solid #ddd; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* the short hairline in front of a section eyebrow (appointment page) */
.nz-apt-rule {
    display: inline-block;
    background: var(--apt-stroke);
}

/* ==========================================================================
   iOS rules — touch, keyboard, safe areas, the phone layout (c.4.2.26, it. 2)
   ========================================================================== */

/* the page gutter respects the notch / home indicator */
body.nz-apt {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* every control a finger lands on is at least 44pt tall (HIG) */
.nz-apt-day,
.nz-apt-slot,
.nz-apt-icon-btn,
.nz-apt-btn.is-sm {
    min-height: 44px;
}

.nz-apt-icon-btn {
    width: 44px;
    height: 44px;
}

/* the keyboard sees where it is; the mouse is not shouted at */
body.nz-apt :focus-visible {
    outline: 3px solid rgba(var(--apt-brand-rgb), .55);
    outline-offset: 2px;
}

body.nz-apt :focus:not(:focus-visible) {
    outline: none;
}

/* no blue flash on tap, no accidental text selection while tapping days */
.nz-apt-day,
.nz-apt-slot,
.nz-apt-btn,
.nz-apt-card {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* --------------------------------------------------------- the phone */

@media (max-width: 767px) {
    body.nz-apt {
        padding-top: max(.75rem, env(safe-area-inset-top));
        align-items: flex-start;
    }

    .nz-apt-shell {
        border-radius: 22px;
    }

    /* the calendar is not a sidebar widget on a phone: it lives INSIDE
       step 3, where appointments_public.js moves it. In the sidebar it is
       hidden, so the visitor opens on the services, not on a greyed-out
       month. */
    #sidebarColumn #calendarSection {
        display: none;
    }

    #step3 #calendarSection {
        display: block;
        opacity: 1;
        pointer-events: auto;
        margin-bottom: 20px;
        padding: 16px;
        border-radius: var(--apt-radius-md);
        background: var(--apt-card);
        border: 1px solid var(--apt-stroke);
    }

    /* the sidebar shrinks to the brand row + the summary */
    #sidebarColumn {
        padding: 18px 18px 6px;
    }

    #sidebarColumn > .mb-8 {
        margin-bottom: 12px;
    }

    #sidebarColumn .nz-apt-logo,
    #sidebarColumn .nz-apt-logo img,
    #sidebarColumn .nz-apt-logo.is-initial {
        height: 40px;
        width: auto;
    }

    #sidebarColumn .nz-apt-logo.is-initial {
        width: 40px;
    }

    /* seven 44pt squares do not fit a phone's width: the cells give up the
       square, keep the 44pt height and share the row equally */
    .appointments-calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    #step3 .nz-apt-day {
        aspect-ratio: auto;
        min-width: 0;
        height: 44px;
        font-size: 15px;
        border-radius: 10px;
    }

    /* one column of times reads faster than three narrow ones */
    #slotsList {
        grid-template-columns: repeat(2, 1fr);
    }

    /* the primary action sits at the thumb, over the content */
    #btnStep3Continue,
    #bookingForm .nz-apt-btn.is-primary[type=submit] {
        position: sticky;
        bottom: max(8px, env(safe-area-inset-bottom));
        z-index: 2;
    }

    .nz-apt-title.text-xl {
        font-size: 22px;
        letter-spacing: -.02em;
    }
}

/* ==========================================================================
   Progress and motion (c.4.2.26, iteration 5)
   ========================================================================== */

/* four segments, the done ones and the current one in the brand colour */
.nz-apt-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
}

.nz-apt-progress span {
    flex: 1 1 0;
    height: 4px;
    border-radius: 999px;
    background: var(--apt-chip);
    transition: background .3s ease;
}

.nz-apt-progress[data-step="1"] span:nth-child(-n+1),
.nz-apt-progress[data-step="2"] span:nth-child(-n+2),
.nz-apt-progress[data-step="3"] span:nth-child(-n+3),
.nz-apt-progress[data-step="4"] span:nth-child(-n+4) {
    background: var(--apt-brand);
}

.nz-apt-progress.is-done span {
    background: var(--apt-success-ink);
}

/* a step slides in from the side it comes from: forward from the right,
   back from the left — the iOS navigation push/pop */
.nz-apt-enter-forward {
    animation: nzAptEnterForward .32s cubic-bezier(.2, .8, .2, 1);
}

.nz-apt-enter-back {
    animation: nzAptEnterBack .32s cubic-bezier(.2, .8, .2, 1);
}

@keyframes nzAptEnterForward {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes nzAptEnterBack {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .nz-apt-enter-forward,
    .nz-apt-enter-back {
        animation: none;
    }
    .nz-apt-progress span {
        transition: none;
    }
}

/* a service's own Font Awesome icon, in the brand tile the default bolt uses */
.nz-apt-service-icon {
    font-size: 20px;
    line-height: 1;
}