/* =========================================================
   VULTREX - SHARED LAYOUT
   Header, Navigation, Controls, Footer & Responsive Layout
========================================================= */


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   HEADER / NAVBAR
========================================================= */

.site-header {
    width: 100%;
    height: 78px;

    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    align-items: center;

    background:
        rgba(8, 13, 18, 0.93);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.045);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.site-header.scrolled {
    background:
        rgba(8, 13, 18, 0.98);

    border-bottom-color:
        rgba(212, 175, 55, 0.08);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.18);
}

.navbar {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 34px;
}


/* =========================================================
   LOGO
========================================================= */

.brand {
    height: 100%;

    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.brand-logo {
    display: block;

    width: 112px;
    height: 58px;

    object-fit: contain;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.brand:hover .brand-logo {
    transform: scale(1.025);

    filter:
        drop-shadow(0 0 10px rgba(212, 175, 55, 0.16));
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1;

    gap: 16px;
}

.nav-links a {
    position: relative;

    padding: 11px 5px;

    color: #A3A3A3;

    font-size: 14px;
    font-weight: 500;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.nav-links a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 0;
    height: 2px;

    border-radius: 50px;

    background:
        var(--gold, #D4AF37);

    transform:
        translateX(-50%);

    opacity: 0;

    transition:
        width 0.25s ease,
        opacity 0.25s ease;
}

.nav-links a:hover {
    color: #ffffff;

    transform:
        translateY(-1px);
}

.nav-links a:hover::after {
    width: 20px;
    opacity: .7;
}

.nav-links a.active {
    color: #ffffff;
}

.nav-links a.active::after {
    width: 28px;
    opacity: 1;
}


/* =========================================================
   NAV ACTIONS
========================================================= */

.nav-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.nav-icon-btn,
.mobile-menu-btn {
    border: 0;
    outline: 0;

    cursor: pointer;

    color: #c2c8d0;

    background: transparent;
}

.nav-icon-btn {
    width: 39px;
    height: 39px;

    border-radius: 10px;

    display: grid;
    place-items: center;

    font-size: 20px;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.nav-icon-btn:hover {
    color: var(--gold, #D4AF37);

    background:
        rgba(212, 175, 55, 0.06);

    transform:
        translateY(-1px);
}


/* =========================================================
   LOGIN / SIGNUP
========================================================= */

.nav-login,
.nav-signup {
    height: 42px;

    min-width: 98px;

    padding:
        0 18px;

    border-radius:
        10px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.nav-login {
    color: #e3e8ed;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    background:
        rgba(255, 255, 255, 0.012);
}

.nav-login:hover {
    transform:
        translateY(-2px);

    background:
        rgba(255, 255, 255, 0.04);

    border-color:
        rgba(255, 255, 255, 0.16);
}

.nav-signup {
    color: #071215;

    background:
        linear-gradient(135deg,
            #5573E6,
            #D4AF37);

    box-shadow:
        0 10px 25px rgba(212, 175, 55, 0.14);
}

.nav-signup:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px rgba(212, 175, 55, 0.20);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn {
    display: none;

    width: 40px;
    height: 40px;

    border-radius: 10px;

    font-size: 21px;
}


/* =========================================================
   HEADER CONTROLS
========================================================= */

.header-svg-icon {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-dropdown {
    position: relative;
}

.nav-control-btn,
.theme-toggle-btn {
    height: 42px;

    border-radius: 10px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    color:
        #d6dce3;

    background:
        rgba(255, 255, 255, 0.018);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.nav-control-btn {
    padding: 0 13px;

    min-width: 88px;
}

.nav-control-btn:hover,
.theme-toggle-btn:hover {
    transform: translateY(-1px);

    background:
        rgba(212, 175, 55, 0.055);

    border-color:
        rgba(212, 175, 55, .20);
}

.dropdown-arrow {
    margin-left: 2px;

    color: #74808a;

    font-size: 10px;
}

.currency-symbol {
    font-size: 16px;

    font-weight: 700;
}

.theme-toggle-btn {
    width: 42px;

    padding: 0;
}

.theme-sun {
    display: block;
}

.theme-moon {
    display: none;
}

html[data-theme="light"] .theme-sun {
    display: none;
}

html[data-theme="light"] .theme-moon {
    display: block;
}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    min-width: 185px;

    padding: 7px;

    border-radius: 12px;

    border:
        1px solid rgba(255, 255, 255, .09);

    background:
        #111318;

    box-shadow:
        0 22px 50px rgba(0, 0, 0, .32);

    display: none;

    z-index: 1500;
}

.nav-dropdown-menu.open {
    display: block;
}

.dropdown-option {
    width: 100%;

    min-height: 41px;

    padding: 0 11px;

    border: 0;

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 11px;

    cursor: pointer;

    color:
        #dce2e7;

    background:
        transparent;

    text-align: left;

    font-size: 12px;

    transition:
        background .18s ease,
        color .18s ease;
}

.dropdown-option:hover {
    color: #ffffff;

    background:
        rgba(212, 175, 55, .09);
}

.option-code {
    width: 25px;

    color:
        var(--gold, #D4AF37);

    font-size: 9px;

    font-weight: 800;
}

.currency-option-symbol {
    margin-left: auto;

    color:
        #87929d;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    margin: 0;

    padding: 66px 0 0;

    background:
        #050609;

    border-top:
        1px solid rgba(255, 255, 255, 0.045);
}


/* =========================================================
   FOOTER GRID
========================================================= */

.footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1fr;

    gap: 58px;

    padding-bottom: 50px;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand {
    max-width: 330px;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;

    margin-bottom: 18px;
}

.footer-logo {
    width: 125px;
    height: 65px;

    object-fit: contain;
}

.footer-brand p {
    margin: 0;

    max-width: 290px;

    color: #7f8995;

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   FOOTER SOCIAL MEDIA
========================================================= */

.footer-socials {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 20px;
}

.footer-social-link {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid rgba(255, 255, 255, 0.075);

    color: #89929d;

    font-size: 15px;

    text-decoration: none;

    outline: none;

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.footer-social-link i {
    display: block;

    line-height: 1;
}

.footer-social-link:hover {
    transform: translateY(-3px);
}

.footer-social-link:focus {
    outline: none;
}

.footer-social-link:focus-visible {
    outline:
        2px solid rgba(255, 255, 255, 0.35);

    outline-offset: 3px;
}


/* =========================================================
   TRUSTPILOT BADGE
========================================================= */

.footer-social-link.trustpilot-badge {
    width: auto;

    min-width: 112px;

    padding: 0 14px;

    gap: 8px;

    color: #d5d9df;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: -0.1px;

    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        rgba(255, 255, 255, 0.075);
}

.footer-social-link.trustpilot-badge i {
    color: #D4AF37;

    font-size: 15px;

    filter:
        drop-shadow(0 0 5px rgba(0, 182, 122, 0.2));
}

.footer-social-link.trustpilot-badge span {
    line-height: 1;
}

.footer-social-link.trustpilot-badge:hover {
    color: #ffffff;

    background:
        rgba(0, 182, 122, 0.08);

    border-color:
        rgba(0, 182, 122, 0.32);

    box-shadow:
        0 8px 25px rgba(0, 182, 122, 0.08);
}

.footer-social-link.trustpilot-badge:hover i {
    color: #D4AF37;

    filter:
        drop-shadow(0 0 7px rgba(0, 182, 122, 0.32));
}


/* =========================================================
   INSTAGRAM
========================================================= */

.footer-social-link.instagram:hover {
    color: #e1306c;

    background:
        rgba(225, 48, 108, 0.10);

    border-color:
        rgba(225, 48, 108, 0.32);

    box-shadow:
        0 8px 22px rgba(225, 48, 108, 0.10);
}


/* =========================================================
   X / TWITTER
========================================================= */

.footer-social-link.twitter:hover {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.075);

    border-color:
        rgba(255, 255, 255, 0.17);

    box-shadow:
        0 8px 22px rgba(255, 255, 255, 0.04);
}


/* =========================================================
   FACEBOOK
========================================================= */

.footer-social-link.facebook:hover {
    color: #1877f2;

    background:
        rgba(24, 119, 242, 0.10);

    border-color:
        rgba(24, 119, 242, 0.32);

    box-shadow:
        0 8px 22px rgba(24, 119, 242, 0.10);
}


/* =========================================================
   FOOTER CHAT
========================================================= */

.footer-chat-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-top: 18px;

    color: #b7bec8;

    font-size: 13px;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.footer-chat-link:hover {
    color: #ffffff;

    transform: translateX(3px);
}

.footer-chat-icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: var(--teal-soft);

    background:
        rgba(141, 150, 165, 0.07);
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
}

.footer-column h3 {
    margin: 0 0 7px;

    color: #F8FAFC;

    font-size: 14px;
}

.footer-column a {
    color: #7f8995;

    font-size: 13px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column a:hover {
    color: var(--gold, #D4AF37);

    transform: translateX(3px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    min-height: 74px;

    border-top:
        1px solid rgba(255, 255, 255, 0.045);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;
}

.footer-bottom p {
    margin: 0;

    color: #626b76;

    font-size: 12px;
}

.footer-status {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #717b86;

    font-size: 12px;
}

.footer-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--teal);

    box-shadow:
        0 0 11px rgba(141, 150, 165, 0.45);

    animation:
        statusPulse 2s ease-in-out infinite;
}


/* =========================================================
   FOOTER STATUS ANIMATION
========================================================= */

@keyframes statusPulse {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;

        box-shadow:
            0 0 17px rgba(141, 150, 165, .58);
    }
}


/* =========================================================
   LIGHT THEME - HEADER
========================================================= */

html[data-theme="light"] .site-header {
    background:
        rgba(255, 255, 255, .94);

    border-bottom-color:
        rgba(14, 28, 37, .08);

    box-shadow:
        0 5px 22px rgba(17, 31, 40, .035);
}

html[data-theme="light"] .site-header.scrolled {
    background:
        rgba(255, 255, 255, .98);

    border-bottom-color:
        rgba(212, 175, 55, .14);

    box-shadow:
        0 12px 32px rgba(17, 31, 40, .07);
}

html[data-theme="light"] .nav-links a {
    color:
        #53616b;
}

html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active {
    color:
        #111c24;
}

html[data-theme="light"] .nav-login {
    color:
        #26333c;

    border-color:
        rgba(16, 29, 38, .10);

    background:
        rgba(16, 29, 38, .02);
}

html[data-theme="light"] .nav-control-btn,
html[data-theme="light"] .theme-toggle-btn {
    color:
        #26333c;

    border-color:
        rgba(16, 29, 38, .10);

    background:
        #ffffff;
}

html[data-theme="light"] .nav-icon-btn,
html[data-theme="light"] .mobile-menu-btn {
    color:
        #35434c;
}


/* =========================================================
   LIGHT THEME - DROPDOWN
========================================================= */

html[data-theme="light"] .nav-dropdown-menu {
    border-color:
        rgba(16, 29, 38, .10);

    background:
        #ffffff;

    box-shadow:
        0 22px 48px rgba(17, 31, 40, .12);
}

html[data-theme="light"] .dropdown-option {
    color:
        #35424b;
}

html[data-theme="light"] .dropdown-option:hover {
    color:
        #111c24;

    background:
        rgba(212, 175, 55, .09);
}


/* =========================================================
   FOOTER RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .footer-grid {
        grid-template-columns:
            1.4fr 1fr 1fr;

        gap: 40px;
    }

    .footer-brand {
        grid-column:
            1 / -1;

        max-width: 430px;
    }
}


@media (max-width: 900px) {

    .footer-grid {
        grid-template-columns:
            1.5fr 1fr;

        gap: 45px 35px;
    }
}


@media (max-width: 700px) {

    .footer-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 38px 26px;
    }

    .footer-brand {
        grid-column:
            1 / -1;
    }

    .footer-bottom {
        padding: 20px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }
}


@media (max-width: 600px) {

    .site-footer {
        padding-top: 48px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-bottom: 38px;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-brand p {
        max-width: 320px;
    }

    .footer-socials {
        flex-wrap: wrap;

        gap: 8px;

        margin-top: 18px;
    }

    .footer-social-link {
        width: 39px;
        height: 39px;
    }

    .footer-social-link.trustpilot-badge {
        width: auto;

        min-width: 108px;

        padding: 0 13px;
    }

    .footer-bottom {
        min-height: auto;

        padding: 22px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }
}


/* =========================================================
   MOBILE NAV
========================================================= */

@media (max-width: 950px) {

    .navbar {
        position: relative;
    }

    .nav-links {
        position: absolute;

        top: 70px;

        left: 0;
        right: 0;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 4px;

        padding: 14px;

        border-radius: 14px;

        background:
            #080A0E;

        border:
            1px solid rgba(255, 255, 255, 0.07);

        box-shadow:
            0 24px 50px rgba(0, 0, 0, 0.32);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        width: 100%;

        padding: 12px 10px;
    }

    .nav-links a::after {
        display: none;
    }

    .nav-links a.active {
        background:
            rgba(212, 175, 55, 0.06);

        border-radius: 8px;
    }

    .mobile-menu-btn {
        display: grid;

        place-items: center;
    }


    /* LIGHT MOBILE NAV */

    html[data-theme="light"] .nav-links {
        background:
            #ffffff;

        border-color:
            rgba(17, 31, 40, .08);

        box-shadow:
            0 24px 50px rgba(17, 31, 40, .12);
    }
}


/* =========================================================
   HEADER MOBILE CONTROLS
========================================================= */

@media (max-width: 1100px) {

    .nav-control-btn {
        min-width: auto;

        padding:
            0 10px;
    }
}


@media (max-width: 800px) {

    .nav-dropdown {
        display: none;
    }
}


/* =========================================================
   SMALL MOBILE HEADER
========================================================= */

@media (max-width: 650px) {

    .site-header {
        height: 72px;
    }

    .brand-logo {
        width: 92px;
        height: 48px;
    }

    .nav-login,
    .nav-icon-btn {
        display: none;
    }

    .nav-signup {
        height: 38px;

        min-width: 82px;

        padding: 0 13px;

        font-size: 12px;
    }

    .nav-links {
        top: 64px;
    }
}


/* =========================================================
   VERY SMALL MOBILE FOOTER
========================================================= */

@media (max-width: 430px) {

    .footer-grid {
        grid-template-columns:
            1fr;
    }

    .footer-brand {
        grid-column: auto;
    }
}


/* =========================================================
   FINAL SHARED DARK THEME NORMALIZATION
========================================================= */

html:not([data-theme="light"]) .site-header {
    background:
        rgba(0, 0, 0, 0.94);

    border-bottom:
        1px solid #252936;
}

html:not([data-theme="light"]) .site-header.scrolled {
    background:
        rgba(0, 0, 0, 0.985);

    border-bottom-color:
        rgba(0, 168, 255, 0.20);
}

html:not([data-theme="light"]) .nav-links a:hover,
html:not([data-theme="light"]) .nav-links a.active {
    color:
        var(--primary);
}


/* Final Navbar CTA from original stylesheet */

html:not([data-theme="light"]) .nav-signup {
    background:
        #D4AF37;

    color:
        #FFFFFF;

    box-shadow:
        0 10px 24px rgba(212, 175, 55, 0.16);
}

html:not([data-theme="light"]) .nav-signup:hover {
    background:
        #5573E6;

    box-shadow:
        0 14px 30px rgba(212, 175, 55, 0.22);
}


/* Footer stays neutral */

html:not([data-theme="light"]) footer,
html:not([data-theme="light"]) .site-footer {
    background:
        #050609;

    border-top-color:
        #252936;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   VULTREX FOOTER — BLACK / GOLD / WHITE
   Single source of truth; shared across light and dark modes.
========================================================= */
.site-footer,
html[data-theme="light"] .site-footer,
html:not([data-theme="light"]) .site-footer {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 58px 0 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, .045), transparent 58%), #080808 !important;
    border-top: 1px solid rgba(212, 175, 55, .24) !important;
    color: #f5f2ea;
}

.site-footer::before,
html[data-theme="light"] .site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1160px, 88%);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .65), transparent) !important;
    pointer-events: none;
}

.site-footer>.container {
    position: relative;
    z-index: 1;
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.45fr .85fr .85fr .85fr;
    gap: clamp(32px, 4vw, 72px);
    padding-bottom: 44px;
}

.site-footer .footer-brand {
    max-width: 360px;
}

.site-footer .footer-logo-link {
    margin-bottom: 14px;
}

.site-footer .footer-logo {
    display: block;
    width: 142px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, .10));
    transition: transform .22s ease, filter .22s ease;
}

.site-footer .footer-logo-link:hover .footer-logo {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 14px rgba(212, 175, 55, .2));
}

.site-footer .footer-brand p {
    max-width: 315px;
    color: #a8a49b !important;
    font-size: 13px;
    line-height: 1.75;
}

.site-footer .footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.site-footer .footer-social-link,
html[data-theme="light"] .site-footer .footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #d5d0c6 !important;
    background: #121212 !important;
    border: 1px solid rgba(212, 175, 55, .20) !important;
    box-shadow: none !important;
    text-decoration: none;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.site-footer .footer-social-link:hover,
html[data-theme="light"] .site-footer .footer-social-link:hover {
    transform: translateY(-3px);
    color: #e7c65b !important;
    background: #1b1810 !important;
    border-color: rgba(212, 175, 55, .65) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25) !important;
}

