/**
 * ========================================================================
 * SEARCH HERO BANNER - Fusion RECHERCHE RAPIDE + RECHERCHE PAR VÉHICULE
 * ========================================================================
 */

/* ── Conteneur global : image voiture + dégradé sombre ── */
.search-sections-container {
    position: relative !important;
    border-radius: 14px !important;
    overflow: visible !important; /* était hidden : causait la troncature du dropdown */
    margin-bottom: 2rem !important;
    padding: 1.4rem 1.6rem !important;

    /* Couleur de fond affichée IMMÉDIATEMENT avant que l'image se charge */
    background-color: #0a1228 !important;

    /* L'image est définie séparément pour permettre la transition */
    background-image:
        linear-gradient(
            135deg,
            rgba(10, 18, 40, 0.85) 0%,
            rgba(0, 40, 80, 0.75) 45%,
            rgba(10, 18, 40, 0.65) 100%
        ),
        url('/assets/images/voiture.avif') !important;

    background-size: cover !important;
    background-position: center 55% !important;
    background-repeat: no-repeat !important;

    /* Fondu doux à l'apparition de l'image — remplace le sursaut brutal */
    animation: heroBgFadeIn 0.5s ease-in-out both !important;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Animation fondu depuis la couleur unie vers l'image */
@keyframes heroBgFadeIn {
    from { opacity: 0.6; }
    to   { opacity: 1;   }
}

/* ── Grille desktop ── */
@media (min-width: 769px) {
    .search-sections-container {
        display: grid !important;
        grid-template-columns: 1fr 2fr !important;
        gap: 2.5rem !important;
        align-items: stretch !important;
    }
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .search-sections-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
        padding: 1rem !important;
    }
}

/* ── Blocs intérieurs : glassmorphism ── */
.search-sections-container .filters,
.search-sections-container .vehicle-search-wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    padding: 1.1rem 1.2rem !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
}

/* ── Titres ── */
.search-sections-container .filters h3,
.search-sections-container .vehicle-search-title {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    margin-bottom: 0.3rem !important;
}

/* Sous-titre RECHERCHE RAPIDE */
.search-sections-container .filters > p,
.search-sections-container .filters > small {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.8rem !important;
    display: block !important;
}

/* ════════════════════════════════════════════════════
   CHAMPS : style blanc arrondi uniforme
   ════════════════════════════════════════════════════ */

/* Select catégorie (RECHERCHE RAPIDE) */
.search-sections-container .filter-group select,
.search-sections-container #categoryFilter {
    width: 100% !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(255,255,255,0.5) !important;
    border-radius: 8px !important;
    padding: 0.6rem 2.2rem 0.6rem 0.9rem !important;
    font-size: 0.88rem !important;
    color: #1a1a2e !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23555" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 11px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
    margin-bottom: 0.5rem !important;
}

/* Champ texte de recherche + wrapper */
.search-sections-container .search-autocomplete-wrapper {
    position: relative !important;
    width: 100% !important;
}

.search-sections-container #searchInput {
    width: 100% !important;
    background: transparent !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 2px solid rgba(255,255,255,0.75) !important;
    border-radius: 50px !important;
    padding: 0.6rem 3rem 0.6rem 2.4rem !important;
    font-size: 0.88rem !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.25s !important;
}

.search-sections-container #searchInput::placeholder {
    color: rgba(255,255,255,0.55) !important;
}

/* Icône loupe à gauche du champ texte */
.search-sections-container .search-autocomplete-wrapper .search-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(255,255,255,0.75) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Icône loupe réelle (pseudo-élément ::after défini dans search-icons.css)
   recolorée en blanc pour matcher le rendu verre de la barre héro (index.php) */
.search-sections-container .search-autocomplete-wrapper::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>') !important;
    opacity: 0.85 !important;
}

/* Bouton orange loupe à droite du champ texte */
.search-sections-container .search-autocomplete-wrapper .search-clear-btn,
.search-sections-container #searchClearBtn {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    background: #F7B801 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════════════════
   CHAMPS VÉHICULE (selects + inputs TecDoc) — taille réduite
   ════════════════════════════════════════════════════ */

.search-sections-container .vehicle-select,
.search-sections-container #tdMake,
.search-sections-container #tdModel,
.search-sections-container #tdVehicle,
.search-sections-container #tdRefInput,
.search-sections-container #tdVinInput {
    width: 100% !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(255,255,255,0.5) !important;
    border-radius: 6px !important;
    padding: 0.3rem 1.8rem 0.3rem 0.6rem !important;
    font-size: 0.72rem !important;
    color: #1a1a2e !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
    height: 30px !important;
    line-height: 1.2 !important;
}

/* Flèche dropdown sur les selects Marque / Modèle / Motorisation */
.search-sections-container #tdMake,
.search-sections-container #tdModel,
.search-sections-container #tdVehicle {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23555" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    padding-right: 2rem !important;
}

/* Labels au-dessus des champs véhicule */
.search-sections-container .vehicle-select-label {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 2px !important;
    display: block !important;
}

/* Grille des champs véhicule plus compacte */
.search-sections-container .vehicle-search-grid {
    gap: 0.4rem !important;
}

.search-sections-container .vehicle-select-wrapper {
    margin-bottom: 0 !important;
}

