/* ========================================
   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-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;
    }
}

/* ─── 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 */
}

/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║                        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 */
.form-input-error {
    border-color: #f44336 !important;
}

.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 */
@media (max-width: 767px) {
    .fleet-multistep-container {
        flex-direction: column-reverse;
    }
    
    .fleet-multistep-sidebar {
        width: 100%;
    }
}

/* 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;
}

.flight-info-modal-close:hover {
    background: rgba(var(--fleet-accent-color-rgb, 255, 179, 0), 0.1);
}

.flight-info-modal-body {
    padding: 24px;
    color: 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-text-white);
    font-size: 1em;
}

.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);
}

#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;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--fleet-accent-color);
}

.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;
}

.flight-info-cancel-btn:hover {
    background: var(--fleet-text-dark) !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;
}

.flight-info-submit-btn:hover {
    background: var(--fleet-button-hover-color) !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;
    background: var(--fleet-background-dark);
    color: var(--fleet-accent-color);
    padding: 24px;
    border-radius: var(--fleet-input-border-radius);
    margin-bottom: 24px;
}

.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-text-white);
    margin-bottom: 20px;
    font-size: 16px;
}

/* Confirm Reservation Button */
.confirm-reservation-btn {
    background: linear-gradient(135deg, var(--fleet-button-gradient-start) 0%, var(--fleet-button-gradient-end) 100%);
    color: var(--fleet-button-text-color);
    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-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-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-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-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-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-text-white);
    margin: 4px 0;
    font-weight: bold;
}

.trip-time {
    color: 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-text-white);
    margin: 0;
    font-size: 14px;
}

.trip-location-address {
    color: 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-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-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-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-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-light);
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
}

.customer-info-field p:last-child {
    color: 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-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-text-white);
    margin: 0;
}

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

.password-field-wrapper label {
    display: block;
    margin-bottom: 8px;
    color: 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;
}

.password-input-wrapper input {
    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-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);
    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;
}

.strength-result {
    margin-bottom: 12px;
    padding: 8px;
    border-radius: var(--fleet-input-border-radius);
    font-weight: bold;
    text-align: center;
}

.password-description {
    color: var(--fleet-text-light);
    font-size: 13px;
    margin-bottom: 16px;
}

.password-description code {
    color: var(--fleet-accent-color);
}

.wp-generate-pw {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    border: none;
    padding: 10px 20px;
    border-radius: var(--fleet-input-border-radius);
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 12px;
}

.password-note {
    color: 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-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;
}

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

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

.customer-help-text {
    color: 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-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-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;
}

.customer-lookup-button {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

.customer-lookup-button {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

/* 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;
}

.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-text-white);
}

.form-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: var(--fleet-background-panel);
    color: 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;
}

.upload-icon {
    font-size: 18px;
}

.camera-icon {
    font-size: 16px;
}

.file-input-hidden {
    display: none;
}

.file-preview {
    margin-top: 12px;
}

.progress-shade {
    margin-top: 12px;
}

.progress-shade.hidden {
    display: none;
}

.progressbar-inner {
    width: 0%;
    background: var(--fleet-accent-color);
    height: 4px;
    border-radius: 2px;
    transition: width 0.3s;
}

/* 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;
}

.delivery-location-btn.selected {
    background: #666;
    color: var(--fleet-text-white);
}

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

.delivery-pricing-info {
    margin: 8px 0;
    font-size: 0.9em;
    color: 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-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;
}

.addon-toggle-button.selected {
    background: var(--fleet-text-dark);
    color: 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;
}

.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);
}

/* 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-text-white);
}

.delivery-pricing-info {
    margin: 8px 0;
    font-size: 0.9em;
    color: 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;
}

.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-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-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-text-white);
    margin-bottom: 12px;
    font-size: 16px;
}

.customer-section-text {
    color: 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;
}

.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-text-white);
}

.form-label-grey {
    color: 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-text-white);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--fleet-accent-color);
}

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

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

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

/* Buttons */
.form-submit-button {
    background: var(--fleet-accent-color);
    color: var(--fleet-background-dark);
    border: none;
    padding: 10px 24px;
    font-weight: bold;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
}

.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 */
}

.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-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-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 */
.customer-info-error {
    background: #f44336;
    color: #fff;
    padding: 16px;
    border-radius: var(--fleet-input-border-radius);
    margin-bottom: 16px;
}

.customer-info-error strong {
    display: block;
    margin-bottom: 8px;
}

.customer-info-error ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

/* Driver's License File Upload */
.dl-file-item {
    display: inline-block;
    position: relative;
    margin-right: 12px;
    margin-bottom: 12px;
}

.dl-file-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--fleet-input-border-radius);
    border: 1px solid var(--fleet-accent-color);
}

