/* ════════════════════════════════════════════════════════════════
   គួរម៉ា — DARK app theme (mobile-first, LuckyMekh-style near-black)
   Loaded LAST on every page; flips the light storefront surfaces to
   the dark tile grid look. Only surfaces/colors change — layout,
   markup and JS are untouched.
   ════════════════════════════════════════════════════════════════ */
:root {
    --d-bg: #0b0c0e;
    --d-card: #16181d;
    --d-card2: #1c1f26;
    --d-line: #262a33;
    --d-txt: #f5f6f8;
    --d-mut: #9aa3b2;
    --d-red: var(--primary, #ec2227);
}

/* ── shell ─────────────────────────────────────────────────────── */
body { background: var(--d-bg); color: var(--d-txt); }
.app { background: var(--d-bg); }

.app-header {
    background: rgba(11, 12, 14, .94);
    border-bottom: 1px solid var(--d-line);
}
.brand .brand-name, .brand h1 { color: var(--d-txt); }
.header-btn { background: var(--d-card); color: var(--d-txt); border: 1px solid var(--d-line); }
.header-btn:hover { background: var(--d-card2); }

/* top-bar pills (LuckyMekh style: solid red + outline ghost) */
.h-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    color: #fff; font-weight: 700; font-size: 13px; line-height: 1;
    box-shadow: 0 4px 14px rgba(236, 34, 39, .35);
}
.h-pill.ghost {
    background: transparent; color: #e7e9ee;
    border: 1.5px solid #3a3f4a; box-shadow: none;
}
.h-pill:active { transform: scale(.96); }

