:root {
  --black: #0c0a09;
  --dark: #131110;
  --card: #1a1715;
  --card-2: #211d1a;
  --red: #8b1c1c;
  --red-h: #a12020;
  --red-soft: rgba(161, 32, 32, .14);
  --cream: #e8dfc8;
  --cream-d: rgba(232, 223, 200, .68);
  --cream-f: rgba(232, 223, 200, .4);
  --line: rgba(232, 223, 200, .1);
  --line-m: rgba(232, 223, 200, .2);
  --ok: #6fbf8e;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --display: 'Scheherazade New', 'Noto Naskh Arabic', serif;
  --body: 'Tajawal', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(139, 28, 28, .16), transparent 62%),
    var(--black);
  color: var(--cream);
  font: 400 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

.testbar {
  background: #3a2a10; color: #f3d58c;
  text-align: center; font-size: 13px; font-weight: 500; padding: 7px 16px;
}

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 0; }
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.brand-ar { font: 700 34px/1 var(--display); letter-spacing: 0; }
.brand-en { font-size: 11px; letter-spacing: .28em; color: var(--cream-f); font-weight: 500; }
.help {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--cream-d); text-decoration: none;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.help svg { width: 17px; height: 17px; }
.help:hover { color: var(--cream); border-color: var(--line-m); }

/* ---------- hero ---------- */
.hero { padding: 64px 0 44px; max-width: 680px; }
.eyebrow { margin: 0 0 14px; color: var(--red-h); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.hero h1 { margin: 0; font: 700 clamp(40px, 6vw, 64px)/1.45 var(--display); letter-spacing: 0; }
.lede { margin: 26px 0 0; color: var(--cream-d); font-size: 17px; max-width: 540px; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 56px; align-items: start; padding-bottom: 72px; }
.steps { display: grid; gap: 52px; min-width: 0; }
.hp { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.step-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.step-no { font-size: 16px; font-weight: 700; color: var(--red-h); font-variant-numeric: tabular-nums; }
.step-head h2 { margin: 0; font: 700 28px/1.2 var(--display); }
.step-head h2 small { font: 400 14px var(--body); color: var(--cream-f); margin-inline-start: 8px; }

/* ---------- group tabs ---------- */
.tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: 14px; padding: 5px; gap: 4px;
  background: var(--dark); margin-bottom: 18px;
}
.tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  text-align: start; padding: 11px 14px; border-radius: 10px;
  transition: background .22s var(--ease), color .22s var(--ease);
  color: var(--cream-d);
}
.tab b { display: block; font-size: 15px; font-weight: 700; color: inherit; }
.tab span { display: block; font-size: 12.5px; color: var(--cream-f); line-height: 1.45; margin-top: 2px; }
.tab:hover { color: var(--cream); }
.tab[aria-selected="true"] { background: var(--card-2); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-m); }

/* ---------- packages ---------- */
.packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pkg {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  text-align: start; cursor: pointer; appearance: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 18px 18px; color: var(--cream);
  transition: border-color .22s var(--ease), background .22s var(--ease), transform .18s var(--ease);
}
.pkg:hover { border-color: var(--line-m); }
.pkg:active { transform: scale(.985); }
.pkg[aria-checked="true"] { border-color: var(--red-h); background: linear-gradient(180deg, var(--red-soft), transparent 70%), var(--card); }
.pkg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pkg-name { font: 700 25px/1.15 var(--display); }
.pkg-en { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-f); margin-top: 4px; }
.radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-m); flex: none; display: grid; place-items: center; transition: border-color .2s var(--ease); }
.radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red-h); transform: scale(0); transition: transform .24s var(--ease); }
.pkg[aria-checked="true"] .radio { border-color: var(--red-h); }
.pkg[aria-checked="true"] .radio::after { transform: scale(1); }
.pkg-price { font-size: 32px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.pkg-price small { font-size: 13px; font-weight: 500; color: var(--cream-f); margin-inline-start: 4px; letter-spacing: 0; }
.pkg-specs { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; color: var(--cream-d); }
.pkg-specs li { display: flex; align-items: center; gap: 8px; }
.pkg-specs li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cream-f); flex: none; }
.tag {
  position: absolute; top: -10px; inset-inline-start: 16px;
  background: var(--red); color: var(--cream); font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}

.offer-card { border-color: var(--red-h); cursor: default; }
.offer-card:active { transform: none; }
.offer-desc { color: var(--cream-d); font-size: 15px; margin: 0; }

/* ---------- qty rows ---------- */
.rows { display: grid; border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px;
  padding: 14px 18px; border-top: 1px solid var(--line);
  transition: background .2s var(--ease);
}
.row:first-child { border-top: 0; }
.row.on { background: rgba(232, 223, 200, .035); }
.row-name { font-weight: 500; font-size: 15.5px; }
.row-hint { display: block; font-size: 12.5px; color: var(--cream-f); }
.row-price { font-size: 14px; color: var(--cream-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-price small { color: var(--cream-f); font-size: 12px; }

.stepper { display: inline-grid; grid-template-columns: 34px 36px 34px; align-items: center; border: 1px solid var(--line-m); border-radius: 10px; overflow: hidden; }
.stepper button {
  appearance: none; border: 0; background: transparent; height: 34px; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--cream-d);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.stepper button:hover:not(:disabled) { background: var(--card-2); color: var(--cream); }
.stepper button:disabled { color: rgba(232, 223, 200, .18); cursor: default; }
.stepper.per-min { grid-template-columns: 34px 46px 34px; }
.stepper output { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-m); transition: background .22s var(--ease); }
.switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream-d); transition: transform .26s var(--ease), background .2s; }
.switch input:checked + i { background: var(--red); }
.switch input:checked + i::after { transform: translateX(-18px); background: var(--cream); }
.switch input:focus-visible + i { outline: 2px solid var(--cream); outline-offset: 2px; }

