/*
  فوتنا — واجهة الشراء.

  لوحة الألوان من عالم الموضوع نفسه: أرضية ملعب ليلي، وذهب العملة
  كلون وحيد للتمييز، وخط طبشور الملعب للحدود. لا تدرّج بنفسجي ولا
  أخضر حمضي — الذهب هو البطل، وكل ما حوله هادئ.
*/

:root{
  --night:      #070F0D;
  --surface:    #0E1A17;
  --surface-2:  #142420;
  --surface-3:  #1B302A;
  --line:       #1E332D;
  --line-soft:  #162620;

  --gold:       #E3B24C;
  --gold-soft:  #F0D9A0;
  --gold-deep:  #A87A22;
  --gold-glow:  rgba(227,178,76,.16);

  --chalk:      #EAF2EE;
  --muted:      #8CA69D;
  --muted-2:    #5E7871;

  --ok:         #5FBF92;
  --bad:        #E4715C;

  --r:   14px;
  --r-s: 10px;
  --shell: 68rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--night); color:var(--chalk);
  font-family:"IBM Plex Sans Arabic","Readex Pro",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
h1,h2,h3{font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;margin:0;line-height:1.25;text-wrap:balance}
p{margin:0}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}

/* أضواء الملعب — طبقة واحدة هادئة خلف كل شيء */
.pitch{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60rem 34rem at 78% -8%, rgba(227,178,76,.10), transparent 62%),
    radial-gradient(46rem 30rem at 8% 104%, rgba(95,191,146,.06), transparent 60%);
}

.shell{max-width:var(--shell); margin:0 auto; padding:0 1.15rem}

.bar{border-bottom:1px solid var(--line); background:rgba(7,15,13,.72); backdrop-filter:blur(10px);
     position:sticky; top:0; z-index:10}
.bar-in{display:flex; align-items:center; justify-content:space-between; height:60px; gap:1rem}
.logo{font-family:"Readex Pro",sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:-.01em;
      display:inline-flex; align-items:center; gap:.5rem}
.bar-note{font-size:.8rem; color:var(--muted)}

.alert{margin:1rem 0 0; padding:.75rem 1rem; border-radius:var(--r-s);
       background:rgba(228,113,92,.12); border:1px solid rgba(228,113,92,.32); color:var(--bad); font-size:.9rem}

.lede{padding:clamp(2.4rem,6vw,4rem) 0 clamp(1.4rem,3vw,2rem); text-align:center}
.lede h1{font-size:clamp(1.9rem,5.4vw,3rem); font-weight:700; letter-spacing:-.02em}
.lede p{margin-top:.7rem; color:var(--muted); font-size:clamp(.95rem,1.8vw,1.08rem); max-width:34rem; margin-inline:auto}

/* ── التخطيط ── */
.build{display:grid; gap:1.1rem; grid-template-columns:1fr; align-items:start}
@media (min-width:62rem){ .build{grid-template-columns:1.55fr 1fr} }

.panel{
  background:linear-gradient(180deg, var(--surface) 0%, #0B1512 100%);
  border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.15rem,2.6vw,1.75rem);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 20px 50px -34px rgba(0,0,0,.9);
}

.step{display:flex; align-items:center; gap:.6rem; font-size:.95rem; font-weight:600; color:var(--chalk); margin-bottom:1rem}
.step span{
  width:1.6rem; height:1.6rem; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--gold-glow); color:var(--gold);
  font-size:.78rem; font-weight:700; border:1px solid rgba(227,178,76,.3);
}

/* ── المنصات ── */
.plats{display:grid; grid-template-columns:repeat(auto-fit,minmax(9.2rem,1fr)); gap:.5rem}
.plat{
  display:flex; align-items:center; gap:.55rem; text-align:right;
  padding:.7rem .8rem; border-radius:var(--r-s); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  font:inherit; font-size:.86rem; transition:border-color .14s, color .14s, background .14s;
}
.plat:hover{border-color:var(--gold-deep); color:var(--chalk)}
.plat-mark{
  width:.9rem; height:.9rem; flex:none; border-radius:50%;
  border:1.5px solid var(--muted-2); position:relative; transition:border-color .14s;
}
.plat[aria-checked="true"]{
  background:linear-gradient(180deg, rgba(227,178,76,.14), rgba(227,178,76,.05));
  border-color:var(--gold); color:var(--chalk); font-weight:600;
}
.plat[aria-checked="true"] .plat-mark{border-color:var(--gold)}
.plat[aria-checked="true"] .plat-mark::after{
  content:""; position:absolute; inset:.19rem; border-radius:50%; background:var(--gold);
}

