/* ============================================================
   صفحة الحسابات — تُفتح من مسح باركود على الجوال، فكل شيء مبني
   على إصبع واحد: أهداف لمس كبيرة، ونسخ بضغطة، وبلا أي طلب خارجي
   (لا خطوط ولا مكتبات) حتى تفتح فوراً ولو كانت الشبكة ضعيفة.
   الألوان من شعار اسطورة الهدايا: بنفسجي داكن يتدرج إلى وردي.
   زر واتساب يبقى أخضر عمداً: لونه هو ما يتعرّف عليه العميل.
   ============================================================ */
:root{
  --bg:#F6F4FB; --surface:#FFFFFF; --sunk:#F1EEF8; --line:#E5E0F0;
  --ink:#1E1A33; --ink-2:#5A5573; --ink-3:#8A86A0;
  --brand:#3D2F84; --brand-2:#D6007A; --brand-soft:#ECE9F7;
  --g1:#3D2F84; --g2:#7E1571; --g3:#D6007A;   /* الوردي أغمق درجة من الشعار (#E70188) ليحمل نصاً أبيض */
  --wa:#0F7A5C;
  --warn:#B3261E; --warn-soft:#FBEAE8;
  --shadow:0 1px 2px rgba(30,26,51,.05), 0 10px 28px -14px rgba(30,26,51,.25);
  --ring:rgba(61,47,132,.4);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#13111F; --surface:#1C1930; --sunk:#262240; --line:#332E4F;
    --ink:#EEECF7; --ink-2:#ABA6C4; --ink-3:#7A7596;
    --brand:#B3A8FF; --brand-2:#FF6DB6; --brand-soft:#2A2550;
    --wa:#12856A;
    --warn:#FF8A80; --warn-soft:#3A1C1A;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -14px rgba(0,0,0,.7);
    --ring:rgba(179,168,255,.45);
  }
}

*{box-sizing:border-box}
html{color-scheme:light dark; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif;
  font-size:16px; line-height:1.6;
  direction:rtl; text-align:right;
  -webkit-font-smoothing:antialiased;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
}
[hidden]{display:none !important}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
.wrap{max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:16px}

/* ---------- الرأس: تدرّج الشعار نفسه، والشعار على بلاطة بيضاء لأن خلفيته بيضاء ---------- */
.hero{
  border-radius:22px; padding:22px 18px 20px; text-align:center; color:#fff;
  background:linear-gradient(165deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%);
  box-shadow:var(--shadow);
}
.logo{
  width:108px; height:108px; margin:0 auto 14px; border-radius:28px; background:#fff;
  display:grid; place-items:center; overflow:hidden;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.55);
}
.logo img{display:block; width:90px; height:90px; object-fit:contain}
h1{
  font-size:clamp(20px,5.6vw,26px); font-weight:800; line-height:1.5;
  margin:0; text-wrap:balance;
}
.branch{
  margin:12px auto 0; padding-top:11px; max-width:34ch;
  border-top:1px solid rgba(255,255,255,.28);
  font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.9);
}
.branch strong{display:block; font-size:16px; font-weight:800; color:#fff}

.sec{
  margin:8px 4px 10px; font-size:13.5px; font-weight:700; color:var(--ink-2);
  display:flex; align-items:center; gap:10px;
}
.sec::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---------- البطاقة ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden;
}
.cards{display:flex; flex-direction:column; gap:14px}

.card-head{
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; background:var(--brand-soft);
  border-bottom:1px solid var(--line);
}
.chip{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg, var(--g1), var(--g3)); color:#fff;
  font-size:14px; font-weight:800; font-variant-numeric:tabular-nums;
}
.bank{margin:0; font-size:18px; font-weight:800; color:var(--brand); line-height:1.4}

