/**
 * Global CSS Variables & Base Styles
 *
 * Defines project-wide CSS custom properties (design tokens) and
 * base styles shared across all components of the rental booking system.
 *
 * WordPress enqueue path: get_stylesheet_directory_uri() . '/assets/css/global.css'
 *
 * IMPORTANT: Enqueue this file BEFORE any component-specific stylesheets
 * so that all variables are defined before they are referenced.
 */

/* ==========================================
   CSS CUSTOM PROPERTIES (Design Tokens)

   All project colours and design values live
   here. Change a value once — it updates
   everywhere across the project automatically.
   ========================================== */

:root {

    /* --- Brand / Primary Colour ---
       References the Hello Elementor global colour palette so a single
       change in Elementor → Global Colors propagates everywhere.
       Used for: active inputs, calendar header gradient,
       selected dates, focus rings, interactive highlights */
    --color-primary: var(--e-global-color-secondary);
    /* #007CBA — main brand blue */
    --color-primary-dark: #005f91;
    /* manually darkened variant of #007CBA */
    --color-primary-light: var(--e-global-color-f7a48f9);
    /* #07A9E3 — lighter brand blue */

    /* --- Status: Success ---
       Used for: available date cells, confirm/select buttons */
    --color-success: #27ae60;
    --color-success-light: #e8f8e8;
    --color-success-text: #1e7e34;

    /* --- Status: Danger ---
       Used for: booked/blocked date cells, error states */
    --color-danger: #e74c3c;
    --color-danger-light: #ffeaea;
    --color-danger-text: #c0392b;

    /* --- Neutral / Text --- */
    --color-white: #ffffff;
    --color-text: #2A2828;
    /* dark body text */
    --color-text-on-dark: var(--e-global-color-primary);
    /* #FBFBFB — headings/text on dark/primary bg */
    --color-text-muted: #666666;
    --color-placeholder: #999999;
    --color-disabled: #bbbbbb;

    /* --- Backgrounds --- */
    --color-bg-subtle: #f8f9fa;
    /* weekday row, button bar, section wrappers */
    --color-gray-light: #f5f5f5;
    /* unavailable date cells */
    --color-gray: #666666;
    /* alias for --color-text-muted */

    /* --- Borders --- */
    --color-border: #e0e0e0;
    --color-border-light: #eeeeee;

    /* --- Calendar: In-Range Highlight ---
       Light tint of the brand's lighter blue (#07A9E3) */
    --color-range: rgba(7, 169, 227, 0.18);

    /* --- Info Panel (selected dates summary box) ---
       Tinted backgrounds derived from the brand blues so the panel
       feels on-brand without being as saturated as the calendar header. */
    --color-info-bg: rgba(0, 124, 186, 0.06);
    /* very light tint of #007CBA */
    --color-info-bg-end: rgba(7, 169, 227, 0.08);
    /* very light tint of #07A9E3 */
    --color-info-border: rgba(0, 124, 186, 0.25);
    /* semi-transparent #007CBA border */
    --color-info-text: var(--e-global-color-secondary);
    /* #007CBA — panel labels */
    --color-info-price: var(--e-global-color-secondary);
    /* #007CBA — price emphasis */
    --color-info-meta: #2A2828;
    /* #2A2828 — secondary meta text */

    /* --- Error State --- */
    --color-error: #c53030;
    --color-error-bg: #fff5f5;
    --color-error-border: #fc8181;

    /* --- Typography --- */
    --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-size-base: 18px;
    --font-size-md: 14px;
    --font-size-sm: 12px;
    --font-size-xs: 11px;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* --- Spacing Scale --- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    /* --- Border Radius --- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* --- Shadows --- */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.15);

    /* --- Transitions --- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;

    /* --- Form Element Sizing (touch-friendly minimum targets) --- */
    --input-height: 48px;
    --input-padding-y: 14px;
    --input-padding-x: 16px;
}

