/* =============================================================
   Tema Marketplace NexShop — dipakai bareng oleh marketplace.html dan
   reseller.html. Dulu CSS ini nempel inline di marketplace.html; dipisah
   ke sini supaya halaman reseller pakai bahasa visual yang PERSIS sama
   tanpa nyalin-nempel ratusan baris (dan biar sekali ubah, dua halaman
   ikut berubah).

   WAJIB di-link SESUDAH /style.css, karena token di sini sengaja nimpa
   variabel global buat halaman-halaman ini saja.
   ============================================================= */
/* =============================================================
   NexShop Marketplace — tampilan "glass / aurora"
   Palet, skala tipografi, dan bentuk komponennya ngikutin desain
   marketplace yang baru: permukaan gelap kebiruan (#051424), kartu kaca
   transparan, aksen ungu lembut (#d0bcff) + cyan (#5de6ff).

   Token di bawah SENGAJA nimpa variabel dari style.css cuma di halaman ini,
   jadi komponen bersama (mis. footer .nx-footer*) tetap ikut warna baru
   tanpa perlu di-fork.
   ============================================================= */

:root {
    /* Palet DIAMBIL DARI NexShop utama (style.css), bukan palet lain --
       supaya Marketplace kelihatan satu keluarga sama halaman utama:
       ungu #00C2E8, cyan #22D3EE, latar #090B0F, panel #11151C/#181D26. */
    --mkt-bg: #090B0F;
    --mkt-bg-deep: #060810;
    --mkt-surface: #11151C;
    --mkt-surface-2: #181D26;
    --mkt-surface-3: #1E242C;
    --mkt-surface-4: #2A3357;
    --mkt-primary: #00C2E8;
    --mkt-primary-soft: #5EEAFB;
    --mkt-primary-strong: #0891B2;
    --mkt-secondary: #22D3EE;
    --mkt-tertiary: #0891B2;
    --mkt-text: #F4F7FA;
    --mkt-text-dim: #ADB5C4;
    --mkt-text-muted: #98A2B3;
    --mkt-line: #252C38;
    --mkt-line-strong: rgba(0, 194, 232, 0.35);
    --mkt-glass: rgba(24, 29, 38, 0.55);
    --mkt-glass-solid: rgba(18, 23, 41, 0.96);
    --mkt-radius: 16px;
    --mkt-radius-sm: 10px;
    --mkt-radius-lg: 22px;
    --mkt-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);

    /* Lapisan "kinetic": permukaan kartu yang lebih pekat dari panel kaca,
       garis tipis semi-transparan, dan cahaya ungu buat state hover.
       Dipisah dari --mkt-surface* supaya kartu produk bisa punya kontras
       sendiri tanpa ikut mengubah modal/nav yang pakai token lama. */
    --mkt-card: #181D26;
    --mkt-card-hover: #1C222C;
    --mkt-stroke: rgba(255, 255, 255, 0.09);
    --mkt-stroke-strong: rgba(255, 255, 255, 0.16);
    --mkt-glow: rgba(0, 194, 232, 0.34);
    --mkt-glow-soft: rgba(0, 194, 232, 0.16);
    --mkt-primary-tint: rgba(0, 194, 232, 0.12);
    --mkt-secondary-tint: rgba(34, 211, 238, 0.12);

    /* Lexend dipakai khusus judul & angka harga (bentuk angkanya lebih
       tegas), Inter tetap buat teks isi. */
    --mkt-font-display: 'Lexend', 'Plus Jakarta Sans', system-ui, sans-serif;

    /* Alias buat komponen bersama dari style.css */
    --bg: var(--mkt-bg);
    --bg-panel: var(--mkt-surface);
    --bg-panel-2: var(--mkt-surface-2);
    /* Sebelumnya 0.75 alpha di atas bg yang mirip warna (#090B0F) bikin
       nav nyaris nyatu sama konten di baliknya -- garis tepinya nyaris
       gak kelihatan. Dinaikkan + ditambah sedikit base warna panel biar
       nav kebaca sebagai lapisan terpisah, bukan cuma blur tipis. */
    --nav-bg: linear-gradient(180deg, rgba(15, 19, 36, 0.94), rgba(10, 13, 24, 0.94));
    --mkt-nav-h: 4.25rem;
    --line: var(--mkt-line);
    --text: var(--mkt-text);
    --text-dim: var(--mkt-text-dim);
    --text-muted: var(--mkt-text-muted);
    --violet: var(--mkt-primary);
    --violet-2: var(--mkt-primary-strong);
    --cyan: var(--mkt-secondary);
    --radius: var(--mkt-radius);
    --radius-sm: var(--mkt-radius-sm);
}

/* Tema terang mengikuti mode terang NexShop utama. */
:root[data-theme="light"] {
    --mkt-bg: #F8FAFC;
    --mkt-bg-deep: #F1F5F9;
    --mkt-surface: #FFFFFF;
    --mkt-surface-2: #F1F5F9;
    --mkt-surface-3: #E2E8F0;
    --mkt-surface-4: #E2E8F0;
    --mkt-primary: #0891B2;
    --mkt-primary-soft: #22D3EE;
    --mkt-primary-strong: #0891B2;
    --mkt-secondary: #0E9BB5;
    --mkt-text: #0F172A;
    --mkt-text-dim: #475569;
    --mkt-text-muted: #64748B;
    --mkt-line: rgba(15, 23, 42, 0.1);
    --mkt-line-strong: rgba(8, 145, 178, 0.28);
    --mkt-glass: rgba(255, 255, 255, 0.75);
    --mkt-glass-solid: rgba(255, 255, 255, 0.97);
    --mkt-shadow: 0 8px 32px rgba(15, 23, 42, 0.1);
    --nav-bg: rgba(255, 255, 255, 0.92);

    --mkt-card: #FFFFFF;
    --mkt-card-hover: #F8FAFC;
    --mkt-stroke: rgba(15, 23, 42, 0.1);
    --mkt-stroke-strong: rgba(15, 23, 42, 0.18);
    --mkt-glow: rgba(8, 145, 178, 0.18);
    --mkt-glow-soft: rgba(8, 145, 178, 0.08);
    --mkt-primary-tint: rgba(8, 145, 178, 0.08);
    --mkt-secondary-tint: rgba(14, 155, 181, 0.1);
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--mkt-bg);
    color: var(--mkt-text);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Ikon situs memakai Font Awesome. Aturan dasar di bawah menggantikan
   aturan .material-symbols-outlined lama: line-height 1 menjaga ikon tidak
   menambah tinggi baris, dan user-select none mencegah glif ikut tersorot
   saat pengguna menyeleksi teks di sekitarnya. */
i[class*="fa-"] {
    line-height: 1;
    user-select: none;
}

.hidden {
    display: none !important;
}

/* ── Latar animasi ───────────────────────────────────────────── */
.mkt-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(90rem 60rem at 15% -10%, rgba(0, 194, 232, 0.22), transparent 60%),
        radial-gradient(70rem 50rem at 95% 10%, rgba(34, 211, 238, 0.14), transparent 55%),
        var(--mkt-bg);
}

/* ── Ambient marketplace assets (dompet, kartu, uang, dst -- jatuh
   pelan kayak hujan gak beraturan, gantiin shader biru yang lama).
   Base .ambient-asset/.ambient-asset-glyph + animasi ambient-rain-nya
   dari style.css; di sini cuma nambah varian ikon yang relevan sama
   marketplace (beberapa ikon dipakai bareng sama halaman utama, warnanya
   udah cocok karena --text-violet/--text-cyan/dst gak ditimpa di sini). */
.ambient-asset--wallet {
    color: var(--text-cyan);
    font-size: 46px;
    --rain-bounce-a: 24px;
    --rain-bounce-b: -18px;
    --rain-bounce-c: 30px;
    --rain-bounce-d: -14px;
}

.ambient-asset--card {
    color: var(--text-violet);
    font-size: 44px;
    --rain-bounce-a: -22px;
    --rain-bounce-b: 18px;
    --rain-bounce-c: -30px;
    --rain-bounce-d: 16px;
}

.ambient-asset--cash {
    color: var(--text-success);
    font-size: 42px;
    --rain-bounce-a: 20px;
    --rain-bounce-b: -26px;
    --rain-bounce-c: 16px;
    --rain-bounce-d: -22px;
}

.ambient-asset--qr {
    color: var(--text-cyan);
    font-size: 38px;
    --rain-bounce-a: -18px;
    --rain-bounce-b: 24px;
    --rain-bounce-c: -28px;
    --rain-bounce-d: 12px;
}

.ambient-asset--bank {
    color: var(--text-violet);
    font-size: 40px;
    --rain-bounce-a: 26px;
    --rain-bounce-b: -14px;
    --rain-bounce-c: 20px;
    --rain-bounce-d: -28px;
}

.ambient-asset--simcard {
    color: var(--text-violet);
    font-size: 34px;
    --rain-bounce-a: -24px;
    --rain-bounce-b: 20px;
    --rain-bounce-c: -16px;
    --rain-bounce-d: 28px;
}

.ambient-asset--invoice {
    color: var(--text-magenta);
    font-size: 36px;
    --rain-bounce-a: 18px;
    --rain-bounce-b: -30px;
    --rain-bounce-c: 24px;
    --rain-bounce-d: -18px;
}

.ambient-asset--toll {
    color: var(--text-success);
    font-size: 36px;
    --rain-bounce-a: -28px;
    --rain-bounce-b: 16px;
    --rain-bounce-c: -20px;
    --rain-bounce-d: 24px;
}

.ambient-asset--piggy {
    color: var(--text-warning);
    font-size: 38px;
    --rain-bounce-a: 22px;
    --rain-bounce-b: -16px;
    --rain-bounce-c: 28px;
    --rain-bounce-d: -24px;
}

.ambient-asset--receipt {
    color: var(--text-magenta);
    font-size: 34px;
    --rain-bounce-a: -20px;
    --rain-bounce-b: 28px;
    --rain-bounce-c: -14px;
    --rain-bounce-d: 22px;
}

.ambient-asset--transfer {
    color: var(--text-success);
    font-size: 36px;
    --rain-bounce-a: 24px;
    --rain-bounce-b: -20px;
    --rain-bounce-c: 18px;
    --rain-bounce-d: -26px;
}

.mkt-bg-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 20, 36, 0.45), rgba(5, 20, 36, 0.82));
}

:root[data-theme="light"] .mkt-bg-veil {
    background: linear-gradient(180deg, rgba(244, 246, 251, 0.72), rgba(244, 246, 251, 0.94));
}

/* ── Kartu kaca (dipakai ulang di banyak komponen) ───────────── */
.glass-card {
    background: var(--mkt-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--mkt-line);
    border-top-color: var(--mkt-line-strong);
    box-shadow: var(--mkt-shadow);
}

/* ── Nav ──────────────────────────────────────────────────────
   Dulu nav ini "melayang": position:fixed, dilepas dari alur dokumen,
   lalu tinggi kontennya diukur lewat JS (offsetHeight) dan ditulis ke
   --mkt-nav-h supaya .mkt-main tahu berapa padding-top yang perlu
   dikasih. Masalahnya JS itu baru sempat jalan setelah load/resize --
   di antara render pertama sampai JS jalan (atau kalau font baru
   nyampe belakangan dan bikin nav berubah tinggi), padding-top-nya
   telat nyesuaiin dan nav numpuk di atas konten. Reseller.html malah
   sama sekali gak manggil sinkronisasi itu, jadi selalu pakai angka
   fallback yang gampang meleset.

   Sekarang nav dikunci satu baris SELALU (link kategori dipindah ke
   panel dropdown lewat tombol menu di mobile, bukan ikut wrap ke baris
   ke-2/ke-3), jadi tingginya sudah pasti dari CSS lewat --mkt-nav-h --
   gak perlu diukur lewat JS lagi sama sekali. */
