/* ============================================================
   DESKTOP: fix layout + SVG icon colors
   ============================================================ */

/* Remove space-between — push utilities to right with ml-auto instead */
header .navbar {
    justify-content: flex-start;
}

/* Push nav menu to right on desktop */
header .header-bottom-part {
    display: block !important;
    margin-left: auto;
}

/* Hide old utilities container — account moved to _menu.php */
header .navbar-utilities {
    display: none;
}

/* Account icon in menu — same as search icon rule */
.nav-item-account .icon-account svg path,
.nav-item-account .icon-account svg circle {
    stroke: #ffffff;
}

/* Normalize icon sizes in navbar */
.nav-item-search .icon-search svg,
.nav-item-account .icon-account svg {
    width: 18px;
    height: 18px;
}

/* Mobile utility icons white */
.mobile-nav-actions .mobile-utility svg path,
.mobile-nav-actions .mobile-utility svg circle {
    stroke: #ffffff !important;
}

/* Mobile actions div — hidden on desktop */
.mobile-nav-actions {
    display: none;
}

/* Account popup — shared mobile + desktop */
.mobile-account-wrap,
.desktop-account-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.mobile-account-toggle {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--white);
}

.desktop-account-toggle {
    cursor: pointer;
}

.mobile-account-popup,
.desktop-account-popup {
    display: none;
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    min-width: 210px;
    z-index: 2000;
    flex-direction: column;
}

.mobile-account-popup.is-open,
.desktop-account-popup.is-open {
    display: flex;
}

.mobile-account-popup a,
.desktop-account-popup a {
    display: block;
    padding: 0.75rem 1rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}

.mobile-account-popup a:last-child,
.desktop-account-popup a:last-child {
    border-bottom: none;
}

.mobile-account-popup a:hover,
.desktop-account-popup a:hover {
    background: rgba(255,255,255,0.05);
}

.mobile-account-popup a strong,
.desktop-account-popup a strong {
    color: var(--primary-color);
}

/* Flash alerts above fixed header */
.alert {
    position: relative;
    z-index: 1200;
}

/* ============================================================
   MOBILE: < 900px
   ============================================================ */
@media (max-width: 899.98px) {
    /* Nav wraps so dropdown goes on second row */
    header .navbar {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* Hide desktop utilities (account icon) — replaced by mobile-nav-actions */
    header .navbar-utilities {
        display: none !important;
    }

    /* Mobile actions: account + search + hamburger, right-aligned */
    .mobile-nav-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-left: auto;
    }

    .mobile-nav-actions .mobile-utility {
        display: flex;
        align-items: center;
        line-height: 1;
        color: var(--white);
    }

    .mobile-nav-actions .mobile-utility svg {
        width: 1.3rem;
        height: 1.3rem;
    }

    .mobile-nav-actions .mobile-utility svg path,
    .mobile-nav-actions .mobile-utility svg circle {
        stroke: var(--white);
    }

    /* White hamburger button */
    .mobile-toggler {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 4px;
        padding: 0.3rem 0.45rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-toggler-icon {
        display: block;
        width: 1.4em;
        height: 1.4em;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        transition: background-image 0.2s;
    }

    .mobile-toggler.is-open .mobile-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6L24 24M24 6L6 24'/%3e%3c/svg%3e");
    }

    /* Keep header above panel */
    header {
        z-index: 1100 !important;
    }

    /* Slide panel — full viewport width, below header */
    header .header-bottom-part {
        display: block !important;
        position: fixed;
        left: 0;
        width: 100%;
        background: #0e0e0e;
        z-index: 1050;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        padding: 1rem 0;
        overflow-y: auto;
        flex-basis: auto;
    }

    header .header-bottom-part.mobile-open {
        transform: translateX(0);
    }

    /* Vertical menu links */
    header .header-bottom-part .navbar-menu .navbar-nav {
        flex-direction: column !important;
        gap: 0 !important;
    }

    header .header-bottom-part .navbar-menu .navbar-nav .nav-item .nav-link {
        font-size: 1rem !important;
        font-weight: 500 !important;
        padding: 0.75rem 1.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
        transition: color 0.2s, background 0.2s;
        display: block;
    }

    header .header-bottom-part .navbar-menu .navbar-nav .nav-item .nav-link:hover {
        color: var(--primary-color) !important;
        background: rgba(255, 255, 255, 0.05);
    }

    header .header-bottom-part .navbar-menu .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none !important;
    }

    /* Hide search + account icons inside panel (already in mobile-nav-actions) */
    header .header-bottom-part .nav-item-search,
    header .header-bottom-part .nav-item-account {
        display: none !important;
    }


}