/* =====================================================================
   مرصدك — components.css
   مكتبة المكوّنات الكاملة. كل صنف هنا موثّق في assets/css/COMPONENTS.md
   ويجب على الوكلاء اللاحقين استخدام هذه الأصناف كما هي دون اختراع بدائل.
   يعتمد على: tokens.css + base.css + layout.css
   الحركات المسمّاة معرّفة في animations.css.
   ===================================================================== */

/* =====================================================================
   1) الأزرار
   ===================================================================== */

.btn{
  --btn-h:50px;
  --btn-px:var(--sp-5);
  --btn-fs:var(--fs-base);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  block-size:var(--btn-h);
  padding-inline:var(--btn-px);
  font-family:var(--font-sans);
  font-size:var(--btn-fs);
  font-weight:var(--fw-bold);
  line-height:1;
  letter-spacing:var(--tracking);
  color:var(--navy-800);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  text-decoration:none;
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    opacity var(--dur-2) var(--ease);
}

.btn:hover{text-decoration:none}

.btn:active{transform:translateY(0) scale(.985)}

.btn svg[data-icon]{inline-size:1.15em;block-size:1.15em}

/* --- 1.1 النمط الأساسي: تدرّج الهوية --- */
.btn--primary{
  color:var(--white);
  background-image:var(--grad-brand);
  background-size:180% 180%;
  background-position:0% 50%;
  border-color:transparent;
  box-shadow:0 6px 18px rgba(91,63,209,.22);
}

.btn--primary:hover{
  color:var(--white);
  transform:translateY(-2px);
  background-position:100% 50%;
  box-shadow:var(--shadow-glow);
}

.btn--primary:active{transform:translateY(-1px) scale(.99)}

/* --- 1.2 ثانوي: كحلي صلب --- */
.btn--secondary{
  color:var(--white);
  background:var(--navy-800);
  border-color:var(--navy-800);
  box-shadow:0 6px 16px rgba(16,27,79,.18);
}

.btn--secondary:hover{
  color:var(--white);
  background:var(--navy-700);
  border-color:var(--navy-700);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(16,27,79,.24);
}

/* --- 1.3 شبحي: إطار فقط --- */
.btn--ghost{
  color:var(--violet-600);
  background:transparent;
  border-color:var(--violet-200);
}

.btn--ghost:hover{
  color:var(--violet-700);
  background:var(--violet-50);
  border-color:var(--violet-300);
  transform:translateY(-2px);
}

/* --- 1.3ب شبحي فاتح: للخلفيات الداكنة والمتدرّجة (البنفسجي على البنفسجي غير مقروء) --- */
.btn--ghost-light{
  color:var(--white);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.55);
}

.btn--ghost-light:hover{
  color:var(--white);
  background:rgba(255,255,255,.18);
  border-color:var(--white);
  transform:translateY(-2px);
}

/* --- 1.4 ناعم: خلفية بنفسجية فاتحة --- */
.btn--soft{
  color:var(--violet-700);
  background:var(--violet-100);
  border-color:transparent;
}

.btn--soft:hover{
  color:var(--violet-700);
  background:var(--violet-200);
  transform:translateY(-2px);
}

/* --- 1.5 أبيض: للخلفيات الداكنة والهيرو --- */
.btn--white{
  color:var(--navy-800);
  background:var(--white);
  border-color:transparent;
  box-shadow:0 8px 24px rgba(7,12,38,.22);
}

.btn--white:hover{
  color:var(--violet-700);
  background:var(--cream-50);
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(7,12,38,.3);
}

/* نسخة شبحية فوق الداكن */
.btn--outline-white{
  color:var(--white);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.btn--outline-white:hover{
  color:var(--white);
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.55);
  transform:translateY(-2px);
}

/* --- 1.6 خطر: الحذف والإجراءات غير القابلة للتراجع --- */
.btn--danger{
  color:var(--white);
  background:var(--danger);
  border-color:var(--danger);
  box-shadow:0 6px 16px rgba(214,69,80,.24);
}

.btn--danger:hover{
  color:var(--white);
  background:#C23B46;
  border-color:#C23B46;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(214,69,80,.32);
}

.btn--danger-soft{
  color:var(--danger-ink);
  background:var(--danger-soft);
  border-color:transparent;
}

.btn--danger-soft:hover{
  color:var(--danger-ink);
  background:#F6D7DA;
  transform:translateY(-2px);
}

/* --- 1.7 الأحجام --- */
.btn--sm{--btn-h:38px;--btn-px:var(--sp-4);--btn-fs:var(--fs-sm)}
.btn--lg{--btn-h:58px;--btn-px:var(--sp-6);--btn-fs:var(--fs-md)}
.btn--xl{--btn-h:66px;--btn-px:var(--sp-7);--btn-fs:var(--fs-lg)}

/* --- 1.8 أشكال خاصة --- */
.btn--block{display:flex;inline-size:100%}

.btn--icon{
  --btn-px:0;
  inline-size:var(--btn-h);
  padding:0;
  flex-shrink:0;
}

.btn--icon svg[data-icon]{inline-size:1.35em;block-size:1.35em}

.btn--square{border-radius:var(--r-md)}

/* --- 1.9 الحالات --- */
.btn:disabled,
.btn[aria-disabled='true'],
.btn.is-disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
  pointer-events:none;
}

.btn.is-loading{
  color:transparent !important;
  pointer-events:none;
  position:relative;
}

.btn.is-loading > *{visibility:hidden}

.btn.is-loading::after{
  content:'';
  position:absolute;
  inline-size:1.2em;
  block-size:1.2em;
  border-radius:50%;
  border:2px solid currentColor;
  border-block-start-color:transparent;
  color:var(--navy-800);
  animation:spin .7s linear infinite;
  visibility:visible;
}

.btn--primary.is-loading::after,
.btn--secondary.is-loading::after,
.btn--danger.is-loading::after{color:#fff}

/* مجموعة أزرار ملتصقة */
.btn-group{
  display:inline-flex;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:4px;
  gap:4px;
}

.btn-group .btn{
  --btn-h:38px;
  --btn-px:var(--sp-4);
  --btn-fs:var(--fs-sm);
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  color:var(--ink-soft);
}

.btn-group .btn:hover{background:var(--violet-50);color:var(--violet-700);transform:none}

.btn-group .btn.is-active{
  background:var(--navy-800);
  color:var(--white);
}

/* =====================================================================
   2) البطاقات
   ===================================================================== */

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:
    transform var(--dur-3) var(--ease),
    box-shadow var(--dur-3) var(--ease),
    border-color var(--dur-3) var(--ease);
  block-size:100%;
}

/* غلاف الوسائط */
.card__media{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--cream-200);
  flex-shrink:0;
}

.card__media img,
.card__media video{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  transition:transform var(--dur-4) var(--ease);
}

.card:hover .card__media img{transform:scale(1.055)}

/* تدرّج سفلي فوق الصورة لقراءة الشارات */
.card__media::after{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  block-size:52%;
  background:linear-gradient(to top,rgba(7,12,38,.5),transparent);
  opacity:0;
  transition:opacity var(--dur-3) var(--ease);
  pointer-events:none;
}

.card:hover .card__media::after{opacity:1}

/* شارات فوق الصورة */
.card__media-badges{
  position:absolute;
  inset-block-start:var(--sp-3);
  inset-inline-start:var(--sp-3);
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  z-index:2;
}

.card__media-corner{
  position:absolute;
  inset-block-start:var(--sp-3);
  inset-inline-end:var(--sp-3);
  z-index:2;
}

.card__body{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--card-pad);
  flex:1 1 auto;
  min-inline-size:0;
}

.card__title{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  line-height:var(--lh-snug);
  color:var(--ink);
  margin:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}

.card__title a{color:inherit}
.card__title a:hover{color:var(--violet-600);text-decoration:none}

.card__excerpt{
  font-size:var(--fs-sm);
  color:var(--ink-soft);
  line-height:var(--lh-body);
  margin:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

.card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.4;
}

.card__meta-item{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  min-inline-size:0;
}

.card__meta-item svg[data-icon]{
  inline-size:16px;
  block-size:16px;
  color:var(--violet-500);
}

.card__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--card-pad);
  border-block-start:1px solid var(--line);
  background:var(--cream-50);
  margin-block-start:auto;
  font-size:var(--fs-sm);
  color:var(--ink-soft);
}

/* رابط يغطّي البطاقة كاملة (مع إبقاء الأزرار الداخلية قابلة للنقر) */
.card__link-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
}

.card__body > *,
.card__foot > *{position:relative;z-index:2}

/* --- 2.1 أنماط البطاقة --- */

.card--hover:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--violet-200);
}

.card--hover:focus-within{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--violet-300);
}

.card--glass{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-color:rgba(255,255,255,.55);
  box-shadow:var(--shadow-md),var(--shadow-inset);
}

/* زجاجي فوق خلفية داكنة */
.card--glass-dark{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-color:rgba(255,255,255,.18);
  color:var(--cream-100);
  box-shadow:0 20px 48px rgba(7,12,38,.35);
}

.card--glass-dark .card__title{color:var(--white)}
.card--glass-dark .card__meta,
.card--glass-dark .card__excerpt{color:rgba(250,247,241,.75)}

.card--gradient{
  background-image:var(--grad-brand);
  border-color:transparent;
  color:var(--cream-100);
  box-shadow:var(--shadow-glow);
}

.card--gradient .card__title{color:var(--white)}
.card--gradient .card__excerpt,
.card--gradient .card__meta{color:rgba(250,247,241,.82)}
.card--gradient .card__meta-item svg[data-icon]{color:var(--violet-200)}
.card--gradient .card__foot{
  background:rgba(7,12,38,.22);
  border-block-start-color:rgba(255,255,255,.16);
  color:rgba(250,247,241,.85);
}

.card--flat{
  border-color:transparent;
  box-shadow:none;
  background:var(--cream-50);
}

.card--flat:hover{box-shadow:var(--shadow-sm)}

/* بطاقة أفقية (صورة جانبية) */
.card--row{
  flex-direction:row;
  align-items:stretch;
}

.card--row .card__media{
  aspect-ratio:auto;
  inline-size:190px;
  flex:0 0 190px;
}

@media (max-width:560px){
  .card--row{flex-direction:column}
  .card--row .card__media{
    inline-size:100%;
    flex:0 0 auto;
    aspect-ratio:16/10;
  }
}

/* شريط لوني علوي حسب التصنيف (--accent) */
.card--accent::before{
  content:'';
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  block-size:4px;
  background:var(--accent,var(--violet-500));
  z-index:3;
}

/* =====================================================================
   3) الشارات
   ===================================================================== */

.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:5px 12px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  line-height:1.5;
  border-radius:var(--r-pill);
  background:var(--violet-100);
  color:var(--violet-700);
  border:1px solid transparent;
  white-space:nowrap;
  vertical-align:middle;
}

.badge svg[data-icon]{inline-size:14px;block-size:14px}

.badge--lg{padding:8px 16px;font-size:var(--fs-sm)}

/* نقطة صغيرة قبل النص */
.badge--dot::before{
  content:'';
  inline-size:7px;
  block-size:7px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}

/* --- 3.1 حالات الفعالية --- */

/* جارية الآن — نقطة حمراء نابضة */
.badge--live{
  background:var(--danger-soft);
  color:var(--danger-ink);
  border-color:rgba(214,69,80,.22);
}

.badge--live::before{
  content:'';
  inline-size:8px;
  block-size:8px;
  border-radius:50%;
  background:var(--danger);
  flex-shrink:0;
  box-shadow:0 0 0 0 rgba(214,69,80,.55);
  animation:pulse-dot 1.8s var(--ease) infinite;
}

