/* tsi-booking.css v20260527-2
 * Loaded as external <link> from wp_footer priority 999.
 * Always fetched fresh by browser — bypasses LiteSpeed page cache.
 */

/* ══════════════════════════════════════════════
   STEP 1: Override Bootstrap CSS variables root
   This kills the white #F5F5F5 body background
   ══════════════════════════════════════════════ */
.wpb-shortcode-wrapper,
.wpb-booking-shortcode {
    --bs-body-bg:              #080808;
    --bs-body-bg-rgb:          8, 8, 8;
    --bs-body-color:           rgba(255,255,255,0.85);
    --bs-heading-color:        rgba(255,255,255,0.9);
    --bs-gray-900:             #121212;
    --bs-gray-100:             #161616;
    --bs-gray-200:             #1a1a1a;
    --bs-gray-300:             rgba(255,255,255,0.06);
    --bs-primary:              #C9A84C;
    --bs-primary-rgb:          201,168,76;
    --bs-primary-bg-subtle:    rgba(201,168,76,0.12);
    --bs-modal-bg:             #0d0d0d;
    --bs-modal-color:          rgba(255,255,255,0.85);
    --bs-border-color:         rgba(201,168,76,0.15);
    --bs-white:                #f8f8f8;
    --bs-secondary-bg:         #111;
}

/* ══════════════════════════════════════════════
   STEP 2: Booking wrapper dark background
   ══════════════════════════════════════════════ */
.wpb-shortcode-wrapper,
.wpb-booking-shortcode,
.wpb-booking-shortcode .container,
.wpb-booking-shortcode .row,
.wpb-booking-shortcode [class*="col-"],
.wpb-booking-shortcode .calander-body,
.wpb-booking-shortcode .calander-body .flatpickr-calendar {
    background: #080808 !important;
    background-color: #080808 !important;
    color: rgba(255,255,255,0.85) !important;
}
.wpb-booking-shortcode h3,
.wpb-booking-shortcode h5 {
    color: #C9A84C !important;
    font-family: "Tenor Sans", serif !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════
   STEP 3: Calendar chrome
   ══════════════════════════════════════════════ */
.flatpickr-calendar,
.flatpickr-days,
.dayContainer,
.flatpickr-innerContainer,
.flatpickr-rContainer {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.flatpickr-months, .flatpickr-month {
    background: transparent !important;
    color: rgba(255,255,255,0.9) !important;
    fill: rgba(255,255,255,0.9) !important;
}
.flatpickr-current-month {
    font-family: "Tenor Sans", serif !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #111 !important;
    color: rgba(255,255,255,0.9) !important;
    border: none !important;
    cursor: pointer !important;
}
.flatpickr-current-month input.cur-year {
    color: rgba(255,255,255,0.9) !important;
    background: transparent !important;
    font-family: "Tenor Sans", serif !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: rgba(201,168,76,0.75) !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: #C9A84C !important;
}
span.flatpickr-weekday {
    background: transparent !important;
    color: rgba(201,168,76,0.55) !important;
    font-family: "Tenor Sans", serif !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════
   STEP 4: CALENDAR DATE CELLS
   The visual state is via ::after pseudo-element.
   Cell itself must be transparent with no border.
   All states: circle (50%), not square.
   ══════════════════════════════════════════════ */

/* Base cell: transparent, no border, GOLD text for active dates */
.flatpickr-day {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.75) !important;
    font-family: "Tenor Sans", serif !important;
    font-size: 13px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ALL ::after pseudo-elements: force CIRCLE not SQUARE */
.flatpickr-day::after,
.wpb-booking-shortcode .flatpickr-day::after,
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day::after {
    border-radius: 50% !important;
    background-color: transparent !important;
}

/* Available date (future bookable): subtle gold circle ring */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.wpb-available {
    color: rgba(255,255,255,0.88) !important;
}
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.wpb-available::after {
    background-color: rgba(201,168,76,0.08) !important;
    border: 1px solid rgba(201,168,76,0.3) !important;
    border-radius: 50% !important;
}

/* Hover on available: brighter gold circle */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #C9A84C !important;
}
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day:hover::after {
    background-color: rgba(201,168,76,0.2) !important;
    border: 1px solid rgba(201,168,76,0.6) !important;
    border-radius: 50% !important;
}

/* SELECTED: gold solid circle */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.selected {
    background: transparent !important;
    background-color: transparent !important;
    color: #0d0d0d !important;
    font-weight: 700 !important;
}
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.selected::after {
    background-color: #C9A84C !important;
    border-color: #C9A84C !important;
    border-radius: 50% !important;
}

/* Today marker: outlined gold circle */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today::after {
    border: 2px solid rgba(201,168,76,0.7) !important;
    background-color: rgba(201,168,76,0.08) !important;
    border-radius: 50% !important;
}

/* Disabled / past dates: very dim, no circle */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: rgba(255,255,255,0.18) !important;
    cursor: default !important;
}
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.flatpickr-disabled::after,
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.prevMonthDay::after,
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.nextMonthDay::after {
    background-color: transparent !important;
    border: none !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(255,255,255,0.14) !important;
}

/* ══════════════════════════════════════════════
   STEP 5: TIME SLOTS
   WPBookit uses --bs-body-bg and --bs-white for
   slot backgrounds. Override both + direct bg.
   ══════════════════════════════════════════════ */
.wpb-booking-shortcode .booking-slots-time,
.wpb-booking-shortcode .wpb-available-time { background: transparent !important; }

.wpb-booking-shortcode .booking-slots-time li,
.booking-slots-time li,
.wpb-booking-shortcode .wpb-available-time li {
    background: rgba(255,255,255,0.04) !important;
    background-color: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(201,168,76,0.22) !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.78) !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    text-align: center !important;
    display: block !important;
    font-family: "Tenor Sans", serif !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    transition: all 0.18s !important;
    list-style: none !important;
}
.wpb-booking-shortcode .booking-slots-time li:hover,
.booking-slots-time li:hover {
    background: rgba(201,168,76,0.12) !important;
    background-color: rgba(201,168,76,0.12) !important;
    border-color: rgba(201,168,76,0.55) !important;
    color: #C9A84C !important;
}
/* Kill the blue anchor link styling */
.booking-slots-time li a,
.booking-slots-time li a:visited,
.booking-slots-time li a:hover {
    color: inherit !important;
    text-decoration: none !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
}
/* Hide duplicate list if WPBookit renders two */
.wpb-available-time .booking-slots-time:nth-child(2) { display: none !important; }

