/* =========================================================
   جمعية الخدمة العامة - النسخة الثابتة (HTML/CSS/JS + Tailwind)
   منقول عن توكنز التصميم في my-app/app/globals.css
========================================================= */

:root {
  --color-primary: #0e7490;
  --color-primary-light: #22b8cf;
  --color-primary-lighter: #67e8f9;
  --color-primary-dark: #0b5563;
  --color-primary-soft: #ecfeff;

  --color-accent: #e11d48;
  --color-accent-dark: #be123c;
  --color-accent-soft: #fff1f2;

  --color-success: #059669;
  --color-whatsapp: #25d366;

  --color-ink: #0f2233;
  --color-muted: #5b6b7a;
  --color-canvas: #f5f9fb;
  --color-surface: #ffffff;
  --color-line: #e4edf2;

  --font-sans: "Cairo", "Mada", "IBM Plex Sans Arabic", sans-serif;

  --gradient-primary: linear-gradient(135deg, #022400e9 0%, #075802a2 45%, #0e6c09 100%);
  --gradient-primary-soft: linear-gradient(135deg, #ecfeff 0%, #f0fbff 60%, #eef7fb 100%);
  --gradient-accent: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);

  --shadow-sm: 0 1px 2px rgba(15, 34, 51, 0.06), 0 1px 3px rgba(15, 34, 51, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(15, 34, 51, 0.14);
  --shadow-lg: 0 20px 45px -18px rgba(58, 238, 103, 0.35);
  --shadow-glow: 0 12px 40px -12px rgba(65, 249, 93, 0.45);
}

html, body {
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
}

p { line-height: 1.8; }

::selection { background: rgba(8, 145, 178, 0.18); }

/* ===== Reusable utility classes ===== */
.gradient-primary { background-image: var(--gradient-primary); }
.gradient-primary-soft { background-image: var(--gradient-primary-soft); }

.text-gradient {
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.card-hover {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(8, 145, 178, 0.35);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-image: var(--gradient-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-glow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 45px -12px rgba(8, 145, 178, 0.6); }

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-image: var(--gradient-accent);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.85rem;
  font-weight: 600;
  box-shadow: 0 12px 30px -12px rgba(225, 29, 72, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-accent:hover { transform: translateY(-2px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  padding: 0.7rem 1.4rem;
  border-radius: 0.85rem;
  font-weight: 600;
  background: transparent;
  transition: all 0.25s ease;
}
.btn-outline:hover {
  background-image: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

.focus-ring { outline: none; }
.focus-ring:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
}

.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-18px) translateX(10px); }
}
.animate-float-slow { animation: float-slow 9s ease-in-out infinite; }

.container-custom {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .container-custom { padding-inline: 5%; } }
@media (min-width: 1024px) { .container-custom { padding-inline: 8%; } }

/* ===== reveal-on-scroll (بديل بسيط لأنيميشن framer-motion) =====
   المحتوى ظاهر دائما بشكل افتراضي (opacity:1) حتى لو تعطل JS أو
   لم يمرّ العنصر بمنطقة الرؤية بعد - الأنيميشن إضافة بصرية فقط. */
[data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].pre-reveal {
  opacity: 0;
  transform: translateY(24px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ===== line-clamp utilities ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== progress bar ===== */
.progress-track {
  width: 100%;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(14, 116, 144, 0.1);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 9999px;
  background-image: var(--gradient-primary);
  transition: width 0.6s ease;
}

/* ===== status badge ===== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-dot { width: 0.4rem; height: 0.4rem; border-radius: 9999px; }
.status-available { background: rgba(5, 150, 105, 0.1); color: #059669; }
.status-available .status-dot { background: #059669; animation: pulse-dot 1.6s ease-in-out infinite; }
.status-leave { background: rgba(225, 29, 72, 0.08); color: #e11d48; }
.status-leave .status-dot { background: #e11d48; }
.status-closed { background: rgba(91, 107, 122, 0.1); color: #5b6b7a; }
.status-closed .status-dot { background: #5b6b7a; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ===== navbar chrome - unified floating pill header (same on all pages) =====
   المظهر: شريط أبيض شبه شفاف (transparency ~70%) بحواف دائرية كبيرة (pill)
   موضع: position:fixed حتى يبقى ظاهراً أثناء السكرول (sticky-on-scroll)
   ملاحظة: هذا التنسيق موحّد لكل الصفحات (الرئيسية وباقي الصفحات)
*/
#site-header {
  position: fixed;
  top: 0.75rem;
  inset-inline: 0.75rem;
  z-index: 100;
  /* الشفافية متدرجة عبر متغيّر --header-opacity يضبطه الجافاسكربت أثناء
     السكرول: معتم بالكامل عند أعلى الصفحة لوضوح القراءة، ثم تزيد
     شفافيته تدريجياً (تقل عتامته) كلما نزل المستخدم للأسفل. */
  --header-opacity: 0.94;
  --header-visibility: 1;
  background: rgba(255, 255, 255, var(--header-opacity));
  backdrop-filter: blur(calc(var(--header-opacity) * 22px));
  -webkit-backdrop-filter: blur(calc(var(--header-opacity) * 22px));
  border-radius: 9999px;
  box-shadow: 0 10px 40px -10px rgba(2, 20, 1, calc(var(--header-opacity) * 0.25)),
              0 4px 14px -4px rgba(2, 20, 1, calc(var(--header-opacity) * 0.15));
  border: 1px solid rgba(255, 255, 255, calc(var(--header-opacity) * 0.7));
  transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, backdrop-filter 0.18s ease;
  will-change: transform, opacity, background;
  transform-origin: top center;
}
#site-header.is-hidden {
  pointer-events: none;
}

@media (min-width: 640px) {
  #site-header {
    top: 1rem;
    inset-inline: 1.5rem;
  }
}
@media (min-width: 1024px) {
  #site-header {
    top: 1.25rem;
    inset-inline: 2.5rem;
  }
}
/* حالة "قريب من أعلى الصفحة" (معتم بالكامل): ظل أوضح لضمان القراءة */
#site-header.is-scrolled {
  box-shadow: 0 14px 50px -10px rgba(2, 20, 1, 0.30),
              0 6px 18px -4px rgba(2, 20, 1, 0.18);
}
/* روابط الناف تأخذ لون أسود داكن، مع ظل نص خفيف يضمن التباين فوق
   الصور في حال كان الهيدر شبه شفاف (بداية الصفحة) */