/* ==========================================
   UTILITY: VISIBILITY

   .is-hidden sets the initial hidden state
   for elements that JavaScript reveals at
   runtime via element.style.display = '...'.

   Note: deliberately NO !important here.
   JS inline styles must be able to override
   this class at runtime when showing elements.
   ========================================== */

.is-hidden {
    display: none;
}

/* ==========================================
   BASE FORM ELEMENTS

   Shared styles for labels, inputs, and
   select dropdowns used across all booking
   forms throughout the project.
   ========================================== */

/* --- Form Labels --- */
.rental-label {
    display: block;
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

/* --- Text / Date Inputs ---
   Base style; component CSS may add specifics on top */
.rental-text-input {
    width: 100%;
    height: var(--input-height);
    padding: var(--input-padding-y) var(--input-padding-x);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.rental-text-input::placeholder {
    color: var(--color-placeholder);
}

.rental-text-input:hover {
    border-color: var(--color-primary);
}

.rental-text-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.15);
    /* focus ring — matches #007CBA */
}

/* --- Number Input (vehicle quantity selector) --- */
.rental-number-input {
    width: 80px;
    /* narrow — quantity fields do not need full width */
    height: var(--input-height);
    padding: var(--input-padding-y) var(--input-padding-x);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: #2A2828;
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    box-sizing: border-box;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.rental-number-input:hover {
    border-color: var(--color-primary);
}

.rental-number-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.15);
    /* focus ring — matches #007CBA */
}

/* Remove browser default spin buttons — styled number inputs look cleaner without them */
.rental-number-input::-webkit-inner-spin-button,
.rental-number-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rental-number-input[type="number"] {
    -moz-appearance: textfield;
    /* Firefox */
    border-radius: var(--radius-md);
}

/* --- Select Dropdowns --- */
.rental-select {
    width: 100%;
    height: var(--input-height);
    padding: 5px;
    padding-right: 36px;
    /* room for the custom chevron arrow */
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-white);
    /* Custom dropdown chevron via inline SVG — no image file needed */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.rental-select:hover {
    border-color: var(--color-primary);
}

.rental-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.15);
    /* focus ring — matches #007CBA */
}

/* ==========================================
   BOOKING FORM SECTION WRAPPERS

   .common-wrapper holds all shared visual rules (background,
   padding, border-radius, shadow). Each specific wrapper then
   adds only its own layout on top:
     — .common-wrapper    → flex (label beside quantity input)
     — .pickup-wrapper    → grid (location + time columns)
     — .dropoff-wrapper   → grid (location + time columns)
   ========================================== */

/* --- Shared visual rules for all booking sections --- */
.common-wrapper,
.pickup-wrapper,
.dropoff-wrapper,
.rental-insurance-wrapper,
.rental-extras-wrapper {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background-color: var(--e-global-color-secondary);
    /* #007CBA */
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.insurance-option-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    font-weight: 400;
}

.insurance-pricing {
    font-weight: bold !important;
}

/* Quantity row — flex so label sits inline beside the narrow number input */
.common-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Label inside quantity row is inline — remove default bottom margin */
.common-wrapper .rental-label {
    margin-bottom: 0;
    white-space: nowrap;
}

/* Pickup and dropoff sections:
   Two-column grid — location on the left, time on the right.
   Grid areas are placed explicitly because the HTML element order
   is label → select → label → select (not label → label → select → select),
   so the browser's auto-placement would put them in the wrong columns. */
.pickup-wrapper,
.dropoff-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
}

/* Explicit column/row placement for pickup fields */
.pickup-wrapper label[for="pickup-location"] {
    grid-column: 1;
    grid-row: 1;
}

.pickup-wrapper select[id="pickup-location"] {
    grid-column: 1;
    grid-row: 2;
}

.pickup-wrapper label[for="pickup-time"] {
    grid-column: 2;
    grid-row: 1;
}

