/* ==============================================
   TLC Booking System – Booking Widget Styles
   Matches main site theluggagecab.com design
   ============================================== */

:root {
    --tlc-yellow:  #FCB722;
    --tlc-black:   #080A0D;
    --tlc-dark:    #111318;
    --tlc-grey:    #1C1F26;
    --tlc-border:  rgba(255,255,255,0.1);
    --tlc-text:    #fff;
    --tlc-muted:   rgba(255,255,255,0.6);
    --tlc-radius:  12px;
    --tlc-input-bg:rgba(255,255,255,0.05);
}

/* ---- Widget Wrapper ---- */
.tlc-booking-widget {
    width: 100%;
}

.booking-form-card {
    background: rgba(17,19,24,0.95);
    border: 1px solid var(--tlc-border);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(10px);
}

.booking-form-heading {
    color: var(--tlc-text);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
}

/* ---- Form Labels ---- */
.form-label {
    display: block;
    color: var(--tlc-text);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

/* ---- Input Wrappers ---- */
.form-input-wrapper,
.date-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.form-icon {
    position: absolute;
    left: 14px;
    z-index: 2;
    flex-shrink: 0;
}

/* ---- Inputs ---- */
.form-input,
.flatpickr-input,
.datetime-input {
    width: 100%;
    background: var(--tlc-input-bg);
    border: 1.5px solid var(--tlc-border);
    border-radius: var(--tlc-radius);
    color: var(--tlc-text);
    font-size: 14px;
    /* Change #1: !important ensures icon padding is never overridden by Elementor/theme */
    padding: 14px 14px 14px 44px !important;
    outline: none;
    transition: border-color .2s;
    -webkit-appearance: none;
}

.form-input::placeholder { color: var(--tlc-muted); }
.form-input:focus        { border-color: var(--tlc-yellow); }
.form-input.error-input  { border-color: #EF4444 !important; }

/* Flatpickr alt input should also get padding */
.flatpickr-input.form-input { padding-left: 44px !important; }

/* ---- Submit Button ---- */
.booking-submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    padding: 16px 24px;
    background: var(--tlc-yellow);
    color: var(--tlc-black);
    border: none;
    border-radius: var(--tlc-radius);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
}
.booking-submit-button:hover  { opacity: .92; }
.booking-submit-button:active { transform: scale(.98); }

/* ---- Validation Error Box ---- */
.validation-error-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: var(--tlc-radius);
    padding: 14px 16px;
    margin-top: 16px;
}
.validation-error-icon { flex-shrink: 0; margin-top: 2px; }
.validation-error-content { flex: 1; }
.validation-error-title {
    color: #EF4444;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
}
.validation-error-message { color: #FCA5A5; font-size: 13px; margin: 0; }
.validation-error-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

/* ---- Flatpickr Dark Theme Tweaks ---- */
.flatpickr-calendar {
    background: #1C1F26 !important;
    border: 1px solid var(--tlc-border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--tlc-yellow) !important;
    border-color: var(--tlc-yellow) !important;
    color: var(--tlc-black) !important;
}
.flatpickr-continue-btn {
    display: block;
    width: calc(100% - 20px);
    margin: 8px 10px 10px;
    padding: 10px;
    background: var(--tlc-yellow);
    color: var(--tlc-black);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
.flatpickr-day { color: var(--tlc-text) !important; }
.flatpickr-day:hover { background: rgba(252,183,34,.15) !important; }

/* ---- Airport Dropdown ---- */
.pac-container {
    background: #1C1F26 !important;
    border: 1px solid var(--tlc-border) !important;
    border-radius: 0 0 var(--tlc-radius) var(--tlc-radius) !important;
}
.pac-item { color: var(--tlc-text) !important; padding: 10px 14px !important; cursor: pointer; }
.pac-item:hover { background: rgba(252,183,34,.1) !important; }
.pac-item-query, .pac-matched { color: var(--tlc-yellow) !important; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .booking-form-card { padding: 20px 16px; }
    .booking-form-heading { font-size: 18px; }
}

/* ==============================================
   ORDER SUMMARY — New Timeline Layout
   ============================================== */

/* Sticky right column */
.tlc-summary-sticky {
    position: sticky;
    top: 20px;
}

/* Order Summary Card */
.tlc-order-summary-card .order-card-body {
    padding: 24px;
}

.tlc-summary-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    font-family: 'Montserrat', sans-serif;
}

/* ---- Timeline ---- */
.tlc-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 20px;
}

.tlc-timeline-item {
    display: grid;
    grid-template-columns: 24px 1px 1fr;
    gap: 0 12px;
    padding-bottom: 20px;
}

.tlc-timeline-item.tlc-timeline-last {
    padding-bottom: 0;
    grid-template-columns: 24px 1fr;
}

.tlc-timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(252, 183, 34, 0.15);
    border: 2px solid #FCB722;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.tlc-dot-storage {
    background: rgba(252, 183, 34, 0.08);
    border-style: dashed;
}

