/* ====================================================================
   navbar-modern.css — HytHost modern header (decoupled from Bootstrap)
   Namespace: .nav-modern, .promo-bar, .legend-pill
   ==================================================================== */

:root {
    --nav-bg: #0c1220;
    --nav-bg-utility: #07090f;
    --nav-bg-stuck: rgba(12, 18, 32, 0.96);
    --nav-fg: #e9e6f5;
    --nav-fg-muted: #b8b3cc;
    --nav-accent: #59f58c;
    --nav-purple: #cbb0ff;
    --nav-cta-from: #4e80f9;
    --nav-cta-to: #7c3aed;
    --nav-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    --nav-border: rgba(255, 255, 255, 0.06);
    --nav-stack-height: 0px; /* JS sets to height of utility+promo for sticky offset */
}

/* ============================== Utility bar (top) ============================== */
.nav-utility {
    background: var(--nav-bg-utility);
    color: var(--nav-fg-muted);
    border-bottom: 1px solid var(--nav-border);
    font-size: 0.82rem;
}
.nav-utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 16px;
    min-height: 36px;
}
.nav-utility-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.nav-utility-action {
    background: transparent;
    border: 0;
    color: var(--nav-fg-muted);
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    transition: color 0.15s ease;
}
.nav-utility-action:hover { color: var(--nav-fg); }
.nav-utility-action i { font-size: 0.85rem; }
.nav-utility-caret { font-size: 0.65rem !important; opacity: 0.7; }
.nav-utility-action .badge-count {
    background: var(--nav-accent);
    color: #0a0a14;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 2px;
}

/* ============================== Header stack (sticky wrapper) ============================== */
.nav-stack {
    position: relative;
    z-index: 1000;
}
.nav-stack.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    animation: nav-slide-down 0.25s ease;
}
.nav-stack-spacer { display: none; }
.nav-stack-spacer.is-active { display: block; }

/* ============================== Rotating announcements pill (inside utility bar, left) ============================== */
.promo-rotator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 12px;
    background: linear-gradient(90deg, #facc15, #fbbf24);
    color: #1a1230;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 6px;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(252,191,36,0.25);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.promo-rotator.is-dismissing { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.promo-rotator-track {
    position: relative;
    flex: 0 1 auto;
    min-height: 1.5em;
    display: flex;
    align-items: center;
}
.promo-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.promo-item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: static;
}
.promo-item:not(.is-active) {
    position: absolute;
    inset: 0;
}
.promo-item i {
    font-size: 0.78rem;
    color: #1a1230;
    flex-shrink: 0;
}
.promo-item span { white-space: nowrap; }
.promo-item strong { font-weight: 800; }
.promo-item a {
    color: #1a1230;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
}
.promo-item a:hover { color: #000; text-decoration: underline; }

.promo-close-x {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    color: rgba(26, 18, 48, 0.7);
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.18s ease, color 0.18s ease;
    margin-left: 2px;
}
.promo-close-x:hover {
    background: rgba(26, 18, 48, 0.15);
    color: #1a1230;
}
.promo-close-x i { font-size: 0.7rem; }

@media (max-width: 767px) {
    .promo-rotator { font-size: 0.7rem; gap: 6px; padding: 3px 4px 3px 10px; }
    .promo-item span { white-space: normal; }
}

/* ============================== Main nav ============================== */
.nav-modern {
    position: relative;
    z-index: 1000;
    background: var(--nav-bg);
    color: var(--nav-fg);
    border-bottom: 1px solid var(--nav-border);
    transition: padding 0.2s ease, box-shadow 0.2s ease;
    padding: 14px 0;
}
/* When parent .nav-stack is stuck, individual nav doesn't need sticky */
.nav-stack.is-stuck .nav-modern {
    background: var(--nav-bg-stuck);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* Disable rade.js .fixed-top behavior on our nav since .nav-stack handles sticky */
.nav-modern.fixed-top:not(.nav-stack-active) {
    position: relative !important;
}
@keyframes nav-slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
/* Spacer set by JS to prevent layout jump when nav becomes fixed */
.nav-modern-spacer { display: none; }
.nav-modern-spacer.is-active { display: block; }
.nav-modern-container {
    display: flex;
    align-items: center;
    gap: 24px;
}
.nav-modern-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav-modern-brand img { height: 44px; width: auto; transition: height 0.2s ease; }
.nav-modern.is-stuck .nav-modern-brand img { height: 36px; }

/* Hamburger */
.nav-modern-toggle {
    display: none;
    background: transparent;
    border: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    margin-left: auto;
    position: relative;
}
.nav-modern-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--nav-fg);
    margin: 5px auto;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-modern-toggle.is-open .nav-modern-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-modern-toggle.is-open .nav-modern-toggle-bar:nth-child(2) { opacity: 0; }
.nav-modern-toggle.is-open .nav-modern-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Collapse / drawer container */
.nav-modern-collapse {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Menu list — AMM emits <ul> inside; CSS targets both .nav-modern-list and the AMM ul */
.nav-modern-list-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
.nav-modern-list-wrap > ul,
.nav-modern .nav-modern-list-wrap > ul,
.nav-modern .nav-modern-list-wrap > ul.navbar-nav,
.nav-modern-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
}

/* DESKTOP only: Force dropdown submenus to absolute (override Bootstrap's static fallback) */
@media (min-width: 992px) {
    .nav-modern-list-wrap .dropdown-menu,
    .nav-modern-list .dropdown-menu {
        position: absolute !important;
        float: none !important;
        top: 100% !important;
        left: 0 !important;
    }
}
.nav-modern-list-wrap > ul > li,
.nav-modern-list > li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    float: none !important;
}
.nav-modern-list-wrap > ul > li > a,
.nav-modern-list > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--nav-fg);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
}
.nav-modern-list-wrap > ul > li > a:hover,
.nav-modern-list > li > a:hover,
.nav-modern-list-wrap > ul > li > a:focus,
.nav-modern-list > li > a:focus { color: var(--nav-accent); background: rgba(89, 245, 140, 0.06); }

