/* =============================================================================
   Bahij TheSans Arabic — self-hosted, loaded only when needed.
   Place font files in public/fonts/:
     Bahij_TheSansArabic-Bold.woff2 / .woff
     Bahij_TheSansArabic-Plain.woff2 / .woff
   ============================================================================= */
@font-face {
    font-family: 'BahijTheSansArabic';
    src: url('/fonts/Bahij_TheSansArabic-Plain.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BahijTheSansArabic';
    src: url('/fonts/Bahij_TheSansArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BahijTheSansArabic';
    src: url('/fonts/Bahij_TheSansArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/**
 * FILE: public/css/app.css
 * PURPOSE: Mobile-first responsive stylesheet for the Al Salam booking flow.
 *          Covers layout, step indicator, all UI components, RTL support,
 *          accessibility, print, and embed chrome modes.
 * USED BY: views/layout.php, views/embed-layout.php, all step views.
 *
 * CONVENTIONS:
 *   - All colours and core spacing defined as CSS custom properties on :root.
 *   - Use logical properties (margin-inline, padding-inline, inset-inline)
 *     instead of left/right — never use left/right for layout.
 *   - [dir="rtl"] overrides are co-located with the component they affect.
 *   - Touch targets are >= 44 x 44 px (WCAG 2.5.5).
 *   - Focus rings use --color-primary at 2 px offset — never removed.
 *   - @media (prefers-reduced-motion) disables animations/transitions.
 *   - @media print hides nav, footer, and step indicator.
 *   - Embed chrome modes (.chrome-minimal, .chrome-none) hide shell chrome.
 *
 * SECTIONS (Ctrl+F the section title):
 *   1. Custom Properties (design tokens)
 *   2. CSS Reset & Base
 *   3. Layout — container, main, sections
 *   4. Header
 *   5. Footer
 *   6. Step Indicator
 *   7. Card
 *   8. Buttons
 *   9. Form Fields (inputs, labels, helpers)
 *  10. Branch List Item
 *  11. Doctor Card
 *  12. Date Pill & Time Slot
 *  13. Modal
 *  14. Review Row
 *  15. Loading Skeleton
 *  16. Error Banner
 *  17. Yellow Notice
 *  18. Language Pill
 *  19. Embed Chrome Modes
 *  20. Accessibility Utilities
 *  21. Print Styles
 */

/* =============================================================================
   1. Custom Properties — design tokens
   All colours, radii, shadows, and spacing live here.
   Reference these via var(--token-name) — never hardcode values.
   ============================================================================= */
:root {
    /* --- Brand colours --- */
    --color-primary:         #037B63;  /* teal — buttons, active states, step circles */
    --color-primary-dark:    #025c4a;  /* hover / pressed teal */
    --color-primary-light:   #e6f4f1;  /* very light teal for selected backgrounds */
    --color-footer:          #208882;  /* footer bar teal */
    --color-mint:            #D1FAE5;  /* legacy — kept for any external refs */
    --color-lang-bg:         #0d2d52;  /* language switch track — dark navy */
    --color-lang-text:       #ffffff;  /* label on dark track */

    /* --- Semantic colours --- */
    --color-bg:              #FFFFFF;
    --color-surface:         #F9FAFB;  /* off-white used on page background behind cards */
    --color-text:            #333333;
    --color-muted:           #6B7280;
    --color-border:          #E5E7EB;
    --color-border-focus:    #037B63;

    /* --- Feedback colours --- */
    --color-error:           #DC2626;
    --color-error-bg:        #FEF2F2;
    --color-warning-bg:      #FEF3C7;
    --color-warning-text:    #92400E;
    --color-success:         #037B63;

    /* --- Skeleton shimmer --- */
    --color-skeleton-base:   #E5E7EB;
    --color-skeleton-shine:  #F3F4F6;

    /* --- Typography --- */
    --font-family:           system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-size-xs:          0.75rem;   /* 12px */
    --font-size-sm:          0.875rem;  /* 14px */
    --font-size-base:        1rem;      /* 16px */
    --font-size-md:          1.0625rem; /* 17px */
    --font-size-lg:          1.125rem;  /* 18px */
    --font-size-xl:          1.25rem;   /* 20px */
    --font-size-2xl:         1.5rem;    /* 24px */

    /* --- Spacing --- */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-7:  1.75rem;   /* 28px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* --- Radii --- */
    --radius-sm:   0.375rem; /* 6px */
    --radius-md:   0.75rem;  /* 12px — inputs, buttons, cards */
    --radius-lg:   1rem;     /* 16px */
    --radius-full: 9999px;   /* pill / circle */

    /* --- Shadows --- */
    --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --shadow-md:   0 4px 16px 0 rgb(0 0 0 / 0.10);
    --shadow-lg:   0 8px 32px 0 rgb(0 0 0 / 0.14);

    /* --- Transitions --- */
    --transition-fast:   150ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   300ms ease;

    /* --- Component sizes --- */
    --input-height:      3.5rem;   /* 56px */
    --button-height:     3.5rem;   /* 56px */
    --touch-min:         2.75rem;  /* 44px — minimum touch target */
    --header-height:     3.75rem;  /* 60px */
    --step-circle-size:  3rem;     /* 48px — fits an icon plus padding */
    --container-max:     50rem;    /* 800px */
    --container-padding: var(--space-4);
}


/* =============================================================================
   2. CSS Reset & Base
   ============================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-surface);
    line-height: 1.6;
    min-height: 100dvh;
}

/* Arabic typography — Bahij TheSans Arabic */
[dir="rtl"] body {
    font-family: 'BahijTheSansArabic', 'Segoe UI', 'Noto Sans Arabic', system-ui, Arial, sans-serif;
    font-weight: 400;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: 'BahijTheSansArabic', 'Segoe UI', 'Noto Sans Arabic', system-ui, Arial, sans-serif;
    font-weight: 700;
}

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--color-primary-dark);
}

img,
svg {
    display: block;
    max-width: 100%;
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}


/* =============================================================================
   3. Layout — container, page wrapper, sections
   ============================================================================= */

/* Page wrapper — vertically stacks header, main, footer */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* Main content area grows to fill available vertical space */
.page-main {
    flex: 1;
    padding-block: var(--space-6);
    padding-inline: var(--container-padding);
}

/* Centred container; caps width at 800px */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}

/* Section title at top of each step */
.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
    margin-block-end: var(--space-6);
    text-align: center;
}

