/* ============================================================
   Noor Plus — the commerce layer (2026-11-04).
   Hero product card, nav cart, cart drawer, and the checkout /
   success / closed pages. Built only from home.css's tokens and
   rules: sharp, flat, brass on ink, hairlines, no glow.
   ============================================================ */

:root{
  --np-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23bd8b42' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E");
  --np-tick-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%2317120B' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  --np-bad:#d07a63;
}

/* ---------- the hero card ---------- */
/* The offer card (2026-11-04): a red limited-time band with the countdown on
   top, then the name, the struck regular price and the gold offer price.
   Red is used only in that band, so gold stays the brand and the CTA. */
:root{--np-red:#B3261E;--np-red-deep:#6E120E;--np-red-lit:#E2574C}
.np-card{position:relative;margin-top:28px;padding:0 20px 20px;text-align:start;text-shadow:none;
  background:linear-gradient(180deg,rgba(24,20,16,.92),rgba(12,10,8,.95));
  border:1px solid var(--rule);container-type:inline-size;overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.85)}
/* a brass hairline under the band, and a fainter one along the foot */
.np-card::after,.np-promo::before{content:"";position:absolute;inset-inline:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--brass) 16%,var(--brass-lit) 50%,var(--brass) 84%,transparent)}
.np-card::after{bottom:0;opacity:.45}
.np-promo::before{bottom:0;z-index:1}

/* the band: red, with one slow light sweep */
.np-promo{position:relative;margin-inline:-20px;padding:9px 20px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
  background:linear-gradient(100deg,var(--np-red-deep) 0%,var(--np-red) 46%,#8F1A14 100%);color:#FFF4EC;overflow:hidden;isolation:isolate}
.np-promo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,236,214,.22) 50%,transparent 65%);
  transform:translateX(-120%);animation:npSweep 6.5s var(--ease) 1.2s infinite}
