/* =========================================================================
   yfattal.com — Single Course template
   كل الأنماط محصورة داخل .yf-course حتى لا تتعارض مع أنماط القالب
   ========================================================================= */

.yf-course{
  /* ---- الهوية ---- */
  --yf-brand:#FDCF36;          /* الأصفر — للخلفيات فقط */
  --yf-on-brand:#1A1A1C;       /* النص فوق الأصفر */
  --yf-brand-soft:#FBF0CF;
  --yf-brand-deep:#7A5A00;     /* درجة الأصفر الصالحة كنص (تباين AA) */

  --yf-ground:#F4F4F1;
  --yf-surface:#FFFFFF;
  --yf-surface-2:#EAEAE5;
  --yf-ink:#212124;
  --yf-ink-2:#414146;
  --yf-muted:#71717A;

  --yf-band:#232326;           /* شريط الهيرو الداكن */
  --yf-band-ink:#F2F2EE;
  --yf-band-muted:#A0A0A8;
  --yf-band-line:#3A3A40;

  --yf-line:#E2E2DD;
  --yf-line-2:#CDCDC6;
  --yf-shadow:0 1px 2px rgba(20,20,22,.06), 0 14px 34px -20px rgba(20,20,22,.4);

  --yf-display:'Tajawal', system-ui, 'Segoe UI', sans-serif;
  --yf-body:'Tajawal', system-ui, 'Segoe UI', sans-serif;
  --yf-mono:'Tajawal', system-ui, sans-serif;

  --yf-max:1120px;

  direction:rtl;
  text-align:right;
  background:var(--yf-ground);
  color:var(--yf-ink);
  font-family:var(--yf-body);
  font-size:16.5px;
  line-height:1.75;
  padding-bottom:8px;
}
.yf-course *,
.yf-course *::before,
.yf-course *::after{box-sizing:border-box}

.yf-course h1,
.yf-course h2,
.yf-course h3{font-family:var(--yf-display);margin:0;line-height:1.4;text-wrap:balance;color:var(--yf-ink)}
.yf-course h1{font-size:clamp(26px,4.2vw,42px);font-weight:900;letter-spacing:-.01em}
.yf-course h2{font-size:clamp(21px,2.8vw,29px);font-weight:700}
.yf-course h3{font-size:17px;font-weight:700}
.yf-course p{margin:0}
.yf-course a{color:inherit}
.yf-course img{max-width:100%;height:auto}

.yf-wrap{max-width:var(--yf-max);margin-inline:auto;padding-inline:22px}
.yf-num{font-family:var(--yf-mono);font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}
.yf-eyebrow{font-family:var(--yf-mono);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yf-brand-deep)}
.yf-sec{padding-block:52px}
.yf-sec__head{display:grid;gap:10px;margin-bottom:24px;max-width:62ch}
.yf-main{padding-block:0}

/* ---------------- الأزرار ---------------- */
.yf-course .yf-btn{display:block;width:100%;text-align:center;text-decoration:none;
  font-family:var(--yf-display);font-weight:700;font-size:16.5px;padding:14px 20px;
  border-radius:9px;border:1px solid transparent;cursor:pointer;
  transition:filter .15s ease, transform .12s ease}
.yf-course .yf-btn--primary{background:var(--yf-brand);color:var(--yf-on-brand)}
.yf-course .yf-btn--ghost{background:transparent;color:var(--yf-ink);
  border-color:var(--yf-line-2);font-size:15px;padding:12px 18px}
.yf-course .yf-btn:hover{filter:brightness(1.05);color:var(--yf-on-brand)}
.yf-course .yf-btn--ghost:hover{color:var(--yf-ink)}
.yf-course .yf-btn:active{transform:translateY(1px)}
.yf-course .yf-btn:focus-visible{outline:3px solid var(--yf-brand-deep);outline-offset:3px}

/* ---------------- الهيرو ---------------- */
.yf-hero{background:var(--yf-band);color:var(--yf-band-ink);position:relative;overflow:hidden}
.yf-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 120% at 88% -10%, rgba(253,207,54,.18), transparent 62%)}
.yf-hero__grid{position:relative;display:grid;grid-template-columns:1fr 372px;gap:44px;
  align-items:start;padding-block:40px 34px}
.yf-hero__copy{display:grid;gap:16px}
.yf-hero__title{color:var(--yf-band-ink)}
.yf-hero__desc{color:var(--yf-band-muted);font-size:17px;max-width:58ch}