.section-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    text-align: center;
    margin-block-start: calc(-1 * var(--space-4));
    margin-block-end: var(--space-6);
}


/* =============================================================================
   4. Header
   ============================================================================= */
.site-header {
    background-color: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
    min-height: var(--header-height);
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    padding-block: var(--space-3);
    padding-inline: var(--container-padding);
    max-width: var(--container-max);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .header-inner {
        padding-block: var(--space-4);
    }
}

/* Logo — inline-start of header */
.header-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.header-logo img {
    display: block;
    height: 2.75rem;
    width: auto;
}

@media (min-width: 768px) {
    .header-logo img {
        height: 3.5rem;
    }
}

/* Icon navigation — inline-end of header */
.header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.header-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
    padding-inline: var(--space-2);
    gap: var(--space-1);
    font-size: var(--font-size-sm);
}

.header-nav-btn:hover,
.header-nav-btn:focus-visible {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

/* Hamburger — visible on mobile, hidden on larger screens */
.header-hamburger {
    display: flex;
}

@media (min-width: 640px) {
    .header-hamburger {
        display: none;
    }

    .header-nav-desktop {
        display: flex;
    }
}

.header-nav-desktop {
    display: none;
}

@media (min-width: 640px) {
    .header-nav-desktop {
        display: flex;
    }
}

/* Mobile menu drawer */
.mobile-menu {
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    background-color: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
    padding: var(--space-4);
    flex-direction: column;
    gap: var(--space-2);
    z-index: 99;
}

.mobile-menu.is-open {
    display: flex;
}


/* =============================================================================
   5. Footer
   ============================================================================= */
.site-footer {
    background-color: var(--color-footer);
    color: #ffffff;
    text-align: center;
    padding-block: var(--space-3);
    padding-inline: var(--container-padding);
    font-size: var(--font-size-xs);
}

.site-footer a {
    color: rgba(255, 255, 255, 0.85);
}

.site-footer a:hover {
    color: #ffffff;
}


/* =============================================================================
   6. Step Indicator
   5 numbered circles connected by lines; labels sit below each circle.
   States: pending (grey), active (teal), complete (teal + checkmark).
   ============================================================================= */
.step-indicator {
    /* Generous block padding separates the strip from the header above
       and the page content below, so the indicator reads as a distinct
       wayfinding band rather than a sticker glued to the header. */
    padding-block-start: var(--space-8);
    padding-block-end: var(--space-7);
    padding-inline: var(--container-padding);
    max-width: var(--container-max);
    margin-inline: auto;
}

.step-indicator__list {
    /* Flex with space-between guarantees the 5 items distribute across
       the full container width regardless of intrinsic content size —
       the previous grid approach was being collapsed by an upstream
       layout context, leaving the circles bunched in the middle. */
    --track-thickness: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* No gap on purpose — equal-width flex slots place each circle at the
       centre of its 1/5 share, which is exactly where the 10% track inset
       needs them. Adding a gap would skew that alignment. */
    position: relative;
}

.step-indicator__list::before,
.step-indicator__list::after {
    content: '';
    position: absolute;
    inset-block-start: calc(var(--step-circle-size) / 2 - (var(--track-thickness) / 2));
    height: var(--track-thickness);
    /* Anchor track between the centres of the first and last circle.
       With 5 equal-width flex slots, those centres sit at 10% and 90%
       of the container, so a 10% inset on each end aligns the track. */
    inset-inline-start: 10%;
    inset-inline-end: 10%;
    border-radius: 999px;
    pointer-events: none;
}

.step-indicator__list::before {
    background-color: var(--color-border);
}

.step-indicator__list::after {
    background-color: var(--color-primary);
    /* The track region spans 10%→90% of the strip (80% of total width).
       --progress comes in as 0-100% representing how far through that
       region the user is, so multiply by 0.8 to keep the fill within
       the region. Without this, --progress: 100% draws a 100%-wide line
       starting at the 10% inset, which trails past the last circle. */
    width: calc(var(--progress, 0%) * 0.8);
    transition: width var(--transition-base) ease;
}

[dir="rtl"] .step-indicator__list::after {
    inset-inline-end: 10%;
    inset-inline-start: auto;
}

.step-indicator__item {
    /* `flex: 1` makes each item claim an equal share of the strip so the
       circles sit at the centres of equal-width slots, mirroring the
       distribution the reference design uses. */
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

/* Each item is wrapped in a button (when complete) or span (otherwise);
   normalise both to behave like an interactive node. */
.step-indicator__node {
    all: unset;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    cursor: default;
    text-align: center;
    color: inherit;
    width: 100%;
}

.step-indicator__item.is-complete .step-indicator__node {
    cursor: pointer;
}

.step-indicator__item.is-complete .step-indicator__node:hover .step-indicator__circle,
.step-indicator__item.is-complete .step-indicator__node:focus-visible .step-indicator__circle {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px var(--color-mint);
}

.step-indicator__node:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-full);
}