#site-header nav a,
#site-header .container-custom > div > a {
  color: #0f2233;
  text-shadow: 0 1px 12px rgba(255, 255, 255, calc((1 - var(--header-opacity)) * 0.55));
  transition: color 0.2s ease, text-shadow 0.25s ease;
}
#site-header nav a:hover {
  color: var(--color-primary);
}
#site-header h3 {
  color: #0f2233 !important;
  text-shadow: 0 1px 12px rgba(255, 255, 255, calc((1 - var(--header-opacity)) * 0.55));
}

/* ===== تباعد الهيدر: padding مخصص وثابت (بدل النسبة 8% العامة) حتى
   يبقى متوازناً على كل مقاسات الشاشة، ومساحة الشعار/الروابط/الأزرار
   متناسقة دائماً. عرض أقصى محسوب بعناية بحيث تبقى كل عناصر الناف بار
   (7 روابط + قائمتين منسدلتين) ضمن المساحة المتاحة فعليًا بخط Cairo
   الحقيقي، بدون أي overflow يقص زر "بوابة المريض" ===== */
#site-header .container-custom {
  max-width: 1340px;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) {
  #site-header .container-custom { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
  #site-header .container-custom { padding-inline: 1.75rem; }
}
/* روابط الناف بار: بادينق أقل قليلاً وتباعد أضبط بين الروابط لضمان عدم
   تجاوز المساحة المتاحة على الشاشات المتوسطة (1280-1440px) */
#site-header #desktop-nav { gap: 0.125rem !important; }
#site-header #desktop-nav > a,
#site-header #desktop-nav .nav-dropdown > a {
  padding-inline: 0.5rem !important;
}
/* زرا "حجز موعد" و"بوابة المريض": تباعد متساوٍ عن بعضهما وعن حافة الهيدر */
#site-header #header-actions { margin-inline-start: 0.5rem; }

/* ===== الـ section الذي يحوي السلايدر بعرض الصفحة كاملاً ===== */
.hero-section-full {
  position: relative;
  width: 100%;
  /* الهيدر العائم fixed، لذلك السلايدر يبدأ من أعلى الصفحة */
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* ===== السلايدر بعرض الصفحة كاملاً - بلا حواف مدورة ===== */
/* الهيدر خارج السلايدر: السلايدر ينزل تحته، ويُلقي توهجاً بلون الصورة خلف الهيدر */
.hero-section-full {
  padding-top: 5.75rem;
  padding-inline: 0;
  isolation: isolate;
}
@media (min-width: 640px) {
  .hero-section-full { padding-top: 6.5rem; }
}
@media (min-width: 1024px) {
  .hero-section-full { padding-top: 7.25rem; }
}
.hero-glow {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 28rem;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}
.hero-glow-layer {
  position: absolute;
  inset: -4rem -6rem 0;
  background-size: cover;
  background-position: center;
  filter: blur(40px) saturate(1.8) brightness(1.15);
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-glow-layer.is-active { opacity: 1; }
.hero-section-full #site-header { z-index: 50; }
.hero-slider.hero-slider-full {
  position: relative;
  z-index: 1;
  border-radius: 0 0 1.5rem 1.5rem;
  width: 100%;
  box-shadow: 0 30px 60px -28px rgba(2, 20, 1, 0.45);
  /* Safari: يضمن قص الصورة المتحركة بالحواف المدورة */
  transform: translateZ(0);
}
.hero-slider.hero-slider-full .hero-slider-viewport {
  border-radius: 0 0 1.5rem 1.5rem;
  height: 500px;
}
@media (min-width: 640px) {
  .hero-slider.hero-slider-full .hero-slider-viewport { height: 520px; }
}
@media (min-width: 1024px) {
  .hero-slider.hero-slider-full .hero-slider-viewport { height: 580px; }
}
@media (min-width: 640px) {
  .hero-slider.hero-slider-full,
  .hero-slider.hero-slider-full .hero-slider-viewport { border-radius: 0 0 2rem 2rem; }
}
@media (min-width: 1024px) {
  .hero-slider.hero-slider-full,
  .hero-slider.hero-slider-full .hero-slider-viewport { border-radius: 0 0 2.5rem 2.5rem; }
}
.hero-slider.hero-slider-full .hero-slide-content { padding-top: 2rem; }

#mobile-menu { display: none; }
#mobile-menu.is-open { display: block; }
/* قائمة الموبايل للهيدر العائم: خلفية بيضاء صلبة لأن الهيدر شفاف */
#site-header #mobile-menu {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  margin-top: 0.5rem;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 20px 50px -10px rgba(2, 20, 1, 0.25);
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ===== scroll to top / whatsapp float ===== */
.float-btn {
  position: fixed;
  bottom: 1.25rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.float-btn:hover { transform: translateY(-3px); }
#whatsapp-float { inset-inline-start: 1.25rem; background: var(--color-whatsapp); color: #fff; }
#scroll-top { inset-inline-end: 1.25rem; background: #fff; color: var(--color-primary); border: 1px solid var(--color-line); opacity: 0; pointer-events: none; }
#scroll-top.is-visible { opacity: 1; pointer-events: auto; }

/* ===== خطوات صفحة الحجز (stepper) ===== */
.step-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 2px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-muted);
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}
.step-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  transition: color 0.25s ease;
}
.step-item[data-state="active"] .step-circle {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.12);
}
.step-item[data-state="active"] .step-label,
.step-item[data-state="done"] .step-label {
  color: var(--color-ink);
}
.step-item[data-state="done"] .step-circle {
  border-color: transparent;
  background-image: var(--gradient-primary);
  color: #fff;
}
.step-line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--color-line);
  margin-top: 1.25rem;
  transition: background 0.3s ease;
}
.step-line[data-done="true"] {
  background-image: var(--gradient-primary);
}