.yf-crumbs{font-size:13.5px;color:var(--yf-band-muted);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.yf-crumbs a{text-decoration:none;color:var(--yf-band-muted)}
.yf-crumbs a:hover{color:var(--yf-band-ink)}
.yf-crumbs span{opacity:.5}

.yf-course .yf-badge{justify-self:start;background:var(--yf-brand);color:var(--yf-on-brand);
  font-size:12.5px;font-weight:600;border-radius:6px;padding:4px 11px;text-decoration:none}

.yf-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14.5px;
  color:var(--yf-band-muted);padding-top:14px;border-top:1px solid var(--yf-band-line);margin-top:4px}
.yf-byline__who{display:flex;align-items:center;gap:9px;color:var(--yf-band-ink)}
.yf-byline__who a{text-decoration:none}
.yf-byline__who a:hover{color:var(--yf-brand)}
.yf-byline img,
.yf-byline .avatar{width:30px;height:30px;border-radius:50%;flex:none}

.yf-rating{display:flex;align-items:center;gap:7px}
.yf-stars{position:relative;display:inline-block;line-height:1;font-size:14px;letter-spacing:2px}
.yf-stars__bg{color:var(--yf-band-line)}
.yf-stars__fill{position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden;
  white-space:nowrap;color:var(--yf-brand);direction:ltr}

/* ---------------- كارد التسجيل ---------------- */
.yf-enroll{background:var(--yf-surface);color:var(--yf-ink);border:1px solid var(--yf-line-2);
  border-radius:14px;overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.75);
  position:sticky;top:18px}
.yf-enroll__media{background:var(--yf-surface-2);border-bottom:1px solid var(--yf-line);
  aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.yf-enroll__media img,
.yf-enroll__media iframe,
.yf-enroll__media video{width:100%;height:100%;object-fit:cover;display:block}
.yf-enroll__media:empty{display:none}
.yf-enroll__body{padding:20px 20px 22px;display:grid;gap:14px}

/* توافق مع مخرجات Tutor LMS داخل الكارد */
.yf-enroll__body .tutor-course-price,
.yf-enroll__body .list-item-price{font-family:var(--yf-mono);font-size:36px;font-weight:600;
  color:var(--yf-ink);letter-spacing:-.02em;direction:ltr;display:inline-block}
.yf-enroll__body del,
.yf-enroll__body .tutor-course-price del{font-family:var(--yf-mono);font-size:18px;
  color:var(--yf-muted);font-weight:500}
.yf-enroll__body .tutor-btn,
.yf-enroll__body button[type="submit"],
.yf-enroll__body .tutor-enroll-course-button{width:100%;background:var(--yf-brand)!important;
  color:var(--yf-on-brand)!important;border:none!important;border-radius:9px!important;
  font-family:var(--yf-display)!important;font-weight:700!important;font-size:16.5px!important;
  padding:14px 20px!important;box-shadow:none!important;cursor:pointer}
.yf-enroll__body .tutor-btn:hover{filter:brightness(1.05)}

.yf-incl{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--yf-line);
  display:grid;gap:9px;font-size:14.5px}
.yf-incl li{display:flex;gap:9px;align-items:center;color:var(--yf-ink-2)}
.yf-incl svg{width:15px;height:15px;color:var(--yf-brand-deep);flex:none}

/* ---------------- شريط الإحصائيات ---------------- */
.yf-stats{background:var(--yf-surface);border-bottom:1px solid var(--yf-line);
  box-shadow:var(--yf-shadow);position:relative;z-index:2}
.yf-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.yf-stat{padding:20px 18px;display:grid;gap:3px;border-inline-start:1px solid var(--yf-line)}
.yf-stat:last-child{border-inline-start:none}
.yf-stat__k{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--yf-muted)}
.yf-stat__k svg{width:15px;height:15px;color:var(--yf-brand-deep);flex:none}
.yf-stat__v{font-family:var(--yf-mono);font-size:27px;font-weight:600;letter-spacing:-.02em;
  direction:ltr;text-align:right;font-variant-numeric:tabular-nums;color:var(--yf-ink)}
.yf-stat__v--txt{font-family:var(--yf-display);font-size:17px;font-weight:700;direction:rtl}

/* ---------------- ماذا ستتعلم ---------------- */
.yf-panel{background:var(--yf-surface);border:1px solid var(--yf-line);border-radius:12px;padding:26px}
.yf-learn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 26px}
.yf-learn li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--yf-ink-2)}
.yf-learn svg{width:16px;height:16px;color:var(--yf-brand-deep);flex:none;margin-top:5px}

