/* ═══════════════════════════════════════════════════════════════════
           SELF-HOSTED FONTS — Inter & Sora
           Replaces the Google Fonts stylesheet link, which was blocked by
           style-src 'self'. Files served from /portal/fonts/. Both fonts are
           SIL Open Font License (OFL-1.1), self-hosting is fully permitted.
           ═══════════════════════════════════════════════════════════════════ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/Inter-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/Inter-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/Inter-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/Sora-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/Sora-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/Sora-800.woff2') format('woff2');
}

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: 'Inter', sans-serif;
    transition: background-image 1.2s ease-in-out;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.font-sora {
    font-family: 'Sora', sans-serif;
}

/* ── Flat card system (replaces glassmorphism) ── */
.glass-panel {
    background: #ffffff;
    border: 1px solid #e7eaf0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dark .glass-panel {
    background: #131c2e;
    border: 1px solid #232f45;
}

.glass-card {
    background: #f7f8fa;
    border: 1px solid #e7eaf0;
}

.dark .glass-card {
    background: #1a2436;
    border: 1px solid #232f45;
}

.glass-input {
    background: #ffffff;
    border: 1px solid #dde1e8;
    color: #0f172a;
}

.dark .glass-input {
    background-color: #1a2436;
    border: 1px solid #2a374f;
    color: #ffffff;
}

.glass-input:focus {
    background-color: #ffffff;
    border-color: rgba(20, 184, 166, 0.55);
}

.dark .glass-input:focus {
    background-color: #1a2436;
    border-color: rgba(45, 212, 191, 0.55);
}

.glass-input::placeholder {
    color: #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════════
   APP SHELL — flat, fixed, edge-to-edge sidebar (replaces the inset
   floating glass-panel sidebar). Sidebar is a true fixed rail; main
   content is offset by its width and scrolls independently.
   ═══════════════════════════════════════════════════════════════════ */
#portalApp.has-app-shell {
    padding: 0 !important;
}

.app-main {
    background: linear-gradient(rgba(243, 245, 248, 0.88), rgba(243, 245, 248, 0.88));
}

.dark .app-main {
    background: linear-gradient(rgba(10, 15, 26, 0.88), rgba(10, 15, 26, 0.88));
}

.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.app-sidebar {
    width: 264px;
    flex-shrink: 0;
    /* Sidebar is always dark navy — intentionally independent of the site light/dark theme toggle */
    background: #132853;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 16px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    overflow-y: auto;
}

.dark .app-sidebar {
    background: #070d1a;
}

.app-main {
    flex: 1;
    margin-left: 264px;
    min-height: 100vh;
    padding: 24px 32px 40px;
    width: calc(100% - 264px);
}

@media (max-width: 1023px) {
    .app-sidebar {
        display: none;
    }

    .app-main {
        margin-left: 0;
        width: 100%;
        padding: 16px 16px 32px;
    }
}

/* Sidebar nav items — light mode default: soft tint on active, subtle hover */
.app-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    color: rgba(203, 213, 225, 0.85);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.app-nav-item i {
    width: 17px;
    height: 17px;
    color: rgba(148, 163, 184, 0.9);
    flex-shrink: 0;
}

.app-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.app-nav-item:hover i {
    color: #ffffff;
}

.app-nav-item.active {
    background: #14b8a6;
    color: #ffffff;
    font-weight: 600;
}

.app-nav-item.active i {
    color: #ffffff;
}

.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 20px;
}

.app-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
    margin-top: 14px;
}

/* Sidebar profile card (photo, name, ID, status badge) */
.app-sidebar-profile {
    text-align: center;
    padding: 4px 8px 20px;
}

.app-sidebar-profile-photo-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
}

.app-sidebar-profile-photo {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    overflow: hidden;
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    color: #ffffff;
    border: 3px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar-profile-photo-edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: #14b8a6;
    border: 2px solid #132853;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.app-sidebar-profile-photo-edit:hover {
    background: #0d9488;
    transform: scale(1.06);
}

.dark .app-sidebar-profile-photo-edit {
    border-color: #070d1a;
}

