/* =====================================================================
   CF HS v1 — مسرح المثبّت (Hero Stage Slider)
   ⚠ بادئة الأصناف cfs-* (وليست hs-*) لأن style.css يحتوي أصلاً على .hs-* للسلايدر الرئيسي
   ---------------------------------------------------------------------
   • خلفية ضبابية من البوستر + لوحة زجاجية + بوستر مائل 3D + طابور مصغّرات
   • ارتفاع ثابت للمسرح (لا يعتمد على الصور) → CLS = 0
   • نفس هوية الموقع: #0b0d12 | #141821 | #e63946 | #ffb52a | حواف 22px
   • الفهرس: 1) المتغيرات  2) المسرح والشريحة  3) اللوحة الزجاجية  4) البوستر
             5) الشارات  6) الأزرار  7) المصغّرات  8) الحركة  9) استجابة
             10) تحسينات سطح المكتب (≥1024px)
   ===================================================================== */

/* ---------- 1) المتغيرات ---------- */
.cf-hs{
  --cfs-bg:#0b0d12; --cfs-surface:#141821; --cfs-surface-2:#1b2030;
  --cfs-line:rgba(255,255,255,.1); --cfs-text:#f3f5f9; --cfs-soft:#dfe3ec; --cfs-muted:#9aa3b5;
  --cfs-accent:#e63946; --cfs-accent-2:#c21d1d; --cfs-gold:#ffb52a; --cfs-green:#35e08a;
  --cfs-ease:cubic-bezier(.2,.7,.2,1);
  --cfs-h:480px;
  --cfs-dur:6500ms;
  /* كتلة واحدة = بوستر + شريط المصغّرات تحته مباشرة، بنفس العرض --cfs-pw ومتمركزة رأسياً */
  --cfs-padx:44px; --cfs-col:270px; --cfs-pt:56px; --cfs-pb:24px; --cfs-tv:4; --cfs-sp:7px; --cfs-g:8px;
  --cfs-pw:min(224px,calc((var(--cfs-h) - var(--cfs-pt) - var(--cfs-pb) - 12px) / 1.6396));
  --cfs-ph:calc(var(--cfs-pw) * 1.31008);                                                        /* ارتفاع البوستر */
  --cfs-th:calc((var(--cfs-pw) - 2 * var(--cfs-sp) - (var(--cfs-tv) - 1) * var(--cfs-g)) / var(--cfs-tv) * 1.31818);   /* ارتفاع المصغّر */
  --cfs-st:calc(var(--cfs-th) + 2 * var(--cfs-sp));                                               /* ارتفاع الشريط */
  --cfs-vgap:calc((var(--cfs-h) - var(--cfs-pt) - var(--cfs-pb) - var(--cfs-ph) - var(--cfs-st)) / 2);   /* هامش التمركز */
}
.cf-hs{position:relative;margin:0 0 12px;direction:rtl;text-align:right;color:var(--cfs-text);font-family:inherit;font-size:13px;line-height:1.6}
.cf-hs *,.cf-hs *::before,.cf-hs *::after{box-sizing:border-box}
.cf-hs [hidden]{display:none!important}
.cf-hs a{color:inherit;text-decoration:none}
.cf-hs ul{list-style:none;margin:0;padding:0;display:block}
.cf-hs h2,.cf-hs h3,.cf-hs p{margin:0;padding:0}
.cf-hs button{font-family:inherit;font-size:inherit;color:inherit}
.cf-hs :focus-visible{outline:2px solid var(--cfs-gold);outline-offset:2px;border-radius:10px}

