/* ==========================================
   DESIGN SYSTEM & VARIABLES - UNITED BUS PRO
   ========================================== */
:root {
    --primary-dark: #111827;      /* Tailwind Gray 900 */
    --primary-medium: #1f2937;    /* Tailwind Gray 800 */
    --primary-light: #374151;     /* Tailwind Gray 700 */
    --accent-gold: #d97706;       /* Amber 600 */
    --accent-gold-hover: #b45309; /* Amber 700 */
    --accent-gold-light: #fef3c7; /* Amber 100 */
    
    --bg-main: #f9fafb;           /* Tailwind Gray 50 */
    --bg-card: #ffffff;
    --text-main: #1f2937;
    --text-muted: #4b5563;
    --text-light: #f3f4f6;
    
    --font-heading: 'Outfit', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary-dark);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

/* Text that is present for screen readers and crawlers but never drawn. Used to
   tell 27 otherwise identical "Learn More" links apart without changing the
   label the card layout is built around. display:none would hide it from
   assistive tech too, which is the whole point of clipping instead. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================
   NAVIGATION HEADER
   ========================================== */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(17, 24, 39, 0.95); /* Semi-transparent dark bg */
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

header nav {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.logo-img {
    height: 45px;
    width: auto;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.logo-text span {
    color: var(--accent-gold);
}

/* Navigation Links */
.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    list-style: none;
    flex-wrap: wrap;
}

.nav-link {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-light);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

.nav-link:hover, .nav-link.active {
    color: var(--accent-gold);
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-btn {
    background-color: var(--accent-gold);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-btn:hover {
    background-color: var(--accent-gold-hover);
    transform: translateY(-2px);
}

/* Dropdown Navigation Menu & Mega Menu */
.nav-item-dropdown {
    position: relative;
    padding-bottom: 5px;
}

.nav-item-dropdown.has-mega-menu {
    position: static;
}

@keyframes menuFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: none;
    background-color: rgba(17, 24, 39, 0.98);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: 20px;
    min-width: 320px;
    z-index: 1000;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: none;
    background-color: rgba(17, 24, 39, 0.98);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 30px;
    width: 90vw;
    max-width: 1100px;
    z-index: 1000;
}
.company-dropdown {
    min-width: 240px !important;
}

/* Bridge the hover gap between nav links and dropdown containers */
.dropdown-menu::before,
.mega-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 25px;
    background: transparent;
}

@media (min-width: 1151px) {
    .nav-item-dropdown.desktop-open > .dropdown-menu,
    .nav-item-dropdown.desktop-open > .mega-menu {
        display: block !important;
        animation: menuFadeIn var(--transition-fast) ease-out;
    }
}

.dropdown-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.dropdown-col h4,
.mega-menu-col h4 {
    font-size: 0.85rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.dropdown-col ul,
.mega-menu-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dropdown-col a,
.mega-menu-col a {
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.85;
    transition: all 0.2s ease;
    display: inline-block;
}

.dropdown-col a:hover,
.mega-menu-col a:hover {
    color: var(--accent-gold);
    opacity: 1;
    transform: translateX(3px);
}

/* Scrollable City List inside Dropdown */
.scrollable-city-list {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for scrollable dropdown lists */
.scrollable-city-list::-webkit-scrollbar {
    width: 5px;
}
.scrollable-city-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}
.scrollable-city-list::-webkit-scrollbar-thumb {
    background: var(--accent-gold);
    border-radius: 3px;
}

/* Company Dropdown Item links */
.dropdown-item-link {
    display: flex !important;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dropdown-item-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--accent-gold) !important;
    padding-left: 16px;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
}

/* ==========================================
   HERO & INSTANT QUOTE CALCULATOR
   ========================================== */
.hero-section {
    position: relative;
    background-color: #f9fafb;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.93) 0%, rgba(243, 244, 246, 0.88) 100%), url('/images/hero-bg.webp?v=4');
    background-size: cover;
    background-position: center;
    padding: 120px 30px 100px;
    min-height: 80vh;
    display: flex;
    align-items: center;
    color: var(--primary-dark);
}

.hero-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-content h1 span {
    color: var(--accent-gold);
}

.hero-content p {
    font-size: 1.15rem;
    color: var(--text-muted);
    opacity: 0.95;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Quote Calculator Card */
.quote-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-xl);
}

/* The quote steps are h2 -- they sit directly under the page h1, and an h3
   there skipped a level for screen readers. */
