/**
 * Doan News — التنسيق الأساسي
 *
 * مبني RTL-first: الاتجاه الافتراضي من اليمين لليسار، ونستخدم الخصائص
 * المنطقية (inline-start/inline-end) بدل left/right حتى لا نحتاج ملف rtl.css منفصل.
 *
 * لا يوجد Tailwind ولا preflight — كل التنسيقات محصورة في الطبقات أدناه،
 * فلا تتسرّب إلى لوحة التحكم أو إلى إضافات أخرى.
 */

/**
 * الطبقات: إعادة الضبط والأساس فقط.
 *
 * قاعدة CSS: **أي نمط بلا طبقة يهزم أي نمط داخل طبقة** مهما كانت
 * خصوصيته. وضعتُ المكوّنات في طبقة أولًا فهزمها إخراج theme.json
 * غير المُطبَّق في طبقة، وصار نص زر أبيض غير مرئي على خلفية حمراء.
 *
 * الصواب: إعادة الضبط وحدها في طبقة (يجب أن تخسر أمام كل شيء)،
 * والمكوّنات بلا طبقة — وهي آمنة أصلًا لأنها كلها مقيّدة بـ .doan-*
 * فلا تتسرّب إلى لوحة التحكم ولا إلى الإضافات.
 */
@layer reset, base;

/* ==========================================================================
   المتغيرات — مشتقة من نظام ألوان واجهة React الأصلية
   ========================================================================== */
@layer base {
  :root {
    /* الأسطح */
    --doan-page: #fdfdfd;
    --doan-surface: #ffffff;
    --doan-surface-alt: #f8fafc;

    /* النصوص */
    --doan-ink: #0f172a;
    --doan-ink-muted: #475569;
    --doan-ink-soft: #64748b;
    --doan-ink-invert: #f8fafc;

    /* الحدود */
    --doan-line: #e2e8f0;
    --doan-line-strong: #cbd5e1;

    /* هوية الصحيفة */
    --doan-brand: #991b1b;
    --doan-brand-strong: #7f1d1d;
    --doan-breaking: #dc2626;

    /* لون التمييز */
    --doan-accent: #d97706;
    --doan-accent-soft: #f59e0b;
    --doan-accent-pale: #fcd34d;

    --doan-success: #059669;

    /* الداكن */
    --doan-dark: #0f172a;
    --doan-darker: #020617;

    /* المسافات */
    --doan-gap-1: 0.5rem;
    --doan-gap-2: 1rem;
    --doan-gap-3: 1.5rem;
    --doan-gap-4: 2.5rem;
    --doan-gap-5: 4rem;

    /* ---- كتلة القسم: حاوية داكنة مستديرة فوق الصفحة الفاتحة ----
       القيم مقيسة من النموذج المرجعي بـ getComputedStyle، لا مقدّرة.
       التباين ثلاثي الطبقات: صفحة فاتحة ← كتلة داكنة ← بطاقة بيضاء. */
    --doan-block: #1c1917;              /* stone-900 */
    --doan-block-border: #292524;       /* stone-800 */
    --doan-block-radius: 1.5rem;        /* 24px — مقيس */
    --doan-block-pad: 1.5rem;           /* 24px — مقيس */
    --doan-on-block: #f5f5f4;           /* نص داخل الكتلة */
    --doan-on-block-muted: #a8a29e;

    /* الأنصاف والظلال */
    --doan-radius: 0.75rem;
    --doan-radius-lg: 1rem;             /* 16px — نصف قطر البطاقة المقيس */
    --doan-radius-block: 1.5rem;        /* 24px */
    --doan-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 12px rgb(15 23 42 / 0.04);
    --doan-shadow-lg: 0 8px 30px rgb(15 23 42 / 0.10);

    /* القياسات */
    --doan-container: 1280px;
    --doan-header-h: 4.5rem;

    /* الخطوط */
    --doan-font-body: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --doan-font-display: "Amiri", "Cairo", Georgia, serif;
  }

  /**
   * الوضع الليلي **اختياري بالكامل** — لا يُطبَّق من تفضيل النظام.
   *
   * قرار معتمد: الصحيفة تبدأ فاتحة دائمًا كما في النموذج المرجعي
   * (قِيست خلفيته: #fdfdfd)، ويبدّلها الزائر بنفسه فيُحفظ اختياره.
   *
   * السبب: هوية بصرية ثابتة للصحيفة. اتّباع النظام يعني أن زائرين
   * يفتحان الرابط نفسه فيريان صحيفتين مختلفتين — والانطباع الأول
   * للعلامة لا يُترك لإعداد جهاز.
   */
  :root[data-doan-theme="dark"] {
    --doan-page: #020617;
    --doan-surface: #0f172a;
    --doan-surface-alt: #1e293b;
    --doan-ink: #f1f5f9;
    --doan-ink-muted: #cbd5e1;
    --doan-ink-soft: #94a3b8;
    --doan-line: #1e293b;
    --doan-line-strong: #334155;
    --doan-brand: #dc2626;
  }
}

/* ==========================================================================
   إعادة ضبط محدودة — على عناصر القالب فقط، لا على كل الوسوم
   ========================================================================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
    display: block;
  }

  a {
    color: inherit;
  }

  button {
    font: inherit;
    cursor: pointer;
  }
}

/* ==========================================================================
   الأساس
   ========================================================================== */
@layer base {
  body {
    background: var(--doan-page);
    color: var(--doan-ink);
    font-family: var(--doan-font-body);
    font-size: 1rem;
    line-height: 1.85;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--doan-font-display);
    line-height: 1.35;
    margin: 0 0 var(--doan-gap-2);
  }

  /* الأرقام تُقرأ أوضح بخط النص لا بخط العناوين */
  time,
  .doan-num {
    font-family: var(--doan-font-body);
    font-variant-numeric: tabular-nums;
  }

  /* إخفاء بصري مع إبقاء المحتوى لقارئات الشاشة */
  .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .doan-skip-link:focus {
    position: fixed !important;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 999;
    width: auto;
    height: auto;
    clip-path: none;
    padding: 0.75rem 1.25rem;
    background: var(--doan-brand);
    color: #fff;
    border-radius: var(--doan-radius);
  }

  :focus-visible {
    outline: 2px solid var(--doan-accent);
    outline-offset: 2px;
  }
}

/* ==========================================================================
   التخطيط
   ========================================================================== */

.doan-container {
  width: 100%;
  max-width: var(--doan-container);
  margin-inline: auto;
  padding-inline: var(--doan-gap-2);
}

.doan-main {
  display: block;
  padding-block: var(--doan-gap-4);
  min-height: 50vh;
}

/*
 * سمة hidden يجب أن تُخفي فعلًا.
 *
 * متصفّحات المستخدم تمنحها display:none بخصوصية شديدة الانخفاض، فأي
 * قاعدة تضبط display (grid أو flex) في هذا الملف تهزمها ويبقى العنصر
 * ظاهرًا رغم إخفائه برمجيًا. حدث ذلك فعلًا في قائمة القراءة: «مسح
 * القائمة» كان يُفرغ التخزين ويعلن الفراغ والمقالات باقية على الشاشة.
 *
 * !important مبرّر هنا تحديدًا: سمة hidden وعدٌ من HTML لا تفصيلُ تصميم،
 * ومن أراد إظهار العنصر يزيل السمة لا يتجاوزها بالتنسيق.
 */
[hidden] {
  display: none !important;
}

.doan-layout {
  display: grid;
  gap: var(--doan-gap-4);
  /*
   * minmax(0, 1fr) لا 1fr: الحدّ الأدنى التلقائي لمسار 1fr هو min-content،
   * فأي ابن لا ينكمش (شريط أقسام يمرَّر أفقيًا، جدول عريض، صورة) يمدّد
   * العمود كله ويُخرج الصفحة عن عرض الشاشة. نقطة التوقف الكبيرة كانت
   * تستعمل minmax أصلًا، فبقي العطل مقتصرًا على الشاشات الأصغر.
   */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .doan-layout {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  }
}

.doan-grid {
  display: grid;
  gap: var(--doan-gap-3);
}

.doan-grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}


/* ==========================================================================
   المكوّنات
   ========================================================================== */


/* ---------- الشريط العلوي ---------- */
.doan-topbar {
  background: var(--doan-darker);
  color: var(--doan-on-block-muted);
  font-size: 0.75rem;
}

.doan-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--doan-gap-1);
  min-height: 2.25rem;
}

.doan-topbar__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.doan-topbar__hijri {
  font-weight: 800;
  color: var(--doan-accent-pale);
}

.doan-topbar__sep {
  opacity: 0.35;
}

/* التباعد الحرفي الموسّع للأرقام — نمط بارز في كل النموذج المرجعي */
.doan-topbar__clock,
.doan-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.doan-topbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.doan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 999px;
  white-space: nowrap;
}

.doan-chip__ico {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--doan-accent-soft);
}

.doan-chip__label {
  opacity: 0.75;
}

.doan-chip strong {
  color: var(--doan-on-block);
}

.doan-chip--rates strong {
  color: var(--doan-success);
}

/* ---------- شريط الخدمات ---------- */
.doan-actions {
  background: var(--doan-dark);
  border-block-end: 1px solid rgb(255 255 255 / 0.08);
}

.doan-actions__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-block: 0.5rem;
}

.doan-actions__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
}

.doan-actions__nav a {
  color: var(--doan-on-block-muted);
  text-decoration: none;
}

.doan-actions__nav a:hover {
  color: var(--doan-accent-pale);
}

.doan-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doan-on-block);
  text-decoration: none;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
}

.doan-actions__btn:hover {
  background: rgb(255 255 255 / 0.16);
}

.doan-actions__btn--ai {
  color: var(--doan-darker);
  background: var(--doan-accent-soft);
  border-color: var(--doan-accent-soft);
}

.doan-actions__btn--login {
  color: #fff;
  background: var(--doan-brand);
  border-color: var(--doan-brand);
}

/* ---------- الترويسة ---------- */
.doan-header {
  background: var(--doan-page);
}

.doan-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--doan-gap-2);
  padding-block: var(--doan-gap-2);
}

.doan-header__brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.doan-header__mark {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  color: #fff;
  background: var(--doan-brand);
  border-radius: var(--doan-radius);
}

.doan-header__mark svg {
  width: 2rem;
  height: 2rem;
}

.doan-header__title {
  display: inline-block;
  font-family: var(--doan-font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--doan-brand);
  text-decoration: none;
}

/* السطر اللاتيني: تباعد حرفي واسع كما في النموذج */
.doan-header__kicker {
  margin: 0.125rem 0 0;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--doan-ink-soft);
}

.doan-header__tagline {
  margin: 0.125rem 0 0;
  font-family: var(--doan-font-display);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--doan-accent);
}

.doan-header__aside {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.doan-header .custom-logo {
  max-height: 4.5rem;
  width: auto;
}

/* ---------- أيقونات التواصل ---------- */
.doan-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.doan-social__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--doan-ink-soft);
}

/* حبّة باسم الشبكة: مساحة اللمس ٢٫٢٥rem ارتفاعًا (٣٦ بكسل) وهو الحد
   الموصى به، بدل نقطة ٢rem لا تحمل أي نص. */
.doan-social__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line);
}

.doan-social__name {
  color: var(--doan-ink);
}

.doan-social__dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
}

.doan-social__item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* على الشاشات الضيقة نُبقي النقطة الملوّنة وحدها لتوفير العرض،
   والتسمية تبقى متاحة لقارئ الشاشة عبر aria-label على الرابط. */
@media (max-width: 640px) {
  .doan-social__label,
  .doan-social__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .doan-social__item {
    padding: 0.3125rem;
    min-width: 2.25rem;
    justify-content: center;
  }
}

.doan-social__item--fb { color: #3b82f6; }
.doan-social__item--x  { color: #0f172a; }
.doan-social__item--yt { color: #dc2626; }
.doan-social__item--tg { color: #38bdf8; }
.doan-social__item--wa { color: #16a34a; }

.doan-social__item:hover {
  border-color: currentColor;
}

/* ---------- البحث ---------- */
.doan-search {
  display: flex;
  gap: 0.375rem;
  max-width: 22rem;
  width: 100%;
}

.doan-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--doan-ink);
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line-strong);
  border-radius: var(--doan-radius);
}

.doan-search__submit {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--doan-brand);
  border: 0;
  border-radius: var(--doan-radius);
}

.doan-search__submit:hover {
  background: var(--doan-brand-strong);
}

/* ---------- القائمة الرئيسية ---------- */
/**
 * حاوية «حبّة» داكنة تطفو على الصفحة الفاتحة — لا شريط ممتد من حافة
 * لحافة. هذا ما يعطي الترويسة طابعها في النموذج المرجعي.
 */
.doan-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  padding-block: 0.625rem;
  background: var(--doan-page);
}

