/* دليل الهجرة إلى أستراليا — نظام التصميم المشترك.
   الألوان مأخوذة من هوية الدليل نفسه (كحلي + ذهبي) ليبدو الموقع امتداداً
   للمنتج لا شيئاً منفصلاً عنه. */

:root {
  --navy: #2A2A5E;
  --navy-deep: #1E1E47;
  --navy-soft: #3B3B78;
  --ink: #1B1B33;
  --body: #55566B;
  --muted: #7C7D92;
  --line: #E3E3EC;
  --line-soft: #EDEDF3;
  --paper: #F6F6FA;
  --surface: #FFFFFF;

  --gold: #E0900F;
  --gold-bright: #F5A623;
  --gold-soft: #FDF2DC;
  /* الذهبي اللامع على أبيض = 2.6:1 وهو راسب للنص. هذه درجته
     للنصوص فوق الخلفيات الفاتحة: 5.4:1 وتبقى ذهبية. */
  --gold-ink: #965D00;

  --ok: #0E8F5D;
  --ok-soft: #E3F5EC;
  --warn: #B26A00;
  --danger: #C33A48;
  --danger-soft: #FBE4E7;

  --radius: 16px;
  --radius-sm: 11px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.75;
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

.wrap { width: min(100%, 1060px); margin-inline: auto; padding: 0 20px; }
.wrap-narrow { width: min(100%, 760px); margin-inline: auto; padding: 0 20px; }
main { flex: 1 0 auto; }

/* رقم/بريد لاتيني داخل نص عربي */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- الترويسة ---------- */
.site-header { padding: 20px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 800; font-size: 16px; color: var(--navy); text-decoration: none;
}
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: block; flex-shrink: 0; }
.brand small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
/* الاسم لاتيني والوصف عربي في عمود واحد. محاذاة الاسم يساراً كانت تفصله
   عن الوصف الأعرض تحته، فيبدو الشعار مائلاً. كلاهما يحاذي اليمين الآن،
   مع عزل الاتجاه للاتيني وحده حتى لا تنقلب علامات الترقيم حوله. */
.brand-name { direction: rtl; text-align: right; unicode-bidi: isolate; }
.brand-name small { direction: rtl; text-align: right; }
.header-link { font-size: 14px; font-weight: 600; color: var(--gold-ink); text-decoration: none; }
.header-link:hover { color: var(--navy); }

/* .steps و .selected تعرّفان display بفئة، وهي أقوى من [hidden]
   فيبقى العنصر ظاهراً رغم إخفائه من JS. */
[hidden] { display: none !important; }

/* ---------- النصوص ---------- */
h1 { margin: 0 0 14px; font-size: clamp(26px, 4.6vw, 40px); line-height: 1.3; letter-spacing: 0; font-weight: 800; }
h2 { margin: 0 0 10px; font-size: 20px; font-weight: 800; }
h3 { margin: 26px 0 8px; font-size: 16px; font-weight: 700; }
.lede { margin: 0; font-size: clamp(15.5px, 2vw, 17.5px); color: var(--body); }
.eyebrow {
  display: inline-block; padding: 5px 13px; border-radius: 99px;
  background: var(--gold-soft); color: var(--gold);
  font-size: 12.5px; font-weight: 700; margin-bottom: 16px;
}
.gold { color: var(--gold-ink); }

/* ---------- البطاقات ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.card.featured { border-color: #E6C48A; box-shadow: 0 16px 44px rgba(224, 144, 15, .10); }

/* ---------- الأزرار ---------- */
.btn {
  display: inline-block; width: 100%; padding: 14px 20px; border: 0;
  border-radius: var(--radius-sm); font-size: 15.5px; font-weight: 700;
  font-family: inherit; text-align: center; text-decoration: none;
  cursor: pointer; transition: background .15s, transform .1s;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); }
