/* ============================================================
   result-new.css — نظرة: نظام عرض النتائج الجديد
   الإصدار: 1.0 — مايو 2026
   ⚠️ لا تعدّل هذا الملف مباشرة — راجع NAZRAH_AI_TEAM_ROLES أولاً
   ============================================================ */

/* ── متغيرات النتائج ──
   تعمل مع كلا الثيمين (formal / dark)
   --nz-bg       : خلفية الكروت
   --nz-border   : لون الحدود
   --nz-t1       : نص رئيسي
   --nz-t2       : نص ثانوي
   --nz-t3       : نص خافت
   --nz-green    : الأخضر الرئيسي
   --nz-gold     : الذهبي
   --nz-divider  : فاصل الكروت الثلاثة
*/
[data-theme="formal"] {
  --nz-page-bg  : #f6f3ec;
  --nz-bg       : #fffefa;
  --nz-border   : #e4ddcf;
  --nz-border-sub: #f0ece3;
  --nz-t1       : #1a221d;
  --nz-t2       : #3d4942;
  --nz-t3       : #6f7a72;
  --nz-green    : #1f4d3c;
  --nz-gold     : #8b6a2a;
  --nz-divider  : #e4ddcf;
}

/* ⚠️ الثيم الداكن: زر الثيم يضبط data-theme إلى اسم البنك (ahli/rajhi…)
   أو يزيله تماماً عند switchBank — وليس "dark". لذا نطابق بنفس اصطلاح
   style.css: "أي شيء ليس formal = داكن". الاصطلاح القديم
   ([data-theme="dark"] / :not([data-theme])) كان لا يطابق اسم البنك
   فتُفقد متغيّرات --nz-* في الداكن. لا تُعِد الاصطلاح القديم. */
body:not([data-theme="formal"]) {
  --nz-page-bg  : #131816;
  --nz-bg       : #181f1c;
  --nz-border   : #2a322e;
  --nz-border-sub: #1e2723;
  --nz-t1       : #ede7d6;
  --nz-t2       : #c8c6bb;
  --nz-t3       : #5e6a62;
  --nz-green    : #6ec79f;
  --nz-gold     : #d8b97f;
  --nz-divider  : #2a322e;
}

/* ============================================================
   1. شاشة الانتظار — خطوات الحساب
   ============================================================ */

#nzStepsWrap {
  display: none;
  flex-direction: column;
  background: var(--nz-bg);
  border: 1px solid var(--nz-border);
  border-radius: 10px;
  padding: 20px;
}

#nzStepsWrap.active {
  display: flex;
}

.nz-step-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  position: relative;
}

.nz-step-row:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 17px;
  top: 36px;
  bottom: -10px;
  width: 1px;
  background: var(--nz-border);
}

.nz-step-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--nz-border);
  background: var(--nz-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .3s ease, border-color .3s ease;
  position: relative;
  z-index: 1;
}

.nz-step-icon.done {
  background: var(--nz-green);
  border-color: var(--nz-green);
}

.nz-step-icon.active {
  border-color: var(--nz-green);
  animation: nz-pulse 1.4s ease infinite;
}

@keyframes nz-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,77,60,.25); }
  70%  { box-shadow: 0 0 0 6px rgba(31,77,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,77,60,0); }
}

body:not([data-theme="formal"]) .nz-step-icon.active {
  animation: nz-pulse-dark 1.4s ease infinite;
}

@keyframes nz-pulse-dark {
  0%   { box-shadow: 0 0 0 0 rgba(110,199,159,.2); }
  70%  { box-shadow: 0 0 0 6px rgba(110,199,159,0); }
  100% { box-shadow: 0 0 0 0 rgba(110,199,159,0); }
}

.nz-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nz-border);
  transition: background .3s ease;
}

.nz-step-icon.active .nz-step-dot { background: var(--nz-green); }
.nz-step-icon.done   .nz-step-dot { display: none; }

.nz-step-check { display: none; color: #fffefa; }

body:not([data-theme="formal"]) .nz-step-check { color: #0d1a13; }

.nz-step-icon.done .nz-step-check { display: block; }

.nz-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nz-border);
  transition: color .3s ease;
}

[data-theme="formal"] .nz-step-title       { color: #c8cfc9; }
body:not([data-theme="formal"]) .nz-step-title { color: #3a4440; }

.nz-step-title.active { color: var(--nz-green); }
.nz-step-title.done   { color: var(--nz-t2); }

/* ============================================================
   2. كروت النتائج — الحاوي
   ============================================================ */

#nzResWrap {
  display: none;
  flex-direction: column;
  gap: 14px;
}

#nzResWrap.active {
  display: flex;
}