.badge--upcoming{
  background:var(--info-soft);
  color:var(--info-ink);
  border-color:rgba(47,127,224,.2);
}

/* تبدأ قريباً جداً */
.badge--soon{
  background:var(--warn-soft);
  color:var(--warn-ink);
  border-color:rgba(232,163,23,.24);
}

.badge--ended{
  background:var(--cream-300);
  color:var(--ink-soft);
  border-color:rgba(16,27,79,.08);
}

.badge--cancelled{
  background:var(--cream-200);
  color:var(--danger-ink);
  border-color:rgba(214,69,80,.2);
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
}

/* --- 3.2 السعر --- */

.badge--free{
  background:var(--ok-soft);
  color:var(--ok-ink);
  border-color:rgba(25,169,116,.22);
}

.badge--paid{
  background:var(--navy-800);
  color:var(--cream-100);
}

/* --- 3.3 التمييز --- */

.badge--new{
  background:var(--grad-violet);
  color:var(--white);
  box-shadow:0 4px 12px rgba(129,57,214,.28);
}

.badge--featured{
  background:linear-gradient(135deg,#E8A317 0%,#F2C14A 100%);
  color:#5A3E02;
  box-shadow:0 4px 12px rgba(232,163,23,.28);
}

/* شارة نوع الفعالية/التصنيف — اللون عبر --accent */
/* نسبة التغميق 58% تضمن ≥4.5:1 للنص (12.5px/700) فوق الخلفية الفاتحة
   المشتقّة من اللون نفسه — حتى مع ألوان التصنيفات الفاتحة. (A11Y-11) */
.badge--type{
  background:color-mix(in srgb,var(--accent,var(--violet-500)) 12%,#fff);
  color:color-mix(in srgb,var(--accent,var(--violet-500)) 58%,#000);
  border-color:color-mix(in srgb,var(--accent,var(--violet-500)) 24%,transparent);
}

/* احتياطي للمتصفحات بلا color-mix */
@supports not (color:color-mix(in srgb,red 10%,blue)){
  .badge--type{background:var(--violet-100);color:var(--violet-700)}
}

/* شارة صلبة فوق الصور */
.badge--solid{
  background:rgba(7,12,38,.72);
  color:var(--white);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* شارة عدّاد صغيرة (إشعارات) */
.badge--count{
  min-inline-size:20px;
  block-size:20px;
  padding:0 6px;
  justify-content:center;
  background:var(--danger);
  color:var(--white);
  font-size:11px;
}

/* =====================================================================
   4) رقائق الفلاتر
   ===================================================================== */

.chips{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-wrap:wrap;
}

/* على الجوال: شريط تمرير أفقي بلا شريط مرئي */
@media (max-width:768px){
  .chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-block-end:var(--sp-2);
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start}
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  block-size:40px;
  padding-inline:var(--sp-4);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--ink-soft);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  transition:
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.chip svg[data-icon]{inline-size:16px;block-size:16px}

.chip:hover{
  color:var(--violet-700);
  border-color:var(--violet-300);
  background:var(--violet-50);
  text-decoration:none;
  transform:translateY(-1px);
}

.chip--active,
.chip.is-active,
.chip[aria-pressed='true']{
  color:var(--white);
  background-image:var(--grad-brand);
  background-size:150% 150%;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(91,63,209,.24);
}

.chip--active:hover,
.chip.is-active:hover{color:var(--white);background:var(--grad-brand)}

.chip__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-inline-size:22px;
  block-size:20px;
  padding-inline:6px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  border-radius:var(--r-pill);
  background:var(--violet-100);
  color:var(--violet-700);
}

.chip--active .chip__count,
.chip.is-active .chip__count{
  background:rgba(255,255,255,.22);
  color:var(--white);
}

/* رقاقة صغيرة */
.chip--sm{block-size:32px;padding-inline:var(--sp-3);font-size:var(--fs-xs)}

/* رقاقة قابلة للإزالة */
.chip__remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  inline-size:18px;
  block-size:18px;
  border-radius:50%;
  background:rgba(16,27,79,.08);
  color:inherit;
  flex-shrink:0;
}

.chip__remove:hover{background:rgba(214,69,80,.16);color:var(--danger)}

/* =====================================================================
   5) النماذج
   ===================================================================== */

.field{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  min-inline-size:0;
}

.field__label{
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  line-height:1.5;
}

.field__label .req{color:var(--danger);margin-inline-start:2px}

.field__hint{
  font-size:var(--fs-xs);
  color:var(--muted);
  line-height:1.6;
}

.field__error{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-2);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  color:var(--danger);
  line-height:1.6;
}

.field__error svg[data-icon]{inline-size:14px;block-size:14px;margin-block-start:2px}

/* --- 5.1 الحقول --- */

.input,
.textarea,
.select{
  inline-size:100%;
  min-block-size:var(--field-h);
  padding:var(--sp-3) var(--sp-4);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
  appearance:none;
  -webkit-appearance:none;
}

.input:hover,
.textarea:hover,
.select:hover{border-color:var(--violet-200)}

.input:focus,
.textarea:focus,
.select:focus{
  outline:none;
  border-color:var(--violet-500);
  box-shadow:var(--ring);
  background:var(--white);
}

.input:disabled,
.textarea:disabled,
.select:disabled{
  background:var(--cream-200);
  color:var(--muted);
  border-color:var(--cream-300);
}

.input[readonly]{background:var(--cream-50);color:var(--ink-soft)}

.input--sm{min-block-size:var(--field-h-sm);padding-block:var(--sp-2);font-size:var(--fs-sm)}

.textarea{
  min-block-size:140px;
  line-height:var(--lh-body);
  resize:vertical;
}

.textarea--lg{min-block-size:260px}

/* قائمة منسدلة بسهم مخصّص */
.select{
  padding-inline-end:calc(var(--sp-4) + 26px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6488' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:18px 18px;
  background-position:left var(--sp-4) center;
  cursor:pointer;
}

html[dir='ltr'] .select{background-position:right var(--sp-4) center}

.select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238139D6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* --- 5.2 حالة الخطأ --- */

.field--invalid .input,
.field--invalid .textarea,
.field--invalid .select,
.input.is-invalid,
.textarea.is-invalid,
.select.is-invalid{
  border-color:var(--danger);
  background:#FFFCFC;
}

.field--invalid .input:focus,
.field--invalid .textarea:focus,
.field--invalid .select:focus{box-shadow:var(--ring-danger)}

.field--invalid .field__label{color:var(--danger-ink)}

/* --- 5.3 مربّع اختيار وزر راديو --- */

.checkbox,
.radio{
  display:inline-flex;
  align-items:flex-start;
  gap:var(--sp-3);
  cursor:pointer;
  font-size:var(--fs-sm);
  line-height:1.6;
  color:var(--ink);
  user-select:none;
  padding-block:2px;
}

.checkbox input[type='checkbox'],
.radio input[type='radio']{
  appearance:none;
  -webkit-appearance:none;
  inline-size:21px;
  block-size:21px;
  flex-shrink:0;
  margin:0;
  margin-block-start:2px;
  background:var(--white);
  border:1.5px solid var(--line);
  cursor:pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

.checkbox input[type='checkbox']{border-radius:6px}
.radio input[type='radio']{border-radius:50%}

.checkbox input[type='checkbox']:hover,
.radio input[type='radio']:hover{border-color:var(--violet-400)}

.checkbox input[type='checkbox']:checked{
  background-color:var(--violet-500);
  border-color:var(--violet-500);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:15px 15px;
  background-position:center;
  background-repeat:no-repeat;
}

.radio input[type='radio']:checked{
  border-color:var(--violet-500);
  border-width:6px;
}

.checkbox input:focus-visible,
.radio input:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-color:var(--violet-500);
}

.checkbox input:disabled,
.radio input:disabled{background:var(--cream-200);border-color:var(--cream-300);cursor:not-allowed}

.checkbox__text{min-inline-size:0}
.checkbox__text small{display:block;color:var(--muted);font-size:var(--fs-xs)}

/* مجموعة اختيارات بشكل بطاقات */
.choice-card{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--white);
  cursor:pointer;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}

.choice-card:hover{border-color:var(--violet-300);background:var(--violet-50)}

.choice-card:has(input:checked){
  border-color:var(--violet-500);
  background:var(--violet-50);
  box-shadow:var(--ring);
}

/* --- 5.4 مفتاح التبديل --- */

.switch{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  cursor:pointer;
  font-size:var(--fs-sm);
  color:var(--ink);
  user-select:none;
}

.switch input[type='checkbox']{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  inline-size:48px;
  block-size:27px;
  flex-shrink:0;
  margin:0;
  border-radius:var(--r-pill);
  background:var(--cream-300);
  border:none;
  cursor:pointer;
  transition:background-color var(--dur-2) var(--ease);
}

.switch input[type='checkbox']::after{
  content:'';
  position:absolute;
  inset-block-start:3px;
  inset-inline-start:3px;
  inline-size:21px;
  block-size:21px;
  border-radius:50%;
  background:var(--white);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-2) var(--ease);
}

.switch input[type='checkbox']:checked{background-image:var(--grad-violet)}

.switch input[type='checkbox']:checked::after{transform:translateX(-21px)}

html[dir='ltr'] .switch input[type='checkbox']:checked::after{transform:translateX(21px)}

.switch input[type='checkbox']:focus-visible{outline:none;box-shadow:var(--ring)}

.switch input[type='checkbox']:disabled{opacity:.5;cursor:not-allowed}

/* --- 5.5 مجموعة حقل بلاحقة/بادئة --- */

.input-group{
  display:flex;
  align-items:stretch;
  inline-size:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}

.input-group:focus-within{
  border-color:var(--violet-500);
  box-shadow:var(--ring);
}

.input-group .input,
.input-group .select{
  border:0;
  border-radius:0;
  box-shadow:none;
  flex:1 1 auto;
  min-inline-size:0;
}

.input-group .input:focus,
.input-group .select:focus{box-shadow:none}

.input-group__addon{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding-inline:var(--sp-4);
  background:var(--cream-100);
  color:var(--muted);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  white-space:nowrap;
  flex-shrink:0;
}

.input-group__addon svg[data-icon]{inline-size:18px;block-size:18px}

.input-group__addon--start{border-inline-end:1px solid var(--line)}
.input-group__addon--end{border-inline-start:1px solid var(--line)}

.input-group .btn{
  border-radius:0;
  border:0;
  block-size:auto;
  flex-shrink:0;
}

/* --- 5.6 منطقة إفلات الملفات --- */

.file-drop{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  min-block-size:170px;
  padding:var(--sp-5);
  text-align:center;
  border:2px dashed var(--violet-200);
  border-radius:var(--r-lg);
  background:var(--violet-50);
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}

.file-drop:hover,
.file-drop.is-dragover{
  border-color:var(--violet-500);
  background:var(--violet-100);
}

.file-drop input[type='file']{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  inline-size:100%;
  block-size:100%;
}

.file-drop__icon{
  display:grid;
  place-items:center;
  inline-size:52px;
  block-size:52px;
  border-radius:var(--r-md);
  background:var(--white);
  color:var(--violet-500);
  box-shadow:var(--shadow-sm);
}

.file-drop__icon svg[data-icon]{inline-size:24px;block-size:24px}

.file-drop__title{font-weight:var(--fw-bold);color:var(--navy-800);font-size:var(--fs-sm)}
.file-drop__hint{font-size:var(--fs-xs);color:var(--muted)}

.file-drop__file{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--violet-700);
  background:var(--white);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-pill);
}

/* --- 5.7 شبكة النموذج --- */

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4) var(--sp-5);
  align-items:start;
}

.form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid--1{grid-template-columns:minmax(0,1fr)}

.form-grid__full{grid-column:1/-1}

@media (max-width:768px){
  .form-grid,
  .form-grid--3{grid-template-columns:minmax(0,1fr)}
}

.form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  padding-block-start:var(--sp-5);
  margin-block-start:var(--sp-2);
  border-block-start:1px solid var(--line);
}

/* حقل الفخّ (honeypot) — مخفي عن البشر وعن القارئات */
.hp-field{
  position:absolute !important;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}

/* --- 5.8 شريط البحث --- */

.search-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  inline-size:100%;
  padding:var(--sp-2);
  padding-inline-start:var(--sp-4);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}

.search-bar:focus-within{
  border-color:var(--violet-400);
  box-shadow:var(--shadow-md),var(--ring);
}

.search-bar__icon{
  color:var(--muted);
  flex-shrink:0;
  display:flex;
}

.search-bar__icon svg[data-icon]{inline-size:20px;block-size:20px}

.search-bar__input{
  flex:1 1 auto;
  min-inline-size:0;
  border:0;
  background:none;
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  color:var(--ink);
  block-size:38px;
}

.search-bar__input:focus{outline:none}

.search-bar .btn{flex-shrink:0}

.search-bar--lg{padding:var(--sp-3);padding-inline-start:var(--sp-5)}
.search-bar--lg .search-bar__input{block-size:44px;font-size:var(--fs-md)}

/* لوحة الاقتراحات الفورية */
.search-bar__suggest{
  position:absolute;
  inset-block-start:calc(100% + 8px);
  inset-inline:0;
  z-index:var(--z-dropdown);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  max-block-size:400px;
  overflow-y:auto;
  padding:var(--sp-2);
}

.search-bar__suggest[hidden]{display:none}

.search-suggest__group{
  padding:var(--sp-2) var(--sp-3) var(--sp-1);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  color:var(--muted);
}

.search-suggest__item{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-3);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-size:var(--fs-sm);
  text-decoration:none;
}

.search-suggest__item:hover,
.search-suggest__item.is-active{
  background:var(--violet-50);
  color:var(--violet-700);
  text-decoration:none;
}

.search-suggest__item svg[data-icon]{color:var(--violet-500)}

/* =====================================================================
   6) التنبيهات والإشعارات
   ===================================================================== */

.alert{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border-radius:var(--r-md);
  border:1px solid transparent;
  border-inline-start:3px solid currentColor;
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  background:var(--violet-50);
  color:var(--violet-700);
}

.alert__icon{
  flex-shrink:0;
  display:flex;
  margin-block-start:2px;
}

.alert__icon svg[data-icon]{inline-size:20px;block-size:20px}

.alert__body{flex:1 1 auto;min-inline-size:0}

.alert__title{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-base);
  margin-block-end:2px;
  color:inherit;
}

.alert__text{color:inherit;opacity:.92}

.alert__close{
  flex-shrink:0;
  display:grid;
  place-items:center;
  inline-size:28px;
  block-size:28px;
  border-radius:var(--r-sm);
  color:inherit;
  opacity:.6;
  transition:opacity var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease);
}

.alert__close:hover{opacity:1;background:rgba(16,27,79,.07)}

.alert--success{background:var(--ok-soft);color:var(--ok-ink);border-color:rgba(25,169,116,.2);border-inline-start-color:var(--ok)}
.alert--error{background:var(--danger-soft);color:var(--danger-ink);border-color:rgba(214,69,80,.2);border-inline-start-color:var(--danger)}
.alert--warning{background:var(--warn-soft);color:var(--warn-ink);border-color:rgba(232,163,23,.24);border-inline-start-color:var(--warn)}
.alert--info{background:var(--info-soft);color:var(--info-ink);border-color:rgba(47,127,224,.2);border-inline-start-color:var(--info)}

/* --- 6.1 الإشعارات العائمة --- */

.toast-stack{
  position:fixed;
  inset-block-start:calc(var(--header-h) + var(--sp-3));
  inset-inline-start:var(--sp-5);
  z-index:var(--z-toast);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  inline-size:min(380px,calc(100vw - var(--sp-6)));
  pointer-events:none;
}

.toast{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-4);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  font-size:var(--fs-sm);
  color:var(--ink);
  pointer-events:auto;
  animation:slide-in-start .4s var(--ease) both;
}

.toast.is-leaving{animation:fade-out .28s var(--ease) both}

.toast__icon{flex-shrink:0;display:flex;margin-block-start:2px}
.toast__body{flex:1 1 auto;min-inline-size:0}
.toast__title{font-weight:var(--fw-bold);color:var(--navy-800);margin-block-end:2px}
.toast__close{flex-shrink:0;color:var(--muted);display:grid;place-items:center;inline-size:26px;block-size:26px;border-radius:var(--r-sm)}
.toast__close:hover{background:var(--cream-200);color:var(--ink)}

.toast--success{border-inline-start:3px solid var(--ok)}
.toast--success .toast__icon{color:var(--ok)}
.toast--error{border-inline-start:3px solid var(--danger)}
.toast--error .toast__icon{color:var(--danger)}
.toast--warning{border-inline-start:3px solid var(--warn)}
.toast--warning .toast__icon{color:var(--warn)}
.toast--info{border-inline-start:3px solid var(--info)}
.toast--info .toast__icon{color:var(--info)}

@media (max-width:560px){
  .toast-stack{
    inset-inline:var(--sp-3);
    inline-size:auto;
  }
}

/* =====================================================================
   7) الجداول
   ===================================================================== */

.table-wrap{
  inline-size:100%;
  overflow-x:auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
  -webkit-overflow-scrolling:touch;
}

.table{
  inline-size:100%;
  min-inline-size:640px;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--fs-sm);
}

.table thead th{
  position:sticky;
  inset-block-start:0;
  z-index:1;
  background:var(--violet-50);
  color:var(--navy-800);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  padding:var(--sp-4);
  text-align:start;
  white-space:nowrap;
  border-block-end:1px solid var(--line);
}

.table tbody td{
  padding:var(--sp-4);
  border-block-end:1px solid var(--line);
  color:var(--ink-soft);
  vertical-align:middle;
  line-height:1.6;
}

.table tbody tr:last-child td{border-block-end:0}

/* صفوف مخطّطة */
.table tbody tr:nth-child(even){background:var(--cream-50)}

.table tbody tr{transition:background-color var(--dur-1) var(--ease)}

.table tbody tr:hover{background:var(--violet-50)}

.table tbody tr.is-selected{background:var(--violet-100)}

/* خلية العنوان الرئيسية في الصف */
.table__primary{
  font-weight:var(--fw-bold);
  color:var(--navy-800);
}

.table__primary a{color:var(--navy-800)}
.table__primary a:hover{color:var(--violet-600)}

.table__sub{
  display:block;
  font-size:var(--fs-xs);
  color:var(--muted);
  font-weight:var(--fw-regular);
  margin-block-start:2px;
}

/* عمود الإجراءات */
.table__actions{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  justify-content:flex-end;
  white-space:nowrap;
}

.table__actions .btn{--btn-h:34px;--btn-px:var(--sp-3);--btn-fs:var(--fs-xs)}
.table__actions .btn--icon{inline-size:34px}

/* رأس قابل للترتيب */
.table__sort{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  color:inherit;
}

.table__sort:hover{color:var(--violet-600);text-decoration:none}
.table__sort svg[data-icon]{inline-size:14px;block-size:14px;opacity:.5}
.table__sort.is-asc svg[data-icon],
.table__sort.is-desc svg[data-icon]{opacity:1;color:var(--violet-500)}
.table__sort.is-desc svg[data-icon]{transform:rotate(180deg)}

/* عمود اختيار مضغوط */
.table__check{inline-size:44px}

/* شريط أدوات فوق الجدول */
.table-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border-block-end:1px solid var(--line);
  background:var(--white);
}

.table-toolbar__grow{flex:1 1 240px;min-inline-size:0}

/* جدول مضغوط */
.table--compact thead th,
.table--compact tbody td{padding:var(--sp-3)}

/* =====================================================================
   8) التنقل
   ===================================================================== */

.nav{
  display:flex;
  align-items:center;
  gap:var(--sp-1);
}

.nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--ink-soft);
  border-radius:var(--r-sm);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}

.nav__link svg[data-icon]{inline-size:17px;block-size:17px;opacity:.75}

.nav__link:hover{color:var(--violet-700);background:var(--violet-50);text-decoration:none}

/* الخط السفلي المتدرّج للرابط النشط */
.nav__link::after{
  content:'';
  position:absolute;
  inset-block-end:2px;
  inset-inline-start:var(--sp-3);
  inline-size:0;
  block-size:2.5px;
  border-radius:var(--r-pill);
  background-image:var(--grad-line);
  transition:inline-size var(--dur-3) var(--ease);
}

.nav__link.is-active{color:var(--navy-800);font-weight:var(--fw-bold);background:transparent}

.nav__link.is-active::after{inline-size:calc(100% - var(--sp-3) * 2)}

.nav__link.is-active svg[data-icon]{opacity:1;color:var(--violet-500)}

/* --- 8.1 القائمة المنسدلة --- */

.dropdown{position:relative;display:inline-flex}

.dropdown__toggle{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  cursor:pointer;
}

.dropdown__toggle svg[data-icon='chevron-down']{
  transition:transform var(--dur-2) var(--ease);
  inline-size:15px;
  block-size:15px;
}

.dropdown.is-open .dropdown__toggle svg[data-icon='chevron-down']{transform:rotate(180deg)}

.dropdown__menu{
  position:absolute;
  inset-block-start:calc(100% + 10px);
  inset-inline-start:0;
  z-index:var(--z-dropdown);
  min-inline-size:230px;
  padding:var(--sp-2);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    visibility var(--dur-2);
}

.dropdown__menu--end{inset-inline-start:auto;inset-inline-end:0}

.dropdown.is-open > .dropdown__menu,
.dropdown__menu.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.dropdown__item{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  inline-size:100%;
  padding:var(--sp-3);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--ink-soft);
  border-radius:var(--r-sm);
  text-decoration:none;
  transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}

.dropdown__item svg[data-icon]{inline-size:18px;block-size:18px;color:var(--muted)}

.dropdown__item:hover{
  background:var(--violet-50);
  color:var(--violet-700);
  text-decoration:none;
}

.dropdown__item:hover svg[data-icon]{color:var(--violet-500)}

.dropdown__item.is-active{background:var(--violet-100);color:var(--violet-700)}

.dropdown__item--danger{color:var(--danger)}
.dropdown__item--danger:hover{background:var(--danger-soft);color:var(--danger-ink)}
.dropdown__item--danger svg[data-icon]{color:var(--danger)}

.dropdown__sep{
  block-size:1px;
  background:var(--line);
  margin:var(--sp-2) var(--sp-1);
}

.dropdown__head{
  padding:var(--sp-3);
  border-block-end:1px solid var(--line);
  margin-block-end:var(--sp-2);
}

.dropdown__head strong{display:block;color:var(--navy-800);font-size:var(--fs-sm)}
.dropdown__head span{display:block;color:var(--muted);font-size:var(--fs-xs)}

/* --- 8.2 مسار التنقّل --- */

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--muted);
  list-style:none;
  padding:0;
  margin:0;
}

.breadcrumbs li{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0;
}

.breadcrumbs li:not(:last-child)::after{
  content:'';
  inline-size:5px;
  block-size:5px;
  border-radius:50%;
  background:var(--violet-300);
  flex-shrink:0;
}

.breadcrumbs a{color:var(--ink-soft);text-decoration:none}
.breadcrumbs a:hover{color:var(--violet-600);text-decoration:underline}

.breadcrumbs [aria-current='page']{color:var(--navy-800);font-weight:var(--fw-medium)}

/* فوق الخلفيات الداكنة */
.breadcrumbs--on-dark{color:rgba(250,247,241,.6)}
.breadcrumbs--on-dark a{color:rgba(250,247,241,.82)}
.breadcrumbs--on-dark a:hover{color:var(--white)}
.breadcrumbs--on-dark [aria-current='page']{color:var(--white)}
.breadcrumbs--on-dark li:not(:last-child)::after{background:rgba(255,255,255,.35)}

/* =====================================================================
   9) الصور الرمزية والإحصاءات
   ===================================================================== */

.avatar{
  position:relative;
  display:inline-grid;
  place-items:center;
  inline-size:44px;
  block-size:44px;
  flex-shrink:0;
  border-radius:50%;
  overflow:hidden;
  background-image:var(--grad-brand);
  color:var(--white);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-base);
  line-height:1;
  user-select:none;
  box-shadow:0 0 0 2px var(--white),0 2px 8px rgba(16,27,79,.14);
}

.avatar img{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  border-radius:50%;
}

.avatar--sm{inline-size:32px;block-size:32px;font-size:var(--fs-xs)}
.avatar--lg{inline-size:64px;block-size:64px;font-size:var(--fs-lg)}
.avatar--xl{inline-size:96px;block-size:96px;font-size:var(--fs-2xl)}

.avatar--square{border-radius:var(--r-md)}
.avatar--square img{border-radius:var(--r-md)}

/* مؤشّر حالة صغير */
.avatar__status{
  position:absolute;
  inset-block-end:0;
  inset-inline-end:0;
  inline-size:11px;
  block-size:11px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 2px var(--white);
}

/* مجموعة صور متراكبة */
.avatar-stack{display:inline-flex;align-items:center}
.avatar-stack .avatar:not(:first-child){margin-inline-start:-12px}

/* --- 9.1 الإحصاءات --- */

.stat{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  min-inline-size:0;
}

.stat__value{
  font-family:var(--font-display);
  font-size:var(--fs-3xl);
  font-weight:var(--fw-bold);
  line-height:1.05;
  color:var(--navy-800);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

.stat__label{
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.5;
}

.stat__icon{
  display:grid;
  place-items:center;
  inline-size:48px;
  block-size:48px;
  border-radius:var(--r-md);
  background:var(--violet-100);
  color:var(--violet-600);
  margin-block-end:var(--sp-2);
}

.stat__icon svg[data-icon]{inline-size:24px;block-size:24px}

.stat__delta{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-1);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
}

.stat__delta--up{color:var(--ok)}
.stat__delta--down{color:var(--danger)}

.stat--center{align-items:center;text-align:center}
.stat--center .stat__icon{margin-inline:auto}

/* إحصاءات فوق الداكن */
.stat--on-dark .stat__value{color:var(--white)}
.stat--on-dark .stat__label{color:rgba(250,247,241,.7)}
.stat--on-dark .stat__icon{background:rgba(255,255,255,.1);color:var(--violet-200)}

/* شريط إحصاءات كامل */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-5);
  padding:var(--sp-6);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}

.stats-bar > .stat:not(:last-child){
  border-inline-end:1px solid var(--line);
  padding-inline-end:var(--sp-5);
}

@media (max-width:768px){
  .stats-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);padding:var(--sp-5)}
  .stats-bar > .stat:not(:last-child){border-inline-end:0;padding-inline-end:0}
}

@media (max-width:400px){
  .stats-bar{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   10) التبويبات
   ===================================================================== */

.tabs{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--sp-1);
  border-block-end:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
}

.tabs::-webkit-scrollbar{display:none}

.tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--muted);
  background:none;
  border:0;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  flex-shrink:0;
  transition:color var(--dur-2) var(--ease);
}

.tab svg[data-icon]{inline-size:17px;block-size:17px}

.tab:hover{color:var(--violet-600);text-decoration:none}

.tab.is-active{color:var(--navy-800);font-weight:var(--fw-bold)}

/* المؤشّر: يستخدم .tabs__indicator إن ضُبط بجافاسكربت، وإلا ::after احتياطي */
.tab::after{
  content:'';
  position:absolute;
  inset-block-end:-1px;
  inset-inline:var(--sp-3);
  block-size:3px;
  border-radius:var(--r-pill) var(--r-pill) 0 0;
  background-image:var(--grad-line);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--dur-3) var(--ease);
}

.tab.is-active::after{transform:scaleX(1)}

/* مؤشّر متحرك واحد — يضبط JS المتغيّرين --tab-x و --tab-w */
.tabs__indicator{
  position:absolute;
  inset-block-end:-1px;
  inset-inline-start:0;
  block-size:3px;
  inline-size:var(--tab-w,0px);
  transform:translateX(var(--tab-x,0px));
  border-radius:var(--r-pill) var(--r-pill) 0 0;
  background-image:var(--grad-line);
  transition:transform var(--dur-3) var(--ease),inline-size var(--dur-3) var(--ease);
  pointer-events:none;
}

/* عند وجود مؤشّر مستقل نخفي الاحتياطي */
.tabs:has(.tabs__indicator) .tab::after{display:none}

.tab__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-inline-size:20px;
  block-size:20px;
  padding-inline:6px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  border-radius:var(--r-pill);
  background:var(--cream-200);
  color:var(--ink-soft);
}

.tab.is-active .tab__count{background:var(--violet-100);color:var(--violet-700)}

/* تبويبات بشكل حبّات (أيام الفعالية) */
.tabs--pills{border-block-end:0;gap:var(--sp-2)}
.tabs--pills .tab{
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--white);
  padding:var(--sp-3) var(--sp-5);
}
.tabs--pills .tab::after{display:none}
.tabs--pills .tab.is-active{
  color:var(--white);
  background-image:var(--grad-brand);
  border-color:transparent;
  box-shadow:0 6px 16px rgba(91,63,209,.24);
}
.tabs--pills .tab.is-active .tab__count{background:rgba(255,255,255,.22);color:var(--white)}

.tab-panel[hidden]{display:none}
.tab-panel{animation:fade-up .4s var(--ease) both}

/* =====================================================================
   11) الأكورديون
   ===================================================================== */

.accordion{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

.accordion__item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}

.accordion__item.is-open{
  border-color:var(--violet-300);
  box-shadow:var(--shadow-sm);
}

.accordion__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  inline-size:100%;
  padding:var(--sp-4) var(--sp-5);
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  text-align:start;
  cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}

.accordion__head:hover{background:var(--violet-50);color:var(--violet-700)}

.accordion__icon{
  flex-shrink:0;
  display:grid;
  place-items:center;
  inline-size:30px;
  block-size:30px;
  border-radius:50%;
  background:var(--violet-100);
  color:var(--violet-600);
  transition:transform var(--dur-3) var(--ease),background-color var(--dur-2) var(--ease);
}

.accordion__icon svg[data-icon]{inline-size:16px;block-size:16px}

.accordion__item.is-open .accordion__icon{
  transform:rotate(180deg);
  background-image:var(--grad-violet);
  color:var(--white);
}

.accordion__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-3) var(--ease);
}

.accordion__item.is-open .accordion__panel{grid-template-rows:1fr}

.accordion__panel > div{overflow:hidden}

.accordion__body{
  padding:0 var(--sp-5) var(--sp-5);
  color:var(--ink-soft);
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
}

/* نسخة تعتمد <details> بلا جافاسكربت */
.accordion__item[open] .accordion__icon{transform:rotate(180deg)}
.accordion__head::-webkit-details-marker{display:none}
.accordion__head::marker{content:''}

/* =====================================================================
   12) النافذة المنبثقة واللوحة المنزلقة
   ===================================================================== */

.modal__backdrop{
  position:fixed;
  inset:0;
  z-index:var(--z-backdrop);
  background:rgba(7,12,38,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur-2) var(--ease),visibility var(--dur-2);
}

.modal__backdrop.is-open{opacity:1;visibility:visible}

.modal{
  position:fixed;
  inset-block-start:50%;
  inset-inline-start:50%;
  z-index:var(--z-modal);
  inline-size:min(560px,calc(100vw - var(--sp-6)));
  max-block-size:calc(100vh - var(--sp-8));
  display:flex;
  flex-direction:column;
  background:var(--white);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translate(50%,-50%) scale(.95);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-3) var(--ease),visibility var(--dur-2);
}

html[dir='ltr'] .modal{transform:translate(-50%,-50%) scale(.95)}

.modal.is-open{
  opacity:1;
  visibility:visible;
  transform:translate(50%,-50%) scale(1);
}

html[dir='ltr'] .modal.is-open{transform:translate(-50%,-50%) scale(1)}

.modal--lg{inline-size:min(860px,calc(100vw - var(--sp-6)))}
.modal--sm{inline-size:min(420px,calc(100vw - var(--sp-6)))}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-5);
  border-block-end:1px solid var(--line);
  flex-shrink:0;
}

.modal__title{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  margin:0;
}

.modal__close{
  display:grid;
  place-items:center;
  inline-size:36px;
  block-size:36px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--cream-100);
  color:var(--ink-soft);
  transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}

.modal__close:hover{background:var(--danger-soft);color:var(--danger)}

.modal__body{
  padding:var(--sp-5);
  overflow-y:auto;
  flex:1 1 auto;
  color:var(--ink-soft);
  line-height:var(--lh-body);
}

.modal__foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-block-start:1px solid var(--line);
  background:var(--cream-50);
  flex-shrink:0;
  flex-wrap:wrap;
}

@media (max-width:560px){
  .modal{
    inset-block-start:auto;
    inset-block-end:0;
    inset-inline-start:0;
    inline-size:100%;
    max-block-size:88vh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translateY(100%);
  }
  .modal.is-open{transform:translateY(0)}
  html[dir='ltr'] .modal{transform:translateY(100%)}
  html[dir='ltr'] .modal.is-open{transform:translateY(0)}
  .modal__foot .btn{flex:1 1 auto}
}

/* --- 12.1 اللوحة المنزلقة (تنزلق من جهة البداية = اليمين في RTL) --- */

.drawer{
  position:fixed;
  inset-block:0;
  inset-inline-start:0;
  z-index:var(--z-drawer);
  inline-size:min(430px,92vw);
  display:flex;
  flex-direction:column;
  background:var(--white);
  box-shadow:var(--shadow-lg);
  transform:translateX(100%);
  transition:transform var(--dur-3) var(--ease);
  overflow:hidden;
}

html[dir='ltr'] .drawer{transform:translateX(-100%)}

.drawer.is-open{transform:translateX(0)}

/* لوحة عريضة (تفاصيل الفعالية على الخريطة) */
.drawer--wide{inline-size:min(520px,96vw)}

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-block-end:1px solid var(--line);
  flex-shrink:0;
}

.drawer__title{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  margin:0;
  min-inline-size:0;
}

.drawer__close{
  display:grid;
  place-items:center;
  inline-size:36px;
  block-size:36px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--cream-100);
  color:var(--ink-soft);
  transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}

.drawer__close:hover{background:var(--danger-soft);color:var(--danger)}

.drawer__body{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--sp-5);
}

.drawer__body--flush{padding:0}

.drawer__foot{
  padding:var(--sp-4) var(--sp-5);
  padding-block-end:max(var(--sp-4),env(safe-area-inset-bottom));
  border-block-start:1px solid var(--line);
  background:var(--cream-50);
  display:flex;
  gap:var(--sp-3);
  flex-shrink:0;
}

.drawer__foot .btn{flex:1 1 auto}

@media (max-width:560px){
  .drawer{
    inset-inline:0;
    inset-block-start:auto;
    inline-size:100%;
    block-size:min(88vh,100%);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translateY(100%);
  }
  html[dir='ltr'] .drawer{transform:translateY(100%)}
  .drawer.is-open{transform:translateY(0)}
  /* مقبض سحب علوي */
  .drawer__head::before{
    content:'';
    position:absolute;
    inset-block-start:8px;
    inset-inline-start:50%;
    transform:translateX(50%);
    inline-size:44px;
    block-size:4px;
    border-radius:var(--r-pill);
    background:var(--cream-300);
  }
  .drawer__head{position:relative;padding-block-start:var(--sp-5)}
}

/* منع تمرير الصفحة خلف الطبقات المفتوحة */
body.is-locked{overflow:hidden}

/* =====================================================================
   13) التلميح
   ===================================================================== */

.tooltip{position:relative;display:inline-flex}

.tooltip::after{
  content:attr(data-tip);
  position:absolute;
  inset-block-end:calc(100% + 10px);
  inset-inline-start:50%;
  transform:translateX(50%) translateY(4px);
  z-index:var(--z-tooltip);
  padding:var(--sp-2) var(--sp-3);
  background:var(--navy-900);
  color:var(--cream-100);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  line-height:1.5;
  border-radius:var(--r-sm);
  white-space:nowrap;
  max-inline-size:260px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  box-shadow:var(--shadow-md);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility var(--dur-2);
}

html[dir='ltr'] .tooltip::after{transform:translateX(-50%) translateY(4px)}

.tooltip::before{
  content:'';
  position:absolute;
  inset-block-end:calc(100% + 4px);
  inset-inline-start:50%;
  transform:translateX(50%);
  z-index:var(--z-tooltip);
  border:6px solid transparent;
  border-block-start-color:var(--navy-900);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-2) var(--ease),visibility var(--dur-2);
}

html[dir='ltr'] .tooltip::before{transform:translateX(-50%)}

.tooltip:hover::after,
.tooltip:focus-visible::after,
.tooltip:hover::before,
.tooltip:focus-visible::before{opacity:1;visibility:visible}

.tooltip:hover::after,
.tooltip:focus-visible::after{transform:translateX(50%) translateY(0)}

html[dir='ltr'] .tooltip:hover::after{transform:translateX(-50%) translateY(0)}

/* تلميح أسفل العنصر */
.tooltip--bottom::after{inset-block-start:calc(100% + 10px);inset-block-end:auto}
.tooltip--bottom::before{
  inset-block-start:calc(100% + 4px);
  inset-block-end:auto;
  border-block-start-color:transparent;
  border-block-end-color:var(--navy-900);
}

/* =====================================================================
   14) شريط التقدّم والهياكل العظمية
   ===================================================================== */

.progress{
  position:relative;
  inline-size:100%;
  block-size:8px;
  border-radius:var(--r-pill);
  background:var(--cream-300);
  overflow:hidden;
}

.progress__bar{
  block-size:100%;
  inline-size:var(--value,0%);
  border-radius:var(--r-pill);
  background-image:var(--grad-brand);
  background-size:200% 100%;
  transition:inline-size var(--dur-4) var(--ease);
}

.progress--lg{block-size:12px}
.progress--sm{block-size:5px}

.progress--ok .progress__bar{background:var(--ok)}
.progress--warn .progress__bar{background:var(--warn)}
.progress--danger .progress__bar{background:var(--danger)}

.progress__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  font-size:var(--fs-xs);
  color:var(--muted);
  margin-block-end:var(--sp-2);
}

.progress__label strong{color:var(--navy-800);font-variant-numeric:tabular-nums}

/* --- 14.1 الهياكل العظمية --- */

.skeleton{
  position:relative;
  overflow:hidden;
  background:var(--cream-200);
  border-radius:var(--r-sm);
  color:transparent !important;
  user-select:none;
  pointer-events:none;
}

.skeleton::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--grad-sheen);
  transform:translateX(-100%);
  animation:shimmer 1.5s infinite;
}

/* في RTL تمرّ اللمعة من اليمين إلى اليسار */
html[dir='rtl'] .skeleton::after{
  transform:translateX(100%);
  animation-name:shimmer-rtl;
}

.skeleton--text{block-size:.9em;margin-block:.35em;border-radius:var(--r-pill)}
.skeleton--title{block-size:1.4em;inline-size:65%;border-radius:var(--r-sm)}
.skeleton--line-70{inline-size:70%}
.skeleton--line-45{inline-size:45%}
.skeleton--media{aspect-ratio:16/10;inline-size:100%;border-radius:var(--r-md)}
.skeleton--avatar{inline-size:44px;block-size:44px;border-radius:50%}
.skeleton--chip{block-size:40px;inline-size:110px;border-radius:var(--r-pill)}
.skeleton--card{block-size:300px;border-radius:var(--r-lg)}

/* =====================================================================
   15) الفواصل والحالات الفارغة
   ===================================================================== */

.divider{
  display:block;
  block-size:1px;
  inline-size:100%;
  background:var(--line);
  border:0;
  margin-block:var(--sp-5);
}

.divider--gradient{
  block-size:2px;
  background-image:linear-gradient(90deg,transparent,var(--violet-300),transparent);
}

.divider--dashed{
  background:none;
  border-block-start:1px dashed var(--line);
  block-size:0;
}

/* فاصل بعنوان في المنتصف */
.divider--label{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  background:none;
  block-size:auto;
  font-size:var(--fs-sm);
  color:var(--muted);
}

.divider--label::before,
.divider--label::after{
  content:'';
  flex:1 1 auto;
  block-size:1px;
  background:var(--line);
}

.divider--vertical{
  inline-size:1px;
  block-size:auto;
  align-self:stretch;
  margin-block:0;
  margin-inline:var(--sp-3);
}

/* --- 15.1 الحالة الفارغة --- */

.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  text-align:center;
  padding:var(--sp-8) var(--sp-5);
  background:var(--white);
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
  color:var(--ink-soft);
}

.empty-state__icon{
  display:grid;
  place-items:center;
  inline-size:78px;
  block-size:78px;
  border-radius:50%;
  background:var(--violet-50);
  color:var(--violet-400);
  margin-block-end:var(--sp-2);
}

.empty-state__icon svg[data-icon]{inline-size:34px;block-size:34px}

.empty-state__img{inline-size:150px;max-inline-size:60%;margin-block-end:var(--sp-2)}

.empty-state__title{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  margin:0;
}

.empty-state__text{
  font-size:var(--fs-sm);
  color:var(--muted);
  max-inline-size:44ch;
  margin:0;
  line-height:var(--lh-body);
}

.empty-state__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  justify-content:center;
  margin-block-start:var(--sp-3);
}

.empty-state--sm{padding:var(--sp-6) var(--sp-4)}
.empty-state--flat{background:none;border:0}

/* =====================================================================
   16) ترقيم الصفحات
   (هذه هي الأصناف المتفق عليها لمخرجات Paginator::render)
   ===================================================================== */

.pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  list-style:none;
  padding:0;
  margin-block-start:var(--sp-7);
}

.pagination li{margin:0}

.pagination__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  min-inline-size:44px;
  block-size:44px;
  padding-inline:var(--sp-3);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  text-decoration:none;
  transition:
    color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.pagination__link svg[data-icon]{inline-size:17px;block-size:17px}

.pagination__link:hover{
  color:var(--violet-700);
  border-color:var(--violet-300);
  background:var(--violet-50);
  text-decoration:none;
  transform:translateY(-2px);
}

.pagination__link.is-active{
  color:var(--white);
  background-image:var(--grad-brand);
  border-color:transparent;
  box-shadow:0 6px 16px rgba(91,63,209,.26);
  pointer-events:none;
}

.pagination__link.is-disabled{
  opacity:.42;
  pointer-events:none;
  background:var(--cream-100);
}

/* أزرار السابق/التالي بنص */
.pagination__link--nav{padding-inline:var(--sp-4)}

/* فجوة "…" */
.pagination__gap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-inline-size:32px;
  block-size:44px;
  color:var(--muted);
  font-weight:var(--fw-bold);
  user-select:none;
}

/* سطر "عرض ١–١٢ من ٨٤" */
.pagination__info{
  text-align:center;
  font-size:var(--fs-sm);
  color:var(--muted);
  margin-block-start:var(--sp-3);
}

@media (max-width:560px){
  .pagination__link--num{display:none}
  .pagination__link--num.is-active,
  .pagination__link--num.is-edge{display:inline-flex}
}

/* =====================================================================
   17) العدّاد التنازلي
   ===================================================================== */

.countdown{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-3);
  inline-size:100%;
}

.countdown__cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:var(--sp-3) var(--sp-2);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
  min-inline-size:0;
}

.countdown__num{
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  line-height:1.1;
  color:var(--navy-800);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  direction:ltr;
}

.countdown__unit{
  font-size:var(--fs-xs);
  color:var(--muted);
  line-height:1.4;
  white-space:nowrap;
}

/* نسخة على خلفية داكنة/تدرّج */
.countdown--on-dark .countdown__cell{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:none;
}

.countdown--on-dark .countdown__num{color:var(--white)}
/* ‎.7 كانت تعطي 3.3:1 فوق بطاقة العدّاد؛ ‎.95 ترفعها فوق 4.5:1 (A11Y-15) */
.countdown--on-dark .countdown__unit{color:rgba(255,255,255,.95)}

/* نسخة بارزة بتدرّج الهوية */
.countdown--brand .countdown__cell{
  background-image:var(--grad-brand);
  border-color:transparent;
  box-shadow:0 8px 20px rgba(91,63,209,.2);
}

.countdown--brand .countdown__num{color:var(--white)}
.countdown--brand .countdown__unit{color:rgba(255,255,255,.95)}

.countdown--sm .countdown__num{font-size:var(--fs-lg)}
.countdown--sm .countdown__cell{padding:var(--sp-2)}

/* حالة انتهاء العدّاد */
.countdown.is-ended .countdown__num{color:var(--muted)}

/* =====================================================================
   18) شريط الأخبار العاجلة (Ticker)
   ===================================================================== */

.ticker{
  position:relative;
  display:flex;
  align-items:stretch;
  background:var(--navy-900);
  color:var(--cream-100);
  font-size:var(--fs-sm);
  overflow:hidden;
  block-size:46px;
}

/* البطاقة التعريفية "عاجل" */
.ticker__label{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding-inline:var(--sp-4);
  background:var(--danger);
  color:var(--white);
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  white-space:nowrap;
  flex-shrink:0;
  z-index:2;
  position:relative;
}

.ticker__label::before{
  content:'';
  inline-size:8px;
  block-size:8px;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation:pulse-dot-light 1.6s var(--ease) infinite;
  flex-shrink:0;
}

/* نافذة العرض: direction:ltr مقصود — يثبّت بداية المسار عند الطرف الأيسر
   فتدخل العناصر من جهة اليمين (من عند شارة "عاجل") وتخرج من اليسار،
   وهو الاتجاه الصحيح لقراءة العربية بينما يبقى كل عنصر معزولاً RTL.
   القناع يلطّف طرفَي الدخول والخروج. */
.ticker__viewport{
  position:relative;
  flex:1 1 auto;
  overflow:hidden;
  min-inline-size:0;
  direction:ltr;
  mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 24px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 24px),transparent 100%);
}

/* المسار يحتوي نسختين متطابقتين من .ticker__group (لتكرار لانهائي سلس) */
.ticker__track{
  display:flex;
  inline-size:max-content;
  animation:ticker-scroll 46s linear infinite;
  will-change:transform;
}

.ticker:hover .ticker__track,
.ticker__track:focus-within{animation-play-state:paused}

.ticker__group{display:flex;align-items:center;flex-shrink:0}

.ticker__item{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding-inline:var(--sp-5);
  color:var(--cream-100);
  text-decoration:none;
  white-space:nowrap;
  direction:rtl;
  unicode-bidi:isolate;
  block-size:46px;
  transition:color var(--dur-1) var(--ease);
}