.mkt-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--mkt-nav-h);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-bottom: 1px solid var(--mkt-line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* Garis aksen tipis di tepi bawah nav -- pengganti border polos supaya
   nav kelihatan sebagai identitas brand (ungu -> cyan), bukan cuma
   kotak gelap generik. */
.mkt-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mkt-primary) 20%, var(--mkt-secondary) 55%, transparent 85%);
    opacity: 0.55;
    pointer-events: none;
}

.mkt-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--mkt-text);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Logo NexShop asli, dibingkai gradien seperti di nav halaman utama --
   sebelumnya di sini cuma ikon generik "storefront", jadi identitas
   NexShop-nya hilang. */
.mkt-brand-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    padding: 1px;
    border-radius: 12px;
    background: linear-gradient(to top right, var(--mkt-primary), var(--mkt-secondary));
    display: flex;
    transition: transform 0.5s;
}

.mkt-nav-brand:hover .mkt-brand-mark {
    transform: rotate(90deg);
}

.mkt-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 11px;
    background: var(--mkt-bg);
}

.mkt-brand-text {
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--mkt-text);
}

.mkt-nav-brand .nx-accent {
    color: var(--mkt-primary);
}

.mkt-nav-brand .nx-tag {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mkt-secondary);
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.3);
    padding: 3px 8px;
    border-radius: 999px;
}

.mkt-nav-links {
    display: flex;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Kalau nav-brand + nav-actions udah makan banyak ruang (mis. lebar
       laptop, 768-1200px), baris link ini yang menyusut & jadi bisa
       digeser horizontal duluan -- bukan malah dorong tombol lain
       sampai nyembul keluar kotak nav. Scrollbar-nya gak kelihatan
       karena scrollbar disembunyikan situs-wide (lihat komentar di
       @media 1024px), sama kayak perilaku versi mobile. */
    min-width: 0;
    flex-shrink: 1;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.mkt-nav-links a {
    text-decoration: none;
    color: var(--mkt-text-dim);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    border-radius: var(--mkt-radius-sm);
    white-space: nowrap;
    transition: color 0.18s, background 0.18s;
}

.mkt-nav-links a:hover {
    color: var(--mkt-text);
    background: rgba(255, 255, 255, 0.05);
}

.mkt-nav-links a.active {
    color: var(--mkt-primary);
    font-weight: 700;
    background: rgba(0, 194, 232, 0.1);
}

/* ── Kelompok aksi kanan nav ─────────────────────────────────── */
.mkt-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex-shrink: 0;
}

.mkt-nav-search {
    position: relative;
    display: flex;
    align-items: center;
}

.mkt-nav-search i[class*='fa-'] {
    position: absolute;
    left: 0.7rem;
    font-size: 1.05rem;
    color: var(--mkt-text-muted);
    pointer-events: none;
}

.mkt-nav-search input {
    width: 13rem;
    padding: 0.5rem 0.85rem 0.5rem 2.25rem;
    border-radius: 999px;
    border: 1px solid var(--mkt-stroke);
    background: var(--mkt-surface-2);
    color: var(--mkt-text);
    font-family: inherit;
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s, width 0.22s;
}

.mkt-nav-search input::placeholder {
    color: var(--mkt-text-muted);
}

.mkt-nav-search input:focus {
    width: 15rem;
    border-color: var(--mkt-primary);
    box-shadow: 0 0 0 3px var(--mkt-glow-soft);
}

.mkt-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--mkt-secondary-tint);
    border: 1px solid rgba(34, 211, 238, 0.28);
    color: var(--mkt-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.mkt-nav-pill i[class*='fa-'] {
    font-size: 1rem;
}

.mkt-nav-track-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--mkt-primary-tint);
    border: 1px solid var(--mkt-line-strong);
    color: var(--mkt-primary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border-radius: var(--mkt-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.mkt-nav-track-btn i[class*='fa-'] {
    font-size: 1.05rem;
}

.mkt-nav-track-btn:hover {
    border-color: var(--mkt-primary);
    color: var(--mkt-primary-soft);
    background: var(--mkt-primary-tint);
}

.mkt-modal--wide {
    max-width: 38rem;
}

.mkt-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    /* Gradien ungu -> cyan (warna brand), ganti dari ungu solid polos
       biar CTA utama di nav kelihatan lebih "hidup" dan senada sama
       aksen brand di logo, bukan cuma satu warna flat. */
    background: linear-gradient(120deg, var(--mkt-primary-strong), var(--mkt-primary) 65%, var(--mkt-secondary) 145%);
    padding: 0.55rem 1.1rem;
    border-radius: var(--mkt-radius-sm);
    white-space: nowrap;
    box-shadow: 0 4px 16px var(--mkt-glow-soft);
    transition: filter 0.18s, transform 0.18s, box-shadow 0.18s;
}

.mkt-nav-back:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 20px var(--mkt-glow);
}

.mkt-nav-back:active {
    transform: scale(0.97);
}

/* ── Tombol menu (mobile) ────────────────────────────────────────
   Cuma tampil di layar sempit (lihat @media 768px). Buka/tutup panel
   dropdown yang isinya .mkt-nav-links -- gantinya link kategori ikut
   wrap ke baris ke-2/3 seperti sebelumnya. */
.mkt-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border-radius: var(--mkt-radius-sm);
    border: 1px solid var(--mkt-stroke);
    background: var(--mkt-surface-2);
    color: var(--mkt-text);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}

.mkt-nav-toggle:hover {
    border-color: var(--mkt-line-strong);
    background: var(--mkt-primary-tint);
}

.mkt-nav-toggle i[class*='fa-'] {
    font-size: 1.3rem;
    transition: transform 0.2s;
}

.mkt-nav.is-open .mkt-nav-toggle i[class*='fa-'] {
    transform: rotate(90deg);
}

/* Ikon "close" nyala cuma pas panel lagi kebuka; default-nya ikon
   hamburger yang kelihatan. Dua ikon dipasang barengan lalu di-toggle
   lewat CSS, biar gak perlu ganti isi elemen lewat JS. */
.mkt-nav-toggle .mkt-nav-toggle-close {
    display: none;
}

.mkt-nav.is-open .mkt-nav-toggle .mkt-nav-toggle-open {
    display: none;
}

.mkt-nav.is-open .mkt-nav-toggle .mkt-nav-toggle-close {
    display: inline-flex;
}

/* Backdrop gelap di belakang panel dropdown, biar jelas kalau ini
   lapisan menu yang lagi aktif -- juga jadi area buat nutup panel
   dengan tap di luar. */
.mkt-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 6, 12, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s;
}

.mkt-nav.is-open+.mkt-nav-scrim {
    display: block;
    opacity: 1;
}

/* ── Layout utama ────────────────────────────────────────────── */
.mkt-main {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    /* Nav sekarang selalu satu baris dengan tinggi tetap (--mkt-nav-h),
       jadi jaraknya konstan -- gak perlu diukur lewat JS lagi. */
    padding: calc(var(--mkt-nav-h) + 2rem) clamp(1rem, 4vw, 3rem) 4rem;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

/* ── Hero ────────────────────────────────────────────────────── */
.mkt-hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.mkt-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: rgba(0, 194, 232, 0.1);
    border: 1px solid rgba(0, 194, 232, 0.22);
    color: var(--mkt-primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mkt-hero-tag i[class*='fa-'] {
    font-size: 1rem;
}

.mkt-hero h1 {
    font-family: var(--mkt-font-display);
    font-size: clamp(2.1rem, 5.4vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0;
    max-width: 56rem;
    color: var(--mkt-text);
}

/* Separuh judul diberi gradien + sedikit cahaya. Warnanya dipagari
   text-shadow yang halus, bukan glow tebal, supaya tetap kebaca di tema
   terang. */
.mkt-hero-accent {
    background: linear-gradient(100deg, var(--mkt-primary), var(--mkt-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.mkt-hero p {
    font-size: clamp(0.95rem, 1.6vw, 1.125rem);
    line-height: 1.65;
    color: var(--mkt-text-dim);
    max-width: 42rem;
    margin: 0;
}

/* ── Pencarian ───────────────────────────────────────────────── */
.mkt-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 38rem;
    margin-top: 0.5rem;
    padding: 0.35rem;
    border-radius: var(--mkt-radius);
    border: 1px solid var(--mkt-stroke);
    background: var(--mkt-glass-solid);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mkt-search-wrap:focus-within {
    border-color: rgba(0, 194, 232, 0.55);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26), 0 0 18px rgba(0, 194, 232, 0.12);
}

.mkt-search-wrap>i[class*='fa-'] {
    flex: 0 0 auto;
    margin-left: 0.85rem;
    color: var(--mkt-text-muted);
    font-size: 1.25rem;
    pointer-events: none;
}

.mkt-search-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border: none;
    background: transparent;
    color: var(--mkt-text);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
}

.mkt-search-wrap input::placeholder {
    color: var(--mkt-text-muted);
}

.mkt-search-wrap input::-webkit-search-cancel-button {
    display: none;
}

.mkt-search-clear {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mkt-text-muted);
    cursor: pointer;
}

.mkt-search-clear:hover,
.mkt-search-clear:focus-visible {
    background: var(--mkt-surface-3);
    color: var(--mkt-text);
    outline: none;
}

.mkt-search-wrap input:focus,
.mkt-search-wrap input:focus-visible {
    border: 0;
    outline: 0;
    box-shadow: none;
}

.mkt-search-btn {
    flex: 0 0 auto;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: var(--mkt-radius-sm);
    background: linear-gradient(135deg, var(--mkt-primary), var(--mkt-primary-strong));
    color: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 0.18s, box-shadow 0.18s, transform 0.15s;
}

.mkt-search-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 18px var(--mkt-glow);
}

.mkt-search-btn:active {
    transform: scale(0.97);
}

/* ── CTA sekunder di hero ────────────────────────────────────── */
.mkt-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.mkt-hero-cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    border-radius: var(--mkt-radius);
    background: var(--mkt-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--mkt-stroke);
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.18s, box-shadow 0.2s;
}

.mkt-hero-cta--link:hover {
    border-color: rgba(0, 194, 232, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.mkt-hero-cta-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mkt-primary-tint);
    color: var(--mkt-primary);
}

.mkt-hero-cta-icon--cyan {
    background: var(--mkt-secondary-tint);
    color: var(--mkt-secondary);
}

.mkt-hero-cta-icon i[class*='fa-'] {
    font-size: 1.15rem;
}

.mkt-hero-cta-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.mkt-hero-cta-text strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mkt-text);
}

.mkt-hero-cta-text span {
    font-size: 0.74rem;
    color: var(--mkt-text-muted);
}

.mkt-hero-cta-link {
    margin-left: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--mkt-primary-tint);
    color: var(--mkt-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s;
}

.mkt-hero-cta-link:hover {
    background: rgba(0, 194, 232, 0.22);
}

.mkt-hero-cta-arrow {
    font-size: 1.05rem;
    color: var(--mkt-text-muted);
    transition: color 0.18s, transform 0.18s;
}

.mkt-hero-cta--link:hover .mkt-hero-cta-arrow {
    color: var(--mkt-primary);
    transform: translateX(3px);
}

/* ── Strip kepercayaan ───────────────────────────────────────── */
.mkt-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.5rem;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.mkt-trust-strip li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    color: var(--mkt-text-muted);
}

.mkt-trust-strip i[class*='fa-'] {
    font-size: 1rem;
    color: var(--mkt-secondary);
}

/* ── Dua kolom: rail layanan + etalase ───────────────────────── */
.mkt-columns {
    display: grid;
    /* Rail dipatok ~270px, bukan proporsi 5:7 seperti dulu: isinya sekarang
       daftar baris pendek, jadi lebar segitu sudah cukup dan sisanya
       dikasih ke etalase produk (dulu grid produk kesempitan padahal
       kartunya yang butuh ruang). */
    grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.mkt-columns.is-detail {
    grid-template-columns: minmax(0, 1fr);
}

.mkt-col-rail {
    position: sticky;
    top: 6.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mkt-col-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.mkt-section-title {
    font-family: var(--mkt-font-display);
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--mkt-text);
    margin: 0;
}

/* ── Panel rail ──────────────────────────────────────────────── */
.mkt-rail-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem;
    border-radius: var(--mkt-radius-lg);
    background: var(--mkt-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--mkt-stroke);
    box-shadow: var(--mkt-shadow);
}

.mkt-rail-head .mkt-section-title {
    color: var(--mkt-primary);
}

.mkt-rail-head p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    color: var(--mkt-text-muted);
}

.mkt-rail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mkt-category-scroll-actions {
    display: none;
    align-items: center;
    gap: 0.4rem;
}

.mkt-category-scroll-actions button {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mkt-stroke);
    border-radius: 10px;
    background: var(--mkt-surface-2);
    color: var(--mkt-text-dim);
    cursor: pointer;
}

.mkt-category-scroll-actions button:hover,
.mkt-category-scroll-actions button:focus-visible {
    border-color: var(--mkt-line-strong);
    color: var(--mkt-primary);
    outline: none;
}

.mkt-rail-foot {
    padding-top: 0.85rem;
    border-top: 1px solid var(--mkt-stroke);
}

.mkt-rail-reset {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: var(--mkt-radius-sm);
    border: 1px solid rgba(34, 211, 238, 0.4);
    background: transparent;
    color: var(--mkt-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s;
}

.mkt-rail-reset:hover {
    background: var(--mkt-secondary-tint);
}

/* ── Kartu kategori (rail kiri) ──────────────────────────────── */
/* Daftar kategori jadi baris vertikal (bukan grid kotak): jumlah
   kategorinya datang dari mapping admin dan bisa panjang, dan baris
   lebih gampang dibaca sekilas daripada belasan kotak. Di layar kecil
   dia berubah jadi barisan pill yang bisa digeser -- lihat @media. */
.cat-filter-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cat-btn {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--mkt-text-dim);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
}

.cat-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--mkt-text);
}

.cat-btn:active {
    transform: scale(0.985);
}

.cat-btn-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mkt-secondary-tint);
    color: var(--mkt-secondary);
    transition: background 0.2s, color 0.2s;
}

.cat-btn-icon i[class*='fa-'] {
    font-size: 1.15rem;
}

.cat-btn-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-btn-count {
    flex: 0 0 auto;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--mkt-surface-3);
    color: var(--mkt-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cat-btn.active {
    background: var(--mkt-primary-tint);
    border-color: rgba(0, 194, 232, 0.34);
    color: var(--mkt-primary);
}

.cat-btn.active .cat-btn-icon {
    background: rgba(0, 194, 232, 0.22);
    color: var(--mkt-primary);
}

.cat-btn.active .cat-btn-count {
    background: rgba(0, 194, 232, 0.22);
    color: var(--mkt-primary);
}

/* ── Ikon kategori berwarna + micro-glow ─────────────────────── */
/* Tiap kategori dapat warna sendiri ("tone", di-set lewat data-tone dari
   JS) biar rail-nya gak monoton satu warna kayak sebelumnya. */
.cat-btn-icon[data-tone="wallet"] {
    background: rgba(0, 194, 232, 0.16);
    color: #5EEAFB;
}

.cat-btn-icon[data-tone="etoll"] {
    background: rgba(45, 212, 191, 0.16);
    color: #2DD4BF;
}

.cat-btn-icon[data-tone="pulsa"] {
    background: rgba(129, 140, 248, 0.16);
    color: #818CF8;
}

.cat-btn-icon[data-tone="data"] {
    background: rgba(34, 211, 238, 0.16);
    color: #22D3EE;
}

.cat-btn-icon[data-tone="pln"] {
    background: rgba(251, 191, 36, 0.16);
    color: #FBBF24;
}

.cat-btn-icon[data-tone="tagihan"] {
    background: rgba(52, 211, 153, 0.16);
    color: #34D399;
}

.cat-btn-icon[data-tone="voucher"] {
    background: rgba(8, 145, 178, 0.16);
    color: #0891B2;
}

.cat-btn-icon[data-tone="game"] {
    background: rgba(244, 114, 182, 0.16);
    color: #F472B6;
}

.cat-btn-icon[data-tone="hiburan"] {
    background: rgba(96, 165, 250, 0.16);
    color: #60A5FA;
}

.cat-btn-icon[data-tone="transfer"] {
    background: rgba(148, 163, 184, 0.18);
    color: #CBD5E1;
}

.cat-btn-icon[data-tone="card"] {
    background: rgba(56, 189, 248, 0.16);
    color: #38BDF8;
}

.cat-btn.active .cat-btn-icon[data-tone] {
    box-shadow: 0 0 0 1px currentColor inset;
}

/* Napas pelan tiap ikon kategori -- padanan halus dari glow yang dipakai
   ikon diamond di alur Topup, cuma jauh lebih tenang biar gak ganggu waktu
   dipakai buat filter. Delay digeser per posisi tombol biar gak nyala
   bareng (efek "konstelasi", bukan kedip serempak). */
@keyframes cat-icon-breathe {

    0%,
    100% {
        filter: drop-shadow(0 0 0 transparent);
    }

    50% {
        filter: drop-shadow(0 0 5px currentColor);
    }
}

.cat-btn-icon i[class*='fa-'] {
    animation: cat-icon-breathe 3.6s ease-in-out infinite;
}

.cat-btn:nth-child(3n+1) .cat-btn-icon i[class*='fa-'] {
    animation-delay: 0s;
}

.cat-btn:nth-child(3n+2) .cat-btn-icon i[class*='fa-'] {
    animation-delay: 1.2s;
}

.cat-btn:nth-child(3n+3) .cat-btn-icon i[class*='fa-'] {
    animation-delay: 2.4s;
}

/* ── Strip ikon dekoratif di atas rail kategori ──────────────── */
/* Padanan asset "diamond" yang dipakai alur Topup Game, versi
   Marketplace: dompet, kartu, e-toll, voucher -- ikon doang yang melayang
   pelan + glow warna-warni. Murni dekoratif (aria-hidden), gak nyambung ke
   filter kategori manapun. */
.mkt-rail-deco {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.mkt-rail-deco-item {
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mkt-deco-float 3.6s ease-in-out infinite;
}

.mkt-rail-deco-item i[class*='fa-'] {
    font-size: 1.15rem;
}

.mkt-rail-deco-item--wallet {
    background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.34), rgba(0, 194, 232, 0.08));
    color: #67e8f9;
    box-shadow: 0 0 16px rgba(0, 194, 232, 0.35);
    animation-delay: 0s;
}

.mkt-rail-deco-item--card {
    background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.4), rgba(34, 211, 238, 0.1));
    color: #A5F3FC;
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.32);
    animation-delay: 0.5s;
}

.mkt-rail-deco-item--etoll {
    background: radial-gradient(circle at 30% 30%, rgba(45, 212, 191, 0.4), rgba(45, 212, 191, 0.1));
    color: #99F6E4;
    box-shadow: 0 0 16px rgba(45, 212, 191, 0.3);
    animation-delay: 1s;
}

.mkt-rail-deco-item--voucher {
    background: radial-gradient(circle at 30% 30%, rgba(8, 145, 178, 0.4), rgba(8, 145, 178, 0.1));
    color: #FBCFE8;
    box-shadow: 0 0 16px rgba(8, 145, 178, 0.3);
    animation-delay: 1.5s;
}

@keyframes mkt-deco-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* ── Header etalase + grid operator ──────────────────────────── */
.mkt-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.mkt-grid-header h3 {
    font-family: var(--mkt-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mkt-text);
    margin: 0;
}

.mkt-grid-header span {
    font-size: 0.78rem;
    color: var(--mkt-text-muted);
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 0.85rem;
}

.mkt-category-heading {
    grid-column: 1 / -1;
    margin-top: 1.25rem;
    margin-bottom: 0.25rem;
    font-family: var(--mkt-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mkt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mkt-category-heading:first-child {
    margin-top: 0;
}

.mkt-category-bar {
    /* WAJIB spanning full row. Elemen ini anak langsung .market-grid
       (grid auto-fill), jadi tanpa grid-column dia ngisi kolom 1 di baris
       berikutnya dan nendang kartu produk pertama ke kolom 2 -- kelihatannya
       kayak grid "mulai dari tengah". */
    grid-column: 1 / -1;
    width: 2.5rem;
    height: 3px;
    background: linear-gradient(90deg, var(--mkt-primary), var(--mkt-secondary));
    border-radius: 2px;
    margin: 0.35rem 0 0.85rem;
}

/* ── Kartu operator (bento) ──────────────────────────────────
   Isinya: ikon, nama, jumlah produk, lalu kaki kartu berisi harga
   termurah + panah. Tinggi kartu disamakan lewat flex supaya baris kaki
   selalu rata walau nama operatornya beda panjang. */
.market-card {
    position: relative;
    overflow: hidden;
    background: rgba(12, 18, 35, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--mkt-radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    text-align: left;
    cursor: pointer;
    animation: mkt-card-in 0.45s ease-out both;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
}

@keyframes mkt-card-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.market-card:hover,
.market-card:focus-visible {
    border-color: rgba(0, 194, 232, 0.42);
    background: rgba(12, 18, 35, 0.38);
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--mkt-glow-soft), 0 18px 34px rgba(0, 0, 0, 0.32);
    outline: none;
}

/* Kilau diagonal tipis yang cuma muncul pas hover. Murni dekoratif dan
   pointer-events:none supaya gak pernah nyuri klik dari kartunya. */
.market-card-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(135deg, var(--mkt-glow-soft), transparent 55%);
    transition: opacity 0.25s;
}

.market-card:hover .market-card-sheen {
    opacity: 1;
}

.market-card-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--mkt-surface-3);
    border: 1px solid var(--mkt-stroke);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--mkt-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.market-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.market-card-body {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.market-card h4 {
    margin: 0;
    font-family: var(--mkt-font-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mkt-text);
    line-height: 1.35;
    transition: color 0.18s;
}

.market-card:hover h4 {
    color: var(--mkt-primary);
}

.mkt-count {
    font-size: 0.72rem;
    color: var(--mkt-text-muted);
    margin-bottom: 0.75rem;
}

.market-card-foot {
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 1px solid var(--mkt-stroke);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}

.market-card-price {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mkt-price-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mkt-text-muted);
}

.mkt-price {
    font-family: var(--mkt-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--mkt-secondary);
    font-variant-numeric: tabular-nums;
}

.mkt-price--muted {
    font-size: 0.8rem;
    color: var(--mkt-text-muted);
}

.market-card-chevron {
    flex: 0 0 auto;
    font-size: 1.2rem;
    color: var(--mkt-text-muted);
    opacity: 0.5;
    transition: color 0.18s, transform 0.18s, opacity 0.18s;
}

.market-card:hover .market-card-chevron {
    color: var(--mkt-primary);
    opacity: 1;
    transform: translateX(2px);
}

.mkt-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--mkt-text-muted);
}

.mkt-empty i[class*='fa-'] {
    font-size: 2.5rem;
    color: var(--mkt-primary);
    opacity: 0.6;
}

.mkt-empty h3 {
    margin: 0.75rem 0 0.35rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    color: var(--mkt-text);
}

.mkt-empty p {
    margin: 0;
    font-size: 0.85rem;
}

.mkt-skeleton {
    height: 118px;
    border-radius: var(--mkt-radius);
    background: linear-gradient(90deg, var(--mkt-surface-2) 25%, var(--mkt-surface-3) 37%, var(--mkt-surface-2) 63%);
    background-size: 400% 100%;
    animation: mkt-shimmer 1.4s ease infinite;
}