.step-indicator__circle {
    width: var(--step-circle-size);
    height: var(--step-circle-size);
    border-radius: var(--radius-full);
    background-color: var(--color-bg);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    border: 2px solid var(--color-border);
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.step-indicator__icon {
    width: 55%;
    height: 55%;
    display: block;
}

.step-indicator__item.is-active .step-indicator__circle {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-mint);
}

.step-indicator__item.is-complete .step-indicator__circle {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.step-indicator__label {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

.step-indicator__item.is-active .step-indicator__label {
    color: var(--color-primary);
    font-weight: 700;
}

.step-indicator__item.is-complete .step-indicator__label {
    color: var(--color-text);
    font-weight: 600;
}

@media (max-width: 480px) {
    .step-indicator__label {
        font-size: 0.6875rem;
    }
}


/* =============================================================================
   7. Card
   White container used for each step's content.
   ============================================================================= */
.card {
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* Tighter padding on small screens */
@media (max-width: 480px) {
    .card {
        padding: var(--space-4);
        border-radius: var(--radius-sm);
    }
}


/* =============================================================================
   8. Buttons
   ============================================================================= */

/* ---- Primary (teal fill) ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--button-height);
    min-width: var(--touch-min);
    padding-inline: var(--space-6);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Full-width variant */
.btn--full {
    width: 100%;
}

/* Primary — teal fill */
.btn--primary {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.btn--primary:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn--primary:active:not(:disabled) {
    background-color: var(--color-primary-dark);
    transform: scale(0.98);
}

/* Secondary — outline teal */
.btn--secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--secondary:hover:not(:disabled) {
    background-color: var(--color-primary-light);
}

/* Ghost — no border, no fill; used for text links that look like buttons */
.btn--ghost {
    background-color: transparent;
    color: var(--color-primary);
    border-color: transparent;
    height: auto;
    padding-inline: var(--space-2);
}

.btn--ghost:hover:not(:disabled) {
    text-decoration: underline;
}

/* Icon button — circular, 44x44 minimum */
.btn--icon {
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}


/* =============================================================================
   9. Form Fields — inputs, labels, helpers, error states
   ============================================================================= */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-block-end: var(--space-5);
}

.field__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

/* Red asterisk for required fields */
.field__label .required-mark {
    color: var(--color-error);
    margin-inline-start: var(--space-1);
}

/* Input wrapper — allows icon prefix slot */
.field__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Prefix icon inside input */
.field__input-icon {
    position: absolute;
    inset-inline-start: var(--space-4);
    color: var(--color-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.field__input {
    width: 100%;
    height: var(--input-height);
    padding-inline: var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

/* Shift content right when prefix icon is present */
.field__input-wrap .field__input-icon ~ .field__input {
    padding-inline-start: calc(var(--space-4) + 1.25rem + var(--space-3));
}

[dir="rtl"] .field__input-wrap .field__input-icon ~ .field__input {
    padding-inline-end: calc(var(--space-4) + 1.25rem + var(--space-3));
    padding-inline-start: var(--space-4);
}

.field__input::placeholder {
    color: var(--color-muted);
}

.field__input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgb(3 123 99 / 0.15);
}

/* Error state */
.field--error .field__input {
    border-color: var(--color-error);
}

.field--error .field__input:focus {
    box-shadow: 0 0 0 3px rgb(220 38 38 / 0.15);
}

/* Helper / error text below field */
.field__helper {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
}

.field__error-msg {
    font-size: var(--font-size-xs);
    color: var(--color-error);
}

/* Select element */
.field__select {
    width: 100%;
    height: var(--input-height);
    padding-inline: var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-inline-end: calc(var(--space-4) + 1.5rem);
}

[dir="rtl"] .field__select {
    background-position: left var(--space-4) center;
    padding-inline-end: var(--space-4);
    padding-inline-start: calc(var(--space-4) + 1.5rem);
}

.field__select:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgb(3 123 99 / 0.15);
}


/* =============================================================================
   10. Branch List Item
   White card with teal border, avatar circle on inline-start, chevron on end.
   ============================================================================= */
.branch-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
    text-align: start;
    width: 100%;
    margin-block-end: var(--space-3);
    min-height: var(--touch-min);
}

.branch-item:hover,
.branch-item:focus-visible {
    border-color: var(--color-primary);
    border-width: 2px;
    box-shadow: var(--shadow-sm);
    outline: none;
}

.branch-item.is-selected {
    border-color: var(--color-primary);
    border-width: 2px;
    background-color: var(--color-primary-light);
}

/* Avatar circle */
.branch-item__avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-light);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.branch-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Modifier: avatar holds an icon (location pin / specialty PNG) rather
   than an avatar photo. White interior with a brand-coloured ring frames
   the icon so the pictogram reads as the focal point — matches the
   "logo-on-white" treatment used in the official clinics-and-centers
   page. The circle is sized up vs the default avatar so the 36px icon
   has room to breathe. */
.branch-item__avatar--icon {
    width: 3.25rem;
    height: 3.25rem;
    background-color: #ffffff;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}
.branch-item__avatar--icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Text block */
.branch-item__body {
    flex: 1;
    min-width: 0;
}

.branch-item__name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.branch-item__meta {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    margin-block-start: var(--space-1);
}

/* Chevron — inline-end */
.branch-item__chevron {
    flex-shrink: 0;
    color: var(--color-muted);
    transition: transform var(--transition-fast);
}

[dir="rtl"] .branch-item__chevron {
    transform: scaleX(-1);
}

.branch-item:hover .branch-item__chevron {
    color: var(--color-primary);
    transform: translateX(2px);
}

[dir="rtl"] .branch-item:hover .branch-item__chevron {
    transform: scaleX(-1) translateX(2px);
}


/* =============================================================================
   11. Doctor Card
   Circular photo overlapping top of card, name centered teal bold,
   two tab buttons below (Bio / Appointment, teal active fill).
   ============================================================================= */
.doctor-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    padding-block-start: calc(var(--space-6) + 2.25rem); /* room for overflowing photo */
    position: relative;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
}

.doctor-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

/* Circular photo — centred, overhangs the top edge */
.doctor-card__photo-wrap {
    position: absolute;
    inset-block-start: calc(-1 * 2.25rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-full);
    border: 3px solid var(--color-primary);
    overflow: hidden;
    background-color: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[dir="rtl"] .doctor-card__photo-wrap {
    transform: translateX(50%);
}

.doctor-card__photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Default icon when no photo */
.doctor-card__photo-icon {
    font-size: 2rem;
    color: var(--color-primary);
}

.doctor-card__name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-block-end: var(--space-1);
}

.doctor-card__specialty {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    margin-block-end: var(--space-4);
}

/* Tab row — Bio / Appointment */
.doctor-card__tabs {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

.doctor-card__tab {
    flex: 1;
    max-width: 8rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.doctor-card__tab:hover,
.doctor-card__tab.is-active {
    background-color: var(--color-primary);
    color: #ffffff;
}

.doctor-card__tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Tab content panel */
.doctor-card__panel {
    display: none;
    text-align: start;
    margin-block-start: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.7;
}

.doctor-card__panel.is-active {
    display: block;
}

.doctor-card__panel-heading {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-block-end: var(--space-2);
    margin-block-start: var(--space-4);
}

/* Doctor list grid — wrap on wider screens. The photo is positioned with
   negative top so it overhangs each card by ~50px; the row gap must be
   noticeably larger than that overhang or consecutive cards visually
   collide with the next row's photo. */
.doctor-list {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--space-10);
    row-gap: 5rem;
    padding-block-start: 2.5rem;
    padding-block-end: 2rem;
}

@media (min-width: 640px) {
    .doctor-list {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =============================================================================
   12. Date Pill & Time Slot
   ============================================================================= */

/* Date pill row — horizontal scroll strip */
.date-strip {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-block-end: var(--space-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.date-strip::-webkit-scrollbar {
    display: none;
}

/* Individual date pill — day number on top, day name below */
.date-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    height: 4rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border);
    background-color: var(--color-bg);
    cursor: pointer;
    padding-inline: var(--space-2);
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);
    flex-shrink: 0;
    user-select: none;
}

.date-pill:hover {
    border-color: var(--color-primary);
}

.date-pill.is-selected {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.date-pill:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Disabled date pill — no upstream availability for this day. */
.date-pill:disabled,
.date-pill[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: var(--color-bg-muted, var(--color-bg));
}
.date-pill:disabled:hover,
.date-pill[aria-disabled="true"]:hover {
    border-color: var(--color-border);
}

.date-pill__number {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1;
}

.date-pill__day {
    font-size: var(--font-size-xs);
    margin-block-start: var(--space-1);
    color: var(--color-muted);
}

.date-pill.is-selected .date-pill__day {
    color: rgba(255, 255, 255, 0.85);
}

/* Week navigation */
.week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-3);
}

/* In RTL the flex main-axis doesn't auto-reverse, so force it and
   flip the chevron SVGs so they still point the semantically-correct
   direction (prev → right, next → left). */
[dir="rtl"] .week-nav {
    flex-direction: row-reverse;
}
[dir="rtl"] .week-nav .btn--icon svg {
    transform: scaleX(-1);
}

.week-nav__label {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

@media (min-width: 768px) {
    .week-nav__label {
        font-size: var(--font-size-2xl);
    }
}

/* Time slot grid */
.timeslot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
}

.timeslot-pill {
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-border);
    background-color: var(--color-bg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    user-select: none;
}

.timeslot-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.timeslot-pill.is-selected {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.timeslot-pill:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.timeslot-pill:disabled,
.timeslot-pill[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* No-slots message */
.no-slots-msg {
    text-align: center;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    padding-block: var(--space-8);
}


/* =============================================================================
   13. Modal
   Backdrop + centred card with close button.
   ============================================================================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--container-padding);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 36rem;
    width: 100%;
    position: relative;
    box-shadow: var(--shadow-lg);
    max-height: 90dvh;
    overflow-y: auto;
    transform: translateY(1rem);
    transition: transform var(--transition-base);
}

.modal-backdrop.is-open .modal {
    transform: translateY(0);
}

/* Close button — top inline-end */
.modal__close {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
}

.modal__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-block-end: var(--space-4);
    padding-inline-end: var(--space-8); /* avoid overlap with close btn */
}

[dir="rtl"] .modal__title {
    padding-inline-end: 0;
    padding-inline-start: var(--space-8);
}


/* =============================================================================
   14. Review Row
   Label (uppercase small) / value (bold) pairs with avatar circle.
   ============================================================================= */
.review-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--color-border);
}

.review-row:last-of-type {
    border-block-end: none;
}

/* Optional avatar circle */
.review-row__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-light);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    overflow: hidden;
}