/* ══════════════════════════════════════════════
   STEP 6: CONFIRM BOOKING MODAL
   ══════════════════════════════════════════════ */
.confirm-booking .modal-content {
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;
    border: 1px solid rgba(201,168,76,0.22) !important;
    color: rgba(255,255,255,0.85) !important;
    border-radius: 12px !important;
}
.confirm-booking .modal-header { background: transparent !important; border-bottom: 1px solid rgba(201,168,76,0.12) !important; }
.confirm-booking .modal-body { background: transparent !important; }
.confirm-booking .modal-footer { background: transparent !important; border-top: 1px solid rgba(201,168,76,0.12) !important; }
.confirm-booking .modal-title { color: #C9A84C !important; font-family: "Tenor Sans", serif !important; }
.confirm-booking .modal-content p,
.confirm-booking .modal-content h5,
.confirm-booking .modal-content span,
.confirm-booking .modal-content label { color: rgba(255,255,255,0.65) !important; }
.confirm-booking .modal-content input,
.confirm-booking .modal-content textarea,
.confirm-booking .modal-content .form-control {
    background: rgba(255,255,255,0.05) !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-color: rgba(201,168,76,0.2) !important;
    color: rgba(255,255,255,0.88) !important;
}
.confirm-booking .wpb-submit-model-btn,
.confirm-booking button[type="submit"] {
    background: rgba(201,168,76,0.12) !important;
    border: 1px solid rgba(201,168,76,0.5) !important;
    color: #C9A84C !important;
    font-family: "Tenor Sans", serif !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    border-radius: 4px !important;
}
.confirm-booking .wpb-close-model-btn {
    background: transparent !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.38) !important;
}

/* ══════════════════════════════════════════════
   STEP 7: HIDE JET AI ON BOOKING PAGE
   ══════════════════════════════════════════════ */
.page-id-42770 #jvc,
.post-42770 #jvc { display: none !important; }
html.tsi-embed-mode #jvc,
html.tsi-embed-mode .jv,
html.tsi-embed-mode .jpf { display: none !important; }
.jpf { display: none !important; }

/* ═══════════════════════════════════════════════════════
   PATCH v20260527-4 — UX fixes
   ═══════════════════════════════════════════════════════ */

/* FIX 1: Date 27 "today" circle — when NOT selected,
   should look exactly like other available dates (subtle ring).
   Current issue: .today has a prominent 2px border that stays
   even after user selects a different date. */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today::after {
    border: 1px solid rgba(201,168,76,0.35) !important;
    background-color: rgba(201,168,76,0.06) !important;
    border-radius: 50% !important;
}
/* Today's text: slightly warmer than regular dates but not dominant */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today {
    color: rgba(201,168,76,0.9) !important;
    font-weight: 400 !important;
}
/* Today AND selected: solid gold circle (same as any selected date) */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today.selected::after {
    background-color: #C9A84C !important;
    border: none !important;
    border-radius: 50% !important;
}
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today.selected {
    color: #0d0d0d !important;
    font-weight: 700 !important;
}

/* FIX 2: Time slot cards fill full column width.
   Empty space on right = slots not 100% width of container. */
.wpb-booking-shortcode .booking-slots-time,
.wpb-booking-shortcode .wpb-available-time .booking-slots-time {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wpb-booking-shortcode .booking-slots-time li,
.booking-slots-time li {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}
/* The right column containing time slots — make it fill properly */
.wpb-booking-shortcode .wpb-available-time {
    width: 100% !important;
    display: block !important;
}

/* FIX 3: Scrollbar — dark theme */
.wpb-booking-shortcode *::-webkit-scrollbar {
    width: 4px !important;
    background: transparent !important;
}
.wpb-booking-shortcode *::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04) !important;
    border-radius: 4px !important;
}
.wpb-booking-shortcode *::-webkit-scrollbar-thumb {
    background: rgba(201,168,76,0.35) !important;
    border-radius: 4px !important;
}
.wpb-booking-shortcode *::-webkit-scrollbar-thumb:hover {
    background: rgba(201,168,76,0.6) !important;
}
/* Also style the main scrollbar on the booking page */
.booking-slots-time::-webkit-scrollbar { width: 3px !important; }
.booking-slots-time::-webkit-scrollbar-thumb {
    background: rgba(201,168,76,0.3) !important;
    border-radius: 3px !important;
}

