/*========================================
  Reserva default theme

  The single default stylesheet for BOTH surfaces: the booking site (this
  section) and the kiosk (the "KIOSK SURFACE" section further down). It defines
  the complete styling contract — client stylesheets are loaded after it and
  may only override selectors, properties and tokens declared here. The server
  appends the active client's override to this file before serving each surface.
  See clients/README.md before adding or changing client styling.
========================================*/

/*========================================
  Design tokens

  Override these from the client stylesheet (Admin → Settings → "Style (CSS)")
  to re-skin the app. The brand palette below is shared by both surfaces; the
  kiosk's own (non-brand) tokens live in the ".kiosk" block further down. One
  :root override themes both surfaces. See clients/README.md.
========================================*/
:root {
    /* Brand palette — shared by the booking site and the kiosk */
    --brand-primary: #1f3a5f; /* primary buttons, checkbox accent, headers, service buttons */
    --brand-primary-hover: #2c4f7c; /* hover/active shade of primary */
    --brand-on-primary: #ffffff; /* text/icons on the primary colour */
    --brand-header: var(--brand-primary); /* header bar; can be set apart from primary */
    --brand-secondary: #5f1f3a; /* the "no booking" path (kiosk) */
    --brand-accent: #0369a1; /* highlights and focus rings */

    /* Surfaces */
    --surface-backdrop: #244662; /* dark backdrop behind the dialog and the queue screen */
    --surface-card: #fff; /* dialog, cards, inputs, menus */

    /* Status text */
    --status-success-text: green;
    --status-error-text: red;
    --status-warning-text: #d97706; /* notice / "important" accent */

    /* Typography */
    --font-body: sans-serif;
}

/* Base Reset & Global Styles */
* {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, p, ul, li {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
}

/* Utility Classes */
.centered {
    text-align: center;
}

.mt-sm {
    margin-top: 0.5rem;
}

.mt-lg {
    margin-top: 1rem;
}

.placeholder-text {
    color: #999;
}

.custom-list {
    list-style: disc inside;
}

.required-indicator {
    color: var(--status-error-text);
    margin-left: 2px;
}

/*========================================
  Layout Containers
========================================*/
.app-fullscreen {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-backdrop);
}

.app-dialog {
    width: 100%;
    max-width: 800px;
    background-color: var(--surface-card);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/*========================================
  Global Header & Flag Selector
========================================*/
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: var(--brand-header);
    margin-bottom: 0;
}

.logo {
    width: 150px; /* Adjust as needed */
    height: 50px; /* Adjust as needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* --brand-logo is set from the Logo setting when one is configured;
       otherwise the file shipped in wwwroot/branding is used. */
    background-image: var(--brand-logo, url('/branding/logo.svg'));
}

.flag-wrapper {
    display: flex;
    gap: 10px;
    margin-right: 15px;
}

.flag {
    width: 32px;
    height: 32px;
    background-size: cover;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: border-color 0.3s;
}

    .flag:hover {
        border-color: var(--brand-primary);
    }

    .flag.small {
        /* Additional small flag styling if needed */
    }

.welcome-msg {
    margin-bottom: 10px;
}

/*========================================
  Global Content & Grid Layout
========================================*/
.app-content {
    padding: 20px;
}

.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/*========================================
  Global Form Elements & Dropdowns
========================================*/
.label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.select,
.input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

/* Checkbox metadata fields (e.g. "the appointment is for a child") render as a
   full-width clickable card — the label element wraps the input, so tapping
   anywhere on the row toggles it. Clients can re-accent via their style.css. */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: var(--surface-card);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s, background-color 0.2s;
}

    .checkbox-row:hover {
        border-color: var(--brand-primary);
        background-color: #f5f9ff;
    }

    .checkbox-row:has(.checkbox:checked) {
        border-color: var(--brand-primary);
        background-color: #eef5ff;
    }