.quote-card h2 {
    color: var(--primary-dark);
    font-size: 1.5rem;
    margin-bottom: 25px;
    text-align: center;
}

.quote-form-step {
    display: none;
}

.quote-form-step.active {
    display: block;
    animation: fadeIn var(--transition-normal);
}

.form-group {
    margin-bottom: 20px;
}

/* Reserves room for the Google Places suggestions dropdown so it doesn't
   overlap (and swallow clicks meant for) whatever field sits right below,
   e.g. Date/Time under the Pickup address in the homepage quote card.
   Only applied while the address field is focused, so compact layouts
   don't waste space the rest of the time.
   !important is required: several of these wrappers carry an inline
   margin-bottom (e.g. the Dropoff field's style="margin-bottom: 0"), and an
   inline style would otherwise win over this class and leave that field's
   dropdown overlapping again. */
.places-focused {
    margin-bottom: 230px !important;
    transition: margin-bottom 0.15s ease;
}

.form-group label {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--primary-light);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input {
    width: 100%;
    background-color: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    color: var(--primary-dark);
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    transition: var(--transition-fast);
}

.form-input:focus {
    border-color: var(--accent-gold);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.form-input option {
    background-color: #ffffff;
    color: var(--primary-dark);
}

/* Multi-step controls */
.quote-controls {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.btn-primary {
    background-color: var(--accent-gold);
    border: none;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    flex: 1;
    text-align: center;
}

.btn-primary:hover {
    background-color: var(--accent-gold-hover);
    transform: translateY(-1px);
}

/* Quote Results display */
.quote-result-box {
    background-color: #fef3c7;
    border: 1.5px solid rgba(217, 119, 6, 0.2);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 25px;
    text-align: center;
}

.quote-result-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent-gold-hover);
    margin: 10px 0;
}

.quote-progress-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    position: relative;
}

.quote-progress-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.08);
    z-index: 1;
    transform: translateY(-50%);
}

.progress-step {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f3f4f6;
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    position: relative;
    z-index: 2;
    transition: var(--transition-normal);
}

.progress-step.active {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.25);
}

.progress-step.completed {
    background-color: var(--primary-dark);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* ==========================================================
   FEATURED/SECTIONS STYLING
   ========================================== */
.section-padding {
    padding: 90px 30px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Trust Bar / Stats */
.trust-bar {
    background-color: #f3f4f6;
    color: var(--primary-dark);
    padding: 40px 30px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
}

.stat-item h4 {
    font-size: 3rem;
    color: var(--accent-gold);
    font-weight: 800;
}

.stat-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Fleet Cards */
.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.fleet-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: var(--transition-normal);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.fleet-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.fleet-img-box {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: var(--primary-medium);
}

.fleet-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fleet-price-badge {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: var(--primary-dark);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.fleet-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px;
}

.fleet-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
}

.fleet-info h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.fleet-info p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 8px;
    min-height: 44px;
}

.fleet-quote-link {
    display: inline-block;
    color: var(--accent-gold-hover);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: underline;
    margin-top: 0;
    margin-bottom: 20px;
}

.fleet-quote-link:hover {
    color: var(--accent-gold);
}

.fleet-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-light);
}

.fleet-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: var(--bg-main);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
}

/* Fleet page search + category filter bar */
.fleet-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px 24px;
    margin-bottom: 40px;
}

.fleet-search-box {
    position: relative;
    flex: 1 1 280px;
    max-width: 340px;
}

.fleet-search-box i {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.fleet-search-input {
    width: 100%;
    background-color: var(--bg-main);
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    padding: 12px 16px 12px 42px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-fast);
}

.fleet-search-input:focus {
    border-color: var(--accent-gold);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.fleet-no-results {
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 50px 20px;
    background-color: var(--bg-main);
    border-radius: var(--radius-md);
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .fleet-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px;
        margin-bottom: 30px;
    }
    .fleet-search-box {
        flex: none;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .fleet-filter-bar {
        padding: 14px;
    }
    .fleet-search-input {
        padding: 10px 14px 10px 38px;
        font-size: 0.9rem;
    }
}

/* The fleet page's own category tabs wrap onto multiple lines instead of
   scrolling sideways — unlike the homepage's .service-filter-tabs, which stays
   swipeable. Scoped to the #fleetFilterTabs id so it doesn't affect that. */
#fleetFilterTabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    justify-content: flex-start;
}