@keyframes mkt-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* ── Blok pendukung: promo reseller + kartu bantuan ──────────── */
.mkt-secondary {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.mkt-secondary.hidden {
    display: none !important;
}

.mkt-promo-banner {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    border-radius: var(--mkt-radius-lg);
    border: 1px solid rgba(0, 194, 232, 0.3);
    background:
        radial-gradient(40rem 22rem at 100% 0%, var(--mkt-glow-soft), transparent 60%),
        linear-gradient(135deg, rgba(0, 194, 232, 0.16), var(--mkt-card));
}

.mkt-promo-content {
    position: relative;
    z-index: 1;
    max-width: 34rem;
}

.mkt-promo-badge {
    display: inline-block;
    margin-bottom: 0.7rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    background: var(--mkt-primary-tint);
    border: 1px solid rgba(0, 194, 232, 0.3);
    color: var(--mkt-primary);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mkt-promo-banner h3 {
    margin: 0 0 0.45rem;
    font-family: var(--mkt-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mkt-text);
}

.mkt-promo-banner p {
    margin: 0 0 1rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--mkt-text-dim);
}

.mkt-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mkt-secondary);
    text-decoration: none;
    transition: color 0.18s, gap 0.18s;
}

.mkt-promo-link:hover {
    color: var(--mkt-primary);
    gap: 0.65rem;
}

.mkt-promo-link i[class*='fa-'] {
    font-size: 1.05rem;
}

.mkt-support-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    border-radius: var(--mkt-radius-lg);
    background: var(--mkt-card);
    border: 1px solid var(--mkt-stroke);
    transition: border-color 0.2s;
}

.mkt-support-card:hover {
    border-color: rgba(34, 211, 238, 0.4);
}

.mkt-support-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mkt-secondary-tint);
    border: 1px solid rgba(34, 211, 238, 0.22);
    color: var(--mkt-secondary);
}

.mkt-support-icon i[class*='fa-'] {
    font-size: 1.6rem;
}

.mkt-support-text h4 {
    margin: 0.5rem 0 0.25rem;
    font-family: var(--mkt-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mkt-text);
}

.mkt-support-text p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--mkt-text-muted);
}

.mkt-support-btn {
    width: 100%;
    max-width: 16rem;
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: var(--mkt-radius-sm);
    border: 1px solid var(--mkt-stroke);
    background: var(--mkt-surface-2);
    color: var(--mkt-text);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}

.mkt-support-btn:hover {
    background: var(--mkt-surface-3);
    border-color: rgba(34, 211, 238, 0.4);
}

/* ── Detail operator ─────────────────────────────────────────── */
.mkt-detail {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mkt-detail-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--mkt-text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.35rem 0;
    transition: color 0.18s;
}

.mkt-detail-back:hover {
    color: var(--mkt-primary);
}

.mkt-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--mkt-radius);
    background: var(--mkt-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--mkt-line);
}

.mkt-detail-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    border-radius: 16px;
    background: var(--mkt-surface-3);
    border: 1px solid var(--mkt-line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--mkt-secondary);
    font-size: 1.4rem;
}

.mkt-detail-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.mkt-detail-cat {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mkt-secondary);
}

.mkt-detail-info h2 {
    margin: 0.2rem 0 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mkt-text);
}

.mkt-detail-search {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.mkt-detail-search-box {
    position: relative;
    flex: 1 1 26rem;
    max-width: 42rem;
}

.mkt-detail-search-box>i[class*='fa-'] {
    position: absolute;
    left: 1rem;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--mkt-text-muted);
    pointer-events: none;
}

.mkt-detail-search-box input {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    padding: 0.82rem 2.8rem 0.82rem 2.75rem;
    border: 1px solid var(--mkt-line-strong);
    border-radius: var(--mkt-radius-sm);
    background: var(--mkt-surface-2);
    color: var(--mkt-text);
    font: 500 0.86rem/1.4 'Inter', 'Plus Jakarta Sans', sans-serif;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.mkt-detail-search-box input::-webkit-search-cancel-button {
    display: none;
}

.mkt-detail-search-box input::placeholder {
    color: var(--mkt-text-muted);
}

.mkt-detail-search-box input:focus {
    border-color: var(--mkt-primary);
    background: var(--mkt-surface-3);
    box-shadow: 0 0 16px var(--mkt-primary-tint);
}

.mkt-detail-search-box:focus-within>i[class*='fa-'] {
    color: var(--mkt-primary);
}

.mkt-detail-search-clear {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mkt-text-muted);
    cursor: pointer;
}

.mkt-detail-search-clear:hover,
.mkt-detail-search-clear:focus-visible {
    background: var(--mkt-primary-tint);
    color: var(--mkt-primary);
    outline: none;
}

.mkt-detail-search-meta {
    flex: 0 0 auto;
    color: var(--mkt-text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.mkt-detail-empty-search .mkt-btn-secondary {
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .mkt-detail-search {
        align-items: stretch;
        flex-direction: column;
        gap: 0.45rem;
    }

    .mkt-detail-search-box {
        flex-basis: auto;
        max-width: none;
    }

    .mkt-detail-search-meta {
        padding-left: 0.15rem;
    }
}

/* ==========================================================================
   MARKETPLACE BANKING DASHBOARD
   Pola navigasi dibuat seperti aplikasi mobile banking: ringkasan utama,
   akses cepat, lalu grid layanan fungsional. Tidak ada dekorasi yang bisa
   menabrak kolom produk; seluruh ikon pada panel layanan adalah tombol asli.
   ========================================================================== */
.mkt-main {
    gap: 1.5rem;
}

.mkt-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-items: stretch;
    text-align: left;
    gap: 0.85rem;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid var(--mkt-stroke);
    border-radius: calc(var(--mkt-radius-lg) + 4px);
    background:
        radial-gradient(circle at 88% 10%, rgba(34, 211, 238, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(8, 145, 178, 0.13), var(--mkt-glass-solid) 58%);
    box-shadow: var(--mkt-shadow);
}

.mkt-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 15rem;
    height: 15rem;
    right: -6rem;
    bottom: -9rem;
    border: 1px solid rgba(34, 211, 238, 0.16);
    border-radius: 50%;
    box-shadow: 0 0 0 2.5rem rgba(8, 145, 178, 0.04), 0 0 0 5rem rgba(8, 145, 178, 0.025);
}

.mkt-hero h1 {
    max-width: 42rem;
    font-size: clamp(1.8rem, 4.2vw, 2.7rem);
}

.mkt-hero p {
    max-width: 44rem;
    font-size: clamp(0.86rem, 1.4vw, 1rem);
}

.mkt-quick-panel,
.mkt-trust-panel {
    border: 1px solid var(--mkt-stroke);
    border-radius: calc(var(--mkt-radius-lg) + 2px);
    background: var(--mkt-glass-solid);
    box-shadow: var(--mkt-shadow);
}

.mkt-quick-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2.2vw, 1.45rem);
}

.mkt-quick-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.mkt-quick-panel-head h2 {
    margin: 0.12rem 0 0;
    color: var(--mkt-text);
    font-family: var(--mkt-font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    line-height: 1.2;
}

.mkt-panel-kicker {
    margin: 0;
    color: var(--mkt-primary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mkt-quick-panel-head > p {
    max-width: 22rem;
    margin: 0;
    color: var(--mkt-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: right;
}

.mkt-search-wrap {
    max-width: none;
    margin-top: 0.25rem;
    background: var(--mkt-surface-2);
    box-shadow: none;
}

.mkt-banking-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.mkt-banking-action {
    min-width: 0;
    min-height: 5.8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.8rem;
    border: 1px solid var(--mkt-stroke);
    border-radius: 15px;
    background: rgba(9, 19, 31, 0.64);
    color: var(--mkt-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.mkt-banking-action:hover,
.mkt-banking-action:focus-visible {
    border-color: rgba(34, 211, 238, 0.48);
    background: rgba(8, 145, 178, 0.14);
    transform: translateY(-2px);
    outline: none;
}

.mkt-banking-action-icon {
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    margin-bottom: 0.25rem;
    border-radius: 12px;
    background: var(--mkt-primary-tint);
    color: var(--mkt-primary);
}

.mkt-banking-action strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--mkt-text);
    font-size: 0.78rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-banking-action > span:last-child {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--mkt-text-muted);
    font-size: 0.67rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-trust-strip {
    justify-content: flex-start;
    margin: 0;
}

.mkt-trust-panel {
    padding: 0.75rem 1rem;
}

.mkt-columns,
.mkt-columns.is-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.mkt-col-rail {
    position: static;
}

.mkt-rail-panel {
    gap: 1rem;
    padding: 1rem;
    background: var(--mkt-glass-solid);
}

.mkt-rail-head {
    align-items: center;
}

.mkt-category-scroll-actions,
.mkt-rail-foot,
.mkt-rail-deco {
    display: none !important;
}

.cat-filter-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 0.55rem;
    overflow: visible;
    padding: 0;
}

.cat-btn {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 6rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 0.4rem;
    border-color: var(--mkt-stroke);
    border-radius: 14px;
    background: var(--mkt-surface-2);
    text-align: center;
}

.cat-btn:hover,
.cat-btn:focus-visible {
    border-color: var(--mkt-line-strong);
    transform: translateY(-2px);
    outline: none;
}

.cat-btn-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
}

.cat-btn-icon i[class*='fa-'] {
    font-size: 1.2rem;
}

.cat-btn-label {
    flex: 0 1 auto;
    width: 100%;
    overflow: visible;
    font-size: 0.72rem;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
}

.cat-btn-count {
    display: none;
}

.cat-btn.active {
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.14);
}

@media (max-width: 640px) {
    .mkt-main {
        padding-inline: 0.75rem;
        gap: 1rem;
    }

    .mkt-hero {
        padding: 1rem;
        border-radius: 18px;
    }

    .mkt-hero h1 {
        font-size: 1.55rem;
        line-height: 1.18;
    }

    .mkt-quick-panel {
        gap: 0.8rem;
        padding: 0.9rem;
        border-radius: 18px;
    }

    .mkt-quick-panel-head {
        align-items: start;
    }

    .mkt-quick-panel-head > p {
        max-width: 10rem;
        font-size: 0.72rem;
        text-align: right;
    }

    .mkt-hero-tag {
        align-self: flex-start;
    }

    .mkt-banking-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .mkt-banking-action {
        min-height: 5.4rem;
        align-items: center;
        padding: 0.55rem 0.2rem;
        text-align: center;
    }

    .mkt-banking-action-icon {
        width: 2.15rem;
        height: 2.15rem;
        border-radius: 11px;
    }

    .mkt-banking-action strong {
        display: flex;
        min-height: 1.75rem;
        align-items: center;
        justify-content: center;
        font-size: 0.66rem;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .mkt-banking-action > span:last-child {
        font-size: 0.58rem;
    }

    .mkt-trust-strip {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .mkt-rail-panel {
        padding: 0.85rem 0.7rem;
        border-radius: 18px;
    }

    .cat-filter-wrap {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .cat-btn {
        min-height: 5.25rem;
        padding: 0.55rem 0.2rem;
        border-radius: 13px;
    }

    .cat-btn-icon {
        width: 2.45rem;
        height: 2.45rem;
        border-radius: 12px;
    }

    .cat-btn-label {
        font-size: 0.63rem;
    }
}

.mkt-detail-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.7rem;
}

/* Grid tile nominal -- seluruh tile adalah tombol beli (button asli,
   jadi otomatis aksesibel & attribute `disabled` langsung berfungsi
   buat produk yang harganya kosong / out-of-stock). */
.mkt-product-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    min-height: 5.4rem;
    padding: 0.9rem 1rem;
    border-radius: var(--mkt-radius-sm);
    background: rgba(12, 18, 35, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.15s;
}

.mkt-product-tile:hover {
    border-color: rgba(0, 194, 232, 0.35);
    background: rgba(12, 18, 35, 0.38);
}

.mkt-product-tile:active {
    transform: scale(0.97);
}

.mkt-product-tile-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mkt-text-dim);
    line-height: 1.3;
}

.mkt-product-tile-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mkt-secondary);
}

.mkt-product-tile--disabled,
.mkt-product-tile--disabled:hover {
    background: var(--mkt-surface-4);
    border-color: var(--mkt-line);
    cursor: not-allowed;
    transform: none;
}

.mkt-product-tile--disabled .mkt-product-tile-price {
    color: var(--mkt-text-muted);
}