.doan-nav__inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.doan-nav__pill {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.3125rem;
  color: var(--doan-on-block);
  background: var(--doan-dark);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}

.doan-nav__pill::-webkit-scrollbar {
  display: none;
}

.doan-nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  /*
   * توسيط الروابط داخل الحبّة. لا justify-content: center هنا لأن القائمة
   * كتلة تملأ عرض الحبّة أصلًا، فالتوسيط داخلها لا يحرّك شيئًا — التوسيط
   * الفعلي بتقليص القائمة لعرض محتواها ثم هامش تلقائي على الجانبين.
   *
   * وهذه الصيغة تحديدًا آمنة مع overflow-x على الحبّة: مع
   * justify-content: center يصير أول عنصر خارج مدى التمرير ولا يمكن
   * الوصول إليه إن ضاقت الشاشة. فُحص الطرفان بعد التضييق وكلاهما يُرى.
   */
  width: fit-content;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.doan-nav__list > li > a {
  display: block;
  padding: 0.5rem 0.9375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
}

.doan-nav__list > li > a:hover {
  background: rgb(255 255 255 / 0.1);
}

.doan-nav__list > .current-menu-item > a,
.doan-nav__list > .current-menu-parent > a {
  color: #fff;
  background: var(--doan-brand);
}

.doan-nav__send {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--doan-brand);
  border-radius: 999px;
}

.doan-nav__send:hover {
  background: var(--doan-brand-strong);
}

.doan-nav__send-ico {
  width: 0.875rem;
  height: 0.875rem;
}

.doan-nav__toggle {
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--doan-on-block);
  background: var(--doan-dark);
  border: 0;
  border-radius: 999px;
}

.doan-nav__bars {
  width: 1rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

@media (max-width: 900px) {
  .doan-nav__toggle {
    display: inline-flex;
  }

  .doan-nav__pill {
    display: none;
    flex-basis: 100%;
    border-radius: var(--doan-radius-lg);
  }

  .doan-nav__inner {
    flex-wrap: wrap;
  }

  .doan-nav__pill:has(.is-open),
  .doan-nav__pill.is-open {
    display: block;
  }

  .doan-nav__list {
    flex-direction: column;
    align-items: stretch;
    /* في القائمة المنسدلة نريد عرضًا كاملًا، لا قائمة ضيّقة موسّطة:
       fit-content من نسق سطح المكتب كان سيقلّصها لعرض أطول عنصر. */
    width: auto;
  }
}

/* ---------- شريط العاجل ---------- */
.doan-breaking {
  background: color-mix(in srgb, var(--doan-breaking) 8%, var(--doan-page));
  border-block-end: 1px solid color-mix(in srgb, var(--doan-breaking) 25%, transparent);
}

.doan-breaking__inner {
  display: flex;
  align-items: center;
  gap: var(--doan-gap-2);
  min-height: 2.5rem;
  overflow: hidden;
}

.doan-breaking__label {
  flex: 0 0 auto;
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #fff;
  background: var(--doan-breaking);
  border-radius: 999px;
}

.doan-breaking__list {
  display: flex;
  gap: var(--doan-gap-3);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.doan-breaking__list::-webkit-scrollbar {
  display: none;
}

.doan-breaking__item a {
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.doan-breaking__item a:hover {
  color: var(--doan-breaking);
}

/* وضع «خبر واحد يتبدّل» — يفعّله السكربت فقط.
   بدونه تبقى القائمة صفًّا يمرّره القارئ بنفسه. */
.doan-breaking__list.is-rotating {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.doan-breaking__list.is-rotating .doan-breaking__item {
  display: none;
  min-width: 0;
}

.doan-breaking__list.is-rotating .doan-breaking__item.is-current {
  display: block;
}

/* العنوان الطويل يُقتطع بنقاط بدل أن يمدّ الشريط. */
.doan-breaking__list.is-rotating .doan-breaking__item a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: no-preference) {
  .doan-breaking__list.is-rotating .doan-breaking__item.is-current {
    animation: doan-breaking-in 0.35s ease-out;
  }
}

@keyframes doan-breaking-in {
  from { opacity: 0; transform: translateY(0.375rem); }
}

.doan-breaking__controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.125rem;
}

.doan-breaking__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  font: inherit;
  font-size: 0.625rem;
  line-height: 1;
  cursor: pointer;
  color: var(--doan-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
}

.doan-breaking__btn:hover {
  color: var(--doan-breaking);
  border-color: color-mix(in srgb, var(--doan-breaking) 35%, transparent);
}

.doan-breaking__btn:focus-visible {
  outline: 2px solid var(--doan-breaking);
  outline-offset: 1px;
}

.doan-breaking__btn--prev,
.doan-breaking__btn--next {
  font-size: 1rem;
}

.doan-breaking__counter {
  min-width: 2.75rem;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--doan-ink-soft);
}

@media (max-width: 480px) {
  /* على الجوال نُبقي زر الإيقاف وحده: الأسهم تزاحم العنوان. */
  .doan-breaking__btn--prev,
  .doan-breaking__btn--next,
  .doan-breaking__counter {
    display: none;
  }
}

/* ---------- بطاقة المقال ---------- */
/**
 * بيضاء دائمًا حتى في الوضع الليلي — لأنها تطفو داخل كتلة قسم داكنة،
 * وهذا مصدر التباين الأساسي في التصميم المرجعي.
 */
.doan-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--doan-dark);
  border: 2px solid var(--doan-line-strong);
  border-radius: var(--doan-radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.doan-card:hover {
  border-color: var(--doan-accent);
  transform: translateY(-2px);
}

.doan-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--doan-surface-alt);
  overflow: hidden;
}

.doan-card__link {
  display: block;
  width: 100%;
  height: 100%;
}

.doan-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.doan-card:hover .doan-card__img {
  transform: scale(1.04);
}

.doan-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #e2e8f0, #e2e8f0 10px, #eef2f7 10px, #eef2f7 20px);
}

/* شارة التصنيف: أعلى-يمين فوق الصورة */
.doan-card__cat {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  padding: 0.1875rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  background: var(--doan-breaking);
  border-radius: 999px;
}

.doan-card__cat:hover {
  background: var(--doan-brand-strong);
}

/* زر الحفظ: أعلى-يسار */
.doan-bookmark {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  color: var(--doan-dark);
  background: rgb(255 255 255 / 0.9);
  border: 0;
  border-radius: 999px;
}

.doan-bookmark__ico {
  width: 0.9375rem;
  height: 0.9375rem;
}

.doan-bookmark:hover {
  background: #fff;
}

.doan-bookmark.is-saved {
  color: #fff;
  background: var(--doan-accent);
}

.doan-bookmark.is-saved .doan-bookmark__ico {
  fill: currentColor;
}

.doan-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--doan-gap-2);
}

.doan-card__title {
  margin: 0;
  font-family: var(--doan-font-body);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.55;
}

.doan-card__title a {
  color: var(--doan-dark);
  text-decoration: none;
}

.doan-card__title a:hover {
  color: var(--doan-brand);
}

.doan-card__excerpt {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--doan-ink-muted);
}

.doan-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-start: auto;
  padding-block-start: 0.5rem;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
  border-block-start: 1px solid var(--doan-line);
}

.doan-card__time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.doan-card__ico {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--doan-accent);
}

/* ---------- صف مضغوط ---------- */
.doan-row {
  display: flex;
  gap: var(--doan-gap-1);
  align-items: flex-start;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--doan-line);
}

.doan-row:last-child {
  border-block-end: 0;
}

.doan-row__media {
  flex: 0 0 5.5rem;
  aspect-ratio: 3 / 2;
  border-radius: var(--doan-radius);
  overflow: hidden;
  background: var(--doan-surface-alt);
}

.doan-row__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doan-row__title {
  margin: 0 0 0.125rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.doan-row__title a {
  text-decoration: none;
}

.doan-row__title a:hover {
  color: var(--doan-brand);
}

.doan-row__date {
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

/* ---------- بطاقة عريضة ---------- */
.doan-wide {
  display: grid;
  gap: var(--doan-gap-2);
  align-items: start;
  grid-template-columns: 1fr;
  padding-block-end: var(--doan-gap-2);
  border-block-end: 1px solid var(--doan-line);
}

@media (min-width: 640px) {
  .doan-wide {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  }
}

.doan-wide__media {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--doan-radius-lg);
  overflow: hidden;
  background: var(--doan-surface-alt);
}

.doan-wide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * البطاقة العريضة شفافة فوق الكتلة الداكنة (لا خلفية فاتحة لها)، فألوان
 * النص الداكنة تختفي عليها: brand أعطى ٢٫١٠:١ و ink-muted أعطى ٢٫٣١:١.
 * نستخدم مقابلاتها المخصّصة للكتلة.
 */
.doan-wide__cat {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--doan-accent-pale);
  text-decoration: none;
}

.doan-wide__title {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.25rem;
}

.doan-wide__title a {
  text-decoration: none;
}

.doan-wide__excerpt {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--doan-on-block-muted);
}

.doan-wide__date {
  font-size: 0.6875rem;
  color: var(--doan-on-block-muted);
}

/* ---------- قسم الرئيسية ---------- */
/**
 * كل قسم كتلة داكنة مستديرة، لا مساحة شفافة على الصفحة.
 * هذا ما يعطي النموذج طابعه: بطاقات بيضاء تطفو داخل كتل داكنة
 * على صفحة فاتحة — ثلاث طبقات تباين لا اثنتان.
 */
.doan-section {
  padding: var(--doan-block-pad);
  margin-block-end: var(--doan-gap-4);
  color: var(--doan-on-block);
  background: var(--doan-block);
  border: 1px solid var(--doan-block-border);
  border-radius: var(--doan-block-radius);
}

.doan-section__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-block-end: 0.875rem;
  margin-block-end: var(--doan-gap-3);
  border-block-end: 1px solid var(--doan-accent);
}

/* أيقونة مربعة مستديرة بتدرّج برتقالي — علامة القسم البصرية */
.doan-section__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: #fff;
  background: linear-gradient(135deg, var(--doan-accent-soft), var(--doan-accent));
  border-radius: var(--doan-radius);
}

.doan-section__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.doan-section__titles {
  flex: 1 1 auto;
  min-width: 0;
}

.doan-section__title {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.3;
  color: var(--doan-accent-pale);
}

/* الاسم الإنجليزي بين قوسين — نمط ثابت في كل أقسام النموذج */
.doan-section__title-en {
  font-family: var(--doan-font-body);
  font-weight: 700;
  color: var(--doan-accent-soft);
}

.doan-section__sub {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--doan-on-block-muted);
}

.doan-section__more {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doan-accent-pale);
  text-decoration: none;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 999px;
}

.doan-section__more:hover {
  color: var(--doan-darker);
  background: var(--doan-accent-soft);
  border-color: var(--doan-accent-soft);
}

/* تبويبات داخل ترويسة القسم */
.doan-section__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.doan-section__tab {
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doan-on-block-muted);
  text-decoration: none;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 999px;
}

.doan-section__tab.is-active,
.doan-section__tab:hover {
  color: var(--doan-darker);
  background: var(--doan-accent-soft);
  border-color: var(--doan-accent-soft);
}

/* التبويب النشط وحده داخل تسلسل Tab، فحلقة التركيز عليه لازمة. */
.doan-section__tab:focus-visible {
  outline: 2px solid var(--doan-accent-pale);
  outline-offset: 2px;
}

/* اللوحة تتلقى التركيز برمجيًا بعد التبديل — بلا حلقة مزعجة. */
.doan-section__panel:focus {
  outline: none;
}

/* التبويبات على الجوال: شريط أفقي قابل للتمرير بدل التفافها سطرين
   يدفعان بقية الترويسة. الحواف مخفية بالكامل لا مقصوصة. */