/* Service category filter — segmented control (homepage) */
.service-filter-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.service-filter-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    max-width: 100%;
    background-color: var(--bg-main);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.service-filter-tabs::-webkit-scrollbar {
    display: none;
}

.service-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 10px 20px;
    background-color: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.service-filter-tab:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--primary-dark);
}

.service-filter-tab.active {
    background-color: var(--primary-dark);
    color: #ffffff;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.service-filter-tab:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.service-filter-count {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.55;
}

.service-filter-tab.active .service-filter-count {
    opacity: 0.7;
}

@media (max-width: 768px) {
    /* Let the control run edge-to-edge and swipe horizontally on small screens */
    .service-filter-wrap {
        justify-content: flex-start;
        margin-bottom: 28px;
    }
    .service-filter-tabs {
        width: 100%;
        justify-content: flex-start;
    }
    .service-filter-tab {
        padding: 9px 15px;
        font-size: 0.86rem;
    }
}

/* Service cards */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

@media (max-width: 560px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Show more / show less control */
.services-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.services-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    background-color: var(--bg-card);
    color: var(--primary-dark);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-normal);
}

.services-more-btn:hover {
    background-color: var(--primary-dark);
    color: #ffffff;
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.services-more-btn:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

.services-more-icon {
    font-size: 0.75rem;
    transition: transform var(--transition-normal);
}

.services-more-btn.is-expanded .services-more-icon {
    transform: rotate(180deg);
}

@media (max-width: 560px) {
    .services-more-wrap {
        margin-top: 28px;
    }
    .services-more-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }
}

.service-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: var(--transition-normal);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--accent-gold);
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.service-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ==========================================
   BOOKING/RESERVATION PAGE SPECIFIC STYLE
   ========================================== */
.reservation-container {
    max-width: 900px;
    margin: 60px auto;
    padding: 40px;
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.reservation-container h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-align: center;
}

.reservation-container p {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 40px;
}

/* Form Styles */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.form-field {
    width: 100%;
    background-color: var(--bg-main);
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-fast);
}

/* Label row with a "+" action button to the left of the label (e.g. "Add category") */
.form-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.form-label-row .form-label {
    margin-bottom: 0;
}

.btn-add-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    background-color: var(--accent-gold-light);
    color: var(--accent-gold-hover);
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-add-category:hover {
    background-color: var(--accent-gold);
    color: #ffffff;
}

/* Generic modal (used by the "Add Fleet Category" popup) */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.is-open {
    display: flex;
}

.modal-box {
    background-color: #ffffff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalPop 0.15s ease;
}

@keyframes modalPop {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.modal-header h3 {
    font-size: 1.1rem;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    flex: none;
}

.modal-close-btn:hover {
    background-color: var(--bg-main);
    color: var(--primary-dark);
}

.modal-body {
    padding: 22px;
}

.fleet-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    max-height: 160px;
    overflow-y: auto;
}

.fleet-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--bg-main);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    padding: 6px 8px 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.fleet-category-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: none;
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--text-muted);
    border: none;
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
}

