/**
 * Header Mobile Custom Layout
 * Version: 2.0.0
 * Description: Header 1 ligne + Popup de recherche
 * 
 * Layout:
 * Header: [☰ Logo] [🔍 👤 🛒]
 * Recherche: Popup overlay au clic
 */

/* ==========================================================================
   HEADER MOBILE - 1 LIGNE UNIQUEMENT
   ========================================================================== */

@media (max-width: 991px) {
    
    /* === CONTAINER PRINCIPAL === */
    
    .top-row .row.align-items-center {
        display: flex !important;
        flex-wrap: nowrap !important; /* Plus de wrap ! */
        padding: 10px 15px !important;
        margin: 0 !important;
        align-items: center !important;
    }
    
    /* === HEADER BAR - 1 LIGNE === */
    
    /* Colonne gauche : Burger + Logo (50%) */
    .top-row .col-md-1 {
        flex: 0 0 auto !important;
        max-width: none !important;
        order: 1;
        display: flex !important;
        align-items: center !important;
        padding: 0 5px 0 0 !important;
    }
    
    /* Burger */
    .top-row .mobile-toggle {
        margin-right: 10px !important;
        padding-left: 0 !important;
        font-size: 24px !important;
    }
    
    /* Logo optimisé mobile */
    .top-row .logo {
        margin-right: 0 !important;
    }
    
    .top-row .logo img {
        max-width: 70px !important;
        height: auto !important;
    }
    
    /* Colonne droite : Recherche + Profil + Panier (50%) */
    .top-row .col-md-11 {
        flex: 1 1 auto !important;
        max-width: none !important;
        order: 2;
        padding: 0 0 0 5px !important;
    }
    
    /* Wrapper interne : flex end pour aligner à droite */
    .top-row .col-md-11 > .wpb_wrapper {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 12px;
    }
    
    /* === ICÔNE DE RECHERCHE (visible en header) === */
    
    .top-row .searchform-popup {
        display: flex !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Cacher le formulaire inline */
    .top-row .searchform-popup .searchform {
        display: none !important;
    }
    
    /* Afficher uniquement l'icône de recherche - NOIRE comme les autres */
    .top-row .searchform-popup .search-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        font-size: 24px !important;
        color: #000 !important; /* Noir comme profil et panier */
        cursor: pointer !important;
    }
    
    .top-row .searchform-popup .search-toggle .search-text {
        display: none !important; /* Cacher le texte "Chercher" */
    }
    
    .top-row .searchform-popup .search-toggle i {
        font-size: 24px !important;
        margin: 0 !important;
        color: #000 !important; /* Noir */
    }
    
    /* Icône Mon Compte */
    .top-row .my-account {
        font-size: 24px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Panier */
    .top-row #mini-cart {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .top-row #mini-cart .cart-icon {
        font-size: 24px !important;
    }
    
    .top-row #mini-cart .cart-items-text {
        display: none !important; /* Cacher "0 article" sur mobile */
    }
    
    /* Cacher le téléphone */
    .top-row .porto-sicon-box {
        display: none !important;
    }
    
    /* === AJUSTEMENTS RESPONSIFS === */
    
    /* Très petits écrans (< 375px) */
    @media (max-width: 374px) {
        .top-row .logo img {
            max-width: 50px !important;
        }
        
        .top-row .mobile-toggle,
        .top-row .searchform-popup .search-toggle i,
        .top-row .my-account,
        .top-row #mini-cart .cart-icon {
            font-size: 20px !important;
        }
        
        .top-row .col-md-11 > .wpb_wrapper {
            gap: 8px;
        }
    }
    
    /* Petits écrans (375px - 767px) */
    @media (min-width: 375px) and (max-width: 767px) {
        .top-row .logo img {
            max-width: 60px !important;
        }
    }
    
    /* Tablettes portrait (768px - 991px) */
    @media (min-width: 768px) and (max-width: 991px) {
        .top-row .logo img {
            max-width: 80px !important;
        }
        
        /* Sur tablette, on peut afficher le texte du panier */
        .top-row #mini-cart .cart-items-text {
            display: inline !important;
            font-size: 13px !important;
            margin-left: 5px !important;
        }
    }
}

/* ==========================================================================
   POPUP DE RECHERCHE MOBILE
   ========================================================================== */

@media (max-width: 991px) {
    
    /* Overlay fond noir semi-transparent */
    .aming-search-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 99999 !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        overflow-y: auto !important;
    }
    
    /* Overlay actif */
    .aming-search-overlay.active {
        display: flex !important;
        animation: amingFadeIn 0.3s ease !important;
    }
    
    /* Popup blanche - Style comme popup login */
    .aming-search-popup {
        background: #fff !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 450px !important;
        margin: auto !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important;
        animation: amingSlideDown 0.3s ease !important;
        position: relative !important;
    }
    
    /* Header de la popup */
    .aming-search-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 25px 30px 20px !important;
        border-bottom: none !important;
    }
    
    .aming-search-header h3 {
        margin: 0 !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        letter-spacing: -0.5px !important;
    }
    
    /* Bouton fermer - Style X comme popup login */
    .aming-search-close {
        background: transparent !important;
        border: none !important;
        font-size: 32px !important;
        line-height: 1 !important;
        color: #b3b3b3 !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: color 0.2s !important;
        font-weight: 300 !important;
    }
    
    .aming-search-close:hover {
        color: #666 !important;
    }
    
    /* Body de la popup */
    .aming-search-body {
        padding: 10px 30px 30px !important;
    }
    
    /* Formulaire de recherche - Style comme popup login */
    .aming-search-form {
        position: relative !important;
    }
    
    /* Input de recherche */
    .aming-search-form input[type="text"] {
        width: 100% !important;
        padding: 12px 15px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 0 !important;
        font-size: 14px !important;
        outline: none !important;
        transition: border-color 0.2s !important;
        background: #fff !important;
        color: #333 !important;
        margin-bottom: 20px !important; /* Plus d'espace avant le bouton */
    }
    
    .aming-search-form input[type="text"]:focus {
        border-color: #999 !important;
    }
    
    .aming-search-form input[type="text"]::placeholder {
        color: #999 !important;
    }
    
    /* Bouton rechercher - Style noir comme popup login */
    .aming-search-form button[type="submit"] {
        width: 100% !important;
        padding: 14px 20px !important;
        background: #1a1a1a !important;
        color: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        cursor: pointer !important;
        transition: background 0.3s !important;
    }
    
    .aming-search-form button[type="submit"]:hover {
        background: #333 !important;
    }
    
    .aming-search-form button[type="submit"]:active {
        transform: scale(0.98) !important;
    }
    
    .aming-search-form button[type="submit"] i {
        margin-right: 8px !important;
    }
    
    /* Suggestions live */
    .aming-search-suggestions {
        margin-top: 20px !important;
        max-height: 300px !important;
        overflow-y: auto !important;
    }
    
    .aming-search-suggestions .autocomplete-suggestion {
        padding: 12px 15px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        cursor: pointer !important;
        transition: background 0.2s !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .aming-search-suggestions .autocomplete-suggestion:hover {
        background: #f5f5f5 !important;
    }
    
    .aming-search-suggestions .autocomplete-suggestion:last-child {
        border-bottom: none !important;
    }
    
    /* Animations */
    @keyframes amingFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes amingSlideDown {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}