/* Update Photo modal — preview box.
   Uses the real CSS aspect-ratio property directly rather than a Tailwind
   aspect-square utility class: nothing else in this codebase uses that
   utility, so it isn't confirmed to be part of this build's compiled
   Tailwind output, and in practice it collapsed to a thin, unusable strip.
   aspect-ratio is a standard CSS property (all evergreen browsers) so this
   works regardless of what Tailwind features are compiled in. */
.photo-modal-preview {
    aspect-ratio: 1 / 1;
    min-height: 220px;
}

/* Mirror the live camera preview for natural "look in a mirror" framing.
   The captured photo itself is un-mirrored back to true orientation in
   JS (photoModalCapture) before it's saved. */
.photo-modal-mirror {
    transform: scaleX(-1);
}

.app-sidebar-profile-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.app-sidebar-profile-id {
    font-size: 12px;
    color: rgba(148, 163, 184, 0.9);
    margin-bottom: 10px;
}

.app-sidebar-profile-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #2dd4bf;
    background: rgba(20, 184, 166, 0.15);
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 9999px;
    padding: 3px 12px;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

/* ── Auth layout ── */
.auth-split-root {
    min-height: 100vh;
    position: relative;
    z-index: 2;
}

.auth-left {
    min-height: 100vh;
}

/* Left hero panel stays on-brand navy in both themes -- it's
           marketing copy (white headline/stat text), not the form, and
           it's hidden on mobile anyway. Made translucent (vs the old solid
           hex) so the video layer behind it is visible through the tint. */
.auth-bg {
    background: linear-gradient(145deg, rgba(7, 20, 40, .91) 0%, rgba(11, 29, 58, .87) 50%, rgba(13, 45, 82, .84) 100%);
}

.auth-blob-1 {
    background: radial-gradient(ellipse 80% 60% at 110% -10%, rgba(14, 165, 160, .28) 0%, transparent 60%);
}

.auth-blob-2 {
    background: radial-gradient(ellipse 60% 80% at -10% 110%, rgba(30, 111, 217, .18) 0%, transparent 60%);
}

.auth-stat-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}

/* ── Video background (auth screen only) ──
           Single clip, theme-tinted via .auth-video-overlay so the same
           footage reads as a bright airy scene in light mode and the
           existing moody navy scene in dark mode. */
.auth-video-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.auth-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(241, 245, 249, .94) 0%, rgba(226, 232, 240, .88) 100%);
    transition: background 1s ease;
}

.dark .auth-video-overlay {
    background: linear-gradient(160deg, rgba(7, 20, 40, .9) 0%, rgba(11, 29, 58, .84) 50%, rgba(13, 45, 82, .8) 100%);
}

/* ── Glass auth card (right panel) -- theme-aware ── */
.auth-right {
    background: transparent !important;
}

.auth-card {
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

.dark .auth-card {
    background: #131c2e;
    border: 1px solid #232f45;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ── Flat inputs -- theme-aware ── */
.auth-input {
    background: #f7f8fa;
    border: 1.5px solid #dde1e8;
    border-radius: 12px;
    color: #0f172a;
    font-size: .875rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.dark .auth-input {
    background-color: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    color: #fff;
}

.auth-input:focus {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(14, 165, 160, .15);
    outline: none;
}

.dark .auth-input:focus {
    background-color: rgba(255, 255, 255, 0.11);
    border-color: #2ec4be;
    box-shadow: 0 0 0 3px rgba(14, 165, 160, .18);
}

.auth-input::placeholder {
    color: rgba(15, 23, 42, 0.35);
}

/* Show/hide password toggle — wraps a password .auth-input so the eye
   button sits inside it, right-aligned. */
.password-input-wrap {
    position: relative;
}

.password-input-wrap .auth-input {
    padding-right: 40px;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(15, 23, 42, 0.4);
    cursor: pointer;
    transition: color .15s, background .15s;
}

.password-toggle-btn:hover {
    color: rgba(15, 23, 42, 0.7);
    background: rgba(15, 23, 42, 0.05);
}

.dark .password-toggle-btn {
    color: rgba(255, 255, 255, 0.4);
}

.dark .password-toggle-btn:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
}

.password-toggle-icon {
    width: 17px;
    height: 17px;
}

.dark .auth-input::placeholder {
    color: rgba(255, 255, 255, 0.30);
}

.auth-input[readonly] {
    color: rgba(15, 23, 42, 0.45);
    cursor: default;
}

.dark .auth-input[readonly] {
    color: rgba(255, 255, 255, 0.45);
}

/* ── select.auth-input — same treatment as select.sreg-input, scaled to
   the auth-card's slightly larger input size ── */
select.auth-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(15,23,42,0.45)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    padding-right: 30px;
    cursor: pointer;
}

.dark select.auth-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: 12px 12px;
}

