/* مدار · Awda: shared tokens, the loyalty pass and the receipt.
   Used by index.html, wallet.html and dashboard.html.
   The page is an emerald night; panels are warm cream "day" surfaces so it never feels heavy. */
:root{
  --canvas:#0a1512;        /* emerald night, never pure black */
  --panel:#f5f0e1;         /* cream panels */
  --panel-2:#e9e2cd;
  --line:rgba(220,235,225,.13);
  --line-strong:rgba(220,235,225,.34);
  --text:#f2efe4;
  --text-2:#a7b8af;
  --accent:#e9b949;        /* gold: the call to action and earned stamps */
  --accent-hover:#f3cd70;
  --accent-muted:rgba(233,185,73,.16);
  --ion:#2fd39a;           /* emerald: links, lines, small labels */
  --star:#ffe7b3;
  --good:#12805a;
  --paper:#f5f0e1;
  --ink:#12201b;
  --shadow:0 1px 0 rgba(255,255,255,.5) inset,0 26px 50px -26px rgba(0,0,0,.65);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --f-display:'Noto Kufi Arabic','IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-body:'IBM Plex Sans Arabic','Noto Kufi Arabic',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
/* cream surfaces carry dark ink */
.day,.card,.plan,.tile,.lane,.contact a,.box,.row,.recipe,.sheet,.toast,.preview,.rule[aria-pressed="true"],.empty{
  --text:#12201b;--text-2:#55665e;--line:rgba(18,32,27,.12);--line-strong:rgba(18,32,27,.3);--ion:#0d8a62;--accent-muted:rgba(233,185,73,.28);color:var(--text)}
/* islands that stay night-coloured: the hero film, phones, lock screens, the final box */
.night{--text:#f2efe4;--text-2:#a7b8af;--line:rgba(220,235,225,.13);--line-strong:rgba(220,235,225,.34);--panel:#13241e;--panel-2:#1a3129;--ion:#2fd39a;color:#f2efe4}

/* ---------- the pass: a ticket with a tear-off stub ---------- */
.pass{
  --p1:#17604a; --p2:#07201a; --p-planet:#2fd39a; --p-ink:#f2efe4; --p-lit:#e9b949; --p-ring:#bfe9d8; --p-on:#12201b;
  position:relative; width:300px; aspect-ratio:300/440; border-radius:26px;
  color:var(--p-ink); font-family:var(--f-body); direction:rtl;
  background:radial-gradient(120% 80% at 20% 0%,var(--p1),var(--p2) 72%);
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 0 0 1px rgba(255,255,255,.08) inset,0 30px 60px -22px rgba(0,0,0,.7),0 12px 24px -12px rgba(0,0,0,.5);
  overflow:hidden; isolation:isolate; display:flex; flex-direction:column;
}
.pass[data-theme="roast"]{--p1:#7a4a2a;--p2:#24120a;--p-planet:#e0a878;--p-ring:#f1d3b8}
.pass[data-theme="noir"]{--p1:#3a3340;--p2:#0f0d12;--p-planet:#e7b9c6;--p-lit:#f0c9d2;--p-ring:#e9d3da}
.pass[data-theme="rose"]{--p1:#93345f;--p2:#280c1c;--p-planet:#ff9cc6;--p-ring:#ffc7de}
.pass[data-theme="ember"]{--p1:#9a3a1c;--p2:#260c06;--p-planet:#ff9a62;--p-ring:#ffc9aa}
.pass[data-theme="volt"]{--p1:#1f3f8a;--p2:#070f26;--p-planet:#6fb1ff;--p-lit:#d7ff5a;--p-ring:#b9d6ff}
.pass[data-theme="aqua"]{--p1:#0f6f86;--p2:#041e26;--p-planet:#59d8f0;--p-ring:#b3eefa}
.pass[data-theme="butter"]{--p1:#f6efdc;--p2:#e2d6b8;--p-planet:#c9872e;--p-ink:#2a1f10;--p-lit:#c9872e;--p-ring:#7a5a2a;--p-on:#fff}

.pass-stars{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 82% 12%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 68% 34%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 24% 46%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 90% 58%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 8% 64%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 36% 8%,#fff 50%,transparent 51%)}
.pass[data-theme="butter"] .pass-stars{display:none}
.pass-foil{
  position:absolute; inset:-40%; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.38;
  background:linear-gradient(115deg,transparent 30%,rgba(47,211,154,.5) 40%,rgba(233,185,73,.5) 47%,rgba(255,231,179,.5) 53%,rgba(111,177,255,.4) 59%,transparent 68%);
  transform:translate3d(-18%,0,0); will-change:transform;
}
.pass[data-theme="butter"] .pass-foil{mix-blend-mode:multiply;opacity:.25}
.pass > *:not(.pass-foil):not(.pass-stars){position:relative;z-index:3}

.pass-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 0}
.pass-id{display:flex;align-items:center;gap:10px;min-width:0}
.pass-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;overflow:hidden}
.pass[data-theme="butter"] .pass-mark{background:rgba(42,31,16,.08);box-shadow:0 0 0 1px rgba(42,31,16,.18) inset}
.pass-mark svg{width:22px;height:22px}.pass-mark img{width:100%;height:100%;object-fit:cover}
.pass-brand{font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.35;min-width:0}
.pass-brand small{display:block;font-family:var(--f-body);font-weight:400;font-size:11px;opacity:.75}
.pass-name{text-align:left;line-height:1.3;flex:none}
.pass-name small{display:block;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;opacity:.6}
.pass-name b{font-weight:600;font-size:12.5px}

/* the orbit: niche art in the middle, stamps circling it */
.orbit{display:block;width:100%;height:auto;margin:auto 0;overflow:visible}
.orbit .planet-glow{fill:var(--p-planet);opacity:.14}
.orbit .planet{fill:var(--p-planet);opacity:.16;stroke:var(--p-ring);stroke-opacity:.35;stroke-width:1}
.orbit .art{fill:none;stroke:var(--p-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.orbit .art .fillable{fill:var(--p-lit);fill-opacity:.9;stroke:var(--p-ink)}
.orbit .art .steam{stroke:var(--p-lit);animation:steam 3.6s ease-in-out -1s infinite}
@keyframes steam{0%,100%{opacity:.35;transform:translateY(2px)}50%{opacity:1;transform:translateY(-2px)}}
.orbit .ring{fill:none;stroke:var(--p-ring);stroke-opacity:.3;stroke-width:1.2;stroke-dasharray:2 5}
.orbit .arc{fill:none;stroke:var(--p-lit);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 700ms var(--ease-out)}
.orbit .spin{transform-origin:150px 98px;animation:spin 80s linear infinite}
.orbit .orb{transform-box:fill-box;transform-origin:center;animation:spin 80s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .moon{transform-box:fill-box;transform-origin:center}
.orbit .moon circle{fill:rgba(4,12,10,.5);stroke:var(--p-ring);stroke-opacity:.6;stroke-width:1.3;transition:fill 300ms ease,stroke 300ms ease}
.pass[data-theme="butter"] .orbit .moon circle{fill:rgba(255,255,255,.6)}
.orbit .moon .halo{fill:var(--p-lit);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
.orbit .ic{fill:none;stroke:var(--p-ring);stroke-opacity:.7;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.orbit .moon.on circle:not(.halo){fill:var(--p-lit);stroke:#fff;stroke-opacity:.9}
.orbit .moon.on .halo{opacity:.26}
.orbit .moon.on .ic{stroke:var(--p-on);stroke-opacity:1}
.orbit .moon.pop{animation:moonIn 560ms var(--ease-out) both}
.orbit .moon.pop .halo{animation:moonHalo 900ms var(--ease-out) both}
@keyframes moonIn{from{transform:scale(.4)}60%{transform:scale(1.25)}to{transform:scale(1)}}
@keyframes moonHalo{0%{opacity:.9;transform:scale(.6)}100%{opacity:.26;transform:scale(1)}}
.orbit .nova{fill:none;stroke:var(--p-lit);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.pass.nova .orbit .nova{animation:nova 1100ms var(--ease-out) both}
.pass.nova .orbit .nova:nth-of-type(2){animation-delay:140ms}
@keyframes nova{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(3.2)}}

.pass-fields{display:flex;justify-content:space-between;gap:10px;padding:0 20px 12px}
.pass-field small{display:block;font-size:10.5px;opacity:.72;margin-bottom:2px;white-space:nowrap}
.pass-field b{font-family:var(--f-mono);font-weight:500;font-size:22px;line-height:1;display:inline-block;font-variant-numeric:tabular-nums;direction:ltr}
.pass-field b i{font-style:normal;font-size:13px;opacity:.6}
.pass-field:last-child{text-align:left}
.pass-field b.tick{animation:tick 380ms var(--ease-out)}
@keyframes tick{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}

/* the stub: perforated edge, then a wide scannable code in the card's own ink on cream */
.pass-stub{margin-top:auto;padding:14px 20px 12px;background:var(--paper);color:var(--p2);text-align:center;
  -webkit-mask:radial-gradient(circle 9px at 0 0,transparent 98%,#000) left top/51% 100% no-repeat,radial-gradient(circle 9px at 100% 0,transparent 98%,#000) right top/51% 100% no-repeat;
          mask:radial-gradient(circle 9px at 0 0,transparent 98%,#000) left top/51% 100% no-repeat,radial-gradient(circle 9px at 100% 0,transparent 98%,#000) right top/51% 100% no-repeat}
.pass-stub::before{content:"";position:absolute;inset:0 16px auto 16px;border-top:1.5px dashed rgba(18,32,27,.3)}
.pass[data-theme="butter"] .pass-stub{color:#2a1f10;background:#fffaf0}
.pass-code svg{display:block;width:100%;height:36px}
.pass-stub span{display:block;margin-top:5px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.16em;color:#12201b;opacity:.75;direction:ltr}
.mini-pass{aspect-ratio:auto!important;padding-bottom:6px}

/* ---------- the receipt ---------- */
.receipt{
  width:232px; background:var(--paper); color:var(--ink); direction:rtl; position:relative;
  font-family:var(--f-mono); font-size:11px; line-height:1.5; padding:16px 16px 22px;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 6px 8px,transparent 5px,#000 5.5px) bottom/12px 8px repeat-x;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 6px 8px,transparent 5px,#000 5.5px) bottom/12px 8px repeat-x;
}
.receipt h4{margin:0;text-align:center;font-family:var(--f-display);font-weight:700;font-size:17px}
.receipt .r-sub{text-align:center;font-size:9.5px;opacity:.6;margin-bottom:8px;font-family:var(--f-body)}
.receipt .r-row{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-body);font-size:12px}
.receipt .r-row span:last-child{font-family:var(--f-mono);direction:ltr}
.receipt hr{border:0;border-top:1px dashed rgba(18,32,27,.35);margin:8px 0}
.receipt .r-total{font-weight:600;font-size:14px}
.receipt .r-points{margin-top:6px;padding:5px 8px;border-radius:6px;background:rgba(233,185,73,.3);color:#6b4d08;font-family:var(--f-body);font-weight:600;font-size:11.5px;text-align:center}
.receipt .r-bar{height:30px;margin:10px 0 4px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 3px,var(--ink) 3px 4px,transparent 4px 7px,var(--ink) 7px 10px,transparent 10px 12px)}
.receipt .r-thanks{text-align:center;font-family:var(--f-body);font-size:10.5px;opacity:.65}
.r-paid{position:absolute;left:36%;top:24%;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  border:2px solid #0d8a62;color:#0d8a62;font-family:var(--f-display);font-weight:700;font-size:13px;
  transform:rotate(-14deg) scale(1.5);opacity:0;box-shadow:0 0 0 3px var(--paper) inset,0 0 0 4px #0d8a62 inset}
.r-paid.on{opacity:.85;transform:rotate(-14deg) scale(1);transition:transform 200ms var(--ease-out),opacity 120ms ease}

.slot{height:16px;border-radius:9px;background:linear-gradient(#2a4a3e,#10201a);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px rgba(0,0,0,.6)}
.slot::after{content:"";display:block;height:4px;margin:6px 12px 0;border-radius:4px;background:#030806}

/* the spark a receipt turns into */
.comet{position:absolute;z-index:6;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 30%,var(--star) 45%,rgba(233,185,73,.9) 70%,transparent 72%);
  box-shadow:0 0 18px 6px rgba(240,200,110,.7),0 0 46px 14px rgba(233,185,73,.35);will-change:transform,opacity}

/* brand mark */
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--text);line-height:1}
.logo svg{width:34px;height:34px;flex:none}

@media (prefers-reduced-motion:reduce){
  .orbit .moon.pop,.orbit .moon.pop .halo,.pass-field b.tick,.orbit .spin,.orbit .orb,.orbit .art .steam,.pass.nova .orbit .nova{animation:none}
  .orbit .arc,.r-paid.on{transition:none}
}