/* ============================================================
   NXL BOOKING FORM ENHANCEMENTS — CLEAN FINAL
   ============================================================ */

/* MOBILE ONLY: prevent horizontal scroll */
@media (max-width: 900px) {
    html, body { overflow-x: hidden !important; max-width: 100%; }
}

/* DESKTOP: override style.css body overflow-x:hidden so sticky works */
@media (min-width: 901px) {
    html { overflow-x: visible !important; overflow-y: visible !important; }
    body { overflow-x: visible !important; overflow-y: visible !important; }
}

/* DESKTOP: sticky sidebar */
@media (min-width: 901px) {
    .booking-form-grid { align-items: start !important; }
    .booking-form-sidebar {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 100px !important;
        align-self: start !important;
    }
}

/* Mobile: single column stack */
@media (max-width: 900px) {
    .booking-form-grid {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
    }
    .booking-form-main, .booking-form-sidebar { width: 100% !important; max-width: 100% !important; }
    .booking-type-toggle {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important; width: 100% !important;
    }
    .booking-type-toggle .type-btn { min-width: 0 !important; width: 100% !important; }
    .form-row { display: block !important; }
    .form-row > .form-group { width: 100% !important; margin-bottom: 12px; }
}

.nxl-time-range { touch-action: none !important; }
.nxl-time-slider-wrap { touch-action: pan-y; box-sizing: border-box; }

/* Progress tracker */
.booking-progress {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 100%; margin: 0 auto 32px; padding: 0 10px; position: relative;
}
.booking-progress::before {
    content: ''; position: absolute; top: 18px;
    left: calc((100% / 4) / 2); right: calc((100% / 4) / 2);
    height: 2px; background: var(--gray-border); z-index: 0;
}
.booking-progress-fill {
    position: absolute; top: 18px; left: calc((100% / 4) / 2);
    height: 2px; background: var(--gold); z-index: 1;
    transition: width 0.4s ease; width: 0%;
    max-width: 75%;
}
.booking-progress-step {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1;
}
.booking-progress-circle {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--black-card); border: 2px solid var(--gray-border); color: var(--gray);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem; transition: all 0.3s ease;
}
.booking-progress-step.active .booking-progress-circle {
    background: var(--gold); border-color: var(--gold); color: var(--black);
    box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.2);
}
.booking-progress-step.completed .booking-progress-circle {
    background: var(--gold); border-color: var(--gold); color: var(--black);
}
.booking-progress-step.completed .booking-progress-circle::after { content: '✓'; font-size: 1rem; }
.booking-progress-step.completed .booking-progress-circle span { display: none; }
.booking-progress-label {
    font-size: 0.75rem; color: var(--gray);
    text-transform: uppercase; letter-spacing: 0.5px; text-align: center; font-weight: 500;
}
.booking-progress-step.active .booking-progress-label,
.booking-progress-step.completed .booking-progress-label { color: #fff; }

@media (max-width: 640px) {
    .booking-progress-label { font-size: 0.65rem; }
    .booking-progress-circle { width: 32px; height: 32px; font-size: 0.85rem; }
    .booking-progress::before, .booking-progress-fill { top: 15px; }
}

/* Mobile sticky price bar */
.booking-mobile-bar { display: none; }
@media (max-width: 900px) {
    .booking-mobile-bar {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0;
        background: rgba(10,10,10,0.95);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--gold);
        padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 9999; align-items: center; justify-content: space-between;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    }
    .booking-mobile-bar-price { display: flex; flex-direction: column; }
    .booking-mobile-bar-label { font-size: 0.7rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; }
    .booking-mobile-bar-total { color: var(--gold); font-size: 1.3rem; font-weight: 700; }
    .booking-mobile-bar .btn { padding: 10px 20px; font-size: 0.85rem; }
    .booking-form { padding-bottom: 80px; }
}

/* Date picker */
.nxl-date-picker {
    width: 100%; background: var(--black-card);
    border: 1px solid var(--gray-border); color: #fff;
    padding: 12px 14px; border-radius: var(--radius-md);
    font-size: 0.95rem; cursor: pointer; transition: border-color 0.2s ease;
}
.nxl-date-picker:hover, .nxl-date-picker:focus { border-color: var(--gold); outline: none; }

/* Flatpickr desktop theme */
.flatpickr-calendar {
    background: var(--black-card) !important;
    border: 1px solid var(--gold) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
    z-index: 100000 !important;
}
.flatpickr-months, .flatpickr-month { background: var(--black-card) !important; color: #fff !important; fill: #fff !important; }
.flatpickr-current-month, .flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-monthDropdown-month {
    color: #fff !important; background: var(--black-card) !important; font-weight: 600 !important;
}
.flatpickr-monthDropdown-months option { background: var(--black-card) !important; color: #fff !important; }
.flatpickr-weekdays, .flatpickr-weekdaycontainer { background: var(--black-card) !important; }
.flatpickr-weekday { color: #fff !important; background: var(--black-card) !important; font-weight: 600 !important; }
.flatpickr-prev-month, .flatpickr-next-month { color: var(--gold) !important; fill: var(--gold) !important; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--gold) !important; }
.flatpickr-day { color: #fff !important; }
.flatpickr-day:hover { background: rgba(201,168,76,0.25) !important; border-color: var(--gold) !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
    background: var(--gold) !important; border-color: var(--gold) !important; color: var(--black) !important;
}
.flatpickr-day.today { border-color: var(--gold) !important; }
.flatpickr-day.disabled, .flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #666 !important; }

/* Time slider */
.nxl-time-slider-wrap {
    background: var(--black-card); border: 1px solid var(--gray-border);
    border-radius: var(--radius-md); padding: 16px 18px;
}
.nxl-time-display { color: var(--gold); font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 14px; letter-spacing: 1px; }
.nxl-time-range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 3px;
    background: var(--gray-border); outline: none; cursor: pointer; margin: 0 0 8px;
}
.nxl-time-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--gold); cursor: grab;
    border: 3px solid var(--black);
    box-shadow: 0 2px 8px rgba(201,168,76,0.5);
    transition: transform 0.15s ease;
}
.nxl-time-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.nxl-time-range::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--gold); cursor: grab; border: 3px solid var(--black);
    box-shadow: 0 2px 8px rgba(201,168,76,0.5);
}
.nxl-time-bounds { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--gray); margin-top: 4px; }

/* Fix: remove browser focus outline on range input (was showing as a clipping golden box) */
.nxl-time-range,
.nxl-time-range:focus,
.nxl-time-range:focus-visible,
.nxl-time-range:active { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; }
.nxl-time-range::-moz-focus-outer { border: 0; }
/* Give the wrapper a gentle focus ring instead so the thumb never looks clipped */
.nxl-time-slider-wrap:focus-within { border-color: var(--gold); }