/* ===== نظام التصميم - منصة إلكترونية تعليمية =====
   الهوية: أبيض كمساحة تنفّس + كحلي عميق (#112E62) كعمود فقري + خردلي (#FFCE1B) كلون طاقة.
   قاعدة الاستخدام: الكحلي للبنية والنصوص والأسطح الداكنة، والخردلي للتمييز ونداءات
   الفعل فقط - لا يُستخدم الخردلي كلون نص على أبيض (تباينه ضعيف)، بل كخلفية بنص كحلي،
   أو عبر --gold-800 حين نحتاج نصاً خردلياً مقروءاً. */
:root {
  --color-white: #FFFFFF;

  /* الكحلي العميق - العمود الفقري للهوية */
  --navy-900: #081832;
  --navy-800: #0B2149;
  --navy-700: #112E62;
  --navy-600: #1A3F7E;
  --navy-500: #27539C;
  --navy-400: #4A73B8;
  --navy-300: #8CA2C7;
  --navy-100: #D5DEEC;
  --navy-50:  #EDF1F8;

  /* الخردلي - لون الطاقة والتمييز */
  --gold-800: #6F5300;
  --gold-700: #A87F00;
  --gold-600: #E0B400;
  --gold-500: #FFCE1B;
  --gold-400: #FFDC5C;
  --gold-300: #FFE894;
  --gold-100: #FFF5CE;
  --gold-50:  #FFFBEC;

  /* أسطح ناعمة */
  --bg-slate-50: #F8FAFD;
  --bg-slate-100: #EFF3F9;
  --tint-navy: #EDF1F8;
  --tint-navy-2: #DFE7F3;
  --tint-gold: #FFF7DC;
  --tint-gold-2: #FFEFB8;

  /* أسماء الأسطح القديمة مُبقاة كمرادفات حتى لا تنكسر الشاشات القائمة */
  --bg-indigo-50: var(--tint-navy);
  --bg-sky-100: var(--tint-navy-2);
  --bg-cyan-50: var(--tint-gold);

  --brand-primary: var(--navy-700);
  --brand-primary-dark: var(--navy-900);
  --brand-primary-light: var(--navy-500);
  --brand-accent: var(--gold-500);
  --brand-accent-dark: var(--gold-600);
  --brand-success: #128A5E;
  --brand-warning: var(--gold-600);
  --brand-danger: #D0342C;

  --ink-900: #0B1B33;
  --ink-700: #2C3E5C;
  --ink-500: #64748B;
  --ink-300: #C3CDDC;

  --radius-lg: 16px;
  --shadow-soft: 0 2px 8px rgba(8, 24, 50, 0.04), 0 8px 24px rgba(8, 24, 50, 0.07);
  --shadow-soft-hover: 0 8px 16px rgba(8, 24, 50, 0.06), 0 20px 40px rgba(8, 24, 50, 0.12);
  --shadow-primary: 0 8px 20px rgba(17, 46, 98, 0.24);
  --shadow-primary-hover: 0 14px 32px rgba(17, 46, 98, 0.34);
  --shadow-accent: 0 8px 20px rgba(224, 180, 0, 0.38);

  /* إعادة تلوين Bootstrap بالكامل عبر متغيراته الخاصة (بدون الحاجة لبناء SASS) */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 17, 46, 98;
  --bs-success: var(--brand-success);
  --bs-success-rgb: 18, 138, 94;
  --bs-warning: var(--brand-accent);
  --bs-warning-rgb: 255, 206, 27;
  --bs-danger: var(--brand-danger);
  --bs-danger-rgb: 208, 52, 44;
  --bs-border-radius: var(--radius-lg);
  --bs-border-radius-lg: 20px;
  --bs-border-radius-sm: 10px;
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--navy-500);
  /* OmrSign أولاً ليلتقط رمز الريال وحده - unicode-range يمنعه من تجاوز ذلك */
  --bs-body-font-family: "OmrSign", "Cairo", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }

html, body {
  background-color: var(--color-white);
  font-family: var(--bs-body-font-family);
  color: var(--ink-900);
}

body { min-height: 100vh; display: flex; flex-direction: column; margin-bottom: 0; overflow-x: hidden; }
main { flex: 1 0 auto; }

a { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; max-width: 100%; overflow-wrap: break-word; }

