/* ========================================
   JavaScript State Management Classes
   ======================================== */

/* Loading States */
.loading {
    opacity: 0.6;
}

/* Step Loading Indicator (inline, not full-screen) */
.fleet-step-loading-indicator {
    position: relative;
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fleet-background-panel);
    border-radius: var(--fleet-input-border-radius);
    padding: 40px;
    margin: 0 auto;
}

.fleet-step-loading-content {
    text-align: center;
}

.fleet-step-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--fleet-background-dark);
    border-top-color: var(--fleet-accent-color);
    border-radius: 50%;
    animation: fleet-spinner-rotate 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes fleet-spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.fleet-step-loading-text {
    color: var(--fleet-accent-color);
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.hidden {
    display: none !important;
}

/* Message States */
.message-calculating {
    display: block;
    background: var(--fleet-background-panel);
    border: 1px solid #666;
    color: var(--fleet-on-panel, var(--fleet-text-white));
}

.message-success {
    display: block;
    background: #1a4d1a;
    border: 2px solid var(--fleet-success-color);
    color: var(--fleet-text-white);
}

.message-error {
    display: block;
    background: #4d1a1a;
    border: 2px solid #f44336;
    color: var(--fleet-text-white);
}

/* Button States */
.button-success {
    background: var(--fleet-success-color) !important;
    color: var(--fleet-text-white) !important;
}

.button-selected {
    background: #666 !important;
    color: var(--fleet-text-white) !important;
}

.button-default {
    background: var(--fleet-accent-color) !important;
    color: var(--fleet-background-dark) !important;
}

/* Badge Classes */
.addon-selected-badge,
.delivery-selected-badge {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.9em;
    margin-left: 8px;
    display: inline-block;
}

.delivery-active-badge {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    margin-left: 8px;
}

/* Custom Delivery Card */
.custom-delivery-card {
    position: relative;
    margin: 8px 0;
    padding: 10px;
    background: var(--fleet-background-dark);
    border: 1px solid #444;
    border-radius: 6px;
}

.custom-delivery-card.selected {
    background: var(--fleet-background-dark);
    border: 2px solid var(--fleet-accent-color);
    box-shadow: 0 0 10px rgba(255, 179, 0, 0.3);
}

.custom-delivery-selected-flex {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.custom-delivery-selected-content {
    flex: 1;
}

.custom-delivery-address {
    color: var(--fleet-accent-color);
    font-size: 1.05em;
}

.custom-delivery-details {
    color: #ccc;
    font-size: 0.9em;
}

.delivery-details {
    color: #ccc;
    font-size: 0.9em;
}

.custom-delivery-remove-btn {
    background: var(--color-delete-hover);
    color: var(--fleet-text-white);
    border: none;
    padding: 6px 12px;
    border-radius: var(--fleet-input-border-radius);
    cursor: pointer;
    font-size: 0.85em;
    margin-left: 10px;
    white-space: nowrap;
}

.custom-delivery-remove-btn:hover {
    background: var(--color-delete);
}

/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║                                                                              ║
   ║                    🎨 BUTTON POPUP SELECTOR SYSTEM 🎨                        ║
   ║                                                                              ║
   ║  A sophisticated hover-activated popup system that displays action buttons  ║
   ║  when hovering over delivery cards and location buttons. Features smooth    ║
   ║  animations, responsive layouts, and three distinct selector variants.      ║
   ║                                                                              ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */

/* ══════════════════════════════════════════════════════════════════════════════
   CENTRALIZED TIMING VARIABLES
   ══════════════════════════════════════════════════════════════════════════════
   
   All animation timings are calculated from these two master variables.
   Adjust these to change the entire selector system's animation speed.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
    --selector-open-duration: 1s;      /* Total duration for opening animations */
    --selector-close-duration: 1s;     /* Total duration for closing animations */
    --selector-content-delay: 0.3s;    /* Delay before content fades in/out - ADJUST THIS to change pause timing */
    
    /* ⚠️ IMPORTANT: When changing --selector-content-delay, update keyframe percentages below:
       - Current: 0.2s delay = 20% pause (keyframes at 20% and 80%)
       - For 0.3s delay = 30% pause (change keyframes to 30% and 70%)
       - For 0.25s delay = 25% pause (change keyframes to 25% and 75%)
       
       Formula: (delay / duration) × 100 = pause percentage
       Example: (0.2s / 1s) × 100 = 20%
       
       Update these keyframe selectors when changing the delay:
       - wrapperExpansion: 20% → your calculated %
       - wrapperCollapse: 80% → (100 - your calculated %)
       - backgroundExpansion: 20% → your calculated %
       - backgroundCollapse: 80% → (100 - your calculated %) */
}

/* ══════════════════════════════════════════════════════════════════════════════
   SHARED SELECTOR FOUNDATION
   ══════════════════════════════════════════════════════════════════════════════
   
   Ensures parent buttons have proper stacking context and overflow visibility
   to accommodate absolutely positioned popup selectors.
   ══════════════════════════════════════════════════════════════════════════════ */

button:has(.delivery-type-selector),
.delivery-location-btn:has(.delivery-type-selector) {
    position: relative !important;     /* Establish positioning context for absolute children */
    overflow: visible !important;       /* Allow popups to escape button bounds */
    /* z-index removed from parent - only popup needs elevated stacking */
}

/* When parent button is hovered, the POPUP gets elevated z-index (not the button itself) */
button:hover .delivery-type-selector,
.delivery-location-btn:hover .delivery-type-selector {
    z-index: 9999 !important;          /* Maximum stacking priority during interaction */
}

/* ══════════════════════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════════
   
   Four distinct animations power the popup system:
   1. backgroundExpansion  - Popup container grows from button size to full size
   2. backgroundCollapse   - Popup container shrinks back to button size
   3. contentFadeIn        - Inner buttons fade in with delay after expansion
   4. contentFadeOut       - Inner buttons fade out before collapse
   5. slideInUp            - Simple vertical slide with fade (legacy support)
   6. enablePointerEvents  - Utility to activate pointer events post-animation
   ══════════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────── */
/* Wrapper Dimension Animations - Resize from button to popup size                */
/* ⚠️ SYNC WITH --selector-content-delay: Current = 0.2s = 20% pause             */
/* When changing delay, update these percentages using formula above              */
/* ────────────────────────────────────────────────────────────────────────────── */
@keyframes wrapperExpansion {
    0% {
        opacity: 0;
        width: var(--button-width);
        height: var(--button-height);
    }
    30% {  /* ⚠️ UPDATE THIS: (--selector-content-delay / --selector-open-duration) × 100 */
        opacity: 1;
        width: var(--button-width);
        height: var(--button-height);
    }
    100% {
        opacity: 1;
        width: var(--popup-width);
        height: var(--popup-height);
    }
}

@keyframes wrapperCollapse {
    0% {
        opacity: 1;
        width: var(--popup-width);
        height: var(--popup-height);
    }
    70% {  /* ⚠️ UPDATE THIS: 100 - expansion pause % (currently 100 - 20 = 80) */
        opacity: 1;
        width: var(--button-width);
        height: var(--button-height);
    }
    100% {
        opacity: 0;
        width: var(--button-width);
        height: var(--button-height);
    }
}

/* ────────────────────────────────────────────────────────────────────────────── */
/* Container Expansion Animation                                                  */
/* ⚠️ SYNC WITH --selector-content-delay: Current = 0.2s = 20% pause             */
/* ────────────────────────────────────────────────────────────────────────────── */
@keyframes backgroundExpansion {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(var(--scale-x-start, 0.8), var(--scale-y-start, 0.3));
    }
    30% {  /* ⚠️ UPDATE THIS: (--selector-content-delay / --selector-open-duration) × 100 */
        opacity: 1;                    /* Quick fade-in to full visibility */
        transform: translate(-50%, -50%) scale(var(--scale-x-start, 0.8), var(--scale-y-start, 0.3));
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1, 1); /* Scale to full size */
    }
}

/* ────────────────────────────────────────────────────────────────────────────── */
/* Container Collapse Animation                                                   */
/* ⚠️ SYNC WITH --selector-content-delay: Inverse timing (100 - 20 = 80%)        */
/* ────────────────────────────────────────────────────────────────────────────── */
@keyframes backgroundCollapse {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1, 1);
    }
    70% {  /* ⚠️ UPDATE THIS: 100 - expansion pause % (currently 100 - 20 = 80) */
        opacity: 1;                    /* Stay visible through most of collapse */
        transform: translate(-50%, -50%) scale(var(--scale-x-start, 0.8), var(--scale-y-start, 0.3));
    }
    100% {
        opacity: 0.1;                  /* Final fade to near-invisible */
        transform: translate(-50%, -50%) scale(var(--scale-x-start, 0.8), var(--scale-y-start, 0.3));
    }
}

/* ────────────────────────────────────────────────────────────────────────────── */
/* Content Fade Animations - Used by JavaScript for button fade                   */
/* ────────────────────────────────────────────────────────────────────────────── */
@keyframes contentFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes contentFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ────────────────────────────────────────────────────────────────────────────── */
/* Pointer Event Enabler - Activates interactions post-animation                  */
/* ────────────────────────────────────────────────────────────────────────────── */
@keyframes enablePointerEvents {
    to {
        pointer-events: auto;
        /* Enable clicking after animation completes */
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Universal DELIVERY TYPE SELECTOR (MORPHING EXPANSION WITH WRAPPER)
   ══════════════════════════════════════════════════════════════════════════════
   
   Used on: Universal delivery location buttons
   Position: Centered on the parent button
   Animation: Complex morphing expansion from button size to full size
   Features: 
   - Scales from button dimensions to selector dimensions
   - Border radius morphs during expansion
   - Content fades in only after container expansion
   - Pointer events delayed until animation completes
   Two-layer approach for perfect 1px border: 
   - Wrapper: Provides non-scaling 1px border, wraps content tightly 
   - Inner: Handles transform scaling and all animations 
   ══════════════════════════════════════════════════════════════════════════════ */

.delivery-type-selector-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(0, 0, 0, 0.95);
    transform: translate(-50%, -50%);
    transform-origin: center center;
    border: 1px solid var(--primary-color);  /* Fixed 1px border - never scales */
    border-radius: var(--input-border-radius);
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    box-shadow: 0 0 8px var(--primary-color);
    /* Explicit dimensions from CSS variables */
    width: var(--button-width);
    height: var(--button-height);
    pointer-events: none;              /* Controlled by JS */
}

.delivery-type-selector {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 100%;                   /* At least as wide as parent button */
    height: auto;
    border: none;                      /* No border - wrapper provides it */
    border-radius: var(--input-border-radius);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    box-sizing: border-box;            /* Include padding in width calculation */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;              /* Controlled by JS */
    transform: translate(-50%, -50%) scale(var(--scale-x-start, 0.8), var(--scale-y-start, 0.3));
    transform-origin: center center;   /* Scale from center point */
    white-space: nowrap;
}

/* ─── Responsive Layout for Button Rows ─── */
.pickup-return-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.delivery-type-selector .half-width {
    flex: 1 1 auto;                    /* Flexible sizing based on content */
    white-space: nowrap;
}

.delivery-type-selector .half-width:only-child {
    max-width: 100%;                   /* Single buttons can expand fully */
}

/* Force vertical stacking on very narrow screens */
@media (max-width: 250px) {
    .delivery-type-selector .pickup-return-row {
        flex-direction: column;
    }
    
    .delivery-type-selector .half-width {
        width: 100%;
        max-width: 100%;
        flex: none;
        /* Armour tokens, same values as above (fleetform-core#200). */
        --ff-btn-width: 100%;
    }
}

/* ─── Inner Button Styling ─── */
.delivery-type-btn {
    pointer-events: none;              /* Disabled until expansion completes */
    transition: none;
    min-width: 0 !important;           /* Remove any minimum width constraints */
}

/* ─── Button Hover Effects (Active after animation) ─── */
.delivery-type-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;         /* Smooth hover transition */
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg-hover: rgba(255, 255, 255, 0.1);
    --ff-btn-bg-image-hover: none;
}

/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║                        END BUTTON POPUP SELECTOR SYSTEM                      ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */

/* File Upload Preview Styles */
.file-preview-container {
    position: relative;
    display: inline-block;
}

.file-preview-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 4px;
}

.file-preview-remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #f44336;
    color: var(--fleet-text-white);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
}

.file-preview-remove-btn:hover {
    background: #d32f2f;
}

.file-preview-success {
    margin-top: 8px;
    color: var(--fleet-success-color);
    font-weight: bold;
}

.file-preview-remove-text-btn {
    background: #f44336;
    color: var(--fleet-text-white);
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
}

