/* =========================================================
   Checkout — Corporate Ready (Navy × Gold via Tokens)
   Scope: body[data-page="checkout"]
   Notes:
   - Uses tokens vars so brand auto-switches with data-site="corp"
   - No impact outside checkout
========================================================= */

: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;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

/* Subtle brand haze for checkout only */
body[data-page="checkout"]::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: -1;
  background:
    radial-gradient(1000px 560px at 18% 18%, rgba(212,175,55,.10), transparent 70%),
    radial-gradient(1000px 560px at 82% 30%, rgba(253,230,138,.07), transparent 72%);
}

/* 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 */
.co-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);
}
.co-header__wrap{
  max-width:1120px;margin-inline:auto;
  padding:1rem 1.25rem;
  display:flex;align-items:center;gap:1rem;
}
.co-brand{
  border-radius:10px;
  box-shadow: 0 0 0 1px rgba(212,175,55,.18), 0 18px 60px rgba(212,175,55,.10);
  background: rgba(255,255,255,.02);
}
.co-title{margin:0;font-size:1.35rem;font-weight:900;letter-spacing:.2px}
.co-sub{margin:0;color:var(--muted);font-size:.95rem}

.co-breadcrumbs ol{
  list-style:none;display:flex;gap:.5rem;
  margin:0 0 0 auto;padding:0;
  color:var(--muted);font-size:.9rem;
}
.co-breadcrumbs a{color:rgba(253,230,138,.95);text-decoration:none}
.co-breadcrumbs a:hover{text-decoration:underline}

/* Tabs */
.co-tabs{
  max-width:1120px;margin:1rem auto 0;
  padding:0 1.25rem;
  display:flex;gap:.5rem;align-items:center;
}
.co-tab{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:var(--fg);
  padding:.7rem 1rem;border-radius:var(--radius);
  cursor:pointer;font-weight:900;
  box-shadow: var(--shadow);
}
.co-tab.is-active{
  background: var(--grad-cta);
  color:#1A1205;
  border-color: rgba(212,175,55,.30);
}

/* Main */
.co-main{
  max-width:1120px;margin-inline:auto;
  padding:1rem 1.25rem 2rem;
}

/* Cards */
.co-panel{margin-top:1rem}
.co-card{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  padding:1rem;margin-block:1rem;
  box-shadow: var(--shadow);
}
.co-h2{
  font-size:1.1rem;
  margin:0 0 .75rem;
  font-weight:900;
  color: rgba(253,230,138,.95);
}

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

/* KV */
.co-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;
}
.co-key{color:var(--muted);font-weight:800}
.co-val{font-weight:900}

/* Note */
.co-note{
  margin-top:.75rem;
  color:var(--muted);
  font-size:.95rem;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:.7rem .85rem;
  line-height: 1.9;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Methods */
.co-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media (max-width:560px){.co-methods{grid-template-columns:1fr}}
.co-radio{
  display:flex;align-items:center;gap:.5rem;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:.65rem .75rem;
  cursor:pointer;user-select:none;
}
.co-radio:hover{border-color: rgba(212,175,55,.35)}
.co-radio input{inline-size:1.1rem;block-size:1.1rem}

/* Form */
.co-field{display:flex;flex-direction:column;gap:.35rem}
.co-field--inline{
  margin-top:.8rem;
  display:grid;
  grid-template-columns:1fr auto;
  gap:.6rem;
  align-items:end;
}
@media (max-width:560px){.co-field--inline{grid-template-columns:1fr}}
.co-label{font-weight:900;color: rgba(245,247,250,.88);}

.co-input{
  appearance:none;
  background: rgba(255,255,255,.03);
  color:var(--fg);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:.65rem .75rem;
  outline:none;
  width: 100%;
}

/* focus + autofill (no white) */
.co-input:focus{
  border-color: rgba(212,175,55,.55);
  box-shadow:0 0 0 3px rgba(212,175,55,.18);
}
.co-input::placeholder{color: rgba(245,247,250,.55);}
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover{
  -webkit-text-fill-color: var(--fg);
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.03) inset !important;
  caret-color: var(--fg);
  border-radius: var(--radius);
}

.co-hint{color:var(--muted);font-size:.85rem}
.co-error{color:#FCA5A5;font-size:.85rem;min-height:1ch}

/* Review */
.co-review{
  display:grid;gap:.75rem;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:.75rem;
}
.co-review__total{
  display:flex;align-items:center;justify-content:space-between;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:.6rem .75rem;
  font-weight:900;
}

/* Actions */
.co-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.co-btn{
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:.7rem 1rem;
  font-weight:900;
  cursor:pointer;
}
.co-btn--primary{
  background: var(--grad-cta);
  color:#1A1205;
  box-shadow: 0 18px 60px rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.30);
}
.co-btn--muted{
  background: rgba(255,255,255,.02);
  color:var(--fg);
  border-color: rgba(255,255,255,.10);
}
.co-btn--ghost{
  background: rgba(255,255,255,.03);
  color:var(--fg);
  border:1px dashed rgba(212,175,55,.35);
}