/* Focus sur tous les champs */
.search-sections-container .filter-group select:focus,
.search-sections-container .vehicle-select:focus,
.search-sections-container #tdRefInput:focus,
.search-sections-container #tdVinInput:focus {
    background: #ffffff !important;
    border-color: #F7B801 !important;
    box-shadow: 0 0 0 3px rgba(247,184,1,0.35) !important;
    outline: none !important;
}

/* Focus du champ de recherche : même rendu que la barre héro d'index.php
   (bordure blanche pleine, toujours transparent, pas de halo doré) */
.search-sections-container #searchInput:focus {
    background: transparent !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ════════════════════════════════════════════════════
   BOUTONS D'ACTION
   ════════════════════════════════════════════════════ */

.search-sections-container .vehicle-search-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-top: 0.8rem !important;
}

/* Bouton principal RECHERCHER : orange plein */
.search-sections-container #tdSearchBtn,
.search-sections-container .vehicle-search-btn:first-child {
    background: #F7B801 !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.6rem 1.2rem !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(247,184,1,0.4) !important;
    transition: background 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.search-sections-container #tdSearchBtn:hover {
    background: #e5a800 !important;
}

/* Boutons secondaires : fond sombre semi-transparent */
.search-sections-container .vehicle-search-btn,
.search-sections-container .vehicle-reset-btn {
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 8px !important;
    padding: 0.6rem 1.1rem !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    backdrop-filter: blur(4px) !important;
    transform: none !important;
}

.search-sections-container .vehicle-search-btn:hover,
.search-sections-container .vehicle-reset-btn:hover {
    background: rgba(255,255,255,0.22) !important;
    border-color: rgba(255,255,255,0.5) !important;
    transform: none !important;
}

/* Bouton "Rechercher" (premier bouton) reste orange */
.search-sections-container .vehicle-search-actions .vehicle-search-btn:first-child,
.search-sections-container #tdSearchBtn {
    background: #F7B801 !important;
    color: #1a1a2e !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(247,184,1,0.4) !important;
}

.search-sections-container .vehicle-search-actions .vehicle-search-btn:first-child:hover {
    background: #e5a800 !important;
}

/* ── Pseudo-élément pour le border-radius + image (overflow:visible ne clippe pas) ── */
.search-sections-container::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 14px !important;
    pointer-events: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important;
    z-index: 0 !important;
}

/* Tous les enfants directs au-dessus du pseudo-élément ── */
.search-sections-container > * {
    position: relative !important;
    z-index: 1 !important;
}

/* ── Mobile : RECHERCHE RAPIDE au-dessus de RECHERCHE PAR VÉHICULE ── */
@media (max-width: 768px) {
    /* La section RECHERCHE RAPIDE passe au-dessus pour que le dropdown ne soit pas masqué */
    .search-sections-container .filters {
        z-index: 10 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .search-sections-container .vehicle-search-wrapper {
        z-index: 1 !important;
    }

    /* filter-group en colonne */
    .search-sections-container .filter-group {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Wrapper du champ texte : pleine largeur du bloc */
    .search-sections-container .search-autocomplete-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Dropdown : pleine largeur du champ, hauteur max réduite pour ne PAS masquer les boutons en dessous */
    .search-sections-container .search-autocomplete-results,
    .search-sections-container #searchAutocomplete {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 250px !important;
        overflow-y: auto !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Le dropdown d'autocomplétion doit passer au-dessus de tout ── */
.search-sections-container .autocomplete-dropdown,
.search-sections-container .search-suggestions,
.search-sections-container #searchSuggestions,
.search-sections-container .autocomplete-results {
    position: absolute !important;
    z-index: 9999 !important;
    overflow: visible !important;
    clip: unset !important;
    clip-path: none !important;
}

/* ══ TAILLE TEXTE MENU AUTOCOMPLETE - PRIORITE ABSOLUE (chargé en dernier) ══ */
html body .search-autocomplete-item {
    padding: 5px 10px !important;
}
html body .search-autocomplete-name,
html body #searchAutocomplete .search-autocomplete-name {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
}
html body .search-autocomplete-meta,
html body #searchAutocomplete .search-autocomplete-meta {
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
}
html body .search-results-count {
    font-size: 0.58rem !important;
    padding: 2px 8px !important;
}

/* ══════════════════════════════════════════════════════════════════
   MENU RECHERCHE RAPIDE — mêmes éléments que le menu de la barre héro
   d'index.php : vignette produit + nom + références + prix.
   (chargé en dernier → priorité absolue sur les anciennes règles)
   ══════════════════════════════════════════════════════════════════ */
html body .search-autocomplete-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Vignette produit (image réelle ou icône de repli) */
html body .search-autocomplete-thumb {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 9px !important;
    background: #f4f6f8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-size: 1.25rem !important;
}
html body .search-autocomplete-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}
html body .search-autocomplete-thumb img.loaded {
    opacity: 1 !important;
}

/* Colonne nom + références : prend toute la place restante */
html body .search-autocomplete-content {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Prix aligné à droite, comme sur la barre héro */
html body .search-autocomplete-price {
    flex-shrink: 0 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #004E89 !important;
    white-space: nowrap !important;
}
@media (max-width: 480px) {
    html body .search-autocomplete-thumb { width: 36px !important; height: 36px !important; }
    html body .search-autocomplete-price { font-size: 0.7rem !important; }
}