/* ===== أزرار ===== */
.btn {
  border-radius: var(--radius-lg);
  font-weight: 700;
  padding-inline: 1.4rem;
  padding-block: .6rem;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary, .btn-success, .btn-danger { border: none; color: #fff; }
.btn-warning, .btn-warning:hover { border: none; color: var(--navy-900); }

.btn-primary {
  background: linear-gradient(135deg, var(--navy-600) 0%, var(--navy-800) 100%);
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%);
  box-shadow: var(--shadow-primary-hover);
}

/* زر التمييز الخردلي - نداء الفعل الرئيسي في الهوية الجديدة (نص كحلي على خردلي
   لضمان تباين مقروء، فالخردلي فاتح جداً ليحمل نصاً أبيض) */
.btn-accent {
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
  border: none;
  color: var(--navy-900);
  box-shadow: var(--shadow-accent);
}
.btn-accent:hover {
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
  color: var(--navy-900);
  box-shadow: 0 14px 32px rgba(224, 180, 0, .48);
}

.btn-outline-primary {
  border: 1.5px solid var(--navy-100);
  color: var(--brand-primary);
  background: #fff;
}
.btn-outline-primary:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.btn-light {
  background: #fff;
  border: 1px solid rgba(11, 27, 51, .08);
  box-shadow: var(--shadow-soft);
  color: var(--ink-700);
}
.btn-light:hover { background: #fff; color: var(--brand-primary); box-shadow: var(--shadow-soft-hover); }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(17, 46, 98, 0.22);
}
.form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }

.form-control, .form-select {
  border-radius: 12px;
  border-color: rgba(15, 23, 42, .10);
  padding-block: .65rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary);
}

/* ===== بطاقات Premium ===== */
.card-premium {
  background: var(--color-white);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
  position: relative;
}
.card-premium:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft-hover);
  border-color: rgba(17, 46, 98, .16);
}

/* ===== تأثير زجاجي بسيط ===== */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ===== خلفيات ناعمة للأقسام (تدرّجات بين ألوان الهوية بدل الأبيض المسطّح) ===== */
/* أسماء الأقسام تاريخية (slate/indigo/sky/cyan) لكن قيمها الآن ضمن الهوية الجديدة:
   تدرّجات كحلية باردة وتدرّج خردلي دافئ واحد لكسر الرتابة بين الأقسام */
.section-slate { background: linear-gradient(165deg, var(--bg-slate-50) 0%, var(--bg-slate-100) 100%); }
.section-indigo { background: linear-gradient(165deg, var(--tint-navy) 0%, var(--tint-navy-2) 100%); }
.section-sky { background: linear-gradient(165deg, var(--tint-navy-2) 0%, var(--bg-slate-50) 100%); }
.section-cyan { background: linear-gradient(165deg, var(--tint-gold) 0%, var(--tint-navy) 100%); }
.section-gold { background: linear-gradient(165deg, var(--gold-50) 0%, var(--tint-gold) 100%); }
.section-navy { background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-700) 100%); color: #fff; }
.section-navy .text-secondary { color: rgba(255,255,255,.66) !important; }
.section-navy .section-title { color: #fff; }

section { padding: 5rem 0; overflow-x: clip; }

.section-title {
  font-weight: 800;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  margin-bottom: .75rem;
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--navy-700) 0%, var(--gold-500) 100%);
  margin: .85rem auto 0;
}
.text-center .section-title::after { margin-inline: auto; }
.section-subtitle { color: var(--ink-500); margin-bottom: 3rem; font-size: 1.05rem; }

/* ===== Navbar عائم بتأثير زجاجي ===== */
.navbar-float-wrap {
  position: fixed;
  top: 14px;
  inset-inline: 14px;
  z-index: 1030;
}
.navbar-spacer { height: 84px; }

.navbar-eduplatform {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255,255,255,.8);
  border-radius: 999px;
  padding-block: .5rem;
  max-width: 1280px;
  margin-inline: auto;
  transition: border-radius .2s ease;
}
.navbar-eduplatform.show,
.navbar-eduplatform:has(.navbar-collapse.show) { border-radius: 28px; }

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff;
  box-shadow: var(--shadow-primary);
  font-size: 1rem;
}
.navbar-brand { font-weight: 800; color: var(--ink-900) !important; font-size: 1.15rem; }

/* ===== شريط تثبيت التطبيق (PWA) ===== */
.pwa-banner {
  position: fixed;
  inset-inline: 12px;
  bottom: 12px;
  z-index: 1055;
  display: none;
}
.pwa-banner.show { display: block; animation: pwa-rise .35s cubic-bezier(.2,.8,.2,1); }