.review-row__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-row__body {
    flex: 1;
    min-width: 0;
}

/* Uppercase small label */
.review-row__label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-block-end: var(--space-1);
}

/* Bold value */
.review-row__value {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
}


/* =============================================================================
   15. Loading Skeleton
   Animated grey shimmer for in-flight content placeholders.
   ============================================================================= */
@keyframes skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-skeleton-base) 25%,
        var(--color-skeleton-shine) 50%,
        var(--color-skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
    display: block;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: var(--color-skeleton-base);
    }
}

/* Common skeleton shapes */
.skeleton--text {
    height: 1rem;
    width: 100%;
    margin-block-end: var(--space-2);
}

.skeleton--text-short {
    height: 1rem;
    width: 60%;
    margin-block-end: var(--space-2);
}

.skeleton--heading {
    height: 1.5rem;
    width: 70%;
    margin-block-end: var(--space-4);
}

.skeleton--circle {
    border-radius: var(--radius-full);
}

.skeleton--button {
    height: var(--button-height);
    border-radius: var(--radius-md);
    width: 100%;
}

.skeleton--input {
    height: var(--input-height);
    border-radius: var(--radius-md);
    width: 100%;
}


/* =============================================================================
   16. Error Banner
   ============================================================================= */
.error-banner {
    background-color: var(--color-error);
    color: #ffffff;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    /* ARIA: the element should have role="alert" aria-live="polite" in HTML */
}

