/* ═══════════════════════════════════════════════
   Global Money — Standalone Help & Legal Pages
   Shared stylesheet for: about, contact, faq, privacy, terms
   ═══════════════════════════════════════════════ */

:root{
  --accent:#1d6aff; --accent-dark:#1352cc; --accent-light:#e8f0ff;
  --bg:#f0f4ff; --surface:#ffffff; --border:#dce6ff; --text:#0f1c3f;
  --text2:#4a5980; --muted:#8a97b8; --up:#22c55e; --down:#ef4444;
  --radius:16px; --radius-sm:10px;
  --shadow:0 4px 24px rgba(29,106,255,.10);
}
[data-theme="dark"]{
  --bg:#060d22; --surface:#111c3a; --border:#1e2d58; --text:#e2eaff;
  --text2:#7a8fba; --muted:#4a5c80; --accent:#4d90ff; --accent-light:#0f1f4a;
  --shadow:0 4px 24px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter','Segoe UI',Tahoma,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
body[dir="rtl"]{font-family:'Inter','Segoe UI',Tahoma,Arial,sans-serif}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ── Top bar ─────────────────────────────────── */
.sp-topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 20px;
  background:var(--surface); border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.sp-brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; color:var(--text)}
.sp-brand img{width:32px; height:32px; border-radius:9px}
.sp-topbar-actions{display:flex; align-items:center; gap:8px}
.sp-back-link, .sp-icon-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px; font-size:.85rem; font-weight:600;
  background:var(--accent-light); color:var(--accent); border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
}
.sp-back-link:hover, .sp-icon-btn:hover{text-decoration:none; filter:brightness(0.97)}
.sp-lang-group{display:flex; gap:4px; background:var(--bg); border-radius:999px; padding:3px; border:1px solid var(--border)}
.sp-lang-btn{
  border:none; background:transparent; color:var(--text2); font-size:.78rem; font-weight:700;
  padding:6px 10px; border-radius:999px; cursor:pointer;
}
.sp-lang-btn.active{background:var(--accent); color:#fff}
.sp-theme-btn{border:none; background:var(--bg); color:var(--text2); width:36px; height:36px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; border:1px solid var(--border)}

/* ── Hero ────────────────────────────────────── */
.sp-hero{
  max-width:880px; margin:0 auto; padding:40px 20px 8px; text-align:center;
}
.sp-hero-icon{font-size:2.4rem; margin-bottom:10px}
.sp-hero h1{font-size:1.9rem; font-weight:800; margin:0 0 8px}
.sp-hero p{color:var(--text2); font-size:1rem; max-width:620px; margin:0 auto}
.sp-updated{display:inline-block; margin-top:14px; font-size:.78rem; color:var(--muted); background:var(--accent-light); padding:5px 12px; border-radius:999px}

/* ── Layout ──────────────────────────────────── */
.sp-wrap{max-width:880px; margin:0 auto; padding:28px 20px 80px}
.sp-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 24px; margin-bottom:16px; box-shadow:var(--shadow);
}
.sp-card h2, .sp-card h3{margin-top:0; font-size:1.08rem; font-weight:750; color:var(--text)}
.sp-card p{color:var(--text2); margin:0 0 8px; font-size:.95rem}
.sp-card p:last-child{margin-bottom:0}
.sp-card ul{margin:8px 0 0; padding-inline-start:20px; color:var(--text2); font-size:.95rem}
.sp-card li{margin-bottom:6px}

/* Table of contents */
.sp-toc{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.sp-toc a{
  font-size:.8rem; font-weight:600; padding:6px 12px; border-radius:999px;
  background:var(--accent-light); color:var(--accent); border:1px solid transparent;
}
.sp-toc a:hover{text-decoration:none; filter:brightness(0.96)}

/* ── FAQ accordion ───────────────────────────── */
.sp-faq-cat{font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin:26px 4px 10px}
.sp-faq-cat:first-of-type{margin-top:4px}
.sp-faq-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; overflow:hidden}
.sp-faq-q{
  width:100%; text-align:start; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; font-size:.94rem; font-weight:650; color:var(--text); font-family:inherit;
}
.sp-faq-q .arrow{transition:transform .2s; flex-shrink:0; color:var(--muted)}
.sp-faq-item.open .sp-faq-q .arrow{transform:rotate(180deg)}
.sp-faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease}
.sp-faq-a p{padding:0 16px 14px; margin:0; color:var(--text2); font-size:.9rem}

/* ── Stats / features (about page) ──────────── */
.sp-stats{display:flex; justify-content:center; gap:28px; margin:18px 0 0; flex-wrap:wrap}
.sp-stat{text-align:center}
.sp-stat b{display:block; font-size:1.4rem; color:var(--accent)}
.sp-stat span{font-size:.78rem; color:var(--muted)}
.sp-features{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-top:14px}
.sp-feature{display:flex; gap:10px; align-items:flex-start; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px}
.sp-feature .ic{font-size:1.3rem; flex-shrink:0}
.sp-feature strong{display:block; font-size:.88rem; color:var(--text)}
.sp-feature span{font-size:.8rem; color:var(--text2)}

/* ── Contact ─────────────────────────────────── */
.sp-contact-direct{display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--accent-light); border-radius:var(--radius-sm); margin-bottom:16px; font-weight:600; color:var(--accent)}
.sp-form-group{margin-bottom:14px}
.sp-form-group label{display:block; font-size:.85rem; font-weight:650; margin-bottom:6px; color:var(--text)}
.sp-form-group input, .sp-form-group textarea{
  width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.92rem; font-family:inherit; outline:none;
}
.sp-form-group input:focus, .sp-form-group textarea:focus{border-color:var(--accent)}
.sp-field-error{color:var(--down); font-size:.78rem; margin-top:4px; min-height:1em}
.sp-submit-btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center; width:100%;
  background:var(--accent); color:#fff; border:none; padding:13px 18px;
  border-radius:12px; font-weight:700; font-size:.95rem; cursor:pointer; font-family:inherit;
}
.sp-submit-btn:hover{background:var(--accent-dark)}
.sp-status{margin-top:12px; padding:10px 14px; border-radius:10px; font-size:.85rem; display:none}
.sp-status.success{display:block; background:rgba(34,197,94,.12); color:var(--up)}
.sp-status.error{display:block; background:rgba(239,68,68,.12); color:var(--down)}
.sp-notice{display:flex; gap:8px; align-items:flex-start; font-size:.8rem; color:var(--muted); background:var(--bg); border-radius:10px; padding:10px 12px; margin-bottom:16px}

/* ── Footer ──────────────────────────────────── */
.sp-footer{
  max-width:880px; margin:0 auto; padding:24px 20px 50px; text-align:center;
  color:var(--muted); font-size:.8rem; border-top:1px solid var(--border);
}
.sp-footer-links{display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:12px}
.sp-footer-links a{color:var(--text2); font-size:.83rem; font-weight:600}

[dir="rtl"] .sp-faq-q{text-align:right}
[dir="rtl"] .sp-toc{direction:rtl}

@media (max-width:560px){
  .sp-hero h1{font-size:1.5rem}
  .sp-topbar{padding:10px 14px}
  .sp-wrap{padding:20px 14px 60px}
  .sp-card{padding:18px}
  .sp-stats{gap:18px}
}