.section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgba(14, 116, 144, 0.1);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* الشاشات الكبيرة */
@media (max-width: 1024px) {
  .btn-d { display: none; }
}

/* ===== سلايدر الهيرو - تصميم محسّن مع مؤشرات نبضية و Ken Burns ===== */
/* الـ wrapper: يضيف padding جانبي وحواف مدورة كبيرة للسلايدر ليبدو مثل الصورة المرجعية */
.hero-section-wrapper {
  padding: 0.75rem 0.75rem 0;
  max-width: 1500px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .hero-section-wrapper { padding: 1rem 1.25rem 0; }
}
@media (min-width: 1024px) {
  .hero-section-wrapper { padding: 1.25rem 1.75rem 0; }
}

.hero-slider {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 30px 70px -25px rgba(2, 36, 0, 0.45), 0 10px 30px -12px rgba(2, 36, 0, 0.25);
}
@media (min-width: 640px) {
  .hero-slider { border-radius: 2.5rem; }
}
@media (min-width: 1024px) {
  .hero-slider { border-radius: 3rem; }
}

.hero-slider-viewport {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: inherit;
}
@media (min-width: 640px) { .hero-slider-viewport { height: 480px; } }
@media (min-width: 1024px) { .hero-slider-viewport { height: 560px; } }

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.9s;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 0.4s ease; transform: none; }
}

/* Ken Burns effect: zoom slowly while slide is active */
.hero-slide-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  transition: transform 0s;
}
.hero-slide.is-active .hero-slide-media {
  /* تبدأ الصورة مقرّبة ثم تبتعد تدريجياً حتى تظهر كاملة (zoom-out) */
  animation: kenBurns 9s ease-out forwards;
}
@keyframes kenBurns {
  0%   { transform: scale(1.1) translate(-1%, -0.5%); }
  100% { transform: scale(1) translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hero-slide-media { animation: none; transform: scale(1); }
}

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 20, 1, 0.30) 0%, rgba(2, 20, 1, 0.50) 45%, rgba(2, 20, 1, 0.86) 100%),
    radial-gradient(80% 80% at 50% 100%, rgba(14, 108, 9, 0.40) 0%, transparent 70%);
}
.hero-slide-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem 5rem;
  text-align: center;
}
@media (min-width: 640px) { .hero-slide-content { padding: 3.5rem 4rem 5.5rem; } }
@media (min-width: 1024px) { .hero-slide-content { padding: 4rem 5.5rem 6rem; } }

/* Slide content reveal — staggered entrance */
.hero-slide-content > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-slide.is-active .hero-slide-content > * { opacity: 1; transform: translateY(0); }
.hero-slide.is-active .hero-slide-content > *:nth-child(1) { transition-delay: 0.25s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(2) { transition-delay: 0.40s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(3) { transition-delay: 0.55s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(4) { transition-delay: 0.70s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(5) { transition-delay: 0.85s; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide-content > * { opacity: 1; transform: none; transition: none; }
}

.hero-slide .btn-outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.08);
}
.hero-slide .btn-outline:hover {
  background-image: none;
  background-color: #fff;
  color: var(--color-primary-dark);
  border-color: #fff;
}

/* السهم: زر دائري بزجاجية أنيقة */
.hero-slider-arrow {
  display: none;
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 4;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 8px 24px -6px rgba(2, 20, 1, 0.35);
}
@media (min-width: 640px) {
  .hero-slider-arrow { display: inline-flex; width: 3rem; height: 3rem; }
}

.hero-slider-arrow--start { inset-inline-start: 1rem; }
.hero-slider-arrow--end { inset-inline-end: 1rem; }
.hero-slider-arrow:hover {
  background-image: var(--gradient-primary);
  border-color: transparent;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 32px -6px rgba(14, 108, 9, 0.55);
}
.hero-slider-arrow:active { transform: translateY(-50%) scale(0.96); }

/* ===== مؤشرات السلايدر (Pill dots) - بأسلوب الصورة المرجعية =====
   - النقاط الخاملة: شكل صغير على شكل حبة (pill)
   - النقطة النشطة: أعرض بمرتين إلى ثلاث مرات، بلون أخضر زاهٍ
   - تجلس في شريط تحكم سفلي مع الأ arrows
*/
.hero-slider-controls {
  position: absolute;
  inset-inline: 0;
  bottom: 1.25rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.5rem 1rem;
}
@media (min-width: 640px) {
  .hero-slider-controls { bottom: 1.75rem; gap: 1rem; }
}

.hero-slider-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 24px -8px rgba(2, 20, 1, 0.4);
}
@media (min-width: 640px) {
  .hero-slider-dots { gap: 0.55rem; padding: 0.6rem 1.1rem; }
}

.hero-slider-dot {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  padding: 0;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.35s ease,
              transform 0.25s ease;
  display: inline-block;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .hero-slider-dot { width: 0.6rem; height: 0.6rem; }
}
.hero-slider-dot:hover { background: rgba(255, 255, 255, 0.85); transform: scale(1.1); }
.hero-slider-dot.is-active {
  width: 1.6rem;
  background: #0e6c09;
  box-shadow: 0 0 14px rgba(14, 108, 9, 0.7);
}
@media (min-width: 640px) {
  .hero-slider-dot.is-active { width: 2.2rem; }
}
.hero-slider-dot.is-active:hover { background: #0b5607; }

/* شريط التقدم الداخلي فوق النقطة النشطة */
.hero-slider-dot.is-active::after {
  content: "";
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.35);
  animation: dotProgress 5.5s linear forwards;
}
@keyframes dotProgress { from { width: 0%; } to { width: 100%; } }
.hero-slider:hover .hero-slider-dot.is-active::after,
.hero-slider:focus-within .hero-slider-dot.is-active::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-slider-dot.is-active::after { animation: none; }
}