.ticker__item:hover{color:var(--violet-200);text-decoration:none}

.ticker__item::after{
  content:'';
  inline-size:5px;
  block-size:5px;
  border-radius:50%;
  background:var(--violet-400);
  margin-inline-start:var(--sp-5);
  flex-shrink:0;
}

.ticker__time{
  font-size:var(--fs-xs);
  color:var(--violet-300);
  font-variant-numeric:tabular-nums;
}

/* نسخة فاتحة */
.ticker--light{background:var(--white);color:var(--ink);border-block-end:1px solid var(--line)}
.ticker--light .ticker__item{color:var(--ink-soft)}
.ticker--light .ticker__item:hover{color:var(--violet-600)}

@media (max-width:560px){
  .ticker__label span{display:none}
  .ticker__label{padding-inline:var(--sp-3)}
}

/* =====================================================================
   19) الخط الزمني (برنامج اليوم)
   ===================================================================== */

.timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  padding-inline-start:var(--sp-6);
  list-style:none;
  margin:0;
}

/* الخط العمودي */
.timeline::before{
  content:'';
  position:absolute;
  inset-block:6px 6px;
  inset-inline-start:7px;
  inline-size:2px;
  border-radius:var(--r-pill);
  background:linear-gradient(to bottom,var(--violet-400),var(--violet-200) 70%,transparent);
}

.timeline__item{
  position:relative;
  margin:0;
}

/* النقطة */
.timeline__item::before{
  content:'';
  position:absolute;
  inset-block-start:7px;
  inset-inline-start:calc(var(--sp-6) * -1 + 2px);
  inline-size:12px;
  block-size:12px;
  border-radius:50%;
  background:var(--white);
  border:2.5px solid var(--violet-500);
  z-index:1;
}

/* الفقرة الجارية الآن */
.timeline__item.is-now::before{
  background:var(--danger);
  border-color:var(--danger);
  box-shadow:0 0 0 0 rgba(214,69,80,.5);
  animation:pulse-dot 1.8s var(--ease) infinite;
}

.timeline__item.is-done::before{
  background:var(--cream-300);
  border-color:var(--cream-300);
}

.timeline__time{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--violet-600);
  font-variant-numeric:tabular-nums;
  margin-block-end:var(--sp-1);
}

.timeline__title{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  line-height:var(--lh-snug);
  margin:0 0 var(--sp-1);
}

.timeline__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm);
  color:var(--muted);
}

.timeline__meta svg[data-icon]{inline-size:15px;block-size:15px;color:var(--violet-400)}

.timeline__body{
  font-size:var(--fs-sm);
  color:var(--ink-soft);
  line-height:var(--lh-body);
  margin-block-start:var(--sp-2);
}

/* نسخة بطاقات */
.timeline--cards .timeline__item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}

.timeline--cards .timeline__item:hover{
  border-color:var(--violet-200);
  box-shadow:var(--shadow-sm);
}

.timeline--cards .timeline__item::before{inset-block-start:var(--sp-5)}

/* =====================================================================
   20) معرض الصور والعارض
   ===================================================================== */

.gallery-grid{
  columns:3;
  column-gap:var(--sp-4);
}

.gallery-grid > *{
  break-inside:avoid;
  margin-block-end:var(--sp-4);
  display:block;
}

.gallery-grid--2{columns:2}
.gallery-grid--4{columns:4}

@media (max-width:1024px){
  .gallery-grid--4{columns:3}
}

@media (max-width:768px){
  .gallery-grid,
  .gallery-grid--4{columns:2}
}

@media (max-width:480px){
  .gallery-grid,
  .gallery-grid--2,
  .gallery-grid--4{columns:1}
}

.gallery__item{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--cream-200);
  cursor:zoom-in;
  display:block;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease);
}

.gallery__item img{
  inline-size:100%;
  block-size:auto;
  display:block;
  transition:transform var(--dur-4) var(--ease);
}

.gallery__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.gallery__item:hover img{transform:scale(1.05)}

.gallery__item::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(7,12,38,.55),transparent 55%);
  opacity:0;
  transition:opacity var(--dur-3) var(--ease);
}

.gallery__item:hover::after{opacity:1}

.gallery__caption{
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  z-index:2;
  padding:var(--sp-4);
  color:var(--white);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
}

.gallery__item:hover .gallery__caption{opacity:1;transform:translateY(0)}

/* --- 20.1 العارض (Lightbox) --- */

.lightbox{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-5);
  background:rgba(7,12,38,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur-2) var(--ease),visibility var(--dur-2);
}

.lightbox.is-open{opacity:1;visibility:visible}

.lightbox__img{
  max-inline-size:min(1100px,92vw);
  max-block-size:82vh;
  inline-size:auto;
  block-size:auto;
  object-fit:contain;
  border-radius:var(--r-md);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:scale-in .35s var(--ease) both;
}

.lightbox__caption{
  position:absolute;
  inset-inline:0;
  inset-block-end:var(--sp-6);
  text-align:center;
  color:rgba(250,247,241,.85);
  font-size:var(--fs-sm);
  padding-inline:var(--sp-6);
}

.lightbox__close,
.lightbox__nav{
  position:absolute;
  display:grid;
  place-items:center;
  inline-size:48px;
  block-size:48px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:var(--white);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}

.lightbox__close{inset-block-start:var(--sp-5);inset-inline-end:var(--sp-5)}

.lightbox__nav--prev{inset-inline-end:var(--sp-5);inset-block-start:50%;transform:translateY(-50%)}
.lightbox__nav--next{inset-inline-start:var(--sp-5);inset-block-start:50%;transform:translateY(-50%)}

.lightbox__nav--prev:hover,
.lightbox__nav--next:hover{transform:translateY(-50%) scale(1.06)}

.lightbox__counter{
  position:absolute;
  inset-block-start:var(--sp-5);
  inset-inline-start:var(--sp-5);
  color:rgba(250,247,241,.75);
  font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.1);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-pill);
}

@media (max-width:560px){
  .lightbox__nav{inline-size:40px;block-size:40px}
  .lightbox__nav--prev{inset-inline-end:var(--sp-3)}
  .lightbox__nav--next{inset-inline-start:var(--sp-3)}
}

/* =====================================================================
   21) صفّ المشاركة
   ===================================================================== */

.share-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2);
}

.share-row__label{
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  margin-inline-end:var(--sp-2);
}

.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  inline-size:42px;
  block-size:42px;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--line);
  color:var(--ink-soft);
  transition:
    color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.share-btn svg[data-icon]{inline-size:19px;block-size:19px}

.share-btn:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:transparent;
  text-decoration:none;
}