.fleet-category-chip-remove:hover {
    background-color: #fde8e8;
    color: #9b1c1c;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

@media (max-width: 480px) {
    .modal-box {
        max-width: none;
    }
    .modal-footer {
        flex-direction: column-reverse;
    }
    .modal-footer .btn-primary,
    .modal-footer .btn-secondary {
        width: 100%;
        text-align: center;
    }
}

.form-field:focus {
    border-color: var(--accent-gold);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.btn-form {
    display: block;
    width: 100%;
    background-color: var(--accent-gold);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
    margin-top: 20px;
}

.btn-form:hover {
    background-color: var(--accent-gold-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ==========================================
   ADMIN LOGIN & DASHBOARD
   ========================================== */
.admin-login-body {
    background-color: var(--primary-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.admin-login-card {
    background-color: var(--primary-medium);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 400px;
    padding: 40px;
    color: #ffffff;
    box-shadow: var(--shadow-xl);
}

.admin-login-card h2 {
    color: #ffffff;
    margin-bottom: 25px;
    text-align: center;
}

.admin-login-card .form-group label {
    color: var(--text-light);
}

/* Admin Dashboard CSS */
.admin-container {
    max-width: 1600px;
    margin: 40px auto;
    padding: 0 30px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-dark);
    color: #ffffff;
    padding: 20px 30px;
    border-radius: var(--radius-md);
    margin-bottom: 30px;
}

.admin-header h2 {
    color: #ffffff;
}

.admin-nav {
    display: flex;
    gap: 15px;
}

.admin-nav-btn {
    background-color: var(--primary-light);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.admin-nav-btn:hover {
    background-color: var(--accent-gold);
}

.admin-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 30px;
}

/* .btn-secondary is white-on-transparent, built for the dark banner sections.
   Dropped onto a white admin card it renders white-on-white and vanishes —
   which is what hid the "Upload Custom Image" buttons. Buttons that set their
   own background inline (delete/remove) still win over this. */
.admin-container .btn-secondary {
    background-color: var(--bg-main);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    color: var(--primary-dark);
}

.admin-container .btn-secondary:hover {
    background-color: #ffffff;
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* Same fix, for the "Back" buttons in the quote wizard: .btn-secondary is
   white-on-transparent, built for dark banners, and disappears on the
   quote-card's white background. */
.quote-card .btn-secondary {
    background-color: var(--bg-main);
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    color: var(--primary-dark);
}

.quote-card .btn-secondary:hover {
    background-color: #ffffff;
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* Same fix again, for the "View Details" button on fleet cards: .btn-secondary
   is white-on-transparent, built for dark banners, and disappears on the
   fleet card's white background. */
.fleet-card .btn-secondary {
    background-color: var(--bg-main);
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    color: var(--primary-dark);
}

.fleet-card .btn-secondary:hover {
    background-color: #ffffff;
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* Vehicle recommendation, shown full-width under the Passenger Count / Service
   Category row as the customer types, instead of buried in the sidebar.
   Hidden until JS has a passenger count to react to. */
.passenger-recommendation {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 20px;
    padding: 12px 16px;
    background-color: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.25);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.4;
    box-sizing: border-box;
}

.passenger-recommendation i {
    color: var(--accent-gold);
    font-size: 1rem;
    flex-shrink: 0;
}

/* The name and the fit/rate details sit on one line when there's room, and
   wrap onto their own lines once the row gets too narrow to fit both. */
.passenger-recommendation > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
}

.passenger-recommendation strong {
    color: var(--accent-gold-hover);
    font-weight: 700;
    white-space: nowrap;
}

.passenger-recommendation span {
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .passenger-recommendation {
        font-size: 0.78rem;
        padding: 10px 12px;
    }
}

/* Image picker (fleet + service create/edit).
   Styled explicitly rather than leaning on .btn-secondary, so the upload
   control can never be hidden by that class's white-on-white defaults. */
.image-picker {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.image-picker-preview {
    max-width: 220px;
    max-height: 140px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.image-picker-actions {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 98px;
    padding: 16px 18px;
    background-color: rgba(217, 119, 6, 0.06);
    border: 2px dashed var(--accent-gold);
    border-radius: var(--radius-sm);
    color: var(--accent-gold);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.image-upload-btn i {
    font-size: 1.35rem;
}

.image-upload-btn small {
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.image-upload-btn:hover {
    background-color: rgba(217, 119, 6, 0.14);
    color: var(--primary-dark);
}

.image-remove-btn {
    align-self: flex-start;
    padding: 8px 15px;
    background-color: #9b1c1c;
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.admin-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.admin-card h3 {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--bg-main);
    padding-bottom: 10px;
}

/* Inquiries List */
.inquiries-table {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 15px;
}

.inquiries-table th, .inquiries-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.inquiries-table th:nth-child(1), .inquiries-table td:nth-child(1) { width: 22%; }
.inquiries-table th:nth-child(2), .inquiries-table td:nth-child(2) { width: 26%; }
.inquiries-table th:nth-child(3), .inquiries-table td:nth-child(3) { width: 12%; }
.inquiries-table th:nth-child(4), .inquiries-table td:nth-child(4) { width: 18%; }
.inquiries-table th:nth-child(5), .inquiries-table td:nth-child(5) { width: 11%; }
.inquiries-table th:nth-child(6), .inquiries-table td:nth-child(6) { width: 11%; }

.inquiries-table th {
    background-color: var(--bg-main);
    font-weight: 700;
}

.inquiries-table tr.unread td {
    background-color: #fffdf6;
}

.inquiries-table tr.unread td:first-child {
    box-shadow: inset 3px 0 0 var(--accent-gold);
}

.badge {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Lead lifecycle badges: New/Pending -> In Progress -> Assigned -> Completed / Cancelled */
.badge-unread {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-read {
    background-color: #e1f5fe;
    color: #0288d1;
}

.badge-assigned {
    background-color: #ede9fe;
    color: #6d28d9;
}

.badge-paid {
    background-color: #def7ec;
    color: #03543f;
}

.badge-cancelled {
    background-color: #fde8e8;
    color: #9b1c1c;
}

.inquiries-table tr.cancelled {
    opacity: 0.6;
}

.lead-status-form {
    margin: 0;
}

.lead-status-select {
    min-width: 150px;
}

.inquiries-table select {
    width: 100%;
    font-size: 0.78rem;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #fff;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.inquiries-table select:hover,
.inquiries-table select:focus {
    border-color: var(--accent-gold);
    outline: none;
}

.inquiries-table .btn-primary:hover {
    background-color: var(--accent-gold-hover);
}

/* Leads table filter toolbar. CSS Grid with auto-fit keeps every field on one
   row when there's room and reflows to 2 / 1 per row as the viewport shrinks,
   with no manual breakpoints needed for the in-between sizes. */
.leads-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: end;
    gap: 14px 16px;
    margin: 4px 0 20px;
    padding: 16px;
    background-color: var(--bg-main);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.leads-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.leads-filter-field label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}

.leads-filter-field .form-field {
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    font-size: 0.85rem;
}

.leads-filter-search {
    grid-column: span 2;
    position: relative;
}

.leads-filter-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.leads-filter-search .form-field {
    padding-left: 32px;
}

.leads-filter-clear {
    padding: 9px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.leads-filter-count {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

@media (max-width: 420px) {
    .leads-filter-search {
        grid-column: 1 / -1;
    }
}

.action-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-gold);
}

.action-link:hover {
    text-decoration: underline;
}

/* ==========================================
   FOOTER STYLING
   ========================================== */
footer {
    background-color: var(--primary-dark);
    color: #ffffff;
    padding: 60px 30px 20px;
    border-top: 5px solid var(--accent-gold);
}

.footer-grid {
    max-width: 1400px;
    margin: 0 auto 40px;
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 40px;
}

.footer-col h4 {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--accent-gold);
}

.footer-col p {
    color: var(--text-light);
    opacity: 0.8;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-light);
    opacity: 0.8;
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--accent-gold);
    opacity: 1;
    padding-left: 5px;
}

.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--text-light);
    opacity: 0.7;
}

/* Sticky Mobile Footer */
.mobile-sticky-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 99999;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
}

.sticky-btn-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    background-color: var(--accent-gold);
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}
.sticky-btn-left:hover {
    background-color: var(--accent-gold-hover);
    color: #ffffff;
}

.sticky-btn-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    background-color: var(--primary-dark);
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
}
.sticky-btn-right:hover {
    background-color: var(--primary-light);
    color: #ffffff;
}

/* ==========================================
   RESPONSIVE LAYOUTS & BREAKPOINTS
   ========================================== */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2.8rem;
    }
    
    .hero-content p {
        margin: 0 auto 30px;
    }
    
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1150px) {
    .header-container {
        padding: 15px 20px;
    }

    .nav-menu {
        display: none; /* JS toggles this back to flex when the hamburger is opened */
    }

    .hamburger {
        display: block;
    }
}

@media (max-width: 480px) {
    .logo-text {
        font-size: 1.2rem;
    }

    .header-actions {
        gap: 10px;
    }

    .nav-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .nav-btn span {
        display: none;
    }
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
}

@media (max-width: 991px) {
    .mobile-sticky-bar {
        display: flex;
    }
    body {
        padding-bottom: 60px; /* Leave room for mobile sticky bar */
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   4-STEP CALCULATOR WIZARD
   ========================================== */
.trip-type-grid {
    display: grid;
    /* 2x2 rather than a single row of 4 -- at the quote card's width a fourth
       column left no room for "Large Event" to keep its two-line label. */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.trip-type-card {
    background-color: #f9fafb;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.trip-type-card:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background-color: #f3f4f6;
}

.trip-type-card.active {
    border-color: var(--accent-gold);
    background-color: #fef3c7;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.15);
}

.trip-type-card i {
    font-size: 1.5rem;
    color: var(--accent-gold);
}

.trip-type-card span {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-dark);
}

/* Sidebar and layout within calculator step */
.quote-card-layout {
    display: flex;
    gap: 20px;
}

.quote-card-main {
    flex: 1;
    min-width: 0;
}

/* The sidebar (220px) leaves this column narrow enough that the default
   uppercase .form-group label ("Service Category", "Phone Number") wraps
   mid-word -- shrink it just enough to stay on one line instead. */
.quote-card-main .form-group label {
    font-size: 0.72rem;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quote-card-sidebar {
    width: 220px;
    background-color: transparent;
    border-left: 1.5px solid rgba(0, 0, 0, 0.08);
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.help-box {
    margin-bottom: 20px;
}

.help-box h3 {
    font-size: 0.9rem;
    color: var(--accent-gold);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.help-box p {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.9;
    line-height: 1.4;
}

.whats-this-link {
    font-size: 0.8rem;
    color: var(--accent-gold-hover);
    text-decoration: underline;
    cursor: pointer;
    margin-left: 8px;
    font-weight: 500;
}

.whats-this-link:hover {
    color: var(--accent-gold);
}

/* Itinerary Step Styling */
.itinerary-item {
    background-color: #f9fafb;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
}

.itinerary-item-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--accent-gold);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.itinerary-item-content {
    margin-left: 35px;
}

.itinerary-item-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

@media (max-width: 1150px) {
    .dropdown-menu, .mega-menu {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background-color: rgba(255, 255, 255, 0.03) !important;
        padding: 15px !important;
        margin-top: 10px !important;
        display: none;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .nav-item-dropdown.open > .dropdown-menu,
    .nav-item-dropdown.open > .mega-menu {
        display: block !important;
    }
    .dropdown-grid, .mega-menu-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .quote-card-layout {
        flex-direction: column;
    }
    .quote-card-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-left: 0;
        padding-top: 20px;
        margin-top: 15px;
    }
    .section-padding {
        padding: 50px 15px;
    }
}

@media (max-width: 480px) {
    .trip-type-grid {
        grid-template-columns: 1fr !important;
    }
    .fleet-grid {
        grid-template-columns: 1fr;
    }
}

/* Breadcrumbs Navigation Styling */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.breadcrumbs a {
    color: var(--primary-light);
    transition: var(--transition-fast);
}

.breadcrumbs a:hover {
    color: var(--accent-gold-hover);
}

.breadcrumbs .separator {
    color: rgba(0, 0, 0, 0.25);
}

.breadcrumbs .current {
    color: var(--accent-gold-hover);
}

/* Hide Leaflet map attribution for cleaner look */
.leaflet-control-attribution {
    display: none !important;
}

/* Pricing Section Hover Effects */
.pricing-card {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--accent-gold) !important;
}

/* Responsive Grid Utility Classes */
.responsive-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.responsive-grid-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}
@media (max-width: 1024px) {
    .responsive-grid-2 {
        grid-template-columns: 1fr;
    }
    .responsive-grid-1-2 {
        grid-template-columns: 1fr;
    }
}

/* Floating Desktop CTA Widget styles */
.desktop-floating-cta {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 99998;
}

@media (max-width: 991px) {
    .desktop-floating-cta {
        display: none !important;
    }
}

.floating-cta-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #ffffff !important;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.floating-cta-btn.phone-btn {
    background-color: #059669; /* Emerald green for call actions */
}
.floating-cta-btn.phone-btn:hover {
    background-color: #047857;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3);
}

.floating-cta-btn.quote-btn {
    background-color: var(--accent-gold);
}
.floating-cta-btn.quote-btn:hover {
    background-color: var(--accent-gold-hover);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.3);
}

/* Cookie Consent Banner Styling */
#cookieConsentBanner {
    position: fixed;
    bottom: 85px;
    left: 20px;
    right: 20px;
    z-index: 99999;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    padding: 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    max-width: 500px;
    flex-direction: column;
    gap: 12px;
    font-family: var(--font-body);
}

@media (min-width: 992px) {
    #cookieConsentBanner {
        bottom: 30px;
        left: 30px;
        right: auto;
        width: 420px;
    }
}