.checkbox {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.checkbox-text {
    font-size: 16px;
}

.dropdown {
    position: relative;
}

.dropdown-btn {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: var(--surface-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 16px;
}

    .dropdown-btn:disabled {
        background-color: #eee;
        cursor: not-allowed;
    }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--surface-card);
    border: 1px solid #ccc;
    border-top: none;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-item,
.dropdown-item-clickable {
    padding: 8px 10px;
    cursor: pointer;
}

.dropdown-item {
    background-color: #f9f9f9;
}

    .dropdown-item:hover,
    .dropdown-item-clickable:hover {
        background-color: #e9e9e9;
    }

.dropdown-item-clickable.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/*========================================
  Global Icons
========================================*/
.icon {
    width: 20px;
    height: 20px;
}

/*========================================
  Global Badges & Capacity Indicators
========================================*/
.badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 5px;
}

    .badge[data-capacity="Closed"] {
        background-color: #ccc;
        color: #555;
    }

    .badge[data-capacity="Low"] {
        background-color: #d4edda;
        color: #155724;
    }

    .badge[data-capacity="Medium"] {
        background-color: #fff3cd;
        color: #856404;
    }

    .badge[data-capacity="High"] {
        background-color: #ffeeba;
        color: #856404;
    }

    .badge[data-capacity="Full"] {
        background-color: #f8d7da;
        color: #721c24;
    }

.day-closed {
    background-color: #ccc;
    color: #555;
}

.day-low {
    background-color: #d4edda;
    color: #155724;
}

.day-medium {
    background-color: #fff3cd;
    color: #856404;
}

.day-high {
    background-color: #ffeeba;
    color: #856404;
}

.day-full {
    background-color: #f8d7da;
    color: #721c24;
}

/*========================================
  Global Buttons & Messages
========================================*/
.confirm-message {
    margin-bottom: 20px;
}

.confirm-button {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

    .confirm-button:hover:not(:disabled) {
        background-color: var(--brand-primary-hover);
    }

    .confirm-button:disabled {
        background-color: #aaa;
        cursor: not-allowed;
    }

.success-message {
    color: var(--status-success-text);
    margin-top: 10px;
}

.error-message {
    color: var(--status-error-text);
    margin-top: 10px;
}

.info-text {
    color: #555;
    font-size: 14px;
    margin-top: 10px;
}

.thank-you-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
}

/*========================================
  Notice / callout (e.g. the one-person booking note)
========================================*/
.notice {
    margin: 1rem 0;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: var(--surface-card);
    text-align: left;
}

.notice-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notice-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.notice-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--status-warning-text);
}

.notice-body {
    margin-top: 4px;
    color: #555;
    font-size: 14px;
}

/*========================================
  Form Layout Improvements
========================================*/
.input-group {
    margin-bottom: 15px;
}

.form-section {
    margin-top: 2rem;
}

.form-group {
    margin-bottom: 1rem;
}

    .form-group label {
        font-weight: 600;
        margin-bottom: 0.25rem;
        display: block;
    }

/*========================================
  Component-Specific Styles
========================================*/

/* Home / Booking Form */
.home {
    /* Additional home-specific styles if needed */
}

    .home .two-column-grid {
        margin-bottom: 1rem;
    }

    .home section {
        margin-bottom: 1.5rem;
    }

    .home .personal-info {
        margin-top: 2rem;
    }

/* Section Title */
.section-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Booking Details (shared by home & bookingDetail.razor) */
.booking-details {
    margin-bottom: 1.5rem;
}

    .booking-details .booking-field {
        display: flex;
        align-items: baseline;
        margin-bottom: 0.5rem;
    }

        .booking-details .booking-field .label {
            width: 220px;
            font-weight: 600;
            color: #333;
        }

        .booking-details .booking-field .value {
            font-weight: bold;
            color: #111;
        }

    .booking-details .metadata-section {
        margin-top: 1.5rem;
    }

        .booking-details .metadata-section .metadata-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .booking-details .metadata-section .metadata-items {
            margin-left: 1rem;
            padding-left: 1rem;
            border-left: 2px solid #ccc;
        }

        .booking-details .metadata-section .metadata-field {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.25rem;
        }

        .booking-details .metadata-section .metadata-label {
            font-weight: 600;
            margin-right: 1rem;
        }