.error-banner__icon {
    flex-shrink: 0;
    margin-block-start: 1px;
}

.error-banner__msg {
    flex: 1;
}

/* Inline field error (softer background variant) */
.error-inline {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    margin-block-end: var(--space-4);
}


/* =============================================================================
   17. Yellow Notice (arrive 15 min early, cancellation info)
   ============================================================================= */
/* Browser default `[hidden] { display: none }` is overridden by class-level
   `display: flex`, leading to ghost-empty banners when JS state is missing.
   Restore `hidden` precedence with a more-specific selector. */
.notice-yellow[hidden] {
    display: none;
}

.notice-yellow {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-block: var(--space-4);
}

.notice-yellow__icon {
    flex-shrink: 0;
}


/* =============================================================================
   16b. Doctor bio panel — body, meta, and language pills
   ============================================================================= */
.doctor-bio__body {
    color: var(--color-text);
    line-height: 1.55;
}

.doctor-bio__body ul,
.doctor-bio__body ol {
    margin: 0 0 var(--space-3) 0;
    padding-inline-start: var(--space-5);
}

.doctor-bio__body li {
    margin-block-end: var(--space-2);
}

.doctor-bio__body p {
    margin: 0 0 var(--space-3) 0;
}

.doctor-bio__body strong,
.doctor-bio__body b {
    font-weight: 700;
    color: var(--color-text);
}