@keyframes pwa-rise {
  from { transform: translateY(120%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-banner.show { animation: none; }
}

.pwa-banner-inner {
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #fff;
  border-radius: 20px;
  padding: .85rem 1rem;
  box-shadow: 0 18px 44px rgba(8, 24, 50, .28);
  border: 1px solid rgba(8, 24, 50, .06);
}

.pwa-banner-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  object-fit: contain;
  background: var(--tint-navy);
}

.pwa-banner-text { flex: 1 1 auto; min-width: 0; }
.pwa-banner-title { font-weight: 800; font-size: .98rem; color: var(--ink-900); line-height: 1.4; }
.pwa-banner-sub { font-size: .8rem; color: var(--ink-500); line-height: 1.5; }
.pwa-banner-sub i { color: var(--navy-700); }

.pwa-install-btn {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: .6rem 1.5rem;
  font-family: inherit;
  font-weight: 800;
  font-size: .9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-600) 0%, var(--navy-800) 100%);
  box-shadow: 0 8px 18px rgba(17, 46, 98, .3);
  cursor: pointer;
}
.pwa-install-btn:hover { background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%); }

.pwa-close {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--ink-500);
  width: 34px; height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.05rem;
}
.pwa-close:hover { background: var(--bg-slate-100); color: var(--ink-900); }

/* التبديل بين وضع أندرويد (زر تثبيت) ووضع آيفون (تعليمات) */
.pwa-banner .pwa-sub-ios,
.pwa-banner .pwa-ios-close { display: none; }
.pwa-banner.is-ios .pwa-sub-android,
.pwa-banner.is-ios .pwa-install-btn,
.pwa-banner.is-ios #pwaCloseBtn { display: none; }
.pwa-banner.is-ios .pwa-sub-ios { display: block; }
.pwa-banner.is-ios .pwa-ios-close { display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 575.98px) {
  .pwa-banner-inner { padding: .7rem .8rem; gap: .7rem; border-radius: 18px; }
  .pwa-banner-icon { width: 44px; height: 44px; border-radius: 12px; }
  .pwa-banner-title { font-size: .9rem; }
  .pwa-banner-sub { font-size: .74rem; }
  .pwa-install-btn { padding: .5rem 1.1rem; font-size: .84rem; }
  /* الشريط يرتفع فوق زر الواتساب حتى لا يتراكبا */
  .whatsapp-fab { bottom: 96px; }
}

/* ===== زر واتساب العائم (يسار الشاشة) ===== */
.whatsapp-fab {
  position: fixed;
  /* يسار الشاشة فعلياً - نستخدم left لا inset-inline-start لأن الأخيرة تنقلب
     لليمين في الاتجاه العربي RTL */
  left: 20px;
  bottom: 20px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 58px;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #25D366 0%, #12A150 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(18, 161, 80, .42);
  overflow: hidden;
  transition: gap .25s ease, padding .25s ease, box-shadow .25s ease, transform .2s ease;
}
.whatsapp-fab:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(18, 161, 80, .5); }

.whatsapp-fab i {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}

/* النص مطويّ افتراضياً وينفتح عند المرور - لا يزاحم المحتوى ويبقى واضح الغرض */
.whatsapp-fab-label {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-weight: 700;
  font-size: .92rem;
  transition: max-width .25s ease, opacity .2s ease;
}
.whatsapp-fab:hover .whatsapp-fab-label { max-width: 160px; opacity: 1; padding-right: 1.15rem; }

@media (max-width: 575.98px) {
  .whatsapp-fab { left: 14px; bottom: 14px; height: 52px; }
  .whatsapp-fab i { width: 52px; height: 52px; font-size: 1.55rem; }
  /* على الجوال لا يوجد "مرور" فيبقى الزر أيقونة فقط */
  .whatsapp-fab:hover .whatsapp-fab-label { max-width: 0; opacity: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab, .whatsapp-fab-label { transition: none; }
}

/* ===== شعار المنصة ===== */
.brand-logo {
  height: 46px;
  width: auto;
  max-width: 100%;
  display: block;
}
.brand-logo-lg { height: 64px; }

@media (max-width: 575.98px) {
  .brand-logo { height: 38px; }
  .brand-logo-lg { height: 52px; }
}

/* اسم المنصة صار جزءاً من ملف الشعار نفسه (الأبيض/الكحلي حسب الخلفية)، فلم تعد
   هناك حاجة لتركيبه نصياً مع شارة + مرسومة بالـ CSS. */
.navbar-eduplatform .nav-link {
  font-weight: 700;
  color: var(--ink-700) !important;
  border-radius: 999px;
  padding: .55rem 1.1rem !important;
  transition: background-color .15s ease, color .15s ease;
}
.navbar-eduplatform .nav-link:hover,
.navbar-eduplatform .nav-link.active {
  background-color: var(--tint-navy);
  color: var(--brand-primary) !important;
}
/* خيط خردلي رفيع أسفل الرابط النشط - توقيع بصري صغير للهوية */
.navbar-eduplatform .nav-link.active { box-shadow: inset 0 -3px 0 var(--gold-500); }
@media (max-width: 991.98px) {
  .navbar-eduplatform { border-radius: 24px; padding: .75rem 1rem; }
  .navbar-eduplatform .navbar-collapse { margin-top: .5rem; }
  .navbar-eduplatform .navbar-nav { margin-bottom: .5rem; }
}

/* ===== Hero / Slider ===== */
.hero-slide {
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 460px;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0 24px 60px rgba(8, 24, 50, .22);
}
.hero-overlay {
  background:
    radial-gradient(circle at 88% -20%, rgba(255,206,27,.30) 0%, transparent 52%),
    radial-gradient(circle at 15% -10%, rgba(255,255,255,.14) 0%, transparent 45%),
    linear-gradient(115deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--navy-600) 100%);
  width: 100%;
  height: 100%;
  padding: 3.5rem;
  border-radius: 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: .35;
  mask-image: linear-gradient(115deg, black, transparent 70%);
  pointer-events: none;
}
.hero-overlay > * { position: relative; z-index: 1; }
.hero-overlay h1 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 3rem); }