.share-btn--twitter:hover{background:#0F1419;color:#fff}
.share-btn--whatsapp:hover{background:#25D366;color:#fff}
.share-btn--linkedin:hover{background:#0A66C2;color:#fff}
.share-btn--mail:hover{background:var(--navy-800);color:#fff}
.share-btn--copy:hover{background:var(--violet-500);color:#fff}
.share-btn--native:hover{background-image:var(--grad-brand);color:#fff}

/* تأكيد النسخ */
.share-btn.is-copied{
  background:var(--ok);
  border-color:var(--ok);
  color:#fff;
}

.share-btn--wide{
  inline-size:auto;
  padding-inline:var(--sp-4);
  border-radius:var(--r-pill);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
}

/* =====================================================================
   22) نص المقال (.prose)
   ===================================================================== */

.prose{
  max-inline-size:68ch;
  font-size:var(--fs-md);
  line-height:1.8;
  color:var(--ink-soft);
}

.prose > * + *{margin-block-start:var(--sp-4)}

.prose p{line-height:1.8}

.prose h2,
.prose h3,
.prose h4{
  font-family:var(--font-display);
  color:var(--navy-800);
  line-height:var(--lh-tight);
  margin-block-start:var(--sp-7);
  margin-block-end:var(--sp-3);
  scroll-margin-block-start:calc(var(--header-h) + var(--sp-5));
}

.prose h2{font-size:var(--fs-xl)}
.prose h3{font-size:var(--fs-lg)}
.prose h4{font-size:var(--fs-md)}

/* علامة صغيرة قبل h2 */
.prose h2::before{
  content:'';
  display:block;
  inline-size:44px;
  block-size:3px;
  border-radius:var(--r-pill);
  background-image:var(--grad-line);
  margin-block-end:var(--sp-3);
}

/* سطر الافتتاحية */
.prose .lead,
.prose > p:first-of-type.lead{
  font-family:var(--font-serif);
  font-size:var(--fs-lg);
  line-height:1.9;
  color:var(--navy-700);
}

.prose a{
  color:var(--violet-600);
  font-weight:var(--fw-medium);
  text-decoration:none;
  background-image:linear-gradient(90deg,var(--violet-500),var(--violet-300));
  background-repeat:no-repeat;
  background-size:100% 1.5px;
  background-position:0 100%;
  padding-block-end:1px;
  transition:background-size var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}

.prose a:hover{
  color:var(--violet-700);
  background-size:100% 3px;
  text-decoration:none;
}

.prose ul,
.prose ol{padding-inline-start:0;list-style:none}

.prose li{
  position:relative;
  padding-inline-start:var(--sp-5);
  margin-block-end:var(--sp-3);
  line-height:1.8;
}

/* نقطة مخصّصة */
.prose ul > li::before{
  content:'';
  position:absolute;
  inset-block-start:.68em;
  inset-inline-start:0;
  inline-size:8px;
  block-size:8px;
  border-radius:50%;
  background-image:var(--grad-violet);
}

.prose ol{counter-reset:prose-ol}

.prose ol > li{counter-increment:prose-ol}

.prose ol > li::before{
  content:counter(prose-ol);
  position:absolute;
  inset-block-start:.15em;
  inset-inline-start:0;
  inline-size:22px;
  block-size:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--violet-100);
  color:var(--violet-700);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  font-family:var(--font-display);
}

.prose ol > li{padding-inline-start:calc(var(--sp-5) + 8px)}

.prose blockquote{
  font-family:var(--font-serif);
  font-size:var(--fs-lg);
  line-height:1.9;
  color:var(--navy-700);
  border-inline-start:4px solid var(--violet-500);
  padding:var(--sp-2) var(--sp-5);
  margin-block:var(--sp-6);
  background:var(--violet-50);
  border-radius:0 var(--r-md) var(--r-md) 0;
}

html[dir='ltr'] .prose blockquote{border-radius:var(--r-md) 0 0 var(--r-md)}

.prose blockquote p{margin:0}

.prose blockquote cite{
  display:block;
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  font-style:normal;
  color:var(--muted);
  margin-block-start:var(--sp-3);
}

.prose blockquote cite::before{content:'— '}

.prose img,
.prose figure img{
  inline-size:100%;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  margin-block:var(--sp-5);
}

.prose figure{margin-block:var(--sp-6)}
.prose figure img{margin-block:0}

.prose figcaption{
  text-align:center;
  font-size:var(--fs-sm);
  color:var(--muted);
  margin-block-start:var(--sp-3);
}

.prose hr{
  margin-block:var(--sp-7);
  background:none;
  block-size:2px;
  background-image:linear-gradient(90deg,transparent,var(--violet-300),transparent);
}

.prose table{
  inline-size:100%;
  font-size:var(--fs-sm);
  margin-block:var(--sp-5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}

.prose th{background:var(--violet-50);color:var(--navy-800);padding:var(--sp-3)}
.prose td{border-block-start:1px solid var(--line);padding:var(--sp-3)}

.prose strong{color:var(--navy-800)}

.prose--wide{max-inline-size:none}

/* --- 22.1 شريط تقدّم القراءة --- */

.reading-progress{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:var(--z-max);
  block-size:3px;
  background:transparent;
  pointer-events:none;
}

.reading-progress__bar{
  block-size:100%;
  inline-size:var(--progress,0%);
  background-image:var(--grad-brand);
  box-shadow:0 0 12px rgba(129,57,214,.5);
  transition:inline-size .1s linear;
  transform-origin:right center;
}

html[dir='ltr'] .reading-progress__bar{transform-origin:left center}

/* =====================================================================
   23) الشعار والعلامة
   ===================================================================== */

.logo{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  text-decoration:none;
  color:inherit;
  flex-shrink:0;
  transition:opacity var(--dur-2) var(--ease);
}

.logo:hover{opacity:.9;text-decoration:none}

.logo img,
.logo svg{
  block-size:42px;
  inline-size:auto;
  display:block;
  /* الشعار شفاف بطبيعته — لا مستطيل كريمي خلفه فوق الأسطح الداكنة (VIS-02) */
  background:transparent;
}

.logo--sm img,
.logo--sm svg{block-size:34px}

.logo--lg img,
.logo--lg svg{block-size:54px}

/* الرمز وحده (بدون الكلمة) */
.brand-mark{
  display:inline-grid;
  place-items:center;
  inline-size:44px;
  block-size:44px;
  flex-shrink:0;
  border-radius:var(--r-md);
  background-image:var(--grad-brand);
  color:var(--white);
  box-shadow:0 6px 18px rgba(91,63,209,.24);
  overflow:hidden;
}

.brand-mark img,
.brand-mark svg{
  inline-size:74%;
  block-size:74%;
  display:block;
}

.brand-mark--sm{inline-size:34px;block-size:34px;border-radius:var(--r-sm)}
.brand-mark--lg{inline-size:64px;block-size:64px;border-radius:var(--r-lg)}
.brand-mark--round{border-radius:50%}

/* الكلمة النصّية بجانب الرمز */
.logo__word{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-inline-size:0;
}

.logo__word-ar{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
}

.logo__word-en{
  font-size:10px;
  font-weight:var(--fw-medium);
  color:var(--muted);
  direction:ltr;
  text-align:start;
}

.logo--on-dark .logo__word-ar{color:var(--white)}
.logo--on-dark .logo__word-en{color:rgba(250,247,241,.6)}

@media (max-width:560px){
  .logo img,
  .logo svg{block-size:36px}
  .logo__word-ar{font-size:var(--fs-base)}
}

/* =====================================================================
   24) رأس الموقع
   ===================================================================== */

.site-header{
  position:sticky;
  inset-block-start:0;
  z-index:var(--z-header);
  inline-size:100%;
  background:transparent;
  border-block-end:1px solid transparent;
  transition:
    background-color var(--dur-3) var(--ease),
    box-shadow var(--dur-3) var(--ease),
    border-color var(--dur-3) var(--ease),
    backdrop-filter var(--dur-3) var(--ease);
}

/* الحالة الافتراضية على الصفحات الفاتحة */
.site-header--solid{
  background:rgba(250,247,241,.82);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-block-end-color:var(--line);
}

/* عند التمرير */
.site-header.is-scrolled{
  background:rgba(253,251,247,.9);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border-block-end-color:var(--line);
  box-shadow:0 4px 24px rgba(16,27,79,.07);
}

.site-header__inner{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  block-size:var(--header-h);
  min-inline-size:0;
}

.site-header__nav{
  display:flex;
  align-items:center;
  gap:var(--sp-1);
  margin-inline-start:var(--sp-4);
  flex:1 1 auto;
  min-inline-size:0;
}

.site-header__actions{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-shrink:0;
  margin-inline-start:auto;
}

/* زر القائمة على الجوال */
.site-header__burger{
  display:none;
  place-items:center;
  inline-size:44px;
  block-size:44px;
  flex-shrink:0;
  border-radius:var(--r-sm);
  color:var(--navy-800);
  background:var(--white);
  border:1px solid var(--line);
}

.site-header__burger:hover{background:var(--violet-50);color:var(--violet-700)}

/* رأس شفاف فوق هيرو داكن */
.site-header--on-dark:not(.is-scrolled) .nav__link{color:rgba(250,247,241,.82)}
.site-header--on-dark:not(.is-scrolled) .nav__link:hover{color:var(--white);background:rgba(255,255,255,.1)}
.site-header--on-dark:not(.is-scrolled) .nav__link.is-active{color:var(--white)}
.site-header--on-dark:not(.is-scrolled) .logo__word-ar{color:var(--white)}
.site-header--on-dark:not(.is-scrolled) .logo__word-en{color:rgba(250,247,241,.6)}
.site-header--on-dark:not(.is-scrolled) .site-header__burger{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  color:var(--white);
}

@media (max-width:1024px){
  .site-header__nav{display:none}
  .site-header__burger{display:grid}
}

@media (max-width:560px){
  .site-header__actions .btn__label{display:none}
}

/* --- 24.1 قائمة الجوال --- */

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:var(--z-drawer);
  display:flex;
  flex-direction:column;
  background:var(--cream-50);
  transform:translateX(100%);
  /* visibility تمنع وصول التركيز بلوحة المفاتيح إلى روابط القائمة المغلقة
     (١٦ محطة Tab غير مرئية) وتوافق aria-hidden="true" الموضوعة عليها.
     تُؤخَّر إلى ما بعد انتهاء الإزاحة عند الإغلاق. (A11Y-01) */
  visibility:hidden;
  pointer-events:none;
  transition:transform var(--dur-3) var(--ease),visibility 0s linear var(--dur-3);
  overflow-y:auto;
  overscroll-behavior:contain;
}

html[dir='ltr'] .mobile-menu{transform:translateX(-100%)}

.mobile-menu.is-open{
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform var(--dur-3) var(--ease),visibility 0s;
}

.mobile-menu__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--gutter);
  border-block-end:1px solid var(--line);
  background:var(--white);
  position:sticky;
  inset-block-start:0;
  z-index:2;
}

.mobile-menu__close{
  display:grid;
  place-items:center;
  inline-size:42px;
  block-size:42px;
  border-radius:50%;
  background:var(--cream-100);
  color:var(--ink-soft);
}

.mobile-menu__close:hover{background:var(--danger-soft);color:var(--danger)}

.mobile-menu__body{
  padding:var(--sp-5) var(--gutter);
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  flex:1 1 auto;
}

.mobile-menu__link{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4);
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  text-decoration:none;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}

.mobile-menu__link svg[data-icon]{
  inline-size:20px;
  block-size:20px;
  color:var(--violet-500);
}

.mobile-menu__link:hover,
.mobile-menu__link.is-active{
  background:var(--violet-50);
  border-color:var(--violet-300);
  color:var(--violet-700);
  text-decoration:none;
}

.mobile-menu__link .cluster__spacer + svg[data-icon]{color:var(--muted)}

.mobile-menu__foot{
  padding:var(--sp-5) var(--gutter);
  padding-block-end:max(var(--sp-5),env(safe-area-inset-bottom));
  border-block-start:1px solid var(--line);
  background:var(--white);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

/* =====================================================================
   25) تذييل الموقع
   ===================================================================== */

.site-footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--grad-navy);
  color:rgba(250,247,241,.72);
  font-size:var(--fs-sm);
  margin-block-start:auto;
}

/* نمط شبكي خافت + توهج بنفسجي */
.site-footer::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 100% at 50% 0%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 50% 0%,#000 20%,transparent 80%);
}

.site-footer::after{
  content:'';
  position:absolute;
  z-index:-1;
  inline-size:620px;
  block-size:620px;
  inset-block-start:-300px;
  inset-inline-end:-180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(129,57,214,.4) 0%,rgba(129,57,214,0) 70%);
  filter:blur(20px);
  pointer-events:none;
}

.site-footer__top{
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);
  gap:var(--sp-6);
  padding-block:var(--sp-8) var(--sp-7);
}

.site-footer__brand{max-inline-size:340px}

.site-footer__about{
  color:rgba(250,247,241,.62);
  line-height:var(--lh-body);
  margin-block-start:var(--sp-4);
}

.site-footer__col-title{
  font-family:var(--font-display);
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  color:var(--white);
  margin-block-end:var(--sp-4);
}

.site-footer__links{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  list-style:none;
  padding:0;
  margin:0;
}

.site-footer__links li{margin:0}

.site-footer__links a{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  color:rgba(250,247,241,.68);
  text-decoration:none;
  transition:color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}

.site-footer__links a:hover{
  color:var(--white);
  text-decoration:none;
  transform:translateX(-4px);
}

html[dir='ltr'] .site-footer__links a:hover{transform:translateX(4px)}

.site-footer__links a::before{
  content:'';
  inline-size:5px;
  block-size:5px;
  border-radius:50%;
  background:var(--violet-400);
  opacity:0;
  transition:opacity var(--dur-2) var(--ease);
  flex-shrink:0;
}

.site-footer__links a:hover::before{opacity:1}

/* --- 25.1 النشرة البريدية --- */

.footer-news{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-6);
  flex-wrap:wrap;
  padding:var(--sp-6);
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.footer-news__text{max-inline-size:420px;min-inline-size:0}

.footer-news__title{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  color:var(--white);
  margin:0 0 var(--sp-2);
}

.footer-news__desc{color:rgba(250,247,241,.65);margin:0;line-height:var(--lh-body)}

.footer-news__form{
  display:flex;
  gap:var(--sp-2);
  flex:1 1 340px;
  min-inline-size:0;
  max-inline-size:480px;
}

.footer-news__form .input{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  color:var(--white);
}

.footer-news__form .input::placeholder{color:rgba(250,247,241,.45)}

.footer-news__form .input:focus{
  border-color:var(--violet-300);
  background:rgba(255,255,255,.15);
  box-shadow:0 0 0 4px rgba(155,93,232,.22);
}

/* --- 25.2 سطر الحقوق --- */

.site-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  flex-wrap:wrap;
  padding-block:var(--sp-5);
  border-block-start:1px solid rgba(255,255,255,.1);
  /* ‎.5 كانت تعطي 4.39:1 على كحلي التذييل؛ ‎.62 ترفعها إلى ≈6:1 (A11Y-13) */
  color:rgba(250,247,241,.62);
  font-size:var(--fs-xs);
}

.site-footer__legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-4);
  list-style:none;
  padding:0;
  margin:0;
}

.site-footer__legal li{margin:0}
.site-footer__legal a{color:rgba(250,247,241,.62)}
.site-footer__legal a:hover{color:var(--white);text-decoration:none}

.site-footer__social{display:flex;gap:var(--sp-2)}

.site-footer__social a{
  display:grid;
  place-items:center;
  inline-size:40px;      /* هدف لمس ≥40×40 (RESP-07) */
  block-size:40px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:rgba(250,247,241,.78);
  transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}

.site-footer__social a:hover{
  background:var(--violet-500);
  color:var(--white);
  transform:translateY(-3px);
  text-decoration:none;
}

@media (max-width:1024px){
  .site-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__brand{grid-column:1/-1;max-inline-size:none}
}

@media (max-width:560px){
  .site-footer__top{grid-template-columns:minmax(0,1fr);gap:var(--sp-5);padding-block:var(--sp-7) var(--sp-6)}
  .footer-news{padding:var(--sp-5);gap:var(--sp-4)}
  .footer-news__form{flex-direction:column;max-inline-size:none}
  .site-footer__bottom{justify-content:center;text-align:center}
}

/* =====================================================================
   26) الهيرو
   ===================================================================== */

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--cream-100);
  padding-block:calc(var(--header-h) + var(--sp-8)) var(--sp-9);
  min-block-size:min(88vh,760px);
  display:flex;
  align-items:center;
}

/* الخلفية: تدرّج الهوية + شبكة + كرات توهج */
.hero__bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:var(--grad-brand);
  background-size:180% 180%;
}