/* زر تحكم سفلي صغير يحاكي أسلوب الصورة المرجعية - للأجهزة الصغيرة */
.hero-slider-miniarrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.hero-slider-miniarrow:hover { background-image: var(--gradient-primary); border-color: transparent; }
@media (min-width: 640px) { .hero-slider-miniarrow { display: none; } }

/* ===== قوائم منسدلة بالناف بار (سطح المكتب) ===== */
.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-top: 0.5rem;
  min-width: 15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 60;
}
.nav-dropdown.is-open .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-dropdown-link i { color: var(--color-primary); flex-shrink: 0; }
.nav-dropdown-link:hover { background: rgba(14, 116, 144, 0.08); color: var(--color-primary); }
.nav-dropdown-footer {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-line);
  font-weight: 600;
  color: var(--color-primary);
}
.nav-dropdown-chevron { transition: transform 0.2s ease; }
.nav-dropdown.is-open .nav-dropdown-chevron { transform: rotate(180deg); }

/* ===== قوائم فرعية بقائمة الموبايل ===== */
.mobile-nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-inline-start: 0.75rem;
}
.mobile-nav-submenu.is-open { max-height: 28rem; }
.mobile-nav-sublink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  color: var(--color-muted);
  transition: all 0.2s ease;
}
.mobile-nav-sublink:hover { color: var(--color-primary); background: rgba(14, 116, 144, 0.06); }
.mobile-nav-toggle-icon { transition: transform 0.2s ease; }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-icon { transform: rotate(180deg); }

/* =========================================================
   قسم الإحصائيات - تصميم minimal مستوحى من الصورة المرجعية
   بطاقة واحدة عريضة بخلفية رمادية فاتحة، 5 إحصائيات متجاورة
   مع شعار سفلي (tagline)، أرقام كبيرة عريضة، بلا أيقونات
========================================================= */
.stats-bar {
  background: linear-gradient(180deg, #f3f5f8 0%, #eef1f5 100%);
  border-radius: 1.75rem;
  padding: 2.5rem 1.25rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 30px -10px rgba(15, 34, 51, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.7);
}
@media (min-width: 640px) {
  .stats-bar { padding: 3.25rem 2.5rem 2.5rem; border-radius: 2rem; }
}
@media (min-width: 1024px) {
  .stats-bar { padding: 3.75rem 3.5rem 2.75rem; }
}

/* لمعان ناعم يتحرك ببطء في الخلفية */
.stats-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 0%, rgba(14, 108, 9, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ===== شريط إحصائيات عريض بعرض الصفحة كاملاً (يندمج مع القسم التالي) =====
   - يمتد من أول الصفحة لآخرها (full-width)
   - أقصر طولاً، بلا حدود مدورة
   - لون متناسق مع خلفية الصفحة canvas (#f5f9fb) ليمتزج دون حدود حادة
   - ظل علوي ناعم ليفصل بصرياً عن السلايدر
*/
.stats-bar--full {
  width: 100%;
  margin-top: 0 !important;
  padding: 1.5rem 1rem 1.5rem;
  border-radius: 0;
  background: linear-gradient(180deg, #f5f9fb 0%, #f1f5f8 100%);
  border: none;
  border-top: 1px solid rgba(14, 108, 9, 0.08);
  box-shadow: 0 -10px 30px -10px rgba(2, 20, 1, 0.10);
  position: relative;
}
@media (min-width: 640px) {
  .stats-bar--full { padding: 2rem 1rem 2rem; }
}
@media (min-width: 1024px) {
  .stats-bar--full { padding: 2.25rem 1rem 2.25rem; }
}

/* شعار سفلي - غير ظاهر في الوضع العريض */
.stats-bar--full .stats-tagline { display: none; }

/* تعديل الشبكة في الوضع العريض لتكون أكثر تناسقاً */
.stats-bar--full .stats-grid {
  max-width: 1400px;
  margin: 0 auto;
  gap: 1rem 0.5rem;
}
@media (min-width: 768px) {
  .stats-bar--full .stats-grid { gap: 1.25rem; }
}

/* تعديل حجم الأرقام في الشريط العريض لتكون أصغر قليلاً وأكثر تناسقاً */
.stats-bar--full .stat-item {
  padding: 0.25rem 0.5rem;
}
.stats-bar--full .stat-number {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 0.2rem;
}
.stats-bar--full .stat-label {
  font-size: 0.8rem;
}
@media (min-width: 768px) {
  .stats-bar--full .stat-number { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .stats-bar--full .stat-label { font-size: 0.9rem; }
}

/* إخفاء الفواصل الرأسية في الوضع العريض لتبدو أكثر اكتمالاً مع الخلفية */
.stats-bar--full .stat-item:not(:last-child)::after {
  background: linear-gradient(180deg, transparent 0%, rgba(14, 108, 9, 0.12) 50%, transparent 100%);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  position: relative;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } }

.stat-item {
  text-align: center;
  padding: 0.5rem 0.5rem;
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.stats-bar.is-visible .stat-item { opacity: 1; transform: translateY(0); }
.stats-bar.is-visible .stat-item:nth-child(1) { transition-delay: 0.10s; }
.stats-bar.is-visible .stat-item:nth-child(2) { transition-delay: 0.20s; }
.stats-bar.is-visible .stat-item:nth-child(3) { transition-delay: 0.30s; }
.stats-bar.is-visible .stat-item:nth-child(4) { transition-delay: 0.40s; }
.stats-bar.is-visible .stat-item:nth-child(5) { transition-delay: 0.50s; }
@media (prefers-reduced-motion: reduce) {
  .stat-item { opacity: 1; transform: none; transition: none; }
}

/* خط فاصل رأسي ناعم بين العناصر على الشاشات الكبيرة */
.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-end: -0.5rem;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 34, 51, 0.10) 50%, transparent 100%);
}
@media (max-width: 767px) {
  /* على الموبايل نخفي الفواصل لأن الإحصائيات تأخذ صف من 2 */
  .stat-item::after { display: none; }
}

.stat-number {
  display: block;
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #0f2233;
  background: linear-gradient(180deg, #0f2233 0%, #2a3b4d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.35rem;
}
.stat-suffix {
  font-size: 0.65em;
  font-weight: 700;
  -webkit-text-fill-color: #0e6c09;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  margin-inline-start: 0.05em;
}

.stat-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #5b6b7a;
  line-height: 1.5;
}
@media (min-width: 1024px) { .stat-label { font-size: 0.95rem; } }

.stats-tagline {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(15, 34, 51, 0.08);
  text-align: center;
  font-size: 0.875rem;
  color: #7c8a98;
  font-weight: 400;
  line-height: 1.7;
  max-width: 56rem;
  margin-inline: auto;
  position: relative;
}
@media (min-width: 640px) { .stats-tagline { font-size: 0.95rem; margin-top: 2.5rem; padding-top: 2rem; } }
.stats-tagline::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0e6c09, transparent);
  margin: 0 auto 1.25rem;
}

