/* Reseller storefront. One structure, five themes selected by <body class="theme-*">.
   Themes only redefine tokens plus a few decorative touches, so every page works in all of them.
   A reseller-chosen accent (inline --accent on <body>) overrides the theme's accent. */

*,
*::before,
*::after { box-sizing: border-box; }

:root { color-scheme: dark; }

body {
  --bg: #0b0b1a;
  --bg-fx: radial-gradient(1200px 600px at 50% -200px, rgba(124, 92, 255, .28), transparent 70%),
           radial-gradient(800px 400px at 100% 0%, rgba(34, 211, 238, .10), transparent 70%);
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .18);
  --text: #c9cbe0;
  --muted: #8a8ca6;
  --heading: #ffffff;
  --accent: #7c5cff;
  --accent-2: #22d3ee;
  --on-accent: #ffffff;
  --success: #34d399;
  --danger: #f87171;
  --warning: #fbbf24;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow: 0 20px 60px -30px rgba(0, 0, 0, .8);
  --gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
  --heading-weight: 700;
  --heading-tracking: -0.02em;
  --btn-radius: var(--radius-pill);

  margin: 0;
  min-height: 100vh;
  background: var(--bg-fx), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* ---------- Themes ---------- */
body.theme-daylight {
  --bg: #f6f8fc;
  --bg-fx: radial-gradient(900px 500px at 85% -120px, rgba(37, 99, 235, .10), transparent 70%),
           radial-gradient(700px 400px at 0% 0%, rgba(14, 165, 233, .08), transparent 70%);
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e3e8f0;
  --border-strong: #cbd5e1;
  --text: #334155;
  --muted: #64748b;
  --heading: #0f172a;
  --accent: #2563eb;
  --accent-2: #0ea5e9;
  --success: #059669;
  --danger: #dc2626;
  --warning: #d97706;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -16px rgba(15, 23, 42, .18);
  --heading-weight: 800;
  color-scheme: light;
}

body.theme-terminal {
  --bg: #000000;
  --bg-fx: repeating-linear-gradient(0deg, rgba(57, 255, 136, .025) 0 1px, transparent 1px 3px);
  --surface: #050d08;
  --surface-2: #0a1a10;
  --border: #173222;
  --border-strong: #2a5a3c;
  --text: #9fe8b8;
  --muted: #5e9c74;
  --heading: #d6ffe4;
  --accent: #39ff88;
  --accent-2: #39ff88;
  --on-accent: #001a0a;
  --success: #39ff88;
  --danger: #ff5f56;
  --warning: #ffd23f;
  --radius: 2px;
  --radius-sm: 2px;
  --btn-radius: 2px;
  --font-body: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'JetBrains Mono', ui-monospace, monospace;
  --shadow: 0 0 0 1px var(--border), 0 0 40px -20px rgba(57, 255, 136, .35);
  --gradient: linear-gradient(90deg, var(--accent), var(--accent));
  --heading-tracking: -0.01em;
  font-size: 14px;
}

body.theme-sunset {
  --bg: #16091a;
  --bg-fx: radial-gradient(900px 520px at 15% -160px, rgba(255, 122, 69, .30), transparent 70%),
           radial-gradient(900px 520px at 90% -60px, rgba(255, 61, 139, .26), transparent 70%);
  --surface: rgba(255, 236, 230, .05);
  --surface-2: rgba(255, 236, 230, .09);
  --border: rgba(255, 200, 190, .12);
  --border-strong: rgba(255, 200, 190, .24);
  --text: #f1d9d6;
  --muted: #b9918f;
  --heading: #fff4f0;
  --accent: #ff7a45;
  --accent-2: #ff3d8b;
  --radius: 24px;
  --radius-sm: 14px;
  --font-body: 'Sora', system-ui, sans-serif;
  --font-display: 'Sora', system-ui, sans-serif;
  --heading-weight: 800;
  --heading-tracking: -0.035em;
}

body.theme-paper {
  --bg: #f4efe4;
  --bg-fx: none;
  --surface: #fbf8f1;
  --surface-2: #efe8da;
  --border: #1c1917;
  --border-strong: #1c1917;
  --text: #292524;
  --muted: #6b635b;
  --heading: #1c1917;
  --accent: #c2410c;
  --accent-2: #c2410c;
  --on-accent: #fff8f1;
  --success: #15803d;
  --danger: #b91c1c;
  --warning: #a16207;
  --radius: 0;
  --radius-sm: 0;
  --btn-radius: 0;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --shadow: 5px 5px 0 #1c1917;
  --gradient: linear-gradient(var(--accent), var(--accent));
  --heading-weight: 700;
  --heading-tracking: -0.03em;
  color-scheme: light;
}

/* ---------- Base ---------- */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4 {
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1.12;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.hidden { display: none !important; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: 20px; }
.narrow { max-width: 460px; }
.mid { max-width: 760px; }
main { flex: 1; }
.section { padding-block: 56px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.theme-terminal .gradient-text,
body.theme-paper .gradient-text { color: var(--accent); background: none; }

/* ---------- Announcement + nav ---------- */
.announce {
  background: var(--gradient);
  color: var(--on-accent);
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  padding: 8px 16px;
}
body.theme-paper .announce { border-bottom: 2px solid var(--border); }

.nav { border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 78%, transparent); }
body.theme-paper .nav { border-bottom-width: 2px; background: var(--bg); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; flex-wrap: wrap; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--heading); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: var(--heading-tracking); }
.brand:hover { text-decoration: none; }
.brand img { height: 34px; width: auto; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--gradient); display: grid; place-items: center; color: var(--on-accent); font-size: 1rem; font-weight: 800; flex-shrink: 0; }
body.theme-terminal .brand-mark { border-radius: 2px; }
body.theme-terminal .brand-mark::before { content: '>'; }
body.theme-terminal .brand-mark span { display: none; }
body.theme-paper .brand-mark { border-radius: 0; border: 2px solid var(--border); }
.nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-link { color: var(--text); padding: 7px 12px; border-radius: var(--btn-radius); font-size: .92rem; font-weight: 500; position: relative; }
.nav-link:hover { color: var(--heading); background: var(--surface-2); text-decoration: none; }
.nav-link.active { color: var(--heading); }
.dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }

/* ---------- Buttons, fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--btn-radius); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--heading); font: 600 .95rem/1.2 var(--font-body);
  cursor: pointer; transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--gradient); border-color: transparent; color: var(--on-accent); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-primary:hover { filter: brightness(1.08); border-color: transparent; }
body.theme-paper .btn { border: 2px solid var(--border); box-shadow: 3px 3px 0 var(--border); }
body.theme-paper .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--border); }
body.theme-paper .btn-primary { background: var(--accent); }
body.theme-terminal .btn-primary { box-shadow: 0 0 24px -6px var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.btn-sm { padding: 7px 13px; font-size: .84rem; }
.btn-lg { padding: 15px 26px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-danger { color: var(--danger); }

.field, select.field, textarea.field {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--heading); font: 400 .95rem/1.4 var(--font-body); outline: none;
}
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field::placeholder { color: var(--muted); }
body.theme-paper .field { border: 2px solid var(--border); background: #fff; }
.label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.form-row + .form-row { margin-top: 14px; }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
body.theme-paper .card { border-width: 2px; }
.card-tight { padding: 14px 16px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
body.theme-paper .badge, body.theme-terminal .badge { border-radius: 0; }
.badge-success { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.badge-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.badge-warning { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--heading); font-weight: 600; font-size: .88rem; }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); margin-bottom: 18px; font-size: .92rem; }
.alert-success { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--heading); }
.alert-error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--heading); }
.alert-info { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--heading); }

.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: start; font-weight: 600; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }

/* ---------- Hero ---------- */
.hero { padding-block: 72px 48px; }
.hero-grid { display: grid; gap: 40px; align-items: center; grid-template-columns: 1.15fr .85fr; }
.hero h1 { margin-bottom: 18px; }
.hero .lead { font-size: 1.12rem; color: var(--muted); max-width: 560px; }
.hero .actions { margin-top: 28px; }
.hero-kicker { display: inline-flex; margin-bottom: 18px; }
.trust-row { margin-top: 28px; display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: .88rem; }
.trust-row span::before { content: '✓ '; color: var(--success); font-weight: 700; }

.sms-mock { position: relative; }
.sms-phone { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 30px; padding: 18px; box-shadow: var(--shadow); max-width: 340px; margin-inline-start: auto; }
.sms-phone-top { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-bottom: 14px; }
.sms-bubble { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: .88rem; margin-bottom: 10px; }
.sms-code { font-family: var(--font-mono); font-size: 1.7rem; letter-spacing: .22em; color: var(--heading); font-weight: 700; margin: 6px 0 2px; }
.sms-meta { font-size: .74rem; color: var(--muted); }
body.theme-terminal .sms-phone, body.theme-terminal .sms-bubble, body.theme-terminal .combo-item, body.theme-terminal .tab { border-radius: 2px; }
body.theme-terminal .sms-phone-top::before { content: '$ tail -f inbox'; }
body.theme-paper .sms-phone { border-radius: 0; border-width: 2px; }
body.theme-paper .sms-bubble { border-radius: 0; border: 2px solid var(--border); background: #fff; }

/* Centered hero themes */
body.theme-nebula .hero-grid,
body.theme-sunset .hero-grid { grid-template-columns: 1fr; text-align: center; }
body.theme-nebula .hero .lead,
body.theme-sunset .hero .lead { margin-inline: auto; }
body.theme-nebula .hero .actions, body.theme-sunset .hero .actions,
body.theme-nebula .trust-row, body.theme-sunset .trust-row { justify-content: center; }
body.theme-nebula .sms-phone, body.theme-sunset .sms-phone { margin: 0 auto; }
body.theme-sunset .hero h1 { font-size: clamp(2.4rem, 6.6vw, 5rem); }
body.theme-paper .hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 600; }
body.theme-paper .hero { border-bottom: 2px solid var(--border); }
body.theme-terminal .hero h1::before { content: '> '; color: var(--accent); }
body.theme-terminal .hero h1::after { content: '_'; color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Services ---------- */
.svc { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.svc-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--border); }
.svc-icon img { width: 20px; height: 20px; }
/* Logos keep their own colors by default (logos.css fixes near-black marks on dark themes).
   With the one-color option the black glyphs follow the theme's text tone. */
.tone-dark.logos-mono .svc-icon img, .tone-dark.logos-mono .combo-item img { filter: brightness(0) invert(1); opacity: .9; }
.tone-light.logos-mono .svc-icon img, .tone-light.logos-mono .combo-item img { opacity: .85; }
body.theme-terminal .svc-icon, body.theme-paper .svc-icon { border-radius: 0; }
.svc-name { font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-price { margin-inline-start: auto; text-align: end; flex-shrink: 0; }
.svc-price strong { display: block; color: var(--heading); font-family: var(--font-display); }
.svc-price small { color: var(--muted); font-size: .76rem; }

.steps { counter-reset: step; }
.step { position: relative; }
.step::before { counter-increment: step; content: '0' counter(step); display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin-bottom: 8px; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.theme-paper .step::before, body.theme-terminal .step::before { color: var(--accent); background: none; }

details.faq { border-bottom: 1px solid var(--border); padding: 16px 0; }
details.faq summary { cursor: pointer; font-weight: 600; color: var(--heading); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::after { content: '+'; color: var(--accent); font-weight: 700; }
details.faq[open] summary::after { content: '−'; }
details.faq p { margin: 10px 0 0; color: var(--muted); }

/* ---------- Dashboard ---------- */
.dash { display: grid; gap: 20px; grid-template-columns: 380px 1fr; align-items: start; }
.balance-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.balance-amount { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--heading); line-height: 1; }

.combo { position: relative; }
.combo-list { position: absolute; z-index: 20; inset-inline: 0; margin-top: 6px; max-height: 300px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); list-style: none; padding: 4px; margin-bottom: 0; }
body.theme-daylight .combo-list, body.theme-paper .combo-list { background: #fff; }
.combo-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--heading); }
.combo-item:hover, .combo-item.focus { background: var(--surface-2); }
.combo-item img { width: 16px; height: 16px; }
.combo-item .flag { font-size: 1.1rem; line-height: 1; }
.combo-item .price { margin-inline-start: auto; text-align: end; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.combo-item .price b { color: var(--heading); display: block; font-size: .88rem; }
.combo-empty { padding: 10px; color: var(--muted); font-size: .88rem; }

.price-box { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 14px; font-size: .9rem; color: var(--muted); }
.price-box .big { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--heading); }