/* الأبيض على الذهبي = 2.6:1 وهو راسب. الكحلي عليه 7.8:1 ويبقى الزر ذهبياً. */
.btn-gold { background: var(--gold-bright); color: var(--navy-deep); }
.btn-gold:hover { background: #FFB43F; }
.btn-ghost { background: #EFEFF5; color: var(--navy); }
.btn-ghost:hover { background: #E4E4EE; }
.btn:active { transform: scale(.99); }
/* حد أدنى للمس على الجوال (‏Apple HIG 44pt / Material 48dp) */
.btn { min-height: 48px; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn + .btn { margin-top: 10px; }

.link-btn {
  background: none; border: 0; padding: 0; color: var(--gold-ink);
  font-size: 13.5px; font-family: inherit; cursor: pointer; text-decoration: underline;
}
a.plain { color: var(--gold-ink); }

/* حلقة تركيز موحّدة — لا تُزال أبداً، فهي المسار الوحيد لمستخدم لوحة المفاتيح */
:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- النماذج ---------- */
.field { margin-bottom: 16px; }
label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.hint { font-weight: 400; color: var(--body); font-size: 13px; }
input {
  width: 100%; padding: 12px 14px; border: 1px solid #D2D3DF;
  border-radius: 10px; font-size: 16px; font-family: inherit;
  color: var(--ink); background: var(--surface);
}
input:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: transparent; }
input.ltr-input { direction: ltr; text-align: left; }

.notice {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 9px;
  font-size: 14px; border: 1px solid transparent; line-height: 1.7;
}
.notice[hidden] { display: none; }
.notice-error { background: var(--danger-soft); border-color: #F0C2C8; color: #9E2D39; }
.notice-ok { background: var(--ok-soft); border-color: #BFE6D4; color: #0B6B46; }
.privacy { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- صفحات الحالة ---------- */
.status-page { display: grid; place-items: center; padding: 40px 20px 64px; }
.status-card {
  width: min(100%, 580px); background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 38px 32px; box-shadow: 0 20px 60px rgba(27, 27, 51, .08);
}
.badge {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 20px;
}
.badge-ok { background: var(--ok); }
.badge-warn { background: var(--warn); }
.badge-error { background: var(--danger); }
.status-card h1 { font-size: 23px; margin-bottom: 10px; }
.status-msg { margin: 0 0 24px; color: var(--body); font-size: 15px; }

dl.details { margin: 0 0 24px; border-top: 1px solid var(--line-soft); }
dl.details .row {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
dl.details dt { color: var(--muted); margin: 0; }
dl.details dd { margin: 0; font-weight: 700; text-align: left; word-break: break-word; }

.support-note {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--muted);
}

/* ---------- النصوص الطويلة والأسئلة ---------- */
.prose { padding: 10px 0 60px; }
.prose h1 { margin-bottom: 8px; }
.prose .updated { margin: 0 0 30px; color: var(--muted); font-size: 13.5px; }
.prose p, .prose li { color: var(--body); font-size: 15px; }
.prose ul { padding-inline-start: 22px; }
.prose li { margin-bottom: 8px; }
.prose h2 { margin: 32px 0 10px; font-size: 18px; color: var(--navy); }

details.faq {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 15px 18px; margin-bottom: 10px;
}
details.faq summary {
  cursor: pointer; font-weight: 700; font-size: 15px; list-style: none;
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--navy); font-size: 20px; font-weight: 400; }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { margin: 12px 0 0; font-size: 14.5px; }

/* ---------- تنبيه ---------- */
/* ملاحظة يجب أن تُقرأ، لا تحذير يوحي بخطأ.
   كانت بألوان الخطأ الأحمر فبدت كعطل في الصفحة. */
.alert {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  padding: 18px 20px; border-radius: var(--radius-sm);
  background: #FAF7EF; border: 1px solid #EADFC4;
}
/* الأيقونة والعنوان والفقرة ثلاثة عناصر في شبكة من عمودين، فبلا تثبيت
   صريح تسقط الفقرة في عمود الأيقونة (22px) وتنزل كلمةً كلمة. */
.alert::before {
  content: "i"; grid-column: 1; grid-row: 1;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold); color: #fff;
  font-size: 13px; font-weight: 700; font-style: italic;
}
.alert strong { grid-column: 2; display: block; margin-bottom: 4px; color: #6B5312; }
.alert p { grid-column: 2; margin: 0; font-size: 14.5px; color: #6E6350; }

/* ---------- التذييل ---------- */
.site-footer {
  flex-shrink: 0; margin-top: 40px; padding: 30px 0 40px;
  background: var(--navy); color: #C9CAE0; font-size: 13.5px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; }
.footer-links a { color: #E5E6F2; text-decoration: none; }
.footer-links a:hover { color: var(--gold-bright); }
.site-footer a.plain { color: var(--gold-bright); }

/* ---------- الجوال ----------
   أغلب القرّاء يفتحون الموقع من الهاتف، فهذه ليست تحسينات تجميلية:
   الهدف ألا يتجاوز أي عنصر عرض الشاشة، وأن تبقى مساحات اللمس مريحة. */
@media (max-width: 640px) {
  body { line-height: 1.7; }
  .wrap, .wrap-narrow { padding: 0 16px; }

  /* الترويسة: الشعار سطر والرابط سطر تحته */
  .site-header { padding: 14px 0; }
  .header-row { gap: 10px; }
  .brand { font-size: 14.5px; gap: 9px; }
  .brand-mark { width: 30px; height: 30px; font-size: 10px; }
  .brand small { font-size: 11px; }
  .header-link { font-size: 13px; }

  h1 { font-size: clamp(23px, 6.2vw, 30px); line-height: 1.35; }
  h2 { font-size: 18px; }
  .lede { font-size: 15.5px; }

  .card { padding: 20px; border-radius: 14px; }
  .btn { padding: 15px 18px; font-size: 15px; }

  /* بطاقات الحالة: الحشو الكبير يبتلع الشاشة الصغيرة */
  .status-page { padding: 24px 14px 44px; }
  .status-card { padding: 26px 20px; border-radius: 16px; }
  .status-card h1 { font-size: 20px; }

  /* البريد الطويل كان يدفع الصف خارج البطاقة */
  dl.details .row { flex-direction: column; gap: 2px; padding: 10px 0; }
  dl.details dd { text-align: right; font-size: 14px; }

  .prose { padding: 4px 0 44px; }
  .prose h2 { margin-top: 26px; font-size: 17px; }
  details.faq { padding: 14px 15px; }
  details.faq summary { font-size: 14.5px; }

  .site-footer { padding: 24px 0 32px; margin-top: 30px; }
  .footer-links { gap: 8px 16px; }
}

/* الشاشات الضيقة جداً (‏320px) — منع أي تجاوز أفقي */
@media (max-width: 380px) {
  .wrap, .wrap-narrow { padding: 0 13px; }
  .card { padding: 17px; }
  h1 { font-size: 22px; }
}

/* ---------- المعاينات البصرية ----------
   الدليل منتج بصري، فإخفاؤه خلف النص يفقده أقوى ورقة لديه.
   كل إطار يحجز نسبته (A4) مسبقاً حتى لا تقفز الصفحة أثناء التحميل. */
.shot {
  aspect-ratio: 635 / 900;
  border-radius: 12px;
  overflow: hidden;
  background: #EDEEF4;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(27, 27, 51, .10);
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.preview-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* غلاف مائل قليلاً ليبدو كتاباً لا صورة مسطّحة */
.cover-shot {
  width: min(100%, 260px);
  transform: rotate(-2.5deg);
  transition: transform .25s ease;
}
.cover-shot:hover { transform: rotate(0deg) translateY(-4px); }

@media (max-width: 640px) {
  .preview-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .preview-strip .shot:nth-child(3) { display: none; }
  .cover-shot { width: min(100%, 200px); transform: none; }
}

/* ---------- ورقة الطلب ----------
   نفس النمط على كل المقاسات: طبقة معتمة + لوحة تظهر فوقها. يتغيّر موضعها
   فقط بحسب عُرف الجهاز — ترتفع من الأسفل على الجوال، وتتوسّط على الحاسوب —
   فلا يواجه المستخدم سلوكين مختلفين لنفس الضغطة. */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(18, 18, 40, .55);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 40;
  backdrop-filter: blur(2px);
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
body.sheet-open { overflow: hidden; }

.order-sheet {
  position: fixed; z-index: 50;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(18, 18, 40, .28);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1), opacity .2s ease;
}
.order-sheet[hidden] { display: none; }

.sheet-title { margin: 0 0 16px; font-size: 18px; color: var(--navy); }

/* مؤشر الخطوات — يُبنى من الجافاسكربت ليطابق المسار فعلاً */
.steps { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.step { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.step-num {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #E9EAF1; color: var(--muted); font-size: 12px; font-weight: 700;
}
.step.active { color: var(--navy); font-weight: 700; }
.step.active .step-num { background: var(--navy); color: #fff; }
.step-line { flex: 1; height: 1px; background: var(--line); min-width: 10px; }

/* الحاسوب: لوحة متوسّطة */
@media (min-width: 701px) {
  .order-sheet {
    inset-inline: 0; top: 50%; margin-inline: auto;
    width: min(520px, calc(100% - 48px));
    transform: translateY(-50%) scale(.97); opacity: 0;
    border-radius: 20px;
  }
  .order-sheet.open { transform: translateY(-50%) scale(1); opacity: 1; }
}

/* الجوال: ترتفع من الأسفل */
@media (max-width: 700px) {
  .order-sheet {
    inset-inline: 0; bottom: 0;
    border-radius: 20px 20px 0 0; border: 0; border-top: 1px solid var(--line);
    transform: translateY(100%);
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
  .order-sheet.open { transform: translateY(0); }
  .order-sheet::before {
    content: ""; display: block; width: 38px; height: 4px; border-radius: 99px;
    background: #D2D3DF; margin: 0 auto 16px;
  }
  .steps { font-size: 12.5px; }
}

/* ---------- خط رحلة الهجرة ----------
   يشرح ما يغطيه الدليل بصرياً في ثانيتين بدل فقرة تُقرأ. */
.journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.journey::before {
  content: ""; position: absolute; top: 19px; inset-inline: 6%;
  height: 2px; background: linear-gradient(90deg, var(--gold-bright), var(--navy-soft));
  opacity: .35;
}
.j-step { position: relative; text-align: center; }
.j-dot {
  width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface);
  border: 2px solid var(--gold); color: var(--navy);
  font-weight: 800; font-size: 14px; position: relative; z-index: 1;
}
.j-step strong { display: block; color: var(--navy); font-size: 14.5px; margin-bottom: 3px; }
.j-step span { color: var(--muted); font-size: 12.5px; }

@media (max-width: 640px) {
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey::before { top: 8px; bottom: 8px; inset-inline: auto; inset-inline-start: 19px;
    width: 2px; height: auto; background: linear-gradient(180deg, var(--gold-bright), var(--navy-soft)); }
  .j-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px;
    text-align: start; align-items: start; padding-bottom: 18px; }
  .j-dot { margin: 0; }
}

/* ---------- ظهور تدريجي عند التمرير ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* رفعة خفيفة تؤكد أن البطاقة قابلة للتفاعل */
.card, .why-item, .soon-card { transition: transform .2s ease, box-shadow .2s ease; }
.why-item:hover, .soon-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(27,27,51,.07); }

/* ================= الهوية البصرية =================
   الدليل نفسه كحلي غامق بعناوين ذهبية عريضة. الموقع كان أبيض محايداً،
   فبدا منفصلاً عن المنتج. هذه الطبقة تنقل شخصية الدليل إلى الموقع. */

.dark {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: #fff;
}
/* وهج ذهبي خافت + شبكة دقيقة: عمق بلا صور ثقيلة */
.dark::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 420px at 82% -12%, rgba(245, 166, 35, .17), transparent 62%),
    radial-gradient(700px 380px at 8% 108%, rgba(90, 90, 190, .28), transparent 60%);
  pointer-events: none;
}
.dark::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 30%, #000 20%, transparent 78%);
  pointer-events: none;
}
.dark > * { position: relative; z-index: 1; }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark p { color: #C6C8E2; }
.dark .eyebrow { background: rgba(245, 166, 35, .14); color: var(--gold-bright); }

/* عناوين أكبر وأجرأ — الخجل البصري كان أحد أسباب «العادية» */
.display {
  font-size: clamp(30px, 6.2vw, 56px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.01em;
  max-width: 17ch;
}
.display .accent { color: var(--gold-bright); }
.sub { max-width: 52ch; font-size: clamp(15.5px, 2vw, 18px); line-height: 1.85; }

/* إيقاع رأسي أوسع */
.band { padding: clamp(52px, 8vw, 96px) 0; }
.band-tight { padding: clamp(38px, 5vw, 60px) 0; }

/* بطاقة دليل: الغلاف هو البطل */
.guide-card {
  display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(27,27,51,.10); }
.guide-card .shot { box-shadow: 0 12px 28px rgba(27,27,51,.18); }
.guide-card h3 { margin: 0 0 6px; font-size: 20px; color: var(--navy); }
.guide-card .meta { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }
.guide-card .btn { width: auto; padding-inline: 24px; }

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pill { padding: 5px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; }
.pill-free { background: var(--ok-soft); color: var(--ok); }
.pill-paid { background: var(--gold-soft); color: var(--gold-ink); }
.pill-soon { background: #EEEFF5; color: var(--muted); }

@media (max-width: 640px) {
  .display { max-width: none; }
  .guide-card { grid-template-columns: 110px 1fr; gap: 16px; padding: 18px; }
  .guide-card h3 { font-size: 17px; }
  .guide-card .btn { width: 100%; }
}

/* ================= صفحة الدليل =================
   البطاقة الواحدة كانت 1402px — شاشة وثلاثة أرباع — لأن الغلاف والقائمة
   الطويلة تراكما داخلها. هنا تُفصل الأدوار: الغلاف في الترويسة مرة واحدة،
   والبطاقات للشراء فقط. */

/* ترويسة المنتج. النص أولاً في الترميز فيقع يمين الصفحة (RTL)،
   والصورة بعده فتقع يساره — وهي مخفية حتى تتوفر الصورة المصمَّمة. */
.product-head { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.product-head:has(.product-art:not([hidden])) { grid-template-columns: 1fr minmax(0, 380px); }
.product-copy { min-width: 0; }
.product-art { margin: 0; }
.product-art img { display: block; width: 100%; height: auto; border-radius: 16px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .35); }

/* نبذة عن الدليل */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.about-text p { color: var(--body); font-size: 15.5px; margin: 0 0 14px; }
.about-facts { display: grid; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.about-facts div { display: grid; gap: 3px; }
.about-facts strong { color: var(--navy); font-size: 14px; }
.about-facts span { color: var(--body); font-size: 13.5px; }

.buy-meta { margin: 0 0 12px; color: var(--muted); font-size: 13px; }

/* بطاقات الشراء: مضغوطة، بلا صور، أربعة أسطر كحد أقصى */
.buy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.buy-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px; display: flex; flex-direction: column;
}
.buy-card.is-paid { border-color: #E6C48A; box-shadow: 0 14px 36px rgba(224, 144, 15, .10); }
/* الجزء غير الصادر: حاضر ليُعرَف، وباهت ليُفهَم أنه ليس للشراء بعد */
.buy-card.is-upcoming { border-style: dashed; background: #FBFBFD; }
.buy-card.is-upcoming h3, .buy-card.is-upcoming .price strong { color: var(--muted); }
.buy-card h3 { margin: 10px 0 4px; font-size: 18px; color: var(--navy); }
.buy-card .price { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 14px; }
.buy-card .price strong { font-size: 26px; font-weight: 800; color: var(--navy); }
.buy-card .price span { color: var(--muted); font-size: 13px; }
.buy-card ul { margin: 0 0 18px; padding: 0; list-style: none; flex-grow: 1; }
.buy-card li { position: relative; padding-inline-start: 20px; margin-bottom: 7px;
  font-size: 14px; color: var(--body); }
.buy-card li::before { content: ""; position: absolute; inset-inline-start: 3px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* الفصول: شبكة مضغوطة تُقرأ بلمحة */
.chapter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.chapter { background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px; }
.chapter span { display: block; color: var(--gold-ink); font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.chapter strong { display: block; color: var(--navy); font-size: 15px; margin-bottom: 8px; }
.chapter p { margin: 0; color: var(--body); font-size: 13.5px; }

/* المعاينة: كانت 488px لكل صورة. الآن نعرض أعلى الصفحة بارتفاع ثابت،
   فيُفهم أنها معاينة بلا أن تبتلع الشاشة. */
.peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.peek figure { margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 10px 26px rgba(27, 27, 51, .08); }
.peek img { display: block; width: 100%; height: 230px;
  object-fit: cover; object-position: top center; }

@media (max-width: 860px) {
  .product-head, .product-head:has(.product-art:not([hidden])) { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .chapter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .buy-grid { grid-template-columns: 1fr; }
}

/* ---------- الانتظار ----------
   المستخدم هنا دفع للتو وينتظر تأكيداً لا يملك التحكم فيه، فالهدف
   طمأنة لا استعراض: نبض هادئ وتقدّم صادق. */
.waiting {
  display: flex; align-items: center; gap: 14px; text-align: right;
  margin: 18px 0; padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--gold-soft); border: 1px solid #EADFC4;
}
.waiting div { display: flex; flex-direction: column; gap: 3px; }
.waiting strong { font-size: 14.5px; color: #6B5312; }
.waiting span { font-size: 13.5px; color: #6E6350; }
.pulse { display: inline-flex; gap: 5px; flex: none; }
.pulse i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  animation: pulse 1.25s ease-in-out infinite;
}
.pulse i:nth-child(2) { animation-delay: .18s; }
.pulse i:nth-child(3) { animation-delay: .36s; }
@keyframes pulse { 0%, 70%, 100% { opacity: .28; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pulse i { animation: none; opacity: .75; }
}
.btn.is-busy { opacity: .72; pointer-events: none; cursor: wait; }

/* شاشة انتظار داخل لوحة الطلب */
.sheet-wait { display: grid; place-items: center; gap: 12px; padding: 42px 20px; text-align: center; }
.sheet-wait h2 { margin: 0; font-size: 19px; color: var(--navy); }
.sheet-wait p { margin: 0; font-size: 14.5px; color: var(--body); max-width: 34ch; }
.sheet-wait .wait-warn { margin-top: 6px; font-weight: 600; color: var(--gold-ink); }
.sheet-wait .pulse i { width: 10px; height: 10px; }

/* ---------- ترويسة الصفحات الداخلية ---------- */
.page-head { padding: 40px 20px 22px; }
.page-head .eyebrow { margin-bottom: 12px; }
.page-head h1 { margin: 0 0 8px; }
.page-head .lede { margin: 0; }

/* بطاقات الحل الذاتي: أغلب من يصل للتواصل لا يحتاج انتظار رد */
.self-serve { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.self-card {
  display: flex; flex-direction: column; gap: 6px; padding: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  text-decoration: none; color: inherit; transition: border-color .18s, transform .18s;
}
.self-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.self-card:hover .arrow { transform: translateX(-4px); }
.self-card strong { font-size: 15.5px; color: var(--navy); }
.self-card span { font-size: 14px; color: var(--body); }
.self-go { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--gold-ink); }
.self-go .arrow { display: inline-block; transition: transform .18s; }

.form-card { margin-bottom: 8px; }
.form-intro { margin: 0 0 20px; font-size: 14.5px; color: var(--body); }
.form-foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted); }

textarea {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 15px;
  color: var(--navy); background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); resize: vertical; min-height: 120px;
}
textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: transparent; }
select {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 15px; min-height: 48px;
  color: var(--navy); background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
select:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: transparent; }

.counter { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted);
  direction: ltr; text-align: left; }  /* بلا direction يقرأ «4000 / 0» */
.counter.over { color: #B3261E; font-weight: 600; }

/* الفخ مخفي بصرياً وعن قارئ الشاشة، لكنه يبقى في الـ DOM ليملأه البوت */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .self-serve { grid-template-columns: 1fr; }
  .page-head { padding: 28px 16px 18px; }
}

/* ---------- الصفحات الطويلة ---------- */
/* الشروط 12 قسماً والخصوصية 10، وبلا فهرس كان القارئ يمرّر بحثاً عن سطر واحد. */
.toc {
  position: sticky; top: 16px; align-self: start;
  padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px;
}
.toc-title { display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .3px; color: var(--muted); }
.toc-list { display: flex; flex-direction: column; gap: 2px; }
.toc-list a {
  padding: 7px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.5;
  color: var(--body); text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.toc-list a:hover { background: var(--gold-soft); color: var(--navy); }
.toc-list a.current { background: var(--gold-soft); color: var(--navy);
  font-weight: 600; border-inline-start-color: var(--gold); }

/* في RTL العمود الأول هو الأيمن، فبترتيبه الطبيعي كان الفهرس يمين والنص
   يسار — أي أن عنوان الصفحة يعلو الفهرس لا النص. النص يأخذ العمود الأول. */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 34px;
  align-items: start; padding-bottom: 56px; }
.doc-layout .prose { grid-column: 1; grid-row: 1; }
.doc-layout .toc { grid-column: 2; grid-row: 1; }  /* بلا grid-row ينزل النص لصف ثانٍ */
.doc-layout .prose { padding-top: 0; }

/* رقم القسم يعطي إيقاعاً بصرياً لجدار النص القانوني */
.prose h2 { scroll-margin-top: 20px; }

/* صندوق الخلاصة: يقرأه من لا ينوي قراءة الوثيقة كاملة، وهم الأغلبية */
.tldr {
  margin: 0 0 30px; padding: 20px 22px; border-radius: 16px;
  background: var(--gold-soft); border: 1px solid #EADFC4;
}
.tldr strong { display: block; margin-bottom: 10px; font-size: 14px; color: #6B5312; }
.tldr ul { margin: 0; padding-inline-start: 18px; }
.tldr li { margin-bottom: 6px; font-size: 14.5px; color: #6E6350; }
.tldr li:last-child { margin-bottom: 0; }

.updated-chip {
  display: inline-block; margin-top: 4px; padding: 5px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}

.to-top {
  position: fixed; inset-inline-start: 20px; bottom: 20px; z-index: 30;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--navy); font-size: 19px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(20,20,50,.14);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--gold); }

.faq-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; }
.faq-bar h2 { margin: 0; }
#toggleAll {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--gold-ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
#toggleAll:hover { border-color: var(--gold); }

@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; gap: 20px; }
  /* على الهاتف يسبق الفهرسُ النصَّ ليكون مفيداً */
  .doc-layout .toc { grid-column: 1; grid-row: 1; position: static; }
  .doc-layout .prose { grid-column: 1; grid-row: 2; }
  .toc-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .toc-list a { border: 1px solid var(--line); border-inline-start-width: 1px; }
  .toc-list a.current { border-color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* أسباب عدم وصول الرابط، مرتبة بترتيب شيوعها */
.steps-help { display: grid; gap: 12px; margin-top: 22px; }
.help-row { display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; }
.help-num { flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink);
  font-size: 13px; font-weight: 700; }
.help-row strong { display: block; margin-bottom: 3px; font-size: 14.5px; color: var(--navy); }
.help-row span { font-size: 14px; color: var(--body); }

/* السعر قبل الخصم: يُقرأ كملاحظة لا كسعر، فلا يُربك من يمسح الصفحة بسرعة */
.price-was { font-size: 17px; font-weight: 600; color: var(--muted);
  text-decoration: line-through; text-decoration-thickness: 1.5px; margin-inline-end: 4px; }
.price-save { margin-inline-start: 8px; padding: 4px 10px; border-radius: 999px;
  background: #E8F5EC; color: #1B6B3A; font-size: 12px; font-weight: 700; }
.price-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }