/* Header */
.header-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    color: var(--color-text-body);
    transition: colorVar(--transition-fast);
    padding: 0.5rem 1rem;
}

.nav-link:hover {
    color: var(--color-primary);
}

.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    #mobile-menu-btn {
        display: inline-block !important;
    }

    .header-sticky {
        flex-wrap: wrap;
        /* Allow dropdown to break to new line */
        height: auto;
        /* Expand height when menu opens */
    }

    /* Center CCA logo on mobile */
    .cca-logo-wrapper {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Ensure navbar centers but CCA stays right on desktop */
.cca-logo-wrapper {
    display: flex;
    align-items: center;
}

#mobile-menu-dropdown {
    width: 100%;
}

.nav-link-mobile {
    display: block;
    padding: 15px 20px;
    font-weight: 600;
    color: var(--color-secondary);
    transition: background 0.2s;
}

.nav-link-mobile:hover {
    background: #f8fafc;
    color: var(--color-primary);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary-light);
}

.btn-pill {
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
}

/* Cards */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--transition-fast);
}

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

/* Search Card */
.search-card {
    background: var(--color-surface);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin-top: -3rem;
    /* Overlap hero */
    position: relative;
    z-index: 10;
}

.search-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: end;
}

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

/* Inputs */
.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: #f9fafb;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    background: white;
}

/* Vehicle Grid Card */
.vehicle-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.vehicle-img-wrapper {
    position: relative;
    height: 200px;
}

.vehicle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.year-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: bold;
}

.vehicle-info {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.vehicle-info h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-secondary);
}

.vehicle-meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.vehicle-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-top: auto;
}

/* Reviews */
.reviews-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    /* Scrollbar space */
    scroll-snap-type: x mandatory;
}

.review-card {
    min-width: 300px;
    background: white;
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    scroll-snap-align: center;
}

.stars {
    color: #FBBF24;
    margin-bottom: 10px;
}

/* Accordion (Details Page) */
.accordion-item {
    border-bottom: 1px solid var(--border-color);
}

.accordion-header {
    width: 100%;
    text-align: left;
    padding: 1rem 0;
    background: none;
    border: none;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

/* Placeholders */
.placeholder-block {
    background: #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Floating WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    font-size: 30px;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Admin Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.admin-table th,
.admin-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #eee;
}

.status-approved {
    background: #d1fae5;
    color: #065f46;
}

/* Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

@media(max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer layout */
footer {
    background: var(--color-secondary);
    color: white;
    padding: 60px 0 20px;
}

/* Benefits Section */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.benefit-icon {
    width: 80px;
    height: 80px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: var(--transition-fast);
}

.benefit-item:hover .benefit-icon {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

/* Nosotros Section Grid */
.nosotros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    min-height: 400px;
    align-items: stretch;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* NOSOTROS BANNER 3-PANEL SYSTEM */
.nosotros-container {
    display: flex;
    width: 100%;
    margin-top: 40px;
    border-radius: 20px;
    overflow: hidden;
    /* Rounded outer corners for the whole banner */
    position: relative;
    background: transparent;
}

.nb-item {
    position: relative;
    background-size: cover;
    background-position: center;
    width: 100%;
}

.nb-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* --- MOBILE LAYOUT (< 992px) --- */
@media (max-width: 991px) {
    .nosotros-container {
        flex-direction: column;
        height: auto;
    }

    .nb-item.left {
        height: 220px;
        z-index: 1;
        /* Diagonal cut: Slants UP from left to right ( / ) */
        /* Points: TL(0,0), TR(100,0), BR(100, 100-30), BL(0, 100) */
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);
        margin-bottom: -30px;
        /* Overlap with center */
    }

    .nb-item.center {
        height: auto;
        min-height: 280px;
        background: var(--color-primary);
        /* Celeste */
        color: white;
        z-index: 10;
        padding: 50px 20px;
        /* Top edge matches Top Image bottom edge ( / ) */
        /* Bottom edge matches Bottom Image top edge ( / ) */
        clip-path: polygon(0 30px, 100% 0, 100% calc(100% - 30px), 0 100%);
    }

    .nb-item.right {
        height: 220px;
        z-index: 1;
        margin-top: -30px;
        /* Overlap with center */
        /* Top edge matches Center bottom edge ( / ) */
        clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
    }

    .nb-content {
        transform: scale(1);
    }
}

/* --- DESKTOP LAYOUT (>= 992px) --- */
@media (min-width: 992px) {
    .nosotros-container {
        flex-direction: row;
        height: 320px;
        /* Reference height */
        align-items: stretch;
    }

    .nb-item.left {
        flex: 1;
        z-index: 1;
        /* Ensure it covers the area */
        background-repeat: no-repeat;
    }

    .nb-item.center {
        width: 38%;
        /* Wide enough to overlap */
        margin: 0 -4%;
        /* Negative margin to pull sides in and overlap images */
        background: var(--color-primary);
        color: white;
        z-index: 10;

        /* The Parallelogram Shape ( \ ) */
        transform: skewX(-15deg);

        /* The thin white separators are borders on the skewed element */
        border-left: 1px solid rgba(255, 255, 255, 0.6);
        border-right: 1px solid rgba(255, 255, 255, 0.6);

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nb-item.right {
        flex: 1;
        z-index: 1;
        background-repeat: no-repeat;
    }

    .nb-content {
        /* Un-skew the content so text is straight */
        transform: skewX(15deg);
        /* Ensure everything is centered */
        margin: 0;
    }
}

/* New Search Layout */
.search-form-flat {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 1.5fr 1fr;
    gap: 20px;
    align-items: flex-start;
}

@media(max-width: 900px) {
    .search-form-flat {
        grid-template-columns: 1fr;
    }
}

.search-form-flat .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
}

/* Dual Range Slider Styles */
.range-slider {
    position: relative;
    width: 100%;
    height: 5px;
    top: 5px;
}

.range-slider input[type=range] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    z-index: 2;
    height: 10px;
    top: -2px;
    opacity: 0;
}