/* أنيميشن الظهور — من الأعلى للأسفل، هادئ وثقيل */
.nz-block {
  opacity: 0;
  transform: translateY(-18px);
  transition:
    opacity  .65s cubic-bezier(.22,.61,.36,1),
    transform .65s cubic-bezier(.22,.61,.36,1);
}

.nz-block.show {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   3. الكرت الرئيسي — Hero
   ============================================================ */

.nz-hero {
  background: var(--nz-bg);
  border: 1px solid var(--nz-border);
  border-radius: 10px;
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

/* الشريط الأخضر على اليمين */
.nz-hero::before {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--nz-green), color-mix(in srgb, var(--nz-green) 70%, transparent));
}

/* يمين — البنك */
.nz-hero-bank {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 120px;
  border-left: 1px solid var(--nz-border);
  padding-left: 24px;
}

.nz-bank-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--nz-green);
}

.nz-bank-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nz-detail-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nz-detail-lbl {
  font-size: 9px;
  color: var(--nz-t3);
  letter-spacing: .5px;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
}

.nz-detail-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--nz-t1);
}

.nz-detail-val.accent { color: var(--nz-green); }

/* يسار — الرقم */
.nz-hero-amount {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  padding-left: 8px;
  /* ⚠️ container-type ضروري لعمل cqw على .nz-hero-number —
     يجعل هذه الحاوية مرجعاً للقياس بدل الشاشة كاملها.
     بدونه: cqw = vw (عرض الشاشة) وليس عرض الكرت. لا تحذفه. */
  container-type: inline-size;
  min-width: 0;
}

.nz-hero-labels {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-end;
}

.nz-hero-lbl-main {
  font-size: 13px;
  font-weight: 600;
  color: var(--nz-t3);
}

.nz-hero-sep { color: var(--nz-border); }

.nz-hero-lbl-product {
  font-size: 13px;
  font-weight: 600;
  color: var(--nz-t1);
}

.nz-hero-number-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.nz-hero-number {
  font-family: 'IBM Plex Mono', monospace;
  /* ⚠️ min(72px, 14cqw) — الحل الجذري لتقطع الرقم:
     14cqw = 14% من عرض .nz-hero-amount (الحاوية المباشرة لا الشاشة).
     الرقم يصغر بالقدر اللازم فقط ليناسب المساحة في كل سيناريو.
     يعتمد على container-type:inline-size في .nz-hero-amount — لا تحذفه.
     لا تستبدله بـ clamp أو vw — كلاهما يعتمد على الشاشة لا الكرت. */
  font-size: min(72px, 14cqw);
  font-weight: 500;
  color: var(--nz-green);
  line-height: .95;
  letter-spacing: -2px;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* الهللات (الكسور العشرية) — أصغر من الرقم الكامل لتخفيف التداخل البصري */
.nz-hero-number .nz-cents {
  font-size: 0.5em;
  opacity: .7;
  letter-spacing: 0;
}

.nz-hero-currency {
  font-size: 11px;
  color: var(--nz-t3);
  padding-bottom: 8px;
}

.nz-hero-rule {
  width: 40px;
  height: 2px;
  background: var(--nz-gold);
  align-self: flex-end;
}

/* ============================================================
   4. الكروت الثلاثة
   ============================================================ */

.nz-cards-row {
  /* ⚠️ flex + flex-wrap + flex: 1 1 200px — الحل النظيف للتوزيع التلقائي:
     كل كرت يبدأ من 200px ويتمدد. عند الضيق يكسر لصفين.
     4 كروت على شاشة واسعة = صف واحد.
     4 كروت على شاشة ضيقة = 2+2 تلقائياً (200px × 2 = 400px حد الكسر).
     لا grid، لا @container، لا minmax — flex يحل المسألة وحده. */
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--nz-divider);
  border-radius: 6px;
  overflow: hidden;
}

.nz-stat-card {
  flex: 1 1 200px;
  background: var(--nz-bg);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.nz-stat-card.center {
  align-items: center;
}

.nz-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nz-card-head svg {
  color: var(--nz-t3);
  flex-shrink: 0;
}

.nz-card-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--nz-t2);
  /* ⚠️ nowrap — يمنع "القرض الشخصي" من الانكسار لسطرين عند ضيق الكرت */
  white-space: nowrap;
}

.nz-card-val-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  /* ⚠️ nowrap — يمنع "ر.س" من النزول لسطر ثانٍ عند الضيق */
  flex-wrap: nowrap;
  white-space: nowrap;
}

.nz-card-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--nz-t1);
  line-height: 1;
}

.nz-card-unit {
  font-size: 10px;
  color: var(--nz-t3);
  font-weight: 400;
}