.pickup-wrapper select[id="pickup-time"] {
    grid-column: 2;
    grid-row: 2;
}

/* Explicit column/row placement for dropoff fields */
.dropoff-wrapper label[for="dropoff-location"] {
    grid-column: 1;
    grid-row: 1;
}

.dropoff-wrapper select[id="dropoff-location"] {
    grid-column: 1;
    grid-row: 2;
}

.dropoff-wrapper label[for="dropoff-time"] {
    grid-column: 2;
    grid-row: 1;
}

.dropoff-wrapper select[id="dropoff-time"] {
    grid-column: 2;
    grid-row: 2;
}

/* ==========================================
   INSURANCE OPTION CARDS

   Stacked column of radio cards. The outer
   wrapper shares the brand-blue background
   via the shared selector above. Each
   .insurance-div is a selectable card that
   highlights when its radio is checked.
   ========================================== */

/* Column stack of option cards with a section title above them */
.rental-insurance-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Section heading label — sits above the cards, same style as other wrapper headings */
.rental-insurance-wrapper>.rental-label {
    color: var(--color-text-on-dark);
    /* #FBFBFB — readable on the #007CBA background */
    margin-bottom: var(--space-xs);
}

/* Individual option card — flex row: custom radio dot + label text */
.insurance-div {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: rgba(255, 255, 255, 0.1);
    /* subtle white tint over the blue */
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

/* Highlight the card whose radio is checked */
.insurance-div:has(input[type="radio"]:checked) {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: var(--color-text-on-dark);
    /* #FBFBFB outline on selected card */
}

/* Hover state for unchosen cards */
.insurance-div:hover {
    background-color: rgba(255, 255, 255, 0.16);
}

/* Span text inside each card — white so it reads on the blue bg.
   Uses <span> instead of <label> because .insurance-div is itself a <label>,
   and nested <label> elements are invalid HTML. */
.insurance-div span {
    /* label fills remaining width */
    color: var(--color-text-on-dark);
    /* #FBFBFB */
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    margin-bottom: 0;
    line-height: 1.5em;
    /* override default label margin */
}

/* Custom radio button — hide browser default, draw a branded circle */
.insurance-div input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-text-on-dark);
    /* #FBFBFB ring */
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    background-color: transparent;
}

/* Fill the circle when checked */
.insurance-div input[type="radio"]:checked {
    background-color: var(--color-text-on-dark);
    /* solid #FBFBFB dot */
    border-color: var(--color-text-on-dark);
    /* Inner dot via box-shadow inset — creates a ring+dot look without extra markup */
    box-shadow: inset 0 0 0 3px var(--e-global-color-secondary);
}

/* ==========================================
   EXTRAS OPTION CARD (child seat, etc.)

   Reuses .insurance-div card styling for
   visual consistency. Only the checkbox
   input style differs from the radio version.
   ========================================== */

/* Same column-stack wrapper as insurance, keeps spacing consistent */
.rental-extras-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Section heading — identical to .rental-insurance-wrapper > .rental-label */
.rental-extras-wrapper > .rental-label {
    color: var(--color-text-on-dark);
    margin-bottom: var(--space-xs);
}

/* Highlight the extras card when its checkbox is checked */
.insurance-div:has(input[type="checkbox"]:checked) {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: var(--color-text-on-dark);
}

/* Custom checkbox — hide browser default, draw a branded square to
   distinguish it visually from the circular radio buttons */
.insurance-div input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-text-on-dark); /* #FBFBFB ring */
    border-radius: var(--radius-sm);             /* square, not circle */
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    background-color: transparent;
}

/* Fill when checked — inset shadow creates the same ring+fill look as the radio */
.insurance-div input[type="checkbox"]:checked {
    background-color: var(--color-text-on-dark);
    border-color: var(--color-text-on-dark);
    box-shadow: inset 0 0 0 3px var(--e-global-color-secondary);
}