/* عدّاد السرعة للإحصائيات */
.stat-number[data-counted="false"] { opacity: 0.999; }

/* =========================================================
   لمسات جمالية مستوحاة من kafiil / ureed
   - glassmorphism على البطاقات في الهيرو
   - تدرجات أكثر نعومة على الـ buttons
   - hover lift أكثر أناقة على بطاقات الأقسام والمشاريع
   - reveal أنيق إضافي
========================================================= */

/* بطاقة تراكب زجاجية فوق البطاقات العادية - تستخدم بـ class `glass-card` */
.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 1.25rem;
  box-shadow: 0 8px 30px -12px rgba(15, 34, 51, 0.12);
}

/* تأثير "hover lift" أنيق إضافي على بطاقات الأقسام والأخبار */
.card-hover { position: relative; }
.card-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(14, 108, 9, 0) 0%, rgba(14, 108, 9, 0.35) 50%, rgba(14, 108, 9, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card-hover:hover::before { opacity: 1; }
.card-hover:hover img { transform: scale(1.06); }
.card-hover img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

/* أنيميشن "shimmer" خفيف على الأزرار الرئيسية عند المرور */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: inset-inline-start 0.7s ease;
  pointer-events: none;
}
.btn-primary:hover::after { inset-inline-start: 130%; }

/* تحسين طفو زر واتساب بإضافة نبض لطيف */
#whatsapp-float {
  position: fixed;
  animation: floatPulse 2.4s ease-in-out infinite;
}
@keyframes floatPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.5); }
  50%      { transform: translateY(-3px); box-shadow: 0 14px 32px -6px rgba(37, 211, 102, 0.7); }
}
#whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(37, 211, 102, 0.45);
  animation: ripplePulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes ripplePulse {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* قسم الـ tabs (الأقسام/المشاريع) — جعل التبويبات أكثر نعومة */
.dept-tab, .proj-tab {
  position: relative;
  cursor: pointer;
  color: #5b6b7a;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.dept-tab:hover, .proj-tab:hover { color: #0f2233; }
.dept-tab.gradient-primary, .proj-tab.gradient-primary {
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(14, 108, 9, 0.5);
}

/* تحسين شكل progress bar بلمسة نيون خفيفة */
.progress-fill {
  position: relative;
  overflow: hidden;
}
.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: progressShine 2.2s linear infinite;
}
@keyframes progressShine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* تحسين شكل badge بجعلها أكثر تأثيراً */
.status-available { background: rgba(5, 150, 105, 0.12); color: #047857; }

/* لمسة جمالية على الـ section headings */
h2 {
  position: relative;
  display: inline-block;
}

/* قسم CTA السفلي بلمسة gradient أعمق */
section .gradient-primary-soft {
  position: relative;
  overflow: hidden;
}
section .gradient-primary-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 90% 10%, rgba(14, 108, 9, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

/* تحسين شكل field inputs بحدود أنعم وحركة focus */
input[type="text"], input[type="tel"], input[type="email"], textarea, select {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
input:focus, textarea:focus, select:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(14, 108, 9, 0.18);
}

/* تحسين روابط "المزيد" بحركة سهم */
a[class*="text-primary"]:hover i[data-lucide="arrow-left"] {
  animation: arrowSlide 0.5s ease forwards;
}
@keyframes arrowSlide {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* تحسين روابط الفوتر بلمسة underline متحركة */
footer a.group { position: relative; }
footer a.group::after {
  content: "";
  position: absolute;
  bottom: -2px;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
footer a.group:hover::after { width: 100%; }

/* تأثير "tilt" خفيف على بطاقات الأقسام */
.card-hover:hover {
  transform: translateY(-8px) rotate(0.3deg);
}

/* شريط فاصل متحرك بين الأقسام */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14, 108, 9, 0.25), transparent);
  margin: 2rem 0;
}

/* تحسين قائمة الموبايل بحركة سلايد */
#mobile-menu.is-open { animation: menuSlide 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes menuSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   NEW: سلايدر صور الأخبار والمشاريع (article-slider) بعرض الصفحة كاملاً
   - يُستخدم بصفحتي news-article.html و project.html
   - سلايدر عريض بعرض الصفحة كاملاً مع ترويسة العنوان فوقه
   ========================================================================= */

.article-slider {
  position: relative;
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #0f2233;
  box-shadow: 0 20px 45px -12px rgba(2, 20, 1, 0.22);
}
.article-slider.article-slider-full {
  border-radius: 0;
  margin: 0;
}
@media (min-width: 640px) {
  .article-slider.article-slider-full { border-radius: 1.5rem; }
}

.article-slider-viewport {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
}
@media (min-width: 640px) { .article-slider-viewport { height: 470px; } }
@media (min-width: 1024px) { .article-slider-viewport { height: 550px; } }
@media (min-width: 1280px) { .article-slider-viewport { height: 620px; } }

.article-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.article-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.article-slide-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform 8s ease-out;
}
.article-slide.is-active .article-slide-media {
  transform: scale(1.08);
}

.article-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85) 100%);
}

