/* بطاقة ولاء العميل: بهوية المحل، و«بواسطة حِسبة» تحت */
@font-face { font-family: "Saudi Riyal"; src: url(/fonts/SaudiRiyal-Regular.woff2) format("woff2"); font-weight: 400; unicode-range: U+20C0-20C1; }
@font-face { font-family: "Saudi Riyal"; src: url(/fonts/SaudiRiyal-Bold.woff2) format("woff2"); font-weight: 700; unicode-range: U+20C0-20C1; }
:root {
  --surface: #F5F5F8; --raised: #FFFFFF; --ink: #1C1B22; --muted: #55535F; --sep: #DCDBE3;
  --brand: #B289F0; --brand-deep: #7741C8; --saffron: #F0A531; --track: rgb(28 27 34 / .06);
  --lift: 0 1px 2px rgb(28 27 34 / .08), 0 2px 8px rgb(28 27 34 / .08);
  --font: "Saudi Riyal", "Graphik Arabic", "Graphik", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --surface: #0F0F14; --raised: #1C1B24; --ink: #F2F1F6; --muted: #A6A4B3; --sep: #2C2B36; --brand-deep: #C9ADF7; --track: rgb(255 255 255 / .08); --lift: 0 1px 2px rgb(0 0 0 / .4); }
}
* { box-sizing: border-box; }
html { touch-action: manipulation; }
body { margin: 0; font-family: var(--font); background: var(--surface); color: var(--ink); line-height: 1.45; min-height: 100dvh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 480px; margin: 0 auto; padding: 20px 16px 8px; flex: 1; }
.state { text-align: center; color: var(--muted); padding: 60px 0; }

.head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.head img, .head .initial { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; box-shadow: var(--lift); flex: none; }
.head .initial { display: grid; place-items: center; font-weight: 800; font-size: 22px; background: var(--brand); color: #1C1B22; }
.head h1 { margin: 0; font-size: 20px; }
.head .sub { color: var(--muted); font-size: 13px; }

/* البطاقة الرئيسية */
.pass { position: relative; overflow: hidden; border-radius: 26px; padding: 22px 20px 20px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #7741C8 0%, #2B2140 55%, #1C1B22 100%); box-shadow: 0 10px 30px rgb(60 30 110 / .35); }
.pass::after { content: ""; position: absolute; inset: 0; background: url(/pattern.svg) repeat; background-size: 200px; opacity: .12; pointer-events: none; }
.pass > * { position: relative; z-index: 1; }
.pass .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pass .label { font-size: 13px; opacity: .75; }
.pass .pts { font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -1px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.pass .val { font-size: 15px; opacity: .9; }
.tier { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: 13px; background: rgb(255 255 255 / .16); }
.tier.t0 { background: #B07A4F; } .tier.t1 { background: #A7B0BE; color: #1C1B22; } .tier.t2 { background: var(--saffron); color: #1C1B22; } .tier.t3, .tier.t4 { background: #E2D3FB; color: #1C1B22; }
.prog { margin-top: 16px; }
.bar { height: 8px; border-radius: 999px; background: rgb(255 255 255 / .18); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--saffron); }
.who { margin-top: 14px; font-size: 13px; opacity: .8; }

.sec-t { font-size: 16px; margin: 22px 4px 10px; }
.card { background: var(--raised); border-radius: 22px; box-shadow: var(--lift); padding: 16px; margin-bottom: 10px; }
.rw-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rw-hd b { font-size: 16px; }
.rw-hd .ready { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgb(36 160 90 / .14); color: #1D8A4C; }
.rw-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 8px; margin-top: 12px; max-width: 100%; }
.stamps .stamp { max-width: 48px; width: 100%; justify-self: center; }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--sep); display: grid; place-items: center; font-weight: 800; color: var(--muted); font-size: 13px; }
.stamp.on { border: 0; background: var(--brand); color: #1C1B22; }
.stamp.gift { border-style: solid; border-color: var(--saffron); color: var(--saffron); }
.stamp.gift.on { background: var(--saffron); color: #1C1B22; }
.pbar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; margin-top: 12px; }
.pbar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.rules { color: var(--muted); font-size: 14px; line-height: 1.9; }
.acts { display: grid; gap: 8px; margin-top: 16px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
.btn.wallet { background: #000; color: #fff; }
.btn.plain { background: var(--raised); color: var(--ink); box-shadow: var(--lift); }

.by { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 0 calc(18px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; }
.by strong { color: var(--ink); }
.mark { position: relative; display: inline-flex; gap: 2px; width: 18px; height: 14px; align-items: center; justify-content: center; }
.mark i { width: 2px; height: 12px; background: var(--brand-deep); border-radius: 2px; }
.mark b { position: absolute; width: 22px; height: 2px; background: var(--saffron); transform: rotate(-28deg); border-radius: 2px; }

/* باركود العميل الخاص (يورّيه للكاشير) */
.myqr { display: grid; justify-items: center; gap: 8px; text-align: center; }
.myqr img { width: 210px; height: 210px; background: #fff; border-radius: 18px; padding: 10px; }
.myqr b { font-size: 16px; }
.myqr .rw-sub { max-width: 280px; }

/* صفحة التسجيل */
.join-hero { text-align: center; margin: 6px 0 18px; }
.join-hero h2 { font-size: 22px; margin: 8px 0 4px; }
.join-hero p { color: var(--muted); margin: 0; font-size: 14px; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.perks li::before { content: "🎁"; }
.jform { display: grid; gap: 14px; }
.jform label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.jform label .opt { color: var(--muted); font-weight: 400; }
.jform input { font: inherit; font-size: 17px; min-height: 52px; padding: 0 16px; border-radius: 16px; border: 0; background: var(--track); color: var(--ink); width: 100%; min-width: 0; }
.jform input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.jform input[dir=ltr] { text-align: right; }
.jform .btn.primary { background: var(--brand); color: #1C1B22; font-size: 17px; }
.jform .btn:disabled { opacity: .6; }
.err { color: #D23B3B; font-size: 14px; min-height: 1em; margin: 0; }
.fine { color: var(--muted); font-size: 12px; text-align: center; margin: 4px 0 0; }

/* حساب العميل في حِسبة (كل المحلات) */
.head .initial.brand-mark { background: #1C1B22; }
.mark.big { transform: scale(1.5); }
.mark.big i { background: #B289F0; }
.shop { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.shop img, .shop .initial { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; flex: none; display: grid; place-items: center; font-weight: 800; background: var(--brand); color: #1C1B22; }
.shop-b { flex: 1; min-width: 0; display: grid; gap: 2px; }
.shop-b b { font-size: 16px; }
.shop .ready { justify-self: start; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: rgb(240 165 49 / .18); color: #B87508; }
.chev { color: var(--muted); font-size: 22px; }

/* شعار «حِسبة نقطة»: نفس خطوط حِسبة، والشرطة تصير نقطة */
.mark.nq { width: auto; gap: 2px; }
.mark.nq b { position: static; width: 6px; height: 6px; border-radius: 50%; transform: none; background: var(--saffron); margin-inline-start: 2px; align-self: flex-end; }
.btn.primary { background: var(--brand); color: #1C1B22; }