/* FIX 4: Vue.js mount flash fix.
   Before Vue.js mounts (2-3 seconds), WPBookit shows raw HTML.
   v-cloak hides elements until Vue finishes mounting. */
[v-cloak] {
    visibility: hidden !important;
    opacity: 0 !important;
}
/* Smooth reveal once mounted */
.wpb-booking-shortcode {
    transition: opacity 0.25s ease !important;
}

/* FIX 5: Ensure the time slot container column doesn't leave
   empty horizontal space — override WPBookit column flex */
.wpb-booking-shortcode .col-lg-3 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
}
/* But keep the 3-column layout on desktop (left panel, calendar, times) */
@media (min-width: 992px) {
    .wpb-booking-shortcode .col-lg-3 {
        max-width: 25% !important;
        flex: 0 0 25% !important;
        width: 25% !important;
    }
    /* Time slots column - right side */
    .wpb-booking-shortcode .col-lg-3:last-child {
        max-width: 100% !important;
        flex: 1 1 auto !important;
        width: auto !important;
    }
}

/* FIX 6: Remove the white right border/bar from the time slots container */
.wpb-booking-shortcode .col-lg-3:last-child,
.wpb-booking-shortcode .wpb-available-time {
    border-right: none !important;
    overflow: hidden !important;
}
/* Kill any white border on the booking content panels */
.wpb-booking-shortcode .ranges,
.wpb-booking-shortcode .ranges .calender-list-box {
    border: none !important;
    border-right: none !important;
}

/* ═══════════════════════════════════════════════════════
   PATCH v20260527-5 — Correct selectors from DOM inspection
   ═══════════════════════════════════════════════════════ */

/* FIX 1: Today color = same as available dates (not gold-tinted)
   Computed: today rgba(201,168,76,0.9) vs available rgba(255,255,255,0.88)
   Make them identical when today is NOT selected. */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today:not(.selected) {
    color: rgba(255,255,255,0.75) !important;
}
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today:not(.selected)::after {
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 50% !important;
}

/* FIX 2: TIME SLOT BUTTONS — correct selector: .avaliable-slot-btn
   WPBookit uses .btn-primary-subtle.btn.rounded.avaliable-slot-btn
   This is what actually renders as the visible slot button. */
.wpb-booking-shortcode .avaliable-slot-btn,
.wpb-booking-shortcode .btn.avaliable-slot-btn,
.wpb-booking-shortcode .btn-primary-subtle.avaliable-slot-btn {
    background: rgba(255,255,255,0.04) !important;
    background-color: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(201,168,76,0.22) !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.78) !important;
    padding: 14px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-family: "Tenor Sans", serif !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
}
.wpb-booking-shortcode .avaliable-slot-btn:hover,
.wpb-booking-shortcode .btn.avaliable-slot-btn:hover {
    background: rgba(201,168,76,0.12) !important;
    background-color: rgba(201,168,76,0.12) !important;
    border-color: rgba(201,168,76,0.55) !important;
    color: #C9A84C !important;
    transform: none !important;
    box-shadow: none !important;
}
/* Selected time slot */
.wpb-booking-shortcode .avaliable-slot-btn.active,
.wpb-booking-shortcode .avaliable-slot-btn.selected,
.wpb-booking-shortcode .avaliable-slot-btn.wpb-selected-timestap {
    background: rgba(201,168,76,0.18) !important;
    border-color: #C9A84C !important;
    color: #C9A84C !important;
}
/* The text inside the button */
.wpb-booking-shortcode .avaliable-slot-btn .date-time-slot {
    color: inherit !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
    font-family: "Tenor Sans", serif !important;
    font-size: 13px !important;
}
/* The .item wrapper — make it full width */
.wpb-booking-shortcode .booking-slots-time .item {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
/* The wrapper and list — remove horizontal gap */
.wpb-booking-shortcode .booking-slots-time-wrapper {
    width: 100% !important;
    padding: 0 8px 0 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 500px !important;
}
.wpb-booking-shortcode .booking-slots-time {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* FIX 3: The col-lg-3 containing times — fill its space, no gap */
.wpb-booking-shortcode .col-lg-3:has(.booking-slots-time-wrapper),
.wpb-booking-shortcode .col-lg-3:last-child {
    padding-left: 8px !important;
    padding-right: 0 !important;
}

/* FIX 4: JET AI — use display:none instead of opacity:0 */
#jvc {
    display: none !important;
}
/* But only hide it on booking-related pages, keep on main site */
.page-id-42770 #jvc,
.post-42770 #jvc,
html.tsi-embed-mode #jvc { display: none !important; }

/* ═══════════════════════════════════════════════════════
   PATCH v20260527-6 — Correct JET AI element IDs
   Actual elements: #jet-trigger, #jet-lbl, .jvct, .jca
   (NOT #jvc which was my wrong assumption)
   ═══════════════════════════════════════════════════════ */

/* Hide JET AI on BOOKING PAGE — all its actual elements */
.page-id-42770 #jet-trigger,
.page-id-42770 #jet-lbl,
.page-id-42770 .jvct,
.page-id-42770 .jca,
.page-id-42770 #jec,
.post-42770 #jet-trigger,
.post-42770 #jet-lbl,
.post-42770 .jvct,
.post-42770 .jca {
    display: none !important;
}

/* Also hide via tsi-embed-mode (when in iframe context) */
html.tsi-embed-mode #jet-trigger,
html.tsi-embed-mode #jet-lbl,
html.tsi-embed-mode .jvct,
html.tsi-embed-mode .jca,
html.tsi-embed-mode #jec { display: none !important; }

/* Hide on ALL pages when WPBookit popup is open
   (the popup overlays the homepage, but the trigger button
   is still rendered underneath the overlay z-index) */
body:has(.wpb-shortcode-wrapper) #jet-trigger,
body:has(.wpb-shortcode-wrapper) #jet-lbl,
body:has(.wpb-shortcode-wrapper) .jca { display: none !important; }

/* ═══════════════════════════════════════════════════════
   PATCH v20260527-7 — Scrollbar and gap fix
   Gap root cause: .booking-slots-time-wrapper has
   padding-right: 8px and scrollbarWidth: auto (native OS
   scrollbar ~15px) = visible gap + grey scrollbar.
   ═══════════════════════════════════════════════════════ */

/* 1. Override the wrapper padding that was causing the gap */
.wpb-booking-shortcode .booking-slots-time-wrapper {
    padding: 0 !important;
    padding-right: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(201,168,76,0.4) transparent !important;
}

/* 2. WebKit (Chrome/Safari) scrollbar — gold thin bar */
.wpb-booking-shortcode .booking-slots-time-wrapper::-webkit-scrollbar {
    width: 3px !important;
    background: transparent !important;
}
.wpb-booking-shortcode .booking-slots-time-wrapper::-webkit-scrollbar-track {
    background: transparent !important;
    border-radius: 3px !important;
}
.wpb-booking-shortcode .booking-slots-time-wrapper::-webkit-scrollbar-thumb {
    background: rgba(201,168,76,0.35) !important;
    border-radius: 3px !important;
}
.wpb-booking-shortcode .booking-slots-time-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(201,168,76,0.65) !important;
}

/* 3. Make buttons fill full width with no gap */
.wpb-booking-shortcode .booking-slots-time {
    padding: 0 !important;
    padding-right: 0 !important;
    gap: 6px !important;
    width: 100% !important;
}
.wpb-booking-shortcode .booking-slots-time .item {
    padding: 0 !important;
    width: 100% !important;
}
.wpb-booking-shortcode .avaliable-slot-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 4. Also style scrollbar on the homepage popup version
   (when rendered inside the modal/iframe overlay) */
.wpb-shortcode-wrapper .booking-slots-time-wrapper::-webkit-scrollbar { width: 3px !important; }
.wpb-shortcode-wrapper .booking-slots-time-wrapper::-webkit-scrollbar-track { background: transparent !important; }
.wpb-shortcode-wrapper .booking-slots-time-wrapper::-webkit-scrollbar-thumb {
    background: rgba(201,168,76,0.35) !important;
    border-radius: 3px !important;
}
.wpb-shortcode-wrapper .booking-slots-time-wrapper {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(201,168,76,0.4) transparent !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   PATCH v20260527-8 — Flash fix + modal scrollbar
   ═══════════════════════════════════════════════════════ */

/* 1. FLASH FIX: hide Bootstrap placeholder skeletons.
   Before Vue mounts, WPBookit shows .placeholder animated
   grey/white blocks. Kill them with dark background. */
.wpb-shortcode-wrapper .placeholder,
.wpb-shortcode-wrapper .placeholder-glow .placeholder,
.wpb-shortcode-wrapper [class*="placeholder"],
.wpb-booking-shortcode .placeholder,
.wpb-booking-shortcode [class*="placeholder"] {
    background-color: #1a1a1a !important;
    background-image: none !important;
    animation: none !important;
    opacity: 0.15 !important;
}

/* 2. The entire popup container — force dark from frame 1.
   WPBookit opens a div with inline or Bootstrap white bg.
   Target every possible container. */
.wpb-shortcode-wrapper > div,
.wpb-shortcode-wrapper > div > div,
#wpbookit-booking,
#wpbookit-booking > div,
[id^="wpbookit"] {
    background: #0c0c0c !important;
    background-color: #0c0c0c !important;
}

/* 3. Bootstrap card, card-body used by WPBookit skeleton */
.wpb-shortcode-wrapper .card,
.wpb-shortcode-wrapper .card-body,
.wpb-booking-shortcode .card,
.wpb-booking-shortcode .card-body {
    background: #111 !important;
    background-color: #111 !important;
    border-color: rgba(201,168,76,0.12) !important;
}

/* 4. The modal/popup scroll container — white scrollbar fix.
   The popup in Image 2 shows a white scrollbar on the right.
   This is the iframe or the wpb-shortcode-wrapper scroll container. */
.wpb-shortcode-wrapper,
#wpbookit-booking,
[id^="wpbookit"],
.wpb-booking-shortcode {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(201,168,76,0.3) transparent !important;
    overflow-y: auto !important;
}
.wpb-shortcode-wrapper::-webkit-scrollbar,
#wpbookit-booking::-webkit-scrollbar,
.wpb-booking-shortcode::-webkit-scrollbar { width: 3px !important; }
.wpb-shortcode-wrapper::-webkit-scrollbar-track,
#wpbookit-booking::-webkit-scrollbar-track { background: transparent !important; }
.wpb-shortcode-wrapper::-webkit-scrollbar-thumb,
#wpbookit-booking::-webkit-scrollbar-thumb {
    background: rgba(201,168,76,0.3) !important;
    border-radius: 3px !important;
}

/* 5. The iframe that WPBookit opens from the homepage.
   It has a white background by default. */
#tsi-booking-iframe,
iframe[src*="booking"] {
    background: #0c0c0c !important;
    border: none !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(201,168,76,0.3) transparent !important;
}

/* 6. Also make the modal overlay background dark immediately */
.wpb-booking-shortcode-modal,
.wpb-modal-overlay,
[class*="wpb-modal"],
[class*="wpbookit-modal"] {
    background: rgba(0,0,0,0.85) !important;
}


/* ══════════════════════════════════════════════════
   EMBED MODE v20260530-2 — Match mockup exactly
   html.tsi-embed-mode added by JS in wp_head when page
   loads inside an iframe (window.self !== window.top).
   ══════════════════════════════════════════════════ */

/* 1. Body: no scroll, no scrollbar — columns scroll individually */
html.tsi-embed-mode body,
html.tsi-embed-mode html {
    overflow: hidden !important;
    scrollbar-width: none !important;
    background: #080808 !important;
}
html.tsi-embed-mode body::-webkit-scrollbar,
html.tsi-embed-mode html::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* 2. Hide WPBookit service-info left column */
html.tsi-embed-mode .wpb-booking-shortcode .row > .col-lg-3:first-child {
    display: none !important;
}

/* 3. Remove Bootstrap mt-5 margin, zero container padding */
html.tsi-embed-mode .wpb-booking-shortcode .row,
html.tsi-embed-mode .wpb-booking-shortcode .row.mt-5 {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
html.tsi-embed-mode .wpb-booking-shortcode .container,
html.tsi-embed-mode .wpb-booking-shortcode .container-fluid {
    max-width: 100% !important;
    padding: 0 !important;
}

/* 4. Calendar column — 65%, dark bg, right divider, proper padding */
html.tsi-embed-mode .wpb-booking-shortcode .row > .col-lg-6 {
    flex: 0 0 65% !important;
    max-width: 65% !important;
    width: 65% !important;
    background: #080808 !important;
    border-right: 1px solid rgba(201,168,76,0.12) !important;
    padding: 28px 24px 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(201,168,76,0.3) transparent !important;
}
html.tsi-embed-mode .wpb-booking-shortcode .row > .col-lg-6::-webkit-scrollbar { width: 3px !important; }
html.tsi-embed-mode .wpb-booking-shortcode .row > .col-lg-6::-webkit-scrollbar-thumb {
    background: rgba(201,168,76,0.3) !important;
    border-radius: 3px !important;
}

/* 5. Time slots column — 35%, slightly lighter, padding, branded scroll */
html.tsi-embed-mode .wpb-booking-shortcode .row > .col-lg-3:last-child {
    flex: 0 0 35% !important;
    max-width: 35% !important;
    width: 35% !important;
    background: #0d0d0d !important;
    padding: 28px 20px 20px !important;
    box-sizing: border-box !important;
    border-left: none !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(201,168,76,0.3) transparent !important;
}
html.tsi-embed-mode .wpb-booking-shortcode .row > .col-lg-3:last-child::-webkit-scrollbar { width: 3px !important; }
html.tsi-embed-mode .wpb-booking-shortcode .row > .col-lg-3:last-child::-webkit-scrollbar-thumb {
    background: rgba(201,168,76,0.3) !important;
    border-radius: 3px !important;
}
html.tsi-embed-mode .wpb-booking-shortcode .row > .col-lg-3:last-child::-webkit-scrollbar-track {
    background: transparent !important;
}

/* 6. Calendar section headings — small gold label style */
html.tsi-embed-mode .wpb-booking-shortcode .col-lg-6 > h5 {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #C9A84C !important;
    opacity: 0.65 !important;
    font-family: 'Tenor Sans', serif !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
}
html.tsi-embed-mode .wpb-booking-shortcode .col-lg-6 > p.mb-0 {
    font-size: 11px !important;
    color: rgba(255,255,255,0.35) !important;
    margin-bottom: 20px !important;
    letter-spacing: 0.04em !important;
}

/* 7. Timezone row — subtle styling */
html.tsi-embed-mode .wpb-booking-shortcode .col-lg-3:last-child .d-flex.pb-4 {
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.4) !important;
    border-bottom-color: rgba(201,168,76,0.1) !important;
}
html.tsi-embed-mode #wpb-booking-timezone {
    color: rgba(255,255,255,0.4) !important;
    font-size: 11px !important;
    font-family: 'Tenor Sans', serif !important;
}
html.tsi-embed-mode .wpb-booking-shortcode .col-lg-3:last-child .d-flex svg path {
    fill: rgba(255,255,255,0.35) !important;
}

