:root {
    --primary-orange: #ff6b00;
    --dark-bg: #121212;
    --card-bg: #1e1e1e;
    --text-light: #f3f4f6;
    --text-muted: #9ca3af;
}

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-light);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: var(--primary-orange); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #e65c00; }

/* Range Slider Customization */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: var(--primary-orange);
    cursor: pointer;
    margin-top: -9px;
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
    touch-action: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #374151;
    border-radius: 2px;
}
input[type=range]:focus { outline: none; }

/* Loader Skeleton */
.skeleton {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* GSAP Helper Classes */
.gsap-reveal { opacity: 0; transform: translateY(30px); }

.hover-underline-animation {
    display: inline-block;
    position: relative;
    color: var(--primary-orange);
}
.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-orange);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Map Container */
.map-container { min-height: 280px; }
.map-container iframe {
    filter: grayscale(100%) invert(92%) contrast(83%);
    border-radius: 0.5rem;
    width: 100%;
    height: 100%;
    min-height: 280px;
    display: block;
}

/* Shimmer Animation */
@keyframes shimmer { 100% { transform: translateX(100%); } }
.group-hover\:animate-shimmer:hover { animation: shimmer 1.5s infinite; }

/* Swiper Pagination Removed */
.mySwiper {
    overflow: visible;
}
.mySwiper .swiper-wrapper {
    align-items: stretch;
}
.mySwiper .swiper-slide {
    height: auto;
    display: flex;
}
.mySwiper .swiper-slide .car-card {
    width: 100%;
}

.google-reviews-swiper {
    overflow: visible;
}
.google-reviews-swiper .swiper-wrapper {
    align-items: stretch;
}
.google-reviews-swiper .swiper-slide {
    height: auto;
    display: flex;
}
.google-review-card {
    width: 100%;
}


/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — global
═══════════════════════════════════════════════════ */

/* Previne zoom automático em inputs no iOS */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea, select {
    font-size: 16px !important;
}

/* Tap targets mínimos 44px */
button, [role="button"] { min-height: 44px; cursor: pointer; }

/* Imagens sempre responsivas */
img { max-width: 100%; height: auto; display: block; }

/* Overflow fix */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* Safe area insets (iPhone notch / Dynamic Island) */
@supports (padding: max(0px)) {
    header {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    footer { padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 2rem)); }
    #mobile-menu { 
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* Estoque — filtros colapsáveis em mobile */
#filter-panel {
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}
#filter-panel.collapsed {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ─── MOBILE (< 768px) ─── */
@media (max-width: 767px) {

    /* Hero Search */
    #search-form > div.grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    #search-form .flex.justify-end {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.75rem;
    }
    #search-form .flex.justify-end button,
    #search-form .flex.justify-end > * {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Ajuste de Texto para Mobile Pequeno */
    @media (max-width: 375px) {
        h1#hero-title {
            font-size: 1.75rem !important;
        }
        #hero-subtitle {
            font-size: 1rem !important;
        }
    }

    /* Veiculo — ordem: formulário acima da galeria */
    .veiculo-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    .veiculo-sidebar {
        order: -1;
    }
    .veiculo-sidebar .sticky {
        position: static !important;
    }

    /* Galeria thumbnails 4 colunas em mobile */
    .veiculo-thumbs {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Cards estoque 1 coluna */
    .cars-list-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contact section — empilha mapa abaixo */
    .contact-grid {
        flex-direction: column !important;
    }

    /* Seção quem somos */
    .about-grid {
        flex-direction: column !important;
        gap: 2rem;
    }

    /* Ficha técnica 2 colunas (já é mobile-friendly) */
    .tech-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Texto hero reduzido */
    #hero-title  { font-size: clamp(1.75rem, 7vw, 3rem) !important; }
    #hero-subtitle { font-size: clamp(0.95rem, 3.5vw, 1.25rem) !important; }
}

/* ─── TABLET (768px – 1023px) ─── */
@media (min-width: 768px) and (max-width: 1023px) {
    #search-form > div.grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .cars-list-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .veiculo-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    .veiculo-sidebar {
        order: -1;
    }
    .veiculo-sidebar .sticky { position: static !important; }
}