/* ── قراءة الكمية ── */
.readout{display:flex; align-items:baseline; justify-content:center; gap:.5rem; margin-top:.4rem}
.readout output{
  font-family:"Readex Pro",sans-serif; font-weight:700;
  font-size:clamp(2.4rem,8.5vw,4rem); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; direction:ltr;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.readout-unit{font-size:1rem; color:var(--muted); font-weight:600}
.readout-sub{text-align:center; color:var(--muted-2); font-size:.85rem; margin-top:.35rem}

/* ── الشريط ── */
.slider-wrap{margin:1.6rem 0 .4rem; position:relative}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:2.6rem;
  background:transparent; cursor:pointer; margin:0; display:block;
  /* المتصفح يعكس range داخل RTL فيتعارض المؤشّر مع الملء ومع علامات
     التدرّج. نثبّت الاتجاه: اليسار = الأقل، اليمين = الأكثر — وهو ما
     يتوقعه القارئ من شريط تصاعدي حتى في صفحة عربية. */
  direction:ltr;
}
input[type=range]::-webkit-slider-runnable-track{
  height:.55rem; border-radius:999px;
  background:
    linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) var(--fill,10%), transparent var(--fill,10%)),
    var(--surface-3);
  border:1px solid var(--line);
}
input[type=range]::-moz-range-track{
  height:.55rem; border-radius:999px; background:var(--surface-3); border:1px solid var(--line);
}
input[type=range]::-moz-range-progress{
  height:.55rem; border-radius:999px; background:linear-gradient(90deg,var(--gold-deep),var(--gold));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:1.55rem; height:1.55rem; margin-top:-.55rem; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FFF0CE, var(--gold) 46%, var(--gold-deep));
  border:2px solid #2A1E08;
  box-shadow:0 0 0 5px var(--gold-glow), 0 4px 12px rgba(0,0,0,.5);
  transition:box-shadow .14s, transform .1s;
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.06); box-shadow:0 0 0 8px var(--gold-glow), 0 4px 14px rgba(0,0,0,.6)}
input[type=range]::-moz-range-thumb{
  width:1.5rem; height:1.5rem; border-radius:50%; border:2px solid #2A1E08;
  background:radial-gradient(circle at 32% 28%, #FFF0CE, var(--gold) 46%, var(--gold-deep));
  box-shadow:0 0 0 5px var(--gold-glow);
}

.ticks{position:relative; height:1.1rem; margin-top:.15rem}
.ticks span{
  position:absolute; left:var(--at); transform:translateX(-50%);
  font-size:.7rem; color:var(--muted-2); font-variant-numeric:tabular-nums; direction:ltr;
  white-space:nowrap;
}

/* ── إدخال دقيق ── */
.exact{margin-top:1.7rem; padding-top:1.3rem; border-top:1px solid var(--line)}
.exact label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.45rem}
.exact-row{display:flex; align-items:stretch; gap:.5rem}
.exact-row input{
  flex:1; padding:.7rem .85rem; border-radius:var(--r-s);
  background:var(--surface-2); border:1px solid var(--line); color:var(--chalk);
  font:inherit; font-size:1.05rem; font-variant-numeric:tabular-nums; text-align:left;
}
.exact-row input:focus{border-color:var(--gold); outline:none; box-shadow:0 0 0 3px var(--gold-glow)}
.exact-suffix{display:grid; place-items:center; padding:0 .9rem; border-radius:var(--r-s);
  background:var(--surface-3); color:var(--muted); font-size:.85rem; border:1px solid var(--line)}
.hint{font-size:.78rem; color:var(--muted-2); margin-top:.4rem}

/* ── الملخّص ── */
.summary{position:sticky; top:76px}
.sum-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.5rem 0; font-size:.9rem; color:var(--muted); border-bottom:1px solid var(--line)}
.sum-row b{color:var(--chalk); font-weight:600; font-variant-numeric:tabular-nums}
.total{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin:1.1rem 0 1.2rem; padding-top:.9rem}
.total span{color:var(--muted); font-size:.95rem}
.total strong{
  font-family:"Readex Pro",sans-serif; font-size:2rem; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--gold-soft);
}

.cta{
  width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1rem; border:0; border-radius:var(--r-s); cursor:pointer;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold) 42%, var(--gold-deep));
  color:#1A1204; font:inherit; font-weight:700; font-size:1.05rem;
  box-shadow:0 8px 22px -12px rgba(227,178,76,.7);
  transition:filter .14s, transform .08s;
}
.cta:hover{filter:brightness(1.06)}
.cta:active{transform:translateY(1px)}
.cta[disabled]{opacity:.55; cursor:not-allowed; filter:grayscale(.3)}
.cta-spin{
  width:1rem; height:1rem; border-radius:50%;
  border:2px solid rgba(26,18,4,.28); border-top-color:#1A1204;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.pay{text-align:center; font-size:.78rem; color:var(--muted-2); margin-top:.6rem}
.err{margin-top:.7rem; font-size:.85rem; color:var(--bad); text-align:center}

.assure{list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.45rem}
.assure li{position:relative; padding-inline-start:1.2rem; font-size:.82rem; color:var(--muted)}
.assure li::before{content:"✓"; position:absolute; inset-inline-start:0; color:var(--ok); font-weight:700}

/* ── كيف يصلك ── */
.how{margin:clamp(2.6rem,6vw,4rem) 0 3rem}
.how h2{font-size:1.35rem; font-weight:600; margin-bottom:1.2rem; text-align:center}
.how ol{list-style:none; counter-reset:s; padding:0; margin:0;
  display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.how li{counter-increment:s; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.1rem 1.2rem}
.how li::before{
  content:counter(s); display:grid; place-items:center;
  width:1.7rem; height:1.7rem; border-radius:50%; margin-bottom:.6rem;
  background:var(--gold-glow); color:var(--gold); font-weight:700; font-size:.8rem;
  border:1px solid rgba(227,178,76,.28);
}
.how li b{display:block; margin-bottom:.2rem; font-size:.95rem}
.how li span{font-size:.86rem; color:var(--muted)}
.fineprint{margin-top:1.1rem; font-size:.78rem; color:var(--muted-2); max-width:44rem}

.foot{border-top:1px solid var(--line); padding:1.4rem 0 2.4rem; color:var(--muted-2); font-size:.82rem}
.foot .tiny{font-size:.74rem; margin-top:.35rem; max-width:44rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto}}

/* ── تحذير كلمة المرور ── */
.warn{
  display:flex; gap:.75rem; align-items:flex-start;
  background:linear-gradient(180deg, rgba(227,178,76,.13), rgba(227,178,76,.05));
  border:1px solid rgba(227,178,76,.34); border-radius:var(--r-s);
  padding:.85rem 1rem; margin-bottom:1.2rem; font-size:.86rem; color:var(--chalk);
  line-height:1.65;
}
.warn b{display:block; color:var(--gold-soft); font-weight:700; margin-bottom:.15rem}
.warn-mark{
  flex:none; width:1.45rem; height:1.45rem; border-radius:50%; margin-top:.1rem;
  display:grid; place-items:center; font-weight:800; font-size:.85rem;
  background:var(--gold); color:#1A1204;
}

/* ── حقول الحساب ── */
.fields{display:grid; gap:1rem}
.field label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.4rem; font-weight:500}
.field input, .field textarea{
  width:100%; padding:.7rem .85rem; border-radius:var(--r-s);
  background:var(--surface-2); border:1px solid var(--line); color:var(--chalk);
  font:inherit; font-size:.98rem;
}
.field textarea{resize:vertical; min-height:3.4rem; line-height:1.6}
.field input:focus, .field textarea:focus{
  border-color:var(--gold); outline:none; box-shadow:0 0 0 3px var(--gold-glow);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-color:var(--bad); box-shadow:0 0 0 3px rgba(228,113,92,.14);
}
.field .hint{margin-top:.35rem}
.field-err{margin-top:.35rem; font-size:.78rem; color:var(--bad)}

.pass-row{display:flex; gap:.5rem}
.pass-row input{flex:1}
.peek{
  padding:0 .9rem; border-radius:var(--r-s); cursor:pointer;
  background:var(--surface-3); border:1px solid var(--line); color:var(--muted);
  font:inherit; font-size:.8rem; white-space:nowrap;
}
.peek:hover{color:var(--chalk); border-color:var(--gold-deep)}

.pay-note{text-align:center; font-size:.76rem; color:var(--muted-2); margin-top:.3rem}
.pay-note b{color:var(--muted)}