/* ===== شريط الإعلانات المتحرك ===== */
.banner-carousel { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-soft); }
.banner-slide {
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.banner-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15,23,42,.6) 0%, rgba(15,23,42,.05) 60%, transparent 100%);
}
.banner-slide-caption { position: relative; z-index: 1; color: #fff; padding: 1.5rem 1.75rem; }
.banner-carousel .carousel-indicators { margin-bottom: .6rem; }
.banner-carousel .carousel-indicators [data-bs-target] {
  width: 8px; height: 8px; border-radius: 50%;
  background-color: rgba(255,255,255,.6);
  border: none;
}
.banner-carousel .carousel-indicators .active { background-color: #fff; }
@media (max-width: 767.98px) {
  .banner-slide { height: 160px; }
}

/* ===== Hero حديث (بدون سلايدر) - خلفية زرقاء متدرجة + Mockup عائم ===== */
.hero-modern {
  position: relative;
  margin-top: -84px;
  padding-top: calc(84px + 3rem);
  padding-bottom: 4rem;
  overflow: clip;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 58%, var(--navy-600) 100%);
  border-radius: 0 0 40px 40px;
}
/* شريط خردلي رفيع أسفل الهيرو - يفصل الكحلي عن الأبيض ويثبّت الهوية بلمسة واحدة */
.hero-modern::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-500) 25%, var(--gold-400) 50%, var(--gold-500) 75%, transparent 100%);
  border-radius: 999px;
  /* صفر لا 2: عدّة شاشات تُصعد بطاقاتها فوق حافة الهيرو بهامش سالب، وبقيمة أعلى كان
     هذا الشريط يُرسم فوقها فيقطعها بخط أصفر عرضي. يبقى زخرفة خلف المحتوى دائماً. */
  z-index: 0;
}

/* الأقسام التي تتراكب مع الهيرو تحتاج سياق تكديس أعلى منه ليبقى محتواها فوق زخارفه */
.hero-modern + section,
section.section-indigo[style*="margin-top"] {
  position: relative;
  z-index: 1;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}
.hero-blob-1 {
  width: 520px; height: 520px;
  top: -220px; inset-inline-end: -160px;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
}
.hero-blob-2 {
  width: 420px; height: 420px;
  top: 120px; inset-inline-start: -180px;
  background: radial-gradient(circle, rgba(255,206,27,.32), transparent 70%);
}
.hero-blob-3 {
  width: 360px; height: 360px;
  bottom: -180px; inset-inline-end: 10%;
  background: radial-gradient(circle, rgba(255,220,92,.22), transparent 70%);
}
.hero-modern .container { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.hero-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(255,206,27,.35);
}

.hero-headline {
  font-weight: 900;
  font-size: clamp(1.9rem, 1.5rem + 2.4vw, 3.6rem);
  line-height: 1.18;
  margin-block: 1.25rem;
  max-width: 100%;
  overflow-wrap: break-word;
  color: #fff;
}
.text-gradient {
  background: linear-gradient(120deg, var(--gold-300) 0%, var(--gold-500) 60%, var(--gold-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead { font-size: 1.15rem; color: rgba(255,255,255,.82); max-width: 520px; }

/* داخل الهيرو الكحلي يصبح نداء الفعل خردلياً - أعلى تباين وأقوى جذب على الكحلي */
.hero-modern .btn-primary {
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
  color: var(--navy-900);
  box-shadow: 0 12px 28px rgba(255, 206, 27, .32);
}
.hero-modern .btn-primary:hover {
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 100%);
  color: var(--navy-900);
  box-shadow: 0 16px 36px rgba(255, 206, 27, .42);
}

.btn-outline-hero {
  background: rgba(255,255,255,.10);
  border: 1.5px solid rgba(255,255,255,.45);
  color: #fff;
}
.btn-outline-hero:hover { background: #fff; border-color: #fff; color: var(--brand-primary); }

.hero-trust { margin-top: 2.5rem; }
.hero-modern .hero-trust span.text-secondary { color: rgba(255,255,255,.86) !important; }
.hero-trust-avatars { display: flex; }
.hero-trust-avatars span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, var(--gold-100), var(--gold-300));
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-800); font-size: .8rem;
  margin-inline-start: -10px;
}
.hero-trust-avatars span:first-child { margin-inline-start: 0; }