.site-footer .footer-social-link.trustpilot-badge {
    width: auto;
    min-width: 116px;
    padding: 0 14px;
    gap: 8px;
    color: #f5f2ea !important;
}

.site-footer .footer-social-link.trustpilot-badge i {
    color: #d4af37 !important;
    filter: none !important;
}

.site-footer .footer-chat-link,
html[data-theme="light"] .site-footer .footer-chat-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-top: 18px;
    padding: 8px 13px 8px 9px;
    color: #e0dbd0 !important;
    background: #111111 !important;
    border: 1px solid rgba(212, 175, 55, .26) !important;
    border-radius: 11px;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.site-footer .footer-chat-link:hover,
html[data-theme="light"] .site-footer .footer-chat-link:hover {
    color: #e7c65b !important;
    border-color: #d4af37 !important;
    transform: translateY(-2px);
}

.site-footer .footer-chat-icon,
html[data-theme="light"] .site-footer .footer-chat-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #d4af37 !important;
    background: rgba(212, 175, 55, .09) !important;
    border: 1px solid rgba(212, 175, 55, .18);
    border-radius: 8px;
}

.site-footer .footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.site-footer .footer-column h3,
html[data-theme="light"] .site-footer .footer-column h3 {
    position: relative;
    margin: 0 0 11px;
    padding-bottom: 11px;
    color: #f5f2ea !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .035em;
}