/* Queue Page */
.queue .card-container {
    display: flex;
    gap: 1rem;
}

.queue .booking-card {
    background: var(--surface-card);
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Thank You Section (example replacement for Tailwind) */
.thank-you-section {
    margin-top: 10px;
    margin-bottom: 10px;
}

/*========================================
  Queue Screen Redesign (Updated)
========================================*/

.queue-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--surface-backdrop);
    color: #fff;
    font-family: var(--font-body);
}

.queue-columns {
    display: flex;
    justify-content: space-between;
    flex: 1;
    padding: 30px 40px;
    gap: 40px;
}

.queue-section-header {
    font-size: 1.75rem;
    font-weight: 700;
    padding-bottom: 10px;
}

.queue-section.now-serving {
    flex-grow: 1;
}

.queue-section.waiting-queue {
    flex-grow: 2;
}

.called-column {
    flex: 1;
    display: flex;
    gap: 20px;
    flex-direction: column;
    overflow-y: auto;
}

.queue-column {
    flex: 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    overflow-y: auto;
    opacity: 0.75;
}

.called-card,
.queue-card {
    background-color: #f5f5f5;
    color: #000;
    padding: 15px;
    font-size: 1.8rem;
    line-height: 1.3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    height: fit-content;
    justify-items: center;
}

    .called-card.highlight {
        background-color: #d4edda; /* soft green */
        border-left: 8px solid #388e3c; /* medium green */
        color: #1b5e20;
        font-weight: 700;
        font-size: 2.4rem;
    }

.queue-card {
    border-left: 5px solid #607d8b;
}

.queue-header-right .time {
    font-size: 1.25rem;
    font-weight: 700;
}

.queue-header-right .location-name {
    font-size: 0.75rem;
}


