/* شاشات التحقق من الوجه — على الحاسوب وعلى صفحة الجوال معاً. */

/* ---- رمز الاستجابة السريعة ---- */
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin:26px 0 8px;text-align:center}
.qr-image{border-radius:16px;background:#fff;padding:12px;box-shadow:0 8px 28px rgba(15,23,42,.12);
  width:240px;height:240px;image-rendering:pixelated}
.qr-expiry{margin:0;color:var(--muted,#5f636b);font-size:14px}
.qr-hint{margin:6px 0 0;color:var(--muted,#5f636b);font-size:13px}
.qr-link{display:inline-block;direction:ltr;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;background:rgba(15,23,42,.05);border-radius:8px;padding:8px 12px;
  max-width:100%;overflow-wrap:anywhere;color:#334155}

/* ---- مسرح الكاميرا ---- */
.liveness{display:flex;flex-direction:column;align-items:center;gap:14px;margin:20px 0}
.liveness-stage{position:relative;width:min(340px,86vw);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:#0f172a;box-shadow:0 10px 40px rgba(15,23,42,.18)}
.liveness-video{width:100%;height:100%;object-fit:cover;
  /* معكوسة كالمرآة للعرض فقط — المرسل إلى الخادم غير معكوس. */
  transform:scaleX(-1)}
.liveness-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:4px solid rgba(148,163,184,.55);transition:border-color .25s ease,box-shadow .25s ease}
.liveness-ring.good{border-color:#16a34a;box-shadow:inset 0 0 0 6px rgba(22,163,74,.12)}
.liveness-ring.bad{border-color:#dc2626;box-shadow:inset 0 0 0 6px rgba(220,38,38,.10)}

.liveness-instruction{margin:0;font-size:20px;font-weight:700;text-align:center;min-height:1.4em}
.liveness-hint{margin:0;color:var(--muted,#5f636b);font-size:14px;text-align:center;min-height:1.3em}

.liveness-progress{display:flex;gap:8px;justify-content:center;margin-top:2px}
.liveness-dot{width:10px;height:10px;border-radius:50%;background:rgba(148,163,184,.45);transition:background .2s,transform .2s}
.liveness-dot.active{background:#2563eb;transform:scale(1.35)}
.liveness-dot.done{background:#16a34a}

/* ---- صفحة الجوال المستقلة ---- */
.handoff-body{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(160deg,#f8fafc,#eef2f7)}
.handoff-main{width:100%;max-width:460px}
.handoff-card{background:#fff;border-radius:22px;padding:28px 22px 24px;text-align:center;
  box-shadow:0 18px 50px rgba(15,23,42,.12)}
.handoff-card h1{font-size:22px;margin:14px 0 8px}
.handoff-card p{margin:0 0 12px;color:var(--muted,#5f636b);line-height:1.7;font-size:15px}
.handoff-icon{font-size:44px;line-height:1}
.handoff-icon.success{color:#16a34a}
.handoff-list{list-style:none;padding:0;margin:6px 0 18px;text-align:right}
.handoff-list li{padding:8px 0 8px 0;border-bottom:1px solid rgba(15,23,42,.06);font-size:14px;color:#334155}
.handoff-list li:last-child{border-bottom:0}
.handoff-list li::before{content:"✓";color:#16a34a;margin-inline-end:8px;font-weight:700}
.handoff-note{font-size:12.5px;color:#94a3b8;margin-top:14px}
.handoff-back{background:rgba(22,163,74,.08);color:#166534;border-radius:12px;padding:12px 14px;
  font-size:14px;margin:6px 0 4px}
.wide{width:100%}

/* الشاشات الضيقة: الدائرة تأخذ العرض المتاح والتعليمة تبقى مقروءة. */
@media (max-width:420px){
  .liveness-stage{width:min(300px,82vw)}
  .liveness-instruction{font-size:18px}
  .qr-image{width:200px;height:200px}
}

/* ---- منتقي التاريخ ---- */
.dp-wrap{position:relative;display:block}
.dp-wrap .control{padding-inline-start:44px}
.dp-button{position:absolute;inset-inline-start:8px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;font-size:19px;line-height:1;padding:6px;border-radius:8px;
  color:#5f636b}
.dp-button:hover{background:rgba(15,23,42,.06)}
.dp-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}

.dp-pop{position:absolute;z-index:60;top:calc(100% + 6px);inset-inline-start:0;
  background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:14px;
  box-shadow:0 16px 44px rgba(15,23,42,.18);padding:12px;width:296px}
.dp-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.dp-nav{background:none;border:1px solid rgba(15,23,42,.12);border-radius:8px;cursor:pointer;
  width:30px;height:30px;font-size:17px;line-height:1;color:#334155;flex:none}
.dp-nav:hover{background:rgba(15,23,42,.05)}
.dp-month,.dp-year{flex:1;min-width:0;padding:6px 8px;border-radius:8px;font-family:inherit;
  border:1px solid rgba(15,23,42,.12);background:#fff;font-size:14px;color:#0f172a}
.dp-year{max-width:92px;direction:ltr;text-align:center}

.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-wd{text-align:center;font-size:11px;color:#94a3b8;padding:4px 0}
.dp-day{border:0;background:none;border-radius:8px;cursor:pointer;padding:7px 0;font-family:inherit;
  font-size:13.5px;color:#0f172a}
.dp-day:hover:not(:disabled):not(.empty){background:rgba(37,99,235,.10)}
.dp-day:disabled{color:#cbd5e1;cursor:not-allowed}
.dp-day.empty{pointer-events:none}
.dp-day.selected{background:#2563eb;color:#fff;font-weight:700}
.dp-foot{display:flex;justify-content:flex-end;margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(15,23,42,.08)}
.dp-clear{background:none;border:0;color:#5f636b;cursor:pointer;font-family:inherit;font-size:13px;
  padding:4px 8px;border-radius:6px}
.dp-clear:hover{background:rgba(15,23,42,.06)}

/* الشاشات الضيقة: التقويم يملأ العرض المتاح بدل أن يخرج عن الحافة. */
@media (max-width:420px){
  .dp-pop{width:min(300px,92vw);inset-inline-start:auto;inset-inline-end:0}
}

/* شارة مطابقة الاسم: تظهر أعلى شاشة تاريخ الميلاد فور وصول نتيجة المقارنة. */
.name-check{animation:name-check-in .35s ease-out}
@keyframes name-check-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.status-banner.success{background:rgba(22,163,74,.09);border:1px solid rgba(22,163,74,.28)}
.status-banner.success strong{color:#166534}

/* سطر الانتقال بعد التأكيد. */
.confirm-next{display:flex;align-items:center;gap:10px;justify-content:center;margin:18px 0 4px;
  color:var(--muted,#5f636b);font-size:14px}
.confirm-spinner{width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid rgba(22,163,74,.25);border-top-color:#16a34a;animation:confirm-spin .8s linear infinite}
@keyframes confirm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.confirm-spinner{animation:none}}

/* ---- شريط حالة التحقق (أفقي) ---- */
.vstrip{display:flex;align-items:flex-start;list-style:none;margin:0 0 20px;padding:14px 10px;
  gap:2px;background:rgba(15,23,42,.035);border:1px solid rgba(15,23,42,.07);border-radius:14px;
  overflow-x:auto;scrollbar-width:none}
.vstrip::-webkit-scrollbar{display:none}
.vstrip-item{flex:1 1 0;min-width:96px;display:flex;flex-direction:column;align-items:center;
  gap:6px;text-align:center;position:relative;padding:0 4px}
/* الخط الواصل بين الخطوات: يُرسم من العلامة إلى التي تليها، ولا يخرج عن الطرفين. */
.vstrip-item::before{content:"";position:absolute;top:13px;height:2px;background:rgba(15,23,42,.12);
  inset-inline-start:calc(-50% + 14px);width:calc(100% - 28px)}
.vstrip-item:first-child::before{display:none}
.vstrip-item.done::before,.vstrip-item.warn::before{background:#16a34a}

.vstrip-mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:13px;font-weight:700;position:relative;z-index:1;
  background:#fff;border:2px solid rgba(15,23,42,.16);color:#94a3b8;transition:all .25s ease}
.vstrip-label{font-size:11.5px;line-height:1.45;color:#94a3b8;transition:color .25s ease}

.vstrip-item.done .vstrip-mark{background:#16a34a;border-color:#16a34a;color:#fff}
.vstrip-item.done .vstrip-label{color:#166534}
.vstrip-item.warn .vstrip-mark{background:#f59e0b;border-color:#f59e0b;color:#fff}
.vstrip-item.warn .vstrip-label{color:#92400e}
.vstrip-item.active .vstrip-mark{background:#2563eb;border-color:#2563eb;color:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.vstrip-item.active .vstrip-label{color:#1e3a8a;font-weight:700}

/* الشاشات الضيقة: الشريط يتمرّر أفقياً بدل أن ينضغط حتى لا يُقرأ. */
@media (max-width:560px){
  .vstrip{padding:12px 8px}
  .vstrip-item{min-width:84px}
  .vstrip-label{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .vstrip-mark,.vstrip-label{transition:none}
}

/* ---- زرّ الإكمال التلقائي ---- */
.auto-continue{position:relative;overflow:hidden;isolation:isolate}
.auto-continue-text{position:relative;z-index:1}
/* الشريط يمتلئ من جهة البداية في الاتجاهين: transform-origin منطقي لا حرفي،
   فلا يمتلئ من اليسار في صفحة عربية. */
.auto-continue-fill{position:absolute;inset:0;z-index:0;background:rgba(255,255,255,.28);
  transform:scaleX(0);transform-origin:right center;
  animation-name:auto-continue-fill;animation-timing-function:linear;animation-fill-mode:forwards}
html[dir="ltr"] .auto-continue-fill{transform-origin:left center}
@keyframes auto-continue-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.auto-continue:disabled{opacity:.75;cursor:default}
.auto-continue:hover .auto-continue-fill{background:rgba(255,255,255,.36)}

/* من يفضّل تقليل الحركة يحصل على الانتقال نفسه بلا شريط متحرّك — التوقيت في
   JavaScript لا في CSS، فإخفاء الحركة لا يُعطّل الإكمال. */
@media (prefers-reduced-motion:reduce){
  .auto-continue-fill{animation:none;transform:scaleX(1);background:rgba(255,255,255,.18)}
}