@media (max-width: 640px) {
  .doan-section__tabs {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .doan-section__tabs::-webkit-scrollbar {
    display: none;
  }

  .doan-section__tab {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .doan-section {
    padding: var(--doan-gap-2);
  }
  .doan-section__head {
    flex-wrap: wrap;
  }
}

.doan-section__featured {
  display: grid;
  gap: var(--doan-gap-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .doan-section__featured {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.doan-section__list {
  background: var(--doan-surface);
  /*
   * إعادة ضبط لون النص إلزامية لا تجميلية: .doan-section تضبط
   * --doan-on-block الفاتح لأنها كتلة داكنة، وهذه البطاقة بيضاء داخلها.
   * بدون هذا السطر يرث العنوان النص الفاتح فيصير أبيض على أبيض —
   * تباين ١٫٠٩:١ أي نص غير مرئي عمليًا (المعيار يشترط ٤٫٥:١).
   */
  color: var(--doan-ink);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius-lg);
  padding-inline: var(--doan-gap-2);
}

.doan-section__wide {
  display: flex;
  flex-direction: column;
  gap: var(--doan-gap-3);
}

.doan-section__wide .doan-wide:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

/* ---------- الواجهة العلوية ---------- */
.doan-hero {
  display: grid;
  gap: var(--doan-gap-3);
  grid-template-columns: 1fr;
  margin-block-end: var(--doan-gap-5);
}

@media (min-width: 900px) {
  .doan-hero {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.doan-hero__slider {
  position: relative;
  border-radius: var(--doan-radius-lg);
  overflow: hidden;
  background: var(--doan-darker);
}

.doan-hero__track {
  display: flex;
  transition: transform 0.5s ease;
}

.doan-hero__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.doan-hero__link {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
}

.doan-hero__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.doan-hero__overlay {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--doan-gap-3) var(--doan-gap-2) var(--doan-gap-2);
  background: linear-gradient(to top, rgb(2 6 23 / 0.92), rgb(2 6 23 / 0.55) 55%, transparent);
}

.doan-hero__cat {
  display: inline-block;
  margin-block-end: 0.375rem;
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 800;
  background: var(--doan-breaking);
  border-radius: 999px;
}

.doan-hero__title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.125rem, 2.6vw, 1.875rem);
  color: #fff;
}

.doan-hero__date {
  font-size: 0.75rem;
  opacity: 0.85;
}

.doan-hero__dots {
  position: absolute;
  inset-block-start: var(--doan-gap-1);
  inset-inline-end: var(--doan-gap-1);
  display: flex;
  gap: 0.375rem;
}

.doan-hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  background: rgb(255 255 255 / 0.45);
  border: 0;
  border-radius: 999px;
}

.doan-hero__dot.is-active {
  width: 1.5rem;
  background: var(--doan-accent-soft);
}

.doan-hero__latest {
  padding: var(--doan-gap-2);
  background: var(--doan-surface);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius-lg);
}

.doan-hero__latest-title {
  margin: 0 0 0.5rem;
  padding-block-end: 0.5rem;
  font-size: 1.0625rem;
  border-block-end: 2px solid var(--doan-accent);
}

/* ---------- المواضع الإعلانية ---------- */
.doan-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-block: var(--doan-gap-3);
  text-align: center;
}

.doan-ad__label,
.doan-ad__advertiser {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--doan-ink-soft);
  text-transform: uppercase;
}

/**
 * مقاسات المواضع الإعلانية.
 *
 * بلا سقف ارتفاع تُعرض صورة الإعلان بعرض الحاوية كاملًا فتبتلع الشاشة.
 * المقاسات مشتقّة من المعايير الإعلانية المعتمدة في التصميم المرجعي:
 * leaderboard ٧٢٨×٩٠ · بانورامي ٩٧٠×٢٥٠ · مضمّن ٧٢٨×٩٠ · جانبي ٣٠٠×٢٥٠.
 *
 * object-fit: cover يقص الصورة على النسبة الصحيحة بدل تشويهها، مهما
 * كان مقاس ما رفعه المعلن.
 */
.doan-ad__img {
  width: 100%;
  /* سقف افتراضي لأي موضع غير معرّف أدناه — يمنع ابتلاع الصفحة. */
  max-height: 280px;
  border-radius: var(--doan-radius);
  object-fit: cover;
}

.doan-ad--leaderboard .doan-ad__img,
.doan-ad--in-feed .doan-ad__img {
  max-width: 728px;
  aspect-ratio: 728 / 90;
}

.doan-ad--billboard .doan-ad__img,
.doan-ad--billboard-2 .doan-ad__img {
  max-width: 970px;
  aspect-ratio: 970 / 250;
}

.doan-ad--sidebar .doan-ad__img {
  max-width: 300px;
  aspect-ratio: 300 / 250;
}

/* المواضع المعرّفة تعتمد aspect-ratio، فنرفع سقف الارتفاع عنها. */
.doan-ad--leaderboard .doan-ad__img,
.doan-ad--in-feed .doan-ad__img,
.doan-ad--billboard .doan-ad__img,
.doan-ad--billboard-2 .doan-ad__img,
.doan-ad--sidebar .doan-ad__img {
  max-height: none;
}

.doan-ad__text {
  display: block;
  padding: var(--doan-gap-2);
  font-weight: 700;
  background: var(--doan-surface-alt);
  border: 1px dashed var(--doan-line-strong);
  border-radius: var(--doan-radius);
}

/* ---------- مناسبة مجتمعية ---------- */
.doan-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.doan-event {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--doan-gap-2);
  background: var(--doan-surface);
  border: 1px solid var(--doan-line);
  border-inline-start: 3px solid var(--doan-accent);
  border-radius: var(--doan-radius);
}

.doan-event__type {
  align-self: flex-start;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--doan-accent);
}

.doan-event__title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.doan-event__title a {
  text-decoration: none;
}

.doan-event__person {
  margin: 0;
  font-weight: 700;
  font-size: 0.875rem;
}

.doan-event__family,
.doan-event__date {
  margin: 0;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

/* ---------- كاتب رأي ---------- */
.doan-columnist {
  display: flex;
  gap: var(--doan-gap-2);
  align-items: flex-start;
  padding: var(--doan-gap-2);
  background: var(--doan-surface);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius-lg);
}

.doan-columnist__avatar {
  flex: 0 0 4rem;
  aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  background: var(--doan-surface-alt);
}

.doan-columnist__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doan-columnist__name {
  margin: 0 0 0.125rem;
  font-size: 1rem;
}

.doan-columnist__name a {
  text-decoration: none;
}

.doan-columnist__role {
  margin: 0;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-columnist__column {
  margin: 0.125rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doan-accent);
}

.doan-columnist__excerpt {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--doan-ink-muted);
}

/* ---------- حلقة إذاعية ---------- */
.doan-episode {
  display: flex;
  gap: var(--doan-gap-2);
  padding: var(--doan-gap-2);
  background: var(--doan-surface);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius-lg);
}

.doan-episode__media {
  flex: 0 0 4.5rem;
  aspect-ratio: 1;
  border-radius: var(--doan-radius);
  overflow: hidden;
  background: var(--doan-surface-alt);
}

.doan-episode__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doan-episode__body {
  flex: 1 1 auto;
  min-width: 0;
}

.doan-episode__show {
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--doan-accent);
}

.doan-episode__title {
  margin: 0.125rem 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.doan-episode__title a {
  text-decoration: none;
}

.doan-episode__meta {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-episode__player {
  width: 100%;
  height: 2.25rem;
}

/* ---------- معرض الصور ---------- */
.doan-gallery {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.doan-gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--doan-radius);
  text-decoration: none;
}

.doan-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.doan-gallery__item:hover .doan-gallery__img {
  transform: scale(1.06);
}

.doan-gallery__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 1.5rem 0.5rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(to top, rgb(2 6 23 / 0.9), transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doan-archive-head__count {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

/* ---------- بطاقة إعلان ---------- */
.doan-grid--listings {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.doan-listing {
  display: flex;
  flex-direction: column;
  background: var(--doan-surface);
  /* بطاقة فاتحة داخل قسم المتجر الداكن: بلا إعادة ضبط اللون يرث
     العنوان نص الكتلة الفاتح فيصير أبيض على أبيض (١٫٠٩:١). */
  color: var(--doan-ink);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius-lg);
  overflow: hidden;
  box-shadow: var(--doan-shadow);
}

.doan-listing:hover {
  box-shadow: var(--doan-shadow-lg);
}

.doan-listing__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--doan-surface-alt);
  overflow: hidden;
}

.doan-listing__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doan-listing__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--doan-surface-alt),
    var(--doan-surface-alt) 10px,
    var(--doan-line) 10px,
    var(--doan-line) 20px
  );
}

.doan-listing__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--doan-gap-2);
}

.doan-listing__badges:empty {
  display: none;
}

.doan-listing__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.doan-listing__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.doan-listing__title a {
  text-decoration: none;
}

.doan-listing__title a:hover {
  color: var(--doan-brand);
}

.doan-listing__price {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--doan-brand);
  font-variant-numeric: tabular-nums;
}

.doan-listing__meta,
.doan-listing__loc {
  margin: 0;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-listing .doan-contact {
  margin-block-start: auto;
  padding-block-start: 0.5rem;
}

/* ---------- الشارات ---------- */
.doan-badge {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  border-radius: 999px;
}

.doan-badge--verified {
  color: #fff;
  background: var(--doan-success);
}

.doan-badge--expired {
  color: #fff;
  background: var(--doan-ink-soft);
}

/* ---------- أزرار التواصل ---------- */
.doan-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.doan-contact__btn {
  flex: 1 1 auto;
  padding: 0.4375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--doan-ink);
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line-strong);
  border-radius: var(--doan-radius);
}

.doan-contact__btn:hover {
  border-color: var(--doan-brand);
  color: var(--doan-brand);
}

.doan-contact__btn--wa {
  color: #fff;
  background: #16a34a;
  border-color: #16a34a;
}

.doan-contact__btn--wa:hover {
  color: #fff;
  background: #15803d;
  border-color: #15803d;
}

/* ---------- مرشّحات الأرشيف ---------- */
.doan-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-block-end: var(--doan-gap-3);
}

.doan-filters__item {
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--doan-surface);
  border: 1px solid var(--doan-line);
  border-radius: 999px;
}

.doan-filters__item:hover {
  color: #fff;
  background: var(--doan-brand);
  border-color: var(--doan-brand);
}

/* ---------- جدول تفاصيل الإعلان ---------- */
.doan-details {
  width: 100%;
  margin-block: var(--doan-gap-2);
  border-collapse: collapse;
  font-size: 0.875rem;
}

.doan-details th,
.doan-details td {
  padding: 0.625rem 0.5rem;
  text-align: start;
  border-block-end: 1px solid var(--doan-line);
}

.doan-details th {
  width: 35%;
  color: var(--doan-ink-soft);
  font-weight: 600;
}

.doan-single__price {
  margin: 0.5rem 0 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--doan-brand);
}

/* ---------- الاستطلاع ---------- */
.doan-poll {
  padding: var(--doan-gap-3);
  margin-block-end: var(--doan-gap-5);
  color: var(--doan-ink-invert);
  background: var(--doan-dark);
  border-radius: var(--doan-radius-lg);
}

.doan-poll__label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--doan-accent-soft);
}

.doan-poll__question {
  margin: 0.25rem 0 var(--doan-gap-2);
  font-size: 1.25rem;
  color: #fff;
}

.doan-poll__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.doan-poll__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  overflow: hidden;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--doan-radius);
}

.doan-poll__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: color-mix(in srgb, var(--doan-accent) 45%, transparent);
  transition: inline-size 0.6s ease;
}

.doan-poll__choice {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0;
  color: inherit;
  text-align: start;
  background: none;
  border: 0;
}

.doan-poll__choice[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.doan-poll__radio {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--doan-accent-soft);
  border-radius: 999px;
}

.doan-poll__choice:hover .doan-poll__radio {
  background: var(--doan-accent-soft);
}

.doan-poll__text,
.doan-poll__stat {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
}

.doan-poll__stat {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--doan-accent-pale);
  font-variant-numeric: tabular-nums;
}

.doan-poll__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-start: var(--doan-gap-2);
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-poll__closed {
  padding: 0.125rem 0.625rem;
  color: var(--doan-darker);
  background: var(--doan-accent-pale);
  border-radius: 999px;
  font-weight: 700;
}

.doan-poll__message:empty {
  display: none;
}

.doan-poll__message {
  margin: var(--doan-gap-1) 0 0;
  font-size: 0.8125rem;
  color: var(--doan-accent-pale);
}

/* ---------- الصرف والطقس ---------- */
.doan-rates-weather {
  display: grid;
  gap: var(--doan-gap-3);
  grid-template-columns: minmax(0, 1fr);
  margin-block-end: var(--doan-gap-5);
}

/* الطقس هو الأعرض لا الأسعار: جدول الصرف ستة أرقام، وتقرير الطقس
   يحمل مُنتقي قرى وثلاث لوحات. النسبة ٥:٧ كما في النموذج. */