.mkt-price-normal {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mkt-text-muted);
    text-decoration: line-through;
    opacity: 0.8;
}

.mkt-reseller-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.2rem;
    border-radius: var(--mkt-radius);
    background: linear-gradient(135deg, rgba(0, 194, 232, 0.14), rgba(34, 211, 238, 0.1));
    border: 1px solid rgba(0, 194, 232, 0.3);
}

.mkt-reseller-banner i[class*='fa-'] {
    font-size: 1.6rem;
    color: var(--mkt-primary);
}

.mkt-reseller-banner strong {
    font-size: 0.88rem;
    color: var(--mkt-text);
}

.mkt-reseller-banner p {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--mkt-text-dim);
}

.mkt-reseller-banner a {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mkt-primary);
    text-decoration: none;
}

.mkt-reseller-banner a:hover {
    text-decoration: underline;
}

/* ── Modal (checkout & pembayaran) ───────────────────────────── */
.mkt-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(1, 8, 18, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mkt-overlay.is-visible {
    display: flex;
}

.mkt-modal {
    position: relative;
    width: 100%;
    max-width: 30rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.75rem;
    border-radius: var(--mkt-radius);
    background: var(--mkt-glass-solid);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--mkt-line-strong);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    animation: mkt-modal-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mkt-modal-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.mkt-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--mkt-text-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.mkt-modal-close:hover {
    color: var(--mkt-text);
    background: rgba(255, 255, 255, 0.12);
}

.mkt-checkout-summary {
    padding-bottom: 1.1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--mkt-line);
}

.mkt-checkout-op {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mkt-secondary);
}

.mkt-checkout-summary h3 {
    margin: 0.35rem 0 0.5rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mkt-text);
    padding-right: 2rem;
}

.mkt-checkout-price {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mkt-primary);
}

#mktCheckoutForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#mktCheckoutForm label {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mkt-text-dim);
}

#mktCheckoutForm input,
#mktCheckoutForm select {
    width: 100%;
    padding: 0.8rem 0.95rem;
    border-radius: var(--mkt-radius-sm);
    border: 1px solid var(--mkt-line-strong);
    background: var(--mkt-surface-2);
    color: var(--mkt-text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 400;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}

#mktCheckoutForm input::placeholder {
    color: var(--mkt-text-muted);
}

#mktCheckoutForm input:focus,
#mktCheckoutForm select:focus {
    border-color: var(--mkt-primary);
    box-shadow: 0 0 0 2px rgba(0, 194, 232, 0.2);
}

.mkt-optional {
    font-weight: 500;
    color: var(--mkt-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* Pilihan metode pembayaran ala kartu */
.mkt-pay-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mkt-text-dim);
    margin-bottom: 0.55rem;
}

.mkt-pay-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.mkt-pay-option {
    position: relative;
    cursor: pointer;
}

.mkt-pay-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mkt-pay-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 0.85rem;
    border-radius: var(--mkt-radius-sm);
    background: var(--mkt-surface-2);
    border: 1px solid var(--mkt-line);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--mkt-text);
    transition: border-color 0.18s, background 0.18s;
}

.mkt-pay-card i[class*='fa-'] {
    font-size: 1.25rem;
    color: var(--mkt-secondary);
}

.mkt-pay-option:hover .mkt-pay-card {
    border-color: var(--mkt-line-strong);
}

.mkt-pay-option input:checked+.mkt-pay-card {
    border-color: var(--mkt-primary);
    background: rgba(0, 194, 232, 0.08);
}

.mkt-pay-option input:focus-visible+.mkt-pay-card {
    box-shadow: 0 0 0 2px rgba(0, 194, 232, 0.35);
}

.mkt-btn-primary {
    width: 100%;
    padding: 0.9rem;
    border-radius: var(--mkt-radius-sm);
    border: none;
    background: var(--mkt-primary-strong);
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 10px 24px rgba(0, 194, 232, 0.28);
    transition: filter 0.18s, transform 0.15s;
}

.mkt-btn-primary:hover:not(:disabled) {
    filter: brightness(1.12);
}

.mkt-btn-primary:active:not(:disabled) {
    transform: scale(0.985);
}

.mkt-btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.mkt-btn-secondary {
    width: 100%;
    padding: 0.75rem;
    border-radius: var(--mkt-radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--mkt-text);
    background: var(--mkt-surface-3);
    border: 1px solid var(--mkt-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: border-color 0.18s, color 0.18s;
}

.mkt-btn-secondary:hover {
    border-color: var(--mkt-secondary);
    color: var(--mkt-secondary);
}

.mkt-checkout-error {
    color: #f87171;
    font-size: 0.78rem;
    min-height: 14px;
    margin: 0;
}

/* ── Cek Tagihan (pascabayar) ────────────────────────────────── */
.mkt-spin {
    animation: mkt-rotate 1s linear infinite;
}

@keyframes mkt-rotate {
    to {
        transform: rotate(360deg);
    }
}

.mkt-inquiry-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mkt-inquiry-result {
    margin-top: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: var(--mkt-radius-sm);
    background: var(--mkt-surface-2);
    border: 1px solid var(--mkt-line);
    font-size: 0.78rem;
    color: var(--mkt-text-dim);
}

.mkt-inquiry-result.is-error {
    border-color: rgba(248, 113, 113, 0.5);
    color: #f87171;
}

.mkt-inquiry-result .row {
    display: flex;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.2rem 0;
}

.mkt-inquiry-result .row strong {
    color: var(--mkt-text);
    text-align: right;
}

/* ── Modal pembayaran ────────────────────────────────────────── */
#mktPaymentTitle {
    margin: 0 2rem 1.1rem 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mkt-text);
}

.mkt-payment-block {
    text-align: center;
    margin-bottom: 1.25rem;
}

.mkt-payment-hint {
    font-size: 0.8rem;
    color: var(--mkt-text-muted);
    margin: 0 0 0.85rem;
}

.mkt-payment-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem;
    background: #fff;
    border-radius: var(--mkt-radius-sm);
    margin-bottom: 0.85rem;
}

.mkt-payment-qr img,
.mkt-payment-qr canvas {
    max-width: 100%;
    height: auto;
}

.mkt-payment-va-number {
    font-family: 'Plus Jakarta Sans', monospace;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--mkt-primary);
    padding: 0.85rem;
    border-radius: var(--mkt-radius-sm);
    background: var(--mkt-surface-2);
    border: 1px dashed var(--mkt-line-strong);
    margin-bottom: 0.85rem;
    word-break: break-all;
}

.mkt-payment-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: var(--mkt-radius-sm);
    background: var(--mkt-surface-2);
    border: 1px solid var(--mkt-line);
    font-size: 0.8rem;
    color: var(--mkt-text-muted);
}

.mkt-payment-meta .row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.mkt-payment-meta strong {
    color: var(--mkt-text);
    text-align: right;
    word-break: break-all;
}

.mkt-payment-status i[class*='fa-'],
.mkt-btn-secondary i[class*='fa-'],
.mkt-btn-primary i[class*='fa-'],
.mkt-detail-back i[class*='fa-'],
.nx-footer__legal-link i[class*='fa-'] {
    font-size: 1.1rem;
    vertical-align: -0.2em;
}

.mkt-payment-status {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--mkt-text-muted);
}

.mkt-payment-status.mkt-status-success {
    color: var(--mkt-secondary);
}

.mkt-payment-status.mkt-status-failed {
    color: #f87171;
}

/* ── Footer ──────────────────────────────────────────────────── */
.nx-footer--market {
    position: relative;
    z-index: 1;
    background: var(--mkt-bg-deep);
    border-top: 1px solid var(--mkt-line);
    padding: 3.5rem clamp(1rem, 4vw, 3rem);
    margin-top: 2rem;
}

.nx-footer__container {
    max-width: 1200px;
    margin: 0 auto;
}

.nx-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.nx-footer__brand-logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--mkt-primary);
    margin-bottom: 0.75rem;
}

.nx-footer__brand-desc {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--mkt-text-muted);
    margin: 0;
}

.nx-footer__heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mkt-text-dim);
    margin: 0 0 0.85rem;
}

.nx-footer__link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nx-footer__link {
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--mkt-text-muted);
    transition: color 0.18s;
}

.nx-footer__link:hover {
    color: var(--mkt-secondary);
}

.nx-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.nx-footer__legal-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--mkt-text);
}

.nx-footer__legal-ids {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nx-footer__legal-ids span {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--mkt-surface-3);
    border: 1px solid var(--mkt-line);
    color: var(--mkt-text-muted);
}

.nx-footer__legal-oss {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--mkt-text-muted);
}

.nx-footer__legal-oss img {
    height: 22px;
    width: auto;
}

.nx-footer__legal-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mkt-primary);
    text-decoration: none;
}

.nx-footer__legal-link:hover {
    text-decoration: underline;
}

.nx-footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mkt-line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
}

.nx-footer__bottom p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--mkt-text-muted);
}

.nx-footer__bottom-note {
    opacity: 0.75;
}

/* Kredit developer -- sengaja dibuat kecil & senada, nempel di baris
   copyright, bukan banner terpisah yang mencolok. */
.nx-footer__credit {
    opacity: 0.65;
    font-size: 0.95em;
}

/* ── Penyesuaian tema terang ─────────────────────────────────
   Beberapa state hover dipagari rgba(255,255,255,...) yang di latar putih
   sama saja dengan tidak ada. Di tema terang hover-nya dibalik jadi warna
   gelap tipis supaya tetap kelihatan. */
:root[data-theme="light"] .cat-btn:hover,
:root[data-theme="light"] .mkt-nav-links a:hover {
    background: rgba(15, 23, 42, 0.045);
}

:root[data-theme="light"] .market-card,
:root[data-theme="light"] .mkt-product-tile {
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme="light"] .market-card:hover,
:root[data-theme="light"] .market-card:focus-visible,
:root[data-theme="light"] .mkt-product-tile:hover {
    background: rgba(255, 255, 255, 0.84);
    border-color: rgba(8, 145, 178, 0.3);
}

:root[data-theme="light"] .market-card-icon {
    box-shadow: none;
}

:root[data-theme="light"] .mkt-search-wrap {
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

:root[data-theme="light"] .mkt-search-wrap:focus-within {
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1), 0 0 16px var(--mkt-glow-soft);
}

:root[data-theme="light"] .cat-btn-count {
    background: rgba(15, 23, 42, 0.06);
}

/* ── Merek di footer ─────────────────────────────────────────
   Sebelumnya footer cuma punya tulisan "NEXSHOP MARKETPLACE" tanpa logo,
   jadi identitasnya putus dari nav. Sekarang pakai lambang yang sama
   dengan nav, dengan bingkai gradien yang sama pula. */
.nx-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.nx-footer__brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    padding: 1px;
    border-radius: 11px;
    background: linear-gradient(to top right, var(--mkt-primary), var(--mkt-secondary));
    display: flex;
}

.nx-footer__brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    background: var(--mkt-bg);
}

.nx-footer__brand .nx-footer__brand-logo {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-family: var(--mkt-font-display);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--mkt-text);
}

.nx-footer__brand .nx-footer__brand-logo span {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--mkt-secondary);
}

/* ── Responsif ───────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .mkt-nav-search input {
        width: 10rem;
    }

    .mkt-nav-search input:focus {
        width: 12rem;
    }
}

@media (max-width: 1024px) {
    .mkt-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-col-rail {
        position: static;
    }

    /* Sebelumnya rail ini jadi barisan pill yang digeser horizontal
       (overflow-x: auto + nowrap). Masalahnya scrollbar disembunyikan
       total di seluruh halaman (lihat "* { scrollbar-width: none }" di
       atas), jadi di HP gak ada tanda visual apapun kalau ada kategori
       lain di luar layar -- kelihatannya cuma 1-2 kategori doang yang
       "ada". Diganti wrap ke bawah supaya SEMUA kategori langsung
       kebaca tanpa perlu discroll atau nebak-nebak. */
    .mkt-rail-panel {
        padding: 0.85rem;
        gap: 0.7rem;
    }

    .cat-filter-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 0.5rem;
        padding-bottom: 0;
    }

    .cat-btn {
        width: auto;
        flex: 0 0 auto;
        border-radius: 999px;
        border-color: var(--mkt-stroke);
        background: var(--mkt-surface-2);
    }

    .cat-btn-icon {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 8px;
    }

    .cat-btn-icon i[class*='fa-'] {
        font-size: 0.95rem;
    }

    .mkt-rail-deco-item {
        width: 2.1rem;
        height: 2.1rem;
    }

    .mkt-rail-deco-item i[class*='fa-'] {
        font-size: 1.05rem;
    }

    .mkt-rail-foot {
        display: none;
    }

    .mkt-secondary {
        grid-template-columns: minmax(0, 1fr);
    }

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