.file-preview-remove-text-btn:hover {
    background: #d32f2f;
}

/* Form Validation States
   #803 — a missing field keeps the form's gold border (Ethan 2026-09-26) and
   says so in RED TEXT beneath it; the banner above lists every one. */
.form-input-error {
    border-color: var(--fleet-accent-color, #f0bd5b) !important;
}
.ff-field-error-text {
    color: #ff5a4f;
    font-size: 0.875em;
    font-weight: 600;
    margin-top: 6px;
}

.form-input-valid {
    border-color: #555 !important;
}

/* ========================================
   Responsive Layout
   ======================================== */

/* Responsive layout for multistep form */
.fleet-multistep-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 768px) {
    .fleet-multistep-container {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .fleet-multistep-content {
        flex: 1;
        min-width: 0;
    }
    
    .fleet-multistep-sidebar {
        /* No fixed width - let the content determine the width */
        flex-shrink: 0;
    }
    
    .fleet-multistep-sidebar .reservation-summary-box {
        position: sticky;
        top: 20px;
        min-width: 340px; /* Push sidebar out when summary is visible */
    }
}

/* Mobile: summary appears after content.
   `column`, NOT `column-reverse`: the template already puts the content BEFORE
   the sidebar, so reversing it put the summary on TOP — the opposite of this
   comment, unnoticed since 2025-10-04. It also broke every step transition
   below 768px: the summary above the step grows as the step loads (307px ->
   620px once a vehicle is picked), so scroll anchoring dragged the page DOWN
   while `scrollToTopOf` was scrolling up to the heading (measured on the
   Parlay sandbox at 616px, 2026-09-23: step 3 -> 4 made one scroll call, to
   709, and the page settled at 2169). */
@media (max-width: 767px) {
    .fleet-multistep-container {
        flex-direction: column;
    }
    
    .fleet-multistep-sidebar {
        width: 100%;
    }

    /* Under the step, the card spans the column like the step's own panels,
       rather than stopping at the 340px it needs as a desktop sidebar. */
    .fleet-multistep-sidebar .reservation-summary-box {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}

/* NO header clearance on the form itself (Ethan, 2026-09-23: "Too much space
   between reservations and the start of the steps"). Core's armour already pads
   the whole FleetForm page surface by `--fleetform-header-overlap` + 24px
   (fleet-theme-armor.css, fleetform-core#210), which is what clears Parlay's
   see-through header -- the page title sits below the logo. Padding the form by
   the same variable counted the header twice: 76px of empty space between the
   intro line and the step bar at 375px, 100px at 1280px. Measured live with the
   rule removed: the step bar sits 20px under the intro, the header still clear. */

/* Step indicator styles */
.step-indicator-link {
    text-decoration: none;
    cursor: pointer;
}

.step-indicator-link:hover {
    text-decoration: underline;
}

.step-indicator-disabled {
    cursor: default;
}

/* Flight Information Modal */
.flight-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flight-info-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.flight-info-modal-content {
    position: relative;
    background: var(--fleet-background-dark);
    border: 2px solid var(--fleet-accent-color);
    border-radius: var(--fleet-input-border-radius);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(var(--fleet-accent-color-rgb, 255, 179, 0), 0.3);
    z-index: 10001;
}

.flight-info-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--fleet-accent-color);
}

.flight-info-modal-header h3 {
    margin: 0;
    color: var(--fleet-accent-color);
    font-size: 1.5em;
}

.flight-info-modal-close {
    background: transparent;
    border: none;
    color: var(--fleet-accent-color);
    font-size: 2em;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fleet-input-border-radius);
    transition: background 0.2s;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: transparent;
    --ff-btn-bg-image: none;
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
    --ff-btn-fg: var(--fleet-accent-color);
    --ff-btn-width: 32px;
}

.flight-info-modal-close:hover {
    background: rgba(var(--fleet-accent-color-rgb, 255, 179, 0), 0.1);
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg-hover: rgba(var(--fleet-accent-color-rgb, 255, 179, 0), 0.1);
    --ff-btn-bg-image-hover: none;
}

.flight-info-modal-body {
    padding: 24px;
    color: var(--fleet-on-panel, var(--fleet-text-white));
}

.flight-info-section {
    margin-bottom: 24px;
}

.flight-info-section h4 {
    color: var(--fleet-accent-color);
    margin: 0 0 12px 0;
    font-size: 1.2em;
}

.flight-info-field {
    margin-bottom: 16px;
}

.flight-info-field label {
    display: block;
    color: var(--fleet-accent-color);
    margin-bottom: 6px;
    font-weight: 600;
}

.flight-info-field input,
.flight-info-field select,
#airport-selection-container select {
    width: 100%;
    padding: 10px 12px;
    background: var(--fleet-background-dark);
    border: 1px solid var(--fleet-accent-color);
    border-radius: var(--fleet-input-border-radius);
    color: var(--fleet-on-dark, var(--fleet-text-white));
    font-size: 1em;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-field-width: 100%;
    --ff-field-bg: var(--fleet-background-dark);
    --ff-field-border: var(--fleet-accent-color);
    --ff-field-fg: var(--fleet-on-dark, var(--fleet-text-white));
}

.flight-info-field input:focus,
.flight-info-field select:focus,
#airport-selection-container select:focus {
    outline: none;
    border-color: var(--fleet-accent-color);
    box-shadow: 0 0 8px rgba(var(--fleet-accent-color-rgb, 255, 179, 0), 0.3);
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-field-border-hover: var(--fleet-accent-color);
}

#airport-selection-container {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fleet-text-dark);
}

#airport-selection-container label {
    display: block;
    color: var(--fleet-accent-color);
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1.1em;
}

.flight-info-modal-footer {
    display: flex;
    flex-wrap: wrap; /* #782: never push a button past the modal's edge */
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--fleet-accent-color);
}

/*
 * #782 — on a phone the two buttons need 324px and the footer has 286px, and
 * with flex-end the overflow went off the LEFT edge: Cancel was clipped by the
 * modal. Stack them full width instead, the primary action on top.
 */
@media (max-width: 480px) {
    .flight-info-modal-footer {
        flex-direction: column-reverse;
        padding: 16px;
    }
    .flight-info-modal-footer .button {
        width: 100%;
        --ff-btn-width: 100%;
    }
}

.flight-info-cancel-btn {
    background: var(--fleet-button-secondary-color) !important;
    color: var(--fleet-button-secondary-text-color) !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: var(--fleet-input-border-radius) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-button-secondary-color) !important;
    --ff-btn-bg-image: none !important;
    --ff-btn-fg: var(--fleet-button-secondary-text-color) !important;
    --ff-btn-border-style: none !important;
    --ff-btn-border-width: 0 !important;
}

.flight-info-cancel-btn:hover {
    background: var(--fleet-text-dark) !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg-hover: var(--fleet-text-dark) !important;
    --ff-btn-bg-image-hover: none !important;
}

.flight-info-submit-btn {
    background: var(--fleet-accent-color) !important;
    color: var(--fleet-background-dark) !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: var(--fleet-input-border-radius) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-accent-color) !important;
    --ff-btn-bg-image: none !important;
    --ff-btn-fg: var(--fleet-background-dark) !important;
    --ff-btn-border-style: none !important;
    --ff-btn-border-width: 0 !important;
}

.flight-info-submit-btn:hover {
    background: var(--fleet-button-hover-color) !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg-hover: var(--fleet-button-hover-color) !important;
    --ff-btn-bg-image-hover: none !important;
}

/* Hide flight info sections based on delivery type */
#flight-info-modal[data-active-delivery-type="pickup"] .flight-info-section[data-delivery-type="return"] {
    display: none;
}

#flight-info-modal[data-active-delivery-type="return"] .flight-info-section[data-delivery-type="pickup"] {
    display: none;
}

#flight-info-modal[data-active-delivery-type="both"] .flight-info-section {
    display: block;
}

/* Reservation Summary Box */
.reservation-summary-box {
    min-width: 340px; /* Ensures consistent width when visible */
    max-width: 340px;
    /* The same panel as the step's own boxes (`.customer-section-box`), so the
       summary reads as a card and not as loose text on the page — it had the
       page's own background and no border (Ethan, 2026-09-23). */
    background: var(--fleet-background-panel);
    border: 1px solid var(--fleet-accent-color);
    color: var(--fleet-accent-color);
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

.reservation-summary-box h3 {
    color: var(--fleet-accent-color);
    margin-top: 0;
}

.reservation-summary-box > div {
    margin-bottom: 16px;
}

.reservation-summary-box .location-address {
    font-size: 0.9em;
}

.reservation-summary-box .flight-info-divider {
    font-size: 0.9em;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--fleet-text-dark);
}

/* Icon sizes for vehicle features */
.vehicle-feature-icon {
    font-size: 2em;
}

/* Confirmation Section */
.confirmation-agreement {
    background: var(--fleet-background-panel);
    border: 2px solid var(--fleet-accent-color);
    border-radius: var(--fleet-input-border-radius);
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
}

.confirmation-agreement p {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin-bottom: 20px;
    font-size: 16px;
}

/* Confirm Reservation Button
 *
 * ⚠️ The PRIMARY action of the whole flow, and it rendered as a dark box with
 * white text (Ethan, 2026-09-20: "the confirm and the generate buttons need to
 * be improved, maybe the primary instead"). Measured: the core theme armour
 * paints every bare <button> at 0-3-0 with `background-*: var(--ff-btn-*)`,
 * which outranks this rule's gradient at 0-1-0 — and this rule set no tokens, so
 * the armour's fallbacks won: transparent background, inherited white text.
 *
 * Tokens carry the paint (the armour reads them at its own specificity, so no
 * contest); the plain declarations stay for surfaces the armour does not reach.
 * Same gradient as every other primary in the flow. `-hover` tokens fall back
 * to these, so hover keeps the colour.
 */
.confirm-reservation-btn {
    --ff-btn-bg: var(--fleet-button-gradient-start, #e0a241);
    --ff-btn-bg-image: linear-gradient(to right, var(--fleet-button-gradient-start, #e0a241), var(--fleet-button-gradient-end, #ffcc73));
    --ff-btn-fg: var(--fleet-button-text-color, #121212);
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
    background: linear-gradient(to right, var(--fleet-button-gradient-start, #e0a241), var(--fleet-button-gradient-end, #ffcc73));
    color: var(--fleet-button-text-color, #121212);
    border: none;
    padding: 12px 32px;
    border-radius: var(--fleet-input-border-radius);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(var(--fleet-accent-color-rgb, 255, 179, 0), 0.3);
}

.confirm-reservation-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--fleet-accent-color-rgb, 255, 179, 0), 0.5);
}

/* Confirmation Step Sections */
.confirmation-intro {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    margin-bottom: 24px;
}

.confirmation-section-box {
    background: var(--fleet-background-panel);
    border: 1px solid var(--fleet-accent-color);
    border-radius: var(--fleet-input-border-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.confirmation-section-box h3 {
    color: var(--fleet-accent-color);
    margin-top: 0;
}

/* Selected Vehicle Section */
.vehicle-details-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: start;
}

.vehicle-image-wrapper img {
    width: 100%;
    border-radius: var(--fleet-input-border-radius);
    border: 1px solid var(--fleet-text-dark);
}

.vehicle-info h4 {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin: 0 0 8px 0;
    font-size: 20px;
}

.vehicle-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.vehicle-title-row h4 {
    margin: 0;
}

.vehicle-daily-rate {
    color: var(--fleet-accent-color);
    font-size: 18px;
    font-weight: bold;
}

.vehicle-type {
    color: var(--fleet-accent-color);
    margin: 0 0 12px 0;
    font-size: 14px;
}

.vehicle-specs {
    display: flex;
    gap: 20px;
    color: var(--fleet-text-muted, var(--fleet-text-light));
    font-size: 14px;
    margin-bottom: 16px;
}

.vehicle-features {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fleet-text-dark);
}

.vehicle-features strong {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    display: block;
    margin-bottom: 8px;
}

.vehicle-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
}

.vehicle-features-list li {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    font-size: 14px;
}

/* Trip Details Section */
.trip-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.trip-location-box {
    background: var(--fleet-background-panel);
    padding: 16px;
    border-radius: var(--fleet-input-border-radius);
    margin-bottom: 16px;
}

.trip-label {
    color: var(--fleet-accent-color);
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
}

.trip-date {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin: 4px 0;
    font-weight: bold;
}

.trip-time {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    margin: 0 0 8px 0;
    font-size: 14px;
}

.trip-location-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--fleet-text-dark);
}

.trip-location-name {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin: 0;
    font-size: 14px;
}

.trip-location-address {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    margin: 4px 0 0 0;
    font-size: 13px;
}

.trip-flight-info {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--fleet-text-dark);
}