.np-promo-tag{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;line-height:1.2;letter-spacing:.01em}
html:lang(ar) .np-promo-tag{font-family:var(--ar);font-size:16.5px}
html:lang(en) .np-promo-tag{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.np-promo-dot{width:7px;height:7px;border-radius:50%;background:#FFE3C8;box-shadow:0 0 0 0 rgba(255,227,200,.7);animation:npBeat 1.8s ease-out infinite}
.np-timer{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.np-timer-l{font-size:12.5px;color:rgba(255,236,222,.82)}
.np-clock{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.np-clock i{font-style:normal;font-size:13px;color:rgba(255,236,222,.7);margin-top:-2px}
.np-cd{display:inline-block;min-width:30px;padding:5px 0 4px;text-align:center;font-size:14.5px;font-weight:500;line-height:1;
  color:var(--brass-hi);background:rgba(10,6,5,.55);border:1px solid rgba(233,206,150,.35)}
.np-cd.is-tick{animation:npTick .45s var(--ease)}

.np-card-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-top:16px}
.np-name{color:var(--paper);font-weight:400;line-height:1.1}
html:lang(ar) .np-name{font-family:var(--ar);font-weight:600;font-size:26px;line-height:1.25}
html:lang(en) .np-name{font-family:var(--en);font-size:28px;letter-spacing:-.01em}
.np-term{margin-top:4px;font-size:13.5px;color:var(--brass-lit);line-height:1.3}
.np-price{display:flex;flex-direction:column;align-items:flex-end;gap:7px;white-space:nowrap}
.np-was-row{display:flex;align-items:center;gap:8px}
.np-was{font-size:14px;color:var(--paper-2);text-decoration:none;position:relative;white-space:nowrap}
/* an angled strike, finer than the browser's */
.np-was::after{content:"";position:absolute;inset-inline:-2px;top:50%;height:1.5px;background:var(--np-red-lit);transform:rotate(-4deg);opacity:.85}
.np-was bdi{font-family:var(--mono);font-size:14.5px;letter-spacing:.02em}
.np-off{padding:3px 7px 3px;font-size:11.5px;font-weight:600;line-height:1.2;color:#FFF4EC;background:var(--np-red);letter-spacing:.02em}
.np-now{display:flex;align-items:baseline;gap:7px}
.np-amt{font-family:var(--en);font-size:44px;line-height:.85;letter-spacing:-.01em;color:var(--brass-lit);
  background:linear-gradient(180deg,var(--brass-hi) 0%,var(--brass-lit) 38%,var(--brass) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.np-cur{font-size:15px;color:var(--brass);font-weight:600}
.np-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The benefits flow as one line of ticks, two lines on a desktop card: a
   compact card, not a feature table. */
.np-feats{display:flex;flex-wrap:wrap;gap:5px 16px;margin:14px 0 16px;padding-top:13px;border-top:1px solid var(--rule-hair)}
.np-feats li{white-space:nowrap}
.np-feats li,.co-benefits li{position:relative;padding-inline-start:20px;font-size:13.5px;line-height:1.6;color:var(--paper-2)}
.np-feats li::before,.co-benefits li::before{content:"";position:absolute;inset-inline-start:0;top:.42em;width:12px;height:12px;
  background:var(--np-tick) center/contain no-repeat}
.np-feats .np-feat-lead{color:var(--paper)}
.np-cta{width:100%}
.np-card .btn.np-cta{padding-block:15px;position:relative;overflow:hidden}
.np-card .btn.np-cta:not(.np-cta-on)::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,248,230,.38) 50%,transparent 70%);transform:translateX(-120%);
  animation:npSweep 6.5s var(--ease) 4.4s infinite}
.np-cta-on{background:transparent;color:var(--brass);border:1px solid var(--rule-strong)}
.np-cta-on::after{border-inline-start-color:var(--rule);background-image:var(--chev-g)}
.np-cta-on:hover{background:transparent;color:var(--brass-lit);border-color:var(--brass)}
.btn[aria-busy="true"]{cursor:progress;opacity:.75}
.btn[hidden]{display:none}
@keyframes npSweep{0%{transform:translateX(-120%)}28%,100%{transform:translateX(120%)}}
@keyframes npBeat{0%{box-shadow:0 0 0 0 rgba(255,227,200,.7)}70%,100%{box-shadow:0 0 0 7px rgba(255,227,200,0)}}
@keyframes npTick{0%{opacity:.35;transform:translateY(-3px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .np-promo::after,.np-card .btn.np-cta::before,.np-promo-dot,.np-cd.is-tick{animation:none}
}
@container (max-width:370px){
  .np-feats{gap:4px 13px}
  .np-feats li{font-size:13px}
  .np-amt{font-size:36px}
  html:lang(ar) .np-name{font-size:23px}
  html:lang(en) .np-name{font-size:25px}
  .np-cd{min-width:27px;font-size:13.5px}
}
@container (max-width:300px){
  .np-card-top{flex-direction:column;align-items:flex-start;gap:12px}
  .np-price{align-items:flex-start}
}

/* ---------- nav: the cart ---------- */
.np-cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--rule-strong);color:var(--paper);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.np-cart-btn[hidden]{display:none}
.np-cart-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.np-cart-btn:hover{background:var(--brass);color:var(--on-brass);border-color:var(--brass)}
.np-cart-count{position:absolute;top:-7px;inset-inline-end:-7px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;background:var(--brass);color:var(--on-brass);
  font-family:var(--mono);font-size:10.5px;font-weight:500;line-height:1;border-radius:9px}
.np-cart-btn.is-bump .np-cart-count{animation:npBump .55s var(--ease-out)}
@keyframes npBump{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---------- the drawer ---------- */
/* Under the film grain (z 70) so the drawer keeps the page's texture; over the nav (60). */
/* Visibility flips at once on open (so focus can land inside straight away)
   and only after the slide on close (so the panel does not vanish mid-way). */
.np-backdrop{position:fixed;inset:0;z-index:64;background:rgba(6,4,2,.68);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.np-backdrop.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
.np-drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:65;width:min(420px,100%);
  display:flex;flex-direction:column;background:var(--ink-2);border-inline-start:1px solid var(--rule);
  transform:translateX(104%);visibility:hidden;overscroll-behavior:contain;
  transition:transform .45s var(--ease-out),visibility 0s linear .45s}
html[dir="rtl"] .np-drawer{transform:translateX(-104%)}
.np-drawer.is-open,html[dir="rtl"] .np-drawer.is-open{transform:none;visibility:visible;
  transition:transform .45s var(--ease-out),visibility 0s}
/* Never `transition:all` in here: the drawer's visibility flip is inherited,
   and transitioning it would leave the contents unfocusable while it opens. */
.np-dr-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:74px;padding:0 24px;border-bottom:1px solid var(--rule-hair)}
.np-dr-title{color:var(--paper);font-weight:400}
html:lang(ar) .np-dr-title{font-family:var(--ar);font-weight:600;font-size:23px}
html:lang(en) .np-dr-title{font-family:var(--en);font-size:25px}
.np-dr-close{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--rule);color:var(--paper-2);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.np-dr-close:hover{color:var(--paper);border-color:var(--rule-strong)}
.np-dr-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.np-dr-body{flex:1 1 auto;overflow-y:auto;padding:24px}
.np-dr-foot{flex:none;padding:18px 24px calc(20px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--rule-hair);background:var(--ink)}
.np-dr-checkout{width:100%}
.np-dr-note{margin-top:12px;font-size:12px;line-height:1.6;color:var(--paper-dim);text-align:center}
.np-drawer [data-show]{display:none}
.np-drawer[data-state="filled"] [data-show="filled"],
.np-drawer[data-state="empty"] [data-show="empty"],
.np-drawer[data-state="subscribed"] [data-show="subscribed"]{display:block}
.np-dr-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;
  padding-bottom:20px;border-bottom:1px dashed var(--rule)}
.np-dr-name{font-size:16px;color:var(--paper);font-weight:500}
.np-dr-meta{margin-top:2px;font-size:13px;color:var(--paper-dim)}
.np-dr-remove{margin-top:11px;padding-bottom:2px;font-size:12.5px;color:var(--paper-2);
  border-bottom:1px solid var(--rule-strong);transition:color .3s var(--ease)}
.np-dr-remove:hover{color:var(--brass-lit)}
.np-dr-price{font-size:15px;color:var(--paper);white-space:nowrap}
.np-dr-benefits{margin-top:22px}
.np-dr-msg{padding:34px 4px;text-align:center}
.np-dr-msg .co-tick{margin-bottom:16px}
.np-dr-msg-t{margin-bottom:8px;color:var(--paper)}
html:lang(ar) .np-dr-msg-t{font-family:var(--ar);font-weight:600;font-size:23px}
html:lang(en) .np-dr-msg-t{font-family:var(--en);font-size:26px}
.np-dr-msg .btn{margin-top:24px}

/* ---------- toast ---------- */
.np-toast{position:fixed;z-index:66;bottom:22px;inset-inline:16px;margin-inline:auto;max-width:440px;
  padding:14px 18px;background:var(--ink-3);border:1px solid var(--rule-strong);
  color:var(--paper);font-size:14px;line-height:1.6;opacity:0;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.np-toast.is-on{opacity:1;transform:none}

/* ---------- shared commerce pieces ---------- */
.co-thumb{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--rule-strong);background:var(--ink-tint)}
.co-thumb img{width:28px;height:28px}
.co-mono{display:inline-block;margin-inline-start:6px;padding:2px 5px;border:1px solid var(--rule-strong);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--brass);vertical-align:2px;line-height:1.3}
.co-qty{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:9px;font-size:12.5px;color:var(--paper-dim)}
.co-qty b{display:inline-grid;place-items:center;min-width:24px;height:22px;border:1px solid var(--rule);
  font-family:var(--mono);font-size:12px;font-weight:400;color:var(--paper)}
.co-qty-note{opacity:.85}
.co-rows{display:grid;gap:10px;margin:18px 0 0}
.co-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;color:var(--paper-2)}
.co-row dt{font-weight:300}
.co-row dd{margin:0;white-space:nowrap}
.co-row-save dd{color:var(--brass)}
.co-row-total{margin-top:2px;padding-top:13px;border-top:1px solid var(--rule);color:var(--paper);font-size:15.5px}
.co-row-total dt{font-weight:500}
.co-row-total dd bdi{font-family:var(--en);font-size:26px;line-height:1;color:var(--brass-lit)}
.co-per{font-size:12.5px;color:var(--paper-dim)}
.co-benefits{display:grid;gap:9px;margin-top:20px}
.co-tick{display:inline-block;flex:none;width:20px;height:20px;background:var(--brass-fill) var(--np-tick-ink) center/58% no-repeat}
.co-tick-lg{width:44px;height:44px}
.co-tick-xl{width:64px;height:64px}
.co-warn{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border:1px solid var(--np-bad);color:var(--np-bad);
  font-family:var(--mono);font-size:12px;line-height:1}
.co-warn::after{content:"!"}
.co-warn-xl{width:64px;height:64px;font-size:26px}
.co-spin{display:inline-block;flex:none;width:18px;height:18px;border:1.5px solid var(--rule-strong);border-top-color:var(--brass);
  border-radius:50%;animation:npSpin .9s linear infinite}
.co-spin-lg{width:44px;height:44px;border-width:2px}
@keyframes npSpin{to{transform:rotate(360deg)}}
.co-p{font-size:15px;line-height:1.75;color:var(--paper-2)}

/* ---------- page shell (checkout, success, closed) ---------- */
.np-main{position:relative;z-index:1;min-height:calc(100svh - 90px);
  padding:calc(74px + clamp(28px,6vh,64px)) var(--gut) clamp(48px,8vh,96px)}
.np-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;padding:26px var(--gut) 34px;
  border-top:1px solid var(--rule);font-size:13px;color:var(--paper-dim)}