select.auth-input option {
    background: #fff !important;
    color: #0f172a !important;
    background-image: none !important;
}

.dark select.auth-input option {
    background: #0f203b !important;
    color: #fff !important;
    background-image: none !important;
}

select.auth-input:disabled {
    opacity: .55;
    cursor: default;
}

/* ── Glass OTP digits -- theme-aware ── */
.otp-digit-light {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.04);
    border: 1.5px solid rgba(15, 23, 42, 0.15);
    border-radius: 10px;
    color: #0f172a;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.dark .otp-digit-light {
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    color: #fff;
}

.otp-digit-light:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(14, 165, 160, .18);
}

.dark .otp-digit-light:focus {
    border-color: #2ec4be;
    box-shadow: 0 0 0 3px rgba(14, 165, 160, .2);
}

/* SEC-006: OTPs are now 8 digits (was 6) -- shrink each box so all 8
           still fit inside the 420px auth card on small screens. */
.otp-digit-light.otp-8 {
    width: 34px;
    font-size: 1.05rem;
}

@media (max-width: 420px) {
    .otp-digit-light.otp-8 {
        width: 28px;
        height: 44px;
        font-size: 0.95rem;
    }
}

/* ── Glass step tracker -- theme-aware ── */
.step-dot-light {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    border: 2px solid rgba(15, 23, 42, 0.15);
    color: rgba(15, 23, 42, 0.4);
    background: transparent;
    flex-shrink: 0;
    transition: all .2s;
}

.dark .step-dot-light {
    border: 2px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.35);
}

.step-dot-light.active {
    border-color: #0d9488;
    color: #0d9488;
}

.dark .step-dot-light.active {
    border-color: #2ec4be;
    color: #2ec4be;
}

.step-dot-light.done {
    border-color: #0ea5a0;
    background: #0ea5a0;
    color: #fff;
}

.step-connector-light {
    flex: 1;
    height: 2px;
    background: rgba(15, 23, 42, 0.12);
}

.dark .step-connector-light {
    background: rgba(255, 255, 255, 0.12);
}

.step-connector-light.done {
    background: #0ea5a0;
}

/* ── Glass alerts -- theme-aware ── */
.auth-alert-error {
    background: rgba(220, 38, 38, .08);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, .25);
    border-radius: 12px;
}

.dark .auth-alert-error {
    background: rgba(220, 38, 38, .15);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, .35);
}

.auth-alert-success {
    background: rgba(5, 150, 105, .08);
    color: #047857;
    border: 1px solid rgba(5, 150, 105, .25);
    border-radius: 12px;
}

.dark .auth-alert-success {
    background: rgba(5, 150, 105, .15);
    color: #6ee7b7;
    border: 1px solid rgba(5, 150, 105, .35);
}

.auth-alert-info {
    background: rgba(14, 165, 160, .08);
    color: #0d9488;
    border: 1px solid rgba(14, 165, 160, .25);
    border-radius: 12px;
}

.dark .auth-alert-info {
    background: rgba(14, 165, 160, .15);
    color: #2ec4be;
    border: 1px solid rgba(14, 165, 160, .35);
}

/* ── Glass self-reg form fields -- theme-aware ── */
.sreg-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.5);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 5px;
}

.dark .sreg-label {
    color: rgba(255, 255, 255, 0.45);
}

.sreg-input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(15, 23, 42, 0.03);
    border: 1.5px solid rgba(15, 23, 42, 0.13);
    border-radius: 10px;
    color: #0f172a;
    font-size: .8rem;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.dark .sreg-input {
    background-color: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.13);
    color: #fff;
}

.sreg-input:focus {
    background-color: #fff;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(14, 165, 160, .12);
    outline: none;
}

.dark .sreg-input:focus {
    background-color: rgba(255, 255, 255, 0.11);
    border-color: #2ec4be;
    box-shadow: 0 0 0 3px rgba(14, 165, 160, .15);
}