/* ==========================================================================
   Tiered mileage rates + live distance estimator (fleet pricing cards)
   ========================================================================== */

.mileage-estimator {
    border-top: 1px dashed rgba(212, 175, 55, 0.2);
    margin-top: 8px;
    padding-top: 8px;
}

/* On the vehicle detail page it opens its own box, so it needs no divider. */
.mileage-estimator:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* In the quote widget's Trip Overview it follows Trip Type/Pickup/etc, so it
   needs the divider back even though it's the first (and only) child of its
   own wrapper. */
#overviewMileageEstimator .mileage-estimator:first-child {
    border-top: 1px dashed rgba(212, 175, 55, 0.2);
    margin-top: 8px;
    padding-top: 8px;
}

.mileage-estimator-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}

.mileage-estimator-title {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.mileage-estimator-miles {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Generous vertical padding keeps the thumb an easy touch target on phones
   without making the track itself look heavy. */
.mileage-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 22px;
    padding: 8px 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.mileage-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--accent-gold) 0%,
        var(--accent-gold) var(--mileage-pct, 12%),
        rgba(0, 0, 0, 0.12) var(--mileage-pct, 12%),
        rgba(0, 0, 0, 0.12) 100%);
}

.mileage-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--accent-gold) 0%,
        var(--accent-gold) var(--mileage-pct, 12%),
        rgba(0, 0, 0, 0.12) var(--mileage-pct, 12%),
        rgba(0, 0, 0, 0.12) 100%);
}

