/* =========================================================
   Payment Success — Corporate 50/50 (Navy × Gold)
   Scope: body[data-page="payment-success"]
========================================================= */

:root{
  --radius:12px;
  --radius-lg:16px;
  --shadow: 0 14px 40px rgba(0,0,0,.25);
}

html,body{
  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
  font-family:"Tajawal",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* 50/50 gold haze */
body[data-page="payment-success"]::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: -1;
  background:
    radial-gradient(1200px 720px at 18% 18%, rgba(212,175,55,.30), transparent 58%),
    radial-gradient(1100px 680px at 82% 26%, rgba(253,230,138,.22), transparent 62%),
    radial-gradient(900px 520px at 55% 86%, rgba(212,175,55,.14), transparent 66%),
    linear-gradient(180deg, #070F1C 0%, #0B1C2D 50%, #070F1C 100%);
}

/* A11y */
.skip-link{
  position:absolute;inset-inline-start:1rem;top:1rem;
  background: rgba(255,255,255,.04);
  color:var(--fg);
  padding:.5rem .75rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  z-index:1000;
  opacity:.001;
  transform:translateY(-8px);
}
.skip-link:focus{opacity:1;transform:none}

/* Header */
.sp-header{
  position:sticky;top:0;z-index:20;
  background: rgba(11,18,32,.66);
  backdrop-filter:blur(10px) saturate(120%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sp-header__wrap{
  max-width:1120px;margin-inline:auto;
  padding:1rem 1.25rem;
  display:flex;align-items:center;gap:1rem;
}
.sp-brand{
  border-radius:10px;
  box-shadow: 0 0 0 1px rgba(212,175,55,.22), 0 18px 60px rgba(212,175,55,.10);
  background: rgba(255,255,255,.02);
}
.sp-title{margin:0;font-size:1.35rem;font-weight:900}
.sp-sub{margin:0;color:var(--muted);font-size:.95rem}

.sp-breadcrumbs ol{
  list-style:none;display:flex;gap:.5rem;
  margin:0 0 0 auto;padding:0;
  color:var(--muted);font-size:.9rem;
}
.sp-breadcrumbs a{color:#FDE68A;text-decoration:none}
.sp-breadcrumbs a:hover{text-decoration:underline}

/* Main */
.sp-main{
  max-width:1120px;margin-inline:auto;
  padding:1.25rem 1.25rem 2rem;
  border-radius:24px;
}

/* Cards */
.sp-card{
  background: rgba(16,28,54,.62);
  border: 1px solid rgba(212,175,55,.28);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-block: 1rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.sp-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(900px 420px at 18% 22%, rgba(212,175,55,.16), transparent 62%),
    radial-gradient(900px 420px at 82% 70%, rgba(253,230,138,.12), transparent 64%);
  mix-blend-mode: screen;
  opacity: .9;
}
.sp-card > *{position:relative; z-index:2;}

.sp-h2{
  font-size:1.1rem;
  margin:0 0 .75rem;
  font-weight:900;
  color:#FDE68A;
}

/* Grid */
.sp-grid{display:grid;gap:.8rem}
.sp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:680px){.sp-grid--2{grid-template-columns:1fr}}

/* KV */
.sp-kv{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding:.6rem .75rem;
}
.sp-key{color:var(--muted);font-weight:800}
.sp-val{font-weight:900; color:#FDE68A}
.sp-val a{color:#FDE68A;text-decoration:none}
.sp-val a:hover{text-decoration:underline}
.sp-sep{opacity:.6; padding:0 .3rem}

/* Note / hint */
.sp-note{
  margin-top:.9rem;
  color: rgba(245,247,250,.82);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding:.75rem .85rem;
  line-height: 1.9;
}
.sp-hint{color:var(--muted);margin:.5rem 0 0;font-size:.9rem}
.sp-link{color:#FDE68A}

/* Actions */
.sp-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.sp-btn{
  border:1px solid transparent;
  border-radius: var(--radius);
  padding:.75rem 1rem;
  font-weight:900;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.sp-btn--primary{
  background: linear-gradient(135deg, #D4AF37, #FDE68A);
  color:#1A1205;
  border-color: rgba(212,175,55,.30);
  box-shadow: 0 22px 65px rgba(212,175,55,.55);
}
.sp-btn--muted{
  background: rgba(255,255,255,.02);
  color: var(--fg);
  border-color: rgba(255,255,255,.10);
}

/* mini wallet */
.sp-mini{
  margin-top: 1rem;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: .75rem .85rem;
}
.sp-mini__row{
  display:flex;align-items:center;justify-content:space-between;
  font-weight:900;
}

/* Footer */
.sp-footer{
  margin-top: 1rem;
  border-top:1px solid rgba(212,175,55,.30);
  background: rgba(0,0,0,.15);
}
.sp-legal{
  max-width:1120px;margin:0 auto;
  padding:.9rem 1.25rem;
  color:var(--muted);
  font-size:.9rem;
}
.sp-footer-nav{
  max-width:1120px;margin:0 auto;
  padding:0 1.25rem 1rem;
  display:flex;gap:1rem;flex-wrap:wrap;
}
.sp-footer-nav a{
  color:#FDE68A;
  text-decoration:none;
  padding:.25rem .4rem;
  background: rgba(255,255,255,.03);
  border-radius:8px;
  border:1px solid rgba(212,175,55,.22);
}
.sp-footer-nav a:hover{filter:brightness(1.06)}