@media (min-width: 768px) {
  .doan-rates-weather {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

.doan-rates,
.doan-weather {
  padding: var(--doan-gap-2);
  background: var(--doan-surface);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius-lg);
}

.doan-rates__head,
.doan-weather__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block-end: 0.5rem;
  margin-block-end: var(--doan-gap-1);
  border-block-end: 2px solid var(--doan-accent);
}

.doan-rates__title,
.doan-weather__title {
  margin: 0;
  font-size: 1.0625rem;
}

.doan-rates__market,
.doan-weather__loc {
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-rates__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.doan-rates__table th,
.doan-rates__table td {
  padding: 0.5rem 0.25rem;
  text-align: start;
  border-block-end: 1px solid var(--doan-line);
}

.doan-rates__table thead th {
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
  font-weight: 700;
}

.doan-rates__table tbody th {
  font-weight: 600;
}

.doan-rates__table td {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.doan-rates__updated {
  margin: var(--doan-gap-1) 0 0;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

/* ---------- مقابلة الأسبوع ---------- */
.doan-interview__body {
  display: grid;
  gap: var(--doan-gap-2);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .doan-interview__body {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }
}

/* نسبة ١٦:٩ محجوزة مسبقًا: بدونها يقفز التخطيط حين يصل إطار الفيديو. */
.doan-interview__video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--doan-radius-lg);
  background: #000;
}

.doan-interview__video iframe,
.doan-interview__video video,
.doan-interview__video object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.doan-interview__cover,
.doan-interview__placeholder {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--doan-radius-lg);
  background: var(--doan-surface-alt);
}

.doan-interview__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doan-interview__issue {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-radius: 999px;
}

.doan-interview__title {
  margin: 0.375rem 0 0.25rem;
  font-size: 1.25rem;
  line-height: 1.45;
}

.doan-interview__title a {
  color: var(--doan-on-block);
  text-decoration: none;
}

.doan-interview__title a:hover {
  color: var(--doan-accent-pale);
}

.doan-interview__guest {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  color: var(--doan-on-block);
}

.doan-interview__guest-label,
.doan-interview__topics-label {
  color: var(--doan-accent-pale);
  font-weight: 700;
}

.doan-interview__role {
  color: var(--doan-on-block-muted);
}

.doan-interview__excerpt {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--doan-on-block-muted);
}

.doan-interview__topics-label {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
}

.doan-interview__topics {
  margin: 0 0 0.75rem;
  padding-inline-start: 1.125rem;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--doan-on-block-muted);
}

.doan-interview__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.6875rem;
  color: var(--doan-on-block-muted);
}

.doan-interview__more {
  padding: 0.375rem 0.875rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-radius: 999px;
}

/* ---------- قصة نجاح الأسبوع ---------- */
.doan-success__body {
  display: grid;
  gap: var(--doan-gap-2);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 768px) {
  .doan-success__body {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

.doan-success__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--doan-radius-lg);
  border: 2px solid color-mix(in srgb, var(--doan-accent) 35%, transparent);
  background: var(--doan-surface-alt);
}

.doan-success__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doan-success__badge {
  position: absolute;
  inset-block-start: 0.625rem;
  inset-inline-end: 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-radius: 999px;
}

.doan-success__badge-ico {
  width: 0.875rem;
  height: 0.875rem;
}

.doan-success__kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--doan-accent-pale);
}

.doan-success__title {
  margin: 0.375rem 0 0.5rem;
  font-size: 1.375rem;
  line-height: 1.4;
}

.doan-success__title a {
  color: var(--doan-on-block);
  text-decoration: none;
}

.doan-success__title a:hover {
  color: var(--doan-accent-pale);
}

.doan-success__excerpt {
  margin: 0 0 0.625rem;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--doan-on-block-muted);
}

.doan-success__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.6875rem;
  color: var(--doan-on-block-muted);
}

.doan-success__more {
  font-weight: 700;
  text-decoration: none;
  color: var(--doan-accent-pale);
}

/* ---------- قائمة القراءة ---------- */
.doan-reading__state,
.doan-reading__empty {
  padding: var(--doan-gap-3);
  font-size: 0.875rem;
  text-align: center;
  color: var(--doan-on-block-muted);
}

.doan-reading__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.doan-reading__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem;
  background: var(--doan-surface);
  color: var(--doan-ink);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius);
}

.doan-reading__thumb {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--doan-radius);
}

.doan-reading__body {
  flex: 1 1 auto;
  min-width: 0;
}

.doan-reading__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--doan-ink);
  text-decoration: none;
}

.doan-reading__title:hover {
  color: var(--doan-brand);
}

.doan-reading__date {
  margin: 0.125rem 0 0;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-reading__remove {
  flex: 0 0 auto;
  width: 1.875rem;
  height: 1.875rem;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  color: var(--doan-ink-soft);
  background: transparent;
  border: 1px solid var(--doan-line);
  border-radius: 999px;
}

.doan-reading__remove:hover {
  color: #dc2626;
  border-color: #dc2626;
}

.doan-reading__actions {
  margin: var(--doan-gap-2) 0 0;
  text-align: center;
}

.doan-reading__clear {
  padding: 0.4375rem 1rem;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--doan-on-block-muted);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
}

.doan-reading__clear:hover {
  color: #fca5a5;
  border-color: #fca5a5;
}

/* ---------- الدليل وخريطة الموقع ---------- */
.doan-directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doan-directory__cat {
  display: block;
  padding: 0.75rem;
  text-decoration: none;
  background: var(--doan-surface);
  color: var(--doan-ink);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius);
}

.doan-directory__cat:hover {
  border-color: var(--doan-accent);
}

.doan-directory__cat-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
}

.doan-directory__cat-count {
  display: block;
  margin-block-start: 0.125rem;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-directory__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--doan-gap-2);
}

.doan-directory__col-title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--doan-accent-pale);
}

.doan-directory__links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 2.1;
}

.doan-directory__links a {
  color: var(--doan-on-block-muted);
  text-decoration: none;
}

.doan-directory__links a:hover {
  color: var(--doan-accent-pale);
}

.doan-directory__empty {
  padding: var(--doan-gap-2);
  font-size: 0.875rem;
  color: var(--doan-on-block-muted);
}

/* ---------- تبويبات لوحة الشريك ---------- */
.doan-portal--wide .doan-portal__card {
  max-width: 60rem;
}

.doan-portal__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-block: var(--doan-gap-2);
  border-block-end: 1px solid var(--doan-line);
}

.doan-portal__nav-item {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--doan-ink-soft);
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
}

.doan-portal__nav-item.is-active {
  color: var(--doan-brand);
  border-block-end-color: var(--doan-brand);
}

.doan-portal__nav-item:hover {
  color: var(--doan-brand);
}

.doan-portal__nav-item:focus-visible {
  outline: 2px solid var(--doan-brand);
  outline-offset: 2px;
}

.doan-portal__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: 0.5rem;
  margin: 0 0 var(--doan-gap-2);
  padding: 0;
  list-style: none;
}

.doan-portal__stat {
  padding: 0.875rem;
  text-align: center;
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius);
}

.doan-portal__stat-value {
  display: block;
  font-size: 1.375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--doan-ink);
}

.doan-portal__stat-label {
  display: block;
  margin-block-start: 0.125rem;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-portal__state {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  border-radius: 999px;
}

.doan-portal__state--on   { color: #065f46; background: #d1fae5; }
.doan-portal__state--soon { color: #92400e; background: #fef3c7; }
.doan-portal__state--off  { color: #991b1b; background: #fee2e2; }

/* ---------- إعدادات الحساب ---------- */
.doan-account__block + .doan-account__block {
  margin-block-start: var(--doan-gap-3);
  padding-block-start: var(--doan-gap-2);
  border-block-start: 1px dashed var(--doan-line);
}

.doan-account__title {
  margin: 0 0 var(--doan-gap-1);
  font-size: 0.9375rem;
}

.doan-account__hint {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-account input[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ---------- الرعاية والإعلان ---------- */
.doan-advertise__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
  margin: 0 0 var(--doan-gap-2);
  padding: 0;
  list-style: none;
}

.doan-advertise__stat {
  padding: 0.625rem;
  text-align: center;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--doan-radius);
}

.doan-advertise__stat-value {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--doan-accent-pale);
}

.doan-advertise__stat-label {
  display: block;
  margin-block-start: 0.125rem;
  font-size: 0.625rem;
  color: var(--doan-on-block-muted);
}

.doan-advertise__h2 {
  margin: var(--doan-gap-2) 0 var(--doan-gap-1);
  font-size: 0.9375rem;
  color: var(--doan-on-block);
}

.doan-advertise__packages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.doan-pkg {
  display: block;
  cursor: pointer;
}

/* زر الاختيار مخفي بصريًا لا معطّل: يبقى في تسلسل Tab ويستقبل التركيز،
   فتعمل الأسهم كما في أي مجموعة اختيار. */
.doan-pkg__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.doan-pkg__box {
  display: block;
  height: 100%;
  padding: 0.75rem;
  background: rgb(255 255 255 / 0.04);
  border: 2px solid rgb(255 255 255 / 0.12);
  border-radius: var(--doan-radius-lg);
}

.doan-pkg:hover .doan-pkg__box {
  border-color: var(--doan-accent-soft);
}

.doan-pkg__input:checked + .doan-pkg__box {
  border-color: var(--doan-accent);
  background: color-mix(in srgb, var(--doan-accent) 14%, transparent);
}

.doan-pkg__input:focus-visible + .doan-pkg__box {
  outline: 2px solid var(--doan-accent-pale);
  outline-offset: 2px;
}

.doan-pkg__badge {
  display: inline-block;
  margin-block-end: 0.25rem;
  padding: 0.0625rem 0.4375rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-radius: 0.25rem;
}

.doan-pkg--red .doan-pkg__badge {
  color: #fff;
  background: #dc2626;
}

.doan-pkg__name {
  display: block;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--doan-on-block);
}

.doan-pkg__desc {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.7;
  color: var(--doan-on-block-muted);
}

.doan-advertise__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.625rem;
}

.doan-advertise__row {
  margin: 0 0 0.625rem;
}

.doan-advertise__row label {
  display: block;
  margin-block-end: 0.1875rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doan-on-block-muted);
}

.doan-advertise__row input,
.doan-advertise__row select,
.doan-advertise__row textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--doan-on-block);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--doan-radius);
}

.doan-advertise__row input:focus-visible,
.doan-advertise__row select:focus-visible,
.doan-advertise__row textarea:focus-visible,
.doan-advertise__submit:focus-visible {
  outline: 2px solid var(--doan-accent-pale);
  outline-offset: 2px;
}

.doan-advertise__submit {
  margin-block-start: 0.5rem;
  padding: 0.625rem 1.75rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border: 0;
  border-radius: 999px;
}

.doan-advertise__consent,
.doan-advertise__done-note {
  margin: 0.5rem 0 0;
  font-size: 0.625rem;
  color: var(--doan-on-block-muted);
}

.doan-advertise__error {
  margin: 0 0 var(--doan-gap-1);
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: #fca5a5;
  background: rgb(239 68 68 / 0.14);
  border: 1px solid rgb(239 68 68 / 0.35);
  border-radius: var(--doan-radius);
}

.doan-advertise__done {
  padding: var(--doan-gap-2);
  font-size: 0.875rem;
  color: var(--doan-on-block);
  background: rgb(16 185 129 / 0.12);
  border: 1px solid rgb(16 185 129 / 0.35);
  border-radius: var(--doan-radius-lg);
}

.doan-advertise__done-title {
  margin: 0 0 0.375rem;
  font-size: 1rem;
  color: #6ee7b7;
}

.doan-advertise__wa {
  display: inline-block;
  margin-block-start: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: #059669;
  border-radius: 999px;
}

.doan-advertise__portal {
  margin: var(--doan-gap-2) 0 0;
  padding-block-start: var(--doan-gap-1);
  font-size: 0.75rem;
  color: var(--doan-on-block-muted);
  border-block-start: 1px dashed rgb(255 255 255 / 0.15);
}

.doan-portal__note,
.doan-portal__empty {
  margin: var(--doan-gap-1) 0 0;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

/* ---------- صفحة المقابلة ---------- */
.doan-iv__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--doan-brand);
}

.doan-iv__kicker-ico {
  width: 1rem;
  height: 1rem;
}

.doan-iv__issue {
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
  background: var(--doan-surface-alt);
  border-radius: 999px;
}

.doan-iv__guest {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 1rem;
  color: var(--doan-ink);
}

.doan-iv__guest-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--doan-ink-soft);
}

.doan-iv__role {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--doan-ink-muted);
}

.doan-iv__role::before {
  content: "—";
  margin-inline-end: 0.375rem;
}

