/* =========================================
   1) متغيّرات الألوان والهوية العامة
   ========================================= */
:root {
  --bg-body:      #F6EDDD;
  --brand-dark:   #0A3A4A;  /* الأزرق-الأخضر الداكن */
  --brand-base:   #1A8C94;  /* الأزرق-الأخضر الفاتح */
  --brand-accent: #E9B622;  /* الذهبي / الأصفر */
  --brand-bg:     #F6EEDC;  /* الخلفية الدافئة */
  --brand-gold:   #f5b301;  /* اللون الذهبي */

  /* أسماء قديمة مستخدمة في بعض الأجزاء – نربطها بالجدول الجديد */
  --brand-teal:   #1A8C94;
  --brand-yellow: #E9B622;

  --text-main:  #1F2933;
  --text-muted: #6B7280;
  --card-bg:    #FFFFFF;

      /* ألوان مستويات الصعوبة */
  --difficulty-easy-bg:    #D1FAE5; /* أخضر باهت هادئ */
  --difficulty-easy-text:  #065F46;
  --difficulty-med-bg:     #FEF3C7; /* عنبري دافئ */
  --difficulty-med-text:   #92400E;
  --difficulty-hard-bg:    #FEE2E2; /* أحمر باهت هادئ */
  --difficulty-hard-text:  #991B1B;
  
  --bs-body-font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

}

body{
  font-family: var(--bs-body-font-family);
}


/* =========================================
   2) تخصيص بسيط لألوان Bootstrap (هوية فقط)
   ========================================= */

/* أزرار أساسية */
.btn-primary {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-base) !important;
  border-color: var(--brand-base) !important;
}

.btn-outline-secondary {
  color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--brand-dark) !important;
  color: #fff !important;
}

/* روابط وهوية نصية */
a {
  color: var(--brand-dark);
}
a:hover {
  color: var(--brand-base);
}

.text-primary {
  color: var(--brand-dark) !important;
}

/* =========================================
   3) الهيدر / التوب بار / النافبار
   ========================================= */

/* عنوان الموقع في الهيدر */
.site-title a {
  color: #ffffff;              /* اللون العادي: أبيض */
  text-decoration: none;
  transition: color 0.2s ease;
}

/* لون الهوفر لعنوان الموقع */
.site-title a:hover {
  color: var(--brand-gold);    /* اختر لون من ألوان الهوية – مثال: الذهبي */
}

.navbar,
.main-navbar {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.navbar-nav .nav-link {
  color: var(--brand-dark);
  font-weight: 500;
  padding: 0.4rem 0.75rem;
}

.navbar-nav .nav-link:hover {
  color: var(--brand-base);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
  color: #fff;
  background-color: var(--brand-base);
  border-radius: 999px;
}

/* شريط علوي مخصص (إن وجد) */
.top-bar {
  background: linear-gradient(90deg, var(--brand-dark), var(--brand-teal));
  color: #F9FAFB;
  padding: 0.75rem 0;
}

.logo-link .site-title {
  color: #ffffff;             /* يبقى أبيض في الوضع العادي */
  font-weight: 700;
  transition: color 0.2s ease;
}

/* الشعار الفرعي */
.logo-link .logo-subtitle {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

/* لون الهوفر لعنوان الموقع */
.logo-link:hover .site-title {
  color: var(--brand-gold);   /* أو أي لون من ألوان الهوية لديك */
}

/* اختياري: تغيير خفيف للشعار الفرعي عند الهوفر */
.logo-link:hover .logo-subtitle {
  color: var(--brand-gold);
}

.logo-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.logo-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
}

.logo-subtitle {
  font-size: 0.7rem;
  color: #E5E7EB;
}

.logo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.logo-main {
  font-weight: 800;
  font-size: 1.3rem;
  color: #f9fafb;
  letter-spacing: 0.04em;
}

.logo-tagline {
  font-size: 0.8rem;
  color: #9ca3af;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-user {
  color: #e5e7eb;
  font-size: 0.9rem;
}

/* تحسينات قائمة التصفح في الهيدر */
.top-bar nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-bar .main-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.top-bar .main-nav li {
  list-style: none;
}

.top-bar .main-nav .main-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: #E5E7EB;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.top-bar .main-nav .main-nav-link:hover,
.top-bar .main-nav .main-nav-link:focus {
  background-color: rgba(15, 23, 42, 0.35);
  color: #F9FAFB;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .top-bar nav {
    gap: 0.5rem;
  }
  .top-bar .main-nav {
    gap: 0.4rem;
  }
  .top-bar .main-nav .main-nav-link {
    font-size: 0.8rem;
    padding-inline: 0.6rem;
  }
}

/* ================================
   Footer - موقع منظور
   ================================ */

.site-footer {
  background: var(--brand-dark);  /* اللون الداكن الرئيسي */
  color: #f1f5f9;
  padding: 1.5rem 0;
  margin-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.site-footer p {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  opacity: 0.9;
}

.site-footer a {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer a:hover {
  opacity: 0.75;
}


/* =========================================
   4) أزرار الهوية الخاصة بمنظور
   ========================================= */

.btn-accent {
  background-color: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: #1F2933;
}
.btn-accent:hover {
  background-color: #e3a223;
  border-color: #e3a223;
  color: #111827;
}

/* override بسيط لأزرار Bootstrap الفاتحة */
.btn-outline-light {
  border-color: rgba(249, 250, 251, 0.6);
}
.btn-outline-light:hover {
  background-color: rgba(249, 250, 251, 0.1);
}

/* زر رئيسي موحّد لمنظور */
.btn-main,
.btn-main:visited {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--brand-yellow);
  color: #0b1020;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-main:hover {
  background: #e3a223;
  color: #0b1020;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.btn-main.btn-ghost {
  background: transparent;
  color: #f9fafb;
  border-color: rgba(249, 250, 251, 0.25);
}
.btn-main.btn-ghost:hover {
  background: rgba(15, 23, 42, 0.5);
  color: #f9fafb;
}

/* لا نتدخل في كل الأزرار، فقط زر الهوية:
   button العام يبقى تحت سيطرة Bootstrap إلا إذا أضفنا .btn-main */

/* =========================================
   5) أساسيات الصفحة والجسم
   ========================================= */

body.bg-body {
  background: var(--bg-body);
  color: var(--text-main);
}


/* =========================================
   6) HERO القديم / العام (grid)
   ========================================= */

/* ================================
   Page Hero (مكوّن هيرو موحّد)
   ================================ */

.page-hero {
  margin-bottom: 1.5rem;
}

.page-hero-inner {
  border-radius: 0.9rem;
  background: linear-gradient(135deg, var(--brand-bg, #f6eedc), #fff8ea);
  border: 1px solid rgba(0,0,0,0.04);
  padding: 1.5rem 1.75rem;
}

.page-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  gap: 1.5rem;
  align-items: center;
}

/* النص */
.page-hero-title-kicker {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.page-hero h1 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.page-hero-lead {
  font-size: 0.95rem;
  color: #4b5563;
  margin-bottom: 0.75rem;
}

.page-hero-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* العنصر البصري */
.page-hero-visual {
  border-radius: 0.75rem;
  background: radial-gradient(circle at 30% 20%, #ffffff, #f4e5c8);
  border: 1px solid rgba(0,0,0,0.04);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* دائرة أيقونة بسيطة يمكن إعادة استخدامها */
.page-hero-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.page-hero-visual-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.issue-hero-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.75rem;
  object-fit: cover;
}

.issue-hero-placeholder {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.5rem;
}


/* نسخة صغيرة لفهارس القوائم (Index) */
.page-hero--compact .page-hero-layout {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
}

.page-hero--compact h1 {
  font-size: 1.3rem;
}

/* نسخة التفاصيل (Detail) يمكن أن تكون أقل "زخرفة" */
.page-hero--detail .page-hero-inner {
  background: #fffdf7;
}

/* استجابة للموبايل */
@media (max-width: 768px) {
  .page-hero-inner {
    padding: 1.25rem 1rem;
  }
  .page-hero-layout {
    grid-template-columns: 1fr;
  }
  .page-hero-visual {
    order: -1;
  }
}

/* نموذج بصري بسيط لمنشور ثلاثي/رباعي الأوجه */
.hero-post-3d {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: hero-rotate 12s linear infinite;
  transform-origin: center center;
  perspective: 800px;
}

.hero-post-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1.2rem;
  background-image: url('../img/post-texture.png');
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
  opacity: 0.88;
}

/* أربع أوجه */
.hero-post-face.face1 { transform: rotateY(   0deg) translateZ(100px); }
.hero-post-face.face2 { transform: rotateY(  90deg) translateZ(100px); }
.hero-post-face.face3 { transform: rotateY( 180deg) translateZ(100px); }
.hero-post-face.face4 { transform: rotateY( -90deg) translateZ(100px); }

@keyframes hero-rotate {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

.hero-caption {
  font-size: 0.8rem;
  color: #6b7280;
  text-align: center;
  max-width: 240px;
}

.hero-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 1.5rem 0;
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: start;
  }
  .hero-visual {
    order: -1;
  }
}

/* ===== هيرو صفحة القضية issue.php ===== */

/* نجعل هيرو القضية له ارتفاع ثابت على الشاشات الكبيرة،
   مع شبكة عمودين (نص + صورة)، والنص يكون داخله سكرول */
.issue-hero .page-hero-inner {
  height: 260px;                 /* يمكنك رفعها إلى 280 لو حبيت */
  display: flex;
  padding: 1.4rem 1.6rem;
}

/* نعيد تعريف تخطيط الهيرو للقضية فقط (لا نلمس الهيرو العام) */
.issue-hero .page-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  gap: 1.4rem;
  align-items: stretch;
  width: 100%;
}

/* العمود الذي يحتوي النص + الميتا */
.issue-hero-main {
  display: flex;
  flex-direction: column;
  min-height: 0;                 /* مهم مع grid + height ثابت */
}

/* منطقة النص القابلة للسكرول */
.issue-hero-scroll {
  flex: 1 1 auto;
  min-height: 0;                 /* بدونها السكرول لا يعمل كما ينبغي */
  overflow-y: auto;
  padding-inline-end: 0.4rem;    /* مسافة بسيطة بجانب شريط السكرول */
}

/* وصف القضية */
.issue-hero-description {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.7;
}

/* الميتا: عدد الزوايا + تاريخ الإضافة */
.issue-hero-meta {
  margin-top: 0.35rem;
}

.issue-hero-meta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.issue-hero-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(26, 140, 148, 0.12); /* تمييز بلون الهوية */
  color: var(--brand-dark);
}

