/* ═══════════════════════════════════════════════════════════════════
   إضافات على الديزاين سستم — مكونات احتاجتها البوابة ولم تكن فيه.
   القاعدة: متغيرات الديزاين سستم فقط (ألوان، مسافات، زوايا، ظلال). لا قيم جديدة.
   مقترحة لصاحب الديزاين سستم ليضمّها إلى manbij-ds.css إن اعتمدها.
   ═══════════════════════════════════════════════════════════════════ */

/* ── أداة: العنصر المخفي يبقى مخفيًا ─────────────────────────────────
   مكونات الديزاين سستم (التنبيه، البطاقة...) تحدد طريقة عرضها، فتغلب على خاصية hidden
   في المتصفح ويظهر ما يجب أن يختفي. هذه القاعدة تعيد لـ hidden معناها. */
[hidden] { display: none !important; }

/* ── أداة: نص يُقرأ لقارئ الشاشة فقط ─────────────────────────────── */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── شريط التنبيه العاجل (تعريف-نافذة-الإعلام.md، البند 6) ─────────
   العنابي لون الطوارئ حصرًا، مع أيقونة. يأتي أعلى الصفحة قبل الشريط العلوي؛
   والشريط العلوي يصبح "لاصقًا" تحته بدل أن يغطيه. */
.urgent-banner { position: relative; z-index: calc(var(--z-header) + 1); background: var(--color-danger); color: var(--white); }
.urgent-banner__inner { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); }
.urgent-banner__icon { flex: none; width: 20px; height: 20px; }
.urgent-banner__text { flex: 1; margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.6; }
.urgent-banner__link { color: var(--white); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.urgent-banner__close { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--white); font-size: 16px; cursor: pointer; }
.urgent-banner__close:focus-visible, .urgent-banner__link:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.urgent-banner.is-dismissed { display: none; }
/* حين يظهر الشريط: الشريط العلوي يلتصق تحته، فلا تحتاج الصفحة مسافة بارتفاعه. */
.has-urgent .site-header { position: sticky; }
.has-urgent .page-hero, .has-urgent .page-start { padding-top: var(--space-10); }
/* إن أخفاه المواطن يعود كل شيء كما في الديزاين سستم. */
.has-urgent.urgent-dismissed .site-header { position: fixed; }
.has-urgent.urgent-dismissed .page-hero { padding-top: calc(var(--header-h) + var(--space-10)); }
.has-urgent.urgent-dismissed .page-start { padding-top: calc(var(--header-h) + var(--space-8)); }
@media (min-width: 992px) {
  .has-urgent .page-hero, .has-urgent .page-start { padding-top: var(--space-12); }
  .has-urgent.urgent-dismissed .page-hero { padding-top: calc(72px + 72px); }
}

/* ── بطاقة التعميم ───────────────────────────────────────────────── */
.circular-card { padding: 0; overflow: hidden; }
.circular-card__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); }
.circular-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-2); }
.circular-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.circular-card__more { align-self: flex-start; margin: 0 var(--space-5) var(--space-4); }
/* الرابط يغطي البطاقة كلها للمس السهل، والرابط نفسه يبقى المقروء. */
.circular-card__more::after { content: ""; position: absolute; inset: 0; }

/* ── صفحة التعميم ─────────────────────────────────────────────────── */
.circular-gallery { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .circular-gallery { grid-template-columns: 1fr 1fr; } }
.circular-gallery__item { display: block; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-subtle); }
.circular-gallery__item img { display: block; width: 100%; height: auto; }
.circular-gallery__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.circular-article__body p { margin-block: 0 var(--space-4); }

/* ── أسفل الأقسام: زر "المزيد" ────────────────────────────────────── */
.section-more { display: flex; justify-content: center; margin-top: var(--space-8); }

/* ── نقاط درجة الاستعجال (بدل style="" في مثال الديزاين سستم؛ سياسة المحتوى تمنعه).
   اللون يكمّل الكلمة ولا يحلّ محلها. */
.choice__dot--1 { background: var(--neutral-400); }
.choice__dot--2 { background: var(--forest-400); }
.choice__dot--3 { background: var(--gold-700); }
.choice__dot--4 { background: var(--red-600); }
.choice__dot--5 { background: var(--red-800); }