/*========================================================================
  KIOSK SURFACE

  Everything below themes the kiosk (the .kiosk-* components). The kiosk host
  document carries `class="kiosk"` on <html>, so:

  - `.kiosk` declares the kiosk-only tokens plus the few that differ on the
    kiosk (typography, status shades). It has the same specificity as `:root`
    and sits after the booking-site :root above, so on the kiosk it wins —
    while a client's own `:root { … }` override (appended last on both
    surfaces) still wins over both. The brand palette is shared: it lives in
    :root and is not re-declared here.
  - The booking site never carries that class, so none of these rules — the
    kiosk token values, the full-screen scroll lock, or the .kiosk-* components
    — reach it. They stay inert there.
========================================================================*/
.kiosk {
    /* The brand palette is shared with the booking site (declared in :root
       above). The tokens below are kiosk-only, or differ on the kiosk. */

    /* --- Surfaces --------------------------------------------------------- */
    --background-main: #f7fafc; /* main background behind kiosk flows */
    /* Fine-grained aliases retained for compatibility with saved themes.    */
    --surface-page: var(--background-main); /* behind everything             */
    --surface-card: #ffffff; /* the main content panel           */
    --surface-content: var(--background-main); /* active flow beneath header */
    --surface-input: #ffffff;
    --surface-display: transparent;
    --surface-muted: #edf2f7; /* numpad keys, inert areas         */
    --surface-muted-hover: #e2e8f0;
    --surface-pressed: #cbd5e0;
    --surface-unavailable: var(--surface-pressed);
    --surface-disabled: #f0f0f0;
    --surface-control-disabled: #c0c0c0;
    --surface-overlay: rgba(0, 0, 0, 0.6);
    --surface-loader-track: #dddddd;
    --surface-loader-bar: #000000;

    /* --- Text ------------------------------------------------------------- */
    --text-strong: #0c0c0c;
    --text-body: #2d3748;
    --text-muted: #6c6c6c;
    --text-on-dark: #ffffff;
    --text-disabled: #a0a0a0;
    --text-unavailable: #efefef;
    --text-warning-on-dark: #f5f5f5;
    --text-input: var(--text-body);
    --text-key: var(--text-strong);
    --text-on-pressed: var(--text-body);

    /* --- Status ----------------------------------------------------------- */
    --status-success: #3a593a;
    --status-info: #2f4d66;
    --status-warning: #6b5d2d;
    --status-error: #663a3a;
    --status-error-text: #ff3f33;
    --status-warning-text: #eb5b00;
    --status-danger: #b00020;
    --status-ok: #38a169;
    --status-ok-hover: #2f855a;

    /* --- Borders & radii -------------------------------------------------- */
    --border-subtle: #e2e8f0;
    --border-strong: #cccccc;
    --display-border-width: 1px;
    --radius-sm: 0.25rem;
    --radius-md: 0.25rem;
    --radius-lg: 0rem; /* set to e.g. 16px for a rounded look */

    /* --- Elevation -------------------------------------------------------- */
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-raised: 0 10px 20px rgba(0, 0, 0, 0.12);

    /* --- Typography ------------------------------------------------------- */
    --font-body: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --font-size-question: 6vw; /* the "Do you have a booking?" headline */
    --font-size-answer: 12vw; /* the YES / NO buttons                  */
    --font-size-section: 4vw; /* "Enter your booking number"           */
    --font-size-service: 3.2vw; /* service / numpad key labels           */
    --font-size-display: 5vw; /* the numpad's typed value              */
    --font-size-ticket: 3.5rem; /* the printed ticket number on screen   */

    /* --- Motion ----------------------------------------------------------- */
    /* Set every duration to 0s to disable animation on slow kiosk hardware.  */
    --motion-fast: 0.2s;
    --motion-medium: 0.3s;

    /* --- Branding --------------------------------------------------------- */
    /* Overridden at runtime from the server's "Logo" setting. Falls back to
       the neutral wordmark below when no logo is configured.                 */
    --brand-logo: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgNDgiPjx0ZXh0IHg9IjAiIHk9IjM0IiBmaWxsPSIjZmZmIiBmb250LWZhbWlseT0iU2Vnb2UgVUksVGFob21hLHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMzAiIGZvbnQtd2VpZ2h0PSI2MDAiIGxldHRlci1zcGFjaW5nPSIyIj5SRVNFUlZBPC90ZXh0Pjwvc3ZnPg==");
    --brand-logo-width: 200px;
    --brand-logo-height: 70px;
}


/* =============================================================================
   2. RESET & APP SHELL
   -----------------------------------------------------------------------------
   #app is the Blazor root. Touch scrolling and overscroll are disabled because a
   kiosk should never rubber-band or reveal the browser chrome.
   ============================================================================= */
.kiosk,
.kiosk body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    font-family: var(--font-body);
    color: var(--text-body);
}

.kiosk #app {
    width: 100vw;
    height: 100vh;
}

/* The whole check-in screen. Sits behind the header and content. */
.kiosk-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: var(--surface-page);
}

/* The white panel that holds the header and the active flow. */
.kiosk-panel {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    padding: 0 3rem;
    background-color: var(--surface-card);
}

/* Fills the space under the header; the flow screens are positioned inside it. */
.kiosk-content {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: var(--surface-content);
}


/* =============================================================================
   3. HEADER — logo, error banner, language flags
   ============================================================================= */
.kiosk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: var(--brand-header);
    margin-bottom: 0;
}