/* ---------------- المنهج ---------------- */
.yf-currmeta{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--yf-muted);
  font-family:var(--yf-mono);margin-bottom:14px}
.yf-curr{border:1px solid var(--yf-line);border-radius:12px;overflow:hidden;background:var(--yf-surface)}
.yf-topic{border-bottom:1px solid var(--yf-line)}
.yf-topic:last-child{border-bottom:none}
.yf-topic__head{cursor:pointer;list-style:none;padding:16px 20px;display:flex;align-items:center;
  gap:14px;font-family:var(--yf-display);font-weight:700;font-size:16px;background:var(--yf-surface-2)}
.yf-topic__head::-webkit-details-marker{display:none}
.yf-topic__head:focus-visible{outline:2px solid var(--yf-brand-deep);outline-offset:-3px}
.yf-topic__idx{font-size:13px;font-weight:600;color:var(--yf-on-brand);background:var(--yf-brand);
  border-radius:5px;padding:2px 8px;flex:none}
.yf-topic__title{flex:1;min-width:0}
.yf-topic__count{font-size:12.5px;color:var(--yf-muted);flex:none;font-weight:500}
.yf-topic__chev{width:16px;height:16px;color:var(--yf-muted);flex:none;transition:transform .2s ease}
.yf-topic[open] .yf-topic__chev{transform:rotate(180deg)}

.yf-lessons{list-style:none;margin:0;padding:0}
.yf-lesson{display:flex;align-items:center;gap:12px;padding:12px 20px;
  border-top:1px solid var(--yf-line);font-size:15px;color:var(--yf-ink-2)}
.yf-lesson__icon{display:flex;flex:none;color:var(--yf-muted)}
.yf-lesson__icon svg{width:16px;height:16px}
.yf-lesson__title{flex:1;min-width:0}
.yf-lesson__title a{text-decoration:none}
.yf-lesson__title a:hover{color:var(--yf-brand-deep);text-decoration:underline}
.yf-lesson__dur{font-size:13px;color:var(--yf-muted);flex:none}
.yf-lesson__free{font-size:11.5px;font-weight:600;color:var(--yf-brand-deep);
  border:1px solid var(--yf-brand-deep);border-radius:4px;padding:1px 7px;flex:none}
.yf-lesson__lock{display:flex;flex:none;color:var(--yf-muted)}
.yf-lesson__lock svg{width:14px;height:14px}

/* ---------------- عمودان ---------------- */
.yf-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.yf-bullets{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px;
  font-size:15.5px;color:var(--yf-ink-2)}
.yf-bullets li{display:flex;gap:10px;align-items:flex-start}
.yf-bullets li::before{content:"";width:6px;height:6px;border-radius:2px;
  background:var(--yf-brand);flex:none;margin-top:10px}

.yf-prose{color:var(--yf-ink-2)}
.yf-prose > *+*{margin-top:1em}
.yf-prose h2,.yf-prose h3{margin-top:1.4em}

/* ---------------- المدرّب ---------------- */
.yf-tutor{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:center}
.yf-tutor__avatar img{width:132px;height:132px;border-radius:12px;object-fit:cover;
  border:1px solid var(--yf-line-2);display:block}
.yf-tutor__body{display:grid;gap:8px}
.yf-tutor__name{font-size:23px;text-transform:none;letter-spacing:0}
.yf-tutor__name a{text-decoration:none}
.yf-tutor__role{color:var(--yf-muted);font-size:14.5px}
.yf-tutor__bio{font-size:15.5px;color:var(--yf-ink-2);max-width:62ch}
.yf-tutor__stats{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;
  color:var(--yf-muted);font-family:var(--yf-mono)}

/* ---------------- الشريط الثابت ---------------- */
.yf-stickybar{position:fixed;inset-inline:0;bottom:0;z-index:60;background:var(--yf-surface);
  border-top:1px solid var(--yf-line-2);padding:10px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;direction:rtl;
  box-shadow:0 -8px 26px -20px rgba(0,0,0,.8)}
.yf-stickybar__left{display:flex;align-items:center;gap:14px;min-width:0}
.yf-stickybar__title{font-family:var(--yf-display);font-weight:700;font-size:14.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}
.yf-stickybar__price{font-family:var(--yf-mono);font-size:21px;font-weight:600;
  direction:ltr;flex:none;color:var(--yf-ink)}