/* Active page underline */
.nav-modern-list-wrap > ul > li > a.is-active,
.nav-modern-list > li > a.is-active {
    color: var(--nav-accent);
}
.nav-modern-list-wrap > ul > li > a.is-active::after,
.nav-modern-list > li > a.is-active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--nav-accent);
    border-radius: 2px;
}

/* Dropdown indicator caret */
.nav-modern-list-wrap > ul > li.has-children > a::after,
.nav-modern-list > li.has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 6px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}
.nav-modern-list-wrap > ul > li.has-children:hover > a::after,
.nav-modern-list > li.has-children:hover > a::after,
.nav-modern-list-wrap > ul > li.has-children.is-open > a::after,
.nav-modern-list > li.has-children.is-open > a::after {
    transform: rotate(225deg) translateY(2px);
}

/* Standard dropdown panel — visible always (show/hide via opacity), overrides Bootstrap .dropdown-menu { display: none } */
.nav-modern-dropdown {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #14182a;
    border: 1px solid var(--nav-border);
    border-radius: 12px;
    box-shadow: var(--nav-shadow);
    padding: 8px;
    list-style: none;
    margin: 8px 0 0 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1010;
}
/* Hover bridge: invisible ::after on parent LI extending below to cover the
   8px gap between button bottom and dropdown top. Without this the mouse can
   "fall off" hover when traveling diagonally to dropdown items, especially
   on short dropdowns (CONTACTS, narrow ones). Pseudo-element keeps LI:hover
   active while mouse is over the bridge. */