/* The logo. Swap it via the admin's "Logo" setting, not by editing this rule. */
.kiosk-logo {
    width: var(--brand-logo-width);
    height: var(--brand-logo-height);
    background-image: var(--brand-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Transient error text shown in the header (network problems, bad config). */
.kiosk-header__error {
    margin: 0 50px;
    display: inline-block;
    color: var(--status-warning-text);
    font-size: 18px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    max-height: 70px;
    overflow: hidden;
}

.kiosk-header__error-label {
    padding: 0;
    margin: 0 0 4px 0;
}

.kiosk-header__error-text {
    padding: 0;
    margin: 0;
    font-weight: normal;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row of clickable country flags. `zoom` scales the flag sprite for touch. */
.kiosk-language-bar {
    display: flex;
    flex-direction: row;
    gap: 10px;
    zoom: 2.5;
    margin-right: 10px;
}

/* An individual flag. The `.flag`, `.small` and country classes come from
   flags.css; `.kiosk-language` is the stable hook for custom styling. */
.kiosk-language {
    cursor: pointer;
}

.kiosk-language--selected {
    outline: 3px solid var(--brand-accent);
    outline-offset: 1px;
}


/* =============================================================================
   4. NAVIGATION — the back arrow shown on every screen except the first
   ============================================================================= */
.kiosk-back {
    display: block;
    position: absolute;
    top: 25px;
    left: 25px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    overflow: visible;
    color: var(--text-strong);
}

.kiosk-back__icon {
    width: 58px;
    height: 58px;
    fill: currentColor;
}

.kiosk-back:hover .kiosk-back__icon {
    transform: translateX(-2px);
    transition: transform var(--motion-fast) ease;
}


/* =============================================================================
   5. QUESTION SCREEN — "Do you have a booking?" YES / NO
   ============================================================================= */
.kiosk-question {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kiosk-question__title {
    font-size: var(--font-size-question);
    color: var(--text-strong);
    margin-bottom: 3vw;
}

.kiosk-question__actions {
    display: flex;
    gap: 7vw;
}

/* The two big answer buttons. */
.kiosk-answer {
    font-size: var(--font-size-answer);
    font-weight: bold;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    width: 40vw;
    height: 45vh;
    transition: transform var(--motion-fast) ease;
}

.kiosk-answer:active {
    transform: scale(0.95);
}

.kiosk-answer--yes {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

.kiosk-answer--no {
    background-color: var(--brand-secondary);
    color: var(--brand-on-primary);
}

/* Small print under the NO button ("you may have to wait"). */
.kiosk-answer__hint {
    display: block;
    margin-top: 0.25em;
    font-size: 2vw;
}


/* =============================================================================
   6. BOOKING SCREEN — heading + numpad
   ============================================================================= */
/* Centres the numpad in the content area. */
.kiosk-booking {
    position: relative;
    height: 100%;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 2rem;
}

/* Generic screen heading, e.g. "Enter your booking number". */
.kiosk-section-title {
    font-size: 1.875rem;
    font-weight: bold;
    text-align: center;
}

.kiosk-section-title--booking {
    font-size: var(--font-size-section);
    margin-bottom: 2vh;
}


/* =============================================================================
   7. NUMPAD
   ============================================================================= */
.kiosk-numpad {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 55vw;
    margin-inline: auto;
}

/* The read-out showing the digits typed so far. */
.kiosk-numpad__display {
    position: relative;
    margin-bottom: 1rem;
    font-size: var(--font-size-display);
    font-weight: bold;
    width: 100%;
    min-width: 0;
    min-height: 7vw;
    border: var(--display-border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
    height: 3rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-display);
    color: var(--text-input);
}

.kiosk-numpad__value {
    /* The typed digits. Style separately from the surrounding display box. */
}

/* The "✕" that empties the display. */
.kiosk-numpad__clear {
    position: absolute;
    right: 0.5vw;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--brand-primary);
}

.kiosk-numpad__clear:focus {
    outline: none;
}

.kiosk-numpad__clear-icon {
    height: 6vh;
    width: 6vw;
    fill: currentColor;
}

.kiosk-numpad__keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    min-height: 55vh;
}

/* A single key: 0-9 plus "Back" and "OK". */
.kiosk-key {
    padding: 1rem 0;
    background-color: var(--surface-muted);
    color: var(--text-key);
    border: none;
    border-radius: var(--radius-lg);
    text-align: center;
    font-size: var(--font-size-service);
    font-weight: bold;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.kiosk-key:hover {
    background-color: var(--surface-muted-hover);
}

.kiosk-key:active {
    background-color: var(--surface-pressed);
    color: var(--text-on-pressed);
    transform: scale(0.95);
}

.kiosk-key:disabled {
    background-color: var(--surface-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.kiosk-key:disabled:hover {
    background-color: var(--surface-disabled);
}


/* =============================================================================
   8. WALK-IN SCREEN — the grid of services / sub-services
   ============================================================================= */
.kiosk-service-grid {
    padding: 0 2rem;
    margin-top: 4rem;
    display: grid;
    gap: 1.5rem;
    grid-auto-rows: minmax(11.4vw, auto);
}

/* Applied automatically depending on how many services the location offers. */
.kiosk-service-grid--two-columns {
    grid-template-columns: repeat(2, 1fr);
}

.kiosk-service-grid--one-column {
    grid-template-columns: 1fr;
}

.kiosk-service {
    padding: 1rem 0;
    border: none;
    border-radius: var(--radius-lg);
    text-align: center;
    font-size: var(--font-size-service);
    font-weight: bold;
    cursor: pointer;
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
    transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.kiosk-service:active {
    background-color: var(--surface-pressed);
    transform: scale(0.95);
}

/* A service that is closed or at capacity: still tappable, shows a warning. */
.kiosk-service--unavailable {
    background-color: var(--surface-unavailable);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kiosk-service__name {
    color: var(--text-on-dark);
}

.kiosk-service--unavailable .kiosk-service__name {
    color: var(--text-unavailable);
}

/* The "currently closed" line under an unavailable service's name. */
.kiosk-service__status {
    color: var(--status-error-text);
    font-size: 0.45em;
    margin-top: 4px;
}


/* =============================================================================
   9. MESSAGE OVERLAY — success / info / warning / error after a check-in
   ============================================================================= */
.kiosk-overlay {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: kiosk-fade-in var(--motion-fast) ease-in-out;
}

.kiosk-message {
    width: 60%;
    max-width: 800px;
    padding: 2.5rem 3rem;
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-on-dark);
    box-shadow: var(--shadow-card);
    animation: kiosk-scale-in 0.25s ease-out;
}

.kiosk-message__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.kiosk-message__title {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

/* The ticket number handed to the customer. */
.kiosk-message__body {
    margin: 0.5rem 0 0;
    font-size: 1.4rem;
    font-weight: 400;
}

.kiosk-message--success {
    background: var(--status-success);
}

.kiosk-message--info {
    background: var(--status-info);
}

.kiosk-message--warning {
    background: var(--status-warning);
    color: var(--text-warning-on-dark);
}

.kiosk-message--error {
    background: var(--status-error);
}


/* =============================================================================
   10. LOADING & BUSY INDICATORS
   ============================================================================= */
/* Full-screen loader shown until the kiosk has contacted the server. */
.kiosk-loader {
    width: 100vw;
    height: 100vh;
    align-items: center;
    display: flex;
    justify-content: center;
}

.kiosk-loader__bar {
    width: 240px;
    height: 40px;
    -webkit-mask: linear-gradient(90deg, var(--surface-loader-bar) 70%, transparent 0) left/20% 100%;
    background: linear-gradient(var(--surface-loader-bar) 0 0) left -25% top 0 / 20% 100% no-repeat var(--surface-loader-track);
    animation: kiosk-loader-slide 1s infinite steps(6);
}

/* Small inline spinner, shown inside the OK key while a check-in is in flight. */
.kiosk-spinner {
    width: 100%;
    height: 100%;
    align-items: center;
    display: block;
    position: relative;
}

.kiosk-spinner__disc {
    width: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 6px solid currentColor;
    animation: kiosk-spinner-clip 0.8s infinite linear alternate,
               kiosk-spinner-flip 1.6s infinite linear;
    margin: 0 auto;
}


/* =============================================================================
   11. SETTINGS SCREEN (staff only — reached by typing the service code)
   ============================================================================= */
.kiosk-settings {
    margin: auto;
    padding: 1rem;
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
}

.kiosk-settings__title {
    padding-left: 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.kiosk-fieldset {
    border: 1px solid var(--border-strong);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.kiosk-field {
    margin-bottom: 1rem;
}

.kiosk-input,
.kiosk-select {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    background-color: var(--surface-input);
    color: var(--text-input);
}

/* Inline result of "Validate" / "Test Printer". */
.kiosk-status {
    margin-left: 0.5rem;
}

.kiosk-status--ok {
    color: var(--status-ok);
}

.kiosk-status--error {
    color: var(--status-danger);
}

.kiosk-status--busy {
    color: var(--text-strong);
}

.kiosk-settings__actions {
    display: flex;
    gap: 0.5rem;
}


/* =============================================================================
   12. BUTTONS (settings screen)
   ============================================================================= */
.kiosk-btn {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-on-dark);
    display: inline-block;
    text-align: center;
    transition: background-color var(--motion-fast) ease;
}

.kiosk-btn--primary {
    background-color: var(--brand-primary);
    font-weight: 600;
}

.kiosk-btn--primary:hover {
    background-color: var(--brand-primary-hover);
}

.kiosk-btn--success {
    background-color: var(--status-ok);
}

.kiosk-btn--success:hover {
    background-color: var(--status-ok-hover);
}

.kiosk-btn--back {
    background-color: var(--status-warning-text);
}

.kiosk-btn--danger {
    background-color: var(--status-danger);
    margin-left: auto;
}

.kiosk-btn--wide {
    width: 150px;
}

/* Disabled state for every button variant. */
.kiosk-btn:disabled,
.kiosk button:disabled {
    background-color: var(--surface-control-disabled);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
    transition: none;
}


/* =============================================================================
   13. FATAL ERROR SCREEN
   -----------------------------------------------------------------------------
   Rendered by the Blazor ErrorBoundary when the app crashes. Deliberately plain:
   it must render even if custom CSS is broken.
   ============================================================================= */
.kiosk-fatal {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--surface-card);
    color: var(--brand-primary);
    text-align: center;
}

.kiosk-fatal__title {
    margin: 0;
    font-size: 3rem;
    font-weight: 700;
}

.kiosk-fatal__text {
    margin: 0;
    max-width: 40rem;
    font-size: 1.25rem;
}

.kiosk-fatal__actions {
    display: flex;
    gap: 1rem;
}

.kiosk-fatal__button {
    min-width: 12rem;
    padding: 1rem 1.5rem;
    border: none;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
}

.kiosk-fatal__button--secondary {
    background: var(--brand-secondary);
}

/* Blazor's built-in disconnect banner (index.html). */
.kiosk #blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    padding: 0.8rem 1.4rem;
    background: var(--status-warning);
    color: var(--text-on-dark);
    box-shadow: var(--shadow-raised);
}

.kiosk #blazor-error-ui .reload,
.kiosk #blazor-error-ui .dismiss {
    color: var(--text-on-dark);
    cursor: pointer;
    margin-left: 0.75rem;
}

/* Reserved for a notch/status bar on tablet hardware. */
.kiosk .status-bar-safe-area {
    height: env(safe-area-inset-top, 0);
}


/* =============================================================================
   14. ANIMATIONS
   -----------------------------------------------------------------------------
   Redefine any keyframe below (or zero out the --motion-* tokens) to change or
   remove motion.
   ============================================================================= */
@keyframes kiosk-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kiosk-scale-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes kiosk-loader-slide {
    100% { background-position: right -25% top 0; }
}

@keyframes kiosk-spinner-clip {
    0%    { clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); }
    12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); }
    25%   { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%); }
    50%   { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); }
    62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); }
    75%   { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%); }
    100%  { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%); }
}

@keyframes kiosk-spinner-flip {
    0%      { transform: scaleY(1) rotate(0deg); }
    49.99%  { transform: scaleY(1) rotate(135deg); }
    50%     { transform: scaleY(-1) rotate(0deg); }
    100%    { transform: scaleY(-1) rotate(-135deg); }
}