.site-footer .footer-column h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #d4af37, rgba(212, 175, 55, .16));
}

.site-footer .footer-column a,
html[data-theme="light"] .site-footer .footer-column a {
    color: #aaa59c !important;
    font-size: 13px;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.site-footer .footer-column a:hover,
html[data-theme="light"] .site-footer .footer-column a:hover {
    color: #e7c65b !important;
    transform: translateX(3px);
}

.site-footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 70px;
    gap: 28px;
    border-top: 1px solid rgba(212, 175, 55, .13) !important;
}

.site-footer .footer-bottom p,
html[data-theme="light"] .site-footer .footer-bottom p,
html[data-theme="light"] .site-footer .footer-bottom p span {
    color: #a8a49b !important;
    font-size: 12px;
}

.site-footer .footer-status,
html[data-theme="light"] .site-footer .footer-status {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #b5aea1 !important;
    font-size: 12px;
}

.site-footer .footer-status span:first-child,
html[data-theme="light"] .site-footer .footer-status span:first-child {
    display: block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #d4af37 !important;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .08), 0 0 12px rgba(212, 175, 55, .25) !important;
    animation: vultrexFooterGoldPulse 2.2s ease-in-out infinite;
}

.site-footer .footer-status span:last-child {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    animation: none;
}

@keyframes vultrexFooterGoldPulse {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 0 5px rgba(212, 175, 55, .09), 0 0 17px rgba(212, 175, 55, .4);
    }
}

@media (max-width: 1100px) {
    .site-footer .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 38px 42px;
    }

    .site-footer .footer-brand {
        grid-column: 1 / -1;
        max-width: 440px;
    }
}

@media (max-width: 700px) {
    .site-footer {
        padding-top: 48px !important;
    }

    .site-footer .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 28px;
        padding-bottom: 38px;
    }

    .site-footer .footer-brand {
        grid-column: 1 / -1;
    }

    .site-footer .footer-bottom {
        min-height: auto;
        padding: 20px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 500px) {
    .site-footer .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .site-footer .footer-brand {
        grid-column: auto;
    }

    .site-footer .footer-logo {
        width: 130px;
        height: 66px;
    }
}

/* =========================================================
   VULTREX NAVBAR — BLACK + EMERALD FINAL
   Keeps navbar black in both dark and light modes.
========================================================= */

.site-header,
html[data-theme="light"] .site-header {
    background: rgba(2, 5, 4, .97) !important;
    border-bottom: 1px solid rgba(45, 215, 164, .16) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header.scrolled,
html[data-theme="light"] .site-header.scrolled {
    background: rgba(1, 4, 3, .99) !important;
    border-bottom-color: rgba(45, 215, 164, .28) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .20) !important;
}

/* Logo */
.brand:hover .brand-logo {
    filter: drop-shadow(0 0 12px rgba(45, 215, 164, .20)) !important;
}

/* Links */
.nav-links a,
html[data-theme="light"] .nav-links a {
    color: #8fa29b !important;
    background: transparent !important;
    -webkit-text-fill-color: #8fa29b !important;
}

.nav-links a::after,
html[data-theme="light"] .nav-links a::after {
    background: #2bd7a5 !important;
    box-shadow: 0 0 12px rgba(43, 215, 165, .25);
}

.nav-links a:hover,
.nav-links a.active,
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active {
    color: #36ddb0 !important;
    -webkit-text-fill-color: #36ddb0 !important;
}

.nav-links a.active {
    background: rgba(212, 175, 55, .075) !important;
    border-radius: 8px;
}

/* Search / icon buttons */
.nav-icon-btn,
.mobile-menu-btn,
html[data-theme="light"] .nav-icon-btn,
html[data-theme="light"] .mobile-menu-btn {
    color: #a7b8b1 !important;
}

.nav-icon-btn:hover,
.mobile-menu-btn:hover {
    color: #36ddb0 !important;
    background: rgba(212, 175, 55, .075) !important;
}

/* Language, currency and theme controls */
.nav-control-btn,
.theme-toggle-btn,
html[data-theme="light"] .nav-control-btn,
html[data-theme="light"] .theme-toggle-btn {
    color: #dce7e2 !important;
    -webkit-text-fill-color: #dce7e2 !important;
    background: rgba(255, 255, 255, .025) !important;
    border: 1px solid rgba(126, 160, 148, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02) !important;
}

.nav-control-btn:hover,
.theme-toggle-btn:hover,
html[data-theme="light"] .nav-control-btn:hover,
html[data-theme="light"] .theme-toggle-btn:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(212, 175, 55, .075) !important;
    border-color: rgba(45, 215, 164, .38) !important;
}

.dropdown-arrow {
    color: #71877e !important;
}

/* Login / admin button */
.nav-login,
html[data-theme="light"] .nav-login {
    color: #e4ece9 !important;
    -webkit-text-fill-color: #e4ece9 !important;
    background: rgba(255, 255, 255, .018) !important;
    border: 1px solid rgba(126, 160, 148, .18) !important;
}

.nav-login:hover,
html[data-theme="light"] .nav-login:hover {
    color: #ffffff !important;
    background: rgba(212, 175, 55, .07) !important;
    border-color: rgba(45, 215, 164, .32) !important;
}

/* Main CTA / logout */
.nav-signup,
html:not([data-theme="light"]) .nav-signup,
html[data-theme="light"] .nav-signup {
    color: #02100b !important;
    -webkit-text-fill-color: #02100b !important;
    background: linear-gradient(135deg, #45e1b3, #22c997) !important;
    border: 1px solid rgba(79, 231, 185, .32) !important;
    box-shadow: 0 9px 24px rgba(212, 175, 55, .14) !important;
}

.nav-signup:hover,
html:not([data-theme="light"]) .nav-signup:hover,
html[data-theme="light"] .nav-signup:hover {
    color: #010a07 !important;
    background: linear-gradient(135deg, #58e8bd, #2fd6a3) !important;
    box-shadow: 0 12px 28px rgba(212, 175, 55, .22) !important;
}

/* Dropdowns stay dark in both themes */
.nav-dropdown-menu,
html[data-theme="light"] .nav-dropdown-menu {
    background: #07100d !important;
    border-color: rgba(45, 215, 164, .16) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .34) !important;
}

.dropdown-option,
html[data-theme="light"] .dropdown-option {
    color: #b8c8c2 !important;
    -webkit-text-fill-color: #b8c8c2 !important;
}

.dropdown-option:hover,
html[data-theme="light"] .dropdown-option:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(212, 175, 55, .09) !important;
}