/* ---------- 2) المسرح والشريحة ---------- */
.cfs-slides{
  position:relative;height:var(--cfs-h);overflow:hidden;isolation:isolate;border-radius:22px;
  background:var(--cfs-bg);border:1px solid var(--cfs-line);touch-action:pan-y
}
.cfs-slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
.cfs-slide.is-active{opacity:1;pointer-events:auto}
.cfs-bd{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--cfs-bg)}
.cfs-bd::before{                                       /* الخلفية الضبابية */
  content:"";position:absolute;top:-8%;right:-8%;bottom:-8%;left:-8%;
  background:var(--bd) center 28%/cover no-repeat;filter:blur(34px) saturate(1.5) brightness(.55);transform:scale(1.12)
}
.cfs-bd::after{                                        /* تدرّجات سينمائية */
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    radial-gradient(120% 90% at 85% 40%,rgba(11,13,18,0) 0,rgba(11,13,18,.55) 70%),
    linear-gradient(0deg,rgba(11,13,18,.95) 0,rgba(11,13,18,0) 42%),
    linear-gradient(180deg,rgba(11,13,18,.6) 0,rgba(11,13,18,0) 28%)
}
.cfs-in{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) var(--cfs-col);gap:44px;align-items:center;
  padding:var(--cfs-pt) var(--cfs-padx) var(--cfs-pb)
}