/* ==========================================
   RESPONSIVE: SMALL SCREENS
   ========================================== */

@media (max-width: 480px) {

    /* Stack pickup/dropoff to single column on mobile */
    .pickup-wrapper,
    .dropoff-wrapper {
        grid-template-columns: 1fr;
    }

    /* Reset explicit placement to a stacked vertical order */
    .pickup-wrapper label[for="pickup-location"],
    .dropoff-wrapper label[for="dropoff-location"] {
        grid-column: 1;
        grid-row: 1;
    }

    .pickup-wrapper select[id="pickup-location"],
    .dropoff-wrapper select[id="dropoff-location"] {
        grid-column: 1;
        grid-row: 2;
    }

    .pickup-wrapper label[for="pickup-time"],
    .dropoff-wrapper label[for="dropoff-time"] {
        grid-column: 1;
        grid-row: 3;
    }

    .pickup-wrapper select[id="pickup-time"],
    .dropoff-wrapper select[id="dropoff-time"] {
        grid-column: 1;
        grid-row: 4;
    }

    /* Quantity wrapper stacks label above input on mobile */
    .common-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Number input stretches full width when stacked */
    .rental-number-input {
        width: 100%;
        text-align: left;
    }
}

/* ==========================================
   CART SUMMARY DISPLAY

   Styles the rental booking summary panel
   shown in the cart / "Edit Cart" view.
   Mirrors the info-panel aesthetic from the
   datepicker's selected-dates summary box,
   using the same --color-info-* tokens.
   ========================================== */

/* Container card — light tinted background with brand-blue border */
.rental-cart-summary {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--color-info-bg), var(--color-info-bg-end));
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Base typography for all paragraphs in the summary */
.rental-cart-summary p {
    margin: 0 0 var(--space-xs) 0;
    font-family: var(--font-base);
    font-size: var(--font-size-md);
    color: var(--color-white);
    /* #2A2828 dark body text */
    line-height: 1.5;
}

/* Remove bottom margin from the last item to avoid extra padding */
.rental-cart-summary p:last-child {
    margin-bottom: 0;
}

/* Total days — smaller than price */
.rental-cart-summary .total-days-display {
    font-size: var(--font-size-md);
    color: var(--color-white);
    /* #666666 */
}

/* Estimated price — primary emphasis, brand blue, bold */
.rental-cart-summary .estimated-price-display {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-info-price);
    /* #007CBA brand blue */
}

/* Insurance and quantity — grouped below price with a hairline divider */
.rental-cart-summary .rental-insurance,
.rental-cart-summary .quantity-selected {
    font-size: var(--font-size-md);
    color: var(--color-white);
}

.rental-cart-summary .rental-insurance {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-xs);
    margin-top: var(--space-xs);
}

/* Render rental-insurance and child-seat as visual list items using a ::before
   bullet. Applied without a parent scope so the bullet appears on every page
   that uses these classes (cart summary, admin bookings, etc.) without needing
   HTML changes on each page. */
.rental-insurance,
.child-seat {
    padding-left: 1em;  /* push line content right to make room for the bullet */
    text-indent: -1em;  /* pull the first line back so the bullet sits at the left edge */
}

.rental-insurance::before,
.child-seat::before {
    content: "• ";  /* standard bullet character followed by a space */
}

/* Pickup block — start date acts as a mini section heading */
.rental-cart-summary .start-date {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-xs);
    margin-top: var(--space-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-info-text);
    /* #007CBA — heading emphasis */
}

.rental-cart-summary .pickup_location,
.rental-cart-summary .pickup_time {
    font-size: var(--font-size-md);
    color: var(--color-white);
}

/* Dropoff block — visually separated from pickup with a hairline divider */
.rental-cart-summary .end-date {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-xs);
    margin-top: var(--space-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-info-text);
    /* #007CBA — heading emphasis */
}

.rental-cart-summary .dropoff_location,
.rental-cart-summary .dropoff_time {
    font-size: var(--font-size-md);
    color: var(--color-white);
}