.np-foot a{transition:color .3s var(--ease)}
.np-foot a:hover{color:var(--brass-lit)}

/* ---------- checkout ---------- */
.co{max-width:1120px;margin-inline:auto}
.co-head{margin-bottom:clamp(26px,4vh,40px)}
.co-title{margin-top:10px;font-size:clamp(28px,3.4vw,46px)}
.co-steps{display:flex;flex-wrap:wrap;margin-top:22px;border:1px solid var(--rule-hair);width:max-content;max-width:100%}
.co-steps li{display:flex;align-items:center;gap:9px;padding:10px 16px;font-size:13px;color:var(--paper-dim);
  border-inline-start:1px solid var(--rule-hair)}
.co-steps li:first-child{border-inline-start:0}
.co-n{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--rule-strong);
  font-family:var(--mono);font-size:11px;line-height:1}
.co-steps .is-done{color:var(--paper-2)}
.co-steps .is-done .co-n{background:var(--brass-fill);border-color:var(--brass-fill);color:var(--on-brass)}
.co-steps .is-on{color:var(--paper);background:var(--ink-tint)}
.co-steps .is-on .co-n{border-color:var(--brass);color:var(--brass)}
.co-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:clamp(18px,3vw,40px);align-items:start}
.co-main{display:grid;gap:18px;min-width:0}
.co-panel{border:1px solid var(--rule);background:var(--ink);padding:clamp(20px,2.6vw,30px)}
.co-panel.is-locked{opacity:.6}
.co-h{margin-bottom:14px;font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
html:lang(ar) .co-h{font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
.co-acct{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:10px;font-size:15px;color:var(--paper)}
.co-acct .co-tick{width:18px;height:18px}
.co-mail{font-family:var(--mono);font-size:13.5px;color:var(--brass-lit);word-break:break-all}
.co-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.co-hint{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--paper-dim)}
.co-muted{font-size:14.5px;color:var(--paper-dim)}
.co-closed{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;padding:16px 18px;
  border:1px solid var(--rule-strong);background:var(--ink-tint)}
.co-closed-mark{flex:none;width:8px;height:8px;margin-top:10px;background:var(--brass);animation:npPulse 2.4s var(--ease) infinite}
@keyframes npPulse{0%,100%{opacity:1}50%{opacity:.25}}
.co-closed-t{margin-bottom:4px;font-size:16.5px;font-weight:500;color:var(--paper)}
.co-pay{width:100%}
.btn[disabled]{background:var(--ink-3);color:var(--paper-dim);border-top-color:transparent;cursor:not-allowed}
.btn[disabled]::after{opacity:.35}
.co-alt{margin-top:18px;text-align:center}
.co-field{margin-bottom:18px}
.co-label{display:block;margin-bottom:8px;font-size:13.5px;color:var(--paper-2)}
.co-phone{display:flex;border:1px solid var(--rule-strong);background:var(--ink-2);transition:border-color .3s var(--ease)}
.co-phone:focus-within{border-color:var(--brass)}
.co-phone.is-bad{border-color:var(--np-bad)}
.co-phone select{flex:none;height:50px;padding:0 12px;border:0;border-right:1px solid var(--rule);
  background:var(--ink-3);color:var(--paper);font-family:var(--mono);font-size:13px;cursor:pointer}
.co-phone input{flex:1;min-width:0;height:50px;padding:0 14px;border:0;background:transparent;
  color:var(--paper);font-family:var(--mono);font-size:15.5px;letter-spacing:.04em}
.co-phone select:focus,.co-phone input:focus{outline:none}
.co-phone select:focus-visible,.co-phone input:focus-visible{box-shadow:inset 0 0 0 1px var(--brass)}
.co-err{margin-top:8px;font-size:12.5px;color:var(--np-bad)}
.co-err[hidden]{display:none}
.co-check{display:flex;gap:11px;align-items:flex-start;margin:4px 0;font-size:13.5px;line-height:1.7;color:var(--paper-2);cursor:pointer}
.co-check input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-items:center;width:19px;height:19px;margin:3px 0 0;
  border:1px solid var(--rule-strong);background:var(--ink-2);cursor:pointer}