.issue-hero-meta-pill .meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-accent); /* نقطة صغيرة بلون ثانوي */
}

/* سطر التلميحة تحت الميتا */
.issue-hero-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* عمود الصورة – فارغ الآن لكن جاهز للاستخدام لاحقاً */
.issue-hero-visual {
  min-height: 0;                 /* مهم مع grid */
  border-radius: 0.75rem;
  background: radial-gradient(circle at 20% 20%, #ffffff, #f4e5c8);
  border: 1px dashed rgba(10, 58, 74, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* استجابة للموبايل */
@media (max-width: 768px) {
  /* على الموبايل نرجع للهيدر المتكيّف تلقائيًا */
  .issue-hero .page-hero-inner {
    height: auto;
    padding: 1.25rem 1rem;
  }

  .issue-hero .page-hero-layout {
    grid-template-columns: 1fr;
  }

  .issue-hero-visual {
    order: -1;          /* الصورة فوق النص لو حبيت */
    min-height: 160px;
    margin-top: 0.75rem;
  }

  .issue-hero-scroll {
    max-height: 220px;  /* حد أقصى مع سكرول لو النص طويل جداً */
  }
}


/* =========================================
   7) HERO الجديد للصفحة الرئيسية: عجلة منظور
   ========================================= */

.hero.hero-home {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin-top: 1.5rem;
}

.hero.hero-home .hero-text h1 {
  font-size: 1.9rem;
  margin-bottom: 0.8rem;
}

/* العجلة */
.hero.hero-home .hero-wheel {
  position: relative;
  width: 280px;
  height: 280px;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, var(--brand-teal), var(--brand-dark));
  box-shadow: 0 10px 28px rgba(11,58,75,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero.hero-home .wheel-center {
  position: absolute;
  width: 120px;
  height: 120px;
  background: var(--brand-yellow);
  color: #0b1020;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  z-index: 2;
}

.hero.hero-home .wheel-item {
  position: absolute;
  width: 90px;
  height: 90px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  color: var(--brand-dark);
  font-weight: 600;
  text-align: center;
  padding: 0.4rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  z-index: 3;
  animation: wheel-soft-glow 4s ease-in-out infinite;
}

.hero.hero-home .wheel-icon {
  font-size: 1.35rem;
  display: block;
}

.hero.hero-home .wheel-label {
  display: block;
  font-size: 0.7rem;
}

/* تموضع العقد */
.hero.hero-home .item1 {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.hero.hero-home .item2 {
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
}
.hero.hero-home .item3 {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.hero.hero-home .item4 {
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
}

@keyframes wheel-soft-glow {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  }
  50% {
    box-shadow: 0 10px 26px rgba(0,0,0,0.30);
  }
}

@media (max-width: 768px) {
  .hero.hero-home {
    grid-template-columns: 1fr;
    text-align: start;
  }
  .hero.hero-home .hero-wheel {
    margin-top: 1rem;
  }
}

/* ===== هيرو صفحة التحيّز: تخطيط عام ===== */

.bias-hero-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.bias-hero-layout-primary {
  flex: 1.4;
  min-width: 260px;
}

.bias-hero-layout-side {
  flex: 1;
  min-width: 240px;
}

/* ===== بطاقة التحيّز في صفحة bias.php (تعتمد نفس هوية بطاقات التحيّز) ===== */

.bias-detail-card {
  border-radius: 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 22px rgba(15,23,42,0.06);
}

/* إعادة استخدام الحبوبات نفسها */
.bias-detail-card .bias-header-badges {
  margin-bottom: 0.4rem;
}

.bias-detail-card .bias-header-badges .badge {
  margin-inline-end: 0.25rem;
}

/* ===== صندوق التعليمات العام (يمكن استخدامه في أي صفحة تعليمات) ===== */

.instructions-card {
  border-radius: 0.9rem;
  background: linear-gradient(
    135deg,
    rgba(246, 238, 220, 0.95),
    #ffffff
  );
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 6px 16px rgba(15,23,42,0.04);
  position: relative;
}

/* شريط ملوّن على جانب الصندوق (يتماشى مع RTL) */
.instructions-card::before {
  content: "";
  position: absolute;
  inset-block: 0.6rem;
  inset-inline-start: 0.6rem;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--brand-base),
    var(--brand-accent)
  );
}

/* محتوى التعليمات من الداخل */
.instructions-inner {
  position: relative;
  padding-inline-start: 1.25rem; /* لأن عندنا الشريط على start */
}

/* أيقونة صغيرة أعلى التعليمات */
.instructions-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10,58,74,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

/* عنوان التعليمات */
.instructions-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-dark);
  margin-bottom: 0.35rem;
}

/* وصف قصير */
.instructions-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* قائمة التعليمات */
.instructions-list {
  margin: 0;
  padding-inline-start: 1rem;
  font-size: 0.85rem;
  color: #374151;
}

.instructions-list li {
  margin-bottom: 0.25rem;
}

/* سطر صغير للوقت المقترح */
.instructions-time-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* استجابة للموبايل */
@media (max-width: 768px) {
  .bias-hero-layout {
    flex-direction: column;
  }
}

/* بطاقة إحصائيات فئة التحيزات في الهيرو */
.biases-category-stats-card {
  background: linear-gradient(
    135deg,
    rgba(255, 249, 219, 0.96),
    #ffffff
  );
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-top: 3px solid var(--brand-accent);
  border-radius: 0.75rem;
}

.biases-category-stats-card .card-body {
  padding: 0.9rem 1rem 1rem;
}

.biases-category-stats-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background-color: rgba(0, 0, 0, 0.04);
}

.biases-category-stats dt {
  font-size: 0.8rem;
}

.biases-category-stats dd {
  font-size: 0.9rem;
}

.extra-small {
  font-size: 0.72rem;
}

.category-hero-tip {
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-right: 3px solid var(--brand-accent); /* يبرزها في واجهة عربية */
}

.category-hero-tip-icon {
  font-size: 1rem;
  line-height: 1;
  margin-top: 2px;
}

/* ===== رحلة تعلم التحيّز (داخل bias.php) ===== */

.bias-steps-wrapper {
  border-radius: 0.9rem;
  background: linear-gradient(
    135deg,
    rgba(10, 58, 74, 0.03),
    rgba(233, 182, 34, 0.04)
  );
  border: 1px solid rgba(10, 58, 74, 0.1);
}

/* عنوان الرحلة والوقت التقريبي */
.bias-steps-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.bias-steps-header-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-dark);
}

.bias-steps-header-title .subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bias-steps-header-meta {
  text-align: left; /* مع الاتجاه RTL سيظهر يميناً */
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bias-steps-header-meta .time-value {
  font-weight: 600;
  color: var(--brand-dark);
}

/* شريط التقدم الأفقي */
.bias-progress-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.bias-progress-fill {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 0%; /* تُحدَّث بالـ JS */
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-base), var(--brand-accent));
  transition: width 0.25s ease-out;
}

/* شريط النقاط (1–5) أفقي */
.bias-steps-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.bias-step-indicator {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
}

/* جسم رحلة التعلّم: منطقة المحتوى القابل للتمرير */
.bias-steps-body {
  margin-top: 0.75rem;
}

/* على الشاشات المتوسطة والكبيرة: ارتفاع ثابت + تمرير عمودي */
@media (min-width: 768px) {
  .bias-steps-body {
    max-height: 55vh;           /* يمكنك تعديلها إلى 50–60vh حسب إحساسك */
    overflow-y: auto;
    padding-inline-end: 0.25rem; /* مساحة صغيرة لمكان شريط التمرير */
  }
}

/* على الشاشات الصغيرة نترك الارتفاع طبيعي لتفادي ازدواجية التمرير */
@media (max-width: 767.98px) {
  .bias-steps-body {
    max-height: none;
    overflow-y: visible;
  }
}


/* إن كان عندك تعريف سابق لـ .bias-step-indicator .step-dot،
   أبقه كما هو أو عدّل القيم قليلاً */
.bias-step-indicator .step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--brand-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--brand-base);
  background: #fff;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bias-step-indicator .step-dot.active {
  background: var(--brand-base);
  color: #fff;
  transform: translateY(-1px);
}

.bias-step-indicator .step-dot.done {
  background: var(--brand-dark);
  color: #fff;
}

/* نص نسبة التقدم */
.bias-progress-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}


