/* ══════════════════════════════════════════════
   SHARED COMPONENT STYLES — Navbar & Footer
   Single source of truth for the entire site.
   ══════════════════════════════════════════════ */

/* ── LOGO ── */
.logo-wrap { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-main {
    display:flex; flex-direction:column;
    line-height:0.82; text-transform:uppercase;
    font-family:var(--font-tech); color:white; text-align:left;
}
.weight-bold { font-size:24px; font-weight:700; letter-spacing:0.04em; }
.weight-reg  { font-size:16px; font-weight:400; letter-spacing:0.16em; }

/* ── TOPBAR ── */
.topbar { width:100%; padding:10px 5%; background:#0E0E0E; border-bottom:1px solid rgba(255,255,255,0.08); }
.topbar-inner { max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:10px; }
.topbar-stars { display:flex; align-items:center; gap:2px; color:#60A5FA; font-size:1rem; line-height:1; }
.topbar-text { font-size:0.82rem; font-weight:600; color:#FFFFFF; }
@media(max-width:600px) { .topbar { display:none; } }

/* ── NAV ── */
nav {
    position:sticky; top:0; width:100%; height:84px;
    display:flex; align-items:center; padding:0 5%;
    z-index:3000; transition:0.3s ease;
    background:#0A0A0B;
    border-bottom:1px solid var(--border);
}
nav .nav-inner { max-width:1240px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; }
nav .logo-wrap svg { width:42px; height:42px; transition:0.3s; }
nav.scrolled { height:72px; }
nav.scrolled .logo-wrap svg { width:36px; height:36px; }

.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a { text-decoration:none; color:var(--ink); font-weight:600; font-size:0.9rem; transition:0.3s; }
.nav-links a:hover { color:var(--accent2); }

/* Hamburger */
.hamburger {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; background: none; border: none;
    cursor: pointer; padding: 4px; z-index: 3100; flex-shrink: 0; position: relative;
}
.hamburger span {
    display: block; width: 24px; height: 2px;
    background: white; border-radius: 2px;
    transition: 0.3s ease; transform-origin: center;
    position: absolute; left: 50%;
}
.hamburger span:nth-child(1) { transform: translateX(-50%) translateY(-5px); }
.hamburger span:nth-child(2) { transform: translateX(-50%) translateY(5px); }
.hamburger.open span:nth-child(1) { transform: translateX(-50%) rotate(45deg); }
.hamburger.open span:nth-child(2) { transform: translateX(-50%) rotate(-45deg); }

@media(max-width:860px) {
    .hamburger { display:flex; }
    .nav-links {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 100dvh;
        background: #0A0A0B;
        display: flex; flex-direction: column;
        align-items: center;
        gap: 32px; z-index: 2999;
        opacity: 0; pointer-events: none;
        transition: opacity 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 110px 20px 40px;
    }
    .nav-links.open { opacity: 1; pointer-events: all; }
    .nav-links a { margin-left:0; font-size:1.5rem; font-family:var(--font-tech); letter-spacing:0.05em; }
}

/* ══ MEGA MENU ══ */
.nav-chev{width:13px;height:13px;transition:transform .22s;flex-shrink:0;margin-left:2px;}
.logo-box{overflow:hidden;}
.mega-item-logo{width:22px;height:22px;object-fit:contain;display:block;}
.mega-item-logo.bd-logo{width:22px;height:22px;}

.nav-group{position:relative;display:flex;align-items:center;}
.nav-group-trigger{display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap;
    text-decoration:none;color:var(--ink);font-weight:600;font-size:.9rem;transition:.25s;}
.nav-group-trigger:hover,.nav-group.open .nav-group-trigger{color:var(--accent2);}
.nav-group:hover .nav-chev,.nav-group.open .nav-chev{transform:rotate(180deg);color:var(--accent2);}

.mega-panel{
    position:absolute;top:calc(100% + 16px);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:20px;
    opacity:0;pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease;
    z-index:4000;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.mega-panel::before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px;}

html[data-theme="light"] .mega-panel{box-shadow:0 8px 40px rgba(0,0,0,.13);}
.nav-group:hover .mega-panel,.nav-group.open .mega-panel{
    opacity:1;pointer-events:all;transform:translateY(0);
}
.mega-panel.anchor-left{left:0;}
.mega-panel.anchor-center{left:50%;transform:translateX(-50%) translateY(-8px);}
.nav-group:hover .mega-panel.anchor-center,
.nav-group.open .mega-panel.anchor-center{transform:translateX(-50%) translateY(0);}

.mega-cols{display:flex;gap:6px;}
.mega-col{min-width:190px;}
.mega-col-label{font-size:.67rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.1em;color:var(--muted);padding:0 10px 8px;}
.mega-sep{width:1px;background:var(--border);margin:0 6px;align-self:stretch;}
.mega-item{
    display:flex;align-items:center;gap:11px;
    padding:9px 10px;border-radius:8px;
    text-decoration:none;transition:background .14s;
    cursor:pointer;
}
.mega-item:hover{background:var(--surface-2);}
.mega-item-icon{
    width:34px;height:34px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;background:var(--surface-2);
    border:1px solid var(--border);overflow:hidden;
}
html[data-theme="light"] .mega-item-icon{background:#EEF2FF;border-color:rgba(15,82,186,.15);}
.mega-item-icon img{width:22px;height:22px;object-fit:contain;}
.mega-item-icon svg{width:18px;height:18px;}
.mega-item-text{display:flex;flex-direction:column;gap:1px;}
.mega-item-name{font-size:.84rem;font-weight:700;color:var(--ink);line-height:1.2;}
.mega-item-desc{font-size:.72rem;color:var(--muted);line-height:1.3;}
.mega-item:hover .mega-item-name{color:var(--accent2);}

.mega-footer{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.mega-footer a{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
    color:var(--accent2);text-decoration:none;padding:0 10px;transition:opacity .15s;}
.mega-footer a:hover{opacity:.75;}
.mega-footer svg{width:13px;height:13px;}

/* ── MEGA MENU MOBILE ── */
@media(max-width:860px){
    .nav-group{flex-direction:column;align-items:center;width:100%;}
    .nav-group-trigger{font-size:1.5rem;font-family:var(--font-tech);letter-spacing:.05em;}
    .nav-chev{width:18px;height:18px;}
    .mega-panel{
        position:static;transform:none !important;left:auto !important;
        opacity:1;pointer-events:none;
        box-shadow:none;border:none;background:transparent;
        padding:0;width:100%;
        max-height:0;overflow:hidden;transition:max-height .35s ease;
    }
    .nav-group.open .mega-panel{pointer-events:all;max-height:2000px;}
    .mega-cols{flex-direction:column;gap:4px;padding:6px 0 0;}
    .mega-sep{display:none;}

    .mega-col{text-align:center;}
    .mega-col > .mega-col-label:first-child{
        display:flex;align-items:center;justify-content:center;gap:6px;
        font-size:1.05rem;font-weight:600;color:var(--ink);
        cursor:pointer;padding:10px 0;
        text-transform:none;letter-spacing:normal;
    }
    .mega-col > .mega-col-label:first-child::after{
        content:'';display:inline-block;width:7px;height:7px;
        border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
        transform:rotate(45deg);transition:.25s ease;margin-top:-2px;
    }
    .mega-col.mob-open > .mega-col-label:first-child{color:var(--accent2);}
    .mega-col.mob-open > .mega-col-label:first-child::after{
        transform:rotate(-135deg);margin-top:3px;border-color:var(--accent2);
    }
    .mega-col > .mega-col-label:not(:first-child){display:none;}

    .mega-col .mega-item{display:none;justify-content:center;padding:5px 0;}
    .mega-col.mob-open .mega-item{display:flex;}
    .mega-item-icon{display:none;}
    .mega-item-name{font-size:.92rem;color:var(--muted);text-align:center;}
    .mega-item-desc{display:none;}
    .mega-item:hover{background:transparent;}
    .mega-item:hover .mega-item-name{color:var(--accent2);}
    .mega-footer{display:none;}
    .nav-group.open .nav-chev{transform:rotate(180deg);}
}

/* nav-active */
.nav-active{color:var(--accent2)!important;}

/* ── FOOTER ── */
footer { background-color:#000000; padding:48px 5% 0; border-top:1px solid var(--border); }
.footer-inner { max-width:1240px; margin:0 auto; }
.footer-top {
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; flex-wrap:wrap; padding-bottom:32px;
}
footer .logo-wrap { gap:14px; }
footer .logo-wrap svg { width:44px; height:44px; }
footer .weight-bold { font-size:26px; font-weight:700; letter-spacing:0.04em; line-height:1; }
footer .weight-reg  { font-size:17px; font-weight:400; letter-spacing:0.16em; line-height:1; }
.footer-desc { color:var(--muted); font-size:0.82rem; max-width:280px; margin-top:12px; }
.footer-payments { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:flex-end; }
.footer-payments img { height:22px; width:auto; opacity:0.65; filter:grayscale(20%); transition:opacity 0.3s; }
.footer-payments img:hover { opacity:1; }
.footer-bottom {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0; border-top:1px solid var(--border);
    gap:16px; flex-wrap:wrap;
}

/* Theme toggle */
.theme-toggle {
    width:52px; height:28px; border-radius:8px;
    background:var(--accent); border:none; cursor:pointer; padding:0;
    position:relative; flex-shrink:0; transition:background 0.3s ease;
}
.theme-toggle::after {
    content:''; position:absolute; top:3px; left:3px;
    width:22px; height:22px; border-radius:6px;
    background:white; box-shadow:0 1px 4px rgba(0,0,0,0.3);
    transition:transform 0.3s ease; transform:translateX(24px);
}
html[data-theme="light"] .theme-toggle::after { transform:translateX(0); }

/* ── LIGHT THEME OVERRIDES (navbar + footer) ── */
html[data-theme="light"] nav { background:#FFFFFF; }
html[data-theme="light"] .brand-main { color: var(--ink); }
html[data-theme="light"] nav .logo-wrap svg path,
html[data-theme="light"] footer .logo-wrap svg path { fill: var(--ink); }
html[data-theme="light"] .hamburger span { background: var(--ink); }
html[data-theme="light"] footer      { background-color:#F5F5F7; }
html[data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .footer-payments img { filter: none; opacity: 1; }
html[data-theme="light"] .nav-links { background:#FFFFFF; }
html[data-theme="light"] .theme-toggle { background: #D1D1D6; }
html[data-theme="light"] .theme-toggle::after { transform: translateX(0); }