/* Footer */
.co-footer{
  margin-top:1rem;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.15);
}
.co-footer .co-legal{
  max-width:1120px;margin:0 auto;
  padding:.9rem 1.25rem;
  color:var(--muted);
  font-size:.9rem;
}
.co-footer-nav{
  max-width:1120px;margin:0 auto;
  padding:0 1.25rem 1rem;
  display:flex;gap:1rem;flex-wrap:wrap;
}
.co-footer-nav a{
  color: rgba(253,230,138,.95);
  text-decoration:none;
  padding:.25rem .4rem;
  background: rgba(255,255,255,.03);
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
}
.co-footer-nav a:hover{filter:brightness(1.06)}

/* =========================================================
   CHECKOUT — Corporate Aura (inside main)
   ========================================================= */

body[data-page="checkout"] .co-main{
  background:
    radial-gradient(1200px 700px at 15% 18%, rgba(212,175,55,.26), transparent 58%),
    radial-gradient(1200px 700px at 85% 28%, rgba(253,230,138,.16), transparent 60%),
    radial-gradient(900px 520px at 55% 88%, rgba(212,175,55,.12), transparent 64%),
    linear-gradient(180deg, #07101A 0%, #0B1220 45%, #07101A 100%);
  border-radius: 24px;
}

/* Cards: premium gold edge but keep legibility */
body[data-page="checkout"] .co-card,
body[data-page="checkout"] .co-panel{
  background: rgba(16,28,54,.62);
  border: 1px solid rgba(212,175,55,.22);
  box-shadow:
    0 14px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(212,175,55,.10),
    0 18px 70px rgba(212,175,55,.06);
}

/* Inner blocks subtle */
body[data-page="checkout"] .co-kv,
body[data-page="checkout"] .co-review,
body[data-page="checkout"] .co-radio{
  background: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.08);
}

/* Soft gold overlay wash (non-destructive) */
body[data-page="checkout"] .co-main{
  position: relative;
  overflow: hidden;
}
body[data-page="checkout"] .co-main::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;
  background:
    radial-gradient(1000px 560px at 16% 18%, rgba(212,175,55,.14), transparent 62%),
    radial-gradient(1000px 560px at 84% 30%, rgba(253,230,138,.10), transparent 64%),
    linear-gradient(180deg, rgba(212,175,55,.06), transparent 40%, rgba(253,230,138,.05));
  mix-blend-mode: screen;
  opacity: .85;
}
body[data-page="checkout"] .co-main > *{
  position: relative;
  z-index: 3;
}

/* Card wash */
body[data-page="checkout"] .co-card,
body[data-page="checkout"] .co-panel{
  position: relative;
  overflow: hidden;
}
body[data-page="checkout"] .co-card::before,
body[data-page="checkout"] .co-panel::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%),
    linear-gradient(180deg, rgba(212,175,55,.06), transparent 55%, rgba(253,230,138,.05));
  opacity:.95;
  mix-blend-mode: screen;
}
body[data-page="checkout"] .co-card > *,
body[data-page="checkout"] .co-panel > *{
  position: relative;
  z-index:2;
}

/* =========================================================
   Checkout — Gold Boost (50% Gold / 50% Navy)
   ADD-ONLY — Corporate Enhancement
   ========================================================= */

/* 1) Stronger gold atmosphere (background presence) */
body[data-page="checkout"]::before{
  background:
    radial-gradient(1100px 620px at 18% 20%, rgba(212,175,55,.28), transparent 60%),
    radial-gradient(1000px 600px at 82% 30%, rgba(253,230,138,.22), transparent 62%);
}

/* 2) Gold-dominant main aura */
body[data-page="checkout"] .co-main{
  background:
    radial-gradient(1200px 700px at 20% 22%, rgba(212,175,55,.38), transparent 55%),
    radial-gradient(1000px 600px at 80% 30%, rgba(253,230,138,.28), transparent 60%),
    radial-gradient(900px 520px at 55% 85%, rgba(212,175,55,.18), transparent 65%),
    linear-gradient(180deg, #070F1C 0%, #0B1C2D 45%, #070F1C 100%);
}

/* 3) Cards: premium gold frame */
body[data-page="checkout"] .co-card,
body[data-page="checkout"] .co-panel{
  border-color: rgba(212,175,55,.35);
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 0 1px rgba(212,175,55,.22) inset;
}

/* 4) Headings & key values pop gold */
body[data-page="checkout"] .co-h2,
body[data-page="checkout"] .co-val{
  color: #FDE68A;
}

/* 5) Tabs active = full gold */
body[data-page="checkout"] .co-tab.is-active{
  background: linear-gradient(135deg, #D4AF37, #FDE68A);
  color: #1A1205;
  box-shadow: 0 18px 55px rgba(212,175,55,.45);
}

/* 6) Primary CTA stronger gold */
body[data-page="checkout"] .co-btn--primary{
  background: linear-gradient(135deg, #D4AF37, #FDE68A);
  color: #1A1205;
  box-shadow: 0 22px 65px rgba(212,175,55,.55);
}
body[data-page="checkout"] .co-btn--primary:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 30px 85px rgba(212,175,55,.70);
}

/* 7) Inputs focus gold */
body[data-page="checkout"] .co-input:focus{
  border-color: rgba(212,175,55,.75);
  box-shadow: 0 0 0 4px rgba(212,175,55,.25);
}

/* 8) Footer gold polish */
body[data-page="checkout"] .co-footer{
  border-top-color: rgba(212,175,55,.35);
}
body[data-page="checkout"] .co-footer-nav a{
  color: #FDE68A;
  border-color: rgba(212,175,55,.30);
}