@media (max-width: 768px) {
    :root {
        /* Nav mobile jadi lebih pendek dari desktop (elemennya lebih
           sedikit di baris utama), tapi TETAP satu angka pasti -- bukan
           lagi ditebak lewat fallback JS. .mkt-main dan panel dropdown
           di bawah ikut angka ini secara otomatis. */
        --mkt-nav-h: 3.6rem;
    }

    .mkt-nav {
        padding: 0 0.85rem;
    }

    .mkt-nav-brand {
        font-size: 1rem;
        gap: 0.4rem;
    }

    .mkt-brand-mark {
        width: 34px;
        height: 34px;
    }

    .mkt-nav-brand .nx-tag {
        display: none;
    }

    /* Tombol menu cuma muncul di mobile -- gantinya link kategori ikut
       wrap ke baris tambahan seperti versi lama. */
    .mkt-nav-toggle {
        display: inline-flex;
    }

    /* Link kategori dipindah jadi panel dropdown yang nempel persis di
       bawah nav (top:100% dari .mkt-nav yang fixed), bukan lagi baris
       ke-2/3 yang bikin tinggi nav berubah-ubah. Tersembunyi secara
       default lewat max-height:0, bukan display:none, biar transisinya
       halus pas dibuka. */
    .mkt-nav-links {
        position: absolute;
        top: 100%;
        left: 0.85rem;
        right: 0.85rem;
        flex-direction: column;
        gap: 0.15rem;
        max-height: 0;
        overflow-x: visible;
        overflow-y: auto;
        opacity: 0;
        margin-top: 0;
        padding: 0;
        border-radius: 0 0 var(--mkt-radius) var(--mkt-radius);
        background: var(--mkt-glass-solid);
        border: 1px solid var(--mkt-line);
        border-top: none;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
        pointer-events: none;
        transition: max-height 0.22s ease, opacity 0.18s ease;
    }

    .mkt-nav.is-open .mkt-nav-links {
        max-height: 70vh;
        opacity: 1;
        pointer-events: auto;
        padding: 0.5rem;
    }

    .mkt-nav-links a {
        width: 100%;
        white-space: nowrap;
        padding: 0.75rem 0.85rem;
        font-size: 0.9rem;
        border-radius: var(--mkt-radius-sm);
    }

    .mkt-nav-links a.active {
        background: var(--mkt-primary-tint);
    }

    /* Aksi kanan disederhanain di mobile: teks tombol "Cek Transaksi" DAN
       "Ke Toko" diringkas jadi ikon aja supaya satu baris nav gak sesak.
       ROOT CAUSE (sebelumnya): "Ke Toko" tetap nyimpen teksnya (cuma
       font-size dikecilin), jadi begitu wallet button + toggle + track
       button ikut ngambil tempat di layar sempit (<=412px), total lebar
       4 elemen itu ngelewatin lebar nav -- browser motong "Ke Toko"
       jadi "Ke T..." kepotong nempel di tepi layar (overflow-x:hidden di
       body cuma nyembunyiin scrollbar-nya, bukan benerin overflow-nya).
       Sekarang treatment-nya disamain kayak track-btn: ikon doang di
       mobile, teks tetap kebaca lewat aria-label. */
    .mkt-nav-actions {
        gap: 0.35rem;
    }

    .mkt-nav-track-btn span:not(i[class*='fa-']) {
        display: none;
    }

    .mkt-nav-track-btn {
        padding: 0.5rem;
        min-width: 2.2rem;
        justify-content: center;
    }

    .mkt-nav-back span:not(i[class*='fa-']) {
        display: none;
    }

    .mkt-nav-back {
        padding: 0.5rem;
        min-width: 2.2rem;
        justify-content: center;
        gap: 0;
    }

    .mkt-nav-back i[class*='fa-'] {
        font-size: 1.2rem;
    }

    .mkt-nav-toggle {
        width: 2.2rem;
        height: 2.2rem;
    }
}

/* Layar HP paling sempit (360-390px) -- setelah "Ke Toko"/"Cek Transaksi"
   jadi ikon (lihat @media 768px di atas), masih ada 4 elemen berdempetan
   (toggle + wallet + 2 ikon) di kanan nav. Di lebar <=400px, wordmark
   "NEXSHOP" di brand dilepas duluan (logo mark-nya aja yang kepake, brand
   tetap kebaca dari logo + konteks halaman) supaya actions selalu punya
   ruang penuh dan gak pernah balik nabrak/kepotong lagi. */
@media (max-width: 400px) {
    .mkt-nav {
        padding: 0 0.65rem;
        gap: 0.5rem;
    }

    .mkt-nav-brand {
        gap: 0;
    }

    .mkt-brand-text {
        display: none;
    }

    .mkt-nav-actions {
        gap: 0.3rem;
    }
}

/* Marketplace mobile memakai empat aksi penting sekaligus (menu, wallet,
   transaksi, dan kembali ke toko). Beri semuanya touch target yang konsisten
   dan jadikan dropdown panel terpisah agar header tidak terlihat berdesakan.
   Prefix .marketplace-page menjaga navbar Reseller/Docs tetap apa adanya. */
@media (max-width: 768px) {
    .marketplace-page {
        --mkt-nav-h: 4.25rem;
    }

    .marketplace-page .mkt-nav {
        gap: 0.75rem;
        padding-inline: 0.75rem;
    }

    .marketplace-page .mkt-nav-brand {
        min-width: 0;
        gap: 0.4rem;
        font-size: 0.9rem;
    }

    .marketplace-page .mkt-brand-mark {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .marketplace-page .mkt-brand-text {
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .marketplace-page .mkt-nav-actions {
        margin-left: auto;
        gap: 0.5rem;
    }

    .marketplace-page .mkt-nav-toggle,
    .marketplace-page .mkt-nav-track-btn,
    .marketplace-page .mkt-nav-back,
    .marketplace-page .nx-wallet-nav-btn {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0;
        flex: 0 0 2.5rem;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
    }

    .marketplace-page .nx-wallet-nav-btn {
        gap: 0;
    }

    .marketplace-page .nx-wallet-nav-info {
        display: none;
    }

    .marketplace-page .nx-wallet-nav-icon-wrap {
        width: 26px;
        height: 26px;
    }

    .marketplace-page .mkt-nav-links {
        top: calc(100% + 0.65rem);
        left: 0.75rem;
        right: 0.75rem;
        gap: 0.25rem;
        border: 1px solid var(--mkt-line);
        border-radius: var(--mkt-radius);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    }

    .marketplace-page .mkt-nav.is-open .mkt-nav-links {
        padding: 0.75rem;
    }

    .marketplace-page .mkt-nav-links li {
        width: 100%;
    }

    .marketplace-page .mkt-nav-links a {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0.7rem 0.9rem;
        line-height: 1.25;
    }

    .marketplace-page .mkt-nav-pill {
        display: none !important;
    }
}

/* Program Reseller hanya memiliki dua aksi di kanan. Beri ruang dan touch
   target yang layak tanpa menyembunyikan wordmark pada ponsel kecil. */
@media (max-width: 768px) {
    .reseller-page {
        --mkt-nav-h: 4rem;
    }

    .reseller-page .mkt-nav {
        gap: 0.75rem;
        padding-inline: 0.75rem;
    }

    .reseller-page .mkt-nav-brand {
        min-width: 0;
        gap: 0.45rem;
        font-size: 0.9rem;
    }

    .reseller-page .mkt-brand-text {
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .reseller-page .mkt-nav-actions {
        margin-left: auto;
        gap: 0.5rem;
    }

    .reseller-page .mkt-nav-toggle,
    .reseller-page .mkt-nav-back {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
        flex: 0 0 2.75rem;
        justify-content: center;
        border-radius: 12px;
    }

    .reseller-page .mkt-nav-links {
        top: calc(100% + 0.5rem);
        left: 0.75rem;
        right: 0.75rem;
        border: 1px solid var(--mkt-line);
        border-radius: var(--mkt-radius);
    }

    .reseller-page .mkt-nav.is-open .mkt-nav-links {
        padding: 0.65rem;
    }

    .reseller-page .mkt-nav-links li {
        width: 100%;
    }

    .reseller-page .mkt-nav-links a {
        min-height: 2.75rem;
    }
}

/* Dropdown reseller/docs: beri napas visual yang cukup di antara item.
   Screenshot mobile menunjukkan panel terbuka terasa menempel karena gap
   default terlalu kecil dan padding panel cuma setengah rem. Scope ini hanya
   untuk dua halaman reseller, jadi navbar Marketplace dan halaman lain tidak
   ikut berubah. */
@media (max-width: 768px) {
    .reseller-page .mkt-nav-links,
    .reseller-docs-page .mkt-nav-links {
        gap: 0.5rem;
        top: calc(100% + 0.65rem);
    }

    .reseller-page .mkt-nav.is-open .mkt-nav-links,
    .reseller-docs-page .mkt-nav.is-open .mkt-nav-links {
        padding: 0.8rem;
    }

    .reseller-page .mkt-nav-links a,
    .reseller-docs-page .mkt-nav-links a {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0.7rem 0.9rem;
        line-height: 1.35;
    }
}

@media (max-width: 340px) {
    .marketplace-page .mkt-nav {
        gap: 0.5rem;
        padding-inline: 0.5rem;
    }

    .marketplace-page .mkt-nav-brand {
        font-size: 0.78rem;
    }

    .marketplace-page .mkt-brand-mark {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .marketplace-page .mkt-nav-actions {
        gap: 0.35rem;
    }
}

@media (max-width: 768px) {
    .mkt-main {
        padding-top: calc(var(--mkt-nav-h) + 1.5rem);
        gap: 2.5rem;
    }

    .market-grid {
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    }

    .mkt-nav-pill span:not(i[class*='fa-']) {
        display: none;
    }

    .mkt-hero-ctas {
        width: 100%;
    }

    .mkt-hero-cta {
        width: 100%;
    }

    .mkt-search-wrap {
        padding: 0.3rem;
    }

    .mkt-search-btn {
        padding: 0.65rem 1rem;
        font-size: 0.8rem;
    }

    .mkt-trust-strip {
        gap: 0.35rem 1rem;
    }

    .mkt-promo-banner,
    .mkt-support-card {
        padding: 1.15rem;
    }

    .mkt-pay-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-modal {
        padding: 1.35rem;
        max-height: 92vh;
    }

    .mkt-detail-products {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 0.6rem;
    }

    /* Ikon hujan: dikecilin dan sebagian disembunyiin biar gak penuh
       di layar sempit -- pola yang sama kayak halaman utama di style.css. */
    .ambient-asset {
        opacity: .08;
    }

    .ambient-asset--wallet,
    .ambient-asset--card {
        font-size: 30px;
    }

    .ambient-asset--cash,
    .ambient-asset--coins,
    .ambient-asset--bank {
        font-size: 26px;
    }

    .ambient-asset--qr,
    .ambient-asset--bolt,
    .ambient-asset--invoice {
        font-size: 24px;
    }

    .ambient-asset--simcard,
    .ambient-asset--gift,
    .ambient-asset--shield {
        font-size: 22px;
    }

    .ambient-asset--toll,
    .ambient-asset--piggy,
    .ambient-asset--receipt,
    .ambient-asset--transfer,
    .ambient-asset--cart {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    /* animation-duration 0.01ms tetap menjalankan animasi (sekejap), dan
       karena .market-card pakai fill-mode "both" kartunya bisa nyangkut di
       keyframe awal yang opacity:0. Animasinya dimatikan total di sini. */
    .market-card {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* =============================================================
   Komponen Pencarian Bank Tujuan (TFBANK / Transfer Antar Bank)
   ============================================================= */
.mkt-bank-field-label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
}

.mkt-bank-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.mkt-bank-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--mkt-text-muted);
    font-size: 1.25rem;
    pointer-events: none;
    z-index: 2;
}

.mkt-bank-search-wrap input[type="text"] {
    padding-left: 2.75rem !important;
    padding-right: 2.5rem !important;
    width: 100%;
    background: var(--mkt-surface-2) !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: var(--mkt-radius-sm) !important;
    color: var(--mkt-text) !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease;
}

.mkt-bank-search-wrap input[type="text"]:focus {
    border-color: var(--mkt-primary) !important;
    box-shadow: 0 0 14px rgba(0, 194, 232, 0.2) !important;
    background: var(--mkt-surface-3) !important;
}

.mkt-bank-clear-btn {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--mkt-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    z-index: 2;
    transition: color 0.15s;
}

.mkt-bank-clear-btn:hover {
    color: var(--mkt-text);
}

.mkt-bank-clear-btn i[class*='fa-'] {
    font-size: 1.1rem;
}

.mkt-bank-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background: var(--mkt-glass-solid);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--mkt-line-strong);
    border-radius: var(--mkt-radius-sm);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 0.35rem;
}

.mkt-bank-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--mkt-text);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
}