.doan-iv__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-start: 0.75rem;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-iv__video {
  margin-block: var(--doan-gap-2);
}

/* التضمين يأتي بأبعاد ثابتة من المزوّد؛ نجبره على ملء العرض
   بنسبة ١٦:٩ وإلا خرج عن العمود على الشاشات الضيقة. */
.doan-iv__video iframe,
.doan-iv__video embed,
.doan-iv__video object,
.doan-iv__video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--doan-radius-lg);
}

.doan-iv__caption {
  margin-block-start: 0.5rem;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
  text-align: center;
}

.doan-iv__topics {
  margin-block: var(--doan-gap-2);
  padding: var(--doan-gap-2);
  background: var(--doan-surface-alt);
  border-inline-start: 4px solid var(--doan-accent);
  border-radius: var(--doan-radius);
}

.doan-iv__topics-head {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--doan-ink-soft);
}

.doan-iv__topics-list {
  margin: 0;
  padding-inline-start: 1.125rem;
  font-size: 0.9375rem;
  line-height: 2;
  color: var(--doan-ink);
}

.doan-iv__by {
  margin: var(--doan-gap-2) 0 0;
  padding-block-start: var(--doan-gap-2);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--doan-ink-muted);
  border-block-start: 1px solid var(--doan-line);
}

.doan-iv__more {
  margin-block-start: var(--doan-gap-3);
}

.doan-iv__more-head {
  margin: 0 0 var(--doan-gap-2);
  font-size: 1rem;
  color: var(--doan-ink);
}

.doan-iv__more-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doan-iv__more-list li {
  padding: 0.75rem 1rem;
  background: var(--doan-surface);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius);
}

.doan-iv__more-list a {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--doan-ink);
  text-decoration: none;
}

.doan-iv__more-list a:hover {
  color: var(--doan-brand);
}

.doan-iv__more-guest {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

/* ---------- تتبّع طلب الرعاية ---------- */
.doan-track {
  max-width: 44rem;
  padding-block: var(--doan-gap-3);
}

.doan-track__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  color: var(--doan-ink);
}

.doan-track__sub {
  margin: 0 0 var(--doan-gap-2);
  font-size: 0.9375rem;
  color: var(--doan-ink-muted);
}

.doan-track__label {
  display: block;
  margin-block-end: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--doan-ink);
}

.doan-track__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.doan-track__input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  /* الرمز لاتيني دائمًا — تركه للاتجاه العربي يقلب DN- إلى -DN. */
  direction: ltr;
  text-align: start;
  letter-spacing: 0.08em;
  color: var(--doan-ink);
  background: var(--doan-surface);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius);
}

.doan-track__input:focus-visible {
  outline: 2px solid var(--doan-brand);
  outline-offset: 1px;
}

.doan-track__btn {
  flex: 0 0 auto;
  padding: 0.75rem 2rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border: 0;
  border-radius: var(--doan-radius);
  cursor: pointer;
}

.doan-track__btn:hover {
  background: var(--doan-accent-soft);
}

.doan-track__error {
  margin: var(--doan-gap-2) 0 0;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: var(--doan-radius);
}

.doan-track__card {
  margin-block-start: var(--doan-gap-3);
  padding: var(--doan-gap-3);
  background: var(--doan-surface);
  color: var(--doan-ink);
  border: 1px solid var(--doan-line);
  /* الشريط الجانبي يحمل لون الحالة — اللون وحده لا يكفي، فالشارة
     النصّية أعلاه تقول الحالة صراحةً لمن لا يميّز الألوان. */
  border-inline-start: 5px solid var(--doan-line);
  border-radius: var(--doan-radius-lg);
}

.doan-track__card--info { border-inline-start-color: #2563eb; }
.doan-track__card--warn { border-inline-start-color: #d97706; }
.doan-track__card--ok   { border-inline-start-color: #15803d; }
.doan-track__card--bad  { border-inline-start-color: #b91c1c; }

.doan-track__badge {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 999px;
}

.doan-track__card--info .doan-track__badge { color: #1e40af; background: #dbeafe; }
.doan-track__card--warn .doan-track__badge { color: #92400e; background: #fef3c7; }
.doan-track__card--ok   .doan-track__badge { color: #14532d; background: #dcfce7; }
.doan-track__card--bad  .doan-track__badge { color: #991b1b; background: #fee2e2; }

.doan-track__name {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: var(--doan-ink);
}

.doan-track__note {
  margin: 0 0 var(--doan-gap-2);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--doan-ink-muted);
}

.doan-track__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--doan-gap-2);
  margin: 0;
  padding-block-start: var(--doan-gap-2);
  border-block-start: 1px solid var(--doan-line);
}

.doan-track__facts dt {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--doan-ink-soft);
}

.doan-track__facts dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--doan-ink);
}

.doan-track__facts code {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.doan-track__reply {
  margin-block-start: var(--doan-gap-2);
  padding: var(--doan-gap-2);
  background: var(--doan-surface-alt);
  border-radius: var(--doan-radius);
}

.doan-track__reply h3 {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  color: var(--doan-ink-soft);
}

.doan-track__reply p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--doan-ink);
}

.doan-track__help {
  margin-block-start: var(--doan-gap-2);
  font-size: 0.875rem;
  color: var(--doan-ink-muted);
}

/* ---------- معرض صور المنتج ---------- */
.doan-gallery {
  margin-block-start: var(--doan-gap-3);
}

.doan-gallery__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--doan-gap-2);
  font-size: 1rem;
  color: var(--doan-ink);
}

.doan-gallery__ico {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--doan-brand);
}

.doan-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doan-gallery__link {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--doan-radius);
  background: var(--doan-surface-alt);
}

.doan-gallery__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.doan-gallery__link:hover img {
  transform: scale(1.05);
}

.doan-gallery__link:focus-visible {
  outline: 3px solid var(--doan-brand);
  outline-offset: 2px;
}

/* ---------- العارض المنبثق ---------- */
.doan-lightbox {
  width: min(96vw, 68rem);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: visible;
}

.doan-lightbox::backdrop {
  background: rgb(0 0 0 / 0.88);
}

.doan-lightbox__box {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.doan-lightbox__figure {
  margin: 0;
  text-align: center;
}

.doan-lightbox__img {
  max-width: 100%;
  /* مساحة للعدّاد وأزرار التنقّل أسفل الشاشات القصيرة. */
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--doan-radius);
}

.doan-lightbox__cap {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.8;
  color: #e5e7eb;
}

.doan-lightbox__close,
.doan-lightbox__nav {
  display: grid;
  place-items: center;
  /* ٤٤ بكسل حدّ اللمس الأدنى — الأزرار هنا تُستعمل بالإبهام غالبًا. */
  width: 2.75rem;
  height: 2.75rem;
  color: #fff;
  background: rgb(255 255 255 / 0.14);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.doan-lightbox__close:hover,
.doan-lightbox__nav:hover {
  background: rgb(255 255 255 / 0.28);
}

.doan-lightbox__close:focus-visible,
.doan-lightbox__nav:focus-visible {
  outline: 3px solid var(--doan-accent);
  outline-offset: 2px;
}

.doan-lightbox__close {
  position: absolute;
  inset-block-start: -3.25rem;
  inset-inline-end: 0;
}

.doan-lightbox__ico {
  width: 1.5rem;
  height: 1.5rem;
}

.doan-lightbox__count {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  color: #d1d5db;
}

@media (max-width: 600px) {
  /* الشاشة الضيقة: الصورة تأخذ العرض كاملًا وأزرار التنقّل تنزل تحتها
     بدل أن تقتطع منها — قضم ٩٠ بكسل من صورة عرضها ٣٢٠ لا يُحتمل. */
  .doan-lightbox__box {
    grid-template-columns: 1fr 1fr;
  }

  .doan-lightbox__figure {
    grid-column: 1 / -1;
    order: -1;
  }

  .doan-lightbox__nav--prev {
    justify-self: start;
  }

  .doan-lightbox__nav--next {
    justify-self: end;
  }
}

/* ---------- الوظائف ---------- */
.doan-jobs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--doan-gap-2);
}

.doan-job {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--doan-gap-2);
  background: var(--doan-surface);
  color: var(--doan-ink);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius-lg);
}

.doan-job:hover {
  border-color: var(--doan-accent);
}

.doan-job__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.doan-job__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.doan-job__title a {
  color: var(--doan-ink);
  text-decoration: none;
}

.doan-job__title a:hover {
  color: var(--doan-brand);
}

.doan-job__type {
  flex: 0 0 auto;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-radius: 999px;
}

.doan-job__employer {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--doan-brand);
}

.doan-job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-job__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.doan-job__ico {
  width: 0.875rem;
  height: 0.875rem;
}

/* آخر ثلاثة أيام: تمييز لوني ونصّي معًا — اللون وحده لا يصل
   لمن لا يميّزه، والنص «يبقى يومان» يحمل المعنى كاملًا. */
.doan-job__urgent {
  font-weight: 800;
  color: #b91c1c;
}

.doan-job__excerpt {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--doan-ink-muted);
}

.doan-job__more {
  margin-block-start: auto;
  padding-block-start: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doan-brand);
  text-decoration: none;
}

.doan-job__closed,
.doan-job__soon {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--doan-radius);
}

.doan-job__closed {
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
}

.doan-job__soon {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
}

.doan-job__apply {
  margin: var(--doan-gap-2) 0 0;
}

.doan-job__apply-btn {
  display: inline-block;
  padding: 0.625rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-radius: 999px;
}

.doan-job__apply-btn:hover {
  background: var(--doan-accent-soft);
}

.doan-job__apply-btn:focus-visible {
  outline: 2px solid var(--doan-brand);
  outline-offset: 2px;
}

.doan-job__apply-text {
  margin: var(--doan-gap-2) 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  background: var(--doan-surface-alt);
  border-radius: var(--doan-radius);
}

/* ---------- بطاقة المتجر في صفحة المنتج ---------- */
.doan-storecard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block: var(--doan-gap-2);
  padding: 0.75rem 1rem;
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line);
  border-inline-start: 3px solid var(--doan-accent);
  border-radius: var(--doan-radius);
}

.doan-storecard__label {
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-storecard__name {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--doan-ink);
  text-decoration: none;
}

.doan-storecard__name:hover {
  color: var(--doan-brand);
}

.doan-storecard__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-storecard__more {
  margin-inline-start: auto;
  padding: 0.3125rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-radius: 999px;
}

.doan-storecard__more:hover {
  background: var(--doan-accent-soft);
}

.doan-storecard__more:focus-visible,
.doan-storecard__name:focus-visible {
  outline: 2px solid var(--doan-brand);
  outline-offset: 2px;
}

/* ---------- متجر دوعن ---------- */
.doan-store__filters {
  margin-block: var(--doan-gap-2);
}

.doan-store__search {
  display: flex;
  gap: 0.375rem;
}

.doan-store__search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.875rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--doan-on-block);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
}

.doan-store__search-input::placeholder {
  color: var(--doan-on-block-muted);
}

.doan-store__search-btn {
  flex: 0 0 auto;
  padding: 0.5rem 1.25rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border: 0;
  border-radius: 999px;
}

.doan-store__cats {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding-block-end: 0.375rem;
  margin-block-end: var(--doan-gap-1);
  scrollbar-width: thin;
}

.doan-store__cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.4375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: var(--doan-on-block-muted);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 999px;
}

.doan-store__cat.is-active,
.doan-store__cat:hover {
  color: var(--doan-darker);
  background: var(--doan-accent-soft);
  border-color: var(--doan-accent-soft);
}

.doan-store__cat-icon {
  font-size: 0.9375rem;
  line-height: 1;
}

.doan-store__subs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-block-end: var(--doan-gap-1);
}

.doan-store__sub {
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  text-decoration: none;
  color: var(--doan-accent-pale);
  border: 1px dashed rgb(255 255 255 / 0.2);
  border-radius: 999px;
}

.doan-store__sub:hover {
  color: var(--doan-darker);
  background: var(--doan-accent-soft);
  border-style: solid;
}

.doan-store__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--doan-gap-1);
  margin-block-end: var(--doan-gap-1);
}

.doan-store__toggles,
.doan-store__selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.doan-store__toggle {
  padding: 0.3125rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--doan-on-block-muted);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
}

.doan-store__toggle.is-on {
  color: var(--doan-darker);
  background: #34d399;
  border-color: #34d399;
}

.doan-store__clear {
  font-size: 0.6875rem;
  color: #fca5a5;
  text-decoration: underline;
}

.doan-store__select select {
  padding: 0.3125rem 0.5rem;
  font: inherit;
  font-size: 0.6875rem;
  color: var(--doan-on-block);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--doan-radius);
}