/* ── نموذج الشكوى ─────────────────────────────────────────────────── */
.photo-preview { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-subtle); }
.photo-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.location-status { display: flex; align-items: center; gap: var(--space-2); color: var(--success); font-weight: 700; font-size: 14.5px; }
.location-status svg { width: 18px; height: 18px; flex: none; }
.urgent-call { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.human-exit { text-align: center; }

/* ── حجز دور الرنين: خطوات الدفع عبر شام كاش ──────────────────────── */
.pay-step { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: 16px; line-height: 1.6; font-weight: 700; color: var(--text-heading); }
.pay-step__num { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--white); font-size: 14px; }
.pay-qr { margin: 0; text-align: center; }
.pay-qr img { display: block; width: 100%; max-width: 240px; height: auto; margin-inline: auto; padding: var(--space-2); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--white); }

/* بطاقة كلها رابط (قائمة الشكاوى في اللوحة): لا خط تحت نصوصها. */
a.card { color: inherit; text-decoration: none; }

/* ── "تابع شكواك" ─────────────────────────────────────────────────── */
.note-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.note-list li { padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--color-accent); background: var(--bg-subtle); border-radius: var(--radius-sm); }

/* ── لمحة مسؤول المنطقة ──────────────────────────────────────────── */
.official-card { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.official-card__photo { flex: none; width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-subtle); }
@media (min-width: 640px) { .official-card { flex-direction: row; } }

/* اقتباس عن منبج فوق لمحة مسؤول المنطقة. مقترح لصاحب الديزاين سستم، بمتغيراته فقط. */
.quote-card { margin: 0; padding-inline-end: calc(var(--space-6) + 24px); border-color: var(--gold-200); background: linear-gradient(135deg, var(--bg-surface) 0%, var(--gold-50) 100%); }
.quote-card__mark { position: absolute; top: var(--space-4); inset-inline-end: var(--space-5); color: var(--gold-300); font-size: 32px; font-weight: 700; line-height: 1; }
.quote-card__text { margin: 0; color: var(--text-heading); font-size: 18px; line-height: 2; font-weight: 700; }
.quote-card__highlight { background: none; color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--gold-500); text-decoration-thickness: 3px; text-underline-offset: 8px; }
@media (min-width: 640px) { .quote-card__text { font-size: 22px; } }

/* الواجهة الترحيبية (تصميم صاحب المشروع): النص بمحاذاة البداية، ثم بطاقة صور
   عرضية تتبادل بالتلاشي ونقاط للتنقل. على الشاشة الواسعة النص والصور متجاوران. مقترح لصاحب الديزاين سستم. */
.hero-split { text-align: start; }
.hero-split .container.hero-split__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-8); }
.hero-split__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.hero-split__title { margin: 0; color: var(--color-primary); }
.hero-split__tagline { margin: 0; color: var(--red-700); }
.hero-split__lead { margin: 0; color: var(--text-secondary); line-height: 2; }
.hero-gallery { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: var(--bg-subtle); box-shadow: var(--shadow-md); }
.hero-gallery__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.hero-gallery__slide.is-active { opacity: 1; }
.hero-gallery__dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); display: flex; gap: 0; padding: 0 var(--space-1); border-radius: var(--radius-pill); background: var(--bg-footer); }
.hero-gallery__dots[hidden] { display: none; }
/* النقطة تبدو 8 نقاط، لكن مساحة اللمس حولها أوسع (حد شفاف 6 نقاط): 15 نقطة لا تتسع لـ 44 لكل منها،
   فتأخذ كل نقطة أوسع ما يسمح به عرض الصورة على الهاتف. */
.hero-gallery__dot { box-sizing: content-box; width: 8px; height: 8px; padding: 0; border: 6px solid transparent; background-clip: padding-box; border-radius: var(--radius-pill); background-color: var(--neutral-400); cursor: pointer; transition: width .3s, background-color .3s; }
.hero-gallery__dot.is-active { width: 24px; background-color: var(--gold-100); }
@media (min-width: 992px) { .hero-split .container.hero-split__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); } }
@media (prefers-reduced-motion: reduce) { .hero-gallery__slide { transition: none; } }

/* "تابع شكواك" مباشرة تحت الواجهة الترحيبية وفوق الخدمات. */
.track-strip { padding-top: 0; }

