/* ============================================================
   Vapotank Ajax Search — Mode Overlay/Modal
   ============================================================ */
:root {
    --vas-primary:    #e63946;
    --vas-primary-lt: #fff5f5;
    --vas-border:     #e0e0e0;
    --vas-radius:     12px;
    --vas-shadow:     0 8px 32px rgba(0,0,0,.13);
}

/* ── Modal Overlay (Caché par défaut) ────────────────────── */
.vas-wrapper {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999999999 !important; /* Par-dessus tout le site */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

/* Classe ajoutée par JS quand on clique sur la loupe */
.vas-wrapper.vas-is-open {
    opacity: 1;
    visibility: visible;
}

.vas-modal-container {
    width: 100%;
    max-width: 700px;
    position: relative;
    padding: 0 20px;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.vas-wrapper.vas-is-open .vas-modal-container {
    transform: translateY(0);
}

/* Bouton pour fermer la modale */
.vas-btn-close-modal {
    position: absolute;
    top: -40px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px;
}
.vas-btn-close-modal svg {
    width: 30px;
    height: 30px;
}
.vas-btn-close-modal:hover { color: var(--vas-primary); }

/* ── Barre de saisie ─────────────────────────────────────── */
.vas-bar {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.vas-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 18px 20px;
    font-size: 18px;
    color: #222;
}
.vas-input::placeholder { color: #aaa; }

.vas-btn-clear, .vas-btn-search {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vas-btn-clear { padding: 0 15px; color: #bbb; }
.vas-btn-clear svg { width: 18px; height: 18px; }
.vas-btn-clear:hover { color: #555; }

.vas-btn-search {
    padding: 0 20px;
    color: var(--vas-primary);
}
.vas-btn-search svg { width: 24px; height: 24px; }

/* ── Dropdown ────────────────────────────────────────────── */
.vas-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 20px;
    right: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    z-index: 9999;
    max-height: 60vh;
    overflow-y: auto;
}

/* ── Groupes résultats & Items (Identique à avant) ───────── */
.vas-group { padding: 6px 0; }
.vas-group + .vas-group { border-top: 1px solid #f2f2f2; }
.vas-group-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #bbb; padding: 8px 16px 4px;
}

.vas-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; text-decoration: none; color: inherit;
    transition: background .12s;
}
.vas-item:hover { background: #fafafa; }

.vas-img { width: 50px; height: 50px; object-fit: contain; border: 1px solid #f0f0f0; border-radius: 6px; }
.vas-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vas-name { font-size: 14px; font-weight: 500; color: #222; }
.vas-name mark { background: none; color: var(--vas-primary); font-weight: 700; }
.vas-price { font-size: 13px; color: #666; display: flex; gap: 8px; align-items: center; }
.vas-badge-stock { font-size: 11px; background: #ffebee; color: var(--vas-primary); padding: 2px 6px; border-radius: 4px; }

.vas-cat-icon { font-size: 20px; }
.vas-cat-count { font-size: 12px; color: #999; margin-left: auto; }

.vas-view-all {
    display: block; padding: 15px; text-align: center;
    font-size: 14px; font-weight: 600; color: var(--vas-primary);
    text-decoration: none; border-top: 1px solid #eee; background: #fffafb;
}

.vas-loader { display: flex; justify-content: center; gap: 6px; padding: 30px; }
.vas-loader span { width: 8px; height: 8px; border-radius: 50%; background: var(--vas-primary); animation: vasBounce .55s infinite alternate; }
.vas-loader span:nth-child(2) { animation-delay: .15s; }
.vas-loader span:nth-child(3) { animation-delay: .30s; }
@keyframes vasBounce { from { transform: translateY(0); opacity: .4; } to { transform: translateY(-7px); opacity: 1; } }

.vas-empty { padding: 30px; text-align: center; color: #888; }
.vas-sr-only { display: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .vas-wrapper { padding-top: 0; }
    .vas-modal-container { padding: 0; max-width: 100%; height: 100vh; display: flex; flex-direction: column; }
    .vas-bar { border-radius: 0; }
    .vas-dropdown { position: relative; top: 0; left: 0; right: 0; border-radius: 0; box-shadow: none; max-height: calc(100vh - 60px); flex: 1; }
    .vas-btn-close-modal { top: 12px; right: 10px; color: #bbb; z-index: 10; }
    .vas-input { padding-right: 40px; } /* Laisse de la place pour la croix sur mobile */
}

/* Rend le conteneur du bouton de recherche cliquable même s'il est vide */
.search_woocommerce_button, 
.header-search-icon,
.menu-item-search {
    cursor: pointer;
}

/* --- MASQUAGE FORCÉ DU LOGO QUAND LA RECHERCHE EST OUVERTE --- */
body.vas-search-active .site-logo, 
body.vas-search-active .custom-logo, 
body.vas-search-active .header-logo, 
body.vas-search-active .custom-logo-link,
body.vas-search-active .logo {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.vas-search-active {
    overflow: hidden; /* Empêche de scroller le site derrière le fond noir */
}