.sreg-input::placeholder {
    color: rgba(15, 23, 42, 0.32);
}

.dark .sreg-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.sreg-input[readonly],
.sreg-input.bg-slate-50 {
    background-color: #f8fafc !important;
    color: #94a3b8;
}

.dark .sreg-input[readonly],
.dark .sreg-input.bg-slate-50 {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.40);
}

select.sreg-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(15,23,42,0.45)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    /* ← fixes the tiling/repeat bug in some browsers */
    padding-right: 28px;
}

.dark select.sreg-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: 12px 12px;
}

select.sreg-input option {
    background: #fff !important;
    color: #0f172a !important;
    background-image: none !important;
}

.dark select.sreg-input option {
    background: #0f203b !important;
    color: #fff !important;
    background-image: none !important;
}

/* ── glass-input selects (booking modal, etc.) — flat custom arrow,
   vendor-prefixed to avoid native browser arrow/tiling artifacts ── */
select.glass-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(15,23,42,0.45)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    padding-right: 30px;
    cursor: pointer;
}

.dark select.glass-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.dark select.glass-input option {
    background-color: #1e3050;
    color: rgba(255, 255, 255, 0.9);
}

select.glass-input option {
    background-color: #fff;
    color: #0f172a;
}

/* ── Auth screen theme toggle (floating) ── */
.auth-theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px;
    border-radius: 12px;
}

/* ── Tour guide ── */
#tourHighlight {
    position: fixed;
    z-index: 301;
    border-radius: 16px;
    pointer-events: none;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.65), 0 0 0 9999px rgba(2, 6, 23, 0.6);
    transition: top .32s ease, left .32s ease, width .32s ease, height .32s ease;
}

#tourPopover {
    position: fixed;
    z-index: 302;
    width: 320px;
    max-width: calc(100vw - 28px);
    transition: top .32s ease, left .32s ease;
}

@keyframes ecg-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.ecg-path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: ecg-draw 2.4s ease forwards .4s;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

.pulse-dot {
    animation: pulse-dot 2s infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    animation: spin .7s linear infinite;
}

.spinner-teal {
    border-color: rgba(14, 165, 160, .25);
    border-top-color: #0EA5A0;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.anim-in {
    animation: fadeSlideUp .2s ease forwards;
}

/* pw-change strip */
.pw-strip {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

/* step track */
.step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .4);
    background: transparent;
    flex-shrink: 0;
    transition: all .2s;
}

.step-dot.active {
    border-color: #2ec4be;
    color: #2ec4be;
}

.step-dot.done {
    border-color: #0EA5A0;
    background: #0EA5A0;
    color: #fff;
}

.step-connector {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, .15);
}

.step-connector.done {
    background: #0EA5A0;
}

/* alert */
.alert-error {
    background: rgba(220, 38, 38, .15);
    color: #fca5a5;
    border-left: 3px solid #dc2626;
}

.alert-success {
    background: rgba(5, 150, 105, .15);
    color: #6ee7b7;
    border-left: 3px solid #059669;
}

.alert-info {
    background: rgba(14, 165, 160, .15);
    color: #2ec4be;
    border-left: 3px solid #0EA5A0;
}

/* hold countdown */
.hold-bar {
    background: rgba(217, 119, 6, .15);
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 10px;
}

.slot-btn {
    padding: 9px 6px;
    border-radius: 9px;
    border: 1.5px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .8);
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all .13s;
}

.slot-btn:hover {
    border-color: #2ec4be;
    background: rgba(14, 165, 160, .15);
}

/* ── Notification badge ── */
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid transparent;
    line-height: 1;
    pointer-events: none;
}

.dark .notif-badge {
    border-color: #0f203b;
}

.notif-badge.hidden {
    display: none;
}

/* ── Notification dropdown ── */
.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    z-index: 200;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .15);
    overflow: hidden;
}

.dark .notif-dropdown {
    background: #0f203b;
    border-color: rgba(255, 255, 255, .1);
}

.notif-dropdown.hidden {
    display: none;
}

/* ── Appointment reminder popup (bottom-right toast) ── */
@keyframes reminderSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes reminderSlideOut {
    from {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(20px)
    }
}

