/* =========================================================
   لوحة البصمة (WebAuthn) — تصميم يعمل أولاً على الجوال
   تستخدم ألوان الصفحة (palm / gold / sand) مع قيم احتياطية
   ========================================================= */
.wa-panel{
  --g7:var(--palm-700,#146356); --g9:var(--palm-900,#0b3d2e); --g6:var(--palm-600,#1c7a63);
  --au:var(--gold-500,#c9982e); --au7:var(--gold-700,#a97a1f);
  --sand1:var(--sand-100,#f3ecdb); --sand2:var(--sand-200,#e9dfc6); --sand0:var(--sand-50,#faf6ec);
  --ink:var(--ink-900,#182420); --muted:var(--ink-500,#5b6b62);
  --ok:#2f9e76; --err:#c0392b;
  position:relative; margin:0 0 1.4rem; padding:24px 18px calc(20px + env(safe-area-inset-bottom,0px));
  border-radius:24px; text-align:center; scroll-margin:16px;
  background:linear-gradient(180deg,#fff,var(--sand0));
  border:1px solid var(--sand2); box-shadow:var(--shadow-md,0 10px 30px rgba(11,61,46,.12));
}
.wa-panel [hidden]{display:none !important}

/* ---- الدائرة الكبيرة (زر البصمة) ---- */
.wa-orb{
  position:relative; width:116px; height:116px; margin:0 auto 14px; border:0; border-radius:50%;
  display:grid; place-items:center; color:#fff; cursor:pointer;
  background:radial-gradient(circle at 30% 25%,var(--g6),var(--g9));
  box-shadow:0 14px 34px rgba(11,61,46,.28);
  -webkit-tap-highlight-color:transparent; transition:transform .15s,background .3s;
}
.wa-orb:active{transform:scale(.95)}
.wa-orb::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--au);opacity:0}
.wa-orb-icon{width:56px;height:56px;display:grid;place-items:center}
.wa-orb-icon svg{width:100%;height:100%}
.wa-spin{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;animation:wa-rot .8s linear infinite}
@keyframes wa-rot{to{transform:rotate(360deg)}}
@keyframes wa-ring{0%{transform:scale(.92);opacity:.6}100%{transform:scale(1.38);opacity:0}}

.wa-panel[data-state="ready"] .wa-orb::before,
.wa-panel[data-state="register"] .wa-orb::before,
.wa-panel[data-state="confirm"] .wa-orb::before{animation:wa-ring 1.8s ease-out infinite}
.wa-panel[data-state="ready"][data-mode="checkout"] .wa-orb{background:radial-gradient(circle at 30% 25%,var(--au),var(--au7))}
.wa-panel[data-state="success"] .wa-orb{background:radial-gradient(circle at 30% 25%,#45b88c,#1f7a56)}
.wa-panel[data-state="error"] .wa-orb{background:radial-gradient(circle at 30% 25%,#e2574a,#9c2a1f)}
.wa-panel[data-state="info"] .wa-orb{background:radial-gradient(circle at 30% 25%,#9aa5a0,#6d7873);cursor:default}
.wa-panel[data-state="loading"] .wa-orb,
.wa-panel[data-state="busy"] .wa-orb{pointer-events:none}

/* ---- النصوص ---- */
.wa-title{font-family:var(--font-display,'Cairo','Tajawal',sans-serif);font-size:1.3rem;font-weight:800;color:var(--g9);margin:0 0 4px}
.wa-sub{color:var(--muted);font-size:.95rem;line-height:1.7;margin:0 0 16px;min-height:1.2em}
.wa-sub.wa-warn{color:var(--err);font-weight:700}

/* ---- خطوات التنفيذ ---- */
.wa-steps{list-style:none;display:flex;gap:8px;justify-content:center;padding:0;margin:0 0 16px}
.wa-steps li{flex:1;max-width:112px;font-size:.76rem;font-weight:700;padding:9px 4px;border-radius:12px;
  background:var(--sand1);color:var(--muted);border:1px solid var(--sand2);transition:all .25s}
.wa-steps li.is-active{background:#fff;color:var(--g7);border-color:var(--g7);box-shadow:0 0 0 3px rgba(20,99,86,.12)}
.wa-steps li.is-done{background:var(--success-bg,#e7f5ef);color:var(--ok);border-color:transparent}
.wa-steps li.is-done::before{content:"✓ "}
.wa-panel[data-flow="register"] .wa-steps{display:none}

/* ---- إدخال رمز التفعيل ---- */
.wa-code{text-align:right;margin:0 0 16px}
.wa-code label{display:block;font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:8px}
.wa-code input{width:100%;padding:14px;border:2px solid var(--sand2);border-radius:16px;background:#fff;color:var(--ink);
  font-family:var(--font-mono,ui-monospace,monospace);font-size:1.7rem;letter-spacing:.35em;text-align:center}
.wa-code input:focus{outline:none;border-color:var(--g7);box-shadow:0 0 0 4px rgba(20,99,86,.12)}
.wa-help{margin:10px 0 0;padding:0 18px 0 0;font-size:.82rem;color:var(--muted);line-height:1.9}

/* ---- الزر الرئيسي ---- */
.wa-cta{width:100%;min-height:58px;padding:0 20px;border:0;border-radius:16px;color:#fff;font:inherit;font-size:1.08rem;font-weight:800;
  background:linear-gradient(135deg,var(--g7),var(--g9));box-shadow:0 10px 24px rgba(11,61,46,.28);
  -webkit-tap-highlight-color:transparent;transition:transform .15s,opacity .2s}
.wa-cta:active{transform:scale(.98)}
.wa-cta:disabled{opacity:.5}
.wa-panel[data-state="ready"][data-mode="checkout"] .wa-cta{background:linear-gradient(135deg,var(--au),var(--au7));box-shadow:0 10px 24px rgba(201,152,46,.3)}

/* ---- الخطأ ---- */
.wa-error{margin-top:4px;padding:16px 14px;border-radius:16px;background:var(--error-bg,#fbeae8);color:var(--err)}
.wa-error p{margin:0 0 14px;font-weight:700;line-height:1.8;white-space:pre-line}
.wa-retry{min-height:50px;padding:0 26px;border-radius:14px;border:2px solid var(--err);background:#fff;color:var(--err);font:inherit;font-weight:800}
.wa-error details{margin-top:14px;text-align:right;font-size:.8rem;color:var(--muted)}
.wa-error summary{cursor:pointer;font-weight:700}
.wa-error pre{direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-all;margin:8px 0 0;padding:10px;border-radius:10px;background:#fff;color:#334539;font-size:.74rem}

/* ---- إخفاء الواجهة القديمة عندما تعمل اللوحة (يبقى زر طلب الإجازة) ---- */
body.wa-on #fingerprint-section,
body.wa-on #checkin-btn,
body.wa-on #checkout-btn,
body.wa-on #register-btn{display:none !important}

@media (min-width:640px){ .wa-panel{padding:28px 28px 24px} .wa-orb{width:128px;height:128px} }
@media (prefers-reduced-motion:reduce){ .wa-orb::before,.wa-spin{animation:none !important} }