.doan-store__count {
  margin: 0 0 var(--doan-gap-1);
  font-size: 0.6875rem;
  color: var(--doan-on-block-muted);
}

.doan-store__empty {
  padding: var(--doan-gap-3);
  font-size: 0.875rem;
  text-align: center;
  color: var(--doan-on-block-muted);
}

.doan-store__search-input:focus-visible,
.doan-store__search-btn:focus-visible,
.doan-store__cat:focus-visible,
.doan-store__sub:focus-visible,
.doan-store__toggle:focus-visible,
.doan-store__select select:focus-visible {
  outline: 2px solid var(--doan-accent-pale);
  outline-offset: 2px;
}

/* شارة الخصم والتقييم داخل البطاقة */
.doan-badge--deal {
  color: #fff;
  background: #dc2626;
}

.doan-listing__was {
  margin-inline-start: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--doan-ink-soft);
  text-decoration: line-through;
}

.doan-listing__rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-stars {
  display: inline-flex;
  gap: 0.0625rem;
  line-height: 1;
}

/*
 * النجمة الفارغة كانت بلون الحدود (تباين ١٫٢٣:١) فلا تكاد تُرى، فيبدو
 * تقييم ٣ من ٥ وكأنه ثلاث نجوم فقط لا ثلاث من خمس. نُغمّقها لتُقرأ
 * «الفارغة» دون أن نمسّ لون النجمة الممتلئة (لون الهوية).
 */
.doan-star {
  color: var(--doan-ink-soft);
  font-size: 0.8125rem;
}

.doan-star.is-full {
  color: #f59e0b;
}

/* النصف نجمة: تدرّج قاطع لا رمز منفصل — يحترم اتجاه الصفحة تلقائيًا. */
.doan-star.is-half {
  color: #f59e0b;
  background: linear-gradient(to left, currentColor 50%, var(--doan-ink-soft) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- النشرة ومجموعات الواتساب ---------- */
.doan-subscribe__body {
  display: grid;
  gap: var(--doan-gap-2);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .doan-subscribe__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.doan-subscribe__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  color: var(--doan-on-block);
}

.doan-subscribe__ico {
  width: 1rem;
  height: 1rem;
  color: #34d399;
}

.doan-subscribe__lead {
  margin: 0 0 var(--doan-gap-1);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--doan-on-block-muted);
}

.doan-subscribe__row {
  display: flex;
  gap: 0.375rem;
}

.doan-subscribe__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--doan-on-block);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--doan-radius);
}

.doan-subscribe__input::placeholder {
  color: var(--doan-on-block-muted);
}

.doan-subscribe__btn {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border: 0;
  border-radius: var(--doan-radius);
}

.doan-subscribe__btn:hover {
  background: var(--doan-accent-soft);
}

.doan-subscribe__input:focus-visible,
.doan-subscribe__btn:focus-visible,
.doan-subscribe__group:focus-visible {
  outline: 2px solid var(--doan-accent-pale);
  outline-offset: 2px;
}

/* المصيدة مخفية بلا display:none — بعض الآليات تتجاهل المخفي بذلك. */
.doan-subscribe__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.doan-subscribe__consent {
  margin: 0.5rem 0 0;
  font-size: 0.625rem;
  line-height: 1.7;
  color: var(--doan-on-block-muted);
}

.doan-subscribe__msg {
  margin: 0 0 var(--doan-gap-1);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  border-radius: var(--doan-radius);
}

.doan-subscribe__msg.is-ok {
  color: #6ee7b7;
  background: rgb(16 185 129 / 0.14);
  border: 1px solid rgb(16 185 129 / 0.35);
}

.doan-subscribe__msg.is-error {
  color: #fca5a5;
  background: rgb(239 68 68 / 0.14);
  border: 1px solid rgb(239 68 68 / 0.35);
}

.doan-subscribe__groups {
  padding: var(--doan-gap-2);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--doan-radius-lg);
}

.doan-subscribe__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doan-subscribe__group {
  display: block;
  padding: 0.4375rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #a7f3d0;
  background: rgb(5 150 105 / 0.28);
  border: 1px solid rgb(16 185 129 / 0.35);
  border-radius: var(--doan-radius);
}

.doan-subscribe__group:hover {
  color: #fff;
  background: #059669;
  border-color: #059669;
}

/* ---------- الإذاعة ---------- */
.doan-radio__live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--doan-gap-2);
  padding: var(--doan-gap-2);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--doan-radius-lg);
}

.doan-radio__live-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-radius: 999px;
}

.doan-radio__live-icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.doan-radio__live-body {
  flex: 1 1 10rem;
  min-width: 0;
}

.doan-radio__live-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--doan-on-block);
}

.doan-radio__sched {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--doan-on-block-muted);
}

.doan-radio__listen {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-radius: 999px;
}

.doan-radio__listen:hover {
  background: var(--doan-accent-soft);
}

.doan-radio__listen:focus-visible {
  outline: 2px solid var(--doan-accent-pale);
  outline-offset: 2px;
}

/* ---------- حاسبة التحويل ---------- */
.doan-conv {
  margin-block-start: var(--doan-gap-2);
  padding-block-start: var(--doan-gap-2);
  border-block-start: 1px dashed var(--doan-line);
}

.doan-conv__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 var(--doan-gap-1);
  font-size: 0.8125rem;
}

.doan-conv__ico {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--doan-accent);
}

.doan-conv__dir {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-conv__row {
  display: flex;
  gap: 0.375rem;
}

.doan-conv__amount {
  flex: 1 1 4rem;
  min-width: 0;
  padding: 0.4375rem 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--doan-ink);
  background: var(--doan-page);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius);
}

.doan-conv__currency {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.4375rem 0.5rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--doan-ink);
  background: var(--doan-page);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius);
}

.doan-conv__swap {
  flex: 0 0 auto;
  width: 2.25rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border: 0;
  border-radius: var(--doan-radius);
}

.doan-conv__swap:focus-visible,
.doan-conv__amount:focus-visible,
.doan-conv__currency:focus-visible {
  outline: 2px solid var(--doan-accent);
  outline-offset: 1px;
}

.doan-conv__out {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: var(--doan-gap-1) 0 0;
}

.doan-conv__result {
  font-size: 1.375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--doan-accent-strong, var(--doan-ink));
}

.doan-conv__unit {
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-conv__note {
  margin: 0.125rem 0 0;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

/* ---------- تقرير الطقس ---------- */
.doan-weather__head {
  align-items: center;
}

.doan-weather__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-radius: 0.625rem;
}

.doan-weather__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.doan-weather__titles {
  flex: 1 1 auto;
  min-width: 0;
}

.doan-weather__title-en {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--doan-ink-soft);
}

.doan-weather__sub {
  margin: 0.125rem 0 0;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

/* مُنتقي القرى — شريط أفقي يمرَّر، فالقرى تسع وأكثر. */
.doan-weather__villages {
  display: flex;
  gap: 0.375rem;
  margin-block: var(--doan-gap-1);
  padding-block-end: 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.doan-weather__village {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  text-decoration: none;
  color: var(--doan-ink-muted);
  background: var(--doan-surface-2, rgb(0 0 0 / 0.03));
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius);
}

.doan-weather__village:hover {
  border-color: var(--doan-accent);
}

.doan-weather__village.is-active {
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-color: var(--doan-accent);
}

.doan-weather__village:focus-visible {
  outline: 2px solid var(--doan-accent);
  outline-offset: 2px;
}

.doan-weather__village-name {
  font-weight: 700;
  white-space: nowrap;
}

.doan-weather__village-temp {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* القراءة الحالية */
.doan-wx__now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--doan-gap-2);
  padding: var(--doan-gap-2);
  background: color-mix(in srgb, var(--doan-accent) 8%, transparent);
  border-radius: var(--doan-radius);
}

.doan-wx__cond-icon {
  color: var(--doan-accent);
}

.doan-wx__cond-icon svg {
  width: 2.75rem;
  height: 2.75rem;
}

.doan-wx__reading {
  flex: 1 1 6rem;
  min-width: 0;
}

.doan-wx__temp {
  margin: 0;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--doan-ink);
}

.doan-wx__cond {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  font-weight: 700;
}

.doan-wx__feels,
.doan-wx__elev {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-wx__range {
  flex: 1 1 8rem;
  min-width: 0;
  text-align: end;
}

.doan-wx__place {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.doan-wx__region {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--doan-ink-soft);
}

.doan-wx__hilo {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* تبويبات فرعية */
.doan-wx__tabs {
  display: flex;
  gap: 0.25rem;
  margin-block: var(--doan-gap-1);
}

.doan-wx__tab {
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doan-ink-soft);
  text-decoration: none;
  border: 1px solid var(--doan-line);
  border-radius: 999px;
}

.doan-wx__tab.is-active {
  color: var(--doan-darker);
  background: var(--doan-accent);
  border-color: var(--doan-accent);
}

.doan-wx__tab:focus-visible {
  outline: 2px solid var(--doan-accent);
  outline-offset: 2px;
}

.doan-wx__panel:focus {
  outline: none;
}

/* شبكة التفاصيل */
.doan-wx__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

@media (min-width: 480px) {
  .doan-wx__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.doan-wx__spec {
  padding: 0.5rem;
  background: var(--doan-surface-2, rgb(0 0 0 / 0.03));
  border-radius: var(--doan-radius);
}

.doan-wx__spec dt {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  color: var(--doan-ink-soft);
}

.doan-wx__spec-ico {
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 auto;
}

.doan-wx__spec dd {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* التوقّع الساعي */
.doan-wx__hours {
  display: flex;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.doan-wx__hour {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 3.25rem;
  padding: 0.5rem 0.25rem;
  background: var(--doan-surface-2, rgb(0 0 0 / 0.03));
  border-radius: var(--doan-radius);
}

.doan-wx__hour-time {
  font-size: 0.625rem;
  color: var(--doan-ink-soft);
  font-variant-numeric: tabular-nums;
}

.doan-wx__hour-ico {
  color: var(--doan-accent);
}

.doan-wx__hour-ico svg {
  width: 1rem;
  height: 1rem;
}

.doan-wx__hour-temp {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* خمسة أيام */
.doan-wx__days {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doan-wx__day {
  display: grid;
  grid-template-columns: 5rem 1.25rem 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.25rem;
  font-size: 0.75rem;
  border-block-end: 1px solid var(--doan-line);
}

.doan-wx__day:last-child {
  border-block-end: 0;
}

.doan-wx__day-name {
  font-weight: 700;
}

.doan-wx__day-ico {
  color: var(--doan-accent);
}

.doan-wx__day-ico svg,
.doan-wx__day-ico-sm {
  width: 1rem;
  height: 1rem;
}

.doan-wx__day-cond {
  color: var(--doan-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doan-wx__day-rain {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  color: var(--doan-ink-soft);
  font-variant-numeric: tabular-nums;
}

.doan-wx__day-temps {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.doan-wx__day-low {
  color: var(--doan-ink-soft);
  font-weight: 500;
}

.doan-wx__empty {
  margin: 0;
  padding: var(--doan-gap-2);
  font-size: 0.8125rem;
  color: var(--doan-ink-soft);
  text-align: center;
}

.doan-weather__flood {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: var(--doan-gap-1) 0 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--doan-accent) 12%, transparent);
  border-inline-start: 3px solid var(--doan-accent);
  border-radius: var(--doan-radius);
}

.doan-weather__flood-ico {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-block-start: 0.0625rem;
}

.doan-weather__sponsor,
.doan-weather__source {
  margin: var(--doan-gap-1) 0 0;
  font-size: 0.625rem;
  color: var(--doan-ink-soft);
}

/* ---------- شورت‑كودات القالب السابق ---------- */
.doan-figure--full {
  margin: var(--doan-gap-3) 0;
}

.doan-figure--full img {
  width: 100%;
  border-radius: var(--doan-radius);
}

.doan-sc-box {
  padding: var(--doan-gap-2);
  margin-block: var(--doan-gap-2);
  background: var(--doan-surface-alt);
  border-inline-start: 4px solid var(--doan-accent);
  border-radius: var(--doan-radius);
}

.doan-sc-box--warning {
  border-inline-start-color: var(--doan-breaking);
}

.doan-sc-box--success {
  border-inline-start-color: var(--doan-success);
}

.doan-sc-divider {
  margin-block: var(--doan-gap-3);
  border: 0;
  border-block-start: 1px solid var(--doan-line);
}

.doan-sc-toggle {
  padding: 0.75rem var(--doan-gap-2);
  margin-block: var(--doan-gap-2);
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius);
}

.doan-sc-toggle summary {
  font-weight: 700;
  cursor: pointer;
}

.doan-dropcap {
  float: inline-start;
  margin-inline-end: 0.375rem;
  font-family: var(--doan-font-display);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 0.9;
  color: var(--doan-brand);
}

/* ---------- نص المقال ---------- */
.doan-prose {
  font-size: 1.0625rem;
  line-height: 1.95;
}

.doan-prose p {
  margin-block-end: 1.5rem;
}

.doan-prose img {
  height: auto;
  border-radius: var(--doan-radius);
}

.doan-prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--doan-gap-2);
  border-inline-start: 4px solid var(--doan-accent);
  color: var(--doan-ink-muted);
}

.doan-prose figcaption {
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
  text-align: center;
}

/* ---------- المساعد الذكي ---------- */
.doan-ai-fab {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--doan-darker);
  background: var(--doan-accent-soft);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--doan-shadow-lg);
}

.doan-ai-fab:hover {
  background: var(--doan-accent-pale);
}

@media (max-width: 480px) {
  .doan-ai-fab__text {
    display: none;
  }
}

.doan-ai[hidden] {
  display: none;
}

.doan-ai {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.doan-ai__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(2 6 23 / 0.6);
}

.doan-ai__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  width: min(100%, 26rem);
  background: var(--doan-surface);
  box-shadow: var(--doan-shadow-lg);
}

.doan-ai__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--doan-gap-2);
  color: var(--doan-ink-invert);
  background: var(--doan-dark);
}