/* ---------- fields ---------- */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field > span { font-size: 14px; font-weight: 500; color: var(--cream-d); }
.field small { color: var(--cream-f); font-weight: 400; margin-inline-start: 6px; }
.field input, .field textarea {
  width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; font-size: 16px; outline: none; resize: vertical;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input[dir="ltr"] { text-align: left; }
.field input::placeholder { color: rgba(232, 223, 200, .26); }
.field input:focus, .field textarea:focus { border-color: var(--line-m); box-shadow: 0 0 0 3px rgba(232, 223, 200, .07); }
.field.bad input, .field.bad textarea { border-color: var(--red-h); }

.policy { margin-top: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--dark); }
.policy summary { cursor: pointer; padding: 13px 16px; font-size: 14.5px; font-weight: 500; color: var(--cream-d); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.policy summary::-webkit-details-marker { display: none; }
.policy summary::after { content: "+"; font-size: 20px; color: var(--cream-f); transition: transform .24s var(--ease); }
.policy[open] summary::after { transform: rotate(45deg); }
.policy ol { margin: 0; padding: 0 36px 16px 16px; color: var(--cream-d); font-size: 14px; display: grid; gap: 6px; }

.agree { display: flex; align-items: center; gap: 12px; margin-top: 16px; cursor: pointer; font-size: 14.5px; color: var(--cream-d); }
.agree input { position: absolute; opacity: 0; }
.agree .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-m); flex: none; display: grid; place-items: center; transition: background .2s var(--ease), border-color .2s var(--ease); }
.agree .box::after { content: ""; width: 10px; height: 5px; border: 2px solid var(--cream); border-top: 0; border-inline-end: 0; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .2s var(--ease); }
.agree input:checked + .box { background: var(--red); border-color: var(--red); }
.agree input:checked + .box::after { transform: rotate(-45deg) scale(1); }
.agree input:focus-visible + .box { outline: 2px solid var(--cream); outline-offset: 2px; }
.agree.bad .box { border-color: var(--red-h); }

/* ---------- summary ---------- */
.summary { position: sticky; top: 24px; }
.sum-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.sum-title { margin: 0 0 16px; font: 700 22px/1.2 var(--display); }
.sum-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-height: 24px; }
.sum-lines li { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; color: var(--cream-d); animation: in .28s var(--ease); }
.sum-lines li b { font-weight: 500; color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-lines .empty { color: var(--cream-f); animation: none; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.sum-total span { font-size: 15px; color: var(--cream-d); }
.sum-total strong { font-size: 38px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.sum-note { margin: 8px 0 0; font-size: 12.5px; color: var(--cream-f); }

.error { margin: 16px 0 0; padding: 11px 13px; border-radius: 10px; background: var(--red-soft); color: #f0c2b8; font-size: 14px; }
.error a { font-weight: 700; }

.pay {
  appearance: none; border: 0; cursor: pointer; width: 100%; margin-top: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--red); color: var(--cream); border-radius: 14px; padding: 16px 20px;
  font-size: 17px; font-weight: 700;
  transition: background .2s var(--ease), transform .16s var(--ease), opacity .2s;
}
.pay:hover:not(:disabled) { background: var(--red-h); }
.pay:active:not(:disabled) { transform: scale(.98); }
.pay:disabled { opacity: .38; cursor: not-allowed; }
.pay:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.pay-amount { font-variant-numeric: tabular-nums; opacity: .9; }
.pay.loading .pay-label::after { content: "…"; }
.pay.loading { pointer-events: none; opacity: .8; }

.methods { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.m {
  display: inline-flex; align-items: center; gap: 2px; direction: ltr;
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--cream-d);
}
.m svg { width: 13px; height: 13px; margin-top: -2px; }
.secure { display: flex; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--cream-f); line-height: 1.55; }
.secure svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* ---------- mobile dock ---------- */
.dock { display: none; }

.foot { display: flex; justify-content: space-between; padding: 28px 0 40px; border-top: 1px solid var(--line); font-size: 13px; color: var(--cream-f); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--cream); }

@keyframes in { from { opacity: 0; transform: translateY(4px); } }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; gap: 40px; }
  .summary { position: static; }
  .packages { grid-template-columns: 1fr; }
  .pkg { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; }
  .pkg-top { grid-column: 1 / -1; }
  .pkg-specs { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .dock {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 10;
    align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(12, 10, 9, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transition: transform .3s var(--ease);
  }
  .dock.hide { transform: translateY(110%); }
  .dock-total span { display: block; font-size: 12px; color: var(--cream-f); }
  .dock-total strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .pay-sm { width: auto; margin: 0; padding: 13px 30px; justify-content: center; }
  body { padding-bottom: 84px; }
}

@media (max-width: 620px) {
  .hero { padding: 44px 0 32px; }
  .lede { font-size: 16px; }
  .tab { padding: 11px 8px; text-align: center; }
  .tab span { display: none; }
  .tab b { font-size: 14px; }
  .fields { grid-template-columns: 1fr; }
  .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .row-price { grid-row: 2; }
  .row .stepper, .row .switch { grid-row: 1 / span 2; grid-column: 2; }
  .sum-card { padding: 20px; }
  .brand-ar { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}