/* assets/css/battery-swapping.css */

/* --- Base Variables & Shared Styles --- */
:root {
    --bs-primary: #0d6efd; /* Original primary color (Blue) */
    --bs-success: #198754; /* Bootstrap Success Green */
    --bs-success-darker: #146c43; /* Darker Green for hover */
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-secondary: #6c757d;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-info: #0dcaf0;
    --bs-white: #ffffff;
    --bs-body-color: #212529;
    --bs-body-bg: #eef0f2; /* Slightly off-white background */
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
    --bs-primary-rgb: 13,110,253;
    --bs-success-rgb: 25,135,84;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-secondary-rgb: 108,117,125;
    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --bs-box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    --bs-font-sans-serif: 'Inter', sans-serif;
    --bs-heading-font-family: 'Montserrat', sans-serif;
    --hero-gradient-start: #28a745; /* Medium Green */
    --hero-gradient-end: #198754; /* Darker Green */
}

body {
    background-color: var(--bs-body-bg);
    font-family: var(--bs-font-sans-serif);
    color: var(--bs-body-color);
}
main { padding-top: 0; padding-bottom: 0; } /* Reset padding if needed */

/* Add these variables or modify existing ones in :root */
:root {
    --hero-bg-image: url('../images/hero-background.jpg'); /* CHANGE THIS PATH */
    --hero-bg-overlay: rgba(5, 20, 40, 0.7); /* Dark Blueish Overlay */
    --bs-primary: #0d6efd;
    --bs-warning: #ffc107;
    --bs-dark: #212529;
    --bs-white: #ffffff;
    --bs-light: #f8f9fa;
     --bs-heading-font-family: 'Montserrat', sans-serif;
     --bs-font-sans-serif: 'Inter', sans-serif;
     /* ... other vars ... */
}

.hero-swapping {
    padding: 6rem 0; /* More padding for image background */
    background-color: #0a192f; /* Dark fallback color */
    background-image: linear-gradient(var(--hero-bg-overlay), var(--hero-bg-overlay)), var(--hero-bg-image);
    background-size: cover;
    background-position: center center;
    color: var(--bs-light); /* Light text default */
    position: relative; overflow: hidden; margin-bottom: 0;
}

.hero-swapping .container { position: relative; z-index: 1; }

.hero-swapping h1 {
    color: var(--bs-white);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* Stronger shadow */
    font-family: var(--bs-heading-font-family);
    margin-bottom: 1rem;
}
.hero-swapping h1 .current-city-display {
    color: var(--bs-warning); /* Yellow highlight */
}

.hero-swapping .lead {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    font-size: 1.15rem; /* Slightly larger */
    line-height: 1.7;
    font-family: var(--bs-font-sans-serif);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Badge: Primary Blue background, white text */
.hero-swapping .badge.bg-primary {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    font-weight: 600; padding: 0.5em 0.9em; border: none;
    letter-spacing: 0.5px; font-size: 0.8rem; margin-bottom: 1rem;
    box-shadow: var(--bs-box-shadow-sm);
}

/* --- Stat Label Color Fix & Readability --- */
#hero-stats .stat-item .stat-label {
    /* Force yellow color, overriding .text-muted */
    /* WARNING: Contrast may still be low depending on background */
    color: var(--bs-warning) !important;
    font-size: 0.8rem;
    font-weight: 500; /* Keep slightly bolder */
}

/* Keep values white and clear */
#hero-stats .stat-item .stat-value {
    color: var(--bs-white);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
     /* Ensure no other color class overrides */
    &.text-success, &.text-primary {
         color: var(--bs-white) !important;
    }
}
}