/* ---------- الحقل: الصف كله هدف لمس، والزر داخله للوحة المفاتيح وقارئ الشاشة ---------- */
.field{
  padding:11px 16px 13px; cursor:pointer;
  transition:background .18s;
  -webkit-tap-highlight-color:transparent;
}
.field + .field{border-top:1px solid var(--line)}
.field:active{background:var(--sunk)}
.field.done{background:var(--brand-soft)}
.field-top{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:34px}
.field-label{font-size:13px; font-weight:600; color:var(--ink-2)}
.field-value{
  font-size:16px; font-weight:700; line-height:1.5; margin-top:1px;
  -webkit-user-select:all; user-select:all;       /* ضغطة مطوّلة تحدد القيمة كاملة إن تعذّر النسخ الآلي */
  overflow-wrap:anywhere;
}
/* الأرقام تُكتب من اليسار وتُحاذى يميناً مع العناوين؛ وخانات متساوية العرض كي لا تتراقص المجموعات */
.field-value.num{
  direction:ltr; unicode-bidi:isolate; text-align:right;
  font-size:clamp(15px,4.6vw,18px); letter-spacing:.02em;
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
.field-warn{
  margin-top:8px; padding:7px 10px; border-radius:9px;
  background:var(--warn-soft); color:var(--warn); font-size:12.5px; font-weight:600;
}

.copy{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:6px 12px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand); border:1px solid transparent;
  font-size:13px; font-weight:700; line-height:1.4;
  transition:background .18s, color .18s;
}
.copy .i-done{display:none}
.field.done .copy{background:var(--brand); color:var(--surface)}
.field.done .copy .i-copy{display:none}
.field.done .copy .i-done{display:block}

/* ملاحظة قصيرة أسفل حقول البطاقة (مثل طريقة التحويل من المحافظ) — نص فقط، لا يُنسخ */
.card-note{
  margin:0; padding:10px 16px 12px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.7; color:var(--ink-2); background:var(--sunk);
}

/* ---------- أزرار أسفل البطاقة ---------- */
.card-actions{display:flex; border-top:1px solid var(--line)}
.btn{
  flex:1; min-height:48px; padding:10px 8px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:14px; font-weight:700; color:var(--brand-2);
  transition:background .18s;
  -webkit-tap-highlight-color:transparent;
}
.btn + .btn{border-inline-start:1px solid var(--line)}
.btn:active{background:var(--sunk)}
.btn.done{background:var(--brand-soft); color:var(--brand)}

/* ---------- واتساب ---------- */
.wa{padding:14px 14px 0}
.wa-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:12px 16px; border-radius:13px;
  background:var(--wa); color:#fff; text-decoration:none;
  font-size:18px; font-weight:800;
  transition:filter .15s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.wa-btn:hover{filter:brightness(1.07)}
.wa-btn:active{transform:scale(.985)}
.wa .field{padding-inline:4px}

/* زر الموقع بلون الهوية تحت زر واتساب مباشرة: طريقتا الوصول إلى المحل متجاورتان */
.map-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; margin-top:10px; padding:11px 16px; border-radius:13px;
  background:linear-gradient(135deg, var(--g1), var(--g2)); color:#fff; text-decoration:none;
  font-size:16.5px; font-weight:800;
  transition:filter .15s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.map-btn:hover{filter:brightness(1.1)}
.map-btn:active{transform:scale(.985)}

/* ---------- باركود الصفحة ---------- */
.qr summary{
  padding:14px 16px; font-size:14.5px; font-weight:700; color:var(--ink-2);
  cursor:pointer; list-style-position:inside;
}
.qr-body{padding:4px 16px 18px; text-align:center}
/* الباركود يبقى أسود على أبيض حتى في الوضع الداكن وإلا تعذّر مسحه */
.qr-body img{display:block; margin:0 auto; background:#fff; padding:10px; border-radius:12px; width:220px; height:220px}

.foot{margin:2px 6px 0; text-align:center; font-size:13px; color:var(--ink-3); line-height:1.8}

/* ---------- الإشعار ---------- */
.toast{
  position:fixed; left:0; right:0; bottom:calc(22px + env(safe-area-inset-bottom));
  margin:0 auto; width:max-content; max-width:calc(100% - 32px);
  background:var(--ink); color:var(--bg);
  padding:10px 18px; border-radius:999px;
  font-size:14px; font-weight:700; text-align:center;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.45);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:none}

/* حقل مساعد للنسخ في المتصفحات التي لا تدعم Clipboard API؛ 16px تمنع تكبير سفاري للصفحة */
.clip-helper{position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; font-size:16px; border:0; padding:0}

:focus-visible{outline:3px solid var(--ring); outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}