#apptReminderToast {
    animation: reminderSlideIn .3s ease forwards;
}

#apptReminderToast.closing {
    animation: reminderSlideOut .25s ease forwards;
}

/* ═══════════════════════════════════════════════════════════════════
           RESPONSIVE LAYOUT — mobile → tablet → desktop → wide desktop
           Breakpoints:
             xs  < 480px   (small phones)
             sm  480–767px (large phones / small tablets)
             md  768–1023px (tablets / small laptops)
             lg  1024–1279px (laptops)
             xl  1280–1535px (desktop)
             2xl 1536px+  (wide desktop)
           ═══════════════════════════════════════════════════════════════════ */

/* ── Auth screen — base (mobile-first) ──────────────────────────── */
#authScreen {
    flex-direction: column;
}

.auth-left {
    display: none;
}

.auth-right {
    width: 100%;
    min-height: 100vh;
    padding: 16px;
    align-items: flex-start;
    padding-top: 24px;
}

.auth-right>.w-full {
    max-width: 100%;
}

.auth-card {
    border-radius: 16px;
}

/* Inner card padding on mobile */
.auth-card .px-8 {
    padding-left: 20px;
    padding-right: 20px;
}

.auth-card .pb-8 {
    padding-bottom: 24px;
}

.auth-card .mx-8 {
    margin-left: 20px;
    margin-right: 20px;
}

.auth-card .mx-6 {
    margin-left: 16px;
    margin-right: 16px;
}

/* OTP digits — shrink on small screens */
.otp-digit-light.otp-8 {
    width: 30px;
    height: 44px;
    font-size: 1rem;
}

/* Auth step dots — compact on mobile */
.step-dot-light {
    width: 22px;
    height: 22px;
    font-size: 11px;
}

/* ── Small phones (xs < 480px) ──────────────────────────────────── */
@media (max-width: 479px) {
    .auth-right {
        padding: 12px;
        padding-top: 16px;
    }

    .otp-digit-light.otp-8 {
        width: 26px;
        height: 40px;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .auth-card .px-8 {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Stack the Resend · Back links vertically */
    #viewResetOtp .text-center.mt-4 a {
        display: block;
        margin-top: 4px;
    }
}

/* ── Large phones (sm: 480px–767px) ─────────────────────────────── */
@media (min-width: 480px) and (max-width: 767px) {
    .auth-right {
        padding: 20px;
        padding-top: 32px;
        align-items: center;
    }

    .auth-right>.w-full {
        max-width: 420px;
        margin: 0 auto;
    }

    .otp-digit-light.otp-8 {
        width: 32px;
        height: 46px;
    }
}

/* ── Tablets (md: 768px–1023px) ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    #authScreen {
        flex-direction: row;
    }

    .auth-left {
        display: flex;
        width: 42%;
        min-width: 280px;
    }

    .auth-right {
        flex: 1;
        padding: 32px 24px;
        align-items: center;
    }

    .auth-right>.w-full {
        max-width: 400px;
        margin: 0 auto;
    }

    .auth-card .px-8 {
        padding-left: 28px;
        padding-right: 28px;
    }

    .otp-digit-light.otp-8 {
        width: 34px;
        height: 48px;
    }
}

/* ── Laptops / small desktop (lg: 1024px–1279px) ────────────────── */
@media (min-width: 1024px) {
    #authScreen {
        flex-direction: row;
    }

    .auth-left {
        display: flex;
        width: 50%;
    }

    .auth-right {
        flex: 1;
        padding: 40px 32px;
        align-items: center;
    }

    .auth-right>.w-full {
        max-width: 420px;
    }

    .auth-card .px-8 {
        padding-left: 32px;
        padding-right: 32px;
    }

    .otp-digit-light.otp-8 {
        width: 36px;
        height: 50px;
    }
}

/* ── Desktop (xl: 1280px–1535px) ────────────────────────────────── */
@media (min-width: 1280px) {
    .auth-left {
        width: 52%;
    }

    .auth-right>.w-full {
        max-width: 440px;
    }
}