/* صندوق لماذا هذا الموقع + البوستر الدوّار القديم */
.home-hero-inner {
  border-radius: 0.9rem;
  background: var(--brand-bg, #f6eedc);
  border: 1px solid rgba(0,0,0,0.04);
}

.home-rotating-poster {
  height: 180px;
  border-radius: 1rem;
  background: radial-gradient(circle at 30% 20%, #ffffff, #f4e5c8);
  border: 1px solid rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}

.poster-core {
  position: relative;
}

.poster-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid var(--brand-base);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: poster-rotate 12s linear infinite;
  background: #fff;
}

.poster-title {
  font-weight: 700;
  color: var(--brand-dark);
}

.poster-subtitle {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--brand-dark);
}

@keyframes poster-rotate {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

.home-why-box {
  border-radius: 0.75rem;
  background-color: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
}

/* =========================================
   8) بطاقات القضايا والزوايا / الفورمات
   ========================================= */

.issue-card,
.perspective-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 10px 25px rgba(15,23,42,0.08);
  border: 1px solid #e5e7eb;
}

.issue-card:hover,
.perspective-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
}

.issue-card h2 a {
  text-decoration: none;
  color: var(--brand-dark);
}

.issue-card h2 a:hover {
  text-decoration: underline;
}

.main-question {
  color: var(--brand-teal);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.issue-meta,
.perspective-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* فورمات عامة */
.form-group {
  margin-bottom: 0.75rem;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid #D1D5DB;
}
.form-group label {
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
  display: inline-block;
}

.error {
  color: #B91C1C;
  background: #FEE2E2;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}

/* زر عام لأدوات الذكاء الاصطناعي – يعتمد على ستايل أزرارك الحالية */
.ai-tools-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.ai-tools-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.btn-ai {
  font-size: 0.85rem;
  padding-inline: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.btn-ai.is-loading {
  opacity: 0.7;
  cursor: default;
}

/* =========================================
   9) تخطيط عام للصفحات الرئيسية والقضايا
   ========================================= */

.home-page,
.issues-index-page {
  max-width: 1100px;
  margin: 0 auto;
}

/* كروت عامة */
.home-section-card {
  border-radius: 0.7rem;
  background: #ffffff;
  border: 1px solid #e4e7eb;
}

/* تأثير hover إضافي على الكروت */
.issue-card:hover,
.bias-card:hover {
  border-color: var(--brand-base, #1A8C94);
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

/* نماذج الفلترة للقضايا */
.issues-filter-form {
  border-radius: 0.7rem;
  background: #ffffff;
  border: 1px solid #e4e7eb;
}

@media (max-width: 768px) {
  .home-hero-inner {
    padding: 1.25rem;
  }
}


/* وعاء الزاوية النشطة (قائمة البطاقات) مع سكرول وارتفاع ثابت */
.perspective-list-scroll {
  max-height: 360px;           /* عدّل الرقم حسب ما يناسب ارتفاع العمود */
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* في الشاشات الصغيرة نقلل الارتفاع قليلاً */
@media (max-width: 768px) {
  .perspective-list-scroll {
    max-height: 260px;
  }
}

/* زر إظهار نموذج إضافة زاوية */
.btn-toggle-add-perspective {
  width: 100%;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.9rem;
}

/* حركة فتح/إغلاق الفورم */
.add-perspective {
  overflow: hidden;
  max-height: 1000px; /* قيمة كبيرة مبدئيًا، ستتضبط بالـ JS */
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.add-perspective.is-collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* تنسيق بسيط للتحقق البشري */
.human-check-group {
  margin-top: 0.75rem;
}

.human-check-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.human-check-question {
  font-size: 0.85rem;
}

.human-check-input {
  max-width: 80px;
}

.field-error {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #d9534f; /* أحمر هادئ */
}

/* ============================
   بطاقة الفئة – تصميم مميز
   ============================ */

.bias-category-card {
  background: linear-gradient(
    135deg,
    var(--brand-bg) 0%,
    #ffffff 100%
  );
  border: 1px solid rgba(26, 140, 148, 0.20); /* يميل للـ brand-base */
  border-radius: 0.8rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.bias-category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: var(--brand-base);
}

/* أيقونة الفئة */
.bias-category-card::before {
  content: "📂";
  display: inline-block;
  font-size: 1.2rem;
  margin-left: 0.4rem;
  opacity: 0.85;
}

/* تمييز Badge عدد التحيزات */
.bias-category-card .category-count-badge {
  background-color: var(--brand-base);
  color: #fff;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  box-shadow: 0 2px 6px rgba(26,140,148,0.28);
}

/* ==========================================
   بطاقة التحيّز – الهوية الموحدة الجديدة
   ========================================== */

.bias-card {
  background: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 4px 10px rgba(0,0,0,0.035);
  padding: 1rem 1.2rem;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.22s ease, border 0.22s ease;
}

/* حدّ علوي ملوّن */
.bias-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--brand-base);  
  border-radius: 0.75rem 0.75rem 0 0;
}

/* أيقونة صغيرة في الزاوية */
.bias-card .bias-icon {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.2rem;
  opacity: 0.85;
  color: var(--brand-dark);
}

/* النص */
.bias-card h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--brand-dark);
}

.bias-card p {
  font-size: 0.85rem;
  color: #4b5563;
}

/* تأثير hover */
.bias-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-base);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* مستوى الصعوبة */
.bias-difficulty-pill {
  background-color: var(--brand-accent) !important;
  color: #4a3b14 !important;
}

/* تلوين مستويات الصعوبة */
.badge.bias-difficulty-pill.difficulty-easy {
  background-color: var(--difficulty-easy-bg) !important;
  color: var(--difficulty-easy-text) !important;
}

.badge.bias-difficulty-pill.difficulty-medium {
  background-color: var(--difficulty-med-bg) !important;
  color: var(--difficulty-med-text) !important;
}

.badge.bias-difficulty-pill.difficulty-hard {
  background-color: var(--difficulty-hard-bg) !important;
  color: var(--difficulty-hard-text) !important;
}

/* ===================================================
   هوية مربّع البحث – Search Box Identity (Site-wide)
   =================================================== */

.search-box {
  background: var(--brand-bg);
  border: 1px solid rgba(26, 140, 148, 0.25); /* brand-base */
  border-radius: 0.85rem;
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  position: relative;
}

/* أيقونة البحث داخل المربع */
.search-box .search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.25rem;
  font-size: 1.15rem;
  color: var(--brand-dark);
  opacity: 0.75;
  pointer-events: none;
}

/* حقل البحث */
.search-box input[type="text"],
.search-box input[type="search"] {
  width: 100%;
  padding: 0.55rem 1rem;
  padding-right: 2.7rem; /* مساحة للأيقونة */
  border-radius: 0.65rem;
  border: 1px solid rgba(26, 140, 148, 0.35);
  background: #fff;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* التركيز */
.search-box input[type="text"]:focus,
.search-box input[type="search"]:focus {
  border-color: var(--brand-dark);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 140, 148, 0.18);
  outline: none;
}

/* زر البحث */
.search-box .btn-search {
  background: var(--brand-dark);
  color: #fff;
  font-weight: 600;
  border-radius: 0.65rem;
  padding: 0.55rem 1.2rem;
  border: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.search-box .btn-search:hover {
  background: var(--brand-base);
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}



/* =========================================
   10) المنشور ثلاثي الأبعاد (Prism)
   ========================================= */

/* Layout v2: 60% main (يمين) + 40% sidebar (يسار) */
.issue-layout-v2{
  display: grid;

  /* نُثبت الأعمدة: يسار (sidebar) 40%، يمين (main) 60% */
  grid-template-columns: 40% 60%;

  /* نستخدم areas حتى لا تلعب RTL دورًا في الترتيب */
  grid-template-areas: "sidebar main";

  gap: 2rem;
  align-items: start;
  padding: 2rem;

  /* نجعل ترتيب الشبكة ثابتًا */
  direction: ltr;
}

/* نعيد اتجاه المحتوى للعربية داخل كل عمود */
.issue-sidebar,
.issue-main{
  direction: rtl;
}

.issue-sidebar .btn-toggle-add-perspective{
  width: 100%;
}

/* ربط العناصر بالمناطق */
.issue-sidebar{ grid-area: sidebar; }
.issue-main{ grid-area: main; min-width: 0; }

/* على الشاشات الصغيرة: عمود واحد */
@media (max-width: 992px){
  .issue-layout-v2{
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar";
  }
}


.issue-main-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.post3d-controls-under{
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 1rem;
}

/* الشريط العلوي فوق المنشور */
.issue-layout-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.issue-layout-title {
  flex: 1;
  min-width: 260px;
}

.issue-layout-actions {
  min-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
/* =========================================================
   Post3D (Stable-in-place rotation)
   الهدف: منع الإحساس بأنه يدور حول محور بعيد
   عبر: جعل أبعاد المكعب = أبعاد الوجه + تمركزه
   ========================================================= */

/* wrapper */
.post3d-wrapper-wide{
  width: 100%;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  margin-bottom: 0.75rem;
  position: relative;
  overflow: visible;
}

/* cube: يجب أن يطابق أبعاد الوجه (تأتي من CSS vars) */
.post3d-cube{
  --post3d-w: var(--post3d-face-w, 420px);
  --post3d-h: var(--post3d-face-h, 420px);

  position: relative;
  width: var(--post3d-w);
  height: var(--post3d-h);

  margin: 0 auto;                 /* تمركز المكعب داخل العمود */
  transform-style: preserve-3d;
  transition: transform .55s ease;
  will-change: transform;
}

/* face */
.post3d-face{
  position: absolute;
  left: 0;
  top: 0;

  width: var(--post3d-w);
  height: var(--post3d-h);

  border-radius: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.20);
  overflow: hidden;

  background-image: var(--post3d-bg, linear-gradient(135deg, rgba(10,58,74,.35), rgba(233,182,34,.18)));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

/* overlay */
.post3d-face::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(11, 58, 75, 0.62),
    rgba(11, 58, 75, 0.92)
  );
  z-index:0;
}

/* content */
.post3d-content{
  position: relative;
  z-index: 1;
  padding: 1rem 1.1rem;     /* مساحة تنفّس تمنع قصّ الأعلى/الأسفل */
  color: #fff;

  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: right;

  overflow: hidden;
}

/* عنوان + نص */
.post3d-content h3,
.post3d-title{
  margin: 0 0 .5rem 0;
  font-size: 1.05rem;
  color: #F4B534;
}

.post3d-content p{
  font-size: .9rem;
  line-height: 1.6;
  opacity: .92;
}

/* meta pills */
.post3d-face-meta-top{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-bottom:.4rem;
}

.post3d-meta-pill{
  font-size:.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color:#fff;
  line-height: 1.2;
}

/* excerpt */
.post3d-excerpt,
.post3d-excerpt-empty{
  display:block !important;
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
  max-height:none !important;
  overflow:visible !important;
  margin: 0 0 .45rem 0;
  font-size: .82rem;
  line-height: 1.55;
}

/* meta bottom */
.post3d-face-meta-bottom{
  margin-top: auto;
  font-size: .72rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.post3d-meta-item{
  opacity:.9;
  background: rgba(0,0,0,.35);
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

/* active highlight */
.post3d-face.is-active{
  border: 2px solid #F4B534;
  box-shadow: 0 0 14px rgba(244,181,52,.35);
}

/* controls */
.post3d-controls{
  margin-top: 1.6rem;
  display:flex;
  gap: .8rem;
  z-index: 10;
}

.post3d-controls button{
  padding: .55rem 1rem;
  cursor:pointer;
  background: var(--brand-dark);
  color:#fff;
  border:none;
  border-radius: .6rem;
}

.post3d-controls button:hover{
  background: var(--brand-teal);
}

/* تحسين استجابة دون تغيير السلوك:
   فقط تصغير أبعاد الوجه/المكعب عبر vars إذا كانت متاحة */
@media (max-width: 768px){
  .post3d-wrapper-wide{
    perspective: 1000px;
  }

  /* لو PHP لم يزوّد المتغيرات، نحافظ على حجم منطقي */
  .post3d-cube{
    --post3d-w: var(--post3d-face-w, min(92vw, 420px));
    --post3d-h: var(--post3d-face-h, 380px);
  }

  .post3d-content{
    padding: .95rem 1rem;
  }
}

/* البطاقات الجانبية للزوايا */
.perspective-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.perspective-card.is-active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

.perspective-meta {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.add-perspective {
  margin-top: 1.5rem;
}

.section-title {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: #111827;
}

.perspective-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.perspective-votes {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.persp-vote-form {
  margin: 0;
}

.btn-vote {
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 0.6rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-vote:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.vote-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.perspective-head{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 1rem;
  margin-bottom: .75rem;
}

.perspective-votes{
  display:flex;
  gap: .4rem;
  align-items:center;
}

.persp-vote-form{ margin:0; }

.btn-vote{
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  border-radius: .65rem;
  padding: .25rem .55rem;
  font-size: .9rem;
  display:inline-flex;
  align-items:center;
  gap: .35rem;
  cursor:pointer;
}

.vote-count{
  font-size:.85rem;
  opacity:.8;
}


/* =====================================
   Mobile Navigation - قائمة الموبايل
   ===================================== */

/* زر الهامبرغر */
.top-bar .mobile-nav-toggle {
  display: none; /* افتراضياً مخفي، يظهر فقط في الشاشات الصغيرة */
  cursor: pointer;
  font-size: 1.7rem;
  background: none;
  border: none;
  color: #F9FAFB; /* نفس لون نص الهيدر */
  padding: 0.1rem 0.4rem;
  line-height: 1;
}

/* حاوية القائمة في الموبايل كـ DROPDOWN عائم */
.top-bar .mobile-nav {
  position: absolute;
  top: 100%;              /* أسفل الهيدر مباشرة */
  inset-inline-end: 0;    /* يمين في RTL */
  width: 230px;           /* عرض مناسب */
  max-width: calc(100vw - 1.5rem);
  display: none;          /* مخفية افتراضياً */
  flex-direction: column;
  gap: 0.25rem;
  background-color: #0b2530;
  border-radius: 0.6rem;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  z-index: 999;           /* فوق المحتوى */
}

/* الروابط داخل قائمة الموبايل */
.top-bar .mobile-nav a {
  display: block;
  padding: 0.4rem 0.1rem;
  text-decoration: none;
  color: #E5E7EB;
  font-size: 0.9rem;
  font-weight: 500;
}

.top-bar .mobile-nav a:hover {
  color: #ffffff;
}

/* عندما تكون القائمة مفتوحة عبر JS */
.top-bar .mobile-nav.open {
  display: flex;
}

/* إعدادات خاصة للشاشات الصغيرة */
@media (max-width: 768px) {
  /* نسمح للكونتينر أن يكون مرجع تموضع للدروب داون */
  .top-bar .container {
    position: relative;
    /* نبقيه في صف واحد: الشعار + زر المنيو + أزرار المستخدم */
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  /* إخفاء القائمة الأفقية في الموبايل */
  .top-bar .main-nav {
    display: none !important;
  }

  /* إظهار زر الهامبرغر */
  .top-bar .mobile-nav-toggle {
    display: block;
  }

  /* تصغير حجم منطقة المستخدم قليلاً */
  .top-bar nav {
    font-size: 0.85rem;
  }
}

/* ===============================
   اختبارات التحيّزات - فهرس واختبار
   =============================== */

/* بطاقة الهيرو الخاصة بفهرس الاختبارات */
.bias-test-hero-card {
  background: linear-gradient(135deg, #0f172a, #1f2937);
  color: #f9fafb;
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.45);
}

/* تحسين تباين النص داخل Hero Card الداكنة (يؤثر على كل الصفحات التي تستخدم bias-test-hero-card) */
.bias-test-hero-card .text-muted{
  color: rgba(249, 250, 251, 0.82) !important; /* أو 0.85 حسب الذوق */
}

.bias-test-hero-card .small.text-muted{
  color: rgba(249, 250, 251, 0.78) !important;
}

/* (اختياري) تحسين الروابط داخل البطاقة */
.bias-test-hero-card a{
  color: rgba(249, 250, 251, 0.92);
  text-decoration: underline;
}
.bias-test-hero-card a:hover{
  color: #ffffff;
}


.bias-test-hero-icon {
  font-size: 2.6rem;
}

/* شريط بسيط داخل الهيرو */
.bias-overview-bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.4);
  overflow: hidden;
}

.bias-overview-bar-fill {
  position: absolute;
  inset: 0;
  width: 55%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #eab308, #ef4444);
}

/* بطاقات الاختبارات في الفهرس */
.test-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.test-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.18);
}

.test-card-title {
  transition: color 0.15s ease;
}

.test-card:hover .test-card-title {
  color: var(--brand-base);
}

/* ميتاداتا الاختبارات (المدة، عدد الأسئلة، المستوى) في البطاقات والهيرو */
.test-card {
  display: flex;
  flex-direction: column;
}

.test-card-meta {
  margin-top: auto;
}

.test-meta-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  background: var(--brand-yellow); /* #E9B622 من ثيمة مدائن */
  color: var(--brand-dark);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.test-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ميتاداتا الهيرو */
.test-hero-meta {
  margin-top: 1.25rem;
}

.test-hero-meta .test-meta-pill {
  width: 100%;
  justify-content: space-between;
}

@media (max-width: 576px) {
  .test-hero-meta .test-meta-pill {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* الهيرو في صفحة الاختبار: حاوية الوصف */
.test-desc-scroll {
  max-height: 220px;
  overflow-y: auto;
  padding-inline-end: 0.25rem;
}

/* شريط التقدّم في صفحة الاختبار (أقل ارتفاعًا) */
.bias-test-progress .bias-progress-track {
  height: 4px;
}

/* بطاقات نتيجة الاختبار */
.test-result-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.test-result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
}

/* ألوان مستويات التحيّز */
.test-level-pill.level-low {
  background-color: #dcfce7;
  color: #166534;
}

.test-level-pill.level-medium {
  background-color: #fef9c3;
  color: #854d0e;
}

.test-level-pill.level-high {
  background-color: #fee2e2;
  color: #991b1b;
}

/* المؤشر الشمولي في الملخّص التنفيذي */
.bias-overview-visual .bias-overview-bar {
  height: 8px;
  background: #e5e7eb;
}

.bias-overview-visual .bias-overview-bar-fill {
  background: linear-gradient(90deg, #22c55e, #eab308, #ef4444);
}

.bias-overview-bar-fill.level-low {
  background: #22c55e;
}

.bias-overview-bar-fill.level-medium {
  background: linear-gradient(90deg, #22c55e, #eab308);
}

.bias-overview-bar-fill.level-high {
  background: linear-gradient(90deg, #eab308, #ef4444);
}

/* ===============================
   سلايدر تلميحات اختبارات التحيّز
   =============================== */

.bias-test-tips {
  margin-top: 1.5rem;
}

.tips-carousel-wrapper {
  border-radius: 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
  padding: 1.25rem 1.4rem;
}

/* شريط التقدّم العلوي */
.tips-carousel-top {
  gap: 0.75rem;
}

.tips-progress-track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.tips-progress-fill {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-base), var(--brand-accent));
  transition: width 0.25s ease-out;
}

/* حاوية الشرائح */
.tips-carousel-inner {
  position: relative;
  min-height: 180px;
  margin-top: 0.75rem;
}

/* بطاقة الشريحة – تستفيد من test-card */
.tip-slide {
  display: none;
  border-radius: 0.75rem;
  background: var(--card-bg);
  box-shadow: 0 6px 16px rgba(15,23,42,0.10);
  padding: 1rem 1.1rem;
  animation: tipsFadeIn 0.25s ease;
}

.tip-slide.is-active {
  display: block;
}

.tips-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* الميتاداتا العلوية على شكل حبوبات */
.tips-meta-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tips-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(15,23,42,0.06);
  color: var(--brand-dark);
  font-size: 0.78rem;
}

.tips-meta-sub {
  opacity: 0.8;
  font-size: 0.75rem;
}

/* مستويات التحيز بألوان قريبة من نتائج الاختبار */
.tips-level-pill.level-low,
.tips-level-low {
  background-color: #dcfce7;
  color: #166534;
}

.tips-level-pill.level-medium,
.tips-level-medium {
  background-color: #fef9c3;
  color: #854d0e;
}

.tips-level-pill.level-high,
.tips-level-high {
  background-color: #fee2e2;
  color: #991b1b;
}

.tips-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-dark);
}

.tips-body {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.7;
}

/* الميتاداتا السفلية – نستخدم test-meta-pill */
.tips-meta-bottom .test-meta-pill {
  width: 100%;
  justify-content: flex-start;
}

/* أزرار التنقل */
.tips-carousel-controls .btn {
  min-width: 110px;
}

/* حركة صغيرة عند الانتقال */
@keyframes tipsFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 576px) {
  .tips-carousel-wrapper {
    padding: 1rem 0.9rem;
  }
}

/* ضمان سلوك سلايدر التلميحات */
.tip-slide {
  display: none !important;
}

.tip-slide.is-active {
  display: block !important;
}

/* =========================================================
   REPORT UI (Bias + Insights + Tips) — FINAL (no duplicates)
   ========================================================= */

/* Wrapper عام لقسم التحيّزات */
.bias-carousel-wrapper{
  border-radius: 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
  padding: 1.1rem 1.2rem;
}

/* الكاروسيل نفسه */
.bias-carousel-wrapper .bias-carousel{
  position: relative;
}

/* الشريحة: لا نثبت ارتفاع “قاسٍ” على الشريحة كاملة حتى لا نقتل التفاعل داخل الأكورديون
   لكن نمنع القفز عبر min-height منطقي */
.bias-carousel-wrapper .bias-slide{
  min-height: 520px;
  overflow: hidden;
}

/* بطاقة التحيّز */
.bias-meta-card{
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,0.05);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
  padding: 1rem 1.1rem;
}