.option-code {
    color: #35dcae !important;
}

/* Mobile menu */
@media (max-width: 950px) {

    .nav-links,
    html[data-theme="light"] .nav-links {
        background: #050b09 !important;
        border-color: rgba(45, 215, 164, .16) !important;
        box-shadow: 0 24px 50px rgba(0, 0, 0, .35) !important;
    }

    .nav-links a.active,
    html[data-theme="light"] .nav-links a.active {
        background: rgba(212, 175, 55, .09) !important;
    }
}

/* =========================================================
   VULTREX NAVBAR — CUSTOMER NOTIFICATIONS
========================================================= */

.nav-notifications {
    position: relative;

    display: inline-flex;
    align-items: center;

    flex-shrink: 0;
}


/* =========================================================
   NOTIFICATION BELL BUTTON
========================================================= */

.nav-notification-button {
    position: relative;

    width: 42px;
    height: 42px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    border:
        1px solid rgba(126, 160, 148, .18);

    color: #dce7e2;

    background:
        rgba(255, 255, 255, .025);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .02);

    cursor: pointer;

    outline: none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.nav-notification-button:hover,
.nav-notification-button[aria-expanded="true"] {
    color: #36ddb0;

    background:
        rgba(212, 175, 55, .075);

    border-color:
        rgba(45, 215, 164, .38);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 0 18px rgba(45, 215, 164, .045);

    transform:
        translateY(-1px);
}


.nav-notification-button:focus-visible {
    outline:
        2px solid rgba(45, 215, 164, .42);

    outline-offset: 3px;
}


/* =========================================================
   BELL ICON
========================================================= */

.nav-notification-icon {
    width: 20px;
    height: 20px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}


/* =========================================================
   UNREAD BADGE
========================================================= */

.nav-notification-badge {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    border:
        2px solid #020504;

    color: #02100b;

    background:
        #39dfad;

    box-shadow:
        0 0 0 2px rgba(45, 215, 164, .05),
        0 3px 10px rgba(212, 175, 55, .22);

    font-size: 9px;
    font-weight: 900;
    line-height: 1;

    pointer-events: none;
}


.nav-notification-badge[hidden] {
    display: none !important;
}


/* =========================================================
   NOTIFICATION DROPDOWN
========================================================= */

.nav-notification-dropdown {
    position: absolute;

    top: calc(100% + 13px);
    right: 0;

    width: 390px;
    max-width:
        calc(100vw - 28px);

    overflow: hidden;

    border-radius: 16px;

    border:
        1px solid rgba(45, 215, 164, .17);

    background:
        linear-gradient(180deg,
            rgba(6, 19, 15, .995),
            rgba(3, 12, 9, .995));

    box-shadow:
        0 26px 70px rgba(0, 0, 0, .48),
        0 0 30px rgba(212, 175, 55, .035),
        inset 0 1px 0 rgba(255, 255, 255, .025);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    z-index: 1700;

    transform-origin:
        top right;

    animation:
        vultrexNotificationDropdownIn .18s ease-out;
}


.nav-notification-dropdown[hidden] {
    display: none !important;
}


@keyframes vultrexNotificationDropdownIn {

    from {
        opacity: 0;

        transform:
            translateY(-5px) scale(.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }
}


/* =========================================================
   DROPDOWN HEADER
========================================================= */

.nav-notification-dropdown-header {
    min-height: 72px;

    padding:
        16px 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    border-bottom:
        1px solid rgba(113, 151, 137, .11);
}


.nav-notification-dropdown-header>div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.nav-notification-dropdown-header strong {
    color: #f2f8f5;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: -.01em;
}


.nav-notification-dropdown-header span {
    color: #758b82;

    font-size: 10px;
    font-weight: 500;
}


.nav-notification-view-all-top {
    flex-shrink: 0;

    color: #34dbaa;

    font-size: 10px;
    font-weight: 750;

    text-decoration: none;

    transition:
        color .18s ease,
        transform .18s ease;
}


.nav-notification-view-all-top:hover {
    color: #61ebc2;

    transform:
        translateX(1px);
}


/* =========================================================
   NOTIFICATION LIST
========================================================= */

.nav-notification-dropdown-list {
    max-height: 360px;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(45, 215, 164, .20) transparent;
}


.nav-notification-dropdown-list::-webkit-scrollbar {
    width: 5px;
}


.nav-notification-dropdown-list::-webkit-scrollbar-track {
    background: transparent;
}


.nav-notification-dropdown-list::-webkit-scrollbar-thumb {
    border-radius: 99px;

    background:
        rgba(45, 215, 164, .20);
}


/* =========================================================
   LOADING / EMPTY STATE
========================================================= */

.nav-notification-loading,
.nav-notification-empty {
    min-height: 126px;

    padding: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    color: #758b82;

    font-size: 11px;

    text-align: center;
}


.nav-notification-loading-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        #35dcae;

    box-shadow:
        0 0 11px rgba(53, 220, 174, .38);

    animation:
        vultrexNotificationLoading 1.2s ease-in-out infinite;
}


@keyframes vultrexNotificationLoading {

    0%,
    100% {
        opacity: .35;

        transform:
            scale(.8);
    }

    50% {
        opacity: 1;

        transform:
            scale(1);
    }
}


/* =========================================================
   NOTIFICATION ITEM
========================================================= */

.nav-notification-item {
    position: relative;

    min-height: 84px;

    padding:
        14px 17px;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid rgba(113, 151, 137, .075);

    background:
        transparent;

    transition:
        background .18s ease;
}


.nav-notification-item:last-child {
    border-bottom: 0;
}


.nav-notification-item:hover {
    background:
        rgba(212, 175, 55, .055);
}


.nav-notification-item.unread {
    background:
        linear-gradient(90deg,
            rgba(212, 175, 55, .075),
            rgba(212, 175, 55, .018));
}


.nav-notification-item.unread:hover {
    background:
        linear-gradient(90deg,
            rgba(212, 175, 55, .11),
            rgba(212, 175, 55, .035));
}


.nav-notification-item.unread::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 2px;

    background:
        #35dcae;

    box-shadow:
        0 0 10px rgba(53, 220, 174, .22);
}


/* =========================================================
   ITEM ICON
========================================================= */

.nav-notification-item-icon {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    margin-top: 1px;

    border-radius: 10px;

    border:
        1px solid rgba(45, 215, 164, .17);

    color: #36ddb0;

    background:
        rgba(212, 175, 55, .075);
}


.nav-notification-item-icon svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   ITEM CONTENT
========================================================= */

.nav-notification-item-content {
    min-width: 0;

    flex: 1;
}


.nav-notification-item-top {
    margin-bottom: 4px;

    display: flex;
    align-items: center;

    gap: 7px;
}


.nav-notification-item-type {
    color: #35dcae;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.nav-notification-item-time {
    color: #61776e;

    font-size: 8px;
    font-weight: 600;
}