/* Buttons: Yellow primary, Light outline secondary */
.hero-swapping .btn { font-weight: 600; padding: 0.7rem 1.5rem; border-radius: 50rem; transition: all 0.2s ease-in-out; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.75px; box-shadow: 0 3px 8px rgba(0,0,0,0.2); }
.hero-swapping .btn-primary { background-color: var(--bs-warning); border-color: var(--bs-warning); color: var(--bs-dark); }
.hero-swapping .btn-primary:hover, .hero-swapping .btn-primary:focus { background-color: #ffca2c; border-color: #ffca2c; color: var(--bs-dark); box-shadow: 0 4px 12px rgba(var(--bs-warning-rgb), 0.4); }
.hero-swapping .btn-outline-dark { color: var(--bs-white); border-color: rgba(255, 255, 255, 0.7); background-color: transparent; }
.hero-swapping .btn-outline-dark:hover, .hero-swapping .btn-outline-dark:focus { color: #0a192f; background-color: var(--bs-white); border-color: var(--bs-white); box-shadow: 0 4px 10px rgba(255, 255, 255, 0.15); }
/* Ensure Route button matches primary */
.hero-swapping .btn[data-bs-target="#routeFinderOffcanvas"] { background-color: var(--bs-warning); border-color: var(--bs-warning); color: var(--bs-dark); }
.hero-swapping .btn[data-bs-target="#routeFinderOffcanvas"]:hover, .hero-swapping .btn[data-bs-target="#routeFinderOffcanvas"]:focus { background-color: #ffca2c; border-color: #ffca2c; color: var(--bs-dark); box-shadow: 0 4px 12px rgba(var(--bs-warning-rgb), 0.4); }
/* --- Finder Section & Below (Keep existing functional styles) --- */

.finder-section { padding-top: 2.5rem; padding-bottom: 3rem; }

/* Map Container - Placeholder style */
#map-container {
   width: 100%;
   background-color: #e9ecef;
   flex-grow: 1;
   min-height: 350px; /* Minimum height */
   display: flex; /* Needed for placeholder centering */
   align-items: center;
   justify-content: center;
}
#map-container .leaflet-container { border-radius: inherit; } /* Inherit rounding */

#map-placeholder { color: #6c757d; text-align: center; }

/* Map/Results Row Height Alignment */
.map-results-row .card { height: 100%; display: flex; flex-direction: column; }
.map-results-row .card-body { flex-grow: 1; display: flex; flex-direction: column; padding: 0; }
.map-results-row .col-lg-7 .card-body { overflow: hidden; } /* Map card body */
.map-results-row .col-lg-5 .card-body { padding: 0; } /* Results card body */
.map-results-row #results-list-container { max-height: 600px; overflow-y: auto; flex-grow: 1; border-radius: var(--bs-card-inner-border-radius); }

/* Filter Card Styles (Minor tweaks if needed) */
#filter-card .form-label { font-size: 0.75rem; margin-bottom: 0.3rem; }
#filter-card .accordion-button::after { /* Slightly smaller accordion arrow */ font-size: 0.9rem; }
#filter-card .btn-group .btn { padding: 0.3rem 0.5rem; font-size: 0.8rem; } /* Smaller vehicle buttons */
#filter-actions { margin-top: auto; padding-top: 1rem; } /* Push actions down */

/* Quick Nav Card Styles */
#quick-nav-card .quick-action-btn { font-size: 0.9rem; padding: 0.6rem 1rem; text-align: left !important; }
#quick-nav-card .explore-services .btn { font-size: 0.8rem; }
#quick-nav-card .explore-services .btn i { font-size: 1.1rem; }

/* Results List Styles */
#results-list-container { border: 1px solid var(--bs-border-color); background-color: var(--bs-white); box-shadow: var(--bs-box-shadow-sm); }
/* Loading/No Results */
.loading-indicator, .no-results { text-align: center; padding: 2rem; color: var(--bs-secondary); }
#results-list-container.loading::after { /* Basic overlay */ content: ''; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.7); z-index: 5; display: block; border-radius: inherit; }
.list-loader-spinner { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 6; display: none; color: var(--bs-primary); }
#results-list-container.loading .list-loader-spinner { display: block; }

.result-item { border-bottom: 1px solid var(--bs-border-color-translucent) !important; transition: background-color 0.15s ease-in-out; }
.result-item:last-child { border-bottom: none !important; }
.result-item:hover { background-color: var(--bs-light); }
.result-item.active { background-color: rgba(var(--bs-primary-rgb), 0.1); border-left: 3px solid var(--bs-primary) !important; }
.result-item-icon i { color: var(--bs-primary); font-size: 1.1rem; }
.result-item-info h6 { font-weight: 600; margin-bottom: 0.2rem; }
.result-item-info p { margin-bottom: 0.25rem; line-height: 1.4; }
.availability-info { margin-bottom: 0.3rem; }
.availability-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;}
.result-distance { font-weight: 500; }
.result-item-tags { display: flex; gap: 0.3rem; margin-top: 0.4rem; }
.result-item-tags .badge { font-size: 0.65rem; font-weight: 500; padding: 0.2em 0.5em;}

/* Details Card Styles */
#location-details-card { background-color: var(--bs-white); border: 1px solid var(--bs-border-color); border-radius: 0.6rem; display: none; box-shadow: var(--bs-box-shadow-sm); }
/* Sticky behavior only on large screens where layout is side-by-side */
@media (min-width: 992px) {
     #location-details-card { position: sticky; top: 80px; /* Adjust top offset based on navbar height */ max-height: calc(100vh - 100px); /* Limit height to viewport */ overflow-y: auto; }
}
#location-details-card .card-header { background-color: var(--bs-white); border-bottom: 1px solid var(--bs-border-color); }
#location-details-card .card-body { padding: 1rem 1.5rem;} /* Consistent padding */
#location-details-card h6.section-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--bs-secondary); margin-bottom: 0.75rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--bs-border-color-translucent);}
#location-details-card dl { font-size: 0.9rem; }
#location-details-card dt { font-weight: 500; padding-right: 0.5em; }
#location-details-card dd { margin-bottom: 0.4rem; color: var(--bs-body-color); }
/* Detail section content styling */
.availability-content .d-flex { padding: 0.3rem 0; font-size: 0.9rem;}
.vehicles-content .badge { font-size: 0.8rem; padding: 0.3em 0.6em;}
.pricing-content p { margin-bottom: 0.3rem !important; }
.amenities-content .badge { font-size: 0.8rem; padding: 0.3em 0.6em;}
.payment-content .badge { font-size: 0.8rem; padding: 0.3em 0.6em;}
.details-actions .btn { font-size: 0.9rem; }

/* Swap Now Section */
#swap-now-section .card-header { background-color: var(--bs-success); } /* Match theme */

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .map-results-row .card { height: auto; /* Reset height for stacking */ }
    .map-results-row #results-list-container { max-height: 45vh; } /* Adjust height for stacked view */
    #map-container { height: 40vh; min-height: 300px; } /* Adjust stacked map height */
    #location-details-card { margin-top: 1.5rem; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25); }