.yf-stickybar__price del{font-size:13.5px;color:var(--yf-muted);margin-inline-start:6px}
.yf-course .yf-stickybar .yf-btn{width:auto;padding:11px 26px;font-size:15px;flex:none}

/* ---------------- استجابة الشاشات ---------------- */
@media (max-width:960px){
  .yf-hero__grid{grid-template-columns:1fr;gap:30px}
  .yf-enroll{position:static}
}
@media (max-width:860px){
  .yf-stats__grid{grid-template-columns:repeat(2,1fr)!important}
  .yf-stat{border-inline-start:none;border-top:1px solid var(--yf-line);padding:16px 14px}
  .yf-stat:nth-child(odd){border-inline-end:1px solid var(--yf-line)}
  .yf-stat:nth-child(-n+2){border-top:none}
  .yf-stat__v{font-size:23px}
}
@media (max-width:820px){
  .yf-two{grid-template-columns:1fr}
}
@media (max-width:760px){
  .yf-learn{grid-template-columns:1fr}
}
@media (max-width:640px){
  .yf-course{font-size:16px}
  .yf-tutor{grid-template-columns:1fr;justify-items:center;text-align:center}
  .yf-tutor__stats{justify-content:center}
  .yf-topic__head{gap:10px;padding:14px 16px;font-size:15px}
  .yf-topic__count{display:none}
  .yf-lesson{padding:12px 16px}
}
@media (max-width:620px){
  .yf-stickybar__title{display:none}
  .yf-course .yf-stickybar .yf-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .yf-course *{transition:none!important;animation:none!important}
}

/* ---------------- صندوق السعر البديل (يظهر فقط إن تعذّر قالب Tutor) ------- */
.yf-fallback-price{display:grid;gap:12px}
.yf-fallback-price .yf-price{font-family:var(--yf-mono);font-size:36px;font-weight:600;
  color:var(--yf-ink);direction:ltr;letter-spacing:-.02em}
.yf-fallback-price .yf-price del{font-size:18px;color:var(--yf-muted);margin-inline-start:8px}
.yf-fallback-wrap{max-width:1120px;margin:32px auto;padding-inline:22px;direction:rtl;text-align:right}