/* صندوق “شرح موسّع” */
.bias-longdesc-box{
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  background: rgba(233, 182, 34, 0.14);
  border: 1px solid rgba(233, 182, 34, 0.25);
  color: var(--brand-dark);
}

/* قسم الرؤى */
.insights-section{
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  background: rgba(15, 58, 74, 0.06);
  border: 1px solid rgba(15, 58, 74, 0.12);
}

/* نعطي سكرول داخل الرؤى فقط */
.insights-accordion-wrap{
  max-height: 220px;
  overflow-y: auto;
  padding-inline-end: 0.35rem;
}

/* شكل الأكورديون داخل الرؤى */
.insights-section .accordion-item{
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
  margin-bottom: 0.6rem;
}

.insights-section .accordion-button{
  font-weight: 700;
  color: var(--brand-dark);
  background: #fff;
}

.insights-section .accordion-button:not(.collapsed){
  background: rgba(233, 182, 34, 0.12);
  box-shadow: none;
}

.insight-meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.insight-meta-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(15,23,42,0.06);
  color: var(--brand-dark);
}

/* أزرار سابق/تالي + زر الثانوية */
.bias-nav-row{
  display:flex;
  gap: 0.5rem;
  align-items:center;
  margin-top: 0.75rem;
}

.bias-nav-row .btn{
  min-width: 92px;
}