/* ===== بطاقة الإعلان في الهيرو =====
   مستقيمة بلا ميل وبلا عناصر عائمة حولها: الإعلان مادة تسويقية يجب أن تُقرأ كاملة،
   والميل والبطاقات العائمة كانت تقصّ أطرافه وتحجب جزءاً من الصورة. */
.hero-visual-ad { position: relative; padding: .5rem 0; }

.hero-ad-card {
  display: block;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(8, 24, 50, .45), 0 4px 20px rgba(8, 24, 50, .12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero-ad-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 70px -20px rgba(8, 24, 50, .5), 0 6px 24px rgba(8, 24, 50, .16);
}

.hero-ad-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
}

.hero-ad-caption { padding: 1rem 1.25rem; }
.hero-ad-title { font-weight: 800; font-size: 1.05rem; color: var(--ink-900); }
.hero-ad-subtitle { font-size: .88rem; color: var(--ink-500); margin-top: .15rem; }

@media (max-width: 991.98px) {
  .hero-visual-ad { padding: 1.5rem 0 .5rem; }
  .hero-ad-image { max-height: 380px; }
}

/* ===== المُصغّر (Mockup) العائم ===== */
.hero-visual { position: relative; padding: 2rem 1rem; }
.hero-card-main {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 60px -20px rgba(8,24,50,.42), 0 4px 20px rgba(8,24,50,.10);
  border: 1px solid rgba(255,255,255,.6);
  overflow: hidden;
  transform: rotate(-2deg);
  transition: transform .4s ease;
}
.hero-visual:hover .hero-card-main { transform: rotate(0deg); }

.hero-card-header {
  display: flex;
  gap: .4rem;
  padding: .85rem 1rem;
  background: var(--bg-slate-50);
  border-bottom: 1px solid rgba(15,23,42,.05);
}
.hero-card-header .dot-win { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: #ef4444; } .dot-yellow { background: #f59e0b; } .dot-green { background: #22c55e; }

.hero-card-body { padding: 1.5rem; }
.hero-play-btn {
  width: 100%;
  height: 150px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-500); font-size: 1.8rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-primary);
  position: relative;
  overflow: hidden;
}
.hero-play-btn::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
.hero-progress { height: 8px; border-radius: 999px; background: var(--navy-100); overflow: hidden; }
.hero-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy-700) 0%, var(--gold-500) 100%); }

.hero-float-card {
  position: absolute;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: var(--shadow-soft-hover);
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  border: 1px solid rgba(255,255,255,.7);
  animation: float-y 5s ease-in-out infinite;
}
.hero-float-1 { top: 8%; inset-inline-start: -8%; animation-delay: .3s; }
.hero-float-2 { bottom: 6%; inset-inline-end: -6%; animation-delay: 1s; }
.hero-float-3 { top: 42%; inset-inline-end: -10%; animation-delay: 1.7s; }

/* الرابعة أسفل يمين المُصغّر: الجهة الوحيدة الخالية - أعلاه بطاقةٌ واحدة
   ويساره بطاقتان */
.hero-float-4 { bottom: 10%; inset-inline-start: -6%; animation-delay: 2.3s; }
.hero-float-card i { font-size: 1.3rem; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-float-card { animation: none; }
}

/* ===== أيقونات مواد دراسية عائمة حول المُصغّر - لتعزيز الطابع الدراسي بصرياً ===== */
.hero-icon-orb {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.38);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 10px 22px rgba(15,23,42,.14);
  animation: float-y 6s ease-in-out infinite;
  z-index: 2;
}
.hero-orb-1 { top: -5%; inset-inline-start: 32%; animation-delay: .2s; }
.hero-orb-2 { top: 58%; inset-inline-start: -6%; animation-delay: 2.3s; }
.hero-orb-3 { bottom: -6%; inset-inline-end: 24%; animation-delay: 1.1s; }
.hero-orb-4 { top: 6%; inset-inline-end: -5%; animation-delay: 3.2s; }
@media (prefers-reduced-motion: reduce) {
  .hero-icon-orb { animation: none; }
}
@media (max-width: 1199.98px) {
  .hero-icon-orb { display: none; }
}