.nav-notification-item-title {
    margin: 0 0 3px;

    overflow: hidden;

    color: #e7f0ec;

    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.nav-notification-item-message {
    margin: 0;

    display: -webkit-box;

    overflow: hidden;

    color: #81968d;

    font-size: 10px;
    line-height: 1.45;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* =========================================================
   UNREAD DOT
========================================================= */

.nav-notification-item-dot {
    width: 7px;
    height: 7px;

    margin-top: 14px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        #39dfad;

    box-shadow:
        0 0 10px rgba(57, 223, 173, .40);
}


/* =========================================================
   DROPDOWN FOOTER
========================================================= */

.nav-notification-dropdown-footer {
    padding:
        9px;

    border-top:
        1px solid rgba(113, 151, 137, .11);

    background:
        rgba(0, 0, 0, .12);
}


.nav-notification-dropdown-footer a {
    min-height: 39px;

    padding:
        0 11px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border-radius: 9px;

    color: #a9bbb4;

    text-decoration: none;

    font-size: 10px;
    font-weight: 650;

    transition:
        color .18s ease,
        background .18s ease;
}


.nav-notification-dropdown-footer a:hover {
    color: #ffffff;

    background:
        rgba(212, 175, 55, .075);
}


.nav-notification-dropdown-footer svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   NOTIFICATION BELL PULSE
   JS will add .has-new-notification briefly.
========================================================= */

.nav-notification-button.has-new-notification {
    animation:
        vultrexNotificationBell .55s ease;
}


@keyframes vultrexNotificationBell {

    0%,
    100% {
        transform:
            rotate(0deg);
    }

    20% {
        transform:
            rotate(-9deg);
    }

    40% {
        transform:
            rotate(8deg);
    }

    60% {
        transform:
            rotate(-5deg);
    }

    80% {
        transform:
            rotate(3deg);
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 800px) {

    .nav-notification-dropdown {
        position: fixed;

        top: 76px;
        right: 14px;

        width:
            min(390px, calc(100vw - 28px));
    }
}


@media (max-width: 650px) {

    /*
     * Keep the notification bell visible even though
     * regular .nav-icon-btn elements are hidden here.
     */

    .nav-notification-button {
        width: 38px;
        height: 38px;
    }


    .nav-notification-icon {
        width: 18px;
        height: 18px;
    }


    .nav-notification-dropdown {
        top: 70px;
    }
}


@media (max-width: 430px) {

    .nav-notification-dropdown {
        right: 10px;

        width:
            calc(100vw - 20px);

        border-radius: 14px;
    }


    .nav-notification-dropdown-header {
        padding:
            14px;
    }


    .nav-notification-item {
        padding:
            13px 14px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .nav-notification-dropdown,
    .nav-notification-button.has-new-notification,
    .nav-notification-loading-dot {
        animation: none !important;
    }
}

/* =========================================================
   VULTREX NAVBAR — PREMIUM EMERALD REDESIGN
   Final override
========================================================= */

.site-header {
    height: 82px;

    background:
        rgba(5, 8, 10, 0.94);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.055);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.14);
}

.site-header.scrolled {
    background:
        rgba(3, 6, 8, 0.985);

    border-bottom-color:
        rgba(212, 175, 55, 0.16);

    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   MAIN NAVBAR
========================================================= */

.navbar {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 22px;
}


/* =========================================================
   LOGO
========================================================= */

.brand {
    flex-shrink: 0;

    height: 100%;

    display: flex;
    align-items: center;
}

.brand-logo {
    width: 110px;
    height: 58px;

    object-fit: contain;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.brand:hover .brand-logo {
    transform:
        scale(1.035);

    filter:
        drop-shadow(0 0 12px rgba(212, 175, 55, 0.22));
}


/* =========================================================
   NAVIGATION CENTER
========================================================= */

.nav-center {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.nav-links {
    flex: 0 1 auto;

    display: flex;
    align-items: center;

    gap: 3px;

    padding: 5px;

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius:
        16px;

    background:
        rgba(255, 255, 255, 0.025);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.nav-links a {
    position: relative;

    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        0 12px;

    border-radius:
        11px;

    color:
        #9ca7a4;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1;

    white-space:
        nowrap;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* Remove old underline */

.nav-links a::after {
    display: none !important;
}


/* Hover */

.nav-links a:hover {
    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.045);

    transform:
        translateY(-1px);
}


/* Active page */

.nav-links a.active {
    color:
        #ffffff;

    background:
        linear-gradient(135deg,
            rgba(212, 175, 55, 0.18),
            rgba(212, 175, 55, 0.075));

    box-shadow:
        inset 0 0 0 1px rgba(231, 198, 91, 0.18),

        0 6px 18px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   NAV LINK ICONS
========================================================= */

.nav-link-icon {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    opacity:
        0.78;

    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}

.nav-links a:hover .nav-link-icon,

.nav-links a.active .nav-link-icon {
    color:
        #E7C65B;

    opacity:
        1;
}


/* Small chevron */

.nav-link-chevron {
    width: 12px;
    height: 12px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    opacity:
        0.45;
}


/* =========================================================
   RIGHT ACTIONS
========================================================= */

.nav-actions {
    display: flex;
    align-items: center;

    gap: 7px;

    flex-shrink: 0;
}


/* =========================================================
   COMMON SVG ICON
========================================================= */

.header-svg-icon {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   SEARCH
========================================================= */

.nav-icon-btn {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius:
        11px;

    color:
        #a8b1af;

    background:
        rgba(255, 255, 255, 0.025);

    cursor:
        pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.nav-icon-btn:hover {
    color:
        #E7C65B;

    background:
        rgba(212, 175, 55, 0.075);

    border-color:
        rgba(231, 198, 91, 0.18);

    box-shadow:
        0 0 18px rgba(212, 175, 55, 0.07);

    transform:
        translateY(-1px);
}


/* =========================================================
   LANGUAGE / CURRENCY
========================================================= */

.nav-dropdown {
    position: relative;
}

.nav-control-btn {
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        0 11px;

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius:
        11px;

    color:
        #c4ccca;

    background:
        rgba(255, 255, 255, 0.025);

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        650;

    cursor:
        pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.nav-control-btn:hover {
    color:
        #ffffff;

    background:
        rgba(212, 175, 55, 0.065);

    border-color:
        rgba(231, 198, 91, 0.16);

    box-shadow:
        0 0 18px rgba(212, 175, 55, 0.055);
}

.nav-language-btn {
    min-width:
        70px;
}

.nav-currency-btn {
    min-width:
        74px;
}

.currency-symbol {
    color:
        #E7C65B;

    font-weight:
        750;
}

.dropdown-arrow {
    margin-left:
        1px;

    color:
        #687370;

    font-size:
        11px;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.nav-control-btn:hover .dropdown-arrow {
    color:
        #E7C65B;
}


/* =========================================================
   LANGUAGE / CURRENCY DROPDOWN MENUS
========================================================= */

.nav-dropdown-menu {
    position: absolute;

    top:
        calc(100% + 11px);

    right: 0;

    z-index:
        1200;

    min-width:
        175px;

    padding:
        7px;

    border:
        1px solid rgba(255, 255, 255, 0.075);

    border-radius:
        14px;

    background:
        rgba(9, 13, 15, 0.985);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.42);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}

.dropdown-option {
    width:
        100%;

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 10px;

    border:
        0;

    border-radius:
        9px;

    color:
        #abb5b2;

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        12px;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.dropdown-option:hover {
    color:
        #ffffff;

    background:
        rgba(212, 175, 55, 0.085);
}

.option-code {
    min-width:
        25px;

    color:
        #E7C65B;

    font-size:
        10px;

    font-weight:
        750;
}

.currency-option-symbol {
    margin-left:
        auto;

    color:
        #E7C65B;

    font-weight:
        700;
}


/* =========================================================
   THEME BUTTON
========================================================= */

.theme-toggle-btn {
    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius:
        11px;

    color:
        #a8b1af;

    background:
        rgba(255, 255, 255, 0.025);

    cursor:
        pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.theme-toggle-btn:hover {
    color:
        #E7C65B;

    background:
        rgba(212, 175, 55, 0.07);

    border-color:
        rgba(231, 198, 91, 0.17);

    transform:
        translateY(-1px);
}


/* =========================================================
   AUTH BUTTONS
========================================================= */

.nav-auth-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}

.nav-login,
.nav-signup {
    height:
        40px;

    min-width:
        auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 15px;

    border-radius:
        11px;

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.nav-login {
    color:
        #c4ccca;

    border:
        1px solid rgba(255, 255, 255, 0.075);

    background:
        rgba(255, 255, 255, 0.025);
}

.nav-login:hover {
    color:
        #ffffff;

    border-color:
        rgba(231, 198, 91, 0.16);

    background:
        rgba(212, 175, 55, 0.065);

    transform:
        translateY(-1px);
}

.nav-signup,
html:not([data-theme="light"]) .nav-signup {
    color:
        #03120d;

    border:
        1px solid rgba(231, 198, 91, 0.3);

    background:
        linear-gradient(135deg,
            #E7C65B,
            #D4AF37);

    box-shadow:
        0 8px 20px rgba(212, 175, 55, 0.14);
}

.nav-signup:hover,
html:not([data-theme="light"]) .nav-signup:hover {
    color:
        #020b08;

    background:
        linear-gradient(135deg,
            #6ee7b7,
            #E7C65B);

    box-shadow:
        0 11px 25px rgba(212, 175, 55, 0.2);

    transform:
        translateY(-1px);
}


/* =========================================================
   NOTIFICATION BUTTON
========================================================= */

.nav-notifications {
    position:
        relative;
}

.nav-notification-button {
    position:
        relative;

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius:
        11px;

    color:
        #a8b1af;

    background:
        rgba(255, 255, 255, 0.025);

    cursor:
        pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.nav-notification-button:hover {
    color:
        #E7C65B;

    background:
        rgba(212, 175, 55, 0.07);

    border-color:
        rgba(231, 198, 91, 0.17);

    transform:
        translateY(-1px);
}

.nav-notification-icon {
    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.nav-notification-badge {
    position:
        absolute;

    top:
        -4px;

    right:
        -4px;

    min-width:
        17px;

    height:
        17px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 4px;

    border:
        2px solid #06090b;

    border-radius:
        999px;

    color:
        #03120d;

    background:
        #E7C65B;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;
}


/* =========================================================
   NOTIFICATION DROPDOWN
========================================================= */

.nav-notification-dropdown {
    position:
        absolute;

    top:
        calc(100% + 12px);

    right:
        0;

    z-index:
        1250;

    width:
        355px;

    overflow:
        hidden;

    border:
        1px solid rgba(255, 255, 255, 0.075);

    border-radius:
        17px;

    background:
        rgba(8, 12, 14, 0.985);

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.48);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}

.nav-notification-dropdown-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        16px 17px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.055);
}

.nav-notification-dropdown-header>div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}

.nav-notification-dropdown-header strong {
    color:
        #f3f7f5;

    font-size:
        13px;
}

.nav-notification-dropdown-header span {
    color:
        #697571;

    font-size:
        10px;
}

.nav-notification-view-all-top {
    color:
        #E7C65B;

    font-size:
        11px;

    font-weight:
        650;
}

.nav-notification-dropdown-list {
    max-height:
        360px;

    overflow-y:
        auto;
}

.nav-notification-loading {
    min-height:
        95px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        #7e8986;

    font-size:
        11px;
}

.nav-notification-loading-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #E7C65B;

    box-shadow:
        0 0 12px rgba(231, 198, 91, 0.45);
}

.nav-notification-dropdown-footer {
    padding:
        8px;

    border-top:
        1px solid rgba(255, 255, 255, 0.055);
}

.nav-notification-dropdown-footer a {
    min-height:
        39px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border-radius:
        9px;

    color:
        #aab4b1;

    font-size:
        11px;

    font-weight:
        600;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.nav-notification-dropdown-footer a:hover {
    color:
        #E7C65B;

    background:
        rgba(212, 175, 55, 0.07);
}

.nav-notification-dropdown-footer svg {
    width:
        14px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   PROFILE / MY ACCOUNT
========================================================= */

.nav-profile {
    position:
        relative;
}

.nav-profile-button {
    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        0 11px 0 7px;

    border:
        1px solid rgba(231, 198, 91, 0.18);

    border-radius:
        12px;

    color:
        #e9f3ef;

    background:
        linear-gradient(135deg,
            rgba(212, 175, 55, 0.115),
            rgba(212, 175, 55, 0.045));

    font-family:
        inherit;

    cursor:
        pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.nav-profile-button:hover {
    border-color:
        rgba(231, 198, 91, 0.32);

    background:
        linear-gradient(135deg,
            rgba(212, 175, 55, 0.17),
            rgba(212, 175, 55, 0.07));

    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.07);

    transform:
        translateY(-1px);
}

.nav-profile-avatar {
    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    color:
        #E7C65B;

    background:
        rgba(212, 175, 55, 0.11);
}

.nav-profile-avatar svg {
    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.nav-profile-label {
    font-size:
        12px;

    font-weight:
        650;

    white-space:
        nowrap;
}

.nav-profile-chevron {
    width:
        12px;

    height:
        12px;

    fill:
        none;

    stroke:
        #6f7a77;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform 0.2s ease;
}

.nav-profile-button[aria-expanded="true"] .nav-profile-chevron {
    transform:
        rotate(180deg);
}


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

.nav-profile-menu {
    position:
        absolute;

    top:
        calc(100% + 12px);

    right:
        0;

    z-index:
        1250;

    width:
        255px;

    overflow:
        hidden;

    border:
        1px solid rgba(255, 255, 255, 0.075);

    border-radius:
        17px;

    background:
        rgba(8, 12, 14, 0.99);

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.48);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}

.nav-profile-menu-header {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        15px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.055);
}

.nav-profile-menu-avatar {
    width:
        36px;

    height:
        36px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    color:
        #E7C65B;

    background:
        rgba(212, 175, 55, 0.11);

    border:
        1px solid rgba(231, 198, 91, 0.12);
}

.nav-profile-menu-avatar svg {
    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.nav-profile-menu-header>div {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}

.nav-profile-menu-header strong {
    color:
        #f0f5f3;

    font-size:
        12px;
}

.nav-profile-menu-header span {
    overflow:
        hidden;

    color:
        #6f7b77;

    font-size:
        9px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}

.nav-profile-menu-links {
    padding:
        7px;
}

.nav-profile-menu-links a,
.nav-profile-logout {
    min-height:
        39px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 10px;

    border-radius:
        9px;

    color:
        #9da8a5;

    font-size:
        11px;

    font-weight:
        550;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.nav-profile-menu-links a:hover {
    color:
        #ffffff;

    background:
        rgba(212, 175, 55, 0.075);
}

.nav-profile-menu-links svg,
.nav-profile-logout svg {
    width:
        15px;

    height:
        15px;

    flex-shrink:
        0;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.nav-profile-menu-links a:hover svg {
    color:
        #E7C65B;
}

.nav-profile-menu-footer {
    padding:
        7px;

    border-top:
        1px solid rgba(255, 255, 255, 0.055);
}

.nav-profile-logout {
    color:
        #f08b8b;
}

.nav-profile-logout:hover {
    color:
        #ffaaaa;

    background:
        rgba(239, 68, 68, 0.075);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn {
    width:
        40px;

    height:
        40px;

    display:
        none;

    place-items:
        center;

    padding:
        0;

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, 0.025);

    cursor:
        pointer;
}

.mobile-menu-line {
    position:
        absolute;

    width:
        17px;

    height:
        1.5px;

    border-radius:
        10px;

    background:
        #aeb7b5;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        background 0.2s ease;
}

.mobile-menu-line:nth-child(1) {
    transform:
        translateY(-5px);
}

.mobile-menu-line:nth-child(2) {
    transform:
        translateY(0);
}

.mobile-menu-line:nth-child(3) {
    transform:
        translateY(5px);
}

.mobile-menu-btn:hover .mobile-menu-line {
    background:
        #E7C65B;
}

.mobile-menu-btn[aria-expanded="true"] .mobile-menu-line:nth-child(1) {
    transform:
        rotate(45deg);
}

.mobile-menu-btn[aria-expanded="true"] .mobile-menu-line:nth-child(2) {
    opacity:
        0;
}

.mobile-menu-btn[aria-expanded="true"] .mobile-menu-line:nth-child(3) {
    transform:
        rotate(-45deg);
}


/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"] .site-header {
    background:
        rgba(255, 255, 255, 0.94);

    border-bottom-color:
        rgba(15, 23, 42, 0.07);

    box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.045);
}

html[data-theme="light"] .nav-links {
    border-color:
        rgba(15, 23, 42, 0.075);

    background:
        rgba(15, 23, 42, 0.025);
}

html[data-theme="light"] .nav-links a {
    color:
        #59635f;
}

html[data-theme="light"] .nav-links a:hover {
    color:
        #101815;

    background:
        rgba(15, 23, 42, 0.045);
}

html[data-theme="light"] .nav-links a.active {
    color:
        #087b58;

    background:
        rgba(212, 175, 55, 0.09);

    box-shadow:
        inset 0 0 0 1px rgba(212, 175, 55, 0.13);
}

html[data-theme="light"] .nav-icon-btn,

html[data-theme="light"] .nav-control-btn,

html[data-theme="light"] .theme-toggle-btn,

html[data-theme="light"] .nav-notification-button,

html[data-theme="light"] .mobile-menu-btn {
    color:
        #59635f;

    border-color:
        rgba(15, 23, 42, 0.075);

    background:
        rgba(15, 23, 42, 0.025);
}

html[data-theme="light"] .nav-profile-button {
    color:
        #15352b;

    background:
        rgba(212, 175, 55, 0.075);

    border-color:
        rgba(212, 175, 55, 0.16);
}

html[data-theme="light"] .nav-dropdown-menu,

html[data-theme="light"] .nav-profile-menu,

html[data-theme="light"] .nav-notification-dropdown {
    background:
        rgba(255, 255, 255, 0.99);

    border-color:
        rgba(15, 23, 42, 0.08);

    box-shadow:
        0 22px 55px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .dropdown-option,

html[data-theme="light"] .nav-profile-menu-links a {
    color:
        #58635f;
}

html[data-theme="light"] .nav-profile-menu-header strong,

html[data-theme="light"] .nav-notification-dropdown-header strong {
    color:
        #17211e;
}


/* =========================================================
   RESPONSIVE — MEDIUM DESKTOP
========================================================= */

@media (max-width: 1320px) {

    .navbar {
        gap:
            14px;
    }

    .nav-links {
        gap:
            1px;

        padding:
            4px;
    }

    .nav-links a {
        padding:
            0 9px;

        font-size:
            12px;
    }

    .nav-link-icon {
        width:
            15px;

        height:
            15px;
    }

    .nav-actions {
        gap:
            5px;
    }

    .nav-control-btn {
        padding:
            0 8px;
    }

    .nav-profile-label {
        display:
            none;
    }

    .nav-profile-button {
        padding:
            0 7px;
    }

    .nav-profile-chevron {
        display:
            none;
    }
}


/* =========================================================
   RESPONSIVE — TABLET / MOBILE NAV
========================================================= */

@media (max-width: 1100px) {

    .site-header {
        height:
            74px;
    }

    .navbar {
        position:
            relative;

        gap:
            10px;
    }

    .nav-center {
        flex:
            0;
    }

    .nav-links {
        position:
            absolute;

        top:
            calc(100% + 10px);

        left:
            0;

        right:
            0;

        z-index:
            1300;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            3px;

        padding:
            9px;

        border:
            1px solid rgba(255, 255, 255, 0.075);

        border-radius:
            16px;

        background:
            rgba(7, 11, 13, 0.99);

        box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.48);
    }

    .nav-links.open {
        display:
            flex;
    }

    .nav-links a {
        width:
            100%;

        min-height:
            43px;

        justify-content:
            flex-start;

        padding:
            0 12px;
    }

    .nav-links a.active {
        background:
            rgba(212, 175, 55, 0.09);
    }

    .nav-link-chevron {
        margin-left:
            auto;
    }

    .mobile-menu-btn {
        position:
            relative;

        display:
            grid;
    }

    html[data-theme="light"] .nav-links {
        background:
            rgba(255, 255, 255, 0.99);

        border-color:
            rgba(15, 23, 42, 0.08);

        box-shadow:
            0 24px 55px rgba(15, 23, 42, 0.12);
    }
}


/* =========================================================
   RESPONSIVE — SMALL TABLET
========================================================= */

@media (max-width: 800px) {

    .nav-dropdown {
        display:
            none;
    }

    .brand-logo {
        width:
            100px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

    .site-header {
        height:
            68px;
    }

    .navbar {
        gap:
            7px;
    }

    .brand-logo {
        width:
            88px;

        height:
            46px;
    }

    .nav-search-btn {
        display:
            none;
    }

    .theme-toggle-btn {
        display:
            none;
    }

    .nav-auth-actions .nav-login {
        display:
            none;
    }

    .nav-auth-actions .nav-signup {
        height:
            38px;

        padding:
            0 12px;
    }

    .nav-profile-button {
        width:
            39px;

        height:
            39px;

        justify-content:
            center;

        padding:
            0;
    }

    .nav-profile-avatar {
        width:
            28px;

        height:
            28px;
    }

    .nav-profile-label,
    .nav-profile-chevron {
        display:
            none;
    }

    .nav-notification-button,
    .mobile-menu-btn {
        width:
            39px;

        height:
            39px;
    }

    .nav-notification-dropdown {
        position:
            fixed;

        top:
            76px;

        left:
            12px;

        right:
            12px;

        width:
            auto;
    }

    .nav-profile-menu {
        position:
            fixed;

        top:
            76px;

        left:
            12px;

        right:
            12px;

        width:
            auto;
    }

    .nav-links {
        top:
            calc(100% + 8px);
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 410px) {

    .brand-logo {
        width:
            80px;
    }

    .nav-actions {
        gap:
            4px;
    }

    .nav-notification-button,
    .mobile-menu-btn,
    .nav-profile-button {
        width:
            37px;

        height:
            37px;
    }
}

/* =========================================================
   ADMIN / STAFF NOTIFICATIONS — RED UNREAD STATE
========================================================= */

/* Number above the bell */
#staffNotificationBadge.nav-notification-badge {
    color: #ffffff !important;

    background:
        #ef4444 !important;

    border-color:
        #07100d !important;

    box-shadow:
        0 0 0 2px rgba(239, 68, 68, .10),
        0 3px 12px rgba(239, 68, 68, .45) !important;
}


/* Unread notification left indicator */
#staffNotificationList .nav-notification-item.unread::before {
    background:
        #ef4444 !important;

    box-shadow:
        0 0 10px rgba(239, 68, 68, .35) !important;
}


/* Slight red tint for unread admin/staff notifications */
#staffNotificationList .nav-notification-item.unread {
    background:
        linear-gradient(90deg,
            rgba(239, 68, 68, .085),
            rgba(239, 68, 68, .015)) !important;
}


#staffNotificationList .nav-notification-item.unread:hover {
    background:
        linear-gradient(90deg,
            rgba(239, 68, 68, .13),
            rgba(239, 68, 68, .03)) !important;
}

/* VULTREX NOTIFICATIONS — accessibility and compact layout */
.nav-notification-dropdown {
    width: min(420px, calc(100vw - 24px));
}

.nav-notification-item {
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.nav-notification-item-top strong {
    font-size: 12px;
    color: #F5F5F5;
    line-height: 1.35;
}

.nav-notification-item-top time {
    font-size: 10px;
    color: #A3A3A3;
    white-space: nowrap;
}

.nav-notification-item-message {
    font-size: 11px;
    line-height: 1.55;
}

.nav-notification-item.unread,
.nav-notification-item.is-unread {
    background: linear-gradient(90deg, rgba(212, 175, 55, .09), rgba(212, 175, 55, .015));
}

.nav-notification-item:focus-visible,
.nav-notification-button:focus-visible {
    outline: 2px solid #E7C65B;
    outline-offset: -2px;
}

@media (max-width: 480px) {
    .nav-notification-dropdown {
        right: -12px;
        max-width: calc(100vw - 16px);
    }

    .nav-notification-item {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-notification-dropdown {
        animation: none;
    }
}

/* VULTREX COMPACT NOTIFICATION DROPDOWN */
#staffNotificationDropdown.nav-notification-dropdown {
    width: min(440px, calc(100vw - 24px));
    background: #101010;
    border: 1px solid #302A1A;
    border-radius: 17px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .38);
    backdrop-filter: none;
    -webkit-backdrop-filter: none
}

#staffNotificationDropdown .nav-notification-dropdown-header {
    padding: 17px 19px;
    background: #171717;
    border-bottom: 1px solid #302A1A
}

#staffNotificationDropdown .nav-notification-dropdown-header strong {
    font-size: 16px
}

#staffNotificationDropdown .nav-notification-dropdown-header span {
    font-size: 11px
}

#staffNotificationList.nav-notification-dropdown-list {
    max-height: min(440px, 65vh);
    scrollbar-width: thin;
    scrollbar-color: #8C7429 transparent;
    overscroll-behavior: contain
}

#staffNotificationList .nav-notification-item {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    margin: 0;
    padding: 13px 16px;
    border: 0 !important;
    border-bottom: 1px solid #292929 !important;
    border-radius: 0 !important;
    background: #101010;
    box-shadow: none !important;
    outline-offset: -2px
}

#staffNotificationList .nav-notification-item:hover {
    background: #202020
}

#staffNotificationList .nav-notification-item.is-unread {
    background: linear-gradient(90deg, #252015, #101010)
}

#staffNotificationList .nav-notification-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(231, 198, 91, .08);
    border: 1px solid rgba(231, 198, 91, .18);
    color: #E7C65B
}

#staffNotificationList .nav-notification-item-icon svg {
    width: 19px;
    height: 19px
}

#staffNotificationList .nav-notification-item-content {
    min-width: 0
}

#staffNotificationList .nav-notification-item-top {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 9px;
    align-items: baseline
}

#staffNotificationList .nav-notification-item-top strong {
    font-size: 12px;
    line-height: 1.4;
    color: #F5F5F5
}