/* ===============================
   TIPS — Synced Panels (حسب التحيّز)
   =============================== */

.bias-test-tips{
  margin-top: 1.5rem;
}

.bias-test-tips .tips-carousel-wrapper.tips-synced{
  border-radius: 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
  padding: 1.15rem 1.25rem;
}

/* الهيدر */
.tips-synced-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.tips-synced-biaslabel{
  font-size: 0.85rem;
  color: #475569;
  background: rgba(15, 58, 74, 0.06);
  border: 1px solid rgba(15, 58, 74, 0.12);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* تثبيت مساحة العرض لتفادي القفز */
.tips-synced .tips-panels-viewport{
  min-height: 360px;
  max-height: 360px;
  overflow: hidden;
}

.tips-bias-panel{
  display: none;
  height: 360px;
}

.tips-bias-panel.is-active{
  display: block;
}

.tips-bias-panel .tips-panel-scroll{
  height: 360px;
  overflow-y: auto;
  padding-inline-end: 0.35rem;
  padding-top: 0.25rem;
}

/* عنصر التلميح */
.tip-item{
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 0.9rem;
  background: var(--card-bg);
  box-shadow: 0 6px 16px rgba(15,23,42,0.08);
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.75rem;
}

/* نص التلميح */
.tip-item .tips-body{
  font-size: 0.9rem;
  line-height: 1.6;
  color: #4b5563;
}

/* =========================
   Tip Pills (موحّدة)
   ========================= */
.tip-pill{
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
  background: #F8F5E6;
  color: #7A5D00;
  border: 1px solid rgba(122, 93, 0, 0.25);
}

.pill-type{
  background: #EFEAFE;
  color: #5A3FA0;
  border-color: rgba(90, 63, 160, 0.25);
}

.pill-stage{
  background: #F4FCE3;
  color: #3F6212;
  border-color: rgba(63, 98, 18, 0.25);
}

.pill-time{
  background: #FFF8E1;
  color: #7A5D00;
  border-color: rgba(122, 93, 0, 0.25);
}

.pill-effort{
  background: #EAEAFF;
  color: #3030A0;
  border-color: rgba(48, 48, 160, 0.25);
}

/* مستوى التلميح: يطابق class الذي عندك (pill-level-low/medium/high) */
.pill-level-low{
  background: #E9F7F0;
  color: #1B7A45;
  border-color: rgba(27, 122, 69, 0.25);
}

.pill-level-medium{
  background: #FFF4D7;
  color: #8A6A0A;
  border-color: rgba(138, 106, 10, 0.25);
}

.pill-level-high{
  background: #FFE8E8;
  color: #A11A1A;
  border-color: rgba(161, 26, 26, 0.25);
}

/* إخفاء أي Controls قديمة لو بقيت من السلايدر السابق */
.tips-carousel-controls{
  display: none !important;
}

/* ============================
   كبسولات المعرفة - بطاقات
   ============================ */

/* الخلفية العامة للصفحة (اختياري) */
.knowledge-capsules-page {
  background-color: var(--bg-body);
}

/* بطاقة الكبسولة */
.knowledge-capsule-card {
  position: relative; /* مهم لـ stretched-link */
  background-color: var(--card-bg);
  border-radius: 18px;
  border: 1px solid rgba(10, 58, 74, 0.14);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}

.knowledge-capsule-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  border-color: rgba(26, 140, 148, 0.5); /* brand-base خفيف */
  cursor: pointer;
}

/* صورة مصغّرة في فهرس الكبسولات (بدل السلايدر الكامل) */
.knowledge-capsule-thumb {
  height: 120px;
  overflow: hidden;
  background-color: #000;
}
@media (min-width: 992px) {
  .knowledge-capsule-thumb {
    height: 150px;
  }
}
.knowledge-capsule-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* مقتطف مختصر للنص في الفهرس */
.knowledge-capsule-excerpt {
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}


/* شريط علوي بلون الهوية */
.knowledge-capsule-card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-base));
}

/* ضبط حشوة الجسم */
.knowledge-capsule-card .card-body {
  padding: 1rem 1.25rem 0.75rem;
}