/* 8. "AVAILABLE TIMES" label above the time list */
html.tsi-embed-mode .booking-slots-time-wrapper::before {
    content: 'AVAILABLE TIMES';
    display: block;
    color: #C9A84C;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-family: 'Tenor Sans', serif;
    opacity: 0.65;
    font-weight: 600;
    margin-bottom: 10px;
}

/* 9. WPBookit's "Select a program & date first" message — styled */
html.tsi-embed-mode .booking-slots-time:empty::after {
    content: 'Select a date\A to see times';
    white-space: pre;
    display: block;
    color: rgba(255,255,255,0.35);
    font-size: 12px;
    text-align: center;
    font-family: 'Tenor Sans', serif;
    line-height: 1.6;
    padding: 28px 12px;
    margin-top: 8px;
}

/* 10. WPBookit "locked" overlay text in calendar — match mockup */
html.tsi-embed-mode .wpb-booking-shortcode h3,
html.tsi-embed-mode .wpb-booking-shortcode h5 {
    color: #C9A84C !important;
    font-family: 'Tenor Sans', serif !important;
    letter-spacing: 0.06em !important;
}


/* ═══════════════════════════════════════════════════════════
   v20260530-4 BOOKING FORM FIXES
   ═══════════════════════════════════════════════════════════ */

/* 1. Hide the two WPBookit step-indicator dots */
.confirm-booking .wpb-pagination,
.confirm-booking ul.wpb-pagination {
    display: none !important;
}

/* 2. Bootstrap close button (btn-close) — render as proper circle X */
.confirm-booking .btn-close,
.confirm-booking .add-btn-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(201,168,76,0.4) !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    padding: 0 !important;
    cursor: pointer !important;
}
.confirm-booking .btn-close::before {
    content: "\00D7" !important;
    color: #C9A84C !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-family: sans-serif !important;
}

/* 3. Input stays dark on focus — no white flash */
.confirm-booking input,
.confirm-booking input[type="text"],
.confirm-booking input[type="email"],
.confirm-booking input[type="tel"],
.confirm-booking .form-control {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: rgba(255,255,255,0.85) !important;
    border-color: rgba(201,168,76,0.2) !important;
    border-radius: 6px !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
}
.confirm-booking input:focus,
.confirm-booking input:active,
.confirm-booking .form-control:focus {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: rgba(255,255,255,0.85) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
    border-color: rgba(201,168,76,0.5) !important;
    box-shadow: 0 0 0 2px rgba(201,168,76,0.1) !important;
    outline: none !important;
}
/* Kill Bootstrap's white autofill */
.confirm-booking input:-webkit-autofill,
.confirm-booking input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
    background-color: #1a1a1a !important;
}

/* 4. Form fills the full right panel (position fixed within iframe) */
.confirm-booking.show {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    background: rgba(8,8,8,0.92) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
.confirm-booking .modal-dialog {
    width: 92% !important;
    max-width: 640px !important;
    margin: 0 auto !important;
}
.confirm-booking .modal-content {
    background: #0c0c0c !important;
    border: 1px solid rgba(201,168,76,0.3) !important;
    border-radius: 10px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(201,168,76,0.3) transparent !important;
}
.confirm-booking .modal-content::-webkit-scrollbar { width: 3px !important; }
.confirm-booking .modal-content::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3) !important; border-radius: 3px !important; }

/* 5. Cancel button: text-only style, not a Bootstrap pill */
.confirm-booking .wpb-close-model-btn {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.4) !important;
    font-family: 'Tenor Sans', serif !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    padding: 9px 24px !important;
}
.confirm-booking .wpb-close-model-btn:hover {
    border-color: rgba(255,255,255,0.3) !important;
    color: rgba(255,255,255,0.65) !important;
    background: transparent !important;
}

/* 6. Next Step / Book Now button: gold border style */
.confirm-booking .wpb-next-btn,
.confirm-booking .wpb-submit-model-btn {
    background: rgba(201,168,76,0.1) !important;
    border: 1px solid rgba(201,168,76,0.5) !important;
    color: #C9A84C !important;
    font-family: 'Tenor Sans', serif !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    padding: 9px 28px !important;
}
.confirm-booking .wpb-next-btn:hover,
.confirm-booking .wpb-submit-model-btn:hover {
    background: rgba(201,168,76,0.2) !important;
}

/* 7. Booking detail info text (date, duration, price) */
.confirm-booking .summary-booking-list .title-text,
.confirm-booking .booking-modal-description,
.confirm-booking .modal-body p {
    color: rgba(255,255,255,0.6) !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}

/* 8. Times column full height in embed mode */
html.tsi-embed-mode .booking-slots-time-wrapper {
    height: auto !important;
    max-height: none !important;
    flex: 1 !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(201,168,76,0.3) transparent !important;
}
html.tsi-embed-mode .booking-slots-time-wrapper::-webkit-scrollbar { width: 3px !important; }
html.tsi-embed-mode .booking-slots-time-wrapper::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3) !important; border-radius: 3px !important; }
html.tsi-embed-mode .wpb-booking-shortcode .row > .col-lg-3:last-child {
    display: flex !important;
    flex-direction: column !important;
}