.trip-flight-info p {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    margin: 2px 0;
    font-size: 12px;
}

.trip-duration-wrapper {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fleet-text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.trip-duration {
    color: var(--fleet-accent-color);
    font-weight: bold;
}

.trip-included-distance {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    font-weight: bold;
}

/* Selected Addons Section */
.selected-addons-box {
    background: var(--fleet-background-panel);
    padding: 16px;
    border-radius: var(--fleet-input-border-radius);
}

.selected-addons-box h4 {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin: 0 0 12px 0;
    font-size: 16px;
}

.selected-addons-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.selected-addons-list li {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    padding: 6px 0;
    border-bottom: 1px solid var(--fleet-text-dark);
}

.selected-addons-list li:last-child {
    border-bottom: none;
}

/* Customer Information Section */
.customer-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.customer-info-field p:first-child {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
}

.customer-info-field p:last-child {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin: 4px 0;
}

/* Account Creation Section */
.account-creation-box {
    background: var(--fleet-background-panel);
    border: 1px solid var(--fleet-success-color);
    border-radius: var(--fleet-input-border-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.account-creation-box h3 {
    color: var(--fleet-success-color);
    margin-top: 0;
}

.account-creation-box p {
    color: var(--fleet-on-panel, var(--fleet-text-white));
}

.account-info-box {
    background: var(--fleet-background-panel);
    border: 1px solid var(--fleet-primary-color);
    border-radius: var(--fleet-input-border-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.account-info-box h3 {
    color: var(--fleet-primary-color);
    margin-top: 0;
}

.account-info-box p {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin: 0;
}

/* Password Field */
.password-field-wrapper {
    max-width: 500px;
}

.password-field-wrapper label {
    display: block;
    margin-bottom: 8px;
    color: var(--fleet-on-panel, var(--fleet-text-white));
    font-weight: bold;
}

.password-field-wrapper .required-marker {
    color: var(--fleet-success-color);
}

.wp-pwd {
    margin-bottom: 12px;
    position: relative;
}

.password-input-wrapper {
    position: relative;
    display: block;
}

/*
 * ⚠️ The width is declared TWICE on purpose (#76). The core theme armour sets
 * `width: var(--ff-field-width, auto)` on inputs at 0-3-0, which outranks this
 * rule's plain `width: 100%` — measured on the sandbox at 1024px: the box came
 * out 243px inside a 500px container, so the show/hide eye (absolutely placed at
 * the container's right edge) sat 209px OUTSIDE the field. The token is what the
 * armour reads; the plain declaration covers surfaces the armour does not reach.
 */
.password-input-wrapper input {
    --ff-field-width: 100%;
    width: 100%;
    padding: 12px;
    padding-right: 50px;
    border: 1px solid var(--fleet-text-dark);
    border-radius: var(--fleet-input-border-radius);
    background: var(--fleet-background-panel);
    color: var(--fleet-on-panel, var(--fleet-text-white));
    font-size: 16px;
}

.wp-hide-pw {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--fleet-accent-color);
    /* fleet-signin-page's password-field.css paints every toggle state from
       this token (#76), so the theme's hover/focus pink cannot reach it. */
    --ff-pw-toggle-fg: var(--fleet-accent-color);
    cursor: pointer;
    padding: 8px 12px;
    font-size: 14px;
}

.wp-hide-pw .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.wp-hide-pw .text {
    display: none;
}

/*
 * The strength meter is styled by fleet-signin-page (#76,
 * assets/css/password-field.css), scoped to #pass-strength-result.
 *
 * ⚠️ Do not add a bare `.strength-result` rule back here. WordPress's
 * user-profile.js copies the meter's class list onto the INPUT, so a bare-class
 * rule styles the password box too — the one that used to sit here would have
 * centred, bolded and padded the field, and #688's `.empty { display:none }`
 * would have hidden it until the renter typed.
 *
 * The hint is rendered by the shared control with WordPress's `.description`
 * class; checkout keeps its own look for it.
 */
.account-creation-box .description {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    font-size: 13px;
    margin-bottom: 16px;
}

.account-creation-box .description code {
    color: var(--fleet-accent-color);
}

/*
 * Generate is a HELPER, so it reads as secondary — the same quiet outline as
 * "Previous Step" — and never competes with Confirm (#76). It used to be a solid
 * gold fill, the loudest thing on the page.
 *
 * ⚠️ Specificity is deliberate. The button carries WP's `.button` class, which
 * the core theme armour deliberately does NOT paint, so the tenant theme's
 * `[type=button]:hover` (0-2-0) reaches it — and every tie goes to the theme,
 * which loads after us. Rest AND hover are declared at 0-3-0/0-4-0 so neither
 * state is a tie.
 */
.account-creation-box .password-field-wrapper .wp-generate-pw,
.account-creation-box .password-field-wrapper .wp-generate-pw:focus {
    background: transparent;
    color: var(--fleet-primary-color, #e0a241);
    border: 1px solid rgba(224, 162, 65, 0.35);
    padding: 10px 20px;
    border-radius: var(--fleet-input-border-radius);
    font-weight: bold;
    cursor: pointer;
    margin: 12px 0;
    box-shadow: none;
}

.account-creation-box .password-field-wrapper .wp-generate-pw:hover {
    background: rgba(224, 162, 65, 0.10);
    color: var(--fleet-primary-color, #e0a241);
    border-color: var(--fleet-primary-color, #e0a241);
}

.password-note {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    font-size: 13px;
    margin: 0;
}

.hidden {
    display: none;
}

/* Summary Box Sections */
.summary-section {
    margin-bottom: 16px;
}

.summary-misc {
    margin-bottom: 16px;
}

.summary-total {
    margin-top: 18px;
    font-size: 1.5em;
    font-weight: bold;
}

.summary-deposit {
    margin-top: 12px;
    color: #ff0000;
    font-weight: bold;
}

/* Vehicle List and Cards */
.vehicle-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.vehicle-card {
    color: var(--fleet-on-dark, var(--fleet-text-white));
    padding: 18px;
    border-radius: 10px;
    /* 3 vehicles per row: calc((100% - (2 * 24px gap)) / 3) */
    flex: 0 1 calc(33.333% - 16px);
    min-width: 200px;
    max-width: 400px;
    background: var(--fleet-background-dark);
}

.vehicle-card.selected {
    box-shadow: 0 0 0 4px var(--fleet-accent-color);
    background: var(--fleet-background-panel);
}

.vehicle-card-content {
    display: flex;
    gap: 18px;
    align-items: center;
}

.vehicle-card-image {
    width: 120px;
    height: auto;
    border-radius: 8px;
}

.vehicle-card-header {
    color: var(--fleet-accent-color);
    margin-bottom: 8px;
}

.vehicle-card-features {
    margin-bottom: 8px;
}

.vehicle-feature-badge {
    display: inline-block;
    background: var(--fleet-background-panel);
    color: var(--fleet-accent-color);
    padding: 2px 8px;
    border-radius: 6px;
    margin-right: 4px;
    margin-bottom: 2px;
    font-size: 0.95em;
}

.addon-card-selected-badge,
.delivery-location-active-badge {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.9em;
}

.addon-card-selected-badge {
    margin-left: 8px;
}

.delivery-location-active-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    margin-left: 8px;
}

.vehicle-price-day {
    font-size: 1.1em;
    margin-bottom: 8px;
}

.vehicle-price-total {
    font-size: 0.95em;
    margin-bottom: 8px;
}

.vehicle-availability-wrapper {
    margin-bottom: 8px;
}

.vehicle-availability-badge {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    padding: 2px 10px;
    border-radius: 6px;
}

.vehicle-select-btn {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-accent-color);
    --ff-btn-bg-image: none;
    --ff-btn-fg: var(--fleet-background-dark);
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
}

.no-vehicles-message {
    color: var(--fleet-on-panel, var(--fleet-text-white));
}

.customer-section-title {
    color: var(--fleet-accent-color);
    margin-top: 0;
    margin-bottom: 20px;
}

.customer-help-text {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin: 0;
    font-size: 14px;
}

.customer-welcome-box {
    background: var(--fleet-background-dark);
    border: 1px solid var(--fleet-success-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.customer-welcome-message {
    color: var(--fleet-success-color);
    margin: 0;
    font-weight: bold;
}

.signout-link {
    color: var(--fleet-accent-color);
    text-decoration: none;
    font-size: 14px;
}

.signin-form {
    margin-bottom: 24px;
}

.signin-form-title {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin-bottom: 12px;
    font-size: 16px;
}

.signin-form-container {
    max-width: 400px;
}

.form-field {
    margin-bottom: 16px;
}

.remember-me-label {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    display: flex;
    align-items: center;
}

.remember-me-checkbox {
    margin-right: 8px;
}

.forgot-password-link {
    margin-top: 12px;
    text-align: center;
}

.link-accent {
    color: var(--fleet-accent-color);
    font-size: 0.9em;
}

/* Sign In and Find my information are the primary actions of the returning-
   customer box, so they carry the brand gradient like every other primary in
   the flow (`.vehicle-select-btn`, Continue) — not the flat pale accent that
   read as a disabled control (Ethan, 2026-09-23). This rule was declared twice,
   byte-identical; one copy is kept. */
.customer-lookup-button {
    background: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    );
    color: var(--fleet-button-text-color, #121212);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: transparent;
    --ff-btn-bg-image: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    );
    --ff-btn-fg: var(--fleet-button-text-color, #121212);
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
}

/* Accordions */
.accordion-wrapper {
    margin-bottom: 24px;
}

.accordion-toggle {
    width: 100%;
    background: var(--fleet-background-panel);
    border: 1px solid #444;
    padding: 16px;
    border-radius: 4px;
    text-align: left;
    color: var(--fleet-accent-color);
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-width: 100%;
    --ff-btn-bg: var(--fleet-background-panel);
    --ff-btn-bg-image: none;
    --ff-btn-border-width: 1px;
    --ff-btn-border-style: solid;
    --ff-btn-border: #444;
    --ff-btn-fg: var(--fleet-accent-color);
}

.accordion-content {
    display: none;
    border: 1px solid #444;
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 20px;
    background: var(--fleet-background-dark);
}

.accordion-content.open {
    display: block;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.new-customer-form {
    max-width: 100%;
}

.form-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field-grid.three-columns {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-label.required {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    color: var(--fleet-accent-color);
}

.form-label.required {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    color: var(--fleet-accent-color);
}

.form-label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    color: var(--fleet-accent-color);
}

.form-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: var(--fleet-background-panel);
    color: var(--fleet-on-panel, var(--fleet-text-white));
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-field-width: 100%;
    --ff-field-border: #555;
    --ff-field-bg: var(--fleet-background-panel);
    --ff-field-fg: var(--fleet-on-panel, var(--fleet-text-white));
}

.form-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: var(--fleet-background-panel);
    color: var(--fleet-on-panel, var(--fleet-text-white));
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-field-width: 100%;
    --ff-field-border: #555;
    --ff-field-bg: var(--fleet-background-panel);
    --ff-field-fg: var(--fleet-on-panel, var(--fleet-text-white));
}

.birthday-input {
    max-width: 200px;
}

.full-width {
    grid-column: 1 / -1;
}

.required-mark {
    color: red;
}

.upload-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.upload-buttons .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* The licence capture's rules are in licence-capture.css (#779) — one sheet
   for every surface that captures a licence. */

/* Section Separator Large Variant */
.section-separator.large {
    margin: 32px 0;
}

.section-separator-text.large {
    background: var(--fleet-background-dark);
    color: var(--fleet-accent-color);
    font-weight: bold;
    font-size: 18px;
}

/* Delivery Options */
.delivery-section-label {
    color: var(--fleet-accent-color);
}

.delivery-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delivery-active-badge {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    margin-left: 8px;
}

.delivery-price {
    color: var(--fleet-accent-color);
    font-weight: bold;
}

.delivery-location-btn {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-accent-color);
    --ff-btn-bg-image: none;
    --ff-btn-fg: var(--fleet-background-dark);
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
}

.delivery-location-btn.selected {
    background: #666;
    color: var(--fleet-text-white);
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: #666;
    --ff-btn-bg-image: none;
    --ff-btn-fg: var(--fleet-text-white);
}

.delivery-address-field {
    margin: 8px 0;
}

.delivery-pricing-info {
    margin: 8px 0;
    font-size: 0.9em;
    color: var(--fleet-text-muted, var(--fleet-text-light));
}

.custom-delivery-display {
    display: block;
}

.custom-delivery-display.hidden,
.custom-delivery-result.hidden {
    display: none;
}

.custom-delivery-form {
    margin: 8px 0 0 0;
}

.custom-delivery-result {
    display: block;
    margin: 8px 0;
    padding: 10px;
    border-radius: 4px;
}

/* `.delivery-calculate-button` was declared twice with conflicting backgrounds
   (here and ~200 lines below), so which fill won depended on source order
   rather than intent. The earlier copy is gone; the surviving block keeps the
   geometry and the STEP 3 section at the end of this file owns the colour. */

.no-delivery-message {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    font-style: italic;
}

/* Addon Cards */
.addon-card {
    border: 1px solid var(--fleet-accent-color);
    background: var(--fleet-background-dark);
    color: var(--fleet-accent-color);
    padding: 24px;
    border-radius: 10px;
    margin-bottom: 18px;
}

.addon-card.selected {
    border: 2px solid var(--fleet-accent-color);
    background: var(--fleet-background-panel);
    box-shadow: 0 0 10px rgba(255, 179, 0, 0.3);
}

.addon-description {
    font-size: 0.95em;
    margin-bottom: 8px;
    min-height: 35px;
}

.addon-price-container {
    font-size: 1.2em;
    margin: 8px 0;
}

.addon-toggle-button {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    width: 100%;
    margin-top: 12px;
    cursor: pointer;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
    --ff-btn-width: 100%;
}

.addon-toggle-button.selected {
    background: var(--fleet-text-dark);
    color: var(--fleet-text-white);
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-text-dark);
    --ff-btn-bg-image: none;
    --ff-btn-fg: var(--fleet-text-white);
}

.addon-toggle-button.unselected {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
}

.addon-options-container {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fleet-accent-color);
}

.addon-options-container.hidden {
    display: none;
}

.addon-remove-button,
.addon-add-button {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    width: 100%;
    margin-top: 12px;
    cursor: pointer;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
    --ff-btn-width: 100%;
}

.addon-remove-button {
    background: var(--fleet-text-dark);
    color: var(--fleet-text-white);
}

/* More specific targeting to override WordPress admin button styles */
.addon-card .addon-selection-container .addon-remove-button:hover,
.addon-options-container .addon-remove-button:hover,
button.addon-remove-button.button:hover {
    background: var(--color-delete-hover);
    color: var(--fleet-primary-color);
}

.addon-add-button {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-accent-color);
    --ff-btn-bg-image: none;
    --ff-btn-fg: var(--fleet-background-dark);
}

/* Delivery Options */
.delivery-options-title {
    margin: 0 0 12px 0;
    color: var(--fleet-accent-color);
}

.delivery-fixed-locations {
    margin-bottom: 16px;
}

.delivery-fixed-title,
.delivery-custom-title {
    color: var(--fleet-accent-color);
}

.delivery-location-card {
    margin: 8px 0;
    padding: 12px;
    background: var(--fleet-background-dark);
    border: 1px solid #444;
    border-radius: 6px;
}

.delivery-location-card.selected {
    background: var(--fleet-background-dark);
    border: 2px solid var(--fleet-accent-color);
    box-shadow: 0 0 10px rgba(255, 179, 0, 0.3);
}

.delivery-location-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delivery-location-price {
    color: var(--fleet-accent-color);
    font-weight: bold;
}

.delivery-location-button {
    cursor: pointer;
}

.delivery-custom-container {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fleet-text-dark);
}

.delivery-custom-display {
    display: none;
}

.delivery-custom-form {
    margin: 8px 0 0 0;
}

.delivery-address-field {
    margin: 8px 0;
}

.delivery-address-label {
    display: block;
    margin-bottom: 4px;
    color: var(--fleet-accent-color);
}

.delivery-address-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--fleet-text-dark);
    border-radius: 4px;
    background: var(--fleet-background-panel);
    color: var(--fleet-on-panel, var(--fleet-text-white));
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-field-width: 100%;
    --ff-field-border: var(--fleet-text-dark);
    --ff-field-bg: var(--fleet-background-panel);
    --ff-field-fg: var(--fleet-on-panel, var(--fleet-text-white));
}