#staffNotificationList .nav-notification-item-top time {
    font-size: 10px;
    color: #A3A3A3
}

#staffNotificationList .nav-notification-item-message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.45;
    color: #A3A3A3
}

#staffNotificationList .nav-notification-item-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D4AF37;
    box-shadow: 0 0 9px #D4AF3766
}

#staffNotificationDropdown .nav-notification-dropdown-footer {
    border-top: 1px solid #302A1A;
    background: #171717
}

#staffNotificationDropdown .nav-notification-dropdown-footer a {
    color: #E7C65B;
    font-weight: 750
}

#staffNotificationList .nav-notification-item-icon.type-order {
    color: #6acaff;
    background: #102733;
    border-color: #244b60
}

#staffNotificationList .nav-notification-item-icon.type-support {
    color: #bd9dff;
    background: #251d36;
    border-color: #4c3c69
}

#staffNotificationList .nav-notification-item-icon.type-payment {
    color: #f2c46d;
    background: #302719;
    border-color: #5b4929
}

#staffNotificationList .nav-notification-item-icon.type-system {
    color: #E7C65B
}


/* =========================================================
   VULTREX NAVBAR ICON VISIBILITY FIX
   Scoped to primary navigation; preserves existing layout.
========================================================= */
#primaryNavigation a>svg.nav-link-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.88 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    flex: 0 0 16px;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8;
    vertical-align: middle;
}