/* البطاقات العائمة تخرج خارج حاوية المُصغّر بإزاحات سالبة، وتحتاج هامشاً جانبياً
   واسعاً ليظهر كاملاً. حتى 1199 لا يتوفر ذلك الهامش - وعلى آيباد Pro عمودياً (1024)
   كانت البطاقتان اليسرى تُقصّان من حافة الشاشة - فتتحول إلى شبكة منتظمة تحت المُصغّر.
   كانت inline-flex فتتدفق بعرض محتواها: اثنتان في سطر والثالثة وحدها بعرض مختلف. */
@media (max-width: 1199.98px) {
  .hero-visual { padding: 2rem .5rem 0; }

  .hero-float-card {
    position: static;
    animation: none;
    width: 100%;
    margin: 0;
  }

  .hero-visual .hero-float-1 { margin-top: 1rem; }

  /* البطاقات الأربع في شبكة: اثنتان في كل سطر */
  .hero-float-1, .hero-float-2, .hero-float-3, .hero-float-4 {
    display: flex;
  }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  .hero-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .hero-card-main { grid-column: 1 / -1; }

  /* أربعٌ في عمودين تملأ الشبكة تماماً - فلا حاجة لسطرٍ ممدود كما كان مع الثلاث */
  .hero-visual .hero-float-1 { margin-top: 0; }
}

@media (max-width: 575.98px) {
  .hero-visual { display: flex; flex-direction: column; gap: .65rem; }
  .hero-visual .hero-float-1 { margin-top: .35rem; }
}

.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(145deg, var(--tint-navy), var(--tint-navy-2));
  color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px rgba(17, 46, 98, .10);
}
/* تنويعات لونية للأيقونات ضمن الهوية: خردلي ودرجات كحلية ولونان دلاليان فقط
   (نجاح/خطر) - بدل الطيف الملوّن السابق الذي كان يشتّت الهوية */