.mileage-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background-color: var(--accent-gold);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.mileage-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--accent-gold);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.mileage-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35);
}

.mileage-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35);
}

/* The bracket the chosen distance currently falls into, and its rate. */
.mileage-estimator-band {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 4px;
}

.mileage-estimator-range {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.mileage-estimator-rate {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.9rem;
    white-space: nowrap;
}

.mileage-estimator-result {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px dashed rgba(212, 175, 55, 0.2);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.mileage-estimator-total {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary-dark);
    white-space: nowrap;
    text-transform: none;
}

/* Minimum booking price + mileage — the headline number on the card. */
.mileage-estimator-grand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(212, 175, 55, 0.35);
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.mileage-estimator-grand-value {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent-gold);
    white-space: nowrap;
    text-transform: none;
}

.mileage-estimator-note {
    margin: 4px 0 0;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-muted);
}

@media (max-width: 400px) {
    .mileage-estimator-band,
    .mileage-estimator-result,
    .mileage-estimator-grand {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Respect users who have asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
    .mileage-estimator-grand-value {
        transition: color 0.2s ease;
    }
}

/* ==========================================================================
   Tiered hourly rates + live hours estimator (fleet pricing cards)
   Mirrors the mileage estimator block above rule-for-rule -- same card
   design, same interaction, priced by duration instead of distance. Kept as
   a separate named block (rather than sharing selectors with .mileage-*)
   because the two independently show/hide per trip type and a shared class
   would make that toggle harder to follow at the call site.
   ========================================================================== */

.hour-estimator {
    border-top: 1px dashed rgba(212, 175, 55, 0.2);
    margin-top: 8px;
    padding-top: 8px;
}

.hour-estimator:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

#overviewHourEstimator .hour-estimator:first-child {
    border-top: 1px dashed rgba(212, 175, 55, 0.2);
    margin-top: 8px;
    padding-top: 8px;
}

