/* Public booking page styles. Lifted out of the view verbatim: the assembly sits on the ECMA-335
   user-string ceiling (CS8103) and every inline <style> body is a user string.
   Fourth eviction of this kind - see docs/kb/incidents/b2b-freight-walkthrough-2026-09-14.md */
.modal {
        overflow: auto !important;
    }

    .modal-open {
        overflow: auto !important;
    }

        .modal-open .modal {
            overflow-x: auto !important;
            overflow-y: auto;
        }

    .starlabel label:after {
        content: " *";
        color: red;
    }

    .container {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        /* display: flex; */
        box-shadow: none;
        align-items: center;
        border: none;
        background-color: transparent;
        justify-content: center;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden;
    }
    
    body {
        background: transparent !important;
    }
    
    #content {
        background: var(--color-green, #22A447);
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-height: calc(100vh - 60px); /* Account for navbar height */
        overflow-x: hidden;
    }
    
    .gradient-custom {
        margin: 0 !important;
        padding: 20px 0 !important; /* Add padding instead of relying on full viewport */
        width: 100% !important;
        min-height: calc(100vh - 60px); /* Account for navbar */
        position: relative;
        overflow-x: hidden;
    }

    /* The card used to run 1345px wide inside a 1393px section, so the org's chosen
       background survived as a ~24px sliver down each edge and the page read as a
       plain white sheet. Someone spends ten minutes picking a colour, uploads a
       logo, and sees nothing change.

       Constraining the card to a readable measure does two jobs at once: the
       branding becomes visible as a frame around it, and the form stops stretching
       its fields across a 1345px line. Only applies from tablet up — on a phone the
       card should still use the full width. */
    @media (min-width: 768px) {
        .gradient-custom > .container-fluid {
            max-width: 1120px;
            margin-left: auto;
            margin-right: auto;
        }
        .gradient-custom {
            padding: 36px 0 !important;
        }
    }
    /* CSS for modal overlay effect */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
        backdrop-filter: blur(5px); /* Apply blur effect to the background */
        z-index: 1000; /* Ensure the overlay is above everything else */
        display: none; /* Initially hidden */
    }


    .modal-open .modal-overlay {
        display: block; /* Show the overlay when modal is open */
    }

    .required {
        color: red;
    }

    .file-name-display {
        display: block;
        margin-top: 5px;
        font-size: 14px;
        color: #333;
    }

    .file-error-message {
        display: block;
        margin-top: 5px;
        font-size: 14px;
        color: red;
    }

    .text-danger {
        color: red;
    }

    .company-logo {
        display: flex;
        flex: 1 1 0px;
        justify-content: center;
    }

    /* #751 — discoverable orgs get an About link under the logo. Stack the
       two instead of letting the flex row squeeze the link in beside the
       logo, and keep the link's text on one line. */
    .company-logo--stacked {
        flex-direction: column;
        align-items: center;
    }
    .company-logo--stacked .org-about-link {
        margin-top: 6px;
        white-space: nowrap;
    }

    /* ── Mobile form-first ─────────────────────────────────────────────
       On phones the org description column used to render ABOVE the
       wizard, pushing the first input two screens down. Mobile order is
       now: org logo → wizard → "About this organization" toggle → the
       collapsed org letter. display:contents dissolves the org column so
       its children can interleave with the form column in the row's flex
       order. Desktop layout unchanged. */
    .org-letter-toggle {
        display: none; /* mobile-only control */
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 8px 0 4px;
        padding: 10px 14px;
        background: #fff;
        border: 1px solid #E5E7EB;
        border-radius: 9px;
        font-size: 15px;
        font-weight: 600;
        color: #0E1A2B;
        cursor: pointer;
    }
    .org-letter-toggle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(34,164,71,.35);
    }
    .org-letter-toggle .chevron { transition: transform .15s ease; }
    @media (max-width: 767.98px) {
        .booking-org-col { display: contents; }
        /* `display: contents` dissolves the column, so the logo becomes a flex item
           of the .row alongside the "What we sell" card. `width: 100%` alone still
           lets it SHRINK (flex-shrink defaults to 1), and with the card competing
           for the same line the org's logo collapsed to ~107px of a 279px row and
           read as cut in half — on the one page a driver sees their brand on.
           flex-basis 100% with no shrink claims the full line, so the card wraps
           underneath instead of crowding it. */
        .booking-org-col .company-logo {
            order: -1;
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
            margin-bottom: 8px;
        }
        /* Contain the image to the row rather than letting it define the width. */
        .booking-org-col .company-logo img { max-width: 100%; height: auto; object-fit: contain; }
        .booking-form-col { order: 0; }
        .org-letter-toggle { display: flex; order: 1; margin-top: 12px; }
        .booking-org-col .company_des { display: none; order: 2; width: 100%; }
        .booking-org-col.org-letter-open .company_des { display: block; }
        .booking-org-col.org-letter-open .org-letter-toggle .chevron { transform: rotate(180deg); }

        /* #754 — welcome preview. booking-welcome-collapse.js adds these
           classes (and moves the toggle AFTER the letter), turning the
           all-hidden letter into a three-line teaser under the logo with
           Read more; without JS the letter stays behind the toggle exactly
           as above. Scoped to this media block, so desktop never changes. */
        .booking-org-col .company_des.welcome-preview {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            order: 0;
            margin-bottom: 4px;
        }
        .org-letter-toggle.welcome-more { order: 0; margin: 0 0 12px; min-height: 36px; padding: 6px 14px; }
        .booking-org-col.org-letter-open .company_des.welcome-preview {
            display: block;
            -webkit-line-clamp: unset;
            overflow: visible;
        }
        .org-letter-toggle.welcome-more.welcome-short { display: none; }
    }

    /* ── Location cards (step 1) ───────────────────────────────────────
       A filter strip ABOVE the Appointment Type dropdown — the dropdown
       itself is unchanged, so users who ignore the cards keep the exact
       flow they know. Hidden entirely for single-location orgs,
       reschedules, and prefilled bookings (JS decides). */
    .facility-card-strip { margin-bottom: 14px; max-width: 100%; min-width: 0; }
    .facility-cards { max-width: 100%; }
    .facility-card-strip .fc-label {
        font-size: 13px;
        font-weight: 600;
        color: #485068;
        margin-bottom: 6px;
    }
    .facility-cards { display: flex; flex-wrap: wrap; gap: 8px; }
    .facility-card {
        min-height: 44px;
        padding: 8px 14px;
        background: #fff;
        border: 1px solid #E5E7EB;
        border-radius: 9px;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        transition: border-color .12s ease, background .12s ease;
    }
    .facility-card:hover { border-color: #9FB0C0; }
    .facility-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34,164,71,.35); }
    .facility-card.selected {
        border-color: #22A447;
        background: #f0faf7;
    }
    .facility-card .fc-name { font-size: 14px; font-weight: 600; color: #0E1A2B; display: block; line-height: 1.3; }
    /* #751 — street address as the card's second line; cap the card so a long
       address wraps inside it instead of stretching the strip. */
    .facility-card { max-width: 260px; }
    .facility-card .fc-addr { font-size: 12px; color: #485068; display: block; line-height: 1.3; margin-top: 1px; }
    .facility-card .fc-city { font-size: 12px; color: #6b7684; display: block; line-height: 1.3; }
    .facility-card.selected .fc-name { color: #107838; }
    @media (max-width: 767.98px) {
        .facility-cards { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
        .facility-card { flex: 0 0 auto; max-width: 230px; }
        .facility-card .fc-addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
    }

    /* ── Time chips (step 2) ───────────────────────────────────────────
       A tappable grid mirroring the #availableSlots select. The select
       stays in the DOM as the source of truth (all existing logic reads
       and writes it); when the chips are active it is visually hidden.
       Any JS failure leaves the select visible — chips are pure gloss. */
    .slot-chip-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
        gap: 8px;
        margin-top: 4px;
        max-width: 100%;
    }
    .slot-chips-active #availableSlots { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .slot-chip {
        min-height: 44px;
        padding: 6px 8px;
        background: #fff;
        border: 1px solid #E5E7EB;
        border-radius: 9px;
        cursor: pointer;
        font-family: inherit;
        text-align: center;
        transition: border-color .12s ease, background .12s ease;
    }
    .slot-chip:hover:not(:disabled) { border-color: #9FB0C0; }
    .slot-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34,164,71,.35); }
    .slot-chip.selected { border-color: #22A447; background: #f0faf7; }
    .slot-chip:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
    .slot-chip .sc-time { font-size: 14px; font-weight: 600; color: #0E1A2B; display: block; line-height: 1.3; }
    .slot-chip.selected .sc-time { color: #107838; }
    .slot-chip .sc-note { font-size: 11px; color: #b45309; display: block; line-height: 1.3; }
    /* Per-slot price (#497). Base price reads green; a surcharged slot borrows the amber
       the scarcity note already uses, so the expensive times stand out at a glance. */
    .slot-chip .sc-price { font-size: 11px; font-weight: 700; color: #107838; display: block; line-height: 1.3; }
    .slot-chip .sc-price.sc-price-up { color: #b45309; }
    .slot-chip-empty {
        grid-column: 1 / -1;
        padding: 14px;
        background: #F7F9FA;
        border: 1px dashed #E5E7EB;
        border-radius: 9px;
        font-size: 14px;
        color: #485068;
        text-align: center;
    }

    /* ── Booking summary strip (step 3) ────────────────────────────────
       Restates what/when/where while the booker fills in details, so the
       chosen slot never leaves their sight. Read-only, built client-side
       from the same state the wizard already holds. */
    .booking-summary-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 16px;
        align-items: baseline;
        padding: 10px 14px;
        margin-bottom: 14px;
        background: #f0faf7;
        border: 1px solid #cde9d8;
        border-radius: 9px;
        font-size: 14px;
        color: #0E1A2B;
    }
    .booking-summary-strip .bss-when { font-weight: 700; }
    .booking-summary-strip .bss-where { color: #485068; }
    .booking-summary-strip .bss-what { color: #485068; }
    /* Remove any accidental masking/effects on logos */
    .company-logo img,
    .logo {
        -webkit-mask: none !important;
        mask: none !important;
        clip-path: none !important;
        mix-blend-mode: normal !important;
        filter: none !important;
    }

    /* SmartUploader containment for Event Booking */
    .eventqa-file-uploader,
    .eventqa-file-uploader .su-dropzone,
    .eventqa-file-uploader .su-file-list {
        max-width: 100%;
        box-sizing: border-box;
    }

    .eventqa-file-uploader {
        width: 100%;
        display: block;
    }

    .logo {
        width: clamp(160px, 18vw, 240px);
        height: auto;
        border-radius: 0;
    }
    /* Remove decorative corner masks on card */
    .gradient-custom .card-registration::before,
    .gradient-custom .card-registration::after { display:none !important; content:none !important; }
    /* Hard neutralize any overlays/masks near logos */
    .card-registration { overflow: visible !important; }
    .company-logo, .logo { position: relative; z-index: 5; background: none !important; box-shadow: none !important; }
    .company-logo::before, .company-logo::after, .logo::before, .logo::after { content: none !important; display: none !important; }
    .company-logo img, .logo {
        -webkit-mask: none !important; mask: none !important;
        clip-path: none !important; mix-blend-mode: normal !important; filter: none !important;
        object-fit: contain;
        background-color: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        padding: 0 !important;
        margin: 0;
    }
    /* Final logo de-frame (wrappers + focus states) */
    .company-logo,
    .company-logo *,
    .footer-logo,
    .footer-logo * {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }
    .company-logo a:focus,
    .company-logo a:active { outline: none !important; box-shadow: none !important; }
    .card-registration .company-logo { position: relative; isolation: isolate; }

    /* SHARE: tiny circular share button. Lives inside .booking-auth-badge so it
       flows in the same top-right cluster as the sign-in / signed-in pill, matching
       their visual weight. No absolute positioning of its own — the parent badge
       owns placement. */
    .booking-share-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(6px);
        color: #475569;
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    }
    .booking-share-btn:hover {
        background: rgba(255, 255, 255, 0.95);
        color: #1abc9c;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    .booking-share-btn:focus-visible { outline: 2px solid #1abc9c; outline-offset: 2px; }
    .booking-share-btn:active { transform: scale(0.94); }
    /* Remove any inner glow/eye highlight generated by the theme */
    .gradient-custom .card-registration::before,
    .gradient-custom .card-registration::after,
    .gradient-custom .card-registration .card-body::before,
    .gradient-custom .card-registration .card-body::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    /* Force a flat white card; prevent theme background images from bleeding in */
    .gradient-custom .card-registration,
    .gradient-custom .card-registration .card-body {
        background: #fff !important;
        background-image: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        background-clip: padding-box !important;
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
    }
    /* Prevent any loading/disabled states from graying out the form */
    .gradient-custom .card-registration *:not(.btn):not([disabled]) {
        opacity: 1 !important;
    }
    /* Remove any modal backdrop that might be lingering */
    .modal-backdrop.show {
        display: none !important;
    }
    /* FINAL kill: remove accidental rounding that creates the 'eye' */
    .card-registration .company-logo,
    .card-registration .company-logo *,
    .card-registration .footer-logo,
    .card-registration .footer-logo * {
        border-radius: 0 !important;
        overflow: visible !important;
        background-clip: padding-box !important;
    }
    /* Also neutralize rounding on grid wrappers near logos */
    .card-registration .row [class*="col-"] {
        border-radius: 0 !important;
    }

    p {
        margin-bottom: 0 !important;
        color: black !important;
    }

    /* Ensure MCE formatting is visible in descriptions */
    /* Intro video: 16:9 poster that becomes the player on click. Fluid width so it
       behaves in the narrow org column on desktop and full-bleed on a phone. */
    .booking-video { margin: 14px 0 6px; }
    .booking-video-poster { display: block; position: relative; width: 100%; padding: 0; border: 0;
        background: #0B1120; border-radius: 12px; overflow: hidden; cursor: pointer; line-height: 0; }
    .booking-video-poster img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
    .booking-video-poster:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34,164,71,.45); }
    .booking-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        font-size: 30px; color: #fff; background: rgba(11,17,32,.35); transition: background .15s ease; }
    .booking-video-poster:hover .booking-video-play { background: rgba(11,17,32,.5); }
    .booking-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; display: block; }
    .company_des strong,
    .company_des b {
        font-weight: 700 !important;
    }

    .company_des em,
    .company_des i {
        font-style: italic !important;
    }

    .company_des u {
        text-decoration: underline !important;
    }

    .mb-4, .col-md-6, .mb-6 {
        margin-bottom: 1.5rem !important;
    }

    #removeformafterselection {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    #step3 hr {
        display: none;
    }

    #step3 {
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        #step3 .form-control, #step3 input, #step3 select, #step3 textarea {
            border: 1px solid #ccc !important; /* Restore borders for input fields */
            margin-bottom: 10px; /* Add some margin if needed */
            padding: 5px; /* Add some padding if needed */
        }

    .dvQA {
        margin-top: 0 !important; /* Adjust as necessary to avoid unwanted spacing */
    }

    /* 🎯 Responsive Booking Flow: Hide pickup/dropoff until appointment type selected */
    .pickup-dropoff-section {
        transition: all 0.3s ease-in-out;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
    }

    .pickup-dropoff-section.visible {
        max-height: 200px;
        opacity: 1;
        margin-top: 1rem;
    }

    /* Highlight appointment type selector */
    #eventTyes {
        transition: border-color 0.3s ease;
    }
    
    /* Ensure appointment type dropdown is always enabled and visible */
    #eventTyes:not([disabled]) {
        background-color: #fff !important;
        color: #495057 !important;
        cursor: pointer !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Override any disabled styling */
    #eventTyes.disabled,
    #eventTyes[disabled] {
        background-color: #fff !important;
        color: #495057 !important;
        cursor: pointer !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Ensure it's always clickable unless explicitly reschedule mode */
    #eventTyes {
        background-color: #fff !important;
        color: #495057 !important;
    }

    #eventTyes:focus {
        border-color: #007bff !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    /* 📱 ENHANCED Mobile Date Picker & Booking Optimizations */
    @media screen and (max-width: 768px) {
        /* Full-width responsive date input */
        .eventDatePicker {
            width: 100% !important;
            min-width: 0 !important;
            font-size: 16px !important; /* Prevent iOS zoom */
            padding: 0.75rem !important;
            border-radius: 0.375rem 0 0 0.375rem !important;
        }
        
        /* Larger touch-friendly calendar button */
        .date-picker-btn {
            min-width: 50px !important;
            min-height: 48px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 0 0.375rem 0.375rem 0 !important;
            border-left: 1px solid #dee2e6 !important;
        }
        
        /* Input group layout */
        #datepicker.input-group {
            flex-wrap: nowrap !important;
            width: 100% !important;
            display: flex !important;
        }
        
        /* Calendar dropdown - centered modal-style positioning */
        .datepicker-dropdown {
            z-index: 9999 !important;
            position: fixed !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
            max-height: 80vh !important;
            overflow-y: auto !important;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
            border-radius: 0.5rem !important;
            background: white !important;
            padding: 1rem !important;
        }
        
        /* Overlay backdrop when calendar is open */
        body.datepicker-open::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9998;
        }
        
        /* Larger touch targets in calendar */
        .datepicker table tr td {
            width: 40px !important;
            height: 40px !important;
            font-size: 16px !important;
        }
        
        .datepicker table tr td.day:hover,
        .datepicker table tr td.day.focused {
            background: #e9ecef !important;
        }
        
        /* Slot dropdown improvements */
        #availableSlots {
            font-size: 16px !important;
            padding: 0.75rem !important;
            min-height: 48px !important;
        }
        
        /* Button improvements for mobile */
        .btn.gradient, .btn-primary, .btn-secondary {
            min-height: 48px !important;
            font-size: 16px !important;
            padding: 0.75rem 1.5rem !important;
            margin: 0.25rem !important;
        }
        
        /* Form spacing on mobile */
        .form-outline {
            margin-bottom: 1rem !important;
        }
        
        /* Better placeholder visibility */
        .eventDatePicker::placeholder {
            font-size: 14px;
            color: #6c757d;
        }
        
        /* General touch-friendly inputs/selects */
        select.form-select, 
        input.form-control, 
        textarea.form-control {
            font-size: 16px !important;
            min-height: 48px !important;
            padding: 0.75rem !important;
        }
        
        /* Loading indicator */
        .loading-slots::after {
            content: '⏳ Loading slots...';
            display: block;
            padding: 1rem;
            text-align: center;
            color: #6c757d;
        }

        /* 📱 Mobile UX: Remove "Card" frame for full-screen native feel */
        .card, .card.card-registration, .card-body {
            box-shadow: none !important;
            border: none !important;
            border-radius: 0 !important;
            margin: 0 !important;
            background: transparent !important; /* Let gradient/white show through naturally */
            padding: 0 !important; /* Maximise space */
        }
        
        .container {
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }
        
        /* Re-add padding strictly for the form content so it doesn't touch edges */
        .card-body.p-4, .card-body.p-md-5 {
            padding: 1.25rem !important;
        }
        
        /* Ensure logos look good without the card constraint */
        .company-logo img {
            max-height: 80px; /* Limit height so it doesn't dominate mobile screen */
            margin-bottom: 1rem;
        }
    }
    
    /* 🎨 Visual loading states for perceived speed */
    .skeleton-loader {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s ease-in-out infinite;
        border-radius: 0.375rem;
        min-height: 48px;
    }
    
    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* Perceived-speed (prod rageclick fix): the appointment-type + time-slot controls
       sit behind a ~1s AJAX (GetEventTypeById). While it runs, show a clear "loading"
       status so taps read as busy, not dead. This is additive visual feedback only —
       it never changes the controls' enabled/disabled state (existing logic owns that). */
    #doptSlotLoading {
        display: none;
        align-items: center;
        gap: 8px;
        margin: 8px 0 4px;
        padding: 8px 12px;
        font-size: 13px;
        color: #0E1A2B;
        background: rgba(34, 164, 71, .07);
        border: 1px solid rgba(34, 164, 71, .25);
        border-radius: var(--radius-sm, 6px);
    }
    #doptSlotLoading.show { display: flex; }
    #doptSlotLoading .dopt-spin {
        width: 14px; height: 14px;
        border: 2px solid rgba(34, 164, 71, .35);
        border-top-color: var(--color-green, #22A447);
        border-radius: 50%;
        animation: dopt-spin 0.7s linear infinite;
        flex: 0 0 auto;
    }
    @keyframes dopt-spin { to { transform: rotate(360deg); } }
    body.dopt-booking-busy, body.dopt-booking-busy select { cursor: progress; }

    /* Price-upfront summary for paid appointment types (#471). */
    #doptPriceSummary {
        display: none;
        margin: 10px 0;
        padding: 10px 14px;
        font-size: 14px;
        line-height: 1.45;
        color: #0E1A2B;
        background: rgba(34, 164, 71, .07);
        border: 1px solid rgba(34, 164, 71, .25);
        border-radius: var(--radius-sm, 6px);
    }
    #doptPriceSummary .fas { color: var(--color-green-dk, #107838); }

    /* Smooth transitions for better UX */
    select.form-select, input.form-control {
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    
    /* Success state visual feedback */
    .is-valid {
        border-color: var(--color-green) !important;
        padding-right: calc(1.5em + 0.75rem);
        /* #716 — the tick was Bootstrap's #28a745 while the border a line above it was already
           the green of record, so the two disagreed inside one control. A data: URI cannot read
           a custom property, so the literal has to stay; it is the green of record spelled out. */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2322A447' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
    
    /* Progress indicator styles */
    .booking-progress {
        margin-bottom: 2rem;
        padding: 1rem 0;
    }
    
    .progress-steps {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* Fix: Align to top so icons match regardless of label height */
        position: relative;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .progress-steps::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 0;
        right: 0;
        height: 2px;
        background: #e0e0e0;
        z-index: 0;
    }
    
    .step-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 1;
        flex: 1;
    }
    
    .step-indicator:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 20px;
        left: 50%;
        width: 100%;
        height: 2px;
        background: #e0e0e0;
        z-index: -1;
    }
    
    .step-indicator.active:not(:last-child)::after,
    .step-indicator.completed:not(:last-child)::after {
        background: var(--color-green, #22A447);
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e0e0e0;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 8px;
        transition: all 0.3s ease;
    }
    
    .step-indicator.active .step-number {
        background: var(--color-green, #22A447);
        color: white;
        box-shadow: 0 0 0 4px rgba(34, 164, 71, 0.2);
    }
    
    .step-indicator.completed .step-number {
        background: var(--color-green, #22A447);
        color: white;
    }
    
    .step-indicator.completed .step-number::before {
        content: '✓';
        font-size: 20px;
    }
    
    .step-label {
        font-size: 12px;
        color: #666;
        text-align: center;
        font-weight: 500;
    }
    
    .step-indicator.active .step-label {
        color: var(--color-green, #22A447);
        font-weight: 600;
    }
    
    .step-indicator.completed .step-label {
        color: var(--color-green, #22A447);
    }
    
    @media (max-width: 768px) {
        .step-label {
            font-size: 10px;
        }
        .step-number {
            width: 32px;
            height: 32px;
            font-size: 14px;
        }
    }

    /* ── Submit Button Polish ── */
    .btn.gradient {
        background: linear-gradient(135deg, var(--color-green, #22A447) 0%, #5AAE47 100%);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 0.65rem 2rem;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0.3px;
        transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        position: relative;
        overflow: hidden;
    }
    .btn.gradient:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(34, 164, 71, 0.35);
    }
    .btn.gradient:active:not(:disabled) {
        transform: translateY(0);
    }
    .btn.gradient:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    /* Booking spinner inside submit button */
    .btn.gradient .spinner-border {
        width: 1rem;
        height: 1rem;
        border-width: 2px;
        margin-right: 0.4rem;
        vertical-align: middle;
    }

    /* ── Confirmation modal polish ── */
    .booking-success-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1050;
        backdrop-filter: blur(3px);
    }