/* ==========================================
   Submit button (both Check availability and Finish)
   Styles are inherited from Theme styling for buttons
   ========================================== */

.check-availability-btn {
    width: 100%;
}

/* ==========================================
   CLIENT INFO FORM
   Styles for #client-info-form-wrapper
   (Elementor HTML widget — Booking Final Form)
   ========================================== */

/* Outer wrapper — blue background matching site wrappers */
#client-info-form-wrapper {
    margin: 30px 0;
    padding: var(--space-lg);
    /* 24px */
    background: var(--color-primary);
    /* #007CBA — brand blue */
    /*border: 1px solid var(--color-primary-dark);*/
    /* #005f91 — darker blue border */
    border-radius: var(--radius-sm);
    /* 6px */
}

/* Two-column flex row; stacks on mobile */
#client-info-form .form-row {
    display: flex;
    gap: var(--space-md);
    /* 16px */
    margin-bottom: var(--space-md);
    /* 16px */
}

/* Each field group takes equal width within its row */
#client-info-form .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Full-width row variant (used for message textarea) */
#client-info-form .form-row.full-width .form-group {
    flex: 1 1 100%;
}

/* Labels — white and larger than input text */
#client-info-form label {
    font-size: var(--font-size-base);
    /* 18px — larger than input text */
    font-weight: var(--font-weight-semibold);
    /* 600 */
    color: var(--color-text-on-dark);
    /* #FBFBFB — white on blue */
    margin-bottom: var(--space-xs);
    /* 4px */
}

/* All text-like inputs + select + textarea */
#client-info-form input[type="text"],
#client-info-form input[type="email"],
#client-info-form input[type="tel"],
#client-info-form input[type="date"],
#client-info-form select,
#client-info-form textarea {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    /* 14px 16px */
    border: 1px solid var(--color-border);
    /* #e0e0e0 */
    border-radius: var(--radius-sm);
    /* 6px */
    font-size: var(--font-size-md);
    /* 14px — smaller than labels */
    color: var(--color-text);
    /* #2A2828 — dark text */
    background: var(--color-bg-subtle);
    /* #f8f9fa — light bg for readability */
    box-sizing: border-box;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* Focus state — darker primary ring */
#client-info-form input:focus,
#client-info-form select:focus,
#client-info-form textarea:focus {
    outline: none;
    border-color: var(--color-primary-dark);
    /* #005f91 */
    box-shadow: 0 0 0 2px rgba(0, 95, 145, 0.25);
    /* soft glow based on primary-dark */
    background: var(--color-white);
    /* #ffffff */
}

/* Invalid state — red border when .is-invalid is added by JS */
#client-info-form input.is-invalid,
#client-info-form select.is-invalid,
#client-info-form textarea.is-invalid {
    border-color: var(--color-danger);
    /* #e74c3c */
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15);
}

/* Inline error message spans — hidden by default, shown with .visible */
#client-info-form .field-error {
    display: none;
    color: var(--color-danger-light);
    /* #e74c3c */
    font-size: var(--font-size-sm);
    /* 12px */
    margin-top: var(--space-xs);
    /* 4px */
}

#client-info-form .field-error.visible {
    display: block;
}

/* Textarea specific */
#client-info-form textarea {
    resize: vertical;
    min-height: 90px;
}

/* Optional field label suffix */
#client-info-form .optional-label {
    font-weight: var(--font-weight-normal);
    /* 400 */
    color: var(--color-disabled);
    /* #bbbbbb — muted, readable on blue */
    font-size: var(--font-size-sm);
    /* 12px */
    margin-left: var(--space-xs);
    /* 4px */
}

/* Responsive — stack to single column on mobile (≤480px) */
@media (max-width: 480px) {
    #client-info-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    #client-info-form .form-group {
        margin-bottom: var(--space-md);
        /* 16px */
    }
}