.delivery-pricing-info {
    margin: 8px 0;
    font-size: 0.9em;
    color: var(--fleet-text-muted, var(--fleet-text-light));
}

.delivery-result {
    display: none;
    margin: 8px 0;
    padding: 10px;
    border-radius: 4px;
}

.delivery-calculate-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    width: 100%;
    margin-top: 8px;
    cursor: pointer;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
    --ff-btn-width: 100%;
}

.delivery-calculate-button.selected {
    background: var(--fleet-text-dark);
    color: var(--fleet-text-white);
}

.delivery-calculate-button.unselected {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
}

.delivery-no-options {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    font-style: italic;
}

/* Step Indicator */
.step-indicator {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--fleet-background-panel);
    border-radius: var(--fleet-input-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.step-indicator-link.current,
.step-indicator-disabled.current {
    font-weight: bold;
    color: var(--fleet-accent-color);
    font-size: 1.1em;
    padding: 4px 12px;
    background: rgba(var(--fleet-accent-color-rgb, 255, 179, 0), 0.15);
    border-radius: 4px;
}

.step-indicator-link:not(.current),
.step-indicator-disabled:not(.current) {
    color: var(--fleet-text-muted, var(--fleet-text-light));
    padding: 4px 8px;
    transition: color 0.2s;
}

.step-indicator-link:not(.current):hover {
    color: var(--fleet-accent-color);
}

.step-indicator-separator {
    color: var(--fleet-text-dark);
    margin: 0 4px;
}

/* Section Separators (OR dividers) */
.section-separator {
    text-align: center;
    margin: 24px 0;
    position: relative;
}

.section-separator.large {
    margin: 32px 0;
}

.section-separator-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--fleet-text-dark);
}

.section-separator-text {
    position: relative;
    background: var(--fleet-background-dark);
    padding: 0 16px;
    color: var(--fleet-text-dark);
    font-size: 14px;
}

.section-separator.large .section-separator-text {
    background: var(--fleet-background-panel);
    color: var(--fleet-accent-color);
    font-weight: bold;
    font-size: 18px;
}

/* Customer Section Boxes */
.customer-section-box {
    background: var(--fleet-background-panel);
    border: 1px solid var(--fleet-accent-color);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.customer-section-box.success {
    border-color: var(--fleet-success-color);
}

.customer-section-box.logged-in {
    padding: 16px;
}

.customer-section-title {
    color: var(--fleet-accent-color);
    margin-top: 0;
    margin-bottom: 20px;
}

.customer-section-box.logged-in .customer-section-title {
    margin-bottom: 0;
}

.customer-section-subtitle {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin-bottom: 12px;
    font-size: 16px;
}

.customer-section-text {
    color: var(--fleet-on-panel, var(--fleet-text-white));
    margin: 0;
    font-size: 14px;
}

.customer-section-box.success .customer-section-text {
    color: var(--fleet-success-color);
    font-weight: bold;
}

.customer-section-link {
    color: var(--fleet-accent-color);
    text-decoration: none;
    font-size: 14px;
}

.customer-section-link.small {
    font-size: 0.9em;
}

/* Sign In Form */
.signin-form {
    max-width: 400px;
}

.signin-section {
    margin-bottom: 24px;
}

/* Customer Lookup Form */
.customer-lookup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    max-width: 800px;
}

/* New Customer Form */
.new-customer-form {
    max-width: 100%;
}

/* Accordions */
.customer-accordion {
    margin-bottom: 24px;
}

.accordion-toggle {
    width: 100%;
    background: var(--fleet-background-panel);
    border: 1px solid var(--fleet-text-dark);
    padding: 16px;
    border-radius: 4px;
    text-align: left;
    color: var(--fleet-accent-color);
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-width: 100%;
    --ff-btn-bg: var(--fleet-background-panel);
    --ff-btn-bg-image: none;
    --ff-btn-border-width: 1px;
    --ff-btn-border-style: solid;
    --ff-btn-border: var(--fleet-text-dark);
    --ff-btn-fg: var(--fleet-accent-color);
}

.accordion-content {
    border: 1px solid var(--fleet-text-dark);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 20px;
    background: var(--fleet-background-panel);
}

.accordion-content.hidden {
    display: none;
}

.accordion-content.visible {
    display: block;
}

/* Form Fields */
.form-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.form-field {
    margin-bottom: 16px;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.form-label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    color: var(--fleet-accent-color);
}

.form-label-white {
    color: var(--fleet-on-panel, var(--fleet-text-white));
}

.form-label-grey {
    color: var(--fleet-text-muted, var(--fleet-text-light));
}

.form-label-grey.checkbox {
    display: flex;
    align-items: center;
}

.required-indicator {
    color: #ff0000;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--fleet-text-dark);
    border-radius: 4px;
    background: var(--fleet-background-panel);
    color: var(--fleet-on-panel, var(--fleet-text-white));
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-field-width: 100%;
    --ff-field-border: var(--fleet-text-dark);
    --ff-field-bg: var(--fleet-background-panel);
    --ff-field-fg: var(--fleet-on-panel, var(--fleet-text-white));
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--fleet-accent-color);
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-field-border-hover: var(--fleet-accent-color);
}

.form-input.large-padding {
    padding: 10px;
}

.form-input.max-width-200 {
    max-width: 200px;
}

.form-checkbox {
    margin-right: 8px;
}

/* Buttons */
/* The Sign In button: the brand gradient, see `.customer-lookup-button`. */
.form-submit-button {
    background: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    );
    color: var(--fleet-button-text-color, #121212);
    border: none;
    padding: 10px 24px;
    font-weight: bold;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: transparent;
    --ff-btn-bg-image: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    );
    --ff-btn-fg: var(--fleet-button-text-color, #121212);
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
    --ff-btn-width: 100%;
}

.form-submit-button:hover {
    opacity: 0.9;
}

.form-submit-button.inline {
    width: auto;
    white-space: nowrap;
    padding: 10px 20px;
}

.form-link-center {
    margin-top: 12px;
    text-align: center;
}

/* Delivery Location Button Styles */
.delivery-location-button.selected {
    background: var(--fleet-text-dark);
    color: var(--fleet-text-white);
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
}

.delivery-location-button.unselected {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
}

/* Addon Grid */
.addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    align-items: start; /* Prevent cards from stretching when siblings expand */
    /* #783: when an open add-on spans the row, a later card fills the cell it
       vacated instead of leaving a hole. No effect while every card is 1x1. */
    grid-auto-flow: row dense;
}

/*
 * An OPEN expandable add-on keeps its column width (Ethan, 2026-09-26: "when
 * we click open, it goes full size instead of stay in the same width"). It
 * spanned the whole row (#783) to stop the tall open panel leaving a hole under
 * its neighbour; the hole is now closed the other way — masonry rows.
 * addon-cards.js layoutAddonGrids() adds `.ff-masonry` and sets each card's
 * `--ff-rows` from its measured height, so a card spans exactly the rows its
 * height needs and the dense flow slots the next card beside it. Without JS the
 * grid is the plain one above: every card 1x1, the open one simply tall.
 */
.addon-grid.ff-masonry {
    grid-auto-rows: 4px;
    row-gap: 0;
}

.addon-grid.ff-masonry > .addon-card {
    grid-row-end: span var(--ff-rows, 1);
    align-self: start;
}

.no-addons-message {
    padding: 20px;
    background: var(--fleet-background-panel);
    border-radius: 8px;
}

/* Addon Item Price Displays */
.addon-price-display {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.95em;
}

.addon-price-display.informational-pricing {
    opacity: 0.7;
    font-style: italic;
}

.not-selected-label {
    font-size: 0.85em;
    color: var(--fleet-text-muted, var(--fleet-text-light));
}

.addon-price-divider {
    border-top: 1px solid var(--fleet-text-dark);
    margin-top: 6px;
    padding-top: 6px;
    font-weight: bold;
}

.addon-address-detail {
    margin-left: 20px;
    margin-top: 2px;
    font-size: 0.85em;
    color: var(--fleet-text-muted, var(--fleet-text-light));
    font-style: italic;
}