/* ترويسة العنوان فوق السلايدر */
.article-slider-header {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 4;
  padding: 2rem 0 4.5rem;
  pointer-events: none;
}
.article-slider-header .container-custom { pointer-events: auto; }
.article-slider-header h1 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
@media (min-width: 640px) {
  .article-slider-header h1 { font-size: 2rem; }
  .article-slider-header { padding: 2.5rem 0 5rem; }
}
@media (min-width: 1024px) {
  .article-slider-header h1 { font-size: 2.5rem; }
  .article-slider-header { padding: 3rem 0 5.5rem; }
}
.article-slider-header p {
  margin: 0.5rem 0 0;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  line-height: 1.6;
}
@media (min-width: 640px) {
  .article-slider-header p { font-size: 1.05rem; }
}

/* الأسهم الكبيرة على الجانبين */
.article-slider-arrow {
  display: none;
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 5;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.35);
}
@media (min-width: 640px) {
  .article-slider-arrow { display: inline-flex; width: 3rem; height: 3rem; }
}
.article-slider-arrow--start { inset-inline-start: 1rem; }
.article-slider-arrow--end { inset-inline-end: 1rem; }
.article-slider-arrow:hover {
  background-image: linear-gradient(135deg, #22b8cf 0%, #0e7490 100%);
  border-color: transparent;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 32px -6px rgba(14, 116, 144, 0.55);
}
.article-slider-arrow:active { transform: translateY(-50%) scale(0.96); }

/* شريط التحكم السفلي: أسهم صغيرة + مؤشرات نبضية */
.article-slider-controls {
  position: absolute;
  inset-inline: 0;
  bottom: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.5rem 1rem;
}
@media (min-width: 640px) {
  .article-slider-controls { bottom: 1.5rem; gap: 1rem; }
}

.article-slider-miniarrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.article-slider-miniarrow:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.article-slider-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.4);
}
@media (min-width: 640px) {
  .article-slider-dots { gap: 0.55rem; padding: 0.6rem 1.1rem; }
}

.article-slider-dot {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  padding: 0;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.35s ease;
  display: inline-block;
  flex-shrink: 0;
}
@media (min-width: 640px) { .article-slider-dot { width: 0.6rem; height: 0.6rem; } }
.article-slider-dot.is-active {
  width: 1.5rem;
  background: #67e8f9;
}
@media (min-width: 640px) { .article-slider-dot.is-active { width: 1.75rem; } }

/* بطاقة محتوى الخبر/المشروع - عريضة لتناسب عرض السلايدر */
.article-body-card {
  background: var(--surface, #fff);
  border: 1px solid #e4edf2;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 6px 20px -4px rgba(23, 27, 33, 0.1);
}
@media (min-width: 640px) {
  .article-body-card { padding: 2.5rem 3rem; }
}

.article-body-text {
  font-size: 1rem;
  line-height: 2;
  color: #0f2233;
  margin: 0;
  text-align: justify;
}
@media (min-width: 640px) {
  .article-body-text { font-size: 1.125rem; line-height: 2.1; }
}


/* =========================================================================
   تفاصيل الخبر — عنوان أسفل السلايدر + محتوى بعرض مريح
   ========================================================================= */
.news-article-heading {
  width: 100%;
  background: #fff;
  border-top: 1px solid rgba(228, 237, 242, 0.85);
  border-bottom: 1px solid #e4edf2;
}
.news-article-heading-inner {
  width: 100%;
  padding: 1.75rem 1.25rem 2rem;
}
.news-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  color: #5b6b7a;
  font-size: .9rem;
  font-weight: 600;
}
.news-article-category {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: .35rem .9rem;
  background: rgba(8, 145, 178, 0.1);
  color: #0e7490;
  font-size: .8rem;
  font-weight: 700;
}
.news-article-meta-separator {
  color: #c3d0d8;
}
.news-article-title {
  margin: .7rem 0 0;
  color: #0f2233;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: -.02em;
}
.news-article-excerpt {
  max-width: 1100px;
  margin: .7rem 0 0;
  color: #5b6b7a;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.9;
}
.news-article-excerpt.hidden { display: none; }
.news-article-content-section {
  width: 100%;
  margin: 0;
  padding: 1.25rem 1.25rem 3.5rem;
}
.news-article-body-full {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}
.news-article-body-full .article-body-text p {
  margin: 0 0 1.1em;
}
.news-article-body-full .article-body-text ul,
.news-article-body-full .article-body-text ol {
  margin: 0 0 1.1em;
  padding-inline-start: 1.5em;
}
.news-article-body-full .article-body-text li {
  margin-bottom: .4em;
}
.news-article-body-full .article-body-text p:last-child,
.news-article-body-full .article-body-text ul:last-child,
.news-article-body-full .article-body-text ol:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   تفاصيل المشروع — نفس اللغة البصرية لصفحة الخبر
   - السلايدر أقصر وأكثر توازناً
   - عنوان المشروع وحالته أسفل السلايدر
   - تفاصيل التمويل والأهداف والمحتوى بعرض مريح
   ========================================================================= */
