/**
 * Navbar accueil apex uniquement (header.navbar-apex-home)
 * Ne pas réutiliser sur catalogues / autres pages.
 */

/* Masquer la barre secondaire mobile si elle est injectée sur l’accueil */
#mobileSecondaryNavbar {
    display: none !important;
}

header.navbar-apex-home .desktop-vendor-btn {
    display: none !important;
}

@media (min-width: 769px) {
    header.navbar-apex-home .navbar-container {
        gap: 16px;
    }

    header.navbar-apex-home .navbar-main-nav {
        flex: 1 1 auto;
        min-width: 0;
    }

    header.navbar-apex-home .navbar-apex-desktop-search {
        flex: 1 1 auto;
        max-width: min(620px, 52vw);
        min-width: 220px;
        margin: 0 20px;
    }

    header.navbar-apex-home .navbar-apex-desktop-search > div {
        width: 100%;
    }

    header.navbar-apex-home #navbar-search-input {
        width: 100%;
        padding: 11px 18px 11px 44px;
        font-size: 0.95rem;
        font-weight: 500;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.14);
        border: 2px solid rgba(255, 255, 255, 0.45);
        border-radius: 12px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.45);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
        transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }

    header.navbar-apex-home #navbar-search-input::placeholder {
        color: rgba(255, 255, 255, 0.75) !important;
        opacity: 1 !important;
    }

    header.navbar-apex-home #navbar-search-input:focus {
        background: rgba(255, 255, 255, 0.2);
        border-color: #fbbf24;
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25);
        outline: none;
    }

    header.navbar-apex-home .navbar-apex-desktop-search .fa-search {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 768px) {
    header.navbar-apex-home .navbar-container {
        gap: 10px;
        flex-wrap: nowrap;
    }

    header.navbar-apex-home .mobile-nav-icons {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        gap: 8px;
    }

    header.navbar-apex-home .navbar-apex-mobile-search {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    header.navbar-apex-home .navbar-apex-mobile-search #mobileSearchBtn {
        display: none !important;
    }

    header.navbar-apex-home .navbar-apex-mobile-search #mobileNavbarSearchWrapper {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    header.navbar-apex-home #mobileNavbarSearchInput {
        width: 100%;
        padding: 10px 14px 10px 40px;
        font-size: 0.9rem;
        font-weight: 500;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.14);
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    header.navbar-apex-home #mobileNavbarSearchInput::placeholder {
        color: rgba(255, 255, 255, 0.75) !important;
    }

    header.navbar-apex-home #mobileNavbarSearchInput:focus {
        border-color: #fbbf24;
        background: rgba(255, 255, 255, 0.2);
        outline: none;
    }
}