.doan-ai__title {
  margin: 0;
  font-size: 1rem;
  color: var(--doan-accent-pale);
}

.doan-ai__close {
  padding: 0 0.5rem;
  font-size: 1.5rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
}

.doan-ai__scope {
  margin: 0;
  padding: 0.5rem var(--doan-gap-2);
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
  background: var(--doan-surface-alt);
  border-block-end: 1px solid var(--doan-line);
}

.doan-ai__log {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--doan-gap-2);
  overflow-y: auto;
}

.doan-ai__msg {
  max-width: 85%;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  border-radius: var(--doan-radius-lg);
  white-space: pre-wrap;
}

.doan-ai__msg--user {
  align-self: flex-start;
  color: var(--doan-darker);
  background: var(--doan-accent-pale);
}

.doan-ai__msg--bot {
  align-self: flex-end;
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line);
}

.doan-ai__msg.is-pending {
  opacity: 0.6;
}

.doan-ai__msg.is-error {
  color: #fff;
  background: var(--doan-breaking);
  border-color: var(--doan-breaking);
}

.doan-ai__form {
  display: flex;
  gap: 0.375rem;
  padding: var(--doan-gap-2);
  border-block-start: 1px solid var(--doan-line);
}

.doan-ai__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--doan-ink);
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line-strong);
  border-radius: var(--doan-radius);
}

.doan-ai__send {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--doan-brand);
  border: 0;
  border-radius: var(--doan-radius);
}

.doan-no-scroll {
  overflow: hidden;
}

/* ---------- دعوة كن مراسلًا ---------- */
.doan-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--doan-gap-2);
  padding: var(--doan-gap-3);
  color: var(--doan-ink-invert);
  background: linear-gradient(135deg, var(--doan-brand-strong), var(--doan-darker));
  border-radius: var(--doan-radius-lg);
}

.doan-cta__title {
  margin: 0 0 0.25rem;
  font-size: 1.375rem;
  color: var(--doan-accent-pale);
}

.doan-cta__text {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.9;
}

.doan-cta__btn {
  background: var(--doan-accent);
  color: var(--doan-darker);
}

.doan-cta__btn:hover {
  background: var(--doan-accent-soft);
}

/* ---------- ترويسة الأرشيف ---------- */
.doan-archive-head {
  padding-block-end: var(--doan-gap-2);
  margin-block-end: var(--doan-gap-3);
  border-block-end: 2px solid var(--doan-brand);
}

.doan-archive-head__title {
  margin: 0;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
}

.doan-archive-head__desc {
  font-size: 0.875rem;
  color: var(--doan-ink-muted);
}

/* ---------- الشريط الجانبي ---------- */
.doan-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--doan-gap-3);
}

@media (min-width: 1024px) {
  .doan-sidebar--sticky {
    position: sticky;
    inset-block-start: 4rem;
  }
}

.doan-widget {
  padding: var(--doan-gap-2);
  background: var(--doan-surface);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius-lg);
}

.doan-widget__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.9375rem;
}

.doan-widget__ico {
  width: 1rem;
  height: 1rem;
  color: var(--doan-accent);
}

/* ---------- الأكثر قراءة ---------- */
.doan-most-read__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block-end: 0.5rem;
  margin-block-end: 0.5rem;
  border-block-end: 2px solid var(--doan-brand);
}

.doan-most-read__range {
  font-size: 0.6875rem;
  color: var(--doan-brand);
  font-weight: 700;
}

.doan-most-read__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doan-most-read__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--doan-line);
}

.doan-most-read__item:last-child {
  border-block-end: 0;
}

/* الرقم الضخم الباهت — العنصر البصري المميّز للقائمة */
.doan-most-read__rank {
  flex: 0 0 auto;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--doan-line-strong);
}

.doan-most-read__title {
  margin: 0 0 0.25rem;
  font-family: var(--doan-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
}

.doan-most-read__title a {
  text-decoration: none;
}

.doan-most-read__title a:hover {
  color: var(--doan-brand);
}

.doan-most-read__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

/* ---------- صرف مضغوط ---------- */
.doan-rates-mini__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block-end: 0.5rem;
  margin-block-end: 0.5rem;
  border-block-end: 2px solid var(--doan-success);
}

.doan-rates-mini__flag {
  padding: 0.0625rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: #fff;
  background: var(--doan-breaking);
  border-radius: 999px;
}

.doan-rates-mini__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doan-rates-mini__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.4375rem;
  font-size: 0.8125rem;
}

.doan-rates-mini__val {
  color: var(--doan-success);
}

.doan-rates-mini__sponsor {
  margin: 0.5rem 0 0;
  font-size: 0.625rem;
  color: var(--doan-ink-soft);
}

/* ---------- بطاقة قناة الواتساب ---------- */
.doan-wa-card {
  color: #fff;
  background: var(--doan-brand);
  border-color: var(--doan-brand-strong);
  text-align: center;
}

.doan-wa-card__title {
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
}

.doan-wa-card__text {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  opacity: 0.9;
}

.doan-wa-card__cta {
  display: block;
  padding: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--doan-darker);
  border-radius: var(--doan-radius);
}

/* ---------- التذييل ---------- */
/**
 * خلفية **فاتحة** بعكس بقية الصفحة — انقلاب تباين مقصود في النموذج
 * يقول بصريًا «انتهى المحتوى». ليس سهوًا.
 */
.doan-footer {
  margin-block-start: var(--doan-gap-5);
  padding-block: var(--doan-gap-4);
  color: var(--doan-ink-muted);
  background: #f8fafc;
  border-block-start: 1px solid var(--doan-line-strong);
}

.doan-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--doan-gap-2);
  padding-block-end: var(--doan-gap-2);
  margin-block-end: var(--doan-gap-3);
  border-block-end: 1px solid var(--doan-line);
}

.doan-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.doan-footer__mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #fff;
  background: var(--doan-brand);
  border-radius: var(--doan-radius);
}

.doan-footer__mark svg {
  width: 1.375rem;
  height: 1.375rem;
}

.doan-footer__tagline {
  margin: 0;
  font-family: var(--doan-font-display);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--doan-ink-soft);
}

.doan-footer__top-link {
  padding: 0.4375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--doan-brand);
  border-radius: var(--doan-radius);
}

.doan-footer__top-link:hover {
  background: var(--doan-brand-strong);
}

.doan-footer__cols,
.doan-footer__widgets {
  display: grid;
  gap: var(--doan-gap-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-block-end: var(--doan-gap-3);
}

.doan-footer__heading {
  margin: 0 0 0.75rem;
  padding-block-end: 0.5rem;
  font-size: 0.9375rem;
  color: var(--doan-brand);
  border-block-end: 1px solid var(--doan-line);
}

.doan-footer__about {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.9;
}

.doan-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

.doan-footer__list li {
  margin-block-end: 0.4375rem;
}

.doan-footer__list a {
  text-decoration: none;
}

.doan-footer__list a:hover {
  color: var(--doan-brand);
}

.doan-footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

.doan-footer__contact-item {
  margin-block-end: 0.5rem;
}

.doan-footer__contact a {
  text-decoration: none;
}

.doan-footer .doan-widget {
  background: transparent;
  border: 0;
  padding: 0;
}

.doan-footer__bottom {
  padding-block-start: var(--doan-gap-2);
  border-block-start: 1px solid var(--doan-line);
}

.doan-footer__copy {
  margin: 0;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

/* ---------- بطاقة مجتمع الصحيفة ---------- */
.doan-community {
  display: grid;
  gap: var(--doan-gap-3);
  align-items: center;
  padding: var(--doan-gap-3);
  margin-block-end: var(--doan-gap-3);
  color: var(--doan-ink-invert);
  background: linear-gradient(120deg, var(--doan-darker), var(--doan-brand-strong));
  border-radius: var(--doan-radius-block);
}

@media (min-width: 900px) {
  .doan-community {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

.doan-community__badge {
  display: inline-block;
  padding: 0.1875rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--doan-darker);
  background: var(--doan-accent-pale);
  border-radius: 999px;
}

.doan-community__title {
  margin: 0.5rem 0;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  color: var(--doan-accent-pale);
}

.doan-community__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.9;
  opacity: 0.88;
}

.doan-community__grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.doan-community__card {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--doan-radius);
}

.doan-community__card:hover {
  background: rgb(255 255 255 / 0.16);
}

.doan-community__name {
  font-size: 0.8125rem;
}

.doan-community__desc {
  font-size: 0.6875rem;
  opacity: 0.7;
}

.doan-community__card--wa { border-color: rgb(22 163 74 / 0.5); }
.doan-community__card--yt { border-color: rgb(220 38 38 / 0.5); }
.doan-community__card--tg { border-color: rgb(56 189 248 / 0.5); }
.doan-community__card--fb { border-color: rgb(59 130 246 / 0.5); }

/* ---------- الشريط السفلي العائم ---------- */
.doan-anchor[hidden] {
  display: none;
}

.doan-anchor {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 70;
  color: var(--doan-ink-invert);
  background: var(--doan-darker);
  border-block-start: 2px solid var(--doan-brand);
}

.doan-anchor__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: var(--doan-container);
  margin-inline: auto;
  padding: 0.625rem var(--doan-gap-2);
}

.doan-anchor__label {
  padding: 0.125rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--doan-darker);
  background: var(--doan-accent-pale);
  border-radius: 999px;
}

.doan-anchor__text {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
}

.doan-anchor__cta {
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--doan-brand);
  border-radius: var(--doan-radius);
}

.doan-anchor__close {
  padding: 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  opacity: 0.6;
}

.doan-anchor__close:hover {
  opacity: 1;
}

/* إفساح مكان للشريط حتى لا يغطي آخر المحتوى */
body.has-doan-anchor .doan-footer {
  padding-block-end: 4.5rem;
}

/* ---------- الترقيم ---------- */
.doan-pagination {
  margin-block-start: var(--doan-gap-4);
}

.doan-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}

.doan-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--doan-surface);
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius);
}

.doan-pagination .page-numbers.current,
.doan-pagination .page-numbers:hover {
  color: #fff;
  background: var(--doan-brand);
  border-color: var(--doan-brand);
}

/* ---------- الحالات الفارغة والأزرار ---------- */
.doan-empty {
  padding: var(--doan-gap-4) var(--doan-gap-2);
  text-align: center;
}

.doan-empty__text {
  color: var(--doan-ink-muted);
}

.doan-btn {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--doan-brand);
  border: 0;
  border-radius: var(--doan-radius);
  text-decoration: none;
}

.doan-btn:hover {
  background: var(--doan-brand-strong);
}


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

/* ==========================================================================
   صفحة المقال
   ========================================================================== */

/* ---------- شريط أدوات القارئ ---------- */
.doan-reader-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 55;
  color: var(--doan-on-block);
  background: var(--doan-dark);
}

.doan-reader-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.5rem;
}

.doan-reader-bar__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.doan-reader-bar__cat {
  padding: 0.1875rem 0.75rem;
  font-weight: 800;
  color: var(--doan-darker);
  text-decoration: none;
  background: var(--doan-accent-soft);
  border-radius: 999px;
}

.doan-reader-bar__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--doan-on-block-muted);
}