.doctor-bio__languages {
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
}

.doctor-bio__languages-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-2) 0;
}

.language-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.language-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-mint);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    border-radius: var(--radius-full);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    line-height: 1.2;
    border: 1px solid transparent;
    transition: border-color var(--transition-fast);
}

.language-pill:hover {
    border-color: var(--color-primary);
}


/* =============================================================================
   17a. Breadcrumbs
   Horizontal trail above each step view showing the user's prior choices.
   Each completed crumb is a clickable button (back-nav); the active one
   is rendered as static text.
   ============================================================================= */
.breadcrumbs {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-block-end: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
}

.breadcrumbs::-webkit-scrollbar {
    display: none;
}

.breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    line-height: 1.2;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.breadcrumbs__link,
.breadcrumbs__current {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    line-height: 1.1;
    max-width: 14rem;
}

.breadcrumbs__link {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-mint);
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
    background-color: var(--color-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.breadcrumbs__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.breadcrumbs__current {
    background-color: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
    cursor: default;
}

.breadcrumbs__icon {
    flex-shrink: 0;
}

.breadcrumbs__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.breadcrumbs__sep {
    display: inline-flex;
    align-items: center;
    color: var(--color-muted);
    margin-inline: var(--space-1);
    flex-shrink: 0;
}

[dir="rtl"] .breadcrumbs__sep svg {
    transform: scaleX(-1);
}


/* =============================================================================
   17b. Step back link
   Inline pill rendered above each step's title — returns the user to the
   previous step via /api/v1/booking/back.
   ============================================================================= */
.step-back {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    margin-block-end: var(--space-4);
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
    line-height: 1.2;
}

.step-back:hover {
    background-color: var(--color-mint);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.step-back:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.step-back:active {
    transform: translateY(1px);
}

[dir="rtl"] .step-back__icon {
    transform: scaleX(-1);
}


/* =============================================================================
   18. Language Pill (legacy) + Language Switcher (segmented)
   ============================================================================= */
.lang-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background-color: var(--color-mint);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background-color var(--transition-fast);
    min-height: var(--touch-min);
    text-decoration: none;
}

.lang-pill:hover {
    background-color: #a7f3d0; /* slightly darker mint on hover */
}

.lang-pill:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Segmented language switcher — pill-shaped track with a sliding active state.
   Used in the header (compact) and the mobile drawer (--block, full width). */
.lang-switch {
    display: inline-flex;
    align-items: stretch;
    background-color: var(--color-lang-bg);
    border-radius: var(--radius-full);
    padding: 3px;
    gap: 0;
    line-height: 1;
}

.lang-switch__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
    white-space: nowrap;
}

.lang-switch__opt:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.12);
}

.lang-switch__opt.is-active {
    background-color: #ffffff;
    color: var(--color-lang-bg);
    box-shadow: var(--shadow-sm);
    cursor: default;
}

.lang-switch__opt:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Block variant — used inside the mobile drawer. */
.lang-switch--block {
    display: flex;
    width: 100%;
}

.lang-switch--block .lang-switch__opt {
    flex: 1 1 0;
    min-height: var(--touch-min);
    font-size: var(--font-size-sm);
}


/* =============================================================================
   19. Embed Chrome Modes
   .chrome-minimal — hide header + footer (step indicator remains)
   .chrome-none    — hide header, footer, AND step indicator
   ============================================================================= */

/* chrome=minimal: hide shell chrome, keep step indicator */
.chrome-minimal .site-header,
.chrome-minimal .site-footer {
    display: none !important;
}

/* chrome=none: hide everything except the booking content itself */
.chrome-none .site-header,
.chrome-none .site-footer,
.chrome-none .step-indicator {
    display: none !important;
}

/* Embed backgrounds default to transparent so host page shows through */
.embed-mode body {
    background-color: transparent;
}

.embed-mode .page-main {
    padding-block-start: 0;
}

/* ── Embed toolbar (slim bar shown when full header is hidden) ───────── */
.embed-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border-block-end: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff);
}
.embed-toolbar__group {
    display: inline-flex;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}
.embed-toolbar__lang {
    padding: 0.25rem 0.6rem;
    text-decoration: none;
    color: var(--color-muted, #6b7280);
    line-height: 1.2;
    font-weight: 600;
}
.embed-toolbar__lang.is-active {
    background: var(--color-primary, #0f766e);
    color: #fff;
}
.embed-toolbar__lang:focus-visible {
    outline: 2px solid var(--color-primary, #0f766e);
    outline-offset: 2px;
}
.embed-toolbar__signout {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    color: var(--color-muted, #6b7280);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.embed-toolbar__signout:hover,
.embed-toolbar__signout:focus-visible {
    color: var(--color-primary, #0f766e);
    border-color: var(--color-primary, #0f766e);
    outline: none;
}

/* ── User menu (avatar dropdown) ────────────────────────────────────── */
.user-menu {
    position: relative;
    display: inline-flex;
}
.user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
}
.user-menu__trigger:hover,
.user-menu__trigger:focus-visible,
.user-menu.is-open .user-menu__trigger {
    border-color: var(--color-primary, #0f766e);
    outline: none;
}
.user-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-primary, #0f766e);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
}
.user-menu__avatar--lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
}
.user-menu__trigger-name {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu__caret {
    flex-shrink: 0;
    color: var(--color-muted, #6b7280);
}

.user-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    min-width: 18rem;
    max-width: 22rem;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 10px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 0.25rem 0;
    z-index: 50;
}
.user-menu__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-block-end: 1px solid var(--color-border, #e5e7eb);
}
.user-menu__identity-name {
    font-weight: 700;
    color: var(--color-fg, #111827);
}
.user-menu__identity-meta {
    color: var(--color-muted, #6b7280);
    font-size: var(--font-size-sm, 0.875rem);
    margin-block-start: 0.15rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.user-menu__section {
    padding: 0.4rem 0;
    border-block-end: 1px solid var(--color-border, #e5e7eb);
}
.user-menu__section:last-of-type { border-block-end: 0; }
.user-menu__section-h {
    margin: 0;
    padding: 0.4rem 1rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted, #6b7280);
}
.user-menu__item {
    display: block;
    width: 100%;
    text-align: start;
    padding: 0.55rem 1rem;
    background: transparent;
    border: none;
    color: var(--color-fg, #111827);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.user-menu__item:hover,
.user-menu__item:focus-visible {
    background: var(--color-bg-subtle, #f3f4f6);
    outline: none;
}
.user-menu__item--danger {
    color: #b91c1c;
    font-weight: 600;
    border-block-start: 1px solid var(--color-border, #e5e7eb);
}
.user-menu__item--danger:hover,
.user-menu__item--danger:focus-visible {
    background: #fef2f2;
}
.user-menu__lang {
    display: inline-flex;
    margin: 0.25rem 1rem 0.45rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}
.user-menu__lang-opt {
    flex: 1;
    text-align: center;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    color: var(--color-muted, #6b7280);
    font-weight: 600;
    font-size: var(--font-size-sm, 0.875rem);
}
.user-menu__lang-opt.is-active {
    background: var(--color-primary, #0f766e);
    color: #fff;
}

/* On narrow screens, drop the trigger name to save space */
@media (max-width: 480px) {
    .user-menu__trigger-name { display: none; }
    .user-menu__panel        { min-width: 16rem; }
}


/* =============================================================================
   20. Accessibility Utilities
   ============================================================================= */

/* Visually hidden but available to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip link — hidden until focused */
.skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--space-4);
    background-color: var(--color-primary);
    color: #ffffff;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-weight: 600;
    z-index: 9999;
    text-decoration: none;
    transition: inset-block-start var(--transition-fast);
}

.skip-link:focus {
    inset-block-start: var(--space-4);
}

/* Focus ring — ensure it's always visible */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Remove focus ring from mouse users but keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}

/* Transitions — disable for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Consent banner overlay */
.consent-overlay {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 0.6);
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-inline: var(--container-padding);
    padding-block-end: var(--space-4);
}

@media (min-width: 640px) {
    .consent-overlay {
        align-items: center;
    }
}

.consent-card {
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 34rem;
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.consent-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-block-end: var(--space-3);
    color: var(--color-text);
}

.consent-card__body {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    line-height: 1.7;
    margin-block-end: var(--space-5);
}

/* OTP digit input group */
.otp-inputs {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-block: var(--space-6);
}

.otp-inputs__digit {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: 700;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    transition: border-color var(--transition-fast);
    caret-color: var(--color-primary);
}

.otp-inputs__digit:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(3 123 99 / 0.15);
}

/* Checkbox + label alignment (cancellation policy agreement) */
.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-block: var(--space-4);
}

.checkbox-row__input {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-block-start: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.checkbox-row__label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
    line-height: 1.6;
}


/* =============================================================================
   21. Print Styles
   Hide nav, footer, step indicator; expand content to full width.
   ============================================================================= */
@media print {
    .site-header,
    .site-footer,
    .step-indicator,
    .btn--secondary,
    .btn--ghost,
    .modal-backdrop {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .container {
        max-width: 100%;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    a {
        color: #000;
        text-decoration: none;
    }
}

/* =============================================================================
   Country code picker (step-mobile)
   ============================================================================= */

.country-picker {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
    overflow: visible;
}

.country-picker:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Trigger button — flag + dial code + caret */
.country-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-inline: var(--space-3);
    padding-block: 0;
    background: transparent;
    border: none;
    border-inline-end: 1.5px solid var(--color-border);
    font: inherit;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
    min-height: 3rem;
}

.country-trigger:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.country-trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.country-trigger__flag { font-size: 1.25rem; line-height: 1; }
.country-trigger__dial { letter-spacing: 0.02em; }
.country-trigger__caret { font-size: 0.75rem; color: var(--color-muted); }

/* The phone input takes the rest of the row, no border on its inline-start */
.country-picker__input {
    border: none !important;
    border-radius: 0 !important;
    background: transparent;
    flex: 1;
}
.country-picker__input:focus { outline: none; box-shadow: none; }

/* Dropdown panel sits below the trigger (CSS uses inline-start so RTL works) */
.country-panel {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 30;
    background: white;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    max-height: min(60vh, 26rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.country-panel[hidden] { display: none; }

.country-panel__search {
    padding: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    background: white;
}

.country-panel__search-input {
    width: 100%;
    padding: var(--space-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
}
.country-panel__search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.country-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.country-panel__divider {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    background: color-mix(in srgb, var(--color-border) 30%, white);
    position: sticky;
    inset-block-start: 0;
}

.country-panel__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border: none;
    background: transparent;
    font: inherit;
    color: var(--color-text);
    text-align: start;
    width: 100%;
}

.country-panel__row:hover,
.country-panel__row[aria-selected="true"] {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.country-panel__row:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.country-panel__row-flag { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.country-panel__row-name { flex: 1; }
.country-panel__row-dial { color: var(--color-muted); font-variant-numeric: tabular-nums; }

.country-panel__empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-muted);
}

@media (max-width: 480px) {
    .country-trigger__dial { display: none; }
    .country-trigger { gap: var(--space-1); }
}