.feature-icon.icon-gold { background: linear-gradient(145deg, var(--gold-100), var(--gold-300)); color: var(--gold-800); box-shadow: inset 0 0 0 1px rgba(224,180,0,.22); }
.feature-icon.icon-warning { background: linear-gradient(145deg, var(--gold-100), var(--gold-300)); color: var(--gold-800); box-shadow: inset 0 0 0 1px rgba(224,180,0,.22); }
.feature-icon.icon-navy { background: linear-gradient(145deg, var(--navy-700), var(--navy-900)); color: var(--gold-500); box-shadow: none; }
.feature-icon.icon-violet { background: linear-gradient(145deg, var(--navy-100), var(--navy-300)); color: var(--navy-800); box-shadow: inset 0 0 0 1px rgba(17,46,98,.14); }
.feature-icon.icon-cyan { background: linear-gradient(145deg, var(--gold-50), var(--gold-100)); color: var(--navy-700); box-shadow: inset 0 0 0 1px rgba(224,180,0,.18); }
.feature-icon.icon-success { background: linear-gradient(145deg, #D8F3E7, #B6E6D2); color: #0E6B49; box-shadow: inset 0 0 0 1px rgba(18,138,94,.14); }
.feature-icon.icon-danger { background: linear-gradient(145deg, #FBE3E1, #F6C9C6); color: #A82820; box-shadow: inset 0 0 0 1px rgba(208,52,44,.14); }

/* حرف بدل أيقونة لبعض المواد (اللغة العربية) - أوضح من أي أيقونة جاهزة */
.feature-icon .subject-letter {
  font-weight: 800;
  font-size: 1.5em;
  line-height: 1;
}

/* ===== شبكة Bento للمميزات ===== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(190px, auto);
  gap: 1.25rem;
}
.bento-item {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.bento-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft-hover); }
.bento-item.span-2 { grid-column: span 2; }
.bento-item.row-2 { grid-row: span 2; }
.bento-item.accent {
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  color: #fff;
  border: none;
}
.bento-item.accent .feature-icon { background: rgba(255,206,27,.18); color: var(--gold-500); box-shadow: none; }
.bento-item.accent p { color: rgba(255,255,255,.82); }
.bento-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15,23,42,.035) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  mask-image: radial-gradient(circle at 100% 0%, black, transparent 60%);
  pointer-events: none;
}
.bento-item h5 { font-size: 1.15rem; margin-bottom: .4rem; }
.bento-item p { color: var(--ink-500); margin-bottom: 0; }
.bento-item .feature-icon { margin-bottom: 1rem; }

@media (max-width: 991.98px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-item.row-2 { grid-row: span 1; }
}
@media (max-width: 575.98px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-item.span-2 { grid-column: span 1; }
}

/* ===== الباقات ===== */
.package-card { position: relative; }
/* الباقة المميّزة تُوسم بالخردلي - أوضح إشارة بصرية للباقة الموصى بها */
.package-card.featured { border: 2px solid var(--gold-500); box-shadow: var(--shadow-accent); }
.package-badge {
  position: absolute;
  top: -14px;
  right: 50%;
  transform: translateX(50%);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--navy-900);
  padding: .3rem 1.1rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  box-shadow: var(--shadow-accent);
}
.price-tag {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--navy-700);
}
.package-card.featured .price-tag { color: var(--gold-800); }

/* رمز الريال العماني الرسمي U+20C4. الرمز مُعتمد في يونيكود لكن إصدار 18.0 لم
   يُنشر بعد، فلا خط على أجهزة الطلاب يحويه وكتابته وحدها تظهر مربعاً فارغاً.
   لذلك يُحمَّل معه خط صغير (1.7ك.ب) يحوي هذا المحرف وحده، و unicode-range
   يقصره عليه فلا يمسّ العربية ولا الأرقام ولا يُنزَّل إلا في صفحة فيها سعر. */
@font-face {
  font-family: "OmrSign";
  src: url("/fonts/omr-sign.ttf") format("truetype");
  unicode-range: U+20C4;
  font-display: swap;
}

/* اختيار الفصل الدراسي في صفحة الدفع */
.semester-choices { display: grid; gap: .6rem; }
.semester-choice {
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1.5px solid var(--navy-100);
  border-radius: 14px;
  padding: .85rem 1rem;
  cursor: pointer;
  margin: 0;
  transition: border-color .15s ease, background-color .15s ease;
}
.semester-choice:has(input:checked) { border-color: var(--navy-700); background: var(--tint-navy); }
.semester-choice input { margin: 0; flex-shrink: 0; }
.semester-choice-name { display: block; font-weight: 700; }
.semester-choice-dates { display: block; font-size: .78rem; color: var(--ink-500); }

/* مدة الباقة حين تكون فصلاً دراسياً - تُبرز "فصل دراسي كامل" وتُبقي التاريخ تفصيلاً ثانوياً */
.package-duration-main {
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy-700);
}
.package-duration-main i { color: var(--gold-600); margin-inline-end: .25rem; }
.package-duration-sub { font-size: .78rem; color: var(--ink-500); margin-top: .1rem; }

.testimonial-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gold-300); }