.nav-modern-list-wrap > ul > li.has-children::after,
.nav-modern-list > li.has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;
    pointer-events: auto;
    background: transparent;
}
.nav-modern-list-wrap > ul > li.has-children:hover > .nav-modern-dropdown,
.nav-modern-list > li.has-children:hover > .nav-modern-dropdown,
.nav-modern-list-wrap > ul > li.has-children:focus-within > .nav-modern-dropdown,
.nav-modern-list > li.has-children:focus-within > .nav-modern-dropdown,
.nav-modern-list-wrap > ul > li.has-children.is-open > .nav-modern-dropdown,
.nav-modern-list > li.has-children.is-open > .nav-modern-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.nav-modern-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--nav-fg);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.94rem;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-modern-dropdown a:hover { background: rgba(124, 58, 237, 0.15); color: #fff; }
.nav-modern-dropdown a i { color: var(--nav-accent); width: 18px; text-align: center; flex-shrink: 0; }

/* Mega-menu (3-col grid) */
.nav-modern-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 8px;
    transform: translateX(-50%) translateY(-4px);
    width: min(820px, calc(100vw - 32px));
    background: #14182a;
    border: 1px solid var(--nav-border);
    border-radius: 14px;
    box-shadow: var(--nav-shadow);
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1010;
}
.nav-modern-list-wrap > ul > li.has-children:hover > .nav-modern-mega,
.nav-modern-list > li.has-children:hover > .nav-modern-mega,
.nav-modern-list-wrap > ul > li.has-children:focus-within > .nav-modern-mega,
.nav-modern-list > li.has-children:focus-within > .nav-modern-mega,
.nav-modern-list-wrap > ul > li.has-children.is-open > .nav-modern-mega,
.nav-modern-list > li.has-children.is-open > .nav-modern-mega {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-modern-mega li { list-style: none; }
.nav-modern-mega a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--nav-fg);
    transition: background 0.15s ease, transform 0.15s ease;
    height: 100%;
}
.nav-modern-mega a:hover {
    background: rgba(124, 58, 237, 0.12);
    transform: translateY(-1px);
}
.nav-modern-mega-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(89,245,140,0.18), rgba(124,58,237,0.18));
    border: 1px solid rgba(89, 245, 140, 0.3);
    border-radius: 12px;
    color: var(--nav-accent);
    font-size: 1.35rem;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-modern-mega a:hover .nav-modern-mega-icon {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
/* Image override — set as <img> inside icon tile.
   Real game logos (when added to /img/ruzenko/game-icons/v2/) take precedence
   over gradient + FA icon fallback below. */
.nav-modern-mega-icon img {
    width: 110%;
    height: 110%;
    object-fit: contain;
    /* let artistic glow/shadow of the source extend slightly outside the tile box */
}
.nav-modern-mega-icon:has(img) {
    background: transparent !important;
    border: 0 !important;
    overflow: visible;
}
/* Per-game accent tile (when no image, gradient+FA icon).
   Each game has its own brand color so the menu looks designed even without images. */
.nav-modern-mega-icon.game-minecraft {
    background: linear-gradient(135deg, #5a9d3a, #2d5e1f);
    border-color: rgba(126, 213, 84, 0.45);
    color: #d4ffc0;
}
.nav-modern-mega-icon.game-palworld {
    background: linear-gradient(135deg, #ff8c42, #c25a1f);
    border-color: rgba(255, 140, 66, 0.45);
    color: #ffe2cf;
}
.nav-modern-mega-icon.game-cs2 {
    background: linear-gradient(135deg, #d94343, #821e1e);
    border-color: rgba(255, 110, 110, 0.45);
    color: #ffd6d6;
}
.nav-modern-mega-icon.game-cs16 {
    background: linear-gradient(135deg, #c08a3e, #6b4a1c);
    border-color: rgba(220, 180, 110, 0.45);
    color: #fff0d4;
}
.nav-modern-mega-icon.game-samp {
    background: linear-gradient(135deg, #1ec8c8, #0e6d6d);
    border-color: rgba(80, 224, 224, 0.45);
    color: #d4ffff;
}
.nav-modern-mega-icon.game-fivem {
    background: linear-gradient(135deg, #2b6ee0, #133b85);
    border-color: rgba(96, 156, 255, 0.45);
    color: #d6e4ff;
}
.nav-modern-mega-icon.game-hytale {
    background: linear-gradient(135deg, #7c3aed, #3b1474);
    border-color: rgba(170, 130, 255, 0.45);
    color: #e9d6ff;
}

/* Floating icon style (used by non-game items in HOSTING/DOMAINS/COMPANY mega-menus):
   no tile background, no border, just a colored FA icon with soft drop-shadow glow.
   Each item picks its own glow color via .icon-glow-* modifier below. */
.nav-modern-mega-icon[class*="icon-glow-"] {
    background: transparent !important;
    border: 0 !important;
    font-size: 1.7rem;
    overflow: visible;
}
.nav-modern-mega-icon.icon-glow-purple { color: #b794ff; filter: drop-shadow(0 0 8px rgba(124,58,237,0.55)); }
.nav-modern-mega-icon.icon-glow-green  { color: #7ed554; filter: drop-shadow(0 0 8px rgba(89,245,140,0.55)); }
.nav-modern-mega-icon.icon-glow-blue   { color: #609cff; filter: drop-shadow(0 0 8px rgba(43,110,224,0.55)); }
.nav-modern-mega-icon.icon-glow-amber  { color: #f0b860; filter: drop-shadow(0 0 8px rgba(220,180,110,0.55)); }
.nav-modern-mega-icon.icon-glow-cyan   { color: #4ed5d5; filter: drop-shadow(0 0 8px rgba(30,200,200,0.55)); }
.nav-modern-mega-icon.icon-glow-indigo { color: #8b80ff; filter: drop-shadow(0 0 8px rgba(124,80,255,0.55)); }
.nav-modern-mega-icon.icon-glow-red    { color: #ff7a7a; filter: drop-shadow(0 0 8px rgba(220,80,80,0.55)); }
.nav-modern-mega-icon.icon-glow-orange { color: #ff9d4d; filter: drop-shadow(0 0 8px rgba(255,140,66,0.55)); }
/* Hover boost */
.nav-modern-mega a:hover .nav-modern-mega-icon[class*="icon-glow-"] {
    filter: brightness(1.15) drop-shadow(0 0 12px currentColor);
    transform: scale(1.08);
}
.nav-modern-mega-body { display: flex; flex-direction: column; min-width: 0; }
.nav-modern-mega-title { font-weight: 600; font-size: 0.95rem; color: #fff; margin-bottom: 2px; }
.nav-modern-mega-desc { font-size: 0.82rem; color: var(--nav-fg-muted); line-height: 1.35; }

/* "View all" CTA card spans all columns of mega-menu, button-like styling */
.nav-modern-mega li.mega-view-all {
    grid-column: 1 / -1;
    margin-top: 6px;
}
.nav-modern-mega li.mega-view-all > a {
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(89,245,140,0.14));
    border: 1px solid rgba(124,58,237,0.35);
    border-radius: 10px;
    font-weight: 600;
    color: #fff !important;
    text-align: center;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.nav-modern-mega li.mega-view-all > a:hover {
    background: linear-gradient(135deg, rgba(124,58,237,0.32), rgba(89,245,140,0.22));
    border-color: rgba(89,245,140,0.5);
    transform: translateY(-1px);
}
.nav-modern-mega li.mega-view-all .nav-modern-mega-icon {
    width: 22px; height: 22px;
    background: transparent;
    border: 0;
    color: var(--nav-accent);
    font-size: 0.95rem;
}
.nav-modern-mega li.mega-view-all .nav-modern-mega-body { flex-direction: row; align-items: center; }
.nav-modern-mega li.mega-view-all .nav-modern-mega-title { margin: 0; font-size: 0.9rem; letter-spacing: 0.02em; }

/* Right-side actions */
.nav-modern-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}
.nav-modern-action {
    background: transparent;
    border: 0;
    color: var(--nav-fg);
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.92rem;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-modern-action:hover { color: var(--nav-accent); background: rgba(89, 245, 140, 0.06); }
.nav-modern-action .badge-count {
    background: var(--nav-purple);
    color: #1a1230;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

/* CTA button — refined blue→purple gradient (matches old prod look) */
.nav-modern-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--nav-cta-from) 0%, var(--nav-cta-to) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 8px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(78, 128, 249, 0.30), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.nav-modern-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(255,255,255,0.2);
    color: #fff;
    text-decoration: none;
    filter: brightness(1.08);
}
.nav-modern-cta i { font-size: 0.82rem; }

/* Alerts dropdown (bell icon) */
.nav-modern-alerts {
    position: relative;
}
.nav-modern-alerts-toggle {
    cursor: pointer;
}
.nav-modern-alerts-dropdown {
    right: 0;
    left: auto !important;
    min-width: 320px;
    max-height: 400px;
    overflow-y: auto;
}
.nav-modern-alerts-dropdown li {
    list-style: none;
}
.nav-modern-alerts-header {
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(124,58,237,0.18), rgba(124,58,237,0.08));
    color: var(--nav-purple);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    margin-bottom: 4px;
    text-align: center;
}
.nav-modern-alerts-header i { margin-right: 6px; color: var(--nav-purple); }
.nav-modern-alert-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px;
    padding: 10px 12px !important;
    color: var(--nav-fg) !important;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.4;
    transition: background 0.15s ease;
}
.nav-modern-alert-item:hover { background: rgba(124, 58, 237, 0.12); color: #fff !important; }
.nav-modern-alert-item i.severity-danger { color: #ff6b6b !important; }
.nav-modern-alert-item i.severity-warning { color: #ffb05c !important; }
.nav-modern-alert-item i.severity-info { color: var(--nav-purple) !important; }
.nav-modern-alert-item i.severity-success { color: var(--nav-accent) !important; }
.nav-modern-alerts-empty {
    padding: 14px 12px;
    color: var(--nav-fg-muted);
    text-align: center;
    font-size: 0.88rem;
}
/* Alerts: CLICK-ONLY (no hover auto-open — too easy to accidentally open on touch) */
.nav-modern-alerts.has-children.is-open > .nav-modern-alerts-dropdown {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* User account dropdown (HELLO, [Name] when logged in) */
.nav-modern-user {
    position: relative;
}
/* Invisible bridge between user toggle and dropdown to keep hover continuous */
.nav-modern-user.has-children > .nav-modern-user-dropdown::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 12px;
}
.nav-modern-user-toggle {
    cursor: pointer;
}
.nav-modern-user-toggle .nav-utility-caret {
    margin-left: 6px;
    font-size: 0.7rem !important;
    opacity: 0.85;
    transition: transform 0.2s ease;
}
.nav-modern-user.has-children:hover > .nav-modern-user-toggle .nav-utility-caret,
.nav-modern-user.has-children:focus-within > .nav-modern-user-toggle .nav-utility-caret,
.nav-modern-user.has-children.is-open > .nav-modern-user-toggle .nav-utility-caret {
    transform: rotate(180deg);
}
.nav-modern-user-dropdown {
    right: 0;
    left: auto !important;
    min-width: 220px;
}
.nav-modern-user-dropdown li {
    list-style: none;
}
.nav-modern-user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--nav-fg);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-modern-user-dropdown a:hover {
    background: rgba(124, 58, 237, 0.15);
    color: #fff;
}
.nav-modern-user-dropdown a i {
    color: var(--nav-accent);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.nav-modern-divider {
    height: 1px;
    background: var(--nav-border);
    margin: 6px 8px;
    list-style: none;
}
/* User: CLICK-ONLY (no hover auto-open — must click HELLO, [Name] explicitly) */
.nav-modern-user.has-children.is-open > .nav-modern-user-dropdown {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Lang switcher (custom dropdown) */
.nav-modern-lang { position: relative; }
.nav-modern-lang-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    background: #14182a;
    border: 1px solid var(--nav-border);
    border-radius: 10px;
    box-shadow: var(--nav-shadow);
    padding: 6px;
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1010;
}
.nav-modern-lang.is-open .nav-modern-lang-dropdown,
.nav-modern-lang.has-children.is-open .nav-modern-lang-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
@media (max-width: 575px) {
    /* On small phones: lang dropdown opens centered, takes more screen */
    .nav-modern-lang-dropdown {
        right: 0 !important;
        left: auto !important;
        max-width: 80vw;
    }
}
.nav-modern-lang-dropdown a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--nav-fg);
    text-decoration: none;
    font-size: 0.9rem;
}
.nav-modern-lang-dropdown a:hover { background: rgba(124, 58, 237, 0.15); }

/* Close button — only visible inside mobile drawer */
.nav-modern-drawer-close {
    display: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--nav-fg);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}
.nav-modern-drawer-close:hover {
    background: rgba(89, 245, 140, 0.12);
    color: var(--nav-accent);
    transform: scale(1.05);
}

/* ============================ Mobile drawer ============================ */
@media (max-width: 991px) {
    /* Bump nav-modern z-index above backdrop so its child collapse renders on top */
    .nav-modern { z-index: 2060; position: relative; }
    .nav-modern-toggle { display: block; }
    .nav-modern-drawer-close {
        display: inline-flex;
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 10;
    }
    .nav-modern-collapse {
        position: fixed;
        top: 0;
        right: 0;
        width: min(360px, 92vw);
        height: 100vh;
        background: var(--nav-bg);
        border-left: 1px solid var(--nav-border);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 80px 16px 24px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
        z-index: 2050;
    }
    .nav-modern-collapse.is-open { transform: translateX(0); }

    .nav-modern-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 2040;
    }
    .nav-modern-backdrop.is-open { opacity: 1; pointer-events: auto; }

    body.nav-modern-locked { overflow: hidden; }

    .nav-modern-list-wrap,
    .nav-modern-list-wrap > ul,
    .nav-modern .nav-modern-list-wrap > ul,
    .nav-modern .nav-modern-list-wrap > ul.navbar-nav,
    .nav-modern-list {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2px !important;
        flex: 0 1 auto !important;
        flex-wrap: nowrap !important;
    }
    .nav-modern-list-wrap > ul > li,
    .nav-modern-list > li {
        width: 100% !important;
    }
    .nav-modern-list-wrap > ul > li > a,
    .nav-modern-list > li > a {
        padding: 12px 12px !important;
        font-size: 1rem !important;
        width: 100% !important;
    }
    .nav-modern-list-wrap > ul > li > a.is-active::after,
    .nav-modern-list > li > a.is-active::after { display: none; }
    .nav-modern-list-wrap > ul > li > a.is-active,
    .nav-modern-list > li > a.is-active { background: rgba(89, 245, 140, 0.08); }

    /* Mobile menu dropdowns (inside drawer) — accordion style.
       SCOPED to .nav-modern-list-wrap / .nav-modern-list to avoid affecting
       utility dropdowns (alerts, user, lang) which must stay click-only floating. */
    .nav-modern-list-wrap .nav-modern-dropdown,
    .nav-modern-list .nav-modern-dropdown,
    .nav-modern-list-wrap .nav-modern-mega,
    .nav-modern-list .nav-modern-mega,
    .nav-modern-list-wrap .dropdown-menu,
    .nav-modern-list .dropdown-menu {
        position: static !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.03);
        border: 0;
        float: none !important;
        top: auto !important;
        left: auto !important;
        margin: 4px 0 8px !important;
        inset: auto !important;
        border-radius: 8px;
        padding: 6px;
        display: none !important;
        width: auto;
        grid-template-columns: 1fr;
    }
    /* Mobile: collapse dropdowns by default — only is-open is visible */
    .nav-modern-list-wrap > ul > li.has-children > .nav-modern-dropdown,
    .nav-modern-list > li.has-children > .nav-modern-dropdown,
    .nav-modern-list-wrap > ul > li.has-children > .nav-modern-mega,
    .nav-modern-list > li.has-children > .nav-modern-mega {
        display: none !important;
    }
    .nav-modern-list-wrap > ul > li.has-children.is-open > .nav-modern-dropdown,
    .nav-modern-list > li.has-children.is-open > .nav-modern-dropdown,
    .nav-modern-list-wrap > ul > li.has-children.is-open > .nav-modern-mega,
    .nav-modern-list > li.has-children.is-open > .nav-modern-mega {
        display: block !important;
    }
    /* Mobile: mega-menu uses block layout (accordion), NOT grid */
    .nav-modern-list-wrap > ul > li.has-children.is-open > .nav-modern-mega,
    .nav-modern-list > li.has-children.is-open > .nav-modern-mega {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    /* Force mega items to stack vertically on mobile */
    .nav-modern-mega li {
        display: block !important;
        width: 100% !important;
    }
    .nav-modern-mega a {
        height: auto !important;
    }

    .nav-modern-actions {
        margin-left: 0;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--nav-border);
        flex-wrap: wrap;
        gap: 8px;
    }
    .nav-modern-cta { width: 100%; justify-content: center; }

    /* Mobile/tablet: utility dropdowns (lang/alerts/user) pinned to viewport
       right edge with position:fixed. Avoids drift under logo when toggle
       sits in middle of utility bar (logged-in state with bell present). */
    .nav-modern-lang-dropdown,
    .nav-modern-alerts-dropdown,
    .nav-modern-user-dropdown {
        position: fixed !important;
        top: 48px !important;
        right: 10px !important;
        left: auto !important;
        max-width: calc(100vw - 20px);
        z-index: 2070 !important;
    }
    .nav-modern-alerts-dropdown { min-width: min(320px, calc(100vw - 20px)) !important; }
    .nav-modern-user-dropdown { min-width: min(220px, calc(100vw - 20px)) !important; }
    .nav-modern-lang-dropdown { min-width: min(180px, calc(100vw - 20px)) !important; }
}

@media (max-width: 575px) {
    .nav-modern-mega { grid-template-columns: 1fr; }
    .promo-bar > .container { padding: 8px 36px 8px 12px; font-size: 0.78rem; }
    .promo-bar .promo-close { right: 6px; }
}