.tlc-timeline-line {
    width: 1px;
    background: rgba(252, 183, 34, 0.3);
    margin: 4px auto 0;
    grid-row: span 1;
    min-height: 100%;
}

.tlc-timeline-item.tlc-timeline-storage .tlc-timeline-line {
    background: rgba(252, 183, 34, 0.15);
    border-left: 1px dashed rgba(252, 183, 34, 0.3);
    background: transparent;
    width: 0;
}

.tlc-timeline-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.tlc-timeline-item.tlc-timeline-last .tlc-timeline-content {
    grid-column: 2;
}

.tlc-timeline-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}

.tlc-timeline-location {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.3;
    margin-top: 2px;
}

.tlc-timeline-city {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    font-family: 'Montserrat', sans-serif;
}

.tlc-timeline-date {
    font-size: 12px;
    color: #FCB722;
    font-family: 'Montserrat', sans-serif;
    margin-top: 2px;
}

/* ---- Total Bags Row ---- */
.tlc-summary-bags-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.tlc-summary-bags-label {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    font-family: 'Montserrat', sans-serif;
}

.tlc-summary-bags-value {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

/* ---- Divider ---- */
.tlc-summary-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 0 16px;
}

/* ---- Total Price Row ---- */
.tlc-summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.tlc-summary-total-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.tlc-summary-total-note {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    font-family: 'Montserrat', sans-serif;
    margin-top: 2px;
}

.tlc-summary-total-amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.tlc-summary-currency {
    font-size: 14px;
    font-weight: 600;
    color: #FCB722;
    font-family: 'Montserrat', sans-serif;
}

.tlc-summary-price {
    font-size: 28px;
    font-weight: 800;
    color: #FCB722;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
}

/* ---- Trust Card ---- */
.tlc-trust-card {
    margin-top: 16px;
}

.tlc-trust-card .order-card-body {
    padding: 20px 24px;
}

.tlc-trust-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
    font-family: 'Montserrat', sans-serif;
}

.tlc-trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tlc-trust-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    font-family: 'Montserrat', sans-serif;
}

.tlc-trust-list li svg {
    flex-shrink: 0;
}

/* ---- Live total-bags-display sync ---- */
.total-bags-display {
    min-width: 20px;
    text-align: right;
}

/* Mobile: right col (summary) appears first */
@media (max-width: 991px) {
    .order-first { order: -1 !important; }
    .order-last  { order: 1  !important; }
    .tlc-summary-sticky { position: static; }
}