.co-check input:checked{background:var(--brass-fill) var(--np-tick-ink) center/70% no-repeat;border-color:var(--brass-fill)}
.co-check input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.co-check.is-bad input{border-color:var(--np-bad)}
.co-form .co-pay{margin-top:18px}
.co-secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--paper-dim);text-align:center}
.co-lock{flex:none;width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7' fill='none' stroke='%23bd8b42' stroke-width='1.3'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2' fill='none' stroke='%23bd8b42' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat}
.co-state{margin-top:18px;padding:16px 18px;border:1px solid var(--rule);background:var(--ink-2)}
.co-state[hidden]{display:none}
.co-st{display:none;gap:14px;align-items:flex-start;font-size:14px;line-height:1.7;color:var(--paper-2)}
.co-st .co-spin,.co-st .co-warn{margin-top:4px}
.co-st .co-tick-lg{width:30px;height:30px}
.co-state[data-current="starting"] [data-st="starting"],
.co-state[data-current="redirecting"] [data-st="redirecting"],
.co-state[data-current="awaiting"] [data-st="awaiting"],
.co-state[data-current="paid"] [data-st="paid"],
.co-state[data-current="error"] [data-st="error"]{display:flex}
.co-st-t{margin-bottom:2px;font-size:15.5px;font-weight:500;color:var(--paper)}
.co-st-bad{color:var(--paper-2)}
.co-linkbtn{margin-top:8px;padding-bottom:1px;font-size:13px;color:var(--brass-lit);border-bottom:1px solid var(--rule-strong)}
.co-go{margin-top:14px}
.co-summary{position:sticky;top:96px;border:1px solid var(--rule);background:var(--ink-2);padding:clamp(20px,2.4vw,28px)}
.co-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;
  padding-bottom:18px;border-bottom:1px dashed var(--rule)}