/* ── banner + section heads ────────────────────────────────────── */
.slider { background: var(--d-card); border-radius: 18px; }
.dot { background: #454b57; }
.dot.active { background: var(--primary2); }

.hero-title {
    text-align: center; color: var(--d-txt);
    font-family: 'Noto Sans Khmer', 'Oxanium', sans-serif;
    font-size: 17px; font-weight: 800; letter-spacing: .4px;
    margin: 18px 16px 12px;
}

.section-head h3 { color: var(--d-txt); }
.section-head .see-all { color: #ff5c66; }
.promo-strip span {
    background: var(--d-card); border-color: var(--d-line); color: #cfd5df;
}

/* ── search ────────────────────────────────────────────────────── */
.search-box { background: var(--d-card); border: 1px solid var(--d-line); }
.search-box input { color: var(--d-txt); }
.search-box input::placeholder { color: #6d7686; }
.suggest-item, .search-suggest { background: var(--d-card2); color: var(--d-txt); border-color: var(--d-line); }
.suggest-item:hover, .suggest-item.active { background: #23272f; }

/* ── game tiles ────────────────────────────────────────────────── */
.topup-item {
    background: var(--d-card); border: 1px solid var(--d-line);
    border-radius: 18px; box-shadow: none;
}
.topup-item:hover { border-color: #3b4150; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.topup-thumb { background: #20242c; }
.topup-thumb .thumb-fallback { color: var(--d-txt); background: var(--d-card2); }
.topup-content .title { color: var(--d-txt); font-weight: 700; }
.denom-empty, .result-meta { color: var(--d-mut); }
.page-link { background: var(--d-card); border-color: var(--d-line); color: var(--d-txt); }

/* ── bottom nav ────────────────────────────────────────────────── */
.bottom-nav {
    background: rgba(13, 14, 17, .97);
    border-top: 1px solid var(--d-line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav-item { color: #7d8695; }
.nav-item.active { color: #ff4757; }
.nav-item.active::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 34px; height: 3px; border-radius: 0 0 4px 4px; background: #ff4757;
}

/* ── floating Telegram pill ────────────────────────────────────── */
.tg-fab {
    position: fixed; right: 14px; bottom: 86px; z-index: 40;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-radius: 999px;
    background: linear-gradient(135deg, #2aabee, #229ed9);
    color: #fff; font-weight: 800; font-size: 14px; line-height: 1;
    box-shadow: 0 10px 26px rgba(34, 158, 217, .45);
    text-decoration: none;
}
.tg-fab:active { transform: scale(.95); }

/* ── desktop chrome (keep consistent) ──────────────────────────── */
@media (min-width: 1024px) {
    .desktop-nav { background: rgba(13, 14, 17, .92); border-bottom: 1px solid var(--d-line); }
    .desktop-nav .nav-search { background: var(--d-card); border-color: var(--d-line); }
    .desktop-nav .nav-search input { color: var(--d-txt); }
    .desktop-nav .btn-ghost { background: var(--d-card); border-color: var(--d-line); color: var(--d-txt); }
    .desktop-nav .btn-ghost:hover { background: var(--d-card2); }
    .site-footer { background: #0a0c10; }
}

/* ── product / checkout surfaces ───────────────────────────────── */
.crumbs, .breadcrumb { color: var(--d-mut); }
.crumbs a, .breadcrumb a { color: var(--d-mut); }
.crumbs b, .breadcrumb .current { color: var(--d-txt); }

.game-hero, .game-desc, .step, .summary-card, .pay-result.info, .invoice {
    background: var(--d-card); border-color: var(--d-line); color: var(--d-txt);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.game-hero .g-thumb, .no-fields { background: #20242c; border-color: var(--d-line); }
.step h4, .game-hero h2, .game-hero .g-name, .summary-card .s-name { color: var(--d-txt); }
.field label { color: var(--d-mut); }
.field input, .denom-filter input {
    background: #101216; border: 1px solid var(--d-line); color: var(--d-txt);
}
.check-result { background: #12151b; border: 1px solid var(--d-line); color: var(--d-mut); }
.check-result.ok  { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); color: #4ade80; }
.check-result.warn{ background: rgba(250, 204, 21, .10); border-color: rgba(250, 204, 21, .30); color: #facc15; }
.check-result.err { background: rgba(236, 34, 39, .12); border-color: rgba(236, 34, 39, .35); color: #ff8a93; }
.check-result.info { background: #12151b; border-color: var(--d-line); color: var(--d-mut); }

.denom { background: #101216; border: 1px solid var(--d-line); color: var(--d-txt); }
.denom .d-price { color: #ffb3ba; }
.denom.selected { border-color: var(--primary2); background: #1a1013; }
.denom .d-check { background: #0b0c0e; border-color: #3a4150; }
.denom-filter { background: #101216; border-color: var(--d-line); }

.pay { background: var(--d-card2); border-color: var(--d-line); }
.pay.selected { border-color: var(--primary2); background: #1a1214; }
.pay .p-name { color: var(--d-txt); }
.pay .p-note { color: var(--d-mut); }
.pay .p-dot::after { background: var(--primary); }
.pay-trust { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .25); color: #86efac; }

.buy-bar, .buybar {
    background: rgba(13, 14, 17, .97); border-top: 1px solid var(--d-line);
    color: var(--d-txt);
}
.buy-bar .bt, .buybar .bt { color: var(--d-mut); }

/* pay sheet / modal */
.modal-content.pay-sheet, .payway-card, .pw-order, .pw-totals {
    background: #101216; color: var(--d-txt); border-color: var(--d-line);
}
.pay-countdown { background: rgba(250, 204, 21, .08); color: #fde68a; }
.aba-pay-link, .pay-sheet .aba-pay-link { background: var(--d-card2); border-color: var(--d-line); color: var(--d-txt); }
.aba-pay-link:hover { background: #23272f; }
.pw-method { background: var(--d-card2); border-color: var(--d-line); }
.pw-method.sel { border-color: var(--primary2); }
.pw-method.is-soon { opacity: .5; }
.pw-soon { color: var(--d-mut); }
.pw-back { background: var(--d-card2); color: var(--d-txt); }
.qr-loading { background: #f5f6f8; }
.pay-result .inv-close, .inv-actions .inv-close { background: var(--d-card2); color: var(--d-txt); }
.inv-item { background: #0b0c0e; border-color: var(--d-line); color: var(--d-txt); }
.cp { background: var(--d-card2); border-color: var(--d-line); color: var(--d-txt); }
.cp:hover { background: #23272f; }
.p-soon { color: var(--d-mut); }
.page-loader { background: rgba(11, 12, 14, .9); }
.menu-toggle { background: var(--d-card); color: var(--d-txt); }
.dropdown { background: var(--d-card2); border-color: var(--d-line); }
.dropdown a { color: var(--d-txt); }
.dropdown a:hover { background: #23272f; }
.social-btn { background: var(--d-card); border-color: var(--d-line); color: var(--d-txt); }

.h-pills { display: inline-flex; align-items: center; gap: 8px; }