/* ═══════════════════════════════════════════════════════════
   v20260530-4 CIRCLE FIX — beats inline permStyle script
   permStyle uses: body .flatpickr-day { background:#161616; border-radius:6px }
   Our tsi-booking.css loads AFTER permStyle (injected dynamically),
   so equal-specificity !important rules here win.
   ═══════════════════════════════════════════════════════════ */

/* ALL cells: consistent dark circle — same look for past, future, disabled */
html body .flatpickr-day,
body .flatpickr-calendar .dayContainer .flatpickr-day,
body .flatpickr-calendar .flatpickr-days .flatpickr-day {
    background: rgba(25,20,8,0.4) !important;
    border: 1px solid rgba(201,168,76,0.14) !important;
    border-radius: 50% !important;
    color: rgba(255,255,255,0.72) !important;
    box-shadow: none !important;
}

/* Hover: gold tint */
html body .flatpickr-day:hover,
body .flatpickr-calendar .dayContainer .flatpickr-day:hover {
    background: rgba(201,168,76,0.18) !important;
    border-color: rgba(201,168,76,0.4) !important;
    color: rgba(255,255,255,0.9) !important;
    border-radius: 50% !important;
}

/* Selected: solid gold */
html body .flatpickr-day.selected,
html body .flatpickr-day.selected:hover,
body .flatpickr-calendar .dayContainer .flatpickr-day.selected {
    background: #C9A84C !important;
    border-color: #C9A84C !important;
    border-radius: 50% !important;
    color: #000 !important;
    font-weight: 700 !important;
}

/* Today (not selected): gold outline only */
html body .flatpickr-day.today:not(.selected) {
    background: rgba(25,20,8,0.4) !important;
    border: 1px solid rgba(201,168,76,0.55) !important;
    color: #C9A84C !important;
    border-radius: 50% !important;
}

/* Disabled / past: very dim */
html body .flatpickr-day.flatpickr-disabled,
html body .flatpickr-day.flatpickr-disabled:hover {
    background: rgba(15,12,4,0.3) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.2) !important;
    border-radius: 50% !important;
    cursor: default !important;
}

/* Available WPBookit date: gold ring */
html body .flatpickr-day.wpb-available {
    background: rgba(201,168,76,0.09) !important;
    border: 1px solid rgba(201,168,76,0.35) !important;
    border-radius: 50% !important;
    color: rgba(255,255,255,0.85) !important;
}

/* Other-month days: very dim */
html body .flatpickr-day.prevMonthDay,
html body .flatpickr-day.nextMonthDay {
    background: rgba(15,12,4,0.2) !important;
    border-color: rgba(255,255,255,0.05) !important;
    color: rgba(255,255,255,0.15) !important;
    border-radius: 50% !important;
}


/* ═══════════════════════════════════════════════════════════
   v20260530-5 BUTTON + INPUT FIXES
   ═══════════════════════════════════════════════════════════ */

/* Buttons — same height, same gold style for BOTH Cancel and Next Step */
.confirm-booking .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 16px 24px !important;
}
.confirm-booking .wpb-close-model-btn,
.confirm-booking .wpb-next-btn,
.confirm-booking .wpb-submit-model-btn {
    background: rgba(201,168,76,0.1) !important;
    border: 1px solid rgba(201,168,76,0.5) !important;
    color: #C9A84C !important;
    font-family: 'Tenor Sans', serif !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    padding: 10px 28px !important;
    height: auto !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
}
.confirm-booking .wpb-close-model-btn:hover,
.confirm-booking .wpb-next-btn:hover,
.confirm-booking .wpb-submit-model-btn:hover {
    background: rgba(201,168,76,0.22) !important;
    border-color: #C9A84C !important;
    color: #C9A84C !important;
}
/* Keep prev button hidden (WPBookit uses d-none) */
.confirm-booking .wpb-prev-btn {
    display: none !important;
}

/* Phone input + input-group — stay dark, always */
.confirm-booking .input-group {
    background: #1a1a1a !important;
    border: 1px solid rgba(201,168,76,0.2) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.confirm-booking .input-group:focus-within {
    border-color: rgba(201,168,76,0.55) !important;
    box-shadow: 0 0 0 2px rgba(201,168,76,0.1) !important;
    background: #1a1a1a !important;
}
.confirm-booking .input-group .form-control,
.confirm-booking .input-group input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
    color: rgba(255,255,255,0.85) !important;
}
.confirm-booking .input-group .form-control:focus,
.confirm-booking .input-group input:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
}
/* Input group addon (phone icon) — dark background */
.confirm-booking .input-group .input-group-text,
.confirm-booking .input-group-text {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border: none !important;
    color: rgba(201,168,76,0.6) !important;
}
/* Kill Bootstrap white autofill */
.confirm-booking input:-webkit-autofill,
.confirm-booking input:-webkit-autofill:hover,
.confirm-booking input:-webkit-autofill:focus,
.confirm-booking input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
    caret-color: rgba(255,255,255,0.85) !important;
}
/* Standalone inputs (not in input-group) */
.confirm-booking input:not(.form-check-input),
.confirm-booking .form-control:not([type="radio"]) {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: rgba(255,255,255,0.85) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
    border-color: rgba(201,168,76,0.2) !important;
    border-radius: 6px !important;
}
.confirm-booking input:not(.form-check-input):focus,
.confirm-booking .form-control:not([type="radio"]):focus {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: rgba(255,255,255,0.85) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
    border-color: rgba(201,168,76,0.55) !important;
    box-shadow: 0 0 0 2px rgba(201,168,76,0.1) !important;
    outline: none !important;
}