.hero__bg::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 80% at 70% 20%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 70% 20%,#000 20%,transparent 75%);
}

/* نقاط ناعمة إضافية */
.hero__bg::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:26px 26px;
  opacity:.35;
  mask-image:radial-gradient(ellipse 70% 60% at 20% 80%,#000 10%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 20% 80%,#000 10%,transparent 70%);
}

/* كرات التوهج — عنصران اختياريان داخل .hero__bg */
.hero__orb{
  position:absolute;
  z-index:-2;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  opacity:.55;
}

.hero__orb--1{
  inline-size:460px;
  block-size:460px;
  inset-block-start:-120px;
  inset-inline-start:-80px;
  background:radial-gradient(circle,rgba(155,93,232,.85) 0%,rgba(155,93,232,0) 70%);
  animation:float 13s var(--ease-in-out) infinite;
}

.hero__orb--2{
  inline-size:380px;
  block-size:380px;
  inset-block-end:-140px;
  inset-inline-end:-60px;
  background:radial-gradient(circle,rgba(47,127,224,.6) 0%,rgba(47,127,224,0) 70%);
  animation:float 17s var(--ease-in-out) infinite reverse;
}

.hero__orb--3{
  inline-size:300px;
  block-size:300px;
  inset-block-start:40%;
  inset-inline-start:45%;
  background:radial-gradient(circle,rgba(129,57,214,.5) 0%,rgba(129,57,214,0) 70%);
  animation:float 21s var(--ease-in-out) infinite;
}

/* تلاشٍ سفلي نحو خلفية الموقع الكريمية */
.hero::after{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  block-size:140px;
  z-index:-1;
  background:linear-gradient(to top,var(--cream-100),transparent);
  pointer-events:none;
}

.hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--sp-7);
  align-items:center;
  inline-size:100%;
}

.hero__content{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  max-inline-size:620px;
  min-inline-size:0;
}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  align-self:flex-start;
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--white);
}

.hero__eyebrow svg[data-icon]{inline-size:16px;block-size:16px;color:var(--violet-200)}

.hero__title{
  font-family:var(--font-display);
  font-size:var(--fs-4xl);
  font-weight:var(--fw-bold);
  line-height:1.15;
  color:var(--white);
  margin:0;
  text-wrap:balance;
}

.hero__title em{
  font-style:normal;
  /* أفتح طرف من التدرّج: #9B5DE8 كان ينزل إلى 2.98:1 على كحلي الهيرو
     و#B98BF0 (violet-300) يبقي أدنى تباين ≈4.3:1 (A11Y-21) */
  background:linear-gradient(120deg,#D8CCF7 0%,#B98BF0 55%,#EDE6FD 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  /* التدرّج يُرسم داخل صندوق المحتوى فقط، ونقاط الياء وذيول الحروف تنزل تحته
     فتُقص. الحشوة الرأسية لعنصر inline توسّع مساحة الرسم دون أن تغيّر ارتفاع
     السطر، والحشوة الأفقية يعادلها هامش سالب فلا يتحرك النص. */
  padding-block:.12em .4em;
  padding-inline:.08em;
  margin-inline:-.08em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  animation:gradient-shift 9s var(--ease-in-out) infinite;
}

.hero__lead{
  font-size:var(--fs-lg);
  line-height:var(--lh-body);
  color:rgba(250,247,241,.82);
  margin:0;
  max-inline-size:56ch;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
}

.hero__search{max-inline-size:620px;inline-size:100%}

/* صفّ ثقة/إحصاءات تحت الهيرو */
.hero__trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-5);
  padding-block-start:var(--sp-3);
  color:rgba(250,247,241,.7);
  font-size:var(--fs-sm);
}

.hero__trust strong{
  color:var(--white);
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-variant-numeric:tabular-nums;
}

/* --- 26.1 اللوحة الزجاجية --- */

.hero__panel{
  position:relative;
  padding:var(--sp-5);
  border-radius:var(--r-2xl);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 30px 70px rgba(7,12,38,.35),inset 0 1px 0 rgba(255,255,255,.22);
  min-inline-size:0;
}

.hero__panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-block-end:var(--sp-4);
}

.hero__panel-title{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--white);
  margin:0;
}

/* حاوية معاينة الخريطة داخل اللوحة */
.hero__map{
  position:relative;
  aspect-ratio:4/3;
  inline-size:100%;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--navy-800);
}

.hero__panel .stats-bar{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4);
}

.hero__panel .stats-bar > .stat:not(:last-child){
  border-inline-end:0;
  padding-inline-end:0;
}

.hero--compact{
  min-block-size:auto;
  padding-block:calc(var(--header-h) + var(--sp-7)) var(--sp-8);
}

.hero--center .hero__inner{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.hero--center .hero__content{align-items:center;max-inline-size:780px}
.hero--center .hero__eyebrow{align-self:center}
.hero--center .hero__trust{justify-content:center}

@media (max-width:1024px){
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .hero{min-block-size:auto;padding-block:calc(var(--header-h) + var(--sp-7)) var(--sp-8)}
  .hero__content{max-inline-size:none}
}

@media (max-width:560px){
  .hero__actions .btn{inline-size:100%}
  .hero__panel{padding:var(--sp-4)}
  .hero__orb--3{display:none}
}

/* =====================================================================
   27) لبنات مشتركة إضافية
   ===================================================================== */

/* صندوق معلومات سريع (التاريخ/المكان/السعر في صفحة الفعالية) */
.info-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  list-style:none;
  padding:0;
  margin:0;
}

.info-list li{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  margin:0;
}

.info-list__icon{
  display:grid;
  place-items:center;
  inline-size:38px;
  block-size:38px;
  flex-shrink:0;
  border-radius:var(--r-sm);
  background:var(--violet-50);
  color:var(--violet-600);
}

.info-list__icon svg[data-icon]{inline-size:19px;block-size:19px}

.info-list__label{
  display:block;
  font-size:var(--fs-xs);
  color:var(--muted);
  line-height:1.5;
}

.info-list__value{
  display:block;
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  font-size:var(--fs-sm);
  line-height:1.6;
}

/* صندوق جانبي بارز (التسجيل) */
.panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.panel__head{
  padding:var(--sp-4) var(--sp-5);
  border-block-end:1px solid var(--line);
  background:var(--cream-50);
}

.panel__title{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  margin:0;
}

.panel__body{padding:var(--sp-5)}

.panel__foot{
  padding:var(--sp-4) var(--sp-5);
  border-block-start:1px solid var(--line);
  background:var(--cream-50);
}

.panel--brand .panel__head{
  background-image:var(--grad-brand);
  border-block-end-color:transparent;
}

.panel--brand .panel__title{color:var(--white)}

/* شريط شعارات الجهات */
.logo-strip{
  display:flex;
  align-items:center;
  gap:var(--sp-7);
  flex-wrap:wrap;
  justify-content:center;
}

.logo-strip img{
  block-size:44px;
  inline-size:auto;
  opacity:.55;
  filter:grayscale(1);
  transition:opacity var(--dur-3) var(--ease),filter var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
}

.logo-strip a:hover img{opacity:1;filter:grayscale(0);transform:scale(1.06)}

/* خطوات "كيف تعمل المنصة" */
.step{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--sp-5);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease),border-color var(--dur-3) var(--ease);
}

.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--violet-200)}

.step__num{
  display:grid;
  place-items:center;
  inline-size:46px;
  block-size:46px;
  border-radius:var(--r-md);
  background-image:var(--grad-brand);
  color:var(--white);
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  box-shadow:0 6px 16px rgba(91,63,209,.24);
}

.step__title{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  margin:0;
}

.step__text{font-size:var(--fs-sm);color:var(--ink-soft);margin:0;line-height:var(--lh-body)}

/* صندوق دعوة للانضمام */
.cta-band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:var(--sp-8) var(--sp-6);
  border-radius:var(--r-2xl);
  background-image:var(--grad-brand);
  color:var(--cream-100);
  text-align:center;
  box-shadow:var(--shadow-glow);
}

.cta-band::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 75%);
}

.cta-band__title{
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:var(--fw-bold);
  color:var(--white);
  margin:0 0 var(--sp-3);
}

.cta-band__text{
  color:rgba(250,247,241,.94);
  max-inline-size:56ch;
  margin:0 auto var(--sp-5);
  line-height:var(--lh-body);
}

.cta-band__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  justify-content:center;
}

/* بطاقة أداة الذكاء الاصطناعي */
.tool-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--sp-5);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  text-decoration:none;
  overflow:hidden;
  transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease),border-color var(--dur-3) var(--ease);
  block-size:100%;
}

.tool-card::before{
  content:'';
  position:absolute;
  inset-block-start:0;
  inset-inline-end:0;
  inline-size:140px;
  block-size:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(129,57,214,.14) 0%,rgba(129,57,214,0) 70%);
  transform:translate(35%,-35%);
  transition:transform var(--dur-4) var(--ease);
  pointer-events:none;
}

.tool-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--violet-200);
  text-decoration:none;
}

.tool-card:hover::before{transform:translate(20%,-20%) scale(1.25)}

.tool-card__icon{
  display:grid;
  place-items:center;
  inline-size:52px;
  block-size:52px;
  border-radius:var(--r-md);
  background:var(--violet-100);
  color:var(--violet-600);
  transition:background-image var(--dur-3) var(--ease),color var(--dur-3) var(--ease);
}

.tool-card__icon svg[data-icon]{inline-size:25px;block-size:25px}

.tool-card:hover .tool-card__icon{
  background-image:var(--grad-brand);
  color:var(--white);
}

.tool-card__title{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  margin:0;
}

.tool-card__text{
  font-size:var(--fs-sm);
  color:var(--ink-soft);
  line-height:var(--lh-body);
  margin:0;
}

/* صندوق نتيجة أداة قابل للنسخ */
.result-box{
  position:relative;
  background:var(--cream-50);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--sp-5);
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--ink);
  white-space:pre-wrap;
  word-break:break-word;
  max-block-size:520px;
  overflow-y:auto;
}

.result-box__actions{
  display:flex;
  gap:var(--sp-2);
  justify-content:flex-end;
  margin-block-start:var(--sp-3);
}

/* شريط فلاتر أفقي فوق القوائم */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
}

.filter-bar__grow{flex:1 1 260px;min-inline-size:0}

.filter-bar__group{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-inline-size:0;
}

.filter-bar__label{
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  color:var(--muted);
  white-space:nowrap;
}

/* عدّاد نتائج */
.result-count{
  font-size:var(--fs-sm);
  color:var(--muted);
}

.result-count strong{color:var(--navy-800);font-variant-numeric:tabular-nums}

/* =====================================================================
   40) الجوال: أهداف لمس ≥40×40 وحقول بحجم خط ≥16px
   RESP-07 — WCAG 2.5.8 (الحد الأدنى 24×24) وإرشادات iOS (44) — نلتزم بـ40.
   RESP-08 — أي حقل قابل للتركيز بحجم <16px يُجبر iOS Safari على تكبير
             الصفحة عند التركيز فينكسر التخطيط.
   ===================================================================== */

@media (max-width:768px){

  /* حقول الإدخال والفلاتر — 16px إلزاماً */
  .input,
  .select,
  .textarea,
  .input--sm,
  .select--sm,
  .textarea--sm{font-size:16px}

  /* الأزرار المصغّرة: 38px → 40px (يشمل .btn--icon لأنه يشتق عرضه من --btn-h) */
  .btn--sm,
  .btn-group .btn,
  .table__actions .btn{--btn-h:40px}

  /* فتات الخبز كانت 24.5px فقط */
  .breadcrumbs a,
  .breadcrumbs [aria-current='page']{
    display:inline-flex;
    align-items:center;
    min-block-size:40px;
  }
}