/* ═══════════════════════════════════════════════════════════════════════════
   flex-wizard.css — Phase 5b
   Light-theme, sidebar-on-desktop wizard. Used by:
     • booking-flex.html  (standalone — body.flex-wizard-page wraps in .flex-wizard-root)
     • book.html #flex-modal (inline — modal body wraps in .flex-wizard-root)

   Everything is scoped under .flex-wizard-root so book.html's existing styles
   never leak in (and our styles never leak out). Uses CSS native nesting
   (Chrome 112+, Safari 16.5+, Firefox 117+).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Top-level keyframes — must live outside .flex-wizard-root */
@keyframes flex-wiz-spin { to { transform: rotate(360deg); } }
@keyframes flex-wiz-slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

body.flex-wizard-page {
    margin: 0; padding: 0;
    /* Force LIGHT (day) mode so a phone set to system dark doesn't auto-darken
       inputs / the signature canvas / native controls. 2026-07-02. */
    color-scheme: light;
    background: #f8fafc; color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh; min-height: 100dvh;
}
body.flex-wizard-page > .flex-wizard-root {
    min-height: 100vh; min-height: 100dvh;
}

.flex-wizard-root {
    /* Palette */
    --service-color: #3B82F6;
    --service-soft: rgba(59, 130, 246, 0.10);
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --bg-subtle: #f1f5f9;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text: #0f172a;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    --gray-100: #f1f5f9;
    --gray-200: #e5e7eb;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --green: #22c55e;
    --orange: #f97316;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --navy-light: #f1f5f9;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;

    & *, & *::before, & *::after { margin: 0; padding: 0; box-sizing: border-box; }

    /* App container — single 500px column on mobile, grid on desktop */
    .flex-app-container {
        margin: 0 auto;
        width: 100%;
        max-width: 500px;
        background: var(--bg);
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        flex: 1;
    }

    /* Header */
    .booking-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        /* Notch/status-bar relief: push the ribbon below the phone's safe area so
           the back button / title aren't hidden under the wifi/battery cutout.
           Falls back to plain 16px on devices with no inset. 2026-07-02. */
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .back-btn {
        background: var(--bg-subtle);
        border: none;
        border-radius: 50%;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        color: var(--text);
    }
    .header-title { font-size: 18px; font-weight: 700; color: var(--text); }
    .price-badge {
        background: var(--service-soft);
        color: var(--service-color);
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 700;
        min-width: 40px;
        text-align: center;
    }

    /* Progress bar (horizontal on mobile) */
    .progress-bar {
        display: flex;
        gap: 4px;
        padding: 16px 12px;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
    }
    .progress-step {
        flex: 1;
        min-width: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }
    .step-circle {
        width: 28px; height: 28px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 12px; font-weight: 600;
        background: var(--border);
        color: var(--text-subtle);
        margin-bottom: 4px;
        transition: all 0.3s;
    }
    .progress-step.active .step-circle,
    .step-circle.active { background: var(--service-color); color: white; }
    .progress-step.completed .step-circle,
    .step-circle.completed { background: var(--green); color: white; }
    .step-label {
        font-size: 10px;
        color: var(--text-subtle);
        text-transform: uppercase;
        font-weight: 500;
    }
    .progress-step.active .step-label,
    .step-label.active { color: var(--service-color); font-weight: 600; }

    /* Content scroll area */
    .booking-content {
        padding: 20px;
        overflow-y: auto;
        flex: 1 1 auto;
        min-height: 0;
        color: var(--text);
    }
    .step-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
    .step-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }

    /* Pet / session / addon cards */
    .pet-card, .session-card, .addon-card, .location-card {
        display: flex;
        align-items: center;
        padding: 14px;
        background: var(--bg-card);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-md);
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .pet-card:hover, .session-card:hover, .addon-card:hover, .location-card:hover {
        border-color: var(--border-strong);
    }
    .pet-card.selected, .session-card.selected, .addon-card.selected, .location-card.selected {
        border-color: var(--service-color);
        background: var(--service-soft);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
    }
    .pet-photo {
        width: 50px; height: 50px;
        border-radius: 50%;
        background: var(--bg-subtle);
        display: flex; align-items: center; justify-content: center;
        font-size: 24px;
        overflow: hidden;
    }
    .pet-photo img { width: 100%; height: 100%; object-fit: cover; }
    .pet-info { flex: 1; margin-left: 12px; }
    .pet-name { font-weight: 600; font-size: 16px; color: var(--text); }
    .pet-breed { color: var(--text-muted); font-size: 13px; }
    .checkbox {
        width: 26px; height: 26px;
        border-radius: 6px;
        border: 1.5px solid var(--border-strong);
        background: var(--bg-card);
        display: flex; align-items: center; justify-content: center;
    }
    .checkbox.checked,
    .pet-card.selected .checkbox,
    .session-card.selected .checkbox,
    .addon-card.selected .checkbox {
        background: var(--service-color);
        border-color: var(--service-color);
    }

    /* Session card layout */
    .session-card { gap: 12px; }
    .session-info { flex: 1; }
    .session-name { font-weight: 600; font-size: 16px; margin-bottom: 4px; color: var(--text); }
    .session-desc { color: var(--text-muted); font-size: 13px; line-height: 1.4; margin-bottom: 6px; }
    .session-details { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .session-detail { display: flex; align-items: center; gap: 4px; color: var(--text-subtle); font-size: 12px; }
    .session-price { font-size: 18px; font-weight: 700; color: var(--service-color); }

    /* Location step */
    .location-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .location-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 20px 12px;
    }
    .location-name { font-weight: 600; font-size: 15px; color: var(--text); }
    .location-desc { font-size: 12px; color: var(--text-muted); }
    .address-section { margin-top: 16px; }
    .address-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
    .address-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-family: inherit;
        background: var(--bg-card);
        color: var(--text);
        resize: vertical;
        box-sizing: border-box;
    }

    /* Calendar — rounded-square cells, Cal.com style */
    .calendar-container {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin-bottom: 16px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .calendar-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 18px;
    }
    .calendar-nav {
        width: 34px; height: 34px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--text-muted);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.15s;
    }
    .calendar-nav:hover {
        background: var(--bg-subtle);
        color: var(--text);
        border-color: var(--border-strong);
    }
    .calendar-month { font-weight: 600; font-size: 15px; color: var(--text); letter-spacing: -0.01em; }
    .calendar-weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        padding: 0 14px 6px;
    }
    .calendar-weekday {
        text-align: center;
        font-size: 11px;
        color: var(--text-subtle);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 4px 0;
    }
    .calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        padding: 0 10px 12px;
    }
    .calendar-day {
        aspect-ratio: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: none;
        padding: 0;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        background: transparent;
        color: var(--text);
        transition: background 0.12s, color 0.12s, transform 0.12s;
        position: relative;
        line-height: 1;
    }
    .calendar-day:hover:not(.disabled):not(.selected) {
        background: var(--bg-subtle);
        transform: translateY(-1px);
    }
    .calendar-day.selected {
        background: var(--service-color) !important;
        color: #fff !important;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    }
    .calendar-day.disabled {
        color: var(--gray-300);
        cursor: not-allowed;
        background: transparent;
    }
    .calendar-day.disabled:hover { background: transparent; transform: none; }
    .calendar-day.today:not(.selected) {
        color: var(--service-color);
        font-weight: 700;
    }
    .calendar-day.today:not(.selected)::after {
        content: '';
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px; height: 4px;
        border-radius: 50%;
        background: var(--service-color);
    }
    .calendar-day.has-flex:not(.selected) {
        background: var(--service-soft);
        color: var(--service-color);
        font-weight: 600;
    }
    .calendar-day.holiday:not(.selected) {
        background: #ECFDF5;
        color: #047857;
    }
    .calendar-day.holiday:not(.selected)::before {
        content: '';
        position: absolute;
        top: 4px; right: 4px;
        width: 5px; height: 5px;
        border-radius: 50%;
        background: #10b981;
    }
    .calendar-day.blocked,
    .calendar-day.service-blocked,
    .calendar-day.service-unavailable {
        background: transparent;
        color: var(--gray-300);
        cursor: not-allowed;
        text-decoration: line-through;
        text-decoration-color: rgba(239, 68, 68, 0.4);
        text-decoration-thickness: 1.5px;
        border: none;
    }
    .calendar-day.blocked:hover,
    .calendar-day.service-blocked:hover,
    .calendar-day.service-unavailable:hover {
        background: transparent;
        transform: none;
    }
    .holiday-label { display: none; }
    .flex-wizard-root .booking-dots {
        position: absolute;
        bottom: 4px; left: 0; right: 0;
        display: flex; justify-content: center; gap: 3px;
        pointer-events: none;
    }
    .flex-wizard-root .booking-dot { width: 3px; height: 3px; border-radius: 50%; opacity: 0.7; }
    .calendar-day.selected .booking-dot { background: rgba(255,255,255,0.85) !important; opacity: 1; }
    .calendar-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        padding: 10px 18px 14px;
        background: var(--bg-subtle);
        font-size: 11px;
        color: var(--text-muted);
        border-top: 1px solid var(--border);
    }
    .legend-item { display: flex; align-items: center; gap: 6px; }
    .legend-swatch {
        width: 10px; height: 10px; border-radius: 3px;
        position: relative;
    }
    .legend-swatch.holiday {
        background: #ECFDF5;
    }
    .legend-swatch.holiday::after {
        content: '';
        position: absolute;
        top: 1px; right: 1px;
        width: 3px; height: 3px;
        border-radius: 50%;
        background: #10b981;
    }
    .legend-swatch.blocked {
        background: transparent;
        border: 1px solid var(--gray-300);
    }
    .legend-swatch.blocked::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(239, 68, 68, 0.5) calc(50% - 1px), rgba(239, 68, 68, 0.5) calc(50% + 1px), transparent calc(50% + 1px));
    }

    .selected-days-summary {
        background: var(--service-soft);
        border: 1px solid var(--service-color);
        border-radius: var(--radius-md);
        padding: 12px 14px;
    }
    .selected-days-header { display: flex; justify-content: space-between; align-items: center; }
    .selected-days-title { color: var(--service-color); font-weight: 700; font-size: 14px; }
    .clear-btn {
        background: transparent; border: none;
        color: var(--text-muted); font-size: 12px; cursor: pointer;
        text-decoration: underline;
    }
    .day-chip {
        display: inline-block;
        padding: 4px 10px;
        background: var(--bg-card);
        border: 1px solid var(--service-color);
        border-radius: 999px;
        font-size: 12px;
        margin-right: 6px;
    }

    /* Time slots */
    .time-legend {
        display: flex; gap: 16px; flex-wrap: wrap;
        font-size: 11px; color: var(--text-muted);
        margin-bottom: 14px;
    }
    .time-legend-item { display: flex; align-items: center; gap: 6px; }
    .time-legend-dot { width: 12px; height: 12px; border-radius: 4px; }
    .time-section { margin-bottom: 18px; }
    .time-section-header {
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 10px;
    }
    .time-section-icon {
        width: 24px; height: 24px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    .time-section-label {
        font-weight: 600; font-size: 13px; color: var(--text);
    }
    .time-section-line {
        flex: 1;
        height: 1px;
        background: var(--border);
    }
    .time-slots-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .time-slot {
        background: var(--bg-card);
        border: 1px solid var(--border);
        color: var(--text);
        border-radius: var(--radius-sm);
        padding: 10px 6px;
        text-align: center;
        cursor: pointer;
        transition: all 0.15s;
    }
    .time-slot:hover:not(.unavailable):not(.selected) { border-color: var(--border-strong); }
    .time-slot.selected {
        background: var(--service-soft);
        border-color: var(--service-color);
        color: var(--service-color);
    }
    .time-slot.my-booking {
        background: #FEE2E2;
        border-color: #EF4444;
        color: #991b1b;
    }
    .time-slot.unavailable {
        background: var(--bg-subtle);
        color: var(--text-subtle);
        cursor: not-allowed;
        opacity: 0.7;
    }
    .time-slot-text { font-weight: 600; font-size: 13px; }
    .time-slot-sub { font-size: 10px; margin-top: 2px; opacity: 0.85; }

    /* Conflict alert */
    .conflict-alert {
        background: #FEF2F2;
        border: 1px solid #FCA5A5;
        border-radius: var(--radius-md);
        padding: 12px 14px;
        margin-bottom: 14px;
    }
    .conflict-alert-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
    .conflict-alert-title { font-weight: 600; font-size: 13px; color: #991b1b; }
    .conflict-alert-detail { font-size: 12px; color: #7f1d1d; }
    .conflict-alert-hint { margin-top: 4px; font-size: 11px; color: #b91c1c; opacity: 0.8; }

    /* Add-on card */
    .addon-header {
        display: flex; align-items: flex-start; gap: 10px;
        cursor: pointer;
    }
    .addon-info { flex: 1; }
    .addon-name { font-weight: 600; font-size: 15px; color: var(--text); }
    .addon-desc { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
    .addon-price { font-weight: 700; color: var(--service-color); margin-top: 4px; font-size: 13px; }
    .addon-pets-container { margin-top: 12px; }
    .addon-pets-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
    .addon-pets-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .addon-pet-chip {
        background: var(--bg-card);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 12px;
        color: var(--text);
        cursor: pointer;
    }
    .addon-pet-chip.selected {
        border-color: var(--service-color);
        background: var(--service-soft);
        color: var(--service-color);
    }
    .addon-pet-photo {
        width: 22px; height: 22px;
        border-radius: 50%;
        background: var(--bg-subtle);
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
    }
    .addon-pet-photo img { width: 100%; height: 100%; object-fit: cover; }

    /* Confirm step */
    .summary-card, .price-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 14px 16px;
        margin-bottom: 14px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .summary-row {
        display: flex; align-items: center; gap: 10px;
        padding: 6px 0;
        font-size: 13px;
    }
    .summary-label { width: 80px; color: var(--text-muted); font-size: 12px; }
    .summary-value { flex: 1; color: var(--text); font-weight: 500; text-align: right; }
    .price-row {
        display: flex; justify-content: space-between;
        padding: 4px 0;
        font-size: 13px;
    }
    .price-row.discount { color: #15803d; }
    .price-label { color: var(--text-muted); }
    .price-value { color: var(--text); font-weight: 500; }
    .total-row {
        display: flex; justify-content: space-between;
        padding-top: 10px;
        margin-top: 8px;
        border-top: 1px solid var(--border);
        font-size: 15px;
    }
    .total-label { color: var(--text); font-weight: 700; }
    .total-value { color: var(--service-color); font-weight: 700; }

    .deposit-card {
        background: #FFF7ED;
        border: 1px solid #FDBA74;
        border-radius: var(--radius-md);
        padding: 12px 14px;
        margin-bottom: 14px;
    }
    .deposit-card.payable { background: #ECFDF5; border-color: #6EE7B7; }
    .deposit-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
    .deposit-title { font-weight: 700; font-size: 13px; color: var(--text); }
    .deposit-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
    .deposit-label { color: var(--text-muted); }
    .deposit-amount { font-weight: 700; color: var(--text); }
    .deposit-note { font-size: 11px; color: #c2410c; margin-top: 4px; }
    .book-pay-btn {
        width: 100%;
        margin-top: 10px;
        padding: 12px;
        background: var(--service-color);
        color: white;
        border: none;
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .book-pay-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .pay-later-link { text-align: center; margin-top: 8px; }
    .pay-later-text {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 11px;
        cursor: pointer;
        text-decoration: underline;
    }

    .promo-toggle {
        background: none; border: none;
        color: var(--service-color);
        font-size: 13px;
        cursor: pointer;
        display: flex; align-items: center; gap: 6px;
        padding: 8px 0;
    }
    .promo-input-row { display: flex; gap: 6px; margin-bottom: 6px; }
    .promo-input {
        flex: 1;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 13px;
        background: var(--bg-card);
        color: var(--text);
    }
    .promo-apply-btn {
        padding: 8px 16px;
        background: var(--service-color);
        color: white;
        border: none;
        border-radius: var(--radius-sm);
        font-weight: 600;
        cursor: pointer;
    }
    .promo-error { color: #b91c1c; font-size: 12px; margin-bottom: 6px; }
    .promo-applied {
        background: #ECFDF5;
        border: 1px solid #6EE7B7;
        border-radius: var(--radius-sm);
        padding: 8px 10px;
        display: flex; justify-content: space-between; align-items: center;
        font-size: 13px;
        color: #047857;
        margin-bottom: 10px;
    }
    .promo-remove-btn { background: none; border: none; cursor: pointer; color: #6b7280; }

    .notes-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin: 12px 0 6px; }
    .notes-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-family: inherit;
        background: var(--bg-card);
        color: var(--text);
        resize: vertical;
        min-height: 70px;
        box-sizing: border-box;
    }
    .disclaimer { font-size: 11px; color: var(--text-subtle); text-align: center; margin-top: 12px; }
    .vax-warning { background: #FEF3C7; border: 1px solid #F59E0B; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; }
    .vax-warning-title { font-weight: 700; font-size: 13px; color: #92400e; }
    .vax-warning-text { font-size: 12px; color: #78350f; margin-top: 4px; }

    /* Bottom navigation */
    .bottom-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 24px 14px;
        /* Home-indicator/bezel relief at the bottom (matches the top ribbon). */
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        position: sticky;
        bottom: 0;
    }
    .nav-btn {
        width: 48px; height: 48px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--bg-subtle);
        color: var(--text);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }
    .nav-btn:hover:not(:disabled) { border-color: var(--service-color); color: var(--service-color); }
    .nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .nav-btn.primary {
        background: var(--service-color);
        border-color: var(--service-color);
        color: white;
    }
    .nav-btn.primary:disabled {
        background: var(--border);
        border-color: var(--border);
        color: var(--text-subtle);
    }
    .home-btn {
        width: 48px; height: 48px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--bg-subtle);
        color: var(--text);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }
    .home-btn:hover { background: var(--border); }

    /* Spinner */
    .spinner {
        width: 32px; height: 32px;
        border: 3px solid var(--border);
        border-top-color: var(--service-color);
        border-radius: 50%;
        animation: flex-wiz-spin 0.8s linear infinite;
        margin: 0 auto;
    }
    .loading-container { text-align: center; padding: 40px 20px; color: var(--text-muted); }
    .loading-text { color: var(--text-muted); margin-top: 10px; }
    .empty-card {
        text-align: center;
        padding: 40px 20px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }
    .empty-title { font-weight: 700; margin-top: 12px; color: var(--text); }
    .empty-text { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

    /* Modals (vax / success / waiver) — overlay over wizard.
       book.html's booking-full.css declares .modal-overlay { opacity:0; pointer-events:none }
       and uses a .show class to make it visible. Our wizard uses .hidden to toggle visibility,
       so we explicitly set opacity:1 + pointer-events:auto here to override the page styles. */
    .modal-overlay.hidden { display: none !important; }
    .modal-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center;
        z-index: 9999;
        padding: 20px;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .vax-modal-content,
    .success-modal-content {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: 24px;
        max-width: 400px;
        width: 100%;
        text-align: center;
        color: var(--text);
    }
    .vax-modal-icon, .success-icon {
        width: 64px; height: 64px;
        background: #FEF3C7;
        border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        color: #F59E0B;
        margin-bottom: 12px;
    }
    .success-icon.approved { background: #D1FAE5; color: #047857; }
    .vax-modal-title, .success-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
    .vax-modal-message, .success-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 14px; white-space: pre-line; }
    .vax-modal-btn, .success-btn {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: var(--radius-sm);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        margin-top: 8px;
    }
    .vax-modal-btn.primary, .success-btn.done { background: var(--service-color); color: white; }
    .vax-modal-btn.secondary { background: var(--bg-subtle); color: var(--text); }
    .success-btn.calendar { background: #3B82F6; color: white; }
    .success-buttons { display: flex; flex-direction: column; gap: 6px; }
    .success-details-card {
        background: var(--bg-subtle);
        border-radius: var(--radius-sm);
        padding: 12px;
        margin: 12px 0;
        text-align: left;
    }
    .success-detail-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--text); }
    .success-detail-icon { color: var(--text-muted); }
    .success-status-badge {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px;
        background: #FEF3C7;
        color: #92400e;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 14px;
    }
    .success-status-badge.approved { background: #D1FAE5; color: #047857; }

    /* Waiver modal */
    .waiver-modal {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        max-width: 500px;
        width: 100%;
        max-height: 90vh;
        display: flex; flex-direction: column;
        overflow: hidden;
        color: var(--text);
    }
    .waiver-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
    }
    .waiver-title { font-weight: 700; font-size: 16px; }
    .waiver-close-btn { background: var(--bg-subtle); border: none; padding: 6px; border-radius: 50%; cursor: pointer; color: var(--text); }
    .waiver-body {
        padding: 16px;
        overflow-y: auto;
        flex: 1;
    }
    .waiver-info-banner {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px;
        background: var(--service-soft);
        border-radius: var(--radius-sm);
        font-size: 13px;
        color: var(--text);
        margin-bottom: 12px;
    }
    .waiver-pets-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .waiver-pet-badge {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 4px 10px;
        background: var(--bg-subtle);
        border: 1px solid var(--border);
        border-radius: 999px;
        font-size: 12px;
        color: var(--text);
    }
    .waiver-pet-badge.signed { background: #D1FAE5; border-color: #6EE7B7; color: #047857; }
    .waiver-content-box {
        background: var(--bg-subtle);
        padding: 14px;
        border-radius: var(--radius-sm);
        max-height: 220px;
        overflow-y: auto;
        font-size: 13px;
        margin-bottom: 14px;
        line-height: 1.5;
    }
    .waiver-content-box h3, .waiver-content-box h4 { margin-top: 8px; margin-bottom: 4px; }
    .waiver-content-box p { margin-bottom: 8px; }
    .waiver-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin: 8px 0 4px; }
    .waiver-name-input {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 14px;
        background: var(--bg-card);
        color: var(--text);
        box-sizing: border-box;
    }
    .signature-pad {
        position: relative;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        height: 120px;
        margin-top: 4px;
    }
    .signature-canvas { width: 100%; height: 100%; cursor: crosshair; }
    .clear-signature-btn {
        position: absolute;
        top: 6px; right: 6px;
        background: var(--bg-subtle);
        border: 1px solid var(--border);
        border-radius: 4px;
        font-size: 11px;
        padding: 3px 8px;
        cursor: pointer;
        color: var(--text);
    }
    .waiver-agree-row {
        display: flex; align-items: center; gap: 8px;
        margin: 10px 0;
        font-size: 13px;
        color: var(--text);
    }
    .waiver-agree-checkbox {
        width: 22px; height: 22px;
        border-radius: 4px;
        border: 1.5px solid var(--border-strong);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }
    .waiver-agree-checkbox.checked { background: var(--service-color); border-color: var(--service-color); }
    .waiver-submit-btn {
        width: 100%;
        padding: 12px;
        background: var(--service-color);
        color: white;
        border: none;
        border-radius: var(--radius-sm);
        font-weight: 700;
        cursor: pointer;
    }
    .waiver-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    /* Stripe / Square payment modals (created dynamically by wizard) */
    .stripe-modal-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center;
        z-index: 99999;
        padding: 20px;
    }
    .stripe-modal {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        max-width: 460px;
        width: 100%;
        max-height: 90vh;
        display: flex; flex-direction: column;
        overflow: hidden;
        color: var(--text);
    }
    .stripe-modal-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
    }
    .stripe-modal-header h3 { font-size: 16px; font-weight: 700; }
    .stripe-close-btn { background: var(--bg-subtle); border: none; padding: 6px 10px; border-radius: 50%; cursor: pointer; }
    .stripe-modal-body { padding: 16px; overflow-y: auto; }
    .stripe-amount {
        display: flex; justify-content: space-between; align-items: center;
        padding: 10px 12px;
        background: var(--bg-subtle);
        border-radius: var(--radius-sm);
        margin-bottom: 14px;
        font-size: 14px;
    }
    .stripe-error { color: #b91c1c; font-size: 12px; padding: 6px 0; }
    .stripe-modal-footer {
        padding: 12px 16px;
        border-top: 1px solid var(--border);
        display: flex; flex-direction: column; gap: 6px;
    }
    .stripe-pay-btn {
        padding: 12px;
        background: var(--service-color);
        color: white;
        border: none;
        border-radius: var(--radius-sm);
        font-weight: 700;
        cursor: pointer;
    }
    .stripe-pay-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .stripe-cancel-btn {
        padding: 10px;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        cursor: pointer;
    }
    .stripe-loading { text-align: center; padding: 20px; color: var(--text-muted); }
    .stripe-spinner {
        width: 24px; height: 24px;
        border: 3px solid var(--border);
        border-top-color: var(--service-color);
        border-radius: 50%;
        animation: flex-wiz-spin 0.8s linear infinite;
        margin: 0 auto;
        display: inline-block;
    }
    .stripe-spinner.hidden { display: none; }
    .apple-pay-section { margin-bottom: 12px; }
    .apple-pay-button {
        -webkit-appearance: -apple-pay-button;
        -apple-pay-button-type: book;
        -apple-pay-button-style: black;
        width: 100%; height: 44px;
    }
    .apple-pay-divider { text-align: center; font-size: 11px; color: var(--text-muted); margin: 8px 0; }

    /* ───── DESKTOP: Calendly-style 2-column sidebar layout (≥1024px) ───── */
    @media (min-width: 1024px) {
        .flex-app-container {
            max-width: none;
            height: 100%;
            display: grid;
            grid-template-columns: 280px 1fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "sidebar header"
                "sidebar content"
                "sidebar nav";
        }
        .booking-header {
            grid-area: header;
            padding: 20px 36px;
            position: static;
        }
        .progress-bar {
            grid-area: sidebar;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            background: var(--bg-subtle);
            border-right: 1px solid var(--border);
            border-bottom: none;
            padding: 28px 20px;
            gap: 6px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .progress-step {
            flex-direction: row;
            gap: 12px;
            min-width: 0;
            width: 100%;
            padding: 10px 14px;
            border-radius: 10px;
            transition: background 0.15s;
        }
        .progress-step:hover { background: rgba(59, 130, 246, 0.06); }
        .progress-step.active {
            background: var(--bg-card);
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
        }
        .step-circle {
            flex-shrink: 0;
            margin-bottom: 0;
        }
        .step-label {
            text-align: left;
            text-transform: none;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0;
        }
        .booking-content {
            grid-area: content;
            padding: 32px 36px;
            min-height: 0;
            overflow-y: auto;
        }
        .bottom-nav {
            grid-area: nav;
            padding: 16px 36px;
        }
        .step-title { font-size: 28px; margin-bottom: 4px; }
        .step-subtitle { font-size: 15px; margin-bottom: 24px; }
        .time-slots-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
    }
}