.mkt-bank-option:hover,
.mkt-bank-option.is-highlighted {
    background: color-mix(in srgb, var(--mkt-primary) 15%, transparent);
    color: var(--mkt-text);
}

.mkt-bank-code-badge {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.78rem;
    background: color-mix(in srgb, var(--mkt-primary) 20%, transparent);
    color: var(--mkt-primary-soft);
    border: 1px solid color-mix(in srgb, var(--mkt-primary) 40%, transparent);
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.mkt-bank-option-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.mkt-bank-option-name {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkt-bank-option-cat {
    font-size: 0.72rem;
    color: var(--mkt-text-muted);
}

.mkt-bank-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--mkt-text-dim);
    font-size: 0.84rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.mkt-bank-selected-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--mkt-primary) 10%, var(--mkt-surface-2));
    border: 1px solid color-mix(in srgb, var(--mkt-primary) 35%, transparent);
    border-radius: var(--mkt-radius-sm);
    margin-top: 0.4rem;
    animation: mktFadeIn 0.2s ease;
}

.mkt-bank-selected-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.mkt-bank-selected-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mkt-bank-selected-text strong {
    font-size: 0.875rem;
    color: var(--mkt-text);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkt-bank-selected-text span {
    font-size: 0.75rem;
    color: var(--mkt-primary-soft);
}

.mkt-bank-change-btn {
    background: color-mix(in srgb, var(--mkt-primary) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--mkt-primary) 30%, transparent);
    color: var(--mkt-primary-soft);
    border-radius: 6px;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.mkt-bank-change-btn:hover {
    background: var(--mkt-primary);
    color: #ffffff;
}

@keyframes mktFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   NEXSHOP WALLET & DIRECT QRIS THEME
   ========================================================================== */
.mkt-nav-wallet-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.85rem;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(34, 211, 238, 0.15));
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 999px;
    color: var(--mkt-text, #ffffff);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    text-decoration: none;
}

.mkt-nav-wallet-btn:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(34, 211, 238, 0.25));
    border-color: rgba(56, 189, 248, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2);
}

.wallet-modal {
    max-width: 440px;
    width: 92%;
    border-radius: 20px;
    background: var(--mkt-surface, #13111c);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.wallet-balance-card {
    padding: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #082f49, #0e7490);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.28);
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}

.wallet-balance-val {
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #ffffff;
    line-height: 1.1;
}

.btn-wallet-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s ease;
    border: none;
}

.btn-wallet-action.primary {
    flex: 1;
    background: linear-gradient(135deg, #00c2e8, #22d3ee);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.btn-wallet-action.primary:hover {
    background: linear-gradient(135deg, #0891b2, #0891b2);
    transform: translateY(-1px);
}

.btn-wallet-action.secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--mkt-text, #ffffff);
}

.btn-wallet-action.secondary:hover {
    background: rgba(255, 255, 255, 0.14);
}

.wallet-mutations-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}

.wallet-mutation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    font-size: 0.8rem;
    transition: background 0.15s ease;
}

.wallet-mutation-item:hover {
    background: rgba(255, 255, 255, 0.07);
}

.wallet-mutation-desc {
    font-weight: 700;
    color: var(--mkt-text, #ffffff);
    margin-bottom: 2px;
}

.wallet-mutation-meta {
    font-size: 0.7rem;
    color: var(--mkt-text-dim, #94a3b8);
}

.wallet-mutation-amount {
    font-weight: 900;
    text-align: right;
}

.wallet-mutation-amount.in {
    color: #34d399;
}

.wallet-mutation-amount.out {
    color: #f87171;
}

.wallet-mutation-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.wallet-mutation-icon.in {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.wallet-mutation-icon.out {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.wallet-mutation-icon.refund {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

.wallet-mutation-icon.adj {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

/* ==========================================================================
   PREMIUM NEXSHOP WALLET MODAL DESIGN SYSTEM (MARKETPLACE)
   ========================================================================== */
.wallet-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    background: rgba(3, 7, 18, 0.78) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease, visibility 0.22s ease !important;
}

.wallet-modal-overlay.active,
.wallet-modal-overlay.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
}

.wallet-modal-overlay:not(.active):not(.is-visible) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.nx-wallet-modal-card {
    width: min(560px, calc(100vw - 32px)) !important;
    max-width: 560px !important;
    background: #0c1220 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(56, 189, 248, 0.1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    animation: nxWalletModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    margin: auto !important;
}

.nx-wallet-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #0f172a !important;
    box-sizing: border-box !important;
}

.nx-wallet-header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.nx-wallet-header-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0ea5e9, #22d3ee) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important;
    flex-shrink: 0 !important;
}

.nx-wallet-header-title {
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 2px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

.nx-wallet-header-subtitle {
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

.nx-wallet-close-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    font-size: 1rem !important;
}

.nx-wallet-close-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.nx-wallet-modal-body {
    padding: 22px 24px !important;
    max-height: calc(85vh - 85px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.nx-wallet-modal-body::-webkit-scrollbar {
    width: 5px;
}
.nx-wallet-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* View 1: Overview */
.nx-wallet-balance-card {
    border-radius: 20px !important;
    background: linear-gradient(135deg, #18223d 0%, #0d1527 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
    padding: 22px 24px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
}

.nx-balance-eyebrow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #94a3b8 !important;
    margin-bottom: 8px !important;
}

.nx-verified-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #38bdf8 !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    background: rgba(56, 189, 248, 0.12) !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.nx-balance-val {
    font-size: 2.25rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    margin: 4px 0 0 !important;
}

.nx-wallet-security-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    margin-bottom: 16px !important;
}

.nx-security-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

.nx-security-title {
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
}

.nx-security-desc {
    display: block !important;
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    line-height: 1.3 !important;
}

.nx-wallet-actions-row {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
}

.nx-btn-wallet-action.primary {
    flex: 1 !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0ea5e9, #22d3ee) !important;
    color: #ffffff !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.35) !important;
    transition: all 0.18s ease !important;
}

.nx-btn-wallet-action.primary:hover {
    background: linear-gradient(135deg, #0284c7, #0891b2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.45) !important;
}

.nx-btn-arrow {
    font-size: 0.82rem !important;
    transition: transform 0.18s ease !important;
}

.nx-btn-wallet-action.primary:hover .nx-btn-arrow {
    transform: translateX(4px) !important;
}

.nx-btn-wallet-action.secondary {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    flex-shrink: 0 !important;
}

.nx-btn-wallet-action.secondary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.nx-wallet-mutations-section {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 18px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
}

.nx-mutations-header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.nx-mutations-header h4 {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.nx-mutations-header span {
    font-size: 0.72rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.nx-mutations-empty {
    text-align: center !important;
    padding: 28px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.nx-empty-icon-box {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #64748b !important;
    font-size: 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
}

.nx-empty-title {
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
}

.nx-empty-desc {
    font-size: 0.74rem !important;
    color: #64748b !important;
    max-width: 280px !important;
}

.wallet-mutation-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 8px !important;
    transition: background 0.15s ease !important;
}

.wallet-mutation-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.wallet-mutation-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}

.wallet-mutation-icon.in {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
}

.wallet-mutation-icon.out {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

.wallet-mutation-desc {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}

.wallet-mutation-meta {
    font-size: 0.7rem !important;
    color: #64748b !important;
}

.wallet-mutation-amount {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}

.wallet-mutation-amount.in {
    color: #22c55e !important;
}

.wallet-mutation-amount.out {
    color: #ef4444 !important;
}

/* View 2: Form Top Up */
.nx-view-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
}

.nx-wallet-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    min-height: 38px !important;
}

.nx-wallet-back-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    transform: translateX(-2px) !important;
}

.nx-view-tag {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.1) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
}

.nx-form-section {
    margin-bottom: 18px !important;
}

.nx-section-header {
    margin-bottom: 8px !important;
}

.nx-section-title {
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #94a3b8 !important;
}

.nx-presets-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

.nx-preset-card {
    position: relative !important;
    padding: 14px 10px !important;
    border-radius: 14px !important;
    background: #181D26 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
}

.nx-preset-card:hover {
    border-color: rgba(56, 189, 248, 0.4) !important;
    background: #172236 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.nx-preset-card.selected {
    border-color: #38bdf8 !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(34, 211, 238, 0.1)) !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 0 1px #38bdf8, 0 6px 18px rgba(14, 165, 233, 0.2) !important;
    transform: translateY(-2px) !important;
}

.nx-preset-check {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #38bdf8 !important;
    color: #04141a !important;
    font-size: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: scale(0.5) !important;
    transition: all 0.18s ease !important;
}

.nx-preset-card.selected .nx-preset-check {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.nx-custom-amount-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 14px !important;
    background: #181D26 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 14px !important;
    transition: all 0.18s ease !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
}

.nx-custom-amount-wrapper:focus-within {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
    background: #131d30 !important;
}

.nx-custom-amount-wrapper.invalid {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2) !important;
}

.nx-currency-prefix {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    margin-right: 8px !important;
    user-select: none !important;
}

.nx-custom-amount-input {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    outline: none !important;
    padding: 12px 0 !important;
    font-family: inherit !important;
}

.nx-custom-amount-input::-webkit-inner-spin-button,
.nx-custom-amount-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.nx-custom-amount-input[type=number] {
    -moz-appearance: textfield !important;
}

.nx-clear-amount-btn {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    padding: 4px !important;
    transition: color 0.15s !important;
}

.nx-clear-amount-btn:hover {
    color: #f87171 !important;
}

.nx-amount-helper-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 6px !important;
    padding: 0 2px !important;
}

.nx-amount-helper-text {
    font-size: 0.72rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.nx-amount-error-text {
    font-size: 0.72rem !important;
    color: #f87171 !important;
    font-weight: 700 !important;
}

.nx-payment-methods-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

.nx-payment-method-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #181D26 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    min-height: 64px !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.nx-payment-method-card:hover {
    border-color: rgba(56, 189, 248, 0.4) !important;
    background: #172236 !important;
}

.nx-payment-method-card.active {
    border-color: #38bdf8 !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(34, 211, 238, 0.08)) !important;
    box-shadow: 0 0 0 1px #38bdf8, 0 6px 18px rgba(14, 165, 233, 0.15) !important;
}

.nx-pm-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

.nx-pm-icon-box.qris {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
}