#primaryNavigation a:hover>svg.nav-link-icon,
#primaryNavigation a.active>svg.nav-link-icon {
    opacity: 1 !important;
    color: #E7C65B;
}

@media (max-width: 1320px) {
    #primaryNavigation a>svg.nav-link-icon {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px;
        flex-basis: 15px;
    }
}

/* =========================================================
   VULTREX BLACK & GOLD — SHARED NAVIGATION FINISH
   Customer-facing chrome; notification unread alerts stay red.
========================================================= */
.site-header,
.site-header.scrolled {
    background: rgba(8, 8, 8, .96);
    border-bottom: 1px solid #292929;
}

.brand:hover .brand-logo {
    filter: drop-shadow(0 0 9px rgba(212, 175, 55, .15));
}

.nav-links a.active,
.nav-links a:hover {
    color: #E7C65B;
}

.nav-links a::after {
    background: #D4AF37;
}

#primaryNavigation a:hover>svg.nav-link-icon,
#primaryNavigation a.active>svg.nav-link-icon {
    color: #D4AF37;
}

.nav-notification-item:focus-visible,
.nav-notification-button:focus-visible {
    outline-color: #D4AF37;
}

/* =========================================================
   VULTREX NAVBAR — OFF-WHITE TEXT / GOLD ICONS
   Final scoped palette, without altering sizing or behavior.
========================================================= */
.site-header #primaryNavigation a,
.site-header #primaryNavigation a:hover,
.site-header #primaryNavigation a.active,
html[data-theme="light"] .site-header #primaryNavigation a,
html[data-theme="light"] .site-header #primaryNavigation a:hover,
html[data-theme="light"] .site-header #primaryNavigation a.active {
    color: #F5F2EA !important;
    -webkit-text-fill-color: #F5F2EA !important;
}