.nz-card-rule {
  width: 28px;
  height: 2px;
  background: var(--nz-gold);
}

.nz-card-sub {
  font-size: 10px;
  color: var(--nz-t3);
  display: flex;
  align-items: center;
  gap: 5px;
  /* ⚠️ row-gap بدل flex-wrap عشوائي — الكسر يحدث بين المعلومتين لا داخل إحداهما.
     كل span داخل nz-card-sub يحمل white-space:nowrap لحماية محتواه. */
  flex-wrap: wrap;
  row-gap: 2px;
}

.nz-stat-card.center .nz-card-sub {
  justify-content: center;
}

.nz-card-sub b {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--nz-t2);
  font-weight: 600;
  font-size: 10px;
}

/* ============================================================
   5. الأقساط
   ============================================================ */

.nz-phases {
  display: flex;
  flex-direction: column;
  background: var(--nz-bg);
  border: 1px solid var(--nz-border);
  border-radius: 8px;
  overflow: hidden;
}

.nz-phase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid var(--nz-border-sub);
  position: relative;
}

.nz-phase-row:last-child {
  border-bottom: none;
}

/* الشريط الجانبي — 2px مقطّع */
.nz-phase-row::before {
  content: '';
  position: absolute;
  right: 0;
  top: 20%; bottom: 20%;
  width: 2px;
  border-radius: 0;
}

.nz-phase-row.pre::before  { background: var(--nz-green); }
.nz-phase-row.post::before { background: var(--nz-gold); }

.nz-phase-left {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px;
  /* ⚠️ nowrap — يمنع "قبل التقاعد · 240 شهر" من الانكسار في المنتصف */
  flex-shrink: 0;
  white-space: nowrap;
}

.nz-phase-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nz-t1);
}

.nz-phase-sep {
  color: var(--nz-border);
  font-size: 11px;
  margin: 0 2px;
}

.nz-phase-dur {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--nz-t3);
}

.nz-phase-right {
  display: flex;
  align-items: baseline;
  gap: 3px;
  /* ⚠️ nowrap — يمنع "ر.س / شهر" من الانفصال عن الرقم */
  white-space: nowrap;
  flex-shrink: 0;
}

.nz-phase-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--nz-t1);
}

.nz-phase-unit {
  font-size: 10px;
  color: var(--nz-t3);
}

/* ============================================================
   6. إخفاء عناصر النظام القديم
   ============================================================ */

/* res-card القديم — يُخفى لأن النتائج تُعرض في nzResWrap */
#resCard {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* إخفاء الكروت القديمة داخل resCard */
#resCard .res-hero,
#resCard .stats-grid,
#resCard .res-gauge-wrap,
#resCard #perStatVal,
#resCard #supStatVal,
#resCard #etizazStat {
  display: none !important;
}

/* إخفاء resTagMain و resTagSub القديمين */
#resTagMain,
#resTagSub {
  display: none !important;
}

/* إخفاء res-support القديم */
#resSupportCard {
  display: none !important;
}

/* إخفاء phases-wrap القديم */
#resContent .phases-wrap {
  display: none !important;
}

/* إخفاء الخط الأخضر الجانبي من res-card القديم */
#resCard::before,
#resCard::after {
  display: none !important;
}

/* ============================================================
   7. إخفاء الأزرار — تُظهر فقط من nazrah-ui-new.js بالتدريج
   ============================================================ */
.action-btns-row,
#whatsappBtn,
#detToggleBtn {
  opacity: 0;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   8. مكوّنات التمويل على الجوال — شريط النسب (v44)
   جوال فقط (≤768px). الديسكتوب يبقى على .nz-cards-row.
   ============================================================ */
@media (max-width: 768px) {
  /* أخفِ كروت الديسكتوب لو ظهرت (احتياط) */
  .nz-cards-row { /* تبقى للديسكتوب — لا شيء هنا */ }

  .nz-mob-components {
    background: var(--nz-bg);
    border: 1px solid var(--nz-border);
    border-radius: 8px;
    padding: 14px;
  }
  .nz-mob-comp-title {
    font-size: 11px;
    color: var(--nz-t3);
    margin-bottom: 10px;
  }
  .nz-mob-comp-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 13px;
    gap: 1px;
  }
  .nz-mob-comp-bar > div { height: 100%; }
  .nz-mob-comp-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .nz-mob-comp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nz-mob-comp-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--nz-t2);
  }
  .nz-mob-comp-dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .nz-mob-comp-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--nz-t1);
  }
  .nz-mob-comp-tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--nz-t3);
  }
  .nz-mob-comp-tag.accent {
    color: var(--nz-gold);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .nz-mob-comp-etizaz {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--nz-border-sub);
  }
}