/* العنوان */
.knowledge-capsule-card .card-title {
  color: var(--brand-dark);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* الميتا داتا */
.capsule-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* منطقة النص بسكرول داخلي لتقليل ارتفاع البطاقة */
.capsule-content-scroll {
  max-height: 230px;  /* قلّلنا الارتفاع هنا */
  overflow-y: auto;
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
  padding-right: 0.15rem;
}

/* في صفحة الكبسولة المفردة – نص كامل بدون سكرول */
.capsule-content-full {
  max-height: none !important;
  overflow-y: visible !important;
}

/* شكل السكروول للنص */
.capsule-content-scroll::-webkit-scrollbar {
  width: 5px;
}
.capsule-content-scroll::-webkit-scrollbar-track {
  background: rgba(246, 238, 220, 0.7);
}
.capsule-content-scroll::-webkit-scrollbar-thumb {
  background: var(--brand-base);
  border-radius: 4px;
}

/* ============================
   السلايدر - تثبيت ارتفاع الصور
   ============================ */

.knowledge-capsule-carousel {
  position: relative;
  background-color: #000;
}

/* بانر كبسولات المعرفة فقط */
.knowledge-capsule-carousel .carousel-item {
  height: 170px; /* أقرب لشكل بانر معتدل */
}
@media (min-width: 992px) {
  .knowledge-capsule-carousel .carousel-item {
    height: 210px;
  }
}

/* اجعل الصورة تملأ البانر بدون تمدد */
.knowledge-capsule-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* جعل الميديا تملأ نفس الارتفاع دائماً */
.knowledge-capsule-carousel img,
.knowledge-capsule-carousel video,
.knowledge-capsule-carousel iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* تثبيت أزرار التالي/السابق في منتصف الارتفاع */
.knowledge-capsule-carousel .carousel-control-prev,
.knowledge-capsule-carousel .carousel-control-next {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* تصغير الأيقونات */
.knowledge-capsule-carousel .carousel-control-prev-icon,
.knowledge-capsule-carousel .carousel-control-next-icon {
  width: 24px;
  height: 24px;
}

/* في صفحة التفاصيل: نلغي حد ارتفاع النص لتظهر الكبسولة كاملة */
.knowledge-capsule-card--full .capsule-content-scroll {
  max-height: none;
  overflow-y: visible;
}


/* ============================
   تنسيق وسوم كبسولات المعرفة
   ============================ */
/* تنسيق وسوم كبسولات المعرفة */

.capsule-tags-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem; /* مسافة بين التاغز */
  padding: 0.25rem 0;
  background-color: transparent;
  border: none;
}

.capsule-tags-strip-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

.capsule-tag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--brand-base);
  background-color: #FFFFFF !important;  /* خلفية واضحة */
  color: var(--brand-dark) !important;   /* نص داكن ظاهر */
  font-size: 0.78rem;
  text-decoration: none !important;
  white-space: nowrap;
}


/* ============================
   شريط المشاركة وأيقوناته
   ============================ */

.capsule-share {
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  font-size: 0.75rem;
}

.capsule-share-label {
  color: var(--text-muted);
}

.capsule-share-icons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.capsule-share-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

/* جعل الروابط بلا إطار أزرق مزعج حول الأيقونة */
.capsule-share-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   About Page Patch — توحيد البطاقات مع ثيم الموقع
   ضع هذا في نهاية style.css
   ========================================= */

.about-page .about-section-hint{
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.65);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}

.about-page .about-chips{
  display:flex;
  flex-wrap:wrap;
  gap: .4rem .45rem;
}

.about-page .about-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  border: 1px solid rgba(26,140,148,0.20); /* brand-base */
  background: rgba(26,140,148,0.08);
  color: var(--brand-dark);
}

.about-page .about-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(233,182,34,0.14); /* brand-accent */
  border: 1px solid rgba(233,182,34,0.26);
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}

/* بطاقة feature: نضيف شريط هوية جانبي بسيط + hover خفيف (يتسق مع هوية الكروت) */
.about-page .about-feature-card{
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.about-page .about-feature-card::before{
  content:"";
  position:absolute;
  inset-block: 0.9rem;
  inset-inline-start: 0.85rem;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-base), var(--brand-accent));
  opacity: .9;
}

.about-page .about-feature-card{
  padding-inline-start: 1.35rem; /* مساحة للشريط */
}

.about-page .about-feature-card:hover{
  border-color: var(--brand-base, #1A8C94);
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  transform: translateY(-2px);
}

/* رأس البطاقة (أيقونة + عنوان) */
.about-page .about-feature-head{
  display:flex;
  align-items:center;
  gap: .6rem;
}

/* بطاقات الطبقات الأربع */
.about-page .about-step-card{
  position: relative;
  overflow: hidden;
}

.about-page .about-step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .5rem;
}

.about-page .about-step-n{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: rgba(26,140,148,0.12);
  border: 1px solid rgba(26,140,148,0.18);
  color: var(--brand-dark);
  font-weight: 700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* صندوق "ما لا نفعله" */
.about-page .about-contrast{
  background: linear-gradient(135deg, rgba(15,58,74,0.06), rgba(15,58,74,0.02));
  border: 1px solid rgba(15,58,74,0.12);
}

.about-page .about-list{
  padding-inline-start: 1.15rem;
}

.about-page .about-list li::marker{
  color: var(--brand-accent);
}

.about-page .about-quote{
  padding: .75rem .9rem;
  border-radius: .85rem;
  background: rgba(233,182,34,0.14);
  border: 1px solid rgba(233,182,34,0.25);
  color: var(--brand-dark);
}

/* قائمة الأهداف */
.about-page .about-ol{
  padding-inline-start: 1.2rem;
}

@media (max-width: 768px){
  .about-page .about-section-hint{display:none;}
}

/* =========================================
   About Page — Big Section Icons (Left) + Gradient Pills
   ضع هذا في نهاية style.css
   ========================================= */

/* Chips */
.about-page .about-chips{
  display:flex;
  flex-wrap:wrap;
  gap: .4rem .45rem;
}
.about-page .about-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  border: 1px solid rgba(26,140,148,0.20);
  background: rgba(26,140,148,0.08);
  color: var(--brand-dark);
}

/* Section head with BIG icon on the LEFT (visual) */
.about-page .about-section-head{
  display:flex;
  align-items:center;
  gap: .9rem;
  /* في RTL: لجعل الأيقونة تظهر يسار النص بصريًا نستخدم row-reverse */
  flex-direction: row-reverse;
}

.about-page .about-section-ic{
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(26,140,148,0.18), rgba(233,182,34,0.16));
  border: 1px solid rgba(10,58,74,0.14);
  box-shadow: 0 10px 26px rgba(15,23,42,0.08);
  flex: 0 0 auto;
}

.about-page .about-section-ic i{
  font-size: 26px;
  color: var(--brand-dark);
}

/* Gradient pill (the “بلز” أعلى يسار كل جزء) */
.about-page .about-grad-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1px;
  color: rgba(10,58,74,0.92);
  background: linear-gradient(135deg, rgba(26,140,148,0.20), rgba(233,182,34,0.22));
  border: 1px solid rgba(10,58,74,0.14);
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  white-space: nowrap;
}

/* Cards: keep your theme, just a clean hover */
.about-page .about-feature-card,
.about-page .about-step-card{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.about-page .about-feature-card:hover,
.about-page .about-step-card:hover{
  border-color: rgba(26,140,148,0.28);
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  transform: translateY(-2px);
}

/* Method step number */
.about-page .about-step-n{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: rgba(26,140,148,0.12);
  border: 1px solid rgba(26,140,148,0.18);
  color: var(--brand-dark);
  font-weight: 700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* No-claims box */
.about-page .about-contrast{
  background: linear-gradient(135deg, rgba(15,58,74,0.06), rgba(15,58,74,0.02));
  border: 1px solid rgba(15,58,74,0.12);
}

.about-page .about-list{
  padding-inline-start: 1.15rem;
}
.about-page .about-list li::marker{
  color: var(--brand-accent);
}

.about-page .about-quote{
  padding: .75rem .9rem;
  border-radius: .85rem;
  background: rgba(233,182,34,0.14);
  border: 1px solid rgba(233,182,34,0.25);
  color: var(--brand-dark);
}

/* Goals list */
.about-page .about-ol{
  padding-inline-start: 1.2rem;
}

@media (max-width: 768px){
  .about-page .about-section-ic{
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
  .about-page .about-section-ic i{ font-size: 22px; }
}

/* =========================================
   About Page — Left Rail inside section + Icon box at top
   ضع هذا في نهاية style.css
   ========================================= */

/* Wrapper: rail + content */
.about-page .about-rail-wrap{
  display: grid;
  grid-template-columns: 92px 1fr; /* عمود يسار للأيقونة */
  gap: 16px;
  align-items: start;
}

/* Rail column */
.about-page .about-rail{
  position: relative;
  min-height: 100%;
}

/* The gradient icon box (top-left inside section) */
.about-page .about-rail-icon{
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: radial-gradient(60px 60px at 35% 30%, rgba(233,182,34,0.22), transparent 60%),
              radial-gradient(70px 70px at 70% 60%, rgba(26,140,148,0.20), transparent 62%),
              linear-gradient(135deg, rgba(26,140,148,0.16), rgba(233,182,34,0.14));

  border: 1px solid rgba(10,58,74,0.14);
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
}

/* Icon inside the box (not empty) */
.about-page .about-rail-icon i{
  font-size: 30px;
  color: var(--brand-dark);
}

/* Optional subtle “rail line” under icon (adds structure, not noise) */
.about-page .about-rail::after{
  content:"";
  position:absolute;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% - 92px);
  background: linear-gradient(180deg, rgba(26,140,148,0.22), rgba(233,182,34,0.10), transparent);
  border-radius: 999px;
}

/* Content area */
.about-page .about-rail-content{
  min-width: 0;
}

/* Gradient pills (the top-left pills you mentioned) */
.about-page .about-grad-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .22rem .62rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(10,58,74,0.92);
  background: linear-gradient(135deg, rgba(26,140,148,0.20), rgba(233,182,34,0.22));
  border: 1px solid rgba(10,58,74,0.14);
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  white-space: nowrap;
}

/* Keep chips */
.about-page .about-chips{
  display:flex;
  flex-wrap:wrap;
  gap: .4rem .45rem;
}
.about-page .about-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  border: 1px solid rgba(26,140,148,0.20);
  background: rgba(26,140,148,0.08);
  color: var(--brand-dark);
}