.dl-file-pdf {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fleet-background-panel);
    border: 1px solid var(--fleet-accent-color);
    border-radius: var(--fleet-input-border-radius);
    font-size: 14px;
    color: var(--fleet-accent-color);
}

.dl-file-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f44336;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

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

/* Driver's License Camera Modal */
.dl-camera-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dl-camera-container {
    max-width: 800px;
    width: 100%;
    background: var(--fleet-background-dark);
    border-radius: var(--fleet-input-border-radius);
    padding: 20px;
    border: 2px solid var(--fleet-accent-color);
}

.dl-camera-title {
    color: var(--fleet-accent-color);
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.dl-camera-video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 20px;
    background: #000;
    border-radius: var(--fleet-input-border-radius);
    overflow: hidden;
}

.dl-camera-video {
    width: 100%;
    display: block;
}

.dl-camera-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

/* ============================================================================
   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;
}

.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;
    }
}

/* 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;
}

/* ============================================================================
   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;
}

/* 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-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-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-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;
}

/* 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;
}

/* 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-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-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;
}

/* 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;
}

/* ─── 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;
}

.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;
}

/* 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;
}

.fleet-multistep-reservation-form .delivery-type-btn:not(.button-primary):hover {
    background: rgba(224, 162, 65, 0.18) !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;
}

/* ── #366 · licence capture state ──────────────────────────────────────────
   A thumbnail alone only proves the BROWSER decoded the file. That is exactly
   the reassurance the old code gave while storing nothing, so each capture
   shows whether the SERVER has it: pending, stored, or failed. */
.dl-file-item.dl-file-uploading { opacity: .55; }
.dl-file-item.dl-file-uploading::after {
    content: "Uploading…";
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .65); color: #fff;
    font-size: 11px; text-align: center; padding: 2px 0;
}
.dl-file-item.dl-file-uploaded { outline: 2px solid #2e7d32; }
.dl-file-item.dl-file-uploaded::after {
    content: "\2713 Saved";
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(46, 125, 50, .9); color: #fff;
    font-size: 11px; text-align: center; padding: 2px 0;
}
/* Failed is LOUD on purpose — a silently-lost licence is the whole defect. */
.dl-file-item.dl-file-failed { outline: 2px solid #b3261e; }
.dl-file-item.dl-file-failed::after {
    content: "Not saved — retake";
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(179, 38, 30, .92); color: #fff;
    font-size: 11px; text-align: center; padding: 2px 0;
}

/* #358 · whether the card was machine-READ, which is not the same as saved.
   A renter seeing only "Saved" cannot tell a scanned licence from a blurry one,
   and retaking it is cheap while they are still standing at the counter. */
.dl-file-item.dl-file-scanned::after   { content: "\2713 Saved \00b7 scanned"; }
.dl-file-item.dl-file-unscanned::after { content: "\2713 Saved \00b7 not readable"; background: rgba(120, 90, 0, .92); }

/* Which side is still needed. Says "complete" only when the SERVER says so. */
.dl-capture-state { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.dl-capture-incomplete { color: #8a5a00; }
.dl-capture-complete   { color: #2e7d32; }

/* ── #358 · the customer-portal licence panel ───────────────────────────── */
.ff-licence-panel { margin: 20px 0; padding: 16px 18px; border: 1px solid #dcdcde;
    border-radius: 8px; background: #fff; }
.ff-licence-panel h3 { margin: 0 0 8px; font-size: 16px; }
.ff-licence-status { margin: 0 0 6px; font-weight: 600; }
.ff-licence-ok   { color: #2e7d32; }
.ff-licence-todo { color: #8a5a00; }
.ff-licence-note { margin: 0 0 10px; font-size: 13px; color: #646970; }
.ff-licence-actions { margin: 12px 0 0; }
.ff-licence-btn { padding: 8px 14px; margin-right: 8px; border: 1px solid #2271b1;
    border-radius: 4px; background: #2271b1; color: #fff; cursor: pointer; font-size: 14px; }
.ff-licence-btn-camera { background: #fff; color: #2271b1; }
.ff-licence-feedback { margin-top: 10px; font-size: 13px; min-height: 1.2em; }
.ff-licence-feedback.ff-licence-error { color: #b3261e; }
.ff-licence-feedback.ff-licence-busy  { color: #646970; }