/* Desktop navigation, the same floating bar on every page (components/site_nav.php, js/site-nav.js).
 * ≥768px only: phones keep the tab bar in #navbar. Self-contained: its own tokens and resets, so it looks
 * identical on the homepage, the marketplace pages and the plain pages. */

@font-face { font-family: 'Satoshi'; src: url('../webfonts/satoshi/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../webfonts/satoshi/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../webfonts/satoshi/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Height the fixed bar covers at the top of the page (14px offset + 64px bar + air); pages pad their first block with it. */
:root { --snav-space: 0px; }
@media (min-width: 768px) { :root { --snav-space: 92px; } }

/* Tokens: --sn-fg ink · --sn-nav bar glass · --sn-tk secondary-text boost · --sn-sh/shk shadow · --sn-acc/on-acc badge */
.snav {
    --sn-fg: 255 255 255; --sn-nav: 0 0 0; --sn-tk: 1; --sn-sh: 0 0 0; --sn-shk: 1; --sn-acc: 255 255 255; --sn-on-acc: 0 0 0;
    --sn-ease: cubic-bezier(0.22, 1, 0.36, 1);
    display: none;
}
html[data-theme="light"] .snav {
    --sn-fg: 8 7 6; --sn-nav: 248 246 244; --sn-tk: 1.38; --sn-sh: 46 36 22; --sn-shk: 0.26; --sn-acc: 29 78 216; --sn-on-acc: 255 255 255;
}

@media (min-width: 768px) {
    /* The phone bar (#navbar) only holds the tab bar and the "More" sheet, both phone-only. */
    body.home-bw-theme #navbar { display: none !important; }

    .snav {
        display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 50;
        padding: 14px var(--page-gutter) 0; pointer-events: none;
        color: rgb(var(--sn-fg)); font-family: Satoshi, 'Noto Sans Arabic', system-ui, sans-serif; font-size: 16px; line-height: 1.6;
        -webkit-font-smoothing: antialiased; transition: padding .5s var(--sn-ease);
    }
}
.snav *, .snav *::before, .snav *::after { box-sizing: border-box; }
.snav a { color: inherit; text-decoration: none; }
.snav svg { display: block; flex-shrink: 0; }

.snav__edge {
    pointer-events: auto; max-width: var(--page-inner); margin: 0 auto; padding: 1px; border-radius: 22px;
    background: linear-gradient(180deg, rgb(var(--sn-fg) / 0.12) 0%, rgb(var(--sn-fg) / 0.04) 100%);
    box-shadow: 0 0 0 rgb(0 0 0 / 0); transition: box-shadow .5s ease;
}
.snav__bar {
    height: 62px; padding-inline: 22px 10px; border-radius: 21px; display: flex; align-items: center; gap: 14px;
    background: rgb(var(--sn-nav) / 0.88); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    transition: background .5s ease;
}
html[data-theme="light"] .snav__bar { background: rgb(var(--sn-nav) / 0.72); }
.snav.is-scrolled { padding-top: 10px; }
.snav.is-scrolled .snav__edge {
    background: linear-gradient(180deg, rgb(var(--sn-fg) / 0.2) 0%, rgb(var(--sn-fg) / 0.04) 100%);
    box-shadow: 0 18px 50px rgb(var(--sn-sh) / calc(0.6 * var(--sn-shk)));
}
/* Scrolled: the bar floats over moving canvases and the sales tape, where a blur would be recomputed every frame; a near-opaque bar looks the same. */
.snav.is-scrolled .snav__bar { background: rgb(var(--sn-nav) / 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- Brand ---- */
.snav__brand { flex-shrink: 0; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.snav__logo { display: block; width: 34px; height: auto; }
html[data-theme="light"] .snav__logo { filter: invert(1) contrast(1.15); }
.snav__name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

/* ---- Section links ---- */
.snav__links { flex: 1 0 auto; display: flex; justify-content: center; align-items: center; gap: 2px; }
.snav__link {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px;
    font-size: 15px; font-weight: 500; white-space: nowrap; color: rgb(var(--sn-fg) / calc(0.78 * var(--sn-tk))) !important;
    transition: color .25s ease, background .25s ease;
}
.snav__ico { width: 17px; height: 17px; opacity: .72; transition: opacity .25s ease; }
.snav__link:hover, .snav__link.is-active { color: rgb(var(--sn-fg)) !important; background: rgb(var(--sn-fg) / 0.07); }
.snav__link:hover .snav__ico, .snav__link.is-active .snav__ico { opacity: 1; }
.snav__link.is-active { box-shadow: inset 0 0 0 1px rgb(var(--sn-fg) / 0.1); }

/* ---- BTC / ETH ticker (prices: js/site-nav.js). From 1100px it takes the room the links leave; a coin that
 * does not fit whole is hidden (js/site-nav.js sets .is-cut) rather than shown cut off. ---- */
.snav-tick {
    position: relative; flex: 0 1 auto; min-width: 0; overflow: hidden; display: none; align-items: center; gap: 12px;
    font-size: 12px; font-weight: 700; white-space: nowrap; color: rgb(var(--sn-fg));
}
@media (min-width: 1100px) { .snav-tick { display: flex; } }
.snav-tick[hidden] { display: none !important; }
.snav-tick .is-cut { visibility: hidden; }
.snav-tick__coin { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; }
.snav-tick__btc { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f7931a; color: #fff; font-size: 10px; }
.snav-tick__eth { font-size: 15px; color: rgb(var(--sn-fg) / 0.85); }
.snav-tick__sym { color: rgb(var(--sn-fg) / calc(0.7 * var(--sn-tk))); }
.snav-tick__chg { color: #22c55e; }
.snav-tick__chg.is-down { color: #ef4444; }
html[data-theme="light"] .snav-tick__chg { color: #15803d; }
html[data-theme="light"] .snav-tick__chg.is-down { color: #b91c1c; }
.snav-tick__sep { flex-shrink: 0; width: 1px; height: 16px; background: rgb(var(--sn-fg) / 0.12); }
/* Less room (js/site-nav.js picks the first that fits both coins): drop the 24h % and keep the arrow, then stack the coins. */
.snav-tick.is-tight [data-snav-pct] { display: none; }
.snav-tick.is-stack { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; font-size: 11px; line-height: 1.2; }
.snav-tick.is-stack .snav-tick__sep { display: none; }
.snav-tick.is-stack .snav-tick__coin { gap: 5px; }
.snav-tick.is-stack .snav-tick__btc { width: 14px; height: 14px; font-size: 7.5px; }
.snav-tick.is-stack .snav-tick__eth { width: 14px; font-size: 11px; text-align: center; }

/* ---- Controls: language, theme, cart, Telegram ---- */
.snav__end { flex-shrink: 0; display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.snav__btn {
    position: relative; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; color: rgb(var(--sn-fg) / calc(0.85 * var(--sn-tk))) !important;
    transition: color .25s ease, background .25s ease;
}
.snav__btn:hover, .snav-lang[open] > .snav__btn, .snav-cart.is-active { color: rgb(var(--sn-fg)) !important; background: rgb(var(--sn-fg) / 0.07); }
.snav__btn--sq { width: 40px; padding: 0; }
.snav__btn--sq svg { width: 19px; height: 19px; }

.snav-lang { position: relative; }
.snav-lang__sum { list-style: none; font-size: 13px; gap: 7px; }
.snav-lang__sum::-webkit-details-marker { display: none; }
.snav-lang__chev { font-size: 8px; opacity: .7; transition: transform .2s ease; }
.snav-lang[open] .snav-lang__chev { transform: rotate(180deg); }
.snav-lang__menu {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 2; width: max-content; max-width: min(92vw, 520px); max-height: min(70vh, 560px);
    overflow-y: auto; padding: 6px; border-radius: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
    background: rgb(var(--sn-nav) / 0.96); border: 1px solid rgb(var(--sn-fg) / 0.12);
    box-shadow: 0 24px 60px rgb(var(--sn-sh) / calc(0.6 * var(--sn-shk))); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.snav-lang__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; white-space: nowrap; color: rgb(var(--sn-fg) / calc(0.75 * var(--sn-tk))) !important; }
.snav-lang__menu a:hover, .snav-lang__menu a[aria-current] { background: rgb(var(--sn-fg) / 0.07); color: rgb(var(--sn-fg)) !important; }
.snav-lang .lang-flag-icon { box-shadow: 0 0 0 1px rgb(var(--sn-fg) / 0.14); }

/* One icon at a time, the theme a click switches to: sun on dark, moon on light. Both share one grid cell and
 * cross-fade. The .snav prefix outranks `.snav svg { display: block }`, which used to show both side by side. */
.snav-theme { display: inline-grid; place-items: center; }
.snav-theme svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: opacity .25s ease, transform .45s var(--sn-ease); }
.snav .snav-theme__moon, html[data-theme="light"] .snav .snav-theme__sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
html[data-theme="light"] .snav .snav-theme__moon { opacity: 1; transform: none; }

.snav-cart__n {
    position: absolute; top: 3px; inset-inline-end: 2px; min-width: 17px; height: 17px; padding: 0 5px; align-items: center; justify-content: center;
    border-radius: 999px; background: rgb(var(--sn-acc)); color: rgb(var(--sn-on-acc)); font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.snav-tg i { font-size: 15px; }

.snav :focus-visible { outline: 2px solid rgb(var(--sn-fg)) !important; outline-offset: 2px; }

/* ---- Narrower desktops: the brand name and the Telegram label, then the link labels give way so the bar never overflows ---- */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .snav__name { display: none; }
    .snav__link { padding: 0 9px; gap: 7px; }
    .snav-tg { width: 40px; padding: 0; }
    .snav-tg__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
    /* Icons only; the labels stay readable to screen readers. */
    .snav__link { width: 42px; padding: 0; justify-content: center; }
    .snav__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Arabic, Persian, Urdu: no negative tracking (it breaks letter joining). */
html[dir="rtl"] .snav__name { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
    .snav, .snav *, .snav *::before, .snav *::after { transition: none !important; }
}