/* ── Payment Buttons (Point 3) ─────────────────────────────────────── */
.tlc-pay-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}
.tlc-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.tlc-pay-btn:hover { border-color: #FCB722; }
.tlc-applepay { background: #000; border-color: #000; }
.tlc-applepay:hover { background: #111; border-color: #FCB722; }
.tlc-googlepay { background: #fff; border-color: #fff; }
.tlc-googlepay:hover { background: #f5f5f5; }
@media (max-width: 480px) {
    .tlc-pay-buttons { grid-template-columns: 1fr 1fr; }
    .tlc-cardbtn { grid-column: span 2; }
}

/* ── Change #3 — Order Summary Hero Banner ─────────────────── */
.tlc-order-hero-banner {
    width: 100%;
    height: 140px;
    border-radius: 12px 12px 0 0;
    background-color: #1C1F26;
    background-image: linear-gradient(135deg, #1a1d21 0%, #FCB722 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.tlc-order-hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8,10,13,.5) 0%, transparent 60%);
}
/* Seamless join between hero and card body */
.tlc-order-summary-card { overflow: hidden; }


/* ==============================================
   LIGHT THEME OVERRIDES
   Applied globally so shortcode/plugin output stays consistent
   ============================================== */
:root {
    --tlc-black:   #080A0D;
    --tlc-dark:    #FFFFFF;
    --tlc-grey:    #F8FAFC;
    --tlc-border:  #E5E7EB;
    --tlc-text:    #080A0D;
    --tlc-muted:   #6B7280;
    --tlc-input-bg:#FFFFFF;
}

.booking-form-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 12px 32px rgba(8,10,13,.08);
    backdrop-filter: none;
}

.form-label,
.booking-form-heading {
    color: #080A0D;
}

.form-input,
.flatpickr-input,
.datetime-input {
    background: #FFFFFF;
    border-color: #D1D5DB;
    color: #080A0D;
}

.form-input::placeholder,
.datetime-input::placeholder {
    color: #9CA3AF;
}

.form-input:hover,
.flatpickr-input:hover,
.datetime-input:hover,
.form-input:focus,
.flatpickr-input:focus,
.datetime-input:focus {
    border-color: #FCB722;
    box-shadow: 0 0 0 3px rgba(252,183,34,.16);
}

.booking-submit-button {
    background: #FCB722;
    color: #080A0D;
    box-shadow: 0 8px 20px rgba(252,183,34,.24);
}
.booking-submit-button:hover {
    opacity: 1;
    background: #E8A71F;
}

.validation-error-box {
    background: #FEF2F2;
    border-color: #FECACA;
}
.validation-error-message {
    color: #B91C1C;
}

.flatpickr-calendar {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 12px 32px rgba(8,10,13,.12) !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-weekday,
.flatpickr-day,
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: #111827 !important;
    fill: #111827 !important;
}
.flatpickr-day.today {
    border-color: #FCB722 !important;
}
.flatpickr-day:hover {
    background: rgba(252,183,34,.12) !important;
}
.flatpickr-time,
span.flatpickr-weekday,
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    color: #111827 !important;
    fill: #111827 !important;
}

.pac-container {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 12px 32px rgba(8,10,13,.12) !important;
}
.pac-item,
.pac-item-query,
.pac-matched {
    color: #111827 !important;
}
.pac-item:hover {
    background: rgba(252,183,34,.12) !important;
}

/* ================================================================
   BOOKING FORM — Mobile fixes (v2.2.0)
   Fixes date picker overlay, input padding, autocomplete dropdown
================================================================ */

/* Ensure wrapper is positioned for the overlay trick */
.date-picker-wrapper {
    position: relative !important;
}

/* Native datetime-local sits behind the display input on mobile */
@media (max-width: 767px) {
    input[type="datetime-local"].datetime-input {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        z-index: 2 !important;
        opacity: 0 !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
    }

    .datetime-display {
        position: relative !important;
        z-index: 1 !important;
        cursor: pointer !important;
        /* padding already set by .form-input rule */
    }

    /* iOS: let native input receive taps */
    @supports (-webkit-touch-callout: none) {
        .datetime-display         { pointer-events: none !important; }
        input[type="datetime-local"].datetime-input {
            opacity: 0.01 !important;
            pointer-events: auto !important;
        }
    }

    /* Booking form card full-width on mobile */
    .booking-form-card {
        padding: 20px 14px !important;
        border-radius: 14px !important;
    }

    /* Google Places autocomplete dropdown — keep on top */
    .pac-container {
        z-index: 99999 !important;
        max-width: calc(100vw - 32px) !important;
    }

    /* Ensure icon-padded inputs work on mobile */
    .form-input-wrapper .form-input,
    .date-picker-wrapper .form-input {
        padding-left: 44px !important;
    }

    /* Submit button full width, good tap target */
    .booking-submit-button {
        padding: 16px 20px !important;
        font-size: 15px !important;
        min-height: 52px !important;
    }
}

@media (max-width: 400px) {
    .booking-form-card {
        padding: 16px 12px !important;
    }
    .booking-form-heading {
        font-size: 17px !important;
    }
}

/* ================================================================
   SHORTCODE COMPATIBILITY + AUTOCOMPLETE + MOBILE FIXES (v2.2.0)
   Works when shortcodes are placed on ANY page/template
================================================================ */

/* Google Places pac-container: must escape Elementor overflow:hidden */
.pac-container {
    z-index: 999999 !important;
    max-width: calc(100vw - 32px) !important;
    font-family: 'Montserrat', sans-serif !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
}
/* Dark theme pac items */
.pac-item        { cursor: pointer !important; padding: 10px 14px !important; }
.pac-item:hover  { background: rgba(252,183,34,.12) !important; }
.pac-item-query  { color: #FCB722 !important; }
.pac-matched     { color: #FCB722 !important; }

/* Flatpickr calendar: must stay on top everywhere */
.flatpickr-calendar {
    z-index: 999998 !important;
}

/* Ensure date-picker-wrapper is always positioned for overlay */
.date-picker-wrapper {
    position: relative !important;
    overflow: visible !important;
}

/* Mobile: native datetime-local overlays the display field */
@media (max-width: 767px) {
    .date-picker-wrapper {
        position: relative !important;
        min-height: 52px !important;
    }
    /* Display field: visible, behind native input */
    input.datetime-display {
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
        cursor: pointer !important;
        padding-left: 44px !important;
    }
    /* Native input: transparent, covers full wrapper, receives taps */
    input[type="datetime-local"].datetime-input:not(.datetime-display) {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important;
        z-index: 2 !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
    }
}

/* Booking form card: works in any Elementor column width */
.tlc-booking-widget {
    width: 100% !important;
    box-sizing: border-box !important;
}
.booking-form-card {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Shortcode on light pages (non-dark backgrounds) */
.elementor-widget-shortcode .booking-form-card,
.wp-block-shortcode .booking-form-card,
.entry-content .booking-form-card {
    /* inherits dark theme — no override needed unless placed on white page */
}


.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
    background: #FFFFFF !important;
    color: #111827 !important;
    border: 1px solid #D0D5DD !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #FFFFFF !important;
    color: #111827 !important;
}