/* Navigation Buttons */
.fleet-navigation-buttons {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.fleet-nav-link {
    text-decoration: none;
}

/* Customer Form Validation */
/* The refusal notice. Ethan, 2026-09-22: *"the banner looks horrible. It
   shouldn't have a red background. It should have a red outline around it and
   be better styled."* A solid #f44336 fill also fought every tenant palette and
   forced white text onto it; an outline states the same urgency and lets the
   page's own colours through. Margins are ALSO set as --ff-block-* because the
   theme armour floors block margins inside a FleetForm container (core#70). */
.customer-info-error {
    background: color-mix(in srgb, var(--fleet-color-error, #d93025) 8%, transparent);
    color: inherit;
    padding: 14px 16px;
    border: 1px solid var(--fleet-color-error, #d93025);
    border-left: 5px solid var(--fleet-color-error, #d93025);
    border-radius: var(--fleet-input-border-radius, 8px);
    margin: 0 0 18px;
    --ff-block-margin-top: 0;
    --ff-block-margin-bottom: 18px;
}

/* `.customer-info-error` TWICE, deliberately: the tenant theme paints `strong`
   inside the content area at 0-2-0 and won the tie against a single-class
   0-1-1 rule -- measured on Parlay 2026-09-22, the title rendered in the
   theme's amber rgb(224,162,65) instead of the error red, so a refusal did not
   read as a refusal. Repeating the class is 0-3-0 and costs nothing; `!important`
   is not used here (CLAUDE.md, theme armour). */
.customer-info-error.customer-info-error strong {
    display: block;
    margin-bottom: 6px;
    color: var(--fleet-color-error, #d93025);
    font-size: 1.02em;
    font-weight: 600;
    line-height: 1.35;
}

.customer-info-error ul {
    margin: 6px 0 0 20px;
    padding: 0;
    --ff-block-margin-top: 6px;
    --ff-block-margin-bottom: 0;
}

.customer-info-error.customer-info-error li {
    margin: 2px 0;
    color: inherit;
}

/* The message is built as `<strong>...</strong><br><ul>` -- the <br> doubles the
   gap under a title that is already `display: block`. */
.customer-info-error > br {
    display: none;
}

/* ============================================================================
   Step 2 card layout + legibility (#224)

   Everything here is re-selected through a parent. This form renders inside a
   tenant's own page — on parlayrentals.com an Elementor one — and this
   stylesheet is 222 bare single-class rules with nothing scoped, so it loses
   every specificity tie by construction. The same defence already fixed the
   editor tabs and the walkthrough card.
   ========================================================================= */

/* The text column could not shrink, so long titles and the button ran past the
   card edge: "2021 BMW X3 SDrive 30i" clipped mid-word, "Rent this Vehicle"
   cut off. `.vehicle-card-content` is a flex row and its text child is an
   unclassed <div> with the default `min-width: auto`, which refuses to go below
   its content's min-content width. `min-width: 0` is what lets it wrap. */
.vehicle-card .vehicle-card-content {
    min-width: 0;
}

.vehicle-card .vehicle-card-content > * {
    min-width: 0;
}

.vehicle-card .vehicle-card-image {
    flex: 0 0 auto;   /* the image keeps its 120px; the TEXT absorbs the change */
}

.vehicle-card .vehicle-card-header,
.vehicle-card .vehicle-card-header h4 {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

/* The label is black on the gold fill — pinned, because a theme styling bare
   `button` wins against a single class and washes it out. */
.vehicle-card .vehicle-select-btn,
.vehicle-card .vehicle-select-btn:hover,
.vehicle-card .vehicle-select-btn:focus {
    display: inline-block;
    max-width: 100%;
    white-space: normal;          /* wrap rather than overflow the card */
    background: var(--fleet-accent-color, #f2c97d) !important;
    background-image: none !important;
    color: #121212 !important;
    border: 0 !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-accent-color, #f2c97d) !important;
    --ff-btn-bg-image: none !important;
    --ff-btn-fg: #121212 !important;
    --ff-btn-border-style: none !important;
    --ff-btn-border-width: 0 !important;
}

.vehicle-card .vehicle-availability-badge {
    display: inline-block;
    max-width: 100%;
    color: #121212 !important;
    background: var(--fleet-accent-color, #f2c97d) !important;
}

/* Nothing may show through the loading overlay.

   The JS hides `.admin-reservation-step` before inserting the indicator, but
   anything else living in the content area stayed visible — a gold control was
   still poking out at the right edge during "Loading Step…". Hiding every
   sibling of the indicator covers whatever that element happens to be, rather
   than naming the one we noticed. */
.fleet-multistep-content:has(> .fleet-step-loading-indicator) > *:not(.fleet-step-loading-indicator) {
    display: none !important;
}

.fleet-multistep-content .fleet-step-loading-indicator {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* ============================================================================
   Card layout at REAL widths, and more primary in the palette (#224)

   The min-width:0 fix stopped the overflow but not the cramping. Measured on
   production: card ~258px, image fixed at 120px, gap 18px — leaving the text
   column **102px**. "Rent this Vehicle" and "2021 BMW X3 SDrive 30i" had
   nowhere to go, so they wrapped into slivers. Three cards per row inside a
   column that also carries the Reservation Summary means these cards are ALWAYS
   narrow; a side-by-side image+text layout does not fit at that size.

   So the card is a container and the content stacks when it is genuinely
   narrow. Container queries rather than viewport ones on purpose: the card's
   width depends on the sidebar, not the window, so a media query would fix the
   wrong thing.
   ========================================================================= */
.vehicle-card {
    container-type: inline-size;
    container-name: vehiclecard;
}

@container vehiclecard (max-width: 360px) {
    .vehicle-card-content {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .vehicle-card-image {
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
    }

    .vehicle-select-btn {
        display: block;
        width: 100%;
        text-align: center;
        /* Armour tokens, same values as above (fleetform-core#200). */
        --ff-btn-width: 100%;
    }
}

/* Fallback for engines without container queries: never let the image eat more
   than a third of the card, so the text keeps a usable column either way. */
.vehicle-card .vehicle-card-image {
    max-width: 35%;
}

@container vehiclecard (max-width: 360px) {
    .vehicle-card .vehicle-card-image {
        max-width: 220px;   /* stacked — the cap above no longer applies */
    }
}

/* ---------------------------------------------------------------------------
   Primary carries the brand.

   Ethan: "can we use our primary color more as headers and primary buttons and
   the things that are bold. Primary should be used alot more thoughout this to
   match our theme."

   Accent (#f2c97d) is the paler tint; primary (#e0a241) is the brand gold. The
   form leaned on accent for nearly everything, which read washed out against
   the site. Headings, emphasis and the primary action move to primary; accent
   stays for the quieter supporting marks (the availability pill), so the two
   still read as a hierarchy rather than one flat colour.
   --------------------------------------------------------------------------- */
.fleet-multistep-content h2,
.fleet-multistep-content h3,
.fleet-multistep-content h4,
.vehicle-card .vehicle-card-header,
.fleet-multistep-content .customer-section-title,
.fleet-multistep-content .summary-title,
.fleet-multistep-content strong,
.fleet-multistep-content b {
    color: var(--fleet-primary-color, #e0a241);
}

.vehicle-card .vehicle-select-btn,
.vehicle-card .vehicle-select-btn:hover,
.vehicle-card .vehicle-select-btn:focus,
.fleet-multistep-content .btn-primary,
.fleet-multistep-content .fleet-btn-primary {
    background: var(--fleet-primary-color, #e0a241) !important;
    color: var(--fleet-button-text-color, #121212) !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-primary-color, #e0a241) !important;
    --ff-btn-bg-image: none !important;
    --ff-btn-fg: var(--fleet-button-text-color, #121212) !important;
}

/* ============================================================================
   Primary everywhere it should be, and Elementor kept out of the nav (#224)

   Each of these was MEASURED on the live form rather than guessed:

     summary <h3>/<strong>   rgb(242,201,125)  accent, wanted primary
     current step chip       accent on rgba(255,179,0,0.15)
     Previous/Continue links rgb(204,51,102)   <- Elementor's #cc3366 again
     Rent this Vehicle       flat rgb(224,162,65), wanted the gradient
     content panel           1216px wide vs the 1240px step bar
   ========================================================================= */

/* The summary box lives OUTSIDE `.fleet-multistep-content`, which is why the
   earlier primary rule scoped to that container never reached it. */
.reservation-summary-box h1,
.reservation-summary-box h2,
.reservation-summary-box h3,
.reservation-summary-box h4,
.reservation-summary-box strong,
.reservation-summary-box b {
    color: var(--fleet-primary-color, #e0a241);
}

/* The step you are ON should read as the brand, not as a tint of it. */
.step-indicator .current,
.step-indicator .step-indicator-disabled.current,
.step-indicator .step-indicator-active {
    color: var(--fleet-primary-color, #e0a241) !important;
    background: rgba(224, 162, 65, 0.16) !important;
    font-weight: 700;
}

/* Elementor styles bare `a` and `.button`, and these nav links carry BOTH, so a
   single-class rule never had a chance -- they rendered #cc3366 pink. Pinned
   through the form container, same defence as the editor tabs.
   `.fleet-nav-link` is ours; `.button`/`.button-primary` are the classes
   Elementor recognises, which is exactly why they were captured. */
.fleet-multistep-reservation-form .fleet-nav-link,
.fleet-multistep-reservation-form .fleet-nav-link:hover,
.fleet-multistep-reservation-form .fleet-nav-link:focus,
.fleet-multistep-reservation-form .fleet-nav-link:visited {
    color: var(--fleet-primary-color, #e0a241) !important;
    text-decoration: none !important;
    text-shadow: none !important;
    background-image: none !important;
}

.fleet-multistep-reservation-form .fleet-nav-link:hover {
    text-decoration: underline !important;
}

/* Primary actions carry the gradient the rest of the site uses (the same one
   behind "Check Availability"), not a flat fill. */
/* NOT `.button-primary` unqualified: the "Continue to Add-ons" NAV LINK carries
   that class, so the gradient landed on a bare text link and rendered as a flat
   box with no padding or radius — worse than the plain link it replaced. The
   gradient belongs on real buttons; the nav link gets its own treatment below. */
.vehicle-card .vehicle-select-btn,
.vehicle-card .vehicle-select-btn:hover,
.vehicle-card .vehicle-select-btn:focus,
.fleet-multistep-reservation-form .button-primary:not(.fleet-nav-link),
.fleet-multistep-reservation-form .fleet-btn-primary {
    background: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    ) !important;
    color: var(--fleet-button-text-color, #121212) !important;
    border: 0 !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: transparent !important;
    --ff-btn-bg-image: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    ) !important;
    --ff-btn-fg: var(--fleet-button-text-color, #121212) !important;
    --ff-btn-border-style: none !important;
    --ff-btn-border-width: 0 !important;
}

/* The panel stopped 24px short of the step bar above it, so their right edges
   did not line up. Both are children of the same container; the content had
   picked up an inset the indicator had not. */
.fleet-multistep-container .fleet-multistep-content,
.fleet-multistep-reservation-form .fleet-multistep-content {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Unavailability notice (#225) — a stated reason, not a silent omission. */
.fleet-unavailable-banner {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-left: 3px solid var(--fleet-primary-color, #e0a241);
    background: rgba(224, 162, 65, 0.10);
    border-radius: 6px;
    color: var(--fleet-text-muted, var(--fleet-text-light, #bcbcbc));
    line-height: 1.5;
}

.fleet-unavailable-banner strong {
    color: var(--fleet-primary-color, #e0a241);
}

/* The reason is the point, so it stays readable rather than being greyed to
   the edge of legibility. */
.fleet-unavailable-reason {
    opacity: 0.85;
    white-space: nowrap;
}

.fleet-unavailable-summary {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(224, 162, 65, 0.25);
}

.fleet-unavailable-summary strong {
    color: var(--fleet-primary-color, #e0a241);
    display: block;
    margin-bottom: 6px;
}

.fleet-unavailable-summary ul {
    margin: 0;
    padding-left: 18px;
}

.fleet-unavailable-summary li {
    color: var(--fleet-text-muted, var(--fleet-text-light, #bcbcbc));
    margin-bottom: 4px;
}

/* ============================================================================
   The 24px the step panel was losing (#224)

   `.fleet-multistep-container` is a flex row with two children: the content and
   `.fleet-multistep-sidebar`. On Step 1 the sidebar renders EMPTY — measured
   width 0 — but a flex gap is reserved between items regardless of whether the
   sibling has any width, so the content was squeezed to 1216px inside a 1240px
   container while the step bar above it kept the full 1240.

   That is why setting `width: 100%` on the content changed nothing: it was
   already taking all the space flex offered it. The space was never its to
   take.

   `:empty` removes the sidebar from flex layout entirely, so no gap is
   reserved. It reappears the moment it has content (Step 2 onward), where the
   two-column split is correct and wanted.
   ========================================================================= */
/* NOT `:empty` — the sidebar holds whitespace and a placeholder div, so it never
   matches (verified on the live page: 3 child nodes, 132 chars). The template
   hides it until it has data instead; see multistep-reservation-form.php. */

/* ============================================================================
   Datepicker — styled in fleetform-core, NOT here.

   The picker is built by core's `fleet-form-settings.js` and appears on three
   surfaces: the frontend shortcode form, this multistep flow, and the FleetForm
   admin screens. Its rules therefore live in core's `fleet-form.css`, the one
   stylesheet all three load.

   They used to live here as well, and that WAS the bug (#236). This file is
   enqueued from `enqueueFrontendReservationScripts()`, and `onFrontendEnqueue()`
   returns early on `Helpers::isAdminPage()` — so a multi-month layout fix landed
   here (v1.28.44) could not load on the surface that needed it, while the theming
   above it applied everywhere and made the picker look deliberately styled and
   unstyled at the same time. Ethan: "DRY means we should have one place for all of
   these uses of the date selector."

   Add datepicker rules to `fleetform-core/assets/css/fleet-form.css`.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Step navigation: one link back, one BUTTON forward.

   "Continue to Add-ons" is the primary action of the step and should look like
   it; "Previous Step" is a way back and should not compete. Both were plain
   text, then briefly both were gradient boxes — neither reads as a hierarchy.
   --------------------------------------------------------------------------- */
.fleet-multistep-reservation-form .fleet-nav-link {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
}

/* Forward = the primary action. */
.fleet-multistep-reservation-form .fleet-nav-link.button-primary,
.fleet-multistep-reservation-form .fleet-nav-link.button-primary:hover,
.fleet-multistep-reservation-form .fleet-nav-link.button-primary:focus {
    background: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    ) !important;
    color: var(--fleet-button-text-color, #121212) !important;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(224, 162, 65, 0.25);
}

/* Back = quiet. Bordered, not filled, so it never competes with forward. */
.fleet-multistep-reservation-form .fleet-nav-link:not(.button-primary) {
    background: transparent !important;
    border: 1px solid rgba(224, 162, 65, 0.35);
    color: var(--fleet-primary-color, #e0a241) !important;
}

.fleet-multistep-reservation-form .fleet-nav-link:not(.button-primary):hover {
    border-color: var(--fleet-primary-color, #e0a241);
    background: rgba(224, 162, 65, 0.10) !important;
    text-decoration: none !important;
}


/* ============================================================================
   A refused "Continue", and the alert it points at

   The vehicle is not bookable for these dates, so there is nowhere forward to go.
   The control stays VISIBLE and readable rather than being hidden: a button that
   vanishes leaves the customer wondering what they did, while one that is plainly
   inert and scrolls them to the reason is self-explanatory.
   ========================================================================== */

.fleet-navigation-buttons .fleet-nav-blocked {
    opacity: 0.55;
    cursor: not-allowed;
    /* The gradient reads as "primary action available"; flatten it so the button
       does not look live while refusing. */
    background: var(--background-panel, #1a1a1a) !important;
    color: var(--text-light, #eee) !important;
    border: 1px solid var(--fleet-primary-color, #e0a241) !important;
    box-shadow: none !important;
}

.fleet-navigation-buttons .fleet-nav-blocked:hover {
    /* No hover growth: it is not going to do anything. */
    transform: none !important;
    box-shadow: none !important;
}

/* A frozen step in the progress bar. Steps 1 and 2 stay reachable -- those are
   where the customer FIXES this (new dates, or another vehicle). */
.step-indicator-disabled.is-frozen {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

@keyframes fleet-alert-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 162, 65, 0); }
    30%      { box-shadow: 0 0 0 4px rgba(224, 162, 65, 0.55); }
}

.fleet-unavailable-banner.fleet-alert-flash,
.fleet-unavailable-summary.fleet-alert-flash {
    animation: fleet-alert-flash 900ms ease-out 2;
}

/* Respect a reduced-motion preference: still draw attention, just without the
   pulsing. */
@media (prefers-reduced-motion: reduce) {
    .fleet-unavailable-banner.fleet-alert-flash,
    .fleet-unavailable-summary.fleet-alert-flash {
        animation: none;
        box-shadow: 0 0 0 3px rgba(224, 162, 65, 0.55);
    }
}

/* ============================================================================
   The modal's unavailable action (#232)

   When the chosen dates do not work for this vehicle, the modal says so instead of
   offering an action the gate would refuse a step later. Kept visible and readable
   rather than hidden: a control that disappears leaves the customer wondering what
   they did, while one that plainly states the reason is self-explanatory.
   ========================================================================== */

.fleetform-modal .fleetform-btn-unavailable,
.fleetform-modal button.fleetform-btn-unavailable {
    background: var(--fleet-background-panel, #1a1a1a) !important;
    background-image: none !important;
    color: var(--fleet-text-muted, var(--fleet-text-light, #bcbcbc)) !important;
    border: 1px solid var(--fleet-primary-color, #e0a241) !important;
    box-shadow: none !important;
    opacity: 0.75;
    cursor: not-allowed;
}

.fleetform-modal .fleetform-btn-unavailable:hover {
    /* It is not going to do anything — do not grow or glow on hover. */
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   "Selected" as a corner tag, not part of the title

   It was a <span> inside the card's <h4>, so it rendered at heading scale and pushed
   the vehicle name onto an extra line. The selected card already has its own gold
   border, so this label only needs to name the state quietly.
   ========================================================================== */

.vehicle-card {
    /* the tag is positioned against the card */
    position: relative;
}

.vehicle-card .vehicle-selected-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--fleet-primary-color, #e0a241);
    color: var(--fleet-background-dark, #121212);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Never wrap or stretch: it is a label, not content. */
    white-space: nowrap;
    pointer-events: none;
}

/* Stacked layout: keep it clear of the image, which goes full width there. */
@container vehiclecard (max-width: 360px) {
    .vehicle-card .vehicle-selected-badge {
        top: 8px;
        right: 8px;
    }
}

/* ============================================================================
   Step 2 vehicle cards: a boundary, and a title that survives Elementor.

   ## The title button

   The card title became a real <button> when it was made a details trigger
   (#232). fleet-grid.css already resets that button — but scoped as
   `.fleetform-vehicle-title > .fleetform-vehicle-title-btn`, a child of the
   GRID's title wrapper. Step 2 wraps it in `<h4 class="vehicle-card-header">`,
   so that reset never matches here and the button arrived on this page with NO
   styling of its own. Elementor's global button rule then won by default, and
   the titles rendered as outlined boxes. Ethan: "just because they are now
   clickable doesnt mean they should be buttons with no style, they should still
   be links just now clickable and not able to be intercepted by elementor".

   Same reset, scoped to THIS surface's container. Three classes plus the element
   beats Elementor's `.elementor-widget-container button` by specificity, so no
   !important is needed — a bare `.fleetform-vehicle-title-btn` would tie with it
   and lose on document order, which is how this class of bug keeps recurring.
   ========================================================================== */
.vehicle-card .vehicle-card-header > .fleetform-vehicle-title-btn {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    display: inline;
    font: inherit;
    color: inherit;
    text-align: left;
    text-decoration: none;
    /* WRAP. The card's wrap rule targets `.vehicle-card-header` and its `h4`, but the
       title is a <button> INSIDE that h4 — and a host stylesheet setting
       `white-space: nowrap` on buttons beats an inherited value. Without these the
       long titles ran straight past the card edge on the frontend ("2021 Ford Bronco
       Outer Ba…") while wrapping correctly in the admin, where that host rule is
       absent. Declared explicitly so the two surfaces agree. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    text-transform: none;
    letter-spacing: inherit;
    box-shadow: none;
    cursor: pointer;
    width: auto;
    min-height: 0;
    line-height: inherit;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: transparent;
    --ff-btn-bg-image: none;
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
    --ff-btn-fg: inherit;
    --ff-btn-width: auto;
}

/* Reads as a link on interaction, not as a button at rest. */
.vehicle-card .vehicle-card-header > .fleetform-vehicle-title-btn:hover,
.vehicle-card .vehicle-card-header > .fleetform-vehicle-title-btn:focus-visible {
    background: none;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg-hover: transparent;
    --ff-btn-bg-image-hover: none;
    --ff-btn-fg-hover: inherit;
}

/* Keyboard users get a ring; pointer users do not (:focus-visible). */
.vehicle-card .vehicle-card-header > .fleetform-vehicle-title-btn:focus-visible {
    outline: 2px solid var(--fleet-primary-color, #e0a241);
    outline-offset: 3px;
}

/* ----------------------------------------------------------------------------
   Every card gets a boundary — but one that cannot be mistaken for "selected".

   Selection is a 4px accent-coloured ring plus a panel background. So the
   resting boundary is deliberately the opposite kind of signal: a 1px, low
   contrast, neutral line that defines the card's edge without competing.
   Ethan: "a boundary around every single vehicle but not one that would suggest
   that it's selected".
   -------------------------------------------------------------------------- */
.vehicle-card {
    /* Derived from the tenant palette, not a hardcoded grey: a boundary the
       operator never chose is a boundary that clashes with half of them. */
    border: 1px solid color-mix(in srgb, var(--fleet-text-light, #bcbcbc) 22%, transparent);
    transition: border-color 0.2s ease;
}

.vehicle-card:hover {
    border-color: color-mix(in srgb, var(--fleet-text-light, #bcbcbc) 45%, transparent);
}

/* Selected keeps its ring AND gets a matching edge, so the two read as one state
   rather than a ring floating over a grey box. */
.vehicle-card.selected {
    border-color: var(--fleet-accent-color, #f2c97d);
}

/* ----------------------------------------------------------------------------
   The "Unavailable for these dates" group.

   These cards exist to answer "where did my car go?", so they must read as
   present-but-not-offerable: dimmed, no hover lift, and no control to press.
   Deliberately NOT hidden — omitting them silently is the behaviour the display
   setting exists to replace.
   -------------------------------------------------------------------------- */
.vehicle-list-section-heading {
    margin: 32px 0 4px;
    color: var(--fleet-primary-color, #e0a241);
}

.vehicle-list-section-note {
    margin: 0 0 16px;
    color: var(--fleet-text-muted, var(--fleet-text-light, #bcbcbc));
    font-size: 0.9rem;
}

.vehicle-card.vehicle-card-unavailable {
    opacity: 0.55;
    /* The neutral edge stays, so the card still reads as a card — it is
       unavailable, not broken. */
    border-style: dashed;
    cursor: default;
}

/* No hover affordance: nothing here responds to a click. */
.vehicle-card.vehicle-card-unavailable:hover {
    border-color: color-mix(in srgb, var(--fleet-text-light, #bcbcbc) 22%, transparent);
}

/* The title still opens the details modal — looking is allowed, booking is not. */
.vehicle-card.vehicle-card-unavailable .vehicle-card-header > .fleetform-vehicle-title-btn {
    cursor: pointer;
}

.vehicle-card .vehicle-availability-badge-unavailable {
    background: color-mix(in srgb, var(--fleet-text-light, #bcbcbc) 20%, transparent) !important;
    color: var(--fleet-text-muted, var(--fleet-text-light, #bcbcbc)) !important;
}

/* ============================================================================
   Step 3 adopts step 2's design language (#327)

   Ethan, 2026-08-08: "elementor styles are still leaking through, also
   everything is our accent color... make the calculate and select buttons the
   gradient (keep the delete and grey styles still)... follow the design
   language of step 2."

   WHY EVERY BUTTON HERE LEAKED: they all carry the bare class `button`
   (`"button delivery-calculate-button"`, `"addon-select-btn addon-add-button
   button"`, `"button delivery-location-btn"`, `"button ... delivery-type-btn"`),
   which is the same Elementor capture vector already pinned out of the step nav
   above — step 3 was simply never added to its selector list.
   `.delivery-type-btn` was the worst case: it declared no background at all, so
   Elementor's #cc3366 was the only one it had.

   ⚠ EVERY `!important` BASE STATE MUST SHIP ITS `:hover` WITH `!important` TOO.
   The first cut of this block pinned only the resting states. Because the
   existing hovers (Remove -> red, and the rest) carry no `!important`, an
   important base at higher specificity beat them and EVERY hover on step 3 went
   dead — reported immediately: "hovering over remove used to be red now no
   hover style at all", "no hover at all on the gradient buttons anymore". An
   !important base state silently disables every non-important interactive state
   for that element; the two have to be added together or not at all.
   ========================================================================= */

/* ─── Primary actions: the same ramp as "Rent this Vehicle" ───
   The toggle's grey means THE ADDON IS SELECTED, not "the panel is open"
   (Ethan, 2026-08-08: "choose delivery logic being grey is correct... because
   it's selected"). It keys on `.selected` and stays grey whether the label
   reads Hide or Choose. An `options-open` class was briefly introduced to split
   those two facts — that was my misreading of the design, and it is gone. */
.fleet-multistep-reservation-form .delivery-calculate-button:not(.selected),
.fleet-multistep-reservation-form .delivery-location-btn:not(.selected),
.fleet-multistep-reservation-form .addon-add-button,
.fleet-multistep-reservation-form .addon-toggle-button.unselected,
.fleet-multistep-reservation-form .delivery-type-btn.button-primary {
    background: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    ) !important;
    color: var(--fleet-button-text-color, #121212) !important;
    border: 0 !important;
    text-shadow: none !important;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: transparent !important;
    --ff-btn-bg-image: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    ) !important;
    --ff-btn-fg: var(--fleet-button-text-color, #121212) !important;
    --ff-btn-border-style: none !important;
    --ff-btn-border-width: 0 !important;
}

/* Hover has to be VISIBLE, not merely present: the first cut restated the same
   gradient here, which is technically a hover rule and looks like nothing. */
.fleet-multistep-reservation-form .delivery-calculate-button:not(.selected):hover,
.fleet-multistep-reservation-form .delivery-location-btn:not(.selected):hover,
.fleet-multistep-reservation-form .addon-add-button:hover,
.fleet-multistep-reservation-form .addon-toggle-button.unselected:hover,
.fleet-multistep-reservation-form .delivery-type-btn.button-primary:hover {
    /* The gradient is RESTATED here, not inherited from the resting rule: a
       hover rule that sets only filter/transform leaves `background` owned by
       the base declaration, so an !important hover from Elementor repaints it
       for exactly as long as the pointer is down on it. */
    background: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    ) !important;
    color: var(--fleet-button-text-color, #121212) !important;
    filter: brightness(1.12) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(224, 162, 65, 0.38) !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg-hover: transparent !important;
    --ff-btn-bg-image-hover: linear-gradient(
        to right,
        var(--fleet-button-gradient-start, #e0a241),
        var(--fleet-button-gradient-end, #ffcc73)
    ) !important;
    --ff-btn-fg-hover: var(--fleet-button-text-color, #121212) !important;
}

/* ─── Neutral: an already-chosen option, and the open panel's "Hide" ─── */
.fleet-multistep-reservation-form .delivery-calculate-button.selected,
.fleet-multistep-reservation-form .delivery-location-btn.selected,
.fleet-multistep-reservation-form .addon-toggle-button.selected,
.fleet-multistep-reservation-form .addon-remove-button {
    background: var(--fleet-text-dark, #808080) !important;
    background-image: none !important;
    color: var(--fleet-text-white, #ffffff) !important;
    border: 0 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-text-dark, #808080) !important;
    --ff-btn-bg-image: none !important;
    --ff-btn-fg: var(--fleet-text-white, #ffffff) !important;
    --ff-btn-border-style: none !important;
    --ff-btn-border-width: 0 !important;
}

.fleet-multistep-reservation-form .delivery-calculate-button.selected:hover,
.fleet-multistep-reservation-form .delivery-location-btn.selected:hover,
.fleet-multistep-reservation-form .addon-toggle-button.selected:hover {
    background: var(--fleet-text-light, #bcbcbc) !important;
    color: var(--fleet-background-dark, #121212) !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg-hover: var(--fleet-text-light, #bcbcbc) !important;
    --ff-btn-bg-image-hover: none !important;
    --ff-btn-fg-hover: var(--fleet-background-dark, #121212) !important;
}

/* Remove is grey at rest and RED on hover — restoring the behaviour the first
   cut killed. Pinned with !important because the base state above is. */
.fleet-multistep-reservation-form .addon-remove-button:hover,
.fleet-multistep-reservation-form button.addon-remove-button.button:hover {
    background: var(--color-delete-hover, #730000) !important;
    color: var(--fleet-primary-color, #e0a241) !important;
}

/* ─── Destructive: the custom-address Remove, red throughout ─── */
.fleet-multistep-reservation-form .custom-delivery-remove-btn {
    background: var(--color-delete-hover, #730000) !important;
    background-image: none !important;
    color: var(--fleet-text-white, #ffffff) !important;
    border: 0 !important;
    transition: background 0.2s ease !important;
}

.fleet-multistep-reservation-form .custom-delivery-remove-btn:hover {
    background: var(--color-delete, #8e0303) !important;
    color: var(--fleet-text-white, #ffffff) !important;
}

/* ─── The Both / Pickup / Return popup ───
   The prominent action is marked `.button-primary` (addon-cards.js:2469) — NOT
   `.selected`, which is never applied to these, so rules keyed on it would be
   dead. That marker is also why "Both" already rendered gold while Pickup and
   Return went pink. It takes the gradient in the rule above; the alternatives
   get a dark surface with primary text, and the base rule excludes
   `.button-primary` explicitly rather than relying on a specificity accident
   between two !important rules. */
.fleet-multistep-reservation-form .delivery-type-btn:not(.button-primary) {
    background: var(--fleet-background-dark, #121212) !important;
    background-image: none !important;
    color: var(--fleet-primary-color, #e0a241) !important;
    border: 1px solid var(--fleet-primary-color, #e0a241) !important;
    text-shadow: none !important;
    transition: background 0.2s ease !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-background-dark, #121212) !important;
    --ff-btn-bg-image: none !important;
    --ff-btn-fg: var(--fleet-primary-color, #e0a241) !important;
    --ff-btn-border-width: 1px !important;
    --ff-btn-border-style: solid !important;
    --ff-btn-border: var(--fleet-primary-color, #e0a241) !important;
}

.fleet-multistep-reservation-form .delivery-type-btn:not(.button-primary):hover {
    background: rgba(224, 162, 65, 0.18) !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg-hover: rgba(224, 162, 65, 0.18) !important;
    --ff-btn-bg-image-hover: none !important;
}

/* ─── Structure reads as PRIMARY, not accent ───
   Step 2 uses primary for what organises the page and accent for emphasis
   inside it. Step 3 had used accent for both, which is why it read as one flat
   colour. */
.fleet-multistep-reservation-form .delivery-options-title,
.fleet-multistep-reservation-form .delivery-section-label,
.fleet-multistep-reservation-form .addon-card h3,
.fleet-multistep-reservation-form .addon-card h4,
.fleet-multistep-reservation-form .addon-title {
    color: var(--fleet-primary-color, #e0a241) !important;
}

.fleet-multistep-reservation-form .addon-card {
    border-color: var(--fleet-primary-color, #e0a241);
}

/* ============================================================================
   Every gradient button gets a VISIBLE hover (#327, second pass)

   Ethan, 2026-08-09: "Hover is still not working for the other gradient
   buttons, Continue to Customer Info →, or these ones… may be the same
   !important rule that was wrongly used to override elementor when I brought up
   these issues in the past but also overrides the hover."

   Exactly right, and it predates step 3. The #224 rules above list the base
   state, `:hover` and `:focus` in ONE selector group and give all three the
   SAME gradient — technically a hover rule, visually nothing:

     .vehicle-card .vehicle-select-btn,
     .vehicle-card .vehicle-select-btn:hover,      <- same declaration block
     .vehicle-card .vehicle-select-btn:focus { background: <gradient> !important }

   and `.fleet-nav-link.button-primary` does the same. Two more —
   `.button-primary:not(.fleet-nav-link)` and `.fleet-btn-primary` — have no
   hover at all, and their !important base would have beaten one anyway.

   Rather than unpick those groups (they are load-bearing against Elementor),
   this adds the feedback they never had, in the same treatment step 3 now uses
   so the whole form behaves alike. `filter`/`transform`/`box-shadow` are not
   declared by the base rules, so nothing here fights them.

   NOT the quiet back-link: `.fleet-nav-link:not(.button-primary)` already has a
   distinct hover of its own and is deliberately understated.
   ========================================================================= */
.fleet-multistep-reservation-form .vehicle-card .vehicle-select-btn:hover,
.fleet-multistep-reservation-form .button-primary:hover,
.fleet-multistep-reservation-form .fleet-btn-primary:hover,
.vehicle-card .vehicle-select-btn:hover {
    filter: brightness(1.12) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(224, 162, 65, 0.38) !important;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* The resting state needs the transition too, or the button snaps back on
   mouse-out instead of easing. */
.fleet-multistep-reservation-form .vehicle-card .vehicle-select-btn,
.fleet-multistep-reservation-form .button-primary,
.fleet-multistep-reservation-form .fleet-btn-primary,
.vehicle-card .vehicle-select-btn {
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Public operator context; absent entirely from renter and /fleet-form paths. */
.reservation-operator-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: absolute;
    top: 20px;
    right: 24px;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
.reservation-operator-context .fleet-operator-handoff { margin: 0; }
.customer-section-box-operator { position: relative; }
@media (max-width: 680px) {
    .reservation-operator-context {
        position: static;
        flex-wrap: wrap;
        margin: 0 0 18px;
    }
}

/* ── #358 · keep Elementor theme defaults out of the renter capture UI ──── */
.fleet-multistep-reservation-form .accordion-toggle,
.fleet-multistep-reservation-form .drivers-license-accordion > .accordion-toggle,
.fleet-multistep-reservation-form .customer-information-accordion > .accordion-toggle {
    background: var(--fleet-background-panel, #1b1b1b) !important;
    width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
    color: var(--fleet-accent-color, #f0bd5b) !important;
    border: 1px solid var(--fleet-border-color, #666) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-align: left !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg: var(--fleet-background-panel, #1b1b1b) !important;
    --ff-btn-bg-image: none !important;
    --ff-btn-width: 100% !important;
    --ff-btn-fg: var(--fleet-accent-color, #f0bd5b) !important;
    --ff-btn-border-width: 1px !important;
    --ff-btn-border-style: solid !important;
    --ff-btn-border: var(--fleet-border-color, #666) !important;
}
.fleet-multistep-reservation-form .accordion-toggle:hover,
.fleet-multistep-reservation-form .accordion-toggle:focus {
    background: var(--fleet-background-panel, #1b1b1b) !important;
    color: var(--fleet-accent-color, #f0bd5b) !important;
    border-color: var(--fleet-accent-color, #f0bd5b) !important;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-btn-bg-hover: var(--fleet-background-panel, #1b1b1b) !important;
    --ff-btn-bg-image-hover: none !important;
    --ff-btn-fg-hover: var(--fleet-accent-color, #f0bd5b) !important;
    --ff-btn-border-hover: var(--fleet-accent-color, #f0bd5b) !important;
}
.fleet-multistep-reservation-form .accordion-content {
    border: 1px solid var(--fleet-border-color, #666) !important;
    border-top: 0 !important;
    border-radius: 0 0 6px 6px !important;
    box-sizing: border-box !important;
}
.fleet-multistep-reservation-form select.form-select,
.fleet-multistep-reservation-form .form-select {
    width: 100% !important;
    max-width: none !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background-color: var(--fleet-background-panel, #1b1b1b) !important;
    color: var(--fleet-on-panel, var(--fleet-text-white, #f5f5f5)) !important;
    border: 1px solid var(--fleet-border-color, #666) !important;
    border-radius: 5px !important;
    color-scheme: dark;
    /* Armour tokens, same values as above (fleetform-core#200). */
    --ff-field-width: 100% !important;
    --ff-field-bg: var(--fleet-background-panel, #1b1b1b) !important;
    --ff-field-fg: var(--fleet-on-panel, var(--fleet-text-white, #f5f5f5)) !important;
    --ff-field-border: var(--fleet-border-color, #666) !important;
}

/* ── Renter phone pass · the flow at 390px ─────────────────────────────────
   Measured 2026-09-19 under real phone emulation (390 and 360, mobile:true),
   not a narrow iframe — the iframe clips and reports clean.

   STEP 4 (Customer Information) laid out 687px wide on a 390px phone, and on
   parlayrentals.com the same grids squeezed the returning-customer lookup to a
   62px licence field beside a 66px birthday field. Every row here is a bare
   `1fr 1fr` (or `1fr 1fr auto`), and a bare `1fr` never shrinks below its
   content's minimum — an input's intrinsic width — so two columns need ~430px
   on a theme that sizes inputs, and collapse to slivers on one that does not.
   One column on a phone, with `minmax(0, 1fr)` so the track may shrink.

   STEP 2 (Select Vehicle) showed one 200px card per row with the right half of
   the screen empty: `.vehicle-card` is `flex: 0 1 calc(33.333% - 16px)` with
   `min-width: 200px`, so on a phone it sits at its minimum and never grows.

   `.addon-grid` is `minmax(300px, 1fr)` — fits a 390 phone by 8px and
   overflows a 320 one.

   Width is set through `--ff-field-width` as well as `width`, because the
   theme armour owns `width` on fields at 0-3-0 and reads that token. */
@media (max-width: 600px) {
    .form-field-grid,
    .form-field-grid.three-columns,
    .form-field-grid-3,
    .customer-lookup-grid,
    .customer-info-grid,
    .trip-details-grid,
    .vehicle-details-grid,
    .addon-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-field-grid :is(.form-input, .form-select, textarea),
    .customer-lookup-grid :is(.form-input, .customer-lookup-button) {
        --ff-field-width: 100%;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .vehicle-card {
        flex-grow: 1;
    }

    /* Found live on parlayrentals.com after v1.56.214, at 360 and 320:
       - the licence capture slot is `min-width: 180px` with an upload button
         and a camera button side by side that cannot wrap — 291–309px in a
         256px preview box at 360;
       - the reservation summary is `min-width/max-width: 340px`, wider than a
         320 phone's content box;
       - Previous / Review sit in a `nowrap` flex row.
       The licence slot's phone rules moved to licence-capture.css (#779). */
    .reservation-summary-box,
    .fleet-multistep-sidebar .reservation-summary-box {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .fleet-navigation-buttons {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Step 5 — the submit gate and the password meter (#688)
   ========================================================================== */

/*
 * The strength meter's state colours moved to fleet-signin-page (#76). #688
 * copied them here from login.css; that copy is what #76 exists to remove.
 */

/*
 * The submit gate's messages.
 *
 * ⚠️ Tenant themes repaint bare inputs and every specificity TIE goes to the
 * theme, so the invalid outline is declared BOTH ways: the `--ff-field-*`
 * tokens the core theme armour owns at 0-3-0, and the plain declarations at the
 * same values for surfaces the armour does not reach. See CLAUDE.md — never
 * answer a theme with `!important`.
 *
 * `-hover` carries the resting value into hover/focus/active; the forgotten
 * state is the whole bug class, and a focused invalid field is exactly the
 * state a renter will be looking at.
 */
/*
 * ⚠️ Both selectors are DOUBLED (0-2-0) on purpose, and the reason was measured
 * in Chrome on the sandbox rather than reasoned about — the single-class
 * versions rendered WRONG while the suite, which greps this file, passed 45/45:
 *
 *   .fleet-field-invalid   border came out `rgb(224,49,49) 1px`, not 2px.
 *       `.password-input-wrapper input` (0-1-1, above at :1115) sets the
 *       `border` shorthand and outranked 0-1-0. The COLOUR still landed, from
 *       the `--ff-field-border` token the core theme armour applies at 0-3-0 —
 *       so the armour was carrying the rule and the plain declaration beside it
 *       was losing, which is the half this contract exists to keep working.
 *   .fleet-field-error     rendered `rgb(255,255,255)` — white. Ethan asked for
 *       red. `.account-creation-box p` (0-1-1, :1067) beat 0-1-0.
 *
 * Doubling a class is the armour's own trick and costs nothing; `!important` is
 * not an option here (CLAUDE.md), and relying on document order would be a
 * specificity TIE, which is the exact thing that shipped broken in 65a12bf.
 */
.fleet-field-invalid.fleet-field-invalid {
    --ff-field-border: #e03131;
    --ff-field-border-hover: #e03131;
    border-color: #e03131;
    border-width: 2px;
    border-style: solid;
}

.fleet-field-error.fleet-field-error {
    color: #ff6b6b;
    font-size: 13px;
    font-weight: bold;
    margin: 6px 0 0;
}

.confirmation-form-errors {
    border: 1px solid #e03131;
    border-left-width: 4px;
    border-radius: var(--fleet-input-border-radius);
    background: rgba(224, 49, 49, 0.08);
    color: #ff6b6b;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.confirmation-form-errors__head {
    margin: 0 0 6px;
    font-weight: bold;
}

.confirmation-form-errors ul {
    margin: 0;
    padding-left: 18px;
}

.confirmation-form-errors a {
    color: var(--fleet-accent-color);
    text-decoration: underline;
}

/*
 * The terms link in the agreement line (#76). Every state declared, at 0-3-1+,
 * for the reason the password toggle needed it: on a checkout body without
 * `admin-theme-enabled`, the theme's link hover is what would otherwise win.
 */
.confirmation-agreement p a.confirmation-terms-link,
.confirmation-agreement p a.confirmation-terms-link:visited {
    color: var(--fleet-primary-color, #e0a241);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.confirmation-agreement p a.confirmation-terms-link:hover,
.confirmation-agreement p a.confirmation-terms-link:focus {
    color: var(--fleet-button-gradient-end, #ffcc73);
    text-decoration: underline;
}
.confirmation-agreement p a.confirmation-terms-link:focus-visible {
    outline: 2px solid var(--fleet-primary-color, #e0a241);
    outline-offset: 2px;
}


/* ─── Delivery card, 2026-09-26 ───────────────────────────────────────────
   Ethan's step-3 pass: say what is chosen, a quieter toggle, a selected fixed
   location that looks like a selected saved address, saved addresses kept. */

/* The headline: one row per leg, the total when there are two. */
.delivery-headline-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.delivery-headline-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.delivery-headline-label {
    overflow-wrap: anywhere;
}

.delivery-headline-price {
    white-space: nowrap;
}

.delivery-headline-total {
    border-top: 1px solid #444;
    padding-top: 4px;
    font-weight: bold;
}

/* "Update delivery" / "Done": an outline, never the grey of a disabled button.
   No !important: a quiet toggle drops .unselected (the gold !important rule), and the
   theme armour reads the --ff-btn-* tokens set here. */
.fleet-multistep-reservation-form .addon-toggle-button.is-quiet {
    background: transparent;
    background-image: none;
    color: var(--fleet-accent-color, #e0a241);
    border: 1px solid var(--fleet-accent-color, #e0a241);
    --ff-btn-bg: transparent;
    --ff-btn-bg-image: none;
    --ff-btn-fg: var(--fleet-accent-color, #e0a241);
    --ff-btn-border-style: solid;
    --ff-btn-border-width: 1px;
    --ff-btn-border: var(--fleet-accent-color, #e0a241);
}

.fleet-multistep-reservation-form .addon-toggle-button.is-quiet:hover {
    background: rgba(224, 162, 65, 0.12);
    color: var(--fleet-accent-color, #e0a241);
    --ff-btn-bg-hover: rgba(224, 162, 65, 0.12);
    --ff-btn-bg-image-hover: none;
    --ff-btn-fg-hover: var(--fleet-accent-color, #e0a241);
}

/* A selected Airport / Train Station: the same red Remove as a selected
   saved address (was a grey "Selected ✓"). */
.fleet-multistep-reservation-form .delivery-location-btn.selected,
.fleet-multistep-reservation-form .delivery-location-btn.selected:hover {
    background: var(--color-delete-hover, #730000) !important;
    background-image: none !important;
    color: var(--fleet-text-white, #ffffff) !important;
    --ff-btn-bg: var(--color-delete-hover, #730000) !important;
    --ff-btn-bg-hover: var(--color-delete, #8e0303) !important;
    --ff-btn-bg-image: none !important;
    --ff-btn-bg-image-hover: none !important;
    --ff-btn-fg: var(--fleet-text-white, #ffffff) !important;
    --ff-btn-fg-hover: var(--fleet-text-white, #ffffff) !important;
}

.fleet-multistep-reservation-form .delivery-location-btn.selected:hover {
    background: var(--color-delete, #8e0303) !important;
}

/* A saved address that is not selected: Select, and a quiet Forget under it. */
.custom-delivery-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: 10px;
}

.fleet-multistep-reservation-form .custom-delivery-forget-btn {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    padding: 2px 4px !important;
    color: #aaa !important;
    font-size: 0.8em !important;
    text-decoration: underline !important;
    cursor: pointer;
    --ff-btn-bg: transparent !important;
    --ff-btn-bg-image: none !important;
    --ff-btn-fg: #aaa !important;
    --ff-btn-border-width: 0 !important;
}

.fleet-multistep-reservation-form .custom-delivery-forget-btn:hover {
    color: var(--fleet-text-white, #fff) !important;
    --ff-btn-bg-hover: transparent !important;
    --ff-btn-fg-hover: var(--fleet-text-white, #fff) !important;
}

/* ─── Discount code in the summary, 2026-09-26 ────────────────────────────
   A small toggle, not a full-width field: Ethan found the field and Apply
   "way too thick and big" and not rounded like the rest. Radius comes from
   the tenant's own input token, as every other field here. */
.summary-coupon-toggle > summary {
    cursor: pointer;
    font-size: 0.85em;
    color: var(--fleet-accent-color, #e0a241);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.summary-coupon-toggle > summary::-webkit-details-marker {
    display: none;
}

.summary-coupon-toggle > summary::after {
    content: '▾';
    font-size: 0.9em;
    transition: transform 0.15s ease;
}

.summary-coupon-toggle[open] > summary::after {
    transform: rotate(180deg);
}

.summary-coupon-entry {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

.fleet-multistep-reservation-form .summary-coupon-input,
.reservation-summary-box .summary-coupon-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    padding: 4px 8px;
    font-size: 0.85em;
    border-radius: var(--fleet-input-border-radius, 6px);
    --ff-field-height: 30px;
    --ff-field-padding: 4px 8px;
    --ff-field-radius: var(--fleet-input-border-radius, 6px);
    --ff-field-width: auto;
    width: auto;
}

.fleet-multistep-reservation-form .summary-coupon-apply,
.reservation-summary-box .summary-coupon-apply {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px !important;
    font-size: 0.85em !important;
    line-height: 30px !important;
    border-radius: var(--fleet-input-border-radius, 6px) !important;
    border: 0 !important;
    cursor: pointer;
    background: linear-gradient(to right, var(--fleet-button-gradient-start, #e0a241), var(--fleet-button-gradient-end, #ffcc73)) !important;
    color: var(--fleet-button-text-color, #121212) !important;
    --ff-btn-bg: transparent !important;
    --ff-btn-bg-image: linear-gradient(to right, var(--fleet-button-gradient-start, #e0a241), var(--fleet-button-gradient-end, #ffcc73)) !important;
    --ff-btn-fg: var(--fleet-button-text-color, #121212) !important;
    --ff-btn-border-width: 0 !important;
    --ff-btn-width: auto !important;
}

/* The other add-ons' Remove, red like Delivery's (Ethan, 2026-09-26: "update
   the remove buttons as well on the other"). Was grey at rest, red on hover. */
.fleet-multistep-reservation-form .addon-remove-button,
.fleet-multistep-reservation-form button.addon-remove-button.button {
    background: var(--color-delete-hover, #730000) !important;
    background-image: none !important;
    color: var(--fleet-text-white, #ffffff) !important;
    --ff-btn-bg: var(--color-delete-hover, #730000) !important;
    --ff-btn-bg-image: none !important;
    --ff-btn-fg: var(--fleet-text-white, #ffffff) !important;
}

.fleet-multistep-reservation-form .addon-remove-button:hover,
.fleet-multistep-reservation-form button.addon-remove-button.button:hover {
    background: var(--color-delete, #8e0303) !important;
    color: var(--fleet-text-white, #ffffff) !important;
    --ff-btn-bg-hover: var(--color-delete, #8e0303) !important;
    --ff-btn-bg-image-hover: none !important;
    --ff-btn-fg-hover: var(--fleet-text-white, #ffffff) !important;
}

/* Even spacing: a card's own bottom margin stacked on the grid's 24px row gap
   made the vertical space 42px against 24px across (Ethan, 2026-09-26). */
.addon-grid > .addon-card {
    margin-bottom: 0;
}

/* The add-on's emoji sat touching its title. */
.addon-card-icon {
    margin-right: 6px;
}

/* An OPEN accordion's header is square along its bottom, so it meets the panel
   under it (Ethan, 2026-09-26 — Sign In, Find My Information, Driver's License
   and Customer Information all showed a rounded seam). Open is read from the
   panel itself (`.open` / `.visible`, what the toggles set) as well as from
   aria-expanded, because two of the headers never carry the attribute. */
.fleet-multistep-reservation-form .accordion-toggle[aria-expanded="true"],
.fleet-multistep-reservation-form .accordion-toggle:has(+ .accordion-content.open),
.fleet-multistep-reservation-form .accordion-toggle:has(+ .accordion-content.visible) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* The review step's "Change" link on Trip Details: back to dates, times and places. */
.confirmation-section-box h3 .ff-review-change {
	float: right;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fleet-primary-color, #e0a241);
	text-decoration: underline;
	text-underline-offset: 3px;
}