/* =========================================================
   efootball.me — navbar.css (topbar + mega menu + mobile drawer)
   ========================================================= */

/* Keep mobile drawer hidden even if CSS/JS late */
.mobile-drawer[hidden]{display:none!important}

/* Topbar */
.topbar{position:sticky; top:0; z-index:100; backdrop-filter:saturate(180%) blur(10px); background:var(--glass); border-bottom:1px solid var(--border)}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:10px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:34px; height:34px}
.brand .tag{font-size:12px; font-weight:700; color:#fff; background:linear-gradient(90deg, var(--danger), #f59e0b); padding:3px 8px; border-radius:999px; letter-spacing:.3px; box-shadow:0 2px 6px rgba(0,0,0,.15)}

/* Desktop menu */
.menu{display:flex; align-items:center; gap:14px}
.menu .link, .menu .btn{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--text); background:transparent; border:0; cursor:pointer; padding:8px 10px; border-radius:10px}
.menu .link:hover, .menu .btn:hover{background:var(--surface); text-decoration:none}

/* Mega dropdown */
.mega-wrap{position:relative}
.mega-wrap .chev{stroke:currentColor; fill:none; stroke-width:2}
.mega{position:absolute; top:calc(100% + 8px); inset-inline-start:0; min-width:520px; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; display:none; z-index:200}
.mega-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mega .item{display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; border:1px solid var(--border); background:var(--surface)}
.mega .item:hover{background:var(--bg-elev)}
.mega .ico{width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--accent)); opacity:.25}
.mega .t{font-weight:700} .mega .s{font-size:12px; color:var(--muted)}
.mega-wrap:focus-within .mega, .mega-wrap:hover .mega{display:block}

/* Burger / Mobile */
.burger{display:none; background:transparent; border:0; padding:8px; border-radius:8px; color:var(--text)}
.burger svg{width:26px; height:26px}
@media (max-width:960px){ .menu{display:none} .burger{display:inline-flex} }

/* Mobile drawer */
.mobile-drawer{position:fixed; inset:0; z-index:150; pointer-events:none}
.mobile-drawer .shade{position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:.25s}
.mobile-drawer .panel{position:absolute; top:0; bottom:0; inset-inline-start:0; width:min(86vw, 360px); background:var(--bg-elev); border-inline-end:1px solid var(--border); transform:translateX(-100%); transition:.25s; padding:16px 14px; overflow:auto; border-radius:0 12px 12px 0}
.m-list{display:flex; flex-direction:column; gap:8px}
.m-item{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:600}
.m-item:hover{background:var(--bg-elev); text-decoration:none}
.m-sub{display:flex; flex-direction:column; gap:8px; margin-inline-start:14px}
.m-badge{font-size:11px; color:#fff; background:var(--primary); padding:2px 6px; border-radius:999px}
body.nav-open .mobile-drawer{pointer-events:auto}
body.nav-open .mobile-drawer .shade{opacity:1}
body.nav-open .mobile-drawer .panel{transform:translateX(0)}
[dir="rtl"] .m-sub{margin-inline-start:0; margin-inline-end:14px}