/* ---------------- صندوق السعر ---------------- */
.yf-price-row{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.yf-course .yf-price{font-family:var(--yf-mono);font-size:38px;font-weight:600;
  letter-spacing:-.02em;direction:ltr;color:var(--yf-ink);line-height:1.2}
.yf-course .yf-price-old{font-family:var(--yf-mono);font-size:18px;color:var(--yf-muted);
  text-decoration:line-through;direction:ltr}
.yf-course .yf-save{font-size:12px;font-weight:600;color:var(--yf-on-brand);
  background:var(--yf-brand);border-radius:5px;padding:3px 8px;font-family:var(--yf-body)}
.yf-price-note{font-size:13.5px;color:var(--yf-muted);margin-top:-4px}
.yf-enrolled-note{font-family:var(--yf-display);font-weight:700;font-size:16px;color:var(--yf-ink)}

/* =========================================================================
   حارس ضد أنماط القالب و Elementor Global Styles
   Elementor يكتب قواعد مثل .elementor-kit-12 h1{color:...} بخصوصية (0,1,1)
   وهي تتفوق على (0,1,0). لذلك نرفع الخصوصية هنا بإضافة .yf-course.
   ========================================================================= */
.yf-course .yf-hero__title,
.yf-course .yf-hero h1{color:var(--yf-band-ink)}
.yf-course .yf-hero__desc{color:var(--yf-band-muted)}
.yf-course .yf-crumbs,
.yf-course .yf-crumbs a{color:var(--yf-band-muted)}
.yf-course .yf-crumbs a:hover{color:var(--yf-band-ink)}
.yf-course .yf-byline{color:var(--yf-band-muted)}
.yf-course .yf-byline__who,
.yf-course .yf-byline__who a{color:var(--yf-band-ink);text-decoration:none}
.yf-course .yf-byline__who a:hover{color:var(--yf-brand)}
.yf-course .yf-badge{color:var(--yf-on-brand);background:var(--yf-brand)}

.yf-course .yf-sec h2,
.yf-course .yf-sec h3,
.yf-course .yf-panel h2,
.yf-course .yf-panel h3,
.yf-course .yf-topic__title,
.yf-course .yf-tutor__name,
.yf-course .yf-tutor__name a{color:var(--yf-ink)}
.yf-course .yf-eyebrow{color:var(--yf-brand-deep)}
.yf-course .yf-stat__v,
.yf-course .yf-stickybar__price{color:var(--yf-ink)}
.yf-course .yf-stat__k,
.yf-course .yf-muted,
.yf-course .yf-currmeta,
.yf-course .yf-tutor__role,
.yf-course .yf-fineprint,
.yf-course .yf-price-note{color:var(--yf-muted)}
.yf-course .yf-panel,
.yf-course .yf-curr,
.yf-course .yf-enroll,
.yf-course .yf-stats{background:var(--yf-surface)}
.yf-course .yf-topic__head{background:var(--yf-surface-2);color:var(--yf-ink)}
.yf-course .yf-lesson,
.yf-course .yf-lesson__title a,
.yf-course .yf-bullets li,
.yf-course .yf-learn li,
.yf-course .yf-incl li,
.yf-course .yf-tutor__bio{color:var(--yf-ink-2)}

/* الأزرار: نمنع القالب من التحكم بها */
.yf-course a.yf-btn,
.yf-course a.yf-btn--primary{text-decoration:none}
.yf-course a.yf-btn--primary,
.yf-course a.yf-btn--primary:hover,
.yf-course a.yf-btn--primary:focus{background:var(--yf-brand);color:var(--yf-on-brand)}
.yf-course a.yf-btn--ghost,
.yf-course a.yf-btn--ghost:hover{background:transparent;color:var(--yf-ink)}

/* الصور الرمزية */
.yf-course .yf-byline img{width:30px;height:30px;border-radius:50%;flex:none}
.yf-course .yf-tutor__avatar img{width:132px;height:132px;border-radius:12px;object-fit:cover}

/* لا يوجد كارد فارغ: إن لم يكن هناك محتوى في الكارد لا نعرضه */
.yf-course .yf-enroll__body:empty{display:none}
.yf-course .yf-enroll:empty{display:none}


/* شريط الإحصائيات: حدود صحيحة مهما كان عدد الخانات */
.yf-course .yf-stat{border-inline-start:1px solid var(--yf-line)}
.yf-course .yf-stat:first-child{border-inline-start:none}
.yf-course .yf-stat:last-child{border-inline-start:1px solid var(--yf-line)}
@media (max-width:860px){
  .yf-course .yf-stat,
  .yf-course .yf-stat:last-child{border-inline-start:none}
}


/* =========================================================================
   شريط الإثبات الاجتماعي (1.8.0)
   صور المشتركين + النجوم + سطر «حاصل على تقييم … من أكثر من … مشترك».
   يعيش داخل الهيرو الداكن في الصفحتين، فألوانه من متغيّرات الشريط الداكن.
   ========================================================================= */
.yf-course .yf-sp{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(255,255,255,.05);border:1px solid var(--yf-band-line);
  border-radius:999px;padding:8px 16px 8px 8px;max-width:100%}
.yf-course .yf-sp--archive{margin-top:16px}

.yf-course .yf-sp__faces{display:flex;align-items:center;flex:none}
.yf-course .yf-sp__faces .yf-sp__face{width:38px;height:38px;border-radius:50%;flex:none;
  object-fit:cover;background:var(--yf-band);border:2px solid var(--yf-band);
  box-shadow:0 2px 6px rgba(0,0,0,.35)}
/* التداخل: كل صورة تزحف تحت التي قبلها — margin-inline-start يصح في RTL وLTR معاً */
.yf-course .yf-sp__faces .yf-sp__face + .yf-sp__face{margin-inline-start:-11px}
.yf-course .yf-sp__faces .yf-sp__face--badge{border-color:var(--yf-brand);background:var(--yf-band)}

.yf-course .yf-sp__meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:14px;color:var(--yf-band-ink);line-height:1.6}
.yf-course .yf-sp__meta .yf-stars{font-size:15px}
.yf-course .yf-sp__meta .yf-stars__bg{color:var(--yf-band-line)}
.yf-course .yf-sp__txt{color:var(--yf-band-muted)}
.yf-course .yf-sp__txt .yf-num{color:var(--yf-band-ink);font-weight:600}

@media (max-width:640px){
  .yf-course .yf-sp{gap:10px;padding:7px 13px 7px 7px;width:100%;justify-content:flex-start}
  .yf-course .yf-sp__faces .yf-sp__face{width:32px;height:32px}
  .yf-course .yf-sp__faces .yf-sp__face + .yf-sp__face{margin-inline-start:-9px}
  .yf-course .yf-sp__meta{font-size:13px;gap:7px}
}