/* ═══════════════════════════════════════════════════════════
   v20260530-6 BUTTON VERTICAL ALIGNMENT
   Both buttons must share the same flex baseline in the footer
   ═══════════════════════════════════════════════════════════ */
.confirm-booking .modal-footer .d-flex,
.confirm-booking .modal-footer .col-lg-12 .d-flex {
    align-items: center !important;
}
.confirm-booking .wpb-close-model-btn,
.confirm-booking .wpb-next-btn,
.confirm-booking .wpb-submit-model-btn {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    transform: none !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}


/* ═══════════════════════════════════════════════════════════
   v20260530-7 BUTTON FINAL FIX
   1. Hide Cancel — X button on modal header does the same job
   2. Let WPBookit's d-none class control visibility — no override
   3. Same gold style for all booking buttons (Next Step / Book Now)
   4. Book Now relabeled via JS (see tsi-scripts.js)
   ═══════════════════════════════════════════════════════════ */

/* HIDE Cancel — user has the X close button already */
.confirm-booking .wpb-close-model-btn {
    display: none !important;
}

/* CRITICAL: let Bootstrap's .d-none work — only style the non-hidden button */
/* Remove the old inline-flex override that was making d-none buttons visible */
.confirm-booking .wpb-next-btn,
.confirm-booking .wpb-submit-model-btn {
    background: rgba(201,168,76,0.1) !important;
    border: 1px solid rgba(201,168,76,0.5) !important;
    color: #C9A84C !important;
    font-family: 'Tenor Sans', serif !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    padding: 10px 28px !important;
    position: static !important;
    margin: 0 !important;
    /* No display: property — let d-none control visibility */
}
.confirm-booking .wpb-next-btn:not(.d-none),
.confirm-booking .wpb-submit-model-btn:not(.d-none) {
    display: inline-flex !important;
    align-items: center !important;
}
.confirm-booking .wpb-next-btn:hover,
.confirm-booking .wpb-submit-model-btn:hover {
    background: rgba(201,168,76,0.22) !important;
    border-color: #C9A84C !important;
}
.confirm-booking .wpb-prev-btn {
    display: none !important;
}

/* Footer: right-aligned since Cancel is gone */
.confirm-booking .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 16px 24px !important;
}
.confirm-booking .modal-footer .d-flex {
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
}


/* ═══════════════════════════════════════════════════════════
   v20260530-8 d-none HIGH SPECIFICITY FIX
   Our earlier rules used display:inline-flex with specificity (0,2,0)
   which beats Bootstrap's .d-none (0,1,0). This rule has (0,3,0) 
   and hides them again when d-none is present.
   ═══════════════════════════════════════════════════════════ */
.confirm-booking .wpb-submit-model-btn.d-none,
.confirm-booking .wpb-next-btn.d-none,
.confirm-booking .wpb-prev-btn.d-none {
    display: none !important;
    visibility: hidden !important;
}


/* ═══════════════════════════════════════════════════════════
   v20260530-9 AUTOFILL DARK OVERRIDE
   The browser overrides input background on autofill with its
   own colour (white / light blue). The box-shadow inset trick
   paints over it. The 5000s transition locks background-color
   so the browser animation never completes.
   Covers: standalone inputs, inputs inside .input-group,
   all autofill pseudo-states.
   ═══════════════════════════════════════════════════════════ */

/* All inputs — autofill lock */
.confirm-booking input:-webkit-autofill,
.confirm-booking input:-webkit-autofill:hover,
.confirm-booking input:-webkit-autofill:focus,
.confirm-booking input:-webkit-autofill:active,
.confirm-booking .input-group input:-webkit-autofill,
.confirm-booking .input-group input:-webkit-autofill:hover,
.confirm-booking .input-group input:-webkit-autofill:focus,
.confirm-booking .input-group input:-webkit-autofill:active,
.confirm-booking .form-control:-webkit-autofill,
.confirm-booking .form-control:-webkit-autofill:hover,
.confirm-booking .form-control:-webkit-autofill:focus,
.confirm-booking .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
    color: rgba(255,255,255,0.85) !important;
    caret-color: rgba(255,255,255,0.85) !important;
    background-color: #1a1a1a !important;
    /* Lock the background-color transition for 5000s so browser animation never shows */
    transition: background-color 5000s ease-in-out 0s,
                border-color 0.15s ease-in-out,
                box-shadow 0.15s ease-in-out !important;
}

/* Placeholder text — proper tone, not WPBookit demo names */
.confirm-booking input[name="wpb_user_name"]::placeholder        { color: rgba(255,255,255,0.3) !important; }
.confirm-booking input[name="wpb_user_email"]::placeholder       { color: rgba(255,255,255,0.3) !important; }
.confirm-booking input[name="wpb_user_phone_number"]::placeholder { color: rgba(255,255,255,0.3) !important; }

/* Input-group wrapper — also lock against autofill bleed-through */
.confirm-booking .input-group:has(input:-webkit-autofill) {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
}