/* الشريط العلوي: H2 + عدّاد + تحكم */
.cfs-top{
  position:absolute;top:14px;right:22px;left:22px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none
}
.cfs-top>*{pointer-events:auto}
.cf-hs .cfs-eyebrow{
  display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 190px);padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:800;line-height:1.4;letter-spacing:0;color:#ffd27a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(11,13,18,.55);border:1px solid rgba(255,181,42,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)
}
.cfs-eyebrow i{color:var(--cfs-gold);font-size:13px}
.cfs-ctrl{display:flex;align-items:center;gap:6px}
.cfs-count{margin-left:4px;font-size:12px;font-weight:700;color:var(--cfs-muted);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.cfs-count b{color:#fff;font-weight:800}

/* ---------- 3) اللوحة الزجاجية ---------- */
.cfs-panel{
  display:flex;flex-direction:column;gap:14px;min-width:0;max-width:740px;padding:22px 28px 24px;border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  position:relative;z-index:1;border:1px solid rgba(var(--tint-rgb,255,255,255),.38);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9),0 0 46px -18px rgba(var(--tint-rgb,230,57,70),.55),inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)
}
.cfs-head{display:flex;flex-direction:column;gap:10px;min-width:0}
.cfs-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.cf-hs .cfs-title{
  font-size:clamp(22px,2.7vw,32px);font-weight:800;line-height:1.4;letter-spacing:0;color:#fff;text-align:right;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-shadow:0 2px 24px rgba(0,0,0,.6)
}
.cfs-title a:hover{color:var(--cfs-gold)}
.cfs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12px;font-weight:700;color:var(--cfs-soft)}
.cfs-meta>span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12)}
.cfs-meta i{color:var(--cfs-gold);font-size:12px}
.cfs-meta .cfs-q{border-color:transparent;color:#fff;direction:ltr;letter-spacing:.2px}
:where(.cfs-meta .cfs-q){background:#2a3042}
.cfs-meta .cfs-q.quality-4k{background:linear-gradient(135deg,#ffb52a,#e08a00);color:#1a1300}
.cfs-meta .cfs-age{border-color:transparent;background:var(--ac,#3b5999);color:#fff;direction:ltr}
.cfs-meta .cfs-gen{color:#ffd27a;background:rgba(255,181,42,.1);border-color:rgba(255,181,42,.25)}
.cf-hs .cfs-story{
  font-size:13.5px;line-height:1.95;color:var(--cfs-soft);text-align:justify;text-align-last:right;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden
}
.cf-hs .cfs-cast{font-size:12px;color:var(--cfs-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfs-cast i{color:var(--cfs-accent);margin-left:5px}

/* ---------- 4) البوستر (مستقيم) ---------- */
.cfs-poster{display:block;justify-self:center;align-self:start;width:var(--cfs-pw);margin-top:var(--cfs-vgap)}
.cfs-poster-in{
  position:relative;display:block;aspect-ratio:258/338;border-radius:18px;background:var(--cfs-surface-2);
  outline:1px solid rgba(255,255,255,.18);outline-offset:-1px                   /* حدّ مشترك مع الشريط */
}
.has-thumbs .cfs-poster-in{border-radius:18px 18px 0 0}
.cfs-poster-in::after{                                /* لمعة زجاجية ثابتة (بلا حركة) */
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 36%)
}
.cfs-poster-in img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cfs-ring{
  --c:#ffbe00;position:absolute;top:10px;left:10px;z-index:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.2) 0);box-shadow:0 6px 16px rgba(0,0,0,.5)
}
.cfs-ring::before{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:50%;background:rgba(11,13,18,.92)}
.cfs-ring b{position:relative;font-size:12.5px;font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cfs-ring[data-lv="hi"]{--c:#2ed06a}
.cfs-ring[data-lv="lo"]{--c:#ff4d4d}

/* ---------- 5) الشارات التفاعلية (Glow خفيف) ---------- */
.cfs-badges{display:flex;flex-wrap:wrap;gap:8px}
.cfs-badge{
  display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 13px;border-radius:999px;
  font-size:12px;font-weight:800;line-height:1;white-space:nowrap;border:1px solid transparent;
  background:rgba(255,255,255,.08)
}
.cfs-badge.is-pin{color:#ffd27a;border-color:rgba(255,181,42,.55);background:rgba(255,181,42,.12);box-shadow:0 0 0 1px rgba(255,181,42,.12),0 0 20px rgba(255,181,42,.32)}
.cfs-badge.is-top{color:#ff9aa2;border-color:rgba(255,68,82,.55);background:rgba(230,57,70,.14);box-shadow:0 0 0 1px rgba(230,57,70,.14),0 0 20px rgba(230,57,70,.4)}
.cfs-badge.is-new{color:var(--cfs-green);border-color:rgba(53,224,138,.5);background:rgba(53,224,138,.1);box-shadow:0 0 0 1px rgba(53,224,138,.12),0 0 18px rgba(53,224,138,.3)}
.cfs-badge i{font-size:12px}

/* ---------- 6) الأزرار ---------- */
.cfs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cfs-watch{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 38px;border-radius:14px;
  font-size:16px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff4452,var(--cfs-accent-2));
  box-shadow:0 14px 30px -8px rgba(230,57,70,.65);transition:transform .25s var(--cfs-ease),filter .2s
}
.cfs-watch::after{                                     /* نبض (Pulse) */
  content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:16px;border:2px solid rgba(255,68,82,.75);
  animation:cfsPulse 2.2s ease-out infinite;pointer-events:none
}
.cfs-watch:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.08)}
.cfs-watch i{font-size:14px}
.cfs-btn{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:11px;cursor:pointer;font-size:16px;color:var(--cfs-soft);
  background:rgba(11,13,18,.55);border:1px solid var(--cfs-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:color .2s,border-color .2s,background .2s,transform .2s
}
.cfs-btn:hover{color:#fff;border-color:rgba(255,181,42,.5);background:rgba(11,13,18,.8)}
.cfs-btn:active{transform:scale(.93)}
.cfs-btn[aria-pressed="true"]{color:var(--cfs-gold);border-color:rgba(255,181,42,.5)}
.cfs-btn .fa-pause,.cfs-btn .fa-play{font-size:13px}

/* ---------- 7) طابور المصغّرات (القادمة أولاً) — بعرض البوستر تماماً ---------- */
.cfs-thumbs{
  position:absolute;z-index:6;top:calc(var(--cfs-pt) + var(--cfs-vgap) + var(--cfs-ph) + 1px);
  left:calc(var(--cfs-padx) + (var(--cfs-col) - var(--cfs-pw)) / 2 + 1px);width:var(--cfs-pw);height:var(--cfs-st);
  display:flex;align-items:center;gap:var(--cfs-g);padding:var(--cfs-sp);border-radius:0 0 18px 18px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  background:rgba(11,13,18,.94);border:1px solid rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.07);
  box-shadow:0 34px 50px -28px rgba(0,0,0,.95)
}
.cfs-thumbs::-webkit-scrollbar{display:none}
.cfs-thumb{
  position:relative;flex:0 0 calc((100% - (var(--cfs-tv) - 1) * var(--cfs-g)) / var(--cfs-tv));order:var(--o);aspect-ratio:44/58;
  padding:0;border:0;border-radius:8px;overflow:hidden;cursor:pointer;
  background:var(--cfs-surface-2);opacity:.6;transition:opacity .3s,transform .3s var(--cfs-ease),box-shadow .3s
}
.cfs-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.cfs-thumb:hover{opacity:1;transform:translateY(-3px)}
.cfs-thumb.is-active{opacity:1;box-shadow:0 0 0 2px var(--cfs-gold),0 0 18px rgba(255,181,42,.5)}
.cfs-thumb[data-next]{opacity:.95;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.cfs-thumb[data-next]::before{                        /* «التالي» */
  content:"التالي";position:absolute;top:0;right:0;left:0;z-index:1;padding:1px 0;text-align:center;font-size:9px;font-weight:800;line-height:1.5;color:#fff;
  background:linear-gradient(180deg,rgba(11,13,18,.9),rgba(11,13,18,0))
}
.cfs-fill{position:absolute;right:0;bottom:0;left:0;height:3px;background:rgba(255,255,255,.2);overflow:hidden;display:none}
.cfs-thumb.is-active .cfs-fill{display:block}
.cfs-fill::after{content:"";position:absolute;top:0;bottom:0;right:0;width:100%;background:linear-gradient(90deg,var(--cfs-accent),var(--cfs-gold));transform:scaleX(0);transform-origin:right}
.cfs-thumb.is-run .cfs-fill::after{animation:cfsFill var(--cfs-dur) linear forwards}
.cf-hs.is-paused .cfs-thumb .cfs-fill::after{animation-play-state:paused}

/* ---------- 8) الحركة ---------- */
.cfs-slide.is-active .cfs-a{animation:cfsUp .75s var(--cfs-ease) both;animation-delay:calc(var(--d,0)*85ms + 120ms)}
.cfs-slide.is-active .cfs-bd::before{animation:cfsZoom 16s ease-out both}
.cfs-slide.is-active .cfs-poster-in{animation:cfsPoster .9s var(--cfs-ease) both}
@keyframes cfsUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cfsZoom{from{transform:scale(1.12)}to{transform:scale(1.24)}}
@keyframes cfsPoster{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}
@keyframes cfsPulse{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.14,1.35)}}
@keyframes cfsFill{to{transform:scaleX(1)}}

/* ---------- 9) استجابة ---------- */
@media (max-width:1023px){
  .cf-hs{--cfs-h:450px;--cfs-padx:28px;--cfs-col:210px;--cfs-pt:56px;--cfs-pb:24px;--cfs-tv:3;--cfs-pw:min(196px,calc((var(--cfs-h) - var(--cfs-pt) - var(--cfs-pb) - 12px) / 1.7495))}
  .cfs-in{gap:28px}
  .cfs-panel{padding:18px 20px 20px}
}
@media (max-width:767px){
  .cf-hs{--cfs-h:468px}
  .cfs-slides{border-radius:18px}
  .cfs-top{top:10px;right:12px;left:12px}
  .cf-hs .cfs-eyebrow{max-width:calc(100% - 96px);padding:5px 12px;font-size:12px}
  .cfs-btn--nav,.cfs-count{display:none}               /* على اللمس: سحب + أزرار الإيقاف */
  .cfs-in{
    grid-template-columns:104px minmax(0,1fr);grid-template-areas:"poster head" "body body";
    gap:14px 14px;align-items:start;align-content:start;padding:54px 14px 82px
  }
  .cfs-panel{display:contents}                        /* نفرد اللوحة لتتوزع عناصرها على الشبكة */
  .cfs-poster{grid-area:poster;width:100%;margin:0}
  .cfs-head{grid-area:head;gap:7px}
  .cfs-body{grid-area:body;gap:10px;padding:12px 13px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14)}
  .cfs-poster-in,.has-thumbs .cfs-poster-in{border-radius:12px}
  .cfs-ring{width:34px;height:34px;top:6px;left:6px}
  .cfs-ring::before{top:3px;right:3px;bottom:3px;left:3px}
  .cfs-ring b{font-size:10.5px}
  .cf-hs .cfs-title{font-size:17px;-webkit-line-clamp:3}
  .cfs-badges{gap:6px}
  .cfs-badge{height:24px;padding:0 10px;font-size:11px}
  .cfs-meta{gap:5px}
  .cfs-meta>span{height:22px;padding:0 9px;font-size:11px}
  .cfs-meta .cfs-gen,.cfs-meta .cfs-age{display:none}
  .cf-hs .cfs-story{font-size:12.5px;line-height:1.8}
  .cfs-cast{display:none}
  .cfs-watch{flex:1 1 auto;height:48px;padding:0 18px}
  .cfs-thumbs{
    top:auto;bottom:12px;left:12px;right:12px;width:auto;height:auto;padding:6px;border-radius:14px;
    --cfs-tv:7;--cfs-sp:6px;--cfs-g:8px;
    background:rgba(11,13,18,.58);border:1px solid var(--cfs-line);box-shadow:none;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)
  }
  .cfs-thumb{max-width:56px}                          /* لا يتضخم الشريط على الهواتف العريضة/الأفقية */
}
@media (max-width:359px){ .cf-hs{--cfs-h:488px} }
@media (prefers-reduced-motion:reduce){
  .cf-hs *,.cf-hs *::before,.cf-hs *::after{animation:none!important;transition:none!important}
}

/* ---------- 10) تحسينات سطح المكتب (≥1024px) ----------
   • عمود البوستر = عرض البوستر → المصغّرات تبقى محاذية له تماماً
   • الحاوية الزجاجية تتمدد حتى البوستر (فاصل 20px فقط بدل ≈67px) بلا سقف عرض
   • ارتفاع الحاوية = بوستر + شريط المصغّرات (+1px حدّ) وتبدأ من نفس خط البوستر العلوي
   • القصة: 3 أسطر كاملة بكلمات أكثر لكل سطر
   لا تأثير على الجوال/التابلت ولا على حركة الانتقال التلقائي. */
@media (min-width:1024px){
  .cf-hs{
    --cfs-col:var(--cfs-pw);
    --cfs-gapx:20px;
    --cfs-block-h:calc(var(--cfs-ph) + var(--cfs-st) + 1px);
  }
  .cfs-in{gap:var(--cfs-gapx);align-items:start}
  .cfs-panel{
    max-width:none;width:100%;align-self:start;
    margin-top:var(--cfs-vgap);
    height:var(--cfs-block-h);
    padding:14px 24px;gap:8px;
    justify-content:flex-start;       /* القصة تلتصق بصف الجودة/السنة/النوع بدل التوزيع بالأطراف */
    overflow:hidden
  }
  .cf-hs:not(.has-thumbs) .cfs-panel{height:var(--cfs-ph)}
  .cfs-head{gap:8px}
  .cfs-body{gap:8px;flex:1 1 auto;min-height:0}
  .cfs-actions{margin-top:auto}      /* زر المشاهدة يبقى في أسفل الحاوية */
  .cf-hs .cfs-title{font-size:clamp(20px,1.9vw,25px);line-height:1.4;-webkit-line-clamp:2}
  .cfs-badge{height:26px;padding:0 12px}
  .cfs-meta>span{height:24px}
  .cf-hs .cfs-story{margin-top:14px;font-size:14px;line-height:1.7;-webkit-line-clamp:5}   /* فراغ أكبر بين صف الجودة/السنة/النوع والقصة */
  .cf-hs .cfs-cast{font-size:12px;line-height:1.5}
  .cfs-actions{gap:10px}
  .cfs-watch{height:42px;padding:0 32px;font-size:15px}
}
@media (min-width:1024px) and (max-width:1199px){
  .cfs-panel{padding:12px 20px;gap:8px}
  .cf-hs .cfs-title{font-size:20px}
  .cf-hs .cfs-story{font-size:13px;line-height:1.7}
  .cf-hs .cfs-cast{display:none}     /* مساحة أكبر للقصة على الشاشات الضيقة */
  .cfs-watch{height:40px;padding:0 26px;font-size:14px}
}