.order-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface); }
.order-card + .order-card { margin-top: 12px; }
.order-code { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: .12em; color: var(--heading); word-break: break-all; }
.order-text { margin-top: 10px; font-size: .88rem; color: var(--text); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; word-break: break-word; }
.phone { font-family: var(--font-mono); color: var(--heading); font-size: 1.05rem; cursor: copy; }
.spinner { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.tab { padding: 8px 14px; border-radius: var(--btn-radius); color: var(--muted); font-weight: 600; font-size: .9rem; border: 1px solid transparent; }
.tab.active, .tab:hover { color: var(--heading); background: var(--surface-2); border-color: var(--border); text-decoration: none; }

.msg { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; }
.msg.staff { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.msg-meta { font-size: .76rem; color: var(--muted); margin-bottom: 4px; }

.auth-wrap { padding-block: 56px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); margin-top: 64px; padding-block: 30px; font-size: .88rem; color: var(--muted); }
body.theme-paper .footer { border-top-width: 2px; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--heading); }
.powered { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: .78rem; }
.powered:hover { text-decoration: none; border-color: var(--accent); }

.demo-bar { background: repeating-linear-gradient(45deg, #facc15, #facc15 12px, #fde047 12px, #fde047 24px); color: #1c1917; text-align: center; font-size: .86rem; font-weight: 700; padding: 8px 16px; }
.demo-bar a { color: #1c1917; text-decoration: underline; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .sms-phone { margin: 0 auto; }
  .dash { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .section { padding-block: 40px; }
  .hero { padding-block: 44px 28px; }
  .nav-links .hide-sm { display: none; }
  .card { padding: 18px; }
}

/* ---------- Language switcher & accessibility ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lang-form { margin: 0; }
.lang-select { width: auto; padding: 6px 30px 6px 10px; font-size: .82rem; border-radius: var(--radius-pill); background-color: var(--surface); cursor: pointer; }
body.theme-terminal .lang-select, body.theme-paper .lang-select { border-radius: 0; }

/* Right-to-left (Arabic) */
[dir="rtl"] .trust-row span::before { content: ' ✓'; }
[dir="rtl"] details.faq summary::after { margin-inline-start: 12px; }
[dir="rtl"] .hero h1::before { content: ''; }
[dir="rtl"] .mono, [dir="rtl"] .phone, [dir="rtl"] .order-code { unicode-bidi: isolate; }

/* ---------- Features ---------- */
.feature-icon { font-size: 1.6rem; margin-bottom: 10px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.custom-html img { max-width: 100%; height: auto; }

/* =====================================================================
   Themes added later: Illustrated, Blossom, Telegram, Anonymous, Rich
   ===================================================================== */

/* ---------- Illustrated (Storyset) ---------- */
body.theme-illustrated {
  --bg: #f4f7ff;
  --bg-fx: radial-gradient(900px 480px at 90% -120px, rgba(64, 123, 255, .14), transparent 70%),
           radial-gradient(700px 420px at -10% 30%, rgba(255, 199, 39, .10), transparent 70%);
  --surface: #ffffff;
  --surface-2: #eef3ff;
  --border: #dfe7fb;
  --border-strong: #c5d3f5;
  --text: #37474f;
  --muted: #6b7a90;
  --heading: #263238;
  --accent: #407bff;
  --accent-2: #6b9bff;
  --success: #12b76a;
  --danger: #f04438;
  --warning: #f79009;
  --radius: 22px;
  --radius-sm: 14px;
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-display: 'Poppins', system-ui, sans-serif;
  --shadow: 0 18px 40px -24px rgba(64, 123, 255, .35);
  --heading-weight: 700;
  color-scheme: light;
}
.hero-art img { width: 100%; max-width: 480px; height: auto; display: block; margin-inline-start: auto; filter: drop-shadow(0 30px 40px rgba(64, 123, 255, .12)); }
.section-art { display: block; margin: 0 auto 8px; width: 220px; height: auto; }
.auth-art { display: block; margin: 0 auto -18px; width: 220px; height: auto; position: relative; z-index: 1; }
body.theme-illustrated .feature-icon { background: #e8efff; border-color: transparent; }
body.theme-illustrated .btn-primary { box-shadow: 0 12px 24px -10px rgba(64, 123, 255, .6); }

/* ---------- Blossom (cute pink) ---------- */
body.theme-blossom {
  --bg: #fff5fa;
  --bg-fx: radial-gradient(600px 300px at 12% 8%, rgba(249, 168, 212, .45), transparent 70%),
           radial-gradient(520px 300px at 92% 18%, rgba(196, 181, 253, .40), transparent 70%),
           radial-gradient(700px 360px at 50% 110%, rgba(253, 186, 116, .25), transparent 70%);
  --surface: #ffffff;
  --surface-2: #fff0f7;
  --border: #fbd5e8;
  --border-strong: #f7b3d3;
  --text: #6b4a5c;
  --muted: #a1778c;
  --heading: #7a1e4d;
  --accent: #ec4899;
  --accent-2: #f472b6;
  --on-accent: #ffffff;
  --success: #10b981;
  --danger: #e11d48;
  --warning: #f59e0b;
  --radius: 28px;
  --radius-sm: 18px;
  --font-body: 'Quicksand', system-ui, sans-serif;
  --font-display: 'Baloo 2', 'Quicksand', system-ui, sans-serif;
  --shadow: 0 14px 30px -18px rgba(236, 72, 153, .45);
  --gradient: linear-gradient(135deg, #f472b6, #ec4899 55%, #a78bfa);
  --heading-weight: 800;
  --heading-tracking: -0.01em;
  color-scheme: light;
}
body.theme-blossom .brand-mark { border-radius: 50%; }
body.theme-blossom .brand-mark span { display: none; }
body.theme-blossom .brand-mark::before { content: '♡'; font-size: 1.2rem; }
body.theme-blossom .hero h1::after { content: ' ✿'; color: #f9a8d4; }
body.theme-blossom .card { border-width: 2px; }
body.theme-blossom .btn { border-width: 2px; }
body.theme-blossom .sms-phone { border-radius: 40px; border: 3px solid #f9a8d4; }
body.theme-blossom .sms-bubble { border-radius: 22px 22px 22px 6px; background: #fff0f7; }
body.theme-blossom .trust-row span::before { content: '♡ '; color: var(--accent); }
body.theme-blossom .hero { position: relative; }
body.theme-blossom .hero::before, body.theme-blossom .hero::after { content: '✦'; position: absolute; color: #f9a8d4; font-size: 1.6rem; animation: twinkle 3s ease-in-out infinite; }
body.theme-blossom .hero::before { top: 26px; left: 3%; }
body.theme-blossom .hero::after { top: 150px; right: 10%; animation-delay: 1.2s; color: #c4b5fd; }
@keyframes twinkle { 50% { transform: scale(1.35) rotate(20deg); opacity: .5; } }

/* ---------- Telegram ---------- */
body.theme-telegram {
  --bg: #dfe9f2;
  --bg-fx: radial-gradient(circle at 20px 20px, rgba(42, 171, 238, .08) 2px, transparent 2.5px) 0 0 / 40px 40px,
           linear-gradient(160deg, #cfe6f5, #e6eef3 45%, #d6e8d1);
  --surface: #ffffff;
  --surface-2: #f1f6fa;
  --border: #d9e4ec;
  --border-strong: #c3d4e0;
  --text: #2b3a45;
  --muted: #7b8a96;
  --heading: #1c2a33;
  --accent: #2aabee;
  --accent-2: #229ed9;
  --success: #4fae4e;
  --danger: #e53935;
  --warning: #f5a623;
  --radius: 14px;
  --radius-sm: 10px;
  --font-body: 'Roboto', system-ui, sans-serif;
  --font-display: 'Roboto', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --shadow: 0 1px 2px rgba(16, 35, 47, .12), 0 8px 24px -16px rgba(16, 35, 47, .25);
  --gradient: linear-gradient(135deg, #2aabee, #229ed9);
  --heading-weight: 700;
  --heading-tracking: -0.01em;
  color-scheme: light;
}
body.theme-telegram .nav { background: #2aabee; border-bottom: 0; }
body.theme-telegram .brand, body.theme-telegram .nav-link { color: #fff; }
body.theme-telegram .nav-link:hover, body.theme-telegram .nav-link.active { background: rgba(255, 255, 255, .16); color: #fff; }
body.theme-telegram .nav .btn-primary { background: #fff; color: #2aabee; box-shadow: none; }
body.theme-telegram .nav .btn { border-color: rgba(255, 255, 255, .6); color: #fff; background: transparent; }
body.theme-telegram .nav .pill { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; }
body.theme-telegram .nav .gradient-text { color: #fff; background: none; }
body.theme-telegram .brand-mark { background: #fff; color: #2aabee; border-radius: 50%; }
body.theme-telegram .btn-primary { border-radius: 10px; }
body.theme-telegram .announce { background: #4fae4e; color: #fff; }
.chat-mock { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); max-width: 380px; margin-inline-start: auto; }
.chat-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--border); }
.chat-head b { display: block; color: var(--heading); }
.chat-head small { color: var(--muted); }
.chat-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #6ec6ff, #2aabee); color: #fff; display: grid; place-items: center; font-weight: 700; }
.chat-body { padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; background: radial-gradient(circle at 12px 12px, rgba(79, 174, 78, .10) 2px, transparent 2.5px) 0 0 / 24px 24px, #cfe3cf; min-height: 220px; }
.bubble { max-width: 82%; padding: 8px 12px 18px; border-radius: 14px; position: relative; font-size: .92rem; color: #1c2a33; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.bubble.in { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.out { background: #effdde; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble .time { position: absolute; right: 10px; bottom: 3px; font-size: .68rem; color: #6fa06b; }
.bubble.in .time { color: #97a4ad; }
body.theme-telegram .order-card { border-radius: 14px 14px 14px 4px; }

/* ---------- Anonymous ---------- */
body.theme-anonymous {
  --bg: #050505;
  --bg-fx: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
           radial-gradient(900px 500px at 50% -200px, rgba(255, 255, 255, .06), transparent 70%);
  --surface: #0d0d0d;
  --surface-2: #151515;
  --border: #242424;
  --border-strong: #3a3a3a;
  --text: #bdbdbd;
  --muted: #7a7a7a;
  --heading: #f5f5f5;
  --accent: #f5f5f5;
  --accent-2: #ff2e4d;
  --on-accent: #050505;
  --success: #e5e5e5;
  --danger: #ff2e4d;
  --warning: #ffb020;
  --radius: 4px;
  --radius-sm: 3px;
  --btn-radius: 3px;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'IBM Plex Mono', ui-monospace, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --shadow: 0 0 0 1px var(--border);
  --gradient: linear-gradient(90deg, #f5f5f5, #f5f5f5);
  --heading-weight: 700;
  --heading-tracking: -0.03em;
}
body.theme-anonymous .gradient-text { color: var(--heading); background: none; }
body.theme-anonymous .brand-mark { background: #f5f5f5; color: #050505; border-radius: 3px; }
body.theme-anonymous .brand-mark span { display: none; }
body.theme-anonymous .brand-mark::before { content: '◐'; font-size: 1.1rem; }
body.theme-anonymous .hero h1 { text-transform: uppercase; position: relative; text-shadow: 2px 0 rgba(255, 46, 77, .55), -2px 0 rgba(80, 200, 255, .35); }
body.theme-anonymous .hero-kicker::before { content: '● '; color: var(--danger); animation: blink 1.4s steps(1) infinite; }
body.theme-anonymous .btn-primary { text-transform: uppercase; letter-spacing: .08em; box-shadow: 4px 4px 0 var(--danger); }
body.theme-anonymous .announce { background: var(--danger); color: #fff; }
body.theme-anonymous .trust-row span::before { content: '[x] '; color: var(--heading); }
.anon-card { background: #0d0d0d; border: 1px solid #2e2e2e; padding: 22px; max-width: 380px; margin-inline-start: auto; font-family: var(--font-mono); position: relative; }
.anon-card::after { content: 'CLASSIFIED'; position: absolute; top: 96px; right: 14px; background: rgba(5, 5, 5, .85); transform: rotate(12deg); border: 2px solid var(--danger); color: var(--danger); padding: 2px 8px; font-size: .7rem; letter-spacing: .2em; }
.anon-top { display: flex; justify-content: space-between; font-size: .72rem; color: #7a7a7a; margin-bottom: 18px; }
.anon-line { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: .72rem; color: #7a7a7a; }
.anon-line span { width: 54px; }
.anon-line i { display: block; height: 14px; background: #f5f5f5; }
.anon-code { margin-top: 20px; border-top: 1px dashed #333; padding-top: 14px; }
.anon-code small { display: block; color: #7a7a7a; font-size: .72rem; margin-bottom: 4px; }
.anon-code b { font-size: 1.8rem; letter-spacing: .2em; color: #f5f5f5; }

/* ---------- Rich (black & gold) ---------- */
body.theme-rich {
  --bg: #0b0906;
  --bg-fx: radial-gradient(900px 480px at 50% -180px, rgba(212, 175, 55, .16), transparent 70%),
           radial-gradient(600px 400px at 100% 100%, rgba(212, 175, 55, .06), transparent 70%);
  --surface: rgba(212, 175, 55, .035);
  --surface-2: rgba(212, 175, 55, .07);
  --border: rgba(212, 175, 55, .22);
  --border-strong: rgba(212, 175, 55, .42);
  --text: #d9d0bd;
  --muted: #9c917c;
  --heading: #f7efd8;
  --accent: #d4af37;
  --accent-2: #f5e6a8;
  --on-accent: #1a1405;
  --success: #b9d98a;
  --danger: #e8836f;
  --warning: #f0c35a;
  --radius: 6px;
  --radius-sm: 4px;
  --btn-radius: 2px;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
  --gradient: linear-gradient(135deg, #b8912a, #f5e6a8 45%, #d4af37 60%, #9c7a1f);
  --heading-weight: 600;
  --heading-tracking: -0.01em;
}
body.theme-rich .btn { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; }
body.theme-rich .btn-primary { color: #1a1405; box-shadow: 0 10px 30px -12px rgba(212, 175, 55, .6); }
body.theme-rich .badge, body.theme-rich .hero-kicker { font-family: 'Cormorant Garamond', Georgia, serif; font-size: .9rem; letter-spacing: .25em; text-transform: uppercase; border-radius: 0; background: transparent; }
body.theme-rich .hero h1 { font-style: italic; }
body.theme-rich .brand { font-family: var(--font-display); letter-spacing: .04em; }
body.theme-rich .brand-mark { border-radius: 50%; color: #1a1405; }
body.theme-rich .card { backdrop-filter: blur(6px); }
body.theme-rich .sms-phone { border-radius: 36px; border-color: rgba(212, 175, 55, .5); background: linear-gradient(160deg, rgba(212, 175, 55, .08), rgba(0, 0, 0, .4)); }
body.theme-rich .sms-code { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.theme-rich .section h2::after { content: ''; display: block; width: 60px; height: 1px; margin: 14px auto 0; background: var(--gradient); }
body.theme-rich .row.between h2::after { margin-inline-start: 0; }
body.theme-rich .announce { color: #1a1405; }

@media (max-width: 900px) {
  .hero-art img, .chat-mock, .anon-card { margin: 0 auto; }
}

/* ---------- Payment methods ---------- */
.methods { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 10px; }
.method { position: relative; cursor: pointer; }
.method input { position: absolute; opacity: 0; }
.method-body { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); transition: border-color .12s, box-shadow .12s; }
.method-logo { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--heading) 10%, transparent); }
.method-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.method-body b { color: var(--heading); font-size: .95rem; }
.method-body small { color: var(--muted); font-size: .76rem; }
.method input:checked + .method-body { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.method input:focus-visible + .method-body { outline: 2px solid var(--accent); }
.bonus-card { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---------- Live stats & floating chat ---------- */
.live-stat { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.float-chat { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; background: var(--gradient); color: var(--on-accent); font-weight: 700; box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--accent) 70%, transparent); text-decoration: none; }
.float-chat:hover { text-decoration: none; filter: brightness(1.06); transform: translateY(-1px); }
@media (max-width: 560px) { .float-chat span { display: none; } .float-chat { padding: 14px; } }

/* ---------- Business (professional, unDraw illustrations) ---------- */
body.theme-business {
  --bg: #f8fafc;
  --bg-fx: linear-gradient(180deg, #eef2f9 0, #f8fafc 520px);
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #334155;
  --muted: #64748b;
  --heading: #0f172a;
  --accent: #1d4ed8;
  --accent-2: #1e40af;
  --success: #047857;
  --danger: #b91c1c;
  --warning: #b45309;
  --radius: 10px;
  --radius-sm: 8px;
  --btn-radius: 8px;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px -8px rgba(15, 23, 42, .12);
  --gradient: linear-gradient(135deg, #1d4ed8, #1e40af);
  --heading-weight: 700;
  --heading-tracking: -0.02em;
  color-scheme: light;
}
body.theme-business .nav { background: #ffffff; border-bottom: 1px solid var(--border); }
body.theme-business .brand-mark { border-radius: 8px; background: #0f172a; }
body.theme-business .announce { background: #0f172a; color: #e2e8f0; font-weight: 500; }
body.theme-business .hero-kicker { background: #e0e7ff; color: #1e3a8a; border-color: transparent; border-radius: 6px; }
body.theme-business .btn-primary { box-shadow: 0 1px 2px rgba(29, 78, 216, .3); }
body.theme-business .btn { font-weight: 600; }
body.theme-business .hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
body.theme-business .section h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
body.theme-business .section > .container > h2.center::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--accent); margin: 0 auto 14px; }
body.theme-business .feature-icon { background: #e0e7ff; border-color: transparent; }
body.theme-business .step::before { font-size: .85rem; letter-spacing: .12em; color: var(--accent); background: none; }
body.theme-business .trust-row span::before { content: '✔ '; color: var(--accent); }
body.theme-business .hero-art img { filter: none; }
body.theme-business .footer { background: #0f172a; color: #94a3b8; border-top: 0; }
body.theme-business .footer a { color: #cbd5e1; }
body.theme-business .footer .powered { border-color: #334155; }
body.theme-business .lang-select { background-color: #1e293b; color: #e2e8f0; border-color: #334155; }

/* ---------- Rich text (reseller content) ---------- */
.rich-text { line-height: 1.7; overflow-wrap: anywhere; }
.rich-text > :first-child { margin-top: 0; }
.rich-text h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 1.2em 0 .5em; }
.rich-text h3 { font-size: 1.15rem; margin: 1em 0 .4em; }
.rich-text p { margin: 0 0 .9em; }
.rich-text ul, .rich-text ol { padding-inline-start: 1.4em; margin: 0 0 1em; }
.rich-text li { margin: .25em 0; }
.rich-text blockquote { margin: 1em 0; padding: .6em 1em; border-inline-start: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text); }
.rich-text a, .rich-inline a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.rich-text code, .rich-inline code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: .1em .35em; border-radius: 4px; }
.rich-text pre { background: var(--surface-2); padding: 12px; border-radius: var(--radius-sm); overflow-x: auto; }
.rich-text hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; }
.announce a { color: inherit; }
.faq-a { margin-top: 10px; color: var(--muted); }
.rt-gradient { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.rt-highlight { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--heading); padding: 0 .2em; border-radius: 3px; }
.rt-accent { color: var(--accent); }
.rt-muted { color: var(--muted); }
.rt-large { font-size: 1.25em; }
.rt-small { font-size: .85em; }
.rt-center { text-align: center; display: block; }
.announce .rt-gradient { background: none; color: inherit; text-decoration: underline; }
/* Rich theme: gold foil text, engraved quotes */
body.theme-rich .rt-gradient { background: linear-gradient(135deg, #b8912a, #f5e6a8 40%, #d4af37 60%, #fff4c7 75%, #9c7a1f); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font-display); font-style: italic; letter-spacing: .01em; }
body.theme-rich .rich-text h2, body.theme-rich .rich-text h3 { font-style: italic; }
body.theme-rich .rich-text blockquote { border-inline-start-color: #d4af37; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15em; background: rgba(212, 175, 55, .06); }
body.theme-rich .rt-highlight { background: rgba(212, 175, 55, .22); color: #f7efd8; }
body.theme-terminal .rt-gradient { color: var(--accent); background: none; text-shadow: 0 0 12px rgba(57, 255, 136, .45); }
body.theme-terminal .rt-highlight { background: var(--accent); color: #001a0a; }
body.theme-paper .rt-gradient, body.theme-anonymous .rt-gradient { color: var(--accent); background: none; }
body.theme-paper .rt-highlight { background: #fde68a; color: #1c1917; }
body.theme-anonymous .rt-highlight { background: #f5f5f5; color: #050505; }
body.theme-blossom .rt-highlight { background: #fbcfe8; color: #7a1e4d; border-radius: 999px; padding: 0 .45em; }

/* Operator sort (Success rate / Price / Stock), inherits each theme's colours */
.op-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-bottom: 6px; }
.op-head .label { margin-bottom: 0; }
.op-sort { display: flex; flex-wrap: wrap; gap: 2px; font-size: .78rem; }
.op-sort.hidden { display: none; }
.op-sort button { appearance: none; background: none; border: 0; border-radius: var(--radius-sm, 6px); padding: 2px 8px; font: inherit; color: var(--muted); cursor: pointer; }
.op-sort button:hover { color: var(--accent); }
.op-sort button.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); font-weight: 600; }

/* Active order card: copy button, timer row and action buttons (all themes, phone friendly). */
.phone-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.phone-line .phone { word-break: break-all; }
.copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; flex-shrink: 0; }
.copy-btn:hover { color: var(--heading); border-color: var(--border-strong); }
.copy-btn.copied { color: var(--success); border-color: var(--success); }
.order-wait { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.order-wait .badge { font-size: .95rem; }
.order-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 560px) {
  .order-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .order-actions .btn { min-height: 40px; }
}

/* Live low-delivery warning under the price (store.js lowDelivery). */
.low-delivery { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: .82rem; line-height: 1.45; color: var(--text); border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 45%, transparent); background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent); }

/* Native dropdown lists: some browsers (Chrome on Windows) paint the open list white and keep the
   theme's light text, so options were invisible. Give options solid theme colours. */
select.field option, select.field optgroup { background-color: var(--bg); color: var(--heading); }

/* ---------- Cartoon (1930s black and white: grain, flicker, iris, ink outlines) ---------- */
body.theme-cartoon {
  --bg: #ebe7dd;
  --bg-fx: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .10) 100%);
  --surface: #f7f5ef;
  --surface-2: #e2ded3;
  --border: #111111;
  --border-strong: #111111;
  --text: #1f1f1f;
  --muted: #5c5c5c;
  --heading: #111111;
  --accent: #111111;
  --accent-2: #4a4a4a;
  --on-accent: #f7f5ef;
  --success: #111111;
  --danger: #111111;
  --warning: #4a4a4a;
  --radius: 22px;
  --radius-sm: 14px;
  --btn-radius: 999px;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-display: 'Titan One', 'Nunito', system-ui, sans-serif;
  --font-mono: 'Courier Prime', ui-monospace, monospace;
  --shadow: 5px 5px 0 #111111;
  --gradient: linear-gradient(90deg, #111111, #111111);
  --heading-weight: 400;
  --heading-tracking: .01em;
  color-scheme: light;
}
/* Film grain + scratches and the iris vignette sit over the whole page; clicks pass through. */
body.theme-cartoon::before,
body.theme-cartoon::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
body.theme-cartoon::before {
  inset: -60px;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(0, 0, 0, .16) 18% calc(18% + 1px), transparent 0 71%, rgba(0, 0, 0, .10) 71% calc(71% + 1px), transparent 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .22;
  animation: toon-grain .5s steps(4) infinite;
}
body.theme-cartoon::after {
  background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 62%, rgba(0, 0, 0, .28) 88%, rgba(0, 0, 0, .55) 100%);
  animation: toon-flicker 3.2s steps(1) infinite;
}
@keyframes toon-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-22px, 14px); }
  50% { transform: translate(16px, -26px); }
  75% { transform: translate(-10px, -8px); }
  100% { transform: translate(24px, 20px); }
}
@keyframes toon-flicker {
  0%, 100% { opacity: 1; }
  37% { opacity: .82; }
  38% { opacity: 1; }
  71% { opacity: .9; }
  72% { opacity: 1; }
}
@keyframes toon-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  40% { transform: translateY(-4px) scale(.97, 1.04); }
  70% { transform: translateY(1px) scale(1.04, .96); }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-cartoon::before, body.theme-cartoon::after { animation: none; }
}
body.theme-cartoon .gradient-text { color: var(--heading); background: none; }
body.theme-cartoon .nav { background: var(--bg); border-bottom: 3px solid #111; }
body.theme-cartoon .brand-mark { background: #111; color: #f7f5ef; border-radius: 50%; border: 3px solid #111; box-shadow: inset 0 0 0 2px #f7f5ef; }
body.theme-cartoon .announce { background: #111; color: #f7f5ef; font-family: var(--font-mono); letter-spacing: .04em; }
body.theme-cartoon .btn { border: 3px solid #111; font-weight: 800; box-shadow: 3px 3px 0 #111; transition: transform .12s, box-shadow .12s; }
body.theme-cartoon .btn:hover { transform: translate(-1px, -2px); box-shadow: 4px 5px 0 #111; }
body.theme-cartoon .btn:active { transform: translate(2px, 2px) scale(1.02, .96); box-shadow: 1px 1px 0 #111; }
body.theme-cartoon .btn-primary { background: #111; color: #f7f5ef; box-shadow: 3px 3px 0 #6b6b6b; }
body.theme-cartoon .btn-primary:hover { box-shadow: 4px 5px 0 #6b6b6b; }
body.theme-cartoon .field { border: 2.5px solid #111; background: #fbfaf6; color: #111; }
body.theme-cartoon .field:focus { outline: 0; box-shadow: 3px 3px 0 #111; }
body.theme-cartoon .card { border: 3px solid #111; background: var(--surface); }
body.theme-cartoon .badge { border: 2px solid #111; background: #f7f5ef; color: #111; }
body.theme-cartoon .pill { border: 2px solid #111; }
body.theme-cartoon .footer { border-top: 3px solid #111; }
body.theme-cartoon .lang-select { border: 2px solid #111; }
body.theme-cartoon .copy-btn { border: 2px solid #111; color: #111; }
body.theme-cartoon h1, body.theme-cartoon h2, body.theme-cartoon h3 { text-shadow: 2px 2px 0 rgba(0, 0, 0, .14); }
body.theme-cartoon .rt-gradient { color: #111; background: none; text-decoration: underline wavy; text-underline-offset: 4px; }
body.theme-cartoon .rt-highlight { background: #111; color: #f7f5ef; }
body.theme-cartoon .low-delivery { border: 2px dashed #111; background: #f7f5ef; }
/* Full mono: emoji and anything a reseller pastes in (logos, custom HTML) turn grey too.
   Not on <body>: a filter there would pin the fixed grain/vignette and the chat button to the page instead of the screen. */
body.theme-cartoon > header, body.theme-cartoon > main, body.theme-cartoon > footer, body.theme-cartoon .announce, body.theme-cartoon .float-chat { filter: grayscale(1); }

/* ---------- Exchange (dark trading desk) ---------- */
body.theme-exchange {
  --bg: #0b0f14;
  --bg-fx: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 100% 48px,
           radial-gradient(900px 420px at 80% -160px, rgba(22, 199, 132, .10), transparent 70%);
  --surface: #11171f;
  --surface-2: #18202b;
  --border: #1f2a37;
  --border-strong: #2c3a4b;
  --text: #b7c2d0;
  --muted: #6f7d8f;
  --heading: #eef3f8;
  --accent: #16c784;
  --accent-2: #3ea6ff;
  --on-accent: #04140c;
  --success: #16c784;
  --danger: #ea3943;
  --warning: #f5a524;
  --radius: 8px;
  --radius-sm: 6px;
  --btn-radius: 6px;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --shadow: 0 0 0 1px var(--border);
  --gradient: linear-gradient(90deg, #16c784, #3ea6ff);
  --heading-weight: 700;
  --heading-tracking: -0.03em;
  font-size: 14.5px;
}
body.theme-exchange .nav { background: #0b0f14; }
body.theme-exchange .brand-mark { border-radius: 6px; }
body.theme-exchange .announce { background: #16c784; color: #04140c; font-weight: 600; }
body.theme-exchange .btn { font-weight: 700; }
body.theme-exchange .pill { font-family: var(--font-mono); }
body.theme-exchange .rt-gradient { background: none; color: var(--accent); }

/* ---------- Mini App (mobile first, grouped lists, big buttons) ---------- */
body.theme-miniapp {
  --bg: #f1f2f6;
  --bg-fx: none;
  --surface: #ffffff;
  --surface-2: #f1f2f6;
  --border: #e4e6ec;
  --border-strong: #d0d4dc;
  --text: #3b3f4a;
  --muted: #8a8f9c;
  --heading: #111318;
  --accent: #2f80ed;
  --accent-2: #5ac8fa;
  --on-accent: #ffffff;
  --success: #31b545;
  --danger: #ff3b30;
  --warning: #ff9500;
  --radius: 16px;
  --radius-sm: 12px;
  --btn-radius: 12px;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(17, 19, 24, .05);
  --gradient: linear-gradient(135deg, #2f80ed, #2f80ed);
  --heading-weight: 800;
  --heading-tracking: -0.03em;
  color-scheme: light;
}
body.theme-miniapp .nav { background: rgba(241, 242, 246, .9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
body.theme-miniapp .brand-mark { border-radius: 50%; }
body.theme-miniapp .announce { background: #2f80ed; color: #fff; }
body.theme-miniapp .btn { font-weight: 700; }
body.theme-miniapp .card { border: 0; box-shadow: var(--shadow); }
body.theme-miniapp .field { background: #fff; border-color: transparent; box-shadow: inset 0 0 0 1px var(--border); }
body.theme-miniapp .gradient-text { background: none; color: var(--accent); }
@media (max-width: 767.98px) {
  body.theme-miniapp .btn { min-height: 48px; }
  body.theme-miniapp .field { min-height: 48px; font-size: 16px; }
  body.theme-miniapp main { padding-bottom: 76px; }
  body.theme-miniapp .float-chat { bottom: 86px; }
}

/* ---------- Glass (frosted cards over soft colour light) ---------- */
body.theme-glass {
  --bg: #0a0820;
  --bg-fx: radial-gradient(720px 520px at 12% 8%, rgba(167, 139, 250, .42), transparent 70%),
           radial-gradient(640px 520px at 92% 18%, rgba(244, 114, 182, .32), transparent 70%),
           radial-gradient(760px 560px at 60% 100%, rgba(34, 211, 238, .26), transparent 70%);
  --surface: rgba(255, 255, 255, .07);
  --surface-2: rgba(255, 255, 255, .11);
  --border: rgba(255, 255, 255, .14);
  --border-strong: rgba(255, 255, 255, .26);
  --text: #dcdcf0;
  --muted: #a3a3c2;
  --heading: #ffffff;
  --accent: #a78bfa;
  --accent-2: #f472b6;
  --on-accent: #ffffff;
  --success: #6ee7b7;
  --danger: #fda4af;
  --warning: #fcd34d;
  --radius: 24px;
  --radius-sm: 16px;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-display: 'Outfit', system-ui, sans-serif;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 60px -30px rgba(0, 0, 0, .7);
  --gradient: linear-gradient(120deg, #a78bfa, #f472b6 55%, #22d3ee);
  --heading-weight: 600;
  --heading-tracking: -0.035em;
}
body.theme-glass .nav { background: rgba(10, 8, 32, .35); backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--border); }
body.theme-glass .card, body.theme-glass .pill, body.theme-glass .field { backdrop-filter: blur(18px) saturate(150%); }
body.theme-glass .btn:not(.btn-primary) { background: rgba(255, 255, 255, .08); backdrop-filter: blur(14px); }
body.theme-glass .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 30px -10px rgba(244, 114, 182, .6); }
body.theme-glass .announce { background: rgba(255, 255, 255, .1); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
body.theme-glass .brand-mark { border-radius: 12px; }

/* ---------- Developer (code editor at night) ---------- */
body.theme-developer {
  --bg: #0a0e17;
  --bg-fx: radial-gradient(rgba(122, 162, 247, .07) 1px, transparent 1.5px) 0 0 / 22px 22px;
  --surface: #0f1522;
  --surface-2: #151d2e;
  --border: #1e2738;
  --border-strong: #2b3750;
  --text: #b4bfd3;
  --muted: #6c7891;
  --heading: #e8edf7;
  --accent: #7aa2f7;
  --accent-2: #9ece6a;
  --on-accent: #0a0e17;
  --success: #9ece6a;
  --danger: #f7768e;
  --warning: #e0af68;
  --radius: 10px;
  --radius-sm: 6px;
  --btn-radius: 8px;
  --font-body: 'Geist', 'Inter', system-ui, sans-serif;
  --font-display: 'Geist', 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --shadow: 0 0 0 1px var(--border), 0 20px 40px -30px rgba(0, 0, 0, .9);
  --gradient: linear-gradient(90deg, #7aa2f7, #bb9af7);
  --heading-weight: 650;
  --heading-tracking: -0.035em;
}
body.theme-developer .nav { background: rgba(10, 14, 23, .9); backdrop-filter: blur(10px); }
body.theme-developer .brand-mark { border-radius: 6px; font-family: var(--font-mono); }
body.theme-developer .brand-mark span { display: none; }
body.theme-developer .brand-mark::before { content: '</>'; font: 700 .72rem var(--font-mono); }
body.theme-developer .announce { background: #151d2e; color: #9ece6a; font-family: var(--font-mono); font-size: .82rem; border-bottom: 1px solid var(--border); }
body.theme-developer .btn { font-family: var(--font-mono); font-weight: 600; font-size: .88rem; }
body.theme-developer .badge, body.theme-developer .pill { font-family: var(--font-mono); }
body.theme-developer .rt-gradient { background: none; color: #bb9af7; }
body.theme-developer .rt-highlight { background: rgba(122, 162, 247, .2); color: #c0caf5; }