.co-line-name{font-size:16px;font-weight:500;color:var(--paper)}
.co-line-meta{margin-top:2px;font-size:13px;color:var(--paper-dim)}
.co-line-price{font-size:15px;color:var(--paper);white-space:nowrap}
.co-fine{margin-top:14px;font-size:12px;line-height:1.7;color:var(--paper-dim)}
.co-legal{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;padding-top:14px;border-top:1px solid var(--rule-hair);font-size:12.5px}
.co-legal a{color:var(--paper-dim);transition:color .3s var(--ease)}
.co-legal a:hover{color:var(--brass-lit)}

/* ---------- success / payment not completed ---------- */
.np-result{display:grid;place-items:center;min-height:calc(100svh - 74px - 220px)}
.np-result-card{width:100%;max-width:620px;padding:clamp(32px,5vw,56px) clamp(22px,4vw,48px);
  text-align:center;border:1px solid var(--rule);background:var(--ink);position:relative}
.np-result-card::before{content:"";position:absolute;top:-1px;inset-inline:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass) 16%,var(--brass-lit) 50%,var(--brass) 84%,transparent)}
.np-result-state[hidden]{display:none}
.np-result-mark{margin-top:22px;letter-spacing:.34em}
html:lang(ar) .np-result-mark{font-family:var(--mono);font-size:11.5px;letter-spacing:.34em}
.np-result-h{margin:16px 0 12px;font-size:clamp(28px,3.6vw,44px)}
.np-result-p{max-width:46ch;margin:0 auto 24px;font-size:16px}
.np-result-list{max-width:430px;margin:0 auto 30px;text-align:start}
.np-result-slow{max-width:48ch;margin:-6px auto 22px}
.np-result-slow[hidden]{display:none}
.np-result-actions{justify-content:center}
.np-result-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- hero: room for the card (the copy now sits in the flow) ---------- */
@media (min-width:961px) and (max-height:860px){
  .np-card{margin-top:20px;padding:0 18px 16px}
  .np-promo{margin-inline:-18px;padding:7px 18px 8px}
  .np-cd{padding:4px 0 3px}
  .np-card-top{padding-top:12px}
  .np-feats{margin:11px 0 13px;padding-top:11px}
  .np-amt{font-size:36px}
  html:lang(ar) .np-name{font-size:23px}
  .np-card .btn.np-cta{padding-block:13px}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .np-card{margin-top:28px;background:var(--ink-2)}
  .co-grid{grid-template-columns:1fr}
  .co-summary{position:static;order:-1}
}
@media (max-width:720px){
  .np-main{padding-top:calc(64px + 26px)}
  .co-steps{width:100%}
  .co-steps li{flex:1 1 auto;justify-content:center;padding:9px 10px;font-size:12px}
  .np-dr-head{height:64px;padding:0 18px}
  .np-dr-body{padding:20px 18px}
  .np-dr-foot{padding-inline:18px}
}
@media (max-width:420px){
  .nav{gap:12px}
  .nav-actions{gap:9px}
  .np-cart-btn{width:36px;height:36px}
  .co-steps li{gap:6px;padding:8px 6px}
}
@media (pointer:coarse){.np-cart-btn,.np-dr-close{min-width:44px;min-height:44px}}