.project-detail-heading {
  width: 100%;
  background: #fff;
  border-top: 1px solid rgba(228, 237, 242, 0.85);
  border-bottom: 1px solid #e4edf2;
}
.project-detail-heading-inner {
  width: 100%;
  padding: 1.75rem 1.25rem 2rem;
}
.project-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.project-detail-title {
  margin: .7rem 0 0;
  color: #0f2233;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: -.02em;
}
.project-detail-excerpt {
  max-width: 1100px;
  margin: .7rem 0 0;
  color: #5b6b7a;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.9;
}
.project-detail-content-wrap {
  width: 100%;
  margin: 0;
  padding: 1.25rem 1.25rem 3.5rem;
}
.project-detail-content {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid #e4edf2;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 8px 28px -12px rgba(15,34,51,.13);
}
.project-detail-intro {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 2.05;
  color: #0f2233;
  margin: 0;
}
.project-detail-section-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f2233;
  margin: 2rem 0 .8rem;
}
.project-detail-stat {
  border: 1px solid #e4edf2;
  border-radius: 1rem;
  padding: 1rem;
  background: linear-gradient(180deg,#fff 0%,#f9fcfd 100%);
}
.project-detail-stat-label { display:block; font-size:.78rem; color:#7c8a98; }
.project-detail-stat-value { display:block; margin-top:.25rem; font-size:1.05rem; font-weight:800; color:#0f2233; }
.project-detail-goals {
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:.7rem;
}
.project-detail-goal {
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  padding:.85rem 1rem;
  border:1px solid #e4edf2;
  border-radius:1rem;
  background:#fff;
  color:#0f2233;
  line-height:1.75;
}
.project-detail-goal i { flex:0 0 auto; color:#0e6c09; margin-top:.2rem; }
.project-detail-media {
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:1.25rem;
  border:1px solid #e4edf2;
}
.project-detail-cta {
  margin-top:2rem;
  padding:1.5rem;
  border:1px solid rgba(14,108,9,.15);
  border-radius:1.25rem;
  background:linear-gradient(135deg,rgba(14,108,9,.05),rgba(34,184,207,.06));
  text-align:center;
}
.project-related {
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:0 1.25rem 4rem;
}
.project-related h2 { margin-bottom:1.2rem; }
.project-related-grid {
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:1rem;
}
.project-related-card {
  display:block;
  overflow:hidden;
  border:1px solid #e4edf2;
  border-radius:1.25rem;
  background:#fff;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.project-related-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px -15px rgba(15,34,51,.22); border-color:rgba(14,108,9,.25); }
.project-related-card img { width:100%; height:170px; object-fit:cover; display:block; }
.project-related-card-body { padding:1rem; }
.project-related-card-body h3 { margin:0; font-size:1rem; font-weight:800; color:#0f2233; }
.project-related-card-body p { margin:.45rem 0 0; font-size:.84rem; color:#5b6b7a; line-height:1.75; }
@media (min-width:640px) {
  .project-detail-heading-inner { padding:2.25rem 2.5rem 2.5rem; }
  .project-detail-content-wrap { padding:1.5rem 2.5rem 4rem; }
  .project-detail-content { padding:2.25rem 2.5rem; }
  .project-detail-goals { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-detail-media { height:330px; }
  .project-related { padding-inline:2.5rem; }
  .project-related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1024px) {
  .project-detail-heading-inner { padding:2.5rem 4rem 2.75rem; }
  .project-detail-content-wrap { padding-inline:4rem; }
  .project-detail-content { padding:2.75rem 3.25rem; }
  .project-detail-media { height:390px; }
  .project-related { padding-inline:4rem; }
}
@media (min-width:1440px) {
  .project-detail-heading-inner { padding-inline:5rem; }
  .project-detail-content-wrap,.project-related { padding-inline:5rem; }
}

/* تقليل الحركة عند تفضيل المستخدم */
@media (prefers-reduced-motion: reduce) {
  .article-slide { transition: none; }
  .article-slide.is-active .article-slide-media { transform: none; animation: none; }
}

/* ===== Public booking calendar ===== */
.booking-doctor-card {
  width: 100%; display: flex; align-items: center; gap: .75rem; text-align: right;
  padding: .85rem 1rem; border: 1px solid var(--color-line); border-radius: 1rem;
  background: #fff; color: var(--color-ink); transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.booking-doctor-card:hover { border-color: rgba(14,116,144,.42); transform: translateY(-1px); }
.booking-doctor-card.is-selected { border-color: var(--color-primary); background: rgba(14,116,144,.07); color: var(--color-primary); }
.booking-doctor-card strong { display:block; font-size:.92rem; }
.booking-doctor-card small { display:block; margin-top:.25rem; color:var(--color-muted); font-size:.72rem; line-height:1.55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.booking-doctor-icon { display:inline-flex; align-items:center; justify-content:center; width:2.35rem; height:2.35rem; border-radius:.8rem; background:rgba(14,116,144,.09); color:var(--color-primary); flex:0 0 auto; }
.booking-doctor-icon svg { width:1rem; height:1rem; }
.booking-calendar { border:1px solid var(--color-line); border-radius:1.25rem; background:#fff; padding:1rem; }
.booking-calendar-head { display:grid; grid-template-columns:2.5rem 1fr 2.5rem; align-items:center; gap:.75rem; }
.booking-calendar-nav { width:2.5rem; height:2.5rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(14,116,144,.35); border-radius:.8rem; color:var(--color-primary); background:#fff; transition:.18s ease; }
.booking-calendar-nav:hover:not(:disabled) { background:rgba(14,116,144,.08); }
.booking-calendar-nav:disabled { opacity:.3; cursor:not-allowed; }
.booking-calendar-weekdays, .booking-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.35rem; }
.booking-calendar-weekdays { margin-top:1rem; color:var(--color-muted); font-size:.72rem; font-weight:700; text-align:center; }
.booking-calendar-weekdays span { padding:.25rem 0; }
.booking-calendar-grid { margin-top:.35rem; }
.booking-calendar-empty { aspect-ratio:1/1; }
.booking-calendar-day { aspect-ratio:1/1; min-height:2.35rem; border-radius:.7rem; display:flex; align-items:center; justify-content:center; border:1px solid transparent; font-size:.82rem; font-weight:700; transition:.16s ease; background:#fff; }
.booking-calendar-day.is-disabled { color:#b7c0c6; background:#f8fafb; cursor:not-allowed; }
.booking-calendar-day.is-available { color:var(--color-primary); border-color:rgba(14,116,144,.7); background:rgba(14,116,144,.035); }
.booking-calendar-day.is-available:hover { background:rgba(14,116,144,.11); transform:translateY(-1px); }
.booking-calendar-day.is-full { color:#be123c; border-color:rgba(225,29,72,.35); background:rgba(225,29,72,.08); cursor:not-allowed; }
.booking-calendar-day.is-selected { color:#fff !important; border-color:var(--color-primary) !important; background:var(--color-primary) !important; box-shadow:0 8px 20px -10px rgba(14,116,144,.8); }
.booking-calendar-legend { display:flex; flex-wrap:wrap; gap:.75rem 1rem; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--color-line); font-size:.7rem; color:var(--color-muted); }
.booking-calendar-legend span { display:inline-flex; align-items:center; gap:.35rem; }
.booking-legend-dot { width:.65rem; height:.65rem; border-radius:.2rem; display:inline-block; border:1px solid; }
.booking-legend-dot.is-available { border-color:var(--color-primary); background:rgba(14,116,144,.08); }
.booking-legend-dot.is-full { border-color:rgba(225,29,72,.45); background:rgba(225,29,72,.12); }
.booking-legend-dot.is-selected { border-color:var(--color-primary); background:var(--color-primary); }
.booking-time-btn { display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:2.75rem; padding:.65rem .75rem; border:1px solid var(--color-line); border-radius:.8rem; background:#fff; color:var(--color-ink); font-size:.82rem; font-weight:700; transition:.16s ease; }
.booking-time-btn:hover { border-color:rgba(14,116,144,.55); background:rgba(14,116,144,.05); color:var(--color-primary); }
.booking-time-btn.is-selected { border-color:var(--color-primary); background:var(--color-primary); color:#fff; }
@media (max-width: 639px) {
  .booking-calendar { padding:.8rem; }
  .booking-calendar-grid, .booking-calendar-weekdays { gap:.22rem; }
  .booking-calendar-day { min-height:2.1rem; font-size:.75rem; border-radius:.6rem; }
  .booking-doctor-card small { white-space:normal; }
}

/* ===== الإنجليزية: النصوص أطول، نضغط الهيدر كي لا تخرج الأزرار عن مكانها ===== */
[dir="ltr"] #site-header .container-custom > div { gap: 0.75rem; }
[dir="ltr"] #site-header nav#desktop-nav { min-width: 0; }
[dir="ltr"] #site-header h3 { font-size: 0.9rem; }
[dir="ltr"] #site-header #desktop-nav > a,
[dir="ltr"] #site-header #desktop-nav .nav-dropdown > a {
  padding-inline: 0.35rem !important;
  font-size: 0.8125rem;
}
[dir="ltr"] #site-header #header-actions { gap: 0.4rem; margin-inline-start: 0; }
[dir="ltr"] #site-header #header-actions > a {
  padding-inline: 0.85rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ===== الهيدر بعرض الصفحة كاملاً وملاصق لأعلى الصفحة ===== */
#site-header,
#site-header.is-scrolled {
  top: 0;
  inset-inline: 0;
  border-radius: 0;
  border-top-width: 0;
}
@media (min-width: 1024px) {
  #site-header { top: 0; inset-inline: 0; }
  #site-header .container-custom { max-width: none; padding-inline: 2.5rem; }
}

/* أزرار الهيدر الثانوية (بوابة المريض + اللغة) بنفس الستايل وبارتفاع زر «حجز موعد» */
#site-header #header-actions .lang-switch { padding: 0.6rem 1.1rem; font-size: 0.875rem; }