.doan-reader-bar__ico {
  width: 0.875rem;
  height: 0.875rem;
}

.doan-reader-bar__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.doan-reader-bar__group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem;
  background: rgb(255 255 255 / 0.08);
  border-radius: 999px;
}

.doan-reader-bar__size {
  min-width: 2.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.doan-reader-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doan-on-block);
  background: rgb(255 255 255 / 0.08);
  border: 0;
  border-radius: 999px;
}

.doan-reader-bar__btn--wide {
  padding-inline: 0.875rem;
}

.doan-reader-bar__btn:hover {
  background: rgb(255 255 255 / 0.18);
}

.doan-reader-bar__btn[aria-pressed="true"],
.doan-reader-bar__btn.is-done {
  color: var(--doan-darker);
  background: var(--doan-accent-soft);
}

/* شريط تقدّم القراءة أسفل الشريط */
.doan-reader-bar__progress {
  block-size: 3px;
  inline-size: 0;
  background: var(--doan-accent);
  transition: inline-size 0.1s linear;
}

/* ---------- وضع التركيز ---------- */
.doan-focus .doan-layout__aside,
.doan-focus .doan-topbar,
.doan-focus .doan-actions,
.doan-focus .doan-nav,
.doan-focus .doan-section--related,
.doan-focus .doan-ad,
.doan-focus .doan-anchor {
  display: none;
}

.doan-focus .doan-layout--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
}

/* ---------- المقال ---------- */
.doan-article__title {
  margin: 0 0 var(--doan-gap-2);
  font-size: clamp(1.5rem, 4vw, 2.375rem);
  line-height: 1.4;
  color: var(--doan-accent);
}

.doan-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-block-end: var(--doan-gap-2);
  border-block-end: 1px solid var(--doan-line);
}

.doan-article__avatar {
  border-radius: 999px;
}

.doan-article__author {
  display: flex;
  flex-direction: column;
}

.doan-article__name {
  font-weight: 800;
  font-size: 0.875rem;
}

.doan-article__role {
  font-size: 0.6875rem;
  color: var(--doan-accent);
}

.doan-article__stats {
  display: flex;
  gap: 0.875rem;
  margin-inline-start: auto;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-article__media {
  margin: var(--doan-gap-3) 0;
}

.doan-article__media img {
  width: 100%;
  border-radius: var(--doan-radius-lg);
}

.doan-article__media figcaption {
  margin-block-start: 0.375rem;
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
  text-align: center;
}

/* ---------- الملخص الذكي ---------- */
.doan-summary {
  padding: var(--doan-gap-2);
  margin-block-end: var(--doan-gap-3);
  color: var(--doan-on-block);
  background: var(--doan-dark);
  border-radius: var(--doan-radius-lg);
}

.doan-summary__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.doan-summary__title {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--doan-accent-pale);
}

.doan-summary__en {
  font-family: var(--doan-font-body);
  font-size: 0.75rem;
  opacity: 0.7;
}

.doan-summary__btn {
  padding: 0.4375rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doan-darker);
  background: var(--doan-accent-soft);
  border: 0;
  border-radius: var(--doan-radius);
}

.doan-summary__btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.doan-summary__out:empty {
  display: none;
}

.doan-summary__out {
  margin-block-start: 0.75rem;
  padding-block-start: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.9;
  white-space: pre-wrap;
  border-block-start: 1px solid rgb(255 255 255 / 0.12);
}

.doan-summary__out.is-error {
  color: #fca5a5;
}

/* ---------- حقوق النشر ---------- */
.doan-copyright {
  padding: var(--doan-gap-2);
  margin-block: var(--doan-gap-3);
  color: var(--doan-on-block);
  background: linear-gradient(120deg, var(--doan-darker), var(--doan-brand-strong));
  border-radius: var(--doan-radius-lg);
}

.doan-copyright__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.doan-copyright__title {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--doan-accent-pale);
}

.doan-copyright__host {
  font-size: 0.75rem;
  opacity: 0.6;
}

.doan-copyright__text {
  margin: 0.5rem 0 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.9;
  opacity: 0.92;
}

.doan-copyright__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.doan-copyright__stamp {
  font-size: 0.6875rem;
  color: var(--doan-accent-pale);
}

.doan-copyright__copy {
  padding: 0.4375rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--doan-breaking);
  border: 0;
  border-radius: var(--doan-radius);
}

.doan-copyright__copy.is-done {
  background: var(--doan-success);
}

/* ---------- الوسوم ---------- */
.doan-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding-block: var(--doan-gap-2);
  border-block-start: 1px solid var(--doan-line);
}

.doan-tags__label {
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-tags__item {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--doan-on-block);
  background: var(--doan-dark);
  border-radius: var(--doan-radius);
}

.doan-tags__item:hover {
  background: var(--doan-brand);
}

/* ---------- صف الإجراءات ---------- */
.doan-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--doan-gap-2);
  padding-block: var(--doan-gap-2);
  border-block: 1px solid var(--doan-line);
}

.doan-actions-row__start,
.doan-actions-row__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.doan-actions-row__label {
  font-size: 0.75rem;
  color: var(--doan-ink-soft);
}

.doan-like {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--doan-ink);
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line-strong);
  border-radius: var(--doan-radius);
}

.doan-like__ico {
  width: 1rem;
  height: 1rem;
}

.doan-like.is-liked {
  color: #fff;
  background: var(--doan-breaking);
  border-color: var(--doan-breaking);
}

.doan-like.is-liked .doan-like__ico {
  fill: currentColor;
}

.doan-btn--ghost {
  color: var(--doan-ink);
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line-strong);
}

.doan-btn--ghost:hover {
  background: var(--doan-line);
}

.doan-share {
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-radius: var(--doan-radius);
}

.doan-share--wa { background: #16a34a; }
.doan-share--tg { background: #229ed9; }
.doan-share--x  { background: #0f172a; }

@media (max-width: 640px) {
  .doan-reader-bar__btn--wide span:not(.screen-reader-text) {
    display: none;
  }
}

/**
 * تعارض الالتصاق في صفحة المقال.
 *
 * شريط التنقّل وشريط أدوات القارئ كلاهما sticky @0 فيتراكبان عند
 * التمرير. الحل: التنقّل يتوقّف عن الالتصاق داخل المقال، ويبقى شريط
 * القارئ وحده — فهو ما يحتاجه القارئ أثناء القراءة.
 *
 * البديل (إزاحة أحدهما بارتفاع الآخر) يعتمد على ارتفاع متغيّر يكسره
 * أول تعديل في القائمة أو أول انتقال لسطرين على الجوال.
 */
.single-post .doan-nav {
  position: static;
}

/* ---------- منبر التعليقات ---------- */
.doan-comment-form {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: var(--doan-gap-2);
  margin-block-end: var(--doan-gap-3);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--doan-radius-lg);
}

.doan-comment-form__note,
.doan-comment-form .comment-notes,
.doan-comment-form .comment-reply-title,
.doan-comment-form__row--full,
.doan-comment-form .form-submit {
  grid-column: 1 / -1;
}

.doan-comment-form .comment-reply-title {
  margin: 0;
  font-size: 1rem;
  color: var(--doan-accent-pale);
}

.doan-comment-form__note {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--doan-on-block-muted);
}

.doan-comment-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

.doan-comment-form__row label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doan-on-block-muted);
}

.doan-comment-form__row input,
.doan-comment-form__row select,
.doan-comment-form__row textarea {
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--doan-on-block);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--doan-radius);
}

.doan-comment-form__row textarea {
  resize: vertical;
}

.doan-comment-form__row input::placeholder,
.doan-comment-form__row textarea::placeholder {
  color: rgb(255 255 255 / 0.35);
}

.doan-comment-form__submit {
  background: var(--doan-accent);
  color: var(--doan-darker);
}

.doan-comments__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doan-comments__list .children {
  margin-inline-start: 1.5rem;
  padding: 0;
  list-style: none;
}

.doan-comment {
  margin-block-end: 0.75rem;
}

.doan-comment__inner {
  display: flex;
  gap: 0.75rem;
  padding: var(--doan-gap-2);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--doan-radius-lg);
}

.doan-comment__seq {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #fff;
  border-radius: 999px;
}

.doan-comment__seq--0 { background: #d97706; }
.doan-comment__seq--1 { background: #16a34a; }
.doan-comment__seq--2 { background: #7c3aed; }
.doan-comment__seq--3 { background: #dc2626; }

.doan-comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.375rem;
}

.doan-comment__author {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--doan-on-block);
}

.doan-comment__badge {
  padding: 0.0625rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--doan-darker);
  background: var(--doan-accent-pale);
  border-radius: 999px;
}

.doan-comment__city,
.doan-comment__time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--doan-on-block-muted);
}

.doan-comment__time {
  margin-inline-start: auto;
}

.doan-comment__ico {
  width: 0.75rem;
  height: 0.75rem;
}

.doan-comment__text {
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--doan-on-block);
}

.doan-comment__text p {
  margin: 0 0 0.5rem;
}

.doan-comment__pending {
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  color: var(--doan-accent-pale);
}

.doan-comment__foot {
  margin-block-start: 0.5rem;
  font-size: 0.75rem;
}

.doan-comment__reply a {
  color: var(--doan-accent-pale);
  text-decoration: none;
  font-weight: 700;
}

/* ==========================================================================
   بوابة الشركاء (الصرافة)
   ========================================================================== */
.doan-portal {
  display: grid;
  place-items: center;
  min-block-size: 60vh;
  padding-block: var(--doan-gap-4);
}

.doan-portal__card {
  inline-size: min(100%, 44rem);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--doan-line);
  border-radius: var(--doan-radius-block);
  box-shadow: var(--doan-shadow-lg);
}

.doan-portal__head {
  padding: var(--doan-gap-2) var(--doan-gap-3);
  color: var(--doan-ink-invert);
  background: linear-gradient(120deg, var(--doan-darker), var(--doan-brand-strong));
}

.doan-portal__badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--doan-darker);
  background: var(--doan-accent-pale);
  border-radius: 999px;
}

.doan-portal__title {
  margin: 0.375rem 0 0;
  font-size: 1.25rem;
  color: var(--doan-accent-pale);
}

.doan-portal__body {
  padding: var(--doan-gap-3);
  color: var(--doan-ink);
  text-align: center;
}

.doan-portal__lock {
  display: grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  margin-inline: auto;
  color: #fff;
  background: linear-gradient(135deg, var(--doan-accent-soft), var(--doan-accent));
  border-radius: 999px;
}

.doan-portal__lock svg {
  inline-size: 2rem;
  block-size: 2rem;
}

.doan-portal__lead {
  margin: var(--doan-gap-2) 0;
  font-size: 0.875rem;
  color: var(--doan-ink-muted);
}

.doan-portal__form {
  display: grid;
  gap: 0.875rem;
  text-align: start;
}

.doan-portal__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

.doan-portal__row label {
  font-size: 0.75rem;
  font-weight: 700;
}

.doan-portal__row input {
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--doan-ink);
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line-strong);
  border-radius: var(--doan-radius);
}

.doan-portal__submit {
  padding: 0.6875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--doan-accent-soft), var(--doan-accent));
  border: 0;
  border-radius: var(--doan-radius);
}

.doan-portal__submit:hover {
  filter: brightness(1.06);
}

.doan-portal__msg {
  padding: 0.625rem 0.875rem;
  margin: 0 0 var(--doan-gap-2);
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--doan-radius);
}

.doan-portal__msg--error {
  color: #fff;
  background: var(--doan-breaking);
}

.doan-portal__msg--ok {
  color: #fff;
  background: var(--doan-success);
}

.doan-portal__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  text-align: start;
}

.doan-portal__table th,
.doan-portal__table td {
  padding: 0.5rem;
  text-align: start;
  border-block-end: 1px solid var(--doan-line);
}

.doan-portal__table thead th {
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-portal__table input {
  inline-size: 100%;
  padding: 0.4375rem 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--doan-success);
  background: var(--doan-surface-alt);
  border: 1px solid var(--doan-line-strong);
  border-radius: var(--doan-radius);
}

.doan-portal__log {
  margin-block-start: var(--doan-gap-3);
  text-align: start;
}

.doan-portal__log-title {
  margin: 0 0 0.5rem;
  padding-block-end: 0.375rem;
  font-size: 0.9375rem;
  border-block-end: 2px solid var(--doan-accent);
}

.doan-portal__log-time {
  font-size: 0.6875rem;
  color: var(--doan-ink-soft);
}

.doan-portal__help {
  margin: var(--doan-gap-2) 0 0;
  font-size: 0.75rem;
}