/* ── Wide desktop (2xl: 1536px+) ────────────────────────────────── */
@media (min-width: 1536px) {
    .auth-left {
        width: 56%;
    }

    .auth-right {
        padding: 48px 40px;
    }

    .auth-right>.w-full {
        max-width: 460px;
    }

    .auth-card {
        border-radius: 24px;
    }

    .auth-card .px-8 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .otp-digit-light.otp-8 {
        width: 40px;
        height: 54px;
        font-size: 1.15rem;
    }
}

/* ── Auth hero panel responsive text scaling ─────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

    .auth-left .text-4xl,
    .auth-left .text-5xl {
        font-size: 2rem;
        line-height: 1.2;
    }

    .auth-left .text-2xl {
        font-size: 1.25rem;
    }
}

@media (min-width: 1536px) {
    .auth-left .text-4xl {
        font-size: 3rem;
    }
}

/* ── OTP input gap — tighter on narrow screens ───────────────────── */
@media (max-width: 400px) {

    #viewResetOtp .flex.gap-1\.5,
    .flex.gap-1\.5.justify-center {
        gap: 4px;
    }
}

/* ── Ensure auth-right always scrollable on short screens ────────── */
.auth-right {
    overflow-y: auto;
}

/* ── Theme toggle button — always top-right ──────────────────────── */
#themeToggleBtn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
}

@media (min-width: 768px) {
    #themeToggleBtn {
        top: 20px;
        right: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
           MOBILE SIDEBAR DRAWER
           The aside sidebar is hidden on < lg (1024px).
           A hamburger button in the topbar slides in a full-height drawer.
           ═══════════════════════════════════════════════════════════════════ */

/* Hide the sidebar column on mobile/tablet */
@media (max-width: 1023px) {
    #tour-sidebar {
        display: none !important;
    }

}

/* Hamburger button — visible only below lg */
#mobileMenuBtn {
    display: none;
}

@media (max-width: 1023px) {
    #mobileMenuBtn {
        display: flex;
    }
}

/* Scrim overlay */
#mobileDrawerScrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(5, 15, 35, 0.65);
    animation: scrimFadeIn 0.22s ease;
}

#mobileDrawerScrim.open {
    display: block;
}

@keyframes scrimFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Drawer panel */
#mobileDrawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 201;
    width: 280px;
    max-width: 85vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    /* Default = light mode */
    background: rgba(240, 246, 255, 0.97);
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.2);
}

/* Dark mode — html.dark prefix gives higher specificity than .dark alone */
html.dark #mobileDrawer {
    background: rgba(7, 18, 38, 0.98);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.55);
}

#mobileDrawer.open {
    transform: translateX(0);
}

/* Close button inside drawer */
#mobileDrawerClose {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: rgba(15, 23, 42, 0.07);
    color: rgba(15, 23, 42, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

html.dark #mobileDrawerClose {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

#mobileDrawerClose:hover {
    background: rgba(15, 23, 42, 0.13);
}

html.dark #mobileDrawerClose:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Drawer nav buttons — mirror sidebar style */
.drawer-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    /* Default = light mode */
    color: #334155;
    background: transparent;
}

html.dark .drawer-nav-btn {
    color: rgba(200, 215, 255, 0.85);
}

.drawer-nav-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f766e;
}

html.dark .drawer-nav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.drawer-nav-btn.active {
    background: rgba(20, 184, 166, 0.1);
    color: #0d9488;
    font-weight: 600;
}

html.dark .drawer-nav-btn.active {
    background: rgba(99, 210, 198, 0.15);
    color: #2dd4bf;
}

/* ═══════════════════════════════════════════════════════════════════
   CSP-COMPLIANT UTILITY CLASSES
   Replacements for inline style="" attributes (style-src 'self' compliance)
   ═══════════════════════════════════════════════════════════════════ */

.csp-hidden {
    display: none;
}

.auth-left-width {
    width: 52%;
}

.auth-hero-heading {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

.auth-card-maxw {
    max-width: 420px;
}

.modal-backdrop-blur {
    background: rgba(15, 23, 42, 0.45);
}

.self-reg-modal-size {
    max-width: 680px;
    max-height: 92vh;
}

.preg-status-select {
    max-width: 240px;
}

.alt-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.slot-time-label {
    font-weight: 400;
    opacity: .7;
}

/* ═══════════════════════════════════════════════════════════════════
   PORTAL DASHBOARD HEADER — small-screen overflow fix
   The header's right-hand group (MRN chip, search, help, bell, avatar)
   doesn't wrap and was forcing horizontal page overflow on narrow
   viewports. Below 640px we drop the search box to a icon-only toggle
   target and hide the MRN chip so the row actually fits.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    #portalApp header {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    #portalApp header #topbarMrnChip {
        display: none !important;
    }

    #portalApp header .relative.w-full.sm\:w-56 {
        order: 10;
        width: 100%;
        flex-basis: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE DRAWER — internal layout (hand-written, no Tailwind dependency)
   The drawer markup was added after the compiled Tailwind build, so it
   cannot rely on Tailwind utility classes (dark:, w-4, h-4, space-y-1,
   etc.) — those classes simply aren't present in the shipped CSS bundle
   for markup that didn't exist at build time. Everything the drawer
   needs is defined here instead.
   ═══════════════════════════════════════════════════════════════════ */

.drawer-icon-sm {
    width: 16px;
    height: 16px;
}

.drawer-icon-xs {
    width: 14px;
    height: 14px;
}

.drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding: 0 4px;
}

.drawer-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2dd4bf, #0f766e);
    color: #fff;
    box-shadow: 0 8px 16px rgba(20, 184, 166, 0.3);
}

.drawer-brand-title {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: #0f172a;
    margin: 0;
}

html.dark .drawer-brand-title {
    color: #fff;
}

.drawer-brand-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    margin: 2px 0 0;
}

html.dark .drawer-brand-subtitle {
    color: rgba(255, 255, 255, 0.55);
}

.drawer-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drawer-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 16px;
    margin-top: 24px;
}

html.dark .drawer-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 4px;
}

.drawer-theme-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

html.dark .drawer-theme-label {
    color: rgba(255, 255, 255, 0.55);
}

.drawer-theme-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.05);
    padding: 4px;
    border-radius: 12px;
}

html.dark .drawer-theme-toggle {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.drawer-theme-btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #475569;
    transition: background 0.15s, color 0.15s;
}

html.dark .drawer-theme-btn {
    color: rgba(255, 255, 255, 0.5);
}

.drawer-theme-btn:hover {
    color: #0f172a;
}

html.dark .drawer-theme-btn:hover {
    color: #fff;
}

.drawer-theme-btn.active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

html.dark .drawer-theme-btn.active {
    background: #fff;
    color: #0f172a;
}

.drawer-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.drawer-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.drawer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-user-text {
    min-width: 0;
}

.drawer-user-name {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

html.dark .drawer-user-name {
    color: #fff;
}

.drawer-user-mrn {
    font-size: 11px;
    color: #64748b;
    margin: 0;
}

html.dark .drawer-user-mrn {
    color: rgba(255, 255, 255, 0.55);
}

.drawer-logout-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #64748b;
    transition: background 0.15s, color 0.15s;
}

html.dark .drawer-logout-btn {
    color: rgba(255, 255, 255, 0.55);
}

.drawer-logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════
   PROACTIVE BOOKING MODAL — calendar panel + slot picker
   Applies to the two-column Step 1 layout in #bookingModal.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Modal shell — wider than the old single-column max-w-lg ── */
.booking-modal-shell {
    max-width: 860px;
    max-height: 90vh;
}

/* ── Two-column layout (Step 1) ── */
/* Both sides take equal space — calendar is flex:1 just like the form side */
.booking-cal-side {
    flex: 1;
    min-width: 0;
}

.booking-form-side {
    flex: 1;
    min-width: 0;
}

/* ── Calendar day grid (7 equal columns) ── */
.book-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

/* Day-of-week header labels */
.book-cal-dow span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: #94a3b8;
    padding: 3px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dark .book-cal-dow span {
    color: rgba(255, 255, 255, 0.28);
}

/* ── Individual day cell ── */
.book-cal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 3px 0 5px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}

.book-cal-day:hover:not(.past):not(.empty) {
    background: rgba(13, 148, 136, 0.07);
}

.dark .book-cal-day:hover:not(.past):not(.empty) {
    background: rgba(14, 165, 160, 0.12);
}

/* Empty padding cells (before day 1) */
.book-cal-day.empty {
    cursor: default;
    pointer-events: none;
}