.hour-estimator-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}

.hour-estimator-title {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.hour-estimator-hours {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.85rem;
    white-space: nowrap;
}

.hour-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 22px;
    padding: 8px 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.hour-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--accent-gold) 0%,
        var(--accent-gold) var(--hour-pct, 12%),
        rgba(0, 0, 0, 0.12) var(--hour-pct, 12%),
        rgba(0, 0, 0, 0.12) 100%);
}

.hour-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--accent-gold) 0%,
        var(--accent-gold) var(--hour-pct, 12%),
        rgba(0, 0, 0, 0.12) var(--hour-pct, 12%),
        rgba(0, 0, 0, 0.12) 100%);
}

.hour-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background-color: var(--accent-gold);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.hour-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--accent-gold);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.hour-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35);
}

.hour-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35);
}

/* The bracket the chosen duration currently falls into, and its rate. */
.hour-estimator-band {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 4px;
}

.hour-estimator-range {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.hour-estimator-rate {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.9rem;
    white-space: nowrap;
}

.hour-estimator-result {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px dashed rgba(212, 175, 55, 0.2);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.hour-estimator-total {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary-dark);
    white-space: nowrap;
    text-transform: none;
}

/* Minimum booking price, or the tiered hourly rate — the headline number. */
.hour-estimator-grand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(212, 175, 55, 0.35);
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.hour-estimator-grand-value {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent-gold);
    white-space: nowrap;
    text-transform: none;
}

.hour-estimator-note {
    margin: 4px 0 0;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-muted);
}