.nx-pm-icon-box.va {
    background: rgba(168, 85, 247, 0.15) !important;
    color: #c084fc !important;
}

.nx-pm-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.nx-pm-title {
    display: block !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}

.nx-pm-desc {
    display: block !important;
    font-size: 0.68rem !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.nx-pm-radio {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.65rem !important;
    color: transparent !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.nx-payment-method-card.active .nx-pm-radio {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
    color: #04141a !important;
    font-weight: 900 !important;
}

.nx-wallet-primary-cta {
    width: 100% !important;
    height: 50px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0ea5e9, #0891b2) !important;
    color: #ffffff !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35) !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.nx-wallet-primary-cta:hover:not(:disabled) {
    background: linear-gradient(135deg, #0284c7, #4338ca) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.45) !important;
}

.nx-wallet-primary-cta:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* View 3: QRIS Display */
.nx-qris-top-banner {
    margin-bottom: 14px !important;
}

.nx-qris-heading {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 4px !important;
}

.nx-qris-amount-val {
    font-size: 1.9rem !important;
    font-weight: 900 !important;
    color: #38bdf8 !important;
    letter-spacing: -0.02em !important;
}

.nx-qris-code-container {
    display: inline-block !important;
    padding: 14px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 2px solid rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
    margin-bottom: 14px !important;
}

.nx-qris-img {
    width: 210px !important;
    height: 210px !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 8px !important;
}

.nx-qris-status-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: rgba(251, 191, 36, 0.12) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.nx-qris-pulse-indicator {
    position: relative !important;
    width: 10px !important;
    height: 10px !important;
}

.nx-pulse-ring {
    position: absolute !important;
    inset: -3px !important;
    border-radius: 50% !important;
    background: rgba(251, 191, 36, 0.4) !important;
    animation: nxPulse 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite !important;
}

.nx-pulse-core {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: #fbbf24 !important;
}

.nx-qris-instructions {
    font-size: 0.74rem !important;
    color: #94a3b8 !important;
    line-height: 1.45 !important;
    max-width: 400px !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: left !important;
}

.nx-btn-cancel-qris {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 18px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.nx-btn-cancel-qris:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* View 4: Success */
.nx-success-icon-badge {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: rgba(16, 185, 129, 0.15) !important;
    border: 2px solid #10b981 !important;
    color: #10b981 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important;
    margin: 0 auto 12px !important;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.3) !important;
}

.nx-success-title {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 0 4px !important;
}

.nx-success-copy {
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    margin: 0 0 16px !important;
}

.nx-success-balance-box {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    margin-bottom: 18px !important;
}

.nx-success-balance-label {
    display: block !important;
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    margin-bottom: 2px !important;
}

.nx-success-balance-val {
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    color: #10b981 !important;
}

/* View 5: Expired */
.nx-expired-icon-badge {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important;
    margin: 0 auto 12px !important;
}

.nx-expired-title {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 0 4px !important;
}

.nx-expired-copy {
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    margin: 0 0 16px !important;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .wallet-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .nx-wallet-modal-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        max-height: 90vh !important;
    }

    .nx-wallet-header {
        padding: 16px 18px 14px !important;
    }

    .nx-wallet-modal-body {
        padding: 18px 16px !important;
    }

    .nx-presets-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .nx-payment-methods-grid {
        grid-template-columns: 1fr !important;
    }
}

.wallet-modal-overlay.active,
.wallet-modal-overlay.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
}

.wallet-modal-overlay:not(.active):not(.is-visible) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================================
   PEMUATAN BERTAHAP (LAZY LOAD) — kontrol "Muat lebih banyak"
   ==========================================================================
   Katalog tidak lagi diunduh sekaligus; kartu datang per halaman. Zona ini
   berisi tombol muat-lagi + sentinel IntersectionObserver, atau keterangan
   penutup saat semua hasil sudah tampil.

   Tombolnya tetap ada meski auto-load aktif: infinite scroll murni memutus
   navigasi keyboard dan tidak berfungsi kalau IntersectionObserver tidak
   tersedia. */
.mkt-loadmore-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    /* min-height menjaga tinggi kolom stabil saat isinya berganti dari
       tombol ke teks penutup -- tanpa ini halaman "melompat" tiap kali
       batch terakhir selesai dimuat. */
    min-height: 2.75rem;
}

.mkt-loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.72rem 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--mkt-stroke);
    background: var(--mkt-surface-2);
    color: var(--mkt-text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    touch-action: manipulation;
}

.mkt-loadmore-btn:hover:not(:disabled) {
    border-color: var(--mkt-line-strong);
    background: var(--mkt-primary-tint);
    transform: translateY(-1px);
}

.mkt-loadmore-btn:focus-visible {
    outline: 2px solid var(--mkt-primary);
    outline-offset: 3px;
}

.mkt-loadmore-btn:disabled {
    opacity: 0.65;
    cursor: progress;
    transform: none;
}

/* Ikon panah berputar jadi spinner saat memuat, jadi status tombol terbaca
   tanpa menambah elemen baru yang menggeser layout. */
.mkt-loadmore-btn.is-loading i {
    animation: mkt-loadmore-spin 0.9s linear infinite;
}

@keyframes mkt-loadmore-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mkt-loadmore-btn,
    .mkt-loadmore-btn.is-loading i {
        transition: none;
        animation: none;
    }
}

.mkt-loadmore-sisa {
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--mkt-primary-tint);
    color: var(--mkt-primary);
    font-size: 0.72rem;
    font-weight: 800;
}

.mkt-loadmore-done {
    margin: 0;
    color: var(--mkt-text-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* Sentinel: elemen tak terlihat yang diawasi IntersectionObserver. Diberi
   tinggi 1px (bukan 0) karena elemen setinggi nol tidak pernah dilaporkan
   berpotongan oleh sebagian browser. */
#mktLoadSentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
}

/* Kartu & tile dalam keadaan skeleton tidak boleh bisa diklik atau difokus
   -- kalau tidak, pengguna keyboard bisa "masuk" ke kartu kosong. */
.market-card.is-skeleton,
.mkt-product-tile.is-skeleton {
    pointer-events: none;
    cursor: default;
}

.mkt-product-tile.is-skeleton {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/* ==========================================================================
   MARKETPLACE DISCOVERY UX
   Ringkasan hasil, filter aktif, dan kategori ringkas untuk katalog besar.
   ========================================================================== */
.mkt-grid-header>div {
    min-width: 0;
}

.mkt-grid-header p {
    margin: 0.25rem 0 0;
    color: var(--mkt-text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.mkt-active-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.85rem 0 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--mkt-line-strong);
    border-radius: 12px;
    background: var(--mkt-primary-tint);
    color: var(--mkt-text-dim);
    font-size: 0.78rem;
}

.mkt-active-filter span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    overflow-wrap: anywhere;
}

.mkt-active-filter i {
    color: var(--mkt-primary);
}

.mkt-active-filter button {
    min-height: 2.5rem;
    flex: 0 0 auto;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--mkt-line-strong);
    border-radius: 9px;
    background: var(--mkt-surface-2);
    color: var(--mkt-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.mkt-active-filter button:hover,
.mkt-active-filter button:focus-visible {
    border-color: var(--mkt-primary);
    outline: none;
}

#mktServicesSection {
    scroll-margin-top: calc(var(--mkt-nav-h) + 1rem);
}

.market-card {
    width: 100%;
    min-width: 0;
    color: inherit;
    font-family: inherit;
}

@media (max-width: 1024px) {
    .cat-filter-wrap {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.5rem;
        padding: 0 0 0.55rem;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: var(--mkt-line-strong) transparent;
        overscroll-behavior-inline: contain;
    }

    .cat-filter-wrap::-webkit-scrollbar {
        display: block;
        height: 4px;
    }

    .cat-filter-wrap::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--mkt-line-strong);
    }

    .cat-btn {
        min-height: 2.75rem;
        scroll-snap-align: start;
    }

    .mkt-category-scroll-actions {
        display: flex;
    }

    .mkt-rail-deco {
        display: none;
    }
}

@media (max-width: 640px) {
    .mkt-active-filter {
        align-items: flex-start;
    }

    .mkt-active-filter button {
        min-height: 2.75rem;
    }

    .mkt-grid-header {
        align-items: flex-start;
    }
}

/* Final responsive layer for the banking shortcut grid. Diletakkan paling
   akhir agar aturan kompatibilitas kategori lama tidak mengembalikannya
   menjadi pill horizontal yang saling berhimpitan. */
@media (max-width: 1024px) {
    .cat-filter-wrap {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 0.5rem;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
    }

    .cat-btn {
        width: 100%;
        min-width: 0;
        min-height: 5.6rem;
        flex: initial;
        flex-direction: column;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.65rem 0.35rem;
        border-radius: 14px;
        scroll-snap-align: none;
    }

    .cat-btn-icon {
        width: 2.65rem;
        height: 2.65rem;
        border-radius: 13px;
    }

    .cat-btn-icon i[class*='fa-'] {
        font-size: 1.15rem;
    }

    .cat-btn-label {
        width: 100%;
        flex: initial;
        overflow: visible;
        font-size: 0.68rem;
        line-height: 1.25;
        text-align: center;
        text-overflow: clip;
        white-space: normal;
    }

    .mkt-category-scroll-actions {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .cat-filter-wrap {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .cat-btn {
        min-height: 5.25rem;
        padding: 0.55rem 0.2rem;
        border-radius: 13px;
    }

    .cat-btn-icon {
        width: 2.45rem;
        height: 2.45rem;
        border-radius: 12px;
    }

    .cat-btn-label {
        font-size: 0.63rem;
    }
}

/* ==========================================================================
   PRODUCT DESCRIPTION RENDERER (UI/UX Pro Max)
   ========================================================================== */

.structured-description {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 0.9375rem;
    color: var(--nx-text-secondary);
    line-height: 1.6;
}

.sd-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sd-intro-section {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sd-intro-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--nx-text-primary);
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.sd-intro-header i {
    color: var(--nx-accent);
}

.sd-p {
    margin: 0;
    text-align: justify;
    hyphens: auto;
}

.sd-p-lead {
    color: var(--nx-text-primary);
    font-size: 0.95rem;
    line-height: 1.65;
}

.sd-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nx-text-primary);
}

.sd-title i {
    font-size: 1rem;
    opacity: 0.9;
}

.sd-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sd-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    position: relative;
}

.sd-list li i {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Specific Section Styles */
.sd-benefits .sd-title i, .sd-benefits .sd-list li i {
    color: #10b981; /* Emerald green */
}

.sd-important {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    padding: 1rem;
}

.sd-important .sd-title i {
    color: #f59e0b; /* Amber */
}

.sd-important .sd-title {
    color: #fbbf24;
}

.sd-important .sd-list li i {
    color: #f59e0b;
}

.sd-warranty .sd-title i {
    color: #3b82f6; /* Blue */
}

.sd-usage .sd-title i {
    color: #a855f7; /* Purple */
}

.sd-terms .sd-title i {
    color: #64748b; /* Slate */
}

.sd-delivery .sd-title i {
    color: #0ea5e9; /* Light blue */
}

.sd-compatibility .sd-title i {
    color: #ec4899; /* Pink */
}

.sd-general .sd-title i {
    color: #8b5cf6;
}

.mkt-route-status {
    min-height: 48vh;
    display: grid;
    place-items: center;
    padding: 96px 20px 72px;
    text-align: center;
}

.mkt-route-card {
    max-width: 520px;
    padding: 36px 24px;
    border: 1px solid var(--mkt-border);
    border-radius: 20px;
    background: var(--mkt-surface);
}

.mkt-route-card > i {
    display: block;
    margin-bottom: 16px;
    color: var(--mkt-accent);
    font-size: 2rem;
}

.mkt-route-card h1 {
    color: var(--mkt-text);
    font-size: clamp(1.35rem, 3vw, 2rem);
    margin-bottom: 8px;
}

.mkt-route-card p {
    color: var(--mkt-text-muted);
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .mkt-route-status {
        padding-inline: 14px;
    }
}