/* Chrome thumb */
.range-slider input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 18px;
    height: 18px;
    -webkit-appearance: none;
    background: white;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;
    /* center on track */
}

/* Firefox thumb */
.range-slider input[type=range]::-moz-range-thumb {
    pointer-events: all;
    width: 18px;
    height: 18px;
    border: none;
    background: white;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
}

/* Visual Track */
.slider-track {
    width: 100%;
    height: 5px;
    background: #e2e8f0;
    position: absolute;
    top: 5px;
    /* Visual alignment */
    border-radius: 5px;
    z-index: 0;
}

/* Active Range Bar */
.slider-range-bar {
    height: 5px;
    background: var(--color-primary);
    position: absolute;
    top: 5px;
    z-index: 1;
    border-radius: 5px;
}

/* Handles visible pseudo-elements if we wanted purely CSS, 
   but we use the range inputs thumb for interaction. 
   We need to ensure inputs interact properly. 
   We will utilize JS to style thumbs or leave browser default styled above. 
   To make custom thumbs visible, we need to remove opacity 0 
   and style the track invisible on the input itself. */

.range-slider input[type=range] {
    opacity: 1;
    background: transparent;
    /* Transparent track */
}

.range-slider input[type=range]::-webkit-slider-runnable-track {
    background: transparent;
    /* Hide default track */
}

/* --- VEHICLE DETAIL PAGE STYLES --- */

/* Main Grid Layout */
.vehicle-detail-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    margin-top: 20px;
}

@media (max-width: 900px) {
    .vehicle-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Gallery */
.gallery-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gallery-main {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
}

.gallery-main img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.gallery-thumb {
    width: 80px;
    height: 60px;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 2px solid transparent;
    object-fit: cover;
    transition: all 0.2s;
}

.gallery-thumb:hover,
.gallery-thumb.active {
    border-color: var(--color-primary);
    opacity: 0.8;
}

/* Info Side */
.vehicle-title-block h1 {
    font-size: 2rem;
    color: var(--color-secondary);
    margin-bottom: 5px;
}

.vehicle-subtitle {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin-bottom: 20px;
}

/* Price Card */
.price-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: var(--shadow-sm);
}

.price-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 5px;
}

.price-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-secondary);
    margin-bottom: 15px;
}

.btn-whatsapp-full {
    background: #0ea5e9;
    /* Sky blue as per screenshot */
    color: white;
    width: 100%;
    text-align: center;
    padding: 12px;
    border-radius: var(--radius-md);
    font-weight: 600;
    display: block;
    text-decoration: none;
    transition: background 0.3s;
}

.btn-whatsapp-full:hover {
    background: #0284c7;
}

/* Specs Grid */
.specs-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 25px;
}

.specs-title {
    padding: 15px 20px;
    background: #f8fafc;
    font-weight: 700;
    color: var(--color-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.specs-grid-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    gap: 20px;
}

.spec-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.spec-icon {
    color: #3b82f6;
    /* Blue icon */
    font-size: 1.2rem;
    margin-top: 3px;
}

.spec-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.spec-value {
    font-weight: 600;
    color: var(--color-secondary);
    font-size: 0.95rem;
}

/* Accordions (Clean) */
.detail-accordion {
    border-bottom: 1px solid var(--border-color);
}

.accordion-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 15px 0;
    text-align: left;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-secondary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-content {
    display: none;
    padding-bottom: 20px;
    color: var(--color-text-body);
    font-size: 0.95rem;
    line-height: 1.6;
}

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

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

.accordion-toggle.active .icon-chevron {
    transform: rotate(180deg);
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.feature-list li::before {
    content: "•";
    color: var(--color-primary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* --- REVIEWS --- */
.review-card {
    background: #f8fafc;
    padding: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.review-stars {
    color: #fbbf24;
    /* Amber 400 */
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.review-text {
    font-style: italic;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95rem;
    flex-grow: 1;
    /* Pushes author to bottom */
}

.review-author {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.main-footer {
    background: #0f172a;
    /* Dark Navy as per reference (Slate 900) */
    color: white;
    padding: 60px 0 30px;
    font-size: 0.9rem;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.footer-col-left {
    flex: 1;
}

.footer-col-right {
    flex: 1;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.footer-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: white;
}

.footer-text {
    color: #94a3b8;
    /* Slate 400 */
    margin: 0;
}

.footer-compliance {
    color: #cbd5e1;
    /* Slate 300 */
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 400px;
    /* Limit width for readability */
    margin: 0;
}

.footer-compliance a,
.footer-link-subtle {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-compliance a:hover,
.footer-link-subtle:hover {
    color: white;
    text-decoration: underline;
}

.footer-link-subtle {
    font-size: 0.8rem;
    color: #64748b;
    /* Darker slate for less emphasis */
}

/* Horizontal Divider */
.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 30px 0;
    width: 100%;
}

/* Bottom Copyright */
.footer-bottom {
    text-align: center;
    color: #475569;
    /* Very muted text */
    font-size: 0.8rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .footer-grid {
        flex-direction: column;
        align-items: center;
        /* Center everything on mobile */
        text-align: center;
        gap: 30px;
    }

    .footer-col-right {
        align-items: center;
        text-align: center;
    }
}