/* Responsive: stack rail on top for small screens */
@media (max-width: 768px){
  .about-page .about-rail-wrap{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .about-page .about-rail{
    min-height: auto;
  }
  .about-page .about-rail::after{
    display:none;
  }
  .about-page .about-rail-icon{
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }
  .about-page .about-rail-icon i{
    font-size: 26px;
  }
}

/* =====================================
   MH Platform Header Enhancements (FRONT ONLY)
   (Announcement + Drawer)
   ===================================== */

/* Safety net: even if elements appear in admin by mistake, hide them */
body.is-admin .mh-announce,
body.is-admin .mh-drawer,
body.is-admin .mh-drawer-overlay,
body.is-admin .mh-drawer-toggle {
  display: none !important;
}

/* ---------- Announcement Bar ---------- */
body.is-front .mh-announce {
  background: linear-gradient(90deg, rgba(233,182,34,0.20), rgba(26,140,148,0.20));
  border-bottom: 1px solid rgba(10,58,74,0.15);
  color: var(--brand-dark);
  padding: 0.35rem 0;
}

body.is-front .mh-announce-title {
  font-weight: 700;
  font-size: 0.95rem;
}

body.is-front .mh-announce-sub {
  margin-inline-start: 0.6rem;
  color: rgba(10,58,74,0.85);
  font-size: 0.85rem;
}

body.is-front .mh-announce-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  background: var(--brand-dark);
  color: #fff;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

body.is-front .mh-announce-cta:hover {
  color: #fff;
  background: var(--brand-base);
  transform: translateY(-1px);
}

body.is-front .mh-announce-link {
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 600;
  opacity: .85;
}

body.is-front .mh-announce-link:hover { opacity: 1; }

/* ---------- Drawer Toggle Button ---------- */
body.is-front .mh-drawer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255,255,255,0.12);
  color: #F9FAFB;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}

body.is-front .mh-drawer-toggle:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

body.is-front .mh-drawer-icon {
  font-size: 1.15rem;
  line-height: 1;
}

body.is-front .mh-no-scroll { overflow: hidden; }

/* ---------- Drawer Overlay ---------- */
body.is-front .mh-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1200;
}

body.is-front .mh-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Drawer Panel ---------- */
body.is-front .mh-drawer {
  position: fixed;
  top: 0;
  right: 0; /* RTL */
  width: min(420px, 92vw);
  height: 100vh;
  background: #0b2530;
  color: #E5E7EB;
  transform: translateX(105%);
  transition: transform .25s ease;
  z-index: 1201;
  display: flex;
  flex-direction: column;
  box-shadow: -18px 0 40px rgba(0,0,0,0.35);
}

body.is-front .mh-drawer.open { transform: translateX(0); }

body.is-front .mh-drawer-header {
  padding: 1rem 1rem 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

body.is-front .mh-drawer-brand {
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
}

body.is-front .mh-drawer-welcome {
  font-size: 0.85rem;
  opacity: .9;
  margin-top: 0.15rem;
}

body.is-front .mh-drawer-close {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* Drawer layout: scroll area + fixed footer */
body.is-front .mh-drawer-body{
  padding: 0;            /* مهم: ننقل الـ padding للـ scroll/footer */
  overflow: hidden;      /* مهم: يمنع scroll عام */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;        /* مهم: يأخذ بقية ارتفاع الدراور تحت الهيدر */
  min-height: 0;         /* مهم جدًا: يسمح للـ overflow داخل الأبناء بالعمل */
}

body.is-front .mh-drawer-scroll{
  padding: 0.9rem 1rem 1rem;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}

body.is-front .mh-drawer-footer{
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: #0b2530; /* نفس خلفية الدراور */
}



/* اجعل mh-support-card يأخذ شكل بلوكات الـ nav أكثر */
body.is-front .mh-drawer-footer .mh-support-card{
  margin-top: 0; /* لأنه الآن في فوتر مستقل */
}

/* ---------- Nudge Box ---------- */
body.is-front .mh-drawer-nudge {
  background: rgba(233,182,34,0.12);
  border: 1px solid rgba(233,182,34,0.22);
  border-radius: 14px;
  padding: 0.8rem 0.85rem;
  margin-bottom: 0.9rem;
}

body.is-front .mh-nudge-title {
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.25rem;
}

body.is-front .mh-nudge-text {
  font-size: 0.85rem;
  opacity: .92;
  margin-bottom: 0.6rem;
}

body.is-front .mh-nudge-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

body.is-front .mh-nudge-cta {
  background: var(--brand-accent);
  color: #111827;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-weight: 800;
  text-decoration: none;
}

body.is-front .mh-nudge-link {
  color: #fff;
  opacity: .9;
  text-decoration: none;
  padding: 0.35rem 0.35rem;
}

body.is-front .mh-nudge-link:hover { opacity: 1; }

/* ---------- Drawer Search ---------- */
body.is-front .mh-drawer-search input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 0.55rem 0.75rem;
  outline: none;
}

body.is-front .mh-drawer-search input::placeholder {
  color: rgba(255,255,255,0.65);
}

/* ---------- Groups & Items ---------- */
body.is-front .mh-nav-groups {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

body.is-front .mh-nav-group {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}

body.is-front .mh-nav-group-head {
  width: 100%;
  text-align: right;
  background: transparent;
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  cursor: pointer;
}

body.is-front .mh-nav-group-title { font-weight: 800; }

body.is-front .mh-nav-group-desc {
  font-size: 0.8rem;
  opacity: .85;
  margin-top: 0.2rem;
}

body.is-front .mh-nav-group-chevron { opacity: .9; }

body.is-front .mh-nav-group-items {
  display: none;
  padding: 0.35rem 0.35rem 0.65rem 0.35rem;
}

body.is-front .mh-nav-item {
  display: block;
  text-decoration: none;
  color: #E5E7EB;
  padding: 0.6rem 0.65rem;
  border-radius: 12px;
  margin: 0.15rem 0.2rem;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}

body.is-front .mh-nav-item:hover {
  color: #fff;
  transform: translateY(-1px);
  background: rgba(26,140,148,0.18);
  border-color: rgba(26,140,148,0.26);
}

body.is-front .mh-nav-item-title { font-weight: 800; }

body.is-front .mh-nav-item-desc {
  font-size: 0.8rem;
  opacity: .85;
  margin-top: 0.15rem;
}

body.is-front .mh-nav-empty {
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  opacity: .85;
}

.mh-support-card{
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(26,140,148,.14), rgba(26,140,148,.07));
  border: 1px solid rgba(26,140,148,.20);
}

.mh-support-head{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.mh-support-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,140,148,.18);
  color: #1A8C94;
  flex: 0 0 36px;
}

.mh-support-title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: #d3e1e6;
}

.mh-support-subtitle{
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #b1f0ee;
}

.mh-support-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: #1A8C94;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  transition: transform .12s ease, filter .12s ease;
}

.mh-support-cta:hover{
  filter: brightness(0.95);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

.mh-support-email{
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-weight: 600;
  font-size: 12px;
}


.mpi-char-counter{
  position:absolute;
  bottom:10px;
  inset-inline-end:12px;
  font-size:0.85rem;
  color:rgba(10,58,74,.75);
  background:rgba(255,255,255,.85);
  border:1px solid rgba(10,58,74,.10);
  padding:4px 10px;
  border-radius:999px;
  pointer-events:none;
}

/* =====================================
   Bias Test: Start Slide + Report v1
   ===================================== */

.bias-start-card{
  border:1px solid rgba(10,58,74,0.15);
  background:linear-gradient(180deg, rgba(26,140,148,0.08), rgba(233,182,34,0.06));
  border-radius:18px;
}
.bias-start-cta{ min-width: 240px; }

.bias-report-layout{ display:flex; gap:1rem; align-items:stretch; }
.bias-report-sidebar{ width: 310px; flex:0 0 310px; }
.bias-report-main{ flex:1 1 auto; min-width: 0; }

@media (max-width: 992px){
  .bias-report-layout{ flex-direction:column; }
  .bias-report-sidebar{ width:100%; flex: 0 0 auto; }
}

.bias-report-card{
  border:1px solid rgba(10,58,74,0.12);
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(15,23,42,0.06);
}

.bias-report-card .card-h{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding: 14px 16px;
  border-bottom:1px solid rgba(10,58,74,0.10);
}
.bias-report-card .card-b{ padding: 14px 16px; }

.bias-kpis{ display:flex; flex-wrap:wrap; gap:10px; }
.bias-kpi{
  border:1px solid rgba(10,58,74,0.12);
  background: rgba(243,244,246,0.6);
  border-radius:999px;
  padding: 6px 12px;
  font-size:0.85rem;
  color: #0A3A4A;
}

.bias-side-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(10,58,74,0.10);
  background:#fff;
  text-decoration:none;
  color: inherit;
}
.bias-side-item:hover{ background: rgba(26,140,148,0.06); }
.bias-side-item.is-active{
  border-color: rgba(26,140,148,0.35);
  background: linear-gradient(90deg, rgba(26,140,148,0.10), rgba(233,182,34,0.08));
}

.bias-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 8px;
  border-radius:999px;
  font-size:0.75rem;
  border:1px solid rgba(10,58,74,0.14);
  background:#fff;
  color:#0A3A4A;
  white-space:nowrap;
}

.bias-acc-item{
  border:1px solid rgba(10,58,74,0.10);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:10px;
}

.bias-acc-head{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  background: rgba(243,244,246,0.65);
  border:none;
  text-align:right;
  font-weight:700;
}