@media (max-width: 400px) {
    .hour-estimator-band,
    .hour-estimator-result,
    .hour-estimator-grand {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hour-estimator-grand-value {
        transition: color 0.2s ease;
    }
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-accordion {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.faq-item + .faq-item {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* The open panel gets a warm tint drawn from the brand gold. */
.faq-item.is-open {
    background-color: rgba(217, 119, 6, 0.05);
}

.faq-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    margin: 0;
    padding: 20px 24px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--accent-gold);
}

.faq-question:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: -3px;
}

.faq-item.is-open .faq-question {
    font-weight: 700;
    color: var(--primary-dark);
}

.faq-icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: transform 0.28s ease, color 0.2s ease;
}

.faq-item.is-open .faq-icon {
    transform: rotate(180deg);
    color: var(--accent-gold);
}

/* Height is set inline by the script so the transition has a real target. */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer-inner {
    padding: 0 24px 22px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

@media (max-width: 600px) {
    .faq-question {
        padding: 16px 18px;
        font-size: 0.95rem;
        gap: 12px;
    }
    .faq-answer-inner {
        padding: 0 18px 18px;
        font-size: 0.9rem;
    }
}

/* Without JS every answer stays readable rather than permanently collapsed. */
.no-js .faq-answer {
    max-height: none;
}

/* ==========================================
   ADMIN: EMAIL TEMPLATE PREVIEW MODAL
   Opened from the Email button on any lead row. The message itself renders in a
   sandboxed iframe, so nothing below styles the email - these rules only dress
   the frame around it.
   ========================================== */
.email-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.email-preview-modal[hidden] {
    display: none;
}

.email-preview-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.6);
}

.email-preview-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.email-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.email-preview-close {
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
}

.email-preview-close:hover {
    color: var(--primary-dark);
}

.email-preview-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 22px 0;
}

.email-preview-tabs button {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    background-color: #f3f4f6;
    border: 1px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
}

.email-preview-tabs button.is-active {
    color: var(--primary-dark);
    background-color: var(--bg-card);
    border-color: rgba(0, 0, 0, 0.08);
    border-bottom-color: transparent;
}

.email-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 22px;
    font-size: 0.85rem;
    color: var(--text-main);
    background-color: #f9fafb;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    /* Subjects and addresses can be long; wrapping keeps them from stretching
       the panel past its max-width. */
    overflow-wrap: anywhere;
}

.email-preview-meta-label {
    display: inline-block;
    min-width: 58px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.email-preview-warning {
    margin-top: 4px;
    padding: 8px 10px;
    font-size: 0.8rem;
    color: #92400e;
    background-color: var(--accent-gold-light);
    border-radius: var(--radius-sm);
}

.email-preview-body {
    flex: 1;
    min-height: 0;
    background-color: #f3f4f6;
}

.email-preview-body iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
}

.email-preview-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* The footer sits on white, and the global .btn-secondary is white-on-transparent
   for use over dark sections -- it disappears here. These are its light-surface
   equivalent. */
.email-preview-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    background-color: #f3f4f6;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.email-preview-action:hover {
    background-color: #e5e7eb;
    color: var(--primary-dark);
}

.email-preview-action.is-primary {
    color: #ffffff;
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
}

.email-preview-action.is-primary:hover {
    background-color: var(--accent-gold-hover);
    border-color: var(--accent-gold-hover);
    color: #ffffff;
}

@media (max-width: 768px) {
    .email-preview-modal {
        padding: 0;
    }

    .email-preview-panel {
        max-width: none;
        height: 100%;
        border-radius: 0;
    }
}

/* ==========================================
   ADMIN: SMTP TEST PANEL
   ========================================== */
.smtp-test-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.smtp-test-note {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.smtp-test-result {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--text-muted);
    background-color: #f9fafb;
}

.smtp-test-result[hidden] {
    display: none;
}

.smtp-test-result.is-ok {
    border-left-color: #059669;
    background-color: #ecfdf5;
}

.smtp-test-result.is-fail {
    border-left-color: #dc2626;
    background-color: #fef2f2;
}

.smtp-test-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.smtp-test-detail {
    margin: 8px 0 0;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-main);
}

/* The mail server's raw reply. Wrapped rather than scrolled so the whole
   response is visible without interaction - it is the most useful line on the
   page when something is wrong. */
.smtp-test-raw {
    margin: 10px 0 0;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-main);
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}