/* ============================================================
   MariSMM — Mono Glass theme fixes (loaded after each page's own
   <style>, linked from partials/app-shell.ejs)
   - invisible text on Home / New Order (light + dark)
   - dark-mode contrast for cards, buttons, eyebrows, stats, FAQ
   - removes leftover navy/blue chrome
   ============================================================ */

/* soft ambient light so the glass surfaces actually read as glass */
body.has-app-shell {
  background-color: var(--main-bg, #F6F6F7);
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 0%, rgba(120,120,140,.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 92% 8%, rgba(160,160,180,.12) 0%, transparent 60%);
  background-attachment: fixed;
}
:root[data-theme="dark"] body.has-app-shell {
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 0%, rgba(255,255,255,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 92% 8%, rgba(160,160,190,.08) 0%, transparent 60%);
}

/* ── HOME ─────────────────────────────────────────────────── */
/* "MariSMM" word in the hero was a blank grey box: the later `background`
   shorthand (!important) reset background-clip:text */
.hm-title em {
  background: linear-gradient(90deg, #b5b5b5 0%, #ffffff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.hm-eyebrow { color: var(--tc, #111) !important; }
.hm-eyebrow::before { background: var(--tc, #111) !important; }

/* navy banner card: text was #333 on navy */
.hm-why-card {
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.10) 0%, transparent 55%),
    linear-gradient(135deg, #0a0a0a 0%, #151515 60%, #202020 100%) !important;
  border: 1px solid rgba(255,255,255,.10);
}
.hm-why-kicker { color: #D4D4D8 !important; }

/* icon chips / arrows used hard-coded #111 */
.hm-stat-ic, .hm-svc-ic.more, .hm-svc-arrow {
  background: var(--soft, rgba(17,17,17,.06)) !important;
  color: var(--tc, #111) !important;
}
.hm-step-ic { color: var(--tc, #111) !important; }
.hm-step-num { background: var(--tc, #111) !important; color: var(--main-bg, #fff) !important; }
.hm-svc-card:hover .hm-svc-arrow { background: var(--tc, #111) !important; color: var(--main-bg, #fff) !important; }

.hm-footer-col h4,
.hm-footer-bottom { color: var(--ts, #52525B) !important; }

/* dark mode: white glass over a dark page = grey slab with grey text */
:root[data-theme="dark"] .hm-stats-bar,
:root[data-theme="dark"] .hm-faq,
:root[data-theme="dark"] .hm-trust-pill,
:root[data-theme="dark"] .hm-footer-social a {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .hm-pay-card {
  background: #FFFFFF !important;           /* payment logos are made for white */
  border: 1px solid rgba(255,255,255,.14) !important;
}
:root[data-theme="dark"] .hm-faq-item { border-top-color: rgba(255,255,255,.10) !important; }
:root[data-theme="dark"] .hm-footer-social a:hover { background: #FAFAFA !important; color: #0A0A0A !important; border-color: #FAFAFA !important; }
:root[data-theme="dark"] .hm-svc-ic.tt { border: 1px solid rgba(255,255,255,.22); }
:root[data-theme="dark"] .hm-svc-card:hover { border-color: rgba(255,255,255,.30); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
:root[data-theme="dark"] .hm-steps-card { box-shadow: 0 8px 24px rgba(0,0,0,.40); }

/* ── NEW ORDER ───────────────────────────────────────────── */
/* navy hero card -> mono ink so it matches Home */
.ord-hero {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.10) 0%, transparent 55%),
    linear-gradient(135deg, #0a0a0a 0%, #161616 60%, #232323 100%) !important;
  border: 1px solid rgba(255,255,255,.10);
}
.ord-hero-left h1 i { color: #E4E4E7 !important; }
.ord-hero-left p { color: #C4C4CC !important; }
.ord-hero-bal { background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.22) !important; }
.ord-hero-bal .lbl { color: #D4D4D8 !important; }

/* ── DARK MODE: filled buttons / badges whose fill turns light ──
   (--grad / --accent become near-white in dark, but text stayed #fff) */
:root[data-theme="dark"] .btn-submit,
:root[data-theme="dark"] .btn-orders,
:root[data-theme="dark"] .btn-new,
:root[data-theme="dark"] .pg.on,
:root[data-theme="dark"] .charge-display,
:root[data-theme="dark"] .dev-avatar,
:root[data-theme="dark"] .doc h2 .n,
:root[data-theme="dark"] .btn-primary {
  color: #0A0A0A !important;
}
:root[data-theme="dark"] .btn-submit *,
:root[data-theme="dark"] .btn-orders *,
:root[data-theme="dark"] .btn-new * { color: inherit !important; }
:root[data-theme="dark"] .btn-submit { border-color: rgba(255,255,255,.35) !important; }

:root[data-theme="dark"] .success-header,
:root[data-theme="dark"] .success-header h2,
:root[data-theme="dark"] .success-header p,
:root[data-theme="dark"] .order-id-badge { color: #0A0A0A !important; }
:root[data-theme="dark"] .success-header .check-icon { background: rgba(0,0,0,.10) !important; border-color: rgba(0,0,0,.25) !important; color: #0A0A0A !important; }
:root[data-theme="dark"] .order-id-badge { background: rgba(0,0,0,.10) !important; border-color: rgba(0,0,0,.25) !important; }

/* ── Header hamburger: warrior.css hard-codes white; follow the glass theme ── */
#appHeader .as-burger {
  color: var(--sh-text);
  background: var(--sh-chip);
  border-color: var(--sh-border);
}
#appHeader .as-burger:hover,
#appHeader .as-burger:active {
  color: var(--sh-text);
  background: var(--sh-chip-hover);
  border-color: var(--sh-border-strong);
  box-shadow: 0 4px 14px var(--sh-shadow);
}
#appHeader .as-burger.is-open {
  color: var(--sh-text);
  background: var(--sh-chip-hover);
  border-color: var(--sh-border-strong);
}