/* ── صفوف تُسحب جانبيًا على الهاتف فقط (قرار صاحب المشروع 2026-10-26) ──────
   التعميمات والمقالات: محتوى للتصفح، فيُعرض صفًا أفقيًا يُسحب بالإصبع بدل
   أن يطيل الصفحة. تظهر بطاقة كاملة وطرف التالية حتى يُفهم أن الصف يُسحب. بلا جافاسكربت.
   على اللوحي والحاسوب لا يتغير شيء (الشبكة العادية). الخدمات والطوارئ تبقى عمودية. */
@media (max-width: 639.98px) {
  .swipe-row {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    gap: var(--space-3); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4);
    margin-inline: calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-2);
    scrollbar-width: none;
  }
  .swipe-row::-webkit-scrollbar { display: none; }
  .swipe-row > * { scroll-snap-align: start; }
}

/* قائمة مرقّمة بدوائر (أوراق الجواز وملاحظاته). الرقم من العدّاد، فيبقى 123 لا ١٢٣. مقترح لصاحب الديزاين سستم، بمتغيراته فقط. */
.num-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: num; }
.num-list li { position: relative; padding-inline-start: 38px; counter-increment: num; color: var(--text-primary); font-size: 15px; line-height: 1.8; }
.num-list li::before { content: counter(num); position: absolute; inset-inline-start: 0; top: 1px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-100); color: var(--gold-900); font-size: 13px; font-weight: 700; }

/* ── الفوتر (طلب صاحب المشروع 2026-10-29): بطاقة بحواف دائرية وأخضر أفتح، على كل المقاسات.
   وعلى الهاتف أقصر: الروابط في سطر واحد بدل عمود، والشعار أصغر، وسطرا الحقوق متقاربان. */
.site-footer { margin: 0 var(--space-4) var(--space-4); border-radius: var(--radius-xl); background: var(--forest-800); }
@media (max-width: 639.98px) {
  .site-footer { margin: 0 var(--space-3) var(--space-3); padding-top: var(--space-6); }
  .footer-grid { gap: var(--space-4); padding-bottom: var(--space-5); }
  .footer-brand img { height: 36px; margin-bottom: var(--space-2); }
  .footer-desc { margin: 0; font-size: 13px; line-height: 1.7; }
  .footer-col-title { display: none; }
  .footer-links-list { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .footer-bottom { gap: 0; padding-block: var(--space-3); font-size: 12px; }
  .footer-bottom p { margin: 0; }
}

/* ── "النافذة الصحية قريبًا" فوق الخدمات الإلكترونية (core/_health_soon.html) ────────
   استثناء مقصود بقرار صاحب المشروع (2026-11-10): الأحمر هنا للفت النظر، لا للخطأ والطوارئ
   كبقية البوابة. ألوانه من درجات الأحمر في الديزاين سستم وحدها (red-600 ← red-800). */
.health-soon-wrap { padding-block: var(--space-8) 0; background: var(--bg-page); }
.health-soon { position: relative; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(135deg, var(--red-600), var(--red-800)); color: var(--white); box-shadow: var(--shadow-lg); }
.health-soon::after { content: ""; position: absolute; inset-inline-end: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid var(--red-700); opacity: .6; pointer-events: none; }
.health-soon__icon { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--red-100); color: var(--red-700); }
.health-soon__icon svg { width: 36px; height: 36px; }
.health-soon__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.health-soon__title { margin: 0; color: var(--white); font-size: 32px; font-weight: 700; line-height: 1.3; } /* حجم t-display */
.health-soon__badge { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); background: var(--white); color: var(--red-700); font-size: 18px; font-weight: 700; } /* حجم t-h3 */
.health-soon__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red-600); animation: health-soon-pulse 1.6s ease-in-out infinite; }
@keyframes health-soon-pulse { 50% { opacity: .25; } }
@media (min-width: 768px) { .health-soon { padding: var(--space-10); } }
@media (prefers-reduced-motion: reduce) { .health-soon__dot { animation: none; } }
/* "نافذة جامعة منبج قريبًا": الشكل نفسه بالأخضر (قرار صاحب المشروع 2026-11-11). */
.health-soon--forest { background: linear-gradient(135deg, var(--forest-500), var(--forest-800)); }
.health-soon--forest::after { border-color: var(--forest-700); }
.health-soon--forest .health-soon__icon { background: var(--forest-100); color: var(--forest-700); }
.health-soon--forest .health-soon__badge { color: var(--forest-700); }
.health-soon--forest .health-soon__dot { background: var(--forest-500); }