/* ===== Footer ===== */
.footer-eduplatform {
  background: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 100%);
  padding: 3.5rem 0 1.5rem;
  margin-top: auto;
  border-top: 4px solid var(--gold-500);
}
.footer-eduplatform h6 { position: relative; padding-inline-start: .7rem; }
.footer-eduplatform h6::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .2em;
  width: 3px;
  height: 1em;
  border-radius: 999px;
  background: var(--gold-500);
}
.footer-eduplatform h6 { font-weight: 700; margin-bottom: 1rem; color: #fff; }
.footer-eduplatform a { color: rgba(255,255,255,.6); transition: color .15s ease; }
.footer-eduplatform a:hover { color: #fff; }
.footer-eduplatform .btn-light { color: var(--navy-800); }
.footer-eduplatform .btn-light:hover { color: var(--navy-900); background: var(--gold-500); }
.footer-eduplatform a:hover { color: var(--gold-500); }
.footer-eduplatform .navbar-brand { color: #fff !important; }
.footer-eduplatform p,
.footer-eduplatform .text-secondary { color: rgba(255,255,255,.58) !important; }
.footer-eduplatform hr { border-color: rgba(255,255,255,.12); opacity: 1; }

/* سطر حقوق النشر وجهة التصميم والبرمجة */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.footer-credit { font-size: .82rem; color: rgba(255, 255, 255, .5); }
.footer-credit a {
  color: rgba(255, 255, 255, .78) !important;
  font-weight: 700;
}
.footer-credit a:hover { color: var(--gold-500) !important; }

@media (max-width: 767.98px) {
  .footer-bottom { justify-content: center; text-align: center; flex-direction: column; }
}

/* ===== نموذج/بطاقة مصادقة ===== */
.auth-card { max-width: 460px; margin: 3rem auto; }

/* شعار المنصة أعلى بطاقات الدخول/التسجيل بدل أيقونة عامة - مهم خصوصاً في صفحة
   استعادة كلمة المرور التي يصلها المستخدم من رابط بريد ويحتاج تأكيد أنها المنصة فعلاً */
.auth-logo { height: 84px; width: auto; max-width: 100%; }
@media (max-width: 575.98px) { .auth-logo { height: 68px; } }

/* ===== شارات الحالة ===== */
.badge-soft-success { background: #D8F3E7; color: #0E6B49; }
.badge-soft-warning { background: var(--gold-100); color: var(--gold-800); }
.badge-soft-danger { background: #FBE3E1; color: #A82820; }
.badge-soft-primary { background: var(--tint-navy); color: var(--brand-primary); }
.badge-soft-accent { background: var(--gold-100); color: var(--gold-800); }
/* شارة صلبة خردلية للتمييز القوي (الأكثر شيوعاً، موصى به، جديد...) */
.badge-accent { background: var(--gold-500); color: var(--navy-900); font-weight: 800; }

/* ===== محتوى محمي: منع تحديد/سحب أساسي ===== */
.protected-content, .protected-content * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.protected-content img, .protected-content video { pointer-events: none; }
/* علامة تعريف واحدة في زاوية المحتوى المحمي بدل تكرارها قُطرياً فوقه - التكرار كان
   يحجب النص/الفيديو ويعيق المذاكرة، وهذه تحتفظ بغرض التتبّع دون التغطية. */
.watermark-overlay {
  position: absolute;
  inset-inline-start: 10px;
  bottom: 10px;
  pointer-events: none;
  z-index: 5;
}
.watermark-text {
  display: block;
  white-space: nowrap;
  background: rgba(15, 23, 42, 0.45);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

@media (max-width: 767.98px) {
  .hero-slide { min-height: 340px; border-radius: 20px; }
  .hero-overlay { padding: 1.75rem; border-radius: 20px; }
  section { padding: 3rem 0; }
}

/* ==========================================================================
   شبكة أمان لحركات AOS
   aos.css يضع opacity:0 على كل [data-aos^=fade] - والموقع يستخدمها على ٤٤ عنصراً -
   ثم لا يكشفها إلا aos.js. فإن تأخّر ملف السكربت أو تعذّر تحميله، تبقى الصفحة بيضاء
   تماماً رغم اكتمال تحميل كل شيء آخر. هنا نُبقي المحتوى ظاهراً حتى تُعلن AOS جاهزيتها
   بإضافة الصنف على <html>، فيستحيل أن يحجب فشلُ سكربتٍ زخرفيٍّ المحتوى نفسه.
   الأولوية (0,2,1) تتجاوز قاعدة aos.css ذات الأولوية (0,2,0) بلا !important.
   ========================================================================== */
html:not(.aos-ready) [data-aos] {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   شارة البطاقة: متوفر / قريباً / أضيف حديثاً
   تُوضع في زاوية البطاقة العلوية (البادئة في RTL = اليمين) فوق الأيقونة،
   والبطاقة تحتاج position: relative وهو مضبوط في العرض.
   ========================================================================== */
.card-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border-radius: 999px;
  line-height: 1.6;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(8, 24, 50, .1);
}

.card-badge i { font-size: .68rem; }

.card-badge.is-available { background: #D8F3E7; color: #0E6B49; }
.card-badge.is-soon      { background: #FFF5CE; color: #6F5300; }
.card-badge.is-new       { background: #E4EDFF; color: #16408F; }

/* داخل قائمة اختيار المواد تُعرض بجانب الاسم لا في زاوية بطاقة */
.subject-option .card-badge {
  position: static;
  margin-inline-start: .5rem;
  box-shadow: none;
}

/* بطاقة معطّلة: "قريباً" تعني أن المحتوى ليس جاهزاً، فلا تُفتح.
   pointer-events على الحاوية لا على البطاقة، ليشمل المنع رابط الالتفاف كله. */
.card-locked {
  pointer-events: none;
  opacity: .62;
  filter: grayscale(.35);
  position: relative;
}

.card-locked .card-premium { box-shadow: none; }

/* ===== بطاقة رقمٍ في شاشات المعلم بالموقع العام =====
   الشاشات العامة لا تحمّل admin.css، فأصنافُ لوحة الإدارة (stat-card) بلا أثر فيها.
   وهذا تعريفٌ واحد لها هنا باسمٍ خاص لا يصطدم بذاك ولا يُكرّره. */
.stat-tile {
  padding: 1.4rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.stat-tile .stat-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  background: var(--tint-navy);
  color: var(--navy-700);
  flex-shrink: 0;
}
.stat-tile .stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-tile .stat-label { color: #64748b; font-size: .85rem; font-weight: 600; margin-top: .15rem; }