.site-header #primaryNavigation a>svg.nav-link-icon,
.site-header #primaryNavigation a:hover>svg.nav-link-icon,
.site-header #primaryNavigation a.active>svg.nav-link-icon,
.site-header #primaryNavigation a svg:not(.nav-link-icon),
html[data-theme="light"] .site-header #primaryNavigation a>svg.nav-link-icon {
    color: #D4AF37 !important;
    stroke: #D4AF37 !important;
    -webkit-text-fill-color: initial !important;
}

.site-header #primaryNavigation a i,
.site-header #primaryNavigation a:hover i,
.site-header #primaryNavigation a.active i {
    color: #D4AF37 !important;
    -webkit-text-fill-color: #D4AF37 !important;
}

.site-header .nav-notification-button,
.site-header .nav-notification-button:hover,
.site-header .nav-notification-button[aria-expanded="true"],
html[data-theme="light"] .site-header .nav-notification-button {
    color: #D4AF37 !important;
}

.site-header .nav-notification-button .nav-notification-icon {
    color: #D4AF37 !important;
    stroke: #D4AF37 !important;
}

.site-header .nav-notification-badge,
html[data-theme="light"] .site-header .nav-notification-badge {
    color: #F5F2EA !important;
    -webkit-text-fill-color: #F5F2EA !important;
    background: #1B1B1B !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 2px 9px rgba(212, 175, 55, .20) !important;
}

/* VULTREX — Gold separator beneath navbar (all themes and scroll states) */
html .site-header,
html .site-header.scrolled,
html[data-theme="light"] .site-header,
html[data-theme="light"] .site-header.scrolled {
    border-bottom: 1px solid rgba(212, 175, 55, 0.65) !important;
}

/* =========================================================
   VULTREX — NAVBAR LOGIN / SIGN UP (BLACK + GOLD)
   Scoped final override; keeps layout and responsive behavior.
========================================================= */
html .site-header .nav-login,
html .site-header #primaryNavigation a.nav-login,
html[data-theme="light"] .site-header .nav-login,
html[data-theme="light"] .site-header #primaryNavigation a.nav-login {
    color: #e8bd5b !important;
    -webkit-text-fill-color: #e8bd5b !important;
    background: #101010 !important;
    border-color: rgba(232, 189, 91, .75) !important;
    box-shadow: none !important;
}

html .site-header .nav-login:hover,
html .site-header #primaryNavigation a.nav-login:hover,
html .site-header .nav-login:focus-visible {
    color: #f4d58b !important;
    -webkit-text-fill-color: #f4d58b !important;
    background: #211b10 !important;
    border-color: #f4d58b !important;
}

html .site-header .nav-signup,
html .site-header #primaryNavigation a.nav-signup,
html[data-theme="light"] .site-header .nav-signup,
html[data-theme="light"] .site-header #primaryNavigation a.nav-signup {
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    background: linear-gradient(135deg, #f4d58b, #d6aa49) !important;
    border-color: #e8bd5b !important;
    box-shadow: 0 6px 16px rgba(214, 170, 73, .16) !important;
}

html .site-header .nav-signup:hover,
html .site-header #primaryNavigation a.nav-signup:hover,
html .site-header .nav-signup:focus-visible {
    color: #080808 !important;
    -webkit-text-fill-color: #080808 !important;
    background: linear-gradient(135deg, #ffe4a1, #e8bd5b) !important;
    border-color: #f4d58b !important;
    box-shadow: 0 8px 20px rgba(214, 170, 73, .24) !important;
}
/* Mobile navigation: viewport bounds and reachable controls. */
@media (max-width: 1100px) {
    .site-header .nav-links,
    .site-header .nav-profile-menu,
    .site-header .nav-dropdown-menu {
        max-height: calc(100vh - 94px);
        max-height: calc(100dvh - 94px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .site-header .nav-notification-dropdown {
        max-height: calc(100vh - 94px);
        max-height: calc(100dvh - 94px);
        display: flex;
        flex-direction: column;
    }
    .site-header .nav-notification-dropdown[hidden] { display: none; }
    .site-header .nav-notification-dropdown-list { min-height: 0; overflow-y: auto; }
    .site-header .nav-notification-dropdown-header,
    .site-header .nav-notification-dropdown-footer { flex-shrink: 0; }
    .site-header .mobile-menu-btn,
    .site-header .nav-notification-button,
    .site-header .nav-profile-button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 650px) {
    .site-header .nav-auth-actions .nav-login,
    .site-header .nav-auth-actions .nav-signup {
        display: inline-flex;
        min-width: 0;
        min-height: 44px;
        padding-inline: 9px;
    }
    .site-header .nav-notification-dropdown,
    .site-header #staffNotificationDropdown.nav-notification-dropdown {
        left: 12px; right: 12px; width: auto; max-width: none;
    }
    body.vtx-admin-shell .site-header .nav-auth-actions .nav-login { display: none; }
}

/* Existing language/currency controls live inside mobile navigation. */
@media (max-width: 800px) {
    .site-header .nav-links .nav-dropdown,
    body.vtx-admin-shell .admin-sidebar .nav-dropdown { display: block; width: 100%; }
    .site-header .nav-links .nav-control-btn,
    body.vtx-admin-shell .admin-sidebar .nav-control-btn { width: 100%; min-height: 44px; justify-content: flex-start; }
    .site-header .nav-links .nav-dropdown-menu,
    body.vtx-admin-shell .admin-sidebar .nav-dropdown-menu {
        position: static; width: 100%; min-width: 0; margin-top: 6px; max-height: none;
    }
    .site-header .nav-links .dropdown-option,
    body.vtx-admin-shell .admin-sidebar .dropdown-option { min-height: 44px; }
}