.bias-acc-body{ padding: 10px 12px; background:#fff; }

.bias-tip{
  border:1px solid rgba(10,58,74,0.10);
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0;
  background: rgba(26,140,148,0.04);
}
.bias-tip-title{ font-weight:700; margin-bottom:6px; }
.bias-tip-meta{ font-size:0.82rem; color:#6b7280; }

.bias-build-wrap{
  max-width: 820px;
  margin: 1.5rem auto;
}

.bias-build-steps{ display:flex; flex-wrap:wrap; gap:10px; }
.bias-build-step{
  border:1px solid rgba(10,58,74,0.12);
  border-radius:999px;
  padding:6px 12px;
  background:#fff;
  font-size:0.85rem;
  color:#0A3A4A;
}
.bias-build-step.is-done{ background: rgba(26,140,148,0.10); border-color: rgba(26,140,148,0.25); }



/* =========================================================
   CI Threshold Experience — Unified UI Block (v4)
   Paste at END of style.css to override older duplicates
   Base: v3 clarity, merged with required legacy selectors
   ========================================================= */

/* -------- Tokens (local) -------- */
:root{
  --ci-text: rgba(15,23,42,.92);
  --ci-muted: rgba(15,23,42,.72);
  --ci-border: rgba(15,23,42,.10);
  --ci-border-strong: rgba(15,23,42,.14);
  --ci-surface: rgba(255,255,255,.92);
  --ci-surface-2: rgba(248,250,252,.95);
  --ci-shadow: 0 10px 30px rgba(15,23,42,0.06);

  --ci-accent: rgba(26,140,148,.85);
  --ci-accent-soft: rgba(26,140,148,.12);

  --ci-warn: rgba(233,182,34,.85);
  --ci-warn-soft: rgba(233,182,34,.18);

  --ci-radius-lg: 18px;
  --ci-radius-md: 16px;
  --ci-radius-sm: 14px;
}

/* -------- Layout wrappers -------- */
.ci-steps,
.ci-card-shell{
  max-width: 1100px;
  margin-inline: auto;
}

.ci-stage{
  margin-top: 14px;
}
.ci-stage .ci-stage-inner{
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-lg);
  padding: 14px;
  box-shadow: var(--ci-shadow);
}

/* Generic card */
.ci-card{
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-lg);
}
.ci-card .ci-card-inner{
  padding: 14px;
}

/* Split layout inside cards (Cards stage) */
.ci-card-split{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 992px){
  .ci-card-split{ grid-template-columns: 1fr; }
}

/* -------- Hero additions -------- */
#ciLongDesc{
  margin-top: 10px;
  color: var(--ci-muted);
  line-height: 1.95;
  font-size: 0.98rem;
}
#ciDesc{
  color: var(--ci-muted);
  line-height: 1.85;
}
/* يحافظ على أسطر النص القادمة من DB */
#ciLongDesc,
#ciDesc,
.ci-slide-text,
.test-desc-scroll {
  white-space: pre-line;
}

/* اختياري: تحسين القراءة */
#ciLongDesc,
#ciDesc,
.ci-slide-text {
  line-height: 1.9;
}
#ciLongDesc p {
  margin: 0 0 .9rem;
  line-height: 1.9;
}

#ciLongDesc ul,
#ciLongDesc ol {
  margin: 0 0 .9rem;
}

#ciLongDesc li {
  margin: .25rem 0;
}

/* -------- Global progress / steps -------- */
.ci-steps-track{
  height: 10px;
  background: rgba(15,23,42,.10);
  border-radius: 999px;
  overflow: hidden;
}
.ci-steps-fill{
  height: 100%;
  width: 0%;
  background: var(--ci-accent);
  transition: width .25s ease;
}

.ci-steps-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ci-steps-dots{
  display: flex;
  gap: 10px;
  align-items: center;
}

/* stage dots */
.ci-step-dot{
  width: 34px; height: 34px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(15,23,42,.22);
  background: #fff;
  color: rgba(15,23,42,.90);
  font-weight: 800;
}
.ci-step-dot.active{
  border-color: rgba(26,140,148,.65);
  box-shadow: 0 10px 24px rgba(26,140,148,.12);
}
.ci-step-dot.done{
  background: rgba(26,140,148,.12);
  border-color: rgba(26,140,148,.35);
}

#ciStepsLabel{
  color: var(--ci-muted);
  font-weight: 700;
}

/* -------- Carousel sections (Pre/Post/Cards) -------- */
.ci-carousel-body{
  min-height: 220px;
}

/* Remove legacy internal progress bars (keep hidden if still present) */
.ci-progress-track,
.ci-progressbar{
  display: none !important;
}

/* Nav buttons row under carousels */
.ci-carousel-nav{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.ci-carousel-nav .btn{
  min-width: 110px;
}

/* -------- Question styles -------- */
.ci-q-title{
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--ci-text);
}
.ci-q-prompt{
  margin-bottom: 12px;
  line-height: 1.85;
  color: var(--ci-text);
}

/* options grid */
.ci-options{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

/* unified option block (v3) */
.ci-option--block{
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 12px;
  border-radius: var(--ci-radius-sm);
  border: 1px solid var(--ci-border);
  background: rgba(255,255,255,0.75);
  cursor: pointer;
}
.ci-option--block input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ci-option-badge{
  width: 20px; height: 20px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ci-accent-soft);
  border: 1px solid rgba(26,140,148,0.20);
  font-size: 12px;
  color: rgba(15,23,42,0.75);
  margin-top: 2px;
}
.ci-option-text{
  font-size: 14px;
  color: rgba(15,23,42,0.88);
  line-height: 1.75;
}

/* selected state: :has supported in modern Chrome */
.ci-option--block:has(input:checked){
  background: rgba(26,140,148,0.10);
  border-color: rgba(26,140,148,0.35);
}
.ci-option--block:focus-within{
  outline: 2px solid rgba(26,140,148,0.35);
  outline-offset: 2px;
}

/* Fallback hook if you ever want JS to add class instead of :has */
.ci-option--block.is-checked{
  background: rgba(26,140,148,0.10);
  border-color: rgba(26,140,148,0.35);
}

/* -------- Card slides (Cards stage) -------- */
.ci-card-view{
  min-height: 420px;
}

.ci-slide{
  background: var(--ci-surface-2);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-md);
  padding: 14px;
  min-height: 340px;
  max-height: 420px;
  overflow: auto;
  color: var(--ci-text);
}

@media (max-width: 900px){
  .ci-slide{ min-height: 320px; max-height: 420px; }
}

.ci-slide img,
.ci-slide video,
.ci-slide iframe{
  max-width: 100%;
  border-radius: 14px;
}

.ci-slide-title{
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--ci-text);
}
.ci-slide-text{
  line-height: 1.9;
  color: var(--ci-text);
}

/* Media wrappers kept for compatibility */
.ci-audio audio{ width: 100%; }
.ci-media-img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--ci-border);
}
.ci-media-video{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ci-border);
}
.ci-media-caption{
  margin-top: 10px;
  font-size: .9rem;
  color: rgba(15,23,42,.75);
}

/* Dialogue blocks */
.ci-dialogue{
  display: grid;
  gap: 10px;
}
.ci-dialogue-line{
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-sm);
  padding: 10px 12px;
  background: #fff;
}
.ci-dialogue-who{
  font-weight: 900;
  margin-bottom: 4px;
  color: var(--ci-text);
}
.ci-dialogue-text{
  line-height: 1.8;
  color: var(--ci-text);
}

/* -------- Lesson map (Intro structure) -------- */
.ci-map{
  display: grid;
  gap: 10px;
}
.ci-map-group{
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-md);
  padding: 10px 12px;
  background: #fff;
}
.ci-map-group summary{
  cursor: pointer;
  font-weight: 900;
  color: var(--ci-text);
}
.ci-map-items{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}
.ci-map-item{
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-sm);
  padding: 10px 12px;
  background: rgba(15,23,42,.02);
  color: var(--ci-text);
}

/* -------- Global threshold notes (new) -------- */
.ci-threshold-notes textarea,
#thresholdNotes{
  resize: vertical;
  min-height: 220px;
  line-height: 1.8;
}
#notesCounter{
  color: var(--ci-muted);
  font-size: .9rem;
}

/* -------- Report -------- */
.ci-report{
  display: grid;
  gap: 12px;
}
.ci-report-block{
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-lg);
  padding: 12px 14px;
  background: #fff;
}
.ci-report-block-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.ci-badge{
  font-size: .85rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ci-warn-soft);
  border: 1px solid rgba(233,182,34,.35);
  color: rgba(15,23,42,.85);
  font-weight: 800;
}
.ci-report-block-body{
  line-height: 1.9;
  color: var(--ci-text);
}
.ci-report-points{
  margin: 10px 0 0;
  padding-right: 18px;
  display: grid;
  gap: 6px;
}
.ci-report-row{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--ci-radius-sm);
  padding: 10px 12px;
  background: rgba(15,23,42,.02);
}
.ci-report-closing{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.80);
}
.ci-report-raw{
  background: #0b1220;
  color: #e6edf3;
  padding: 12px;
  border-radius: 10px;
  overflow: auto;
}

/* -------- Small polish -------- */
.ci-slide::-webkit-scrollbar,
.ci-report-raw::-webkit-scrollbar{
  height: 10px;
  width: 10px;
}
.ci-slide::-webkit-scrollbar-thumb,
.ci-report-raw::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  border-radius: 999px;
}