/* Past days — greyed out, non-interactive */
.book-cal-day.past {
    cursor: not-allowed;
    opacity: 0.32;
    pointer-events: none;
}

/* ── Day number circle ── */
.book-cal-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    line-height: 1;
    transition: all 0.12s;
    flex-shrink: 0;
}

.dark .book-cal-num {
    color: rgba(255, 255, 255, 0.78);
}

/* Today — teal ring */
.book-cal-day.today:not(.selected) .book-cal-num {
    border: 1.5px solid #0d9488;
    color: #0d9488;
    font-weight: 700;
}

.dark .book-cal-day.today:not(.selected) .book-cal-num {
    border-color: #2ec4be;
    color: #2ec4be;
}

/* Selected — solid teal fill */
.book-cal-day.selected .book-cal-num {
    background: #0d9488;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.40);
}

/* Full day — red number text */
.book-cal-day.full:not(.past) .book-cal-num {
    color: #ef4444;
}

/* ── Capacity dot under the number ── */
.book-cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.book-cal-dot.free {
    background: #22c55e;
}

.book-cal-dot.moderate {
    background: #f59e0b;
}

.book-cal-dot.full {
    background: #ef4444;
}

.book-cal-dot.none {
    background: transparent;
}

/* ── Legend dots (below calendar grid) ── */
.book-cal-dot-legend {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.book-cal-dot-legend--free {
    background: #22c55e;
}

.book-cal-dot-legend--moderate {
    background: #f59e0b;
}

.book-cal-dot-legend--full {
    background: #ef4444;
}

/* ── Selected date display pill (replaces raw date input) ── */
.book-date-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    min-height: 38px;
    transition: border-color 0.15s, background 0.15s;
}

.dark .book-date-display {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.book-date-display.has-date {
    border-color: #0d9488;
    background: rgba(13, 148, 136, 0.05);
}

.dark .book-date-display.has-date {
    border-color: #2ec4be;
    background: rgba(46, 196, 190, 0.07);
}

/* ── Slot picker grid (3 columns) ── */
.book-slot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

/* Individual slot button */
.book-slot-btn {
    padding: 8px 4px 6px;
    border-radius: 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: all 0.12s;
    font-family: inherit;
}

.dark .book-slot-btn {
    border-color: rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.04);
}

.book-slot-time {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    line-height: 1;
}

.dark .book-slot-time {
    color: rgba(255, 255, 255, 0.85);
}

.book-slot-rem {
    font-size: 9px;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1;
}

/* Free slots — green accent */
.book-slot-btn.free {
    border-color: rgba(34, 197, 94, 0.28);
}

.book-slot-btn.free:hover {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.07);
}

.book-slot-btn.free .book-slot-rem {
    color: #22c55e;
}

/* Moderate slots — amber accent */
.book-slot-btn.moderate {
    border-color: rgba(245, 158, 11, 0.32);
}

.book-slot-btn.moderate:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.07);
}

.book-slot-btn.moderate .book-slot-rem {
    color: #f59e0b;
}

/* Full slots — disabled appearance */
.book-slot-btn.full,
.book-slot-btn[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.book-slot-btn.full .book-slot-time {
    color: #ef4444;
}

/* Past slots */
.book-slot-btn.past {
    opacity: 0.28;
    cursor: not-allowed;
    pointer-events: none;
}

/* Selected slot — teal highlight */
.book-slot-btn.selected {
    border-color: #0d9488;
    background: rgba(13, 148, 136, 0.10);
    box-shadow: 0 0 0 2.5px rgba(13, 148, 136, 0.22);
}

.book-slot-btn.selected .book-slot-time {
    color: #0d9488;
}

.dark .book-slot-btn.selected .book-slot-time {
    color: #2ec4be;
}

/* ── Responsive: mobile stacks calendar above form ── */
@media (max-width: 767px) {
    .booking-modal-shell {
        max-height: 95vh;
    }

    .booking-cal-side {
        width: 100%;
    }

    /* Slightly tighter cells on small phones */
    .book-cal-num {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .book-cal-dot {
        width: 4px;
        height: 4px;
    }
}

@media (max-width: 900px) {
    .booking-modal-shell {
        max-width: 98vw;
    }
}