/* ============================================================
   KASB — صفحة "نبذة عن برنامج كسب"
   Bootstrap 5.0.2 (RTL) + custom layer
   ============================================================ */

:root{
    --navy:#052138;
    --navy-2:#052139;
    --peri:#98A6FF;
    --peri-soft:#F0EFFD;
    --card:#FCFCFE;
    --line:#E6E7E8;
    --sb-w:170px;
    --shell:1094px;
}

.sb-logo{
    text-align:center;
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
    margin-bottom:14px;
}
.sb-mark{ width:22px; height:31px; display:block; margin:0 auto 5px; fill:var(--navy); }
.sb-logo-ar{ font-size:9.5px; font-weight:700;  color:var(--navy); }
.sb-logo-en{
    font-family:"Cormorant Garamond",serif;
    font-size:6.5px;  color:var(--navy);
    margin-top:1px;
}

.sb-user{
    display:flex; align-items:center; justify-content:space-between; gap:7px;
    background:var(--peri-soft);
    border-radius:9px;
    padding:7px 8px;
    margin-bottom:16px;
}
.sb-user-txt{ display:flex; flex-direction:column; text-align:right; line-height:1.35; min-width:0; }
.sb-user-name{ font-size:9px; font-weight:700; }
.sb-user-id{ font-family:"Playfair Display",serif; font-size:7.5px; color:#6B7A93; direction:ltr; text-align:right; }
.sb-avatar-initial{
    flex:0 0 auto;
    width:20px; height:20px; border-radius:50%;
    background:linear-gradient(135deg,#6E7BEB,#4A3FD1);
    color:#fff; font-size:9px; font-weight:600;
    display:flex; align-items:center; justify-content:center;
}

/* nav */
.sb-nav{ display:flex; flex-direction:column; gap:2px; }
.sb-item{
    position:relative;
    display:flex; align-items:center; gap:8px;
    flex-direction:row-reverse;
    justify-content:flex-start;
    padding:8px 9px;
    border-radius:8px;
    font-size:10px; font-weight:600;
    color:var(--navy);
    text-decoration:none;
    transition:background .18s ease,color .18s ease;
}
.sb-item:hover{ background:var(--peri-soft); color:var(--navy); }
.sb-item.active{ background:var(--navy); color:#fff; }
.sb-item.active .sb-ico{ stroke:#fff; }
.sb-bar{ position:absolute; inset-inline-start:9px; width:1.5px; height:11px; background:#fff; border-radius:1px; }
.sb-ico{
    flex:0 0 auto;
    width:13px; height:13px;
    fill:none; stroke:var(--peri);
    stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

/* agent */
.sb-agent{ margin-top:auto; padding-top:34px; text-align:center; }
.sb-agent-photo{
    width:52px; height:52px; border-radius:50%;
    object-fit:cover;
    border:2px solid #fff;
    box-shadow:0 0 0 1.5px var(--peri);
    margin-bottom:10px;
}
.sb-agent-name{ font-size:11px; font-weight:700; }
.sb-agent-role{ font-size:7.5px; font-weight:600; color:var(--navy); margin-top:3px; }
.sb-agent-phone{ font-family:"Playfair Display",serif; font-size:8px; color:#5C6B85; margin-top:5px; direction:ltr; }

.sb-actions{ display:flex; gap:6px; margin-top:22px; }
.sb-out{
    flex:0 0 auto;
    width:28px; height:26px;
    border:0; border-radius:7px;
    background:linear-gradient(135deg,#4A4FC7,#2E2A9E);
    display:flex; align-items:center; justify-content:center;
    padding:0;
}
.sb-out .sb-ico{ stroke:#fff; width:12px; height:12px; }
.sb-lang{
    flex:1 1 auto;
    height:26px;
    border:0; border-radius:7px;
    background:linear-gradient(270deg,var(--navy) 0%,#4F4BD8 100%);
    color:#fff;
    font-family:"Cormorant Garamond",serif;
    font-size:12px;
}
.sb-foot{
    margin-top:10px; text-align:center;
    font-family:"Playfair Display",serif;
    font-size:7px; color:#6B7A93;
    direction:ltr;
}

/* ============================================================
   MAIN
   ============================================================ */
.main{ flex:1 1 auto; position:relative; overflow:hidden; padding-bottom:90px; }

/* decorative ك watermarks */
.watermarks{ position:absolute; inset:0 0 auto 0; height:960px; pointer-events:none; overflow:hidden; z-index:0; }
.wm{ position:absolute; fill:#E3E1F7; height:auto; }
.wm1{ inset-inline-end:-40px;  top:70px;  width:150px; }
.wm2{ inset-inline-start:-30px; top:40px;  width:120px; }
.wm3{ inset-inline-start:60px;  top:210px; width:70px; }
.wm4{ inset-inline-start:20px;  top:330px; width:95px; }
.wm5{ inset-inline-end:120px;   top:250px; width:60px; }
.wm6{ inset-inline-start:-10px; top:560px; width:130px; }
.wm7{ inset-inline-end:60px;    top:640px; width:105px; }

.shell{
    position:relative;
    z-index:1;
    width:var(--shell);
    max-width:calc(100% - 80px);
    margin:0 auto;
}

/* breadcrumb */
.crumbs{ display:flex; align-items:center; gap:8px; padding:14px 0 0; font-size:9px; }
.crumb-chip{
    background:#E9E7FA; color:var(--navy);
    border-radius:5px; padding:3px 9px; font-weight:600;
}
.crumb-sep{ color:#9AA5B8; }
.crumb-now{ color:var(--navy); font-weight:600; }

/* ── hero lockup ──────────────────────────────────────────── */
.hero{
    display:flex; align-items:center; justify-content:center;
    gap:26px;
    padding:44px 0 66px;
}
.bg-letter
{
    background-image: url("../images/k-letter-bg.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}
.hero-mark{ width:260px; height:auto; }
.hero-txt{ text-align:center; }
.hero-ar{ font-size:56px; font-weight:700; line-height:1.05;  }
.hero-en{
    font-family:"Cormorant Garamond",serif;
    font-size:30px; font-weight:500;
    margin-top:6px;
}
.hero-sub{ display:flex; align-items:center; gap:9px; margin-top:9px; }
.hero-sub i{ flex:1 1 auto; height:2px; background:var(--navy); }
.hero-sub span{ font-size:9px; font-weight:600;  white-space:nowrap; }

/* ── about ────────────────────────────────────────────────── */
.about{ text-align:right; }
.h-page{ font-size:40px; font-weight:700; margin:0;  }
.h-eyebrow{
    font-size:19px; font-weight:700; color:var(--peri);
     margin:26px 0 12px;
}
.lede{ font-size:16.5px; line-height:2.05; margin:0; max-width:100%; }

/* ── terms card ───────────────────────────────────────────── */
.terms{
    margin-top:38px;
    border-radius:14px;
    background:linear-gradient(270deg,var(--navy) 0%,var(--peri) 100%);
    color:#fff;
    padding:26px 32px 30px;
}
.terms-title{ font-size:19px; font-weight:700; margin:0; text-align:right; }
.terms-rule{ border:0; border-top:1px solid rgba(255,255,255,.35); margin:14px 0 20px; opacity:1; }
.terms-cols{ align-items:flex-start; }
.terms-col ul{ margin:0; padding:0; list-style:none; }
.terms-col li{
    position:relative;
    padding-inline-start:0;
    padding-inline-end:16px;
    font-size:15px;
    line-height:1.95;
    margin-bottom:10px;
}
.terms-col li::before{
    content:"";
    position:absolute; right:-20px; top:12px;
    width:4.5px; height:4.5px; border-radius:50%;
    background:#fff;
}
.terms-col:first-child{ padding-inline-end:0; padding-inline-start:38px; }
.terms-col:last-child{ padding-inline-start:0; padding-inline-end:0; }

/* ── section heading with rules ───────────────────────────── */
.sec-head{
    display:flex; align-items:center; gap:26px;
    margin:72px 0 34px;
}
.sec-head i{ flex:1 1 auto; height:1px; background:var(--peri); }
.sec-head h2{
    margin:0;
    font-size:25px; font-weight:700;
    color:var(--peri);
    white-space:nowrap;
}
.sec-head-dark h2{ color:var(--navy);  }

/* ── stats ────────────────────────────────────────────────── */
.stats{ display:flex; gap:11px; }
.stat{
    flex:1 1 0;
    min-width:0;
    height:235px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px;
    padding:14px 8px;
    text-align:center;
}
.stat-num{
    font-family:"Playfair Display",serif;
    font-size:27px; font-weight:600; color:var(--peri);
    line-height:1;
    direction:ltr;
}
.stat-lbl{ font-size:15px; font-weight:600; line-height:1.75; }
.stat-map{ gap:6px; }
.stat-map-art{ position:relative; display:flex; align-items:center; justify-content:center; }
.stat-map-img{ width:68px; height:auto; }
.stat-num-map{ position:absolute; inset-inline-start:14px; top:10px; font-size:35px; }
.stat-cities{ font-size:12px; line-height:1.7; color:var(--navy); }

/* ── top FAQ cards ────────────────────────────────────────── */
.qcards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
.qcard{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px 20px 26px;
    text-align:center;
    min-height:200px;
}
.qcard-n{
    font-family:"Playfair Display",serif;
    font-size:25px; font-weight:600; color:var(--peri);
    margin-bottom:14px;
}
.qcard h4{ font-size:13.5px; font-weight:700; line-height:1.7; margin:0 0 14px; }
.qcard p{ font-size:10.5px; line-height:1.85; margin:0; }

/* ── general FAQ accordion ────────────────────────────────── */
.faq-panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    padding:44px 40px;
}
.faq-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px 16px;
    align-items:start;
}
.faq-item{
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
}
.faq-head{
    width:100%;
    display:flex; align-items:center; gap:10px;
    background:transparent;
    border:0;
    padding:8px 10px;
    text-align:right;
}
.faq-n{
    flex:0 0 auto;
    min-width:29px; height:23px;
    border-radius:6px;
    background:var(--peri-soft);
    color:var(--navy);
    font-family:"Playfair Display",serif;
    font-size:12px; font-weight:600;
    display:flex; align-items:center; justify-content:center;
}
.faq-q{ flex:1 1 auto; font-size:11px; font-weight:600; line-height:1.55; }
.faq-chev{
    flex:0 0 auto;
    width:7px; height:15px;
    fill:var(--peri);
    transition:transform .25s ease;
}
.faq-head:not(.collapsed){ background:var(--peri-soft); }
.faq-head:not(.collapsed) .faq-chev{ transform:rotate(-90deg); fill:var(--navy); }
.faq-head:not(.collapsed) .faq-n{ background:var(--peri); color:#fff; }
.faq-body{
    padding:2px 12px 14px;
    font-size:10.5px;
    line-height:1.9;
    color:var(--navy);
    border-top:1px solid var(--line);
    padding-top:11px;
}
.faq-list{ margin:8px 0 0; padding-inline-start:16px; }
.faq-list li{ margin-bottom:4px; }

/* ── links ────────────────────────────────────────────────── */
a{ color:var(--navy); }
a:hover{ color:#3E4BC8; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1320px){
    .stats{ flex-wrap:wrap; }
    .stat{ flex:1 1 calc(25% - 11px); }
}
@media (max-width:1100px){
    .qcards{ grid-template-columns:repeat(2,1fr); }
    .faq-grid{ grid-template-columns:repeat(2,1fr); }
    .hero-ar{ font-size:42px; }
    .hero-en{ font-size:22px;  }
    .hero-mark{ width:150px; }
}
@media (max-width:800px){
    .app{ flex-direction:column; }
    .sidebar{ width:100%; flex:0 0 auto; min-height:0; position:static; }
    .shell{ max-width:calc(100% - 32px); }
    .stat{ flex:1 1 calc(50% - 11px); }
    .qcards,.faq-grid{ grid-template-columns:1fr; }
    .terms-cols>[class*="col-"]{ width:100%; }
    .terms-col:first-child{ padding-inline-start:0; }
    .h-page{ font-size:30px; }
    .faq-panel{ padding:24px 18px; }
}

.about-kasb-en .about,
.about-kasb-en .terms-title,
.about-kasb-en .faq-head
{
    text-align: left;
}
.about-kasb-en .terms-col li::before
{
    left: -20px;
}
/* ============================================================
   GUIDE VIDEOS — section head, step cards, popup player
   ============================================================ */

/* عنوان القسم مع الخطوط الجانبية */
.guide-head {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto 24px;
}
.guide-head i { flex: 1; border-top: 1px solid #c9c8e8; }
.guide-head h2 { margin: 0; font-size: 24px; font-weight: 800; }

/* حاوية القسم الداكنة */
.guide {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    background: linear-gradient(160deg, #4a4787, #37356b 45%, #232150);
    border-radius: 18px;
    padding: 34px 38px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}
.guide::before {
    content: '';
    position: absolute;
    top: -140px; inset-inline-end: -120px;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(152,166,255,.26), transparent 68%);
    pointer-events: none;
}

/* ── بطاقة الخطوة (زر يفتح المشغّل) ── */
.guide-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    padding: 20px 26px;
    background: rgba(235,235,255,.10);
    border: 1px solid rgba(199,210,254,.28);
    border-radius: 14px;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: background .25s, border-color .25s, box-shadow .25s;
}
.guide-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0; bottom: 0;
    width: 3px;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(#98A6FF, #5b63d6);
    opacity: 0;
    transition: opacity .25s;
}
.guide-card:hover {
    background: rgba(235,235,255,.18);
    border-color: rgba(199,210,254,.55);
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.guide-card:hover::before,
.guide-card.is-active::before { opacity: 1; }
.guide-card.is-active { border-color: rgba(152,166,255,.6); }
.guide-card:focus-visible { outline: 2px solid #98A6FF; outline-offset: 2px; }

/* الرقم + شارة التشغيل */
.guide-card__num {
    position: relative;
    flex-shrink: 0;
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.guide-card__num .n {
    font-size: 34px;
    color: #e6e8ff;
    font-family: Georgia, serif;
    line-height: 1;
}
.guide-card__num .yt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 24px;
    border-radius: 7px;
    background: #f00;
    box-shadow: 0 3px 10px rgba(255,0,0,.35);
    transition: transform .25s;
}
.guide-card:hover .yt { transform: scale(1.12); }

/* عنوان الخطوة */
.guide-card__title {
    width: 220px;
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 800;
    color: #dcd9ff;
    line-height: 1.7;
}

/* زر شاهد الفيديو */
.guide-card__watch {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(199,210,254,.4);
    border-radius: 999px;
    padding: 8px 18px;
    color: #e6e8ff;
    font-size: 13px;
    font-weight: 800;
    transition: background .25s, border-color .25s, color .25s;
}
.guide-card:hover .guide-card__watch {
    background: rgba(255,255,255,.92);
    border-color: transparent;
    color: #2a2760;
}

/* وصف الهدف */
.guide-card__desc {
    flex: 1;
    min-width: 260px;
    font-size: 13px;
    line-height: 1.9;
    color: #b9b7ea;
}
.guide-card__desc b { font-weight: 800; color: #dcd9ff; }

/* ============================================================
   POPUP (LIGHTBOX)
   ============================================================ */
html.vlb-lock, html.vlb-lock body { overflow: hidden; }

.vlb {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.vlb[hidden] { display: none !important; }

.vlb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6,5,20,.88);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    animation: vlbFade .25s ease;
    cursor: pointer;
}
@keyframes vlbFade { from { opacity: 0; } to { opacity: 1; } }

.vlb__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
    max-height: 100%;
    outline: none;
    animation: vlbPop .32s cubic-bezier(.22,1.2,.4,1);
}
@keyframes vlbPop {
    from { opacity: 0; transform: translateY(22px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* رأس النافذة */
.vlb__head {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    unicode-bidi: plaintext;
}
.vlb__step {
    flex-shrink: 0;
    background: rgba(152,166,255,.22);
    border: 1px solid rgba(152,166,255,.55);
    border-radius: 99px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.vlb__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vlb__x {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: background .2s, transform .2s, border-color .2s;
}
.vlb__x:hover { background: rgba(255,90,90,.85); border-color: transparent; transform: rotate(90deg); }
.vlb__x:focus-visible { outline: 2px solid #98A6FF; outline-offset: 2px; }

/* تنقّل الخطوات */
.vlb__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.vlb__nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid rgba(199,210,254,.35);
    border-radius: 99px;
    background: rgba(255,255,255,.07);
    color: #e6e8ff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, opacity .2s;
}
.vlb__nav:hover { background: rgba(255,255,255,.18); }
.vlb__nav:disabled { opacity: .3; cursor: default; }
.vlb__nav svg { flex-shrink: 0; }
/* السهم يتبع اتجاه الصفحة */
[dir="rtl"] .vlb__nav svg { transform: scaleX(-1); }

.vlb__dots { display: flex; align-items: center; gap: 7px; }
.vlb__dot {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.vlb__dot i {
    display: block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.32);
    transition: background .2s, transform .2s;
}
.vlb__dot:hover i { background: rgba(255,255,255,.7); }
.vlb__dot.is-on i { background: #98A6FF; transform: scale(1.7); box-shadow: 0 0 10px rgba(152,166,255,.9); }
.vlb__dot:focus-visible { outline: 2px solid #98A6FF; border-radius: 50%; }

/* ============================================================
   VIDEO PLAYER
   ============================================================ */
.vp {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 0;
    direction: ltr;
}
.vp [hidden] { display: none !important; }

.vp__frame {
    position: relative;
    flex: 0 1 auto;
    width: min(78vw, 1000px);
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background: #05040f;
    border-radius: 14px;
    overflow: hidden;
    outline: none;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
/* الفيديو الرأسي: الإطار بمقاس الفيديو نفسه بلا أشرطة سوداء */
.vp__frame.is-portrait {
    width: auto;
    height: min(74vh, 700px);
}
.vp__frame:focus-visible { box-shadow: 0 0 0 2px #98A6FF, 0 24px 60px rgba(0,0,0,.6); }

.vp__video {
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
    background: #05040f;
    cursor: pointer;
}

/* تبديل الأيقونات حسب الحالة */
.vp .ic-pause, .vp .ic-mute, .vp .ic-fsx { display: none; }
.vp.is-playing .vp__ico .ic-play { display: none; }
.vp.is-playing .vp__ico .ic-pause { display: block; }
.vp.is-muted .ic-vol { display: none; }
.vp.is-muted .ic-mute { display: block; }
.vp.is-fs .ic-fs { display: none; }
.vp.is-fs .ic-fsx { display: block; }

/* زر التشغيل الكبير */
.vp__big {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: 78px; height: 78px;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(16,13,44,.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), background .25s, color .25s, opacity .25s;
}
.vp__big::after {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(152,166,255,.7);
    animation: kPulse 2.4s ease-out infinite;
}
.vp__big .ic-play { margin-left: 5px; }
.vp__big:hover { background: #98A6FF; color: #14113a; transform: translate(-50%,-50%) scale(1.07); }
.vp.is-playing .vp__big,
.vp.is-ended .vp__big { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.82); }
@keyframes kPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } }

/* مؤشر التحميل */
.vp__spin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.vp__spin i {
    display: block;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: #98A6FF;
    animation: kSpin .8s linear infinite;
}
@keyframes kSpin { to { transform: rotate(360deg); } }

/* تنبيه سريع (سرعة / تقديم) */
.vp__toast {
    position: absolute;
    left: 50%; top: 20%;
    transform: translate(-50%,6px);
    padding: 7px 14px;
    border-radius: 10px;
    background: rgba(8,6,26,.9);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.vp__toast.is-on { opacity: 1; transform: translate(-50%,0); }

/* رسالة خطأ */
.vp__err {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    text-align: center;
    background: rgba(6,5,20,.92);
    color: #ffd5d5;
    font-size: 14px;
    font-weight: 700;
    unicode-bidi: plaintext;
}

/* شاشة النهاية + العد التنازلي */
.vp__end {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6,5,22,.88);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: vlbFade .3s ease;
}
.vp__end-in { text-align: center; padding: 18px; unicode-bidi: plaintext; }
.vp__end-lbl {
    font-size: 11px;
    font-weight: 800;
    color: #98A6FF;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.vp__end-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 14px; }
.vp.is-last .vp__end-lbl,
.vp.is-last .vp__end-title,
.vp.is-last .vp__end-ring,
.vp.is-last [data-vp-act="next"],
.vp.is-last [data-vp-act="cancel"] { display: none; }

.vp__end-ring { position: relative; width: 52px; height: 52px; margin: 0 auto 14px; }
.vp__end-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vp__end-ring .r-bg { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 3; }
.vp__end-ring .r-fg { fill: none; stroke: #98A6FF; stroke-width: 3; stroke-linecap: round; }
.vp__end-ring span {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 16px; font-weight: 800; color: #fff;
}

.vp__end-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vp__btn {
    border: 1px solid rgba(199,210,254,.45);
    background: rgba(255,255,255,.08);
    color: #e6e8ff;
    border-radius: 99px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.vp__btn:hover { background: rgba(255,255,255,.2); }
.vp__btn--solid { background: #98A6FF; border-color: #98A6FF; color: #14113a; }
.vp__btn--solid:hover { background: #b3bdff; border-color: #b3bdff; }

/* ── أدوات التحكّم ── */
.vp__ui {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 30px 14px 11px;
    background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.38) 58%, transparent);
    transition: opacity .3s, transform .3s;
}
.vp.is-idle .vp__ui { opacity: 0; transform: translateY(12px); pointer-events: none; }
.vp.is-ended .vp__ui { opacity: 0; pointer-events: none; }

.vp__seek { position: relative; height: 16px; display: flex; align-items: center; cursor: pointer; outline: none; }
.vp__seek::before {
    content: '';
    position: absolute; left: 0; right: 0;
    height: 4px; border-radius: 99px;
    background: rgba(255,255,255,.24);
    transition: height .15s;
}
.vp__seek-buf, .vp__seek-fill {
    position: absolute; left: 0;
    height: 4px; width: 0;
    border-radius: 99px;
    transition: height .15s;
}
.vp__seek-buf { background: rgba(255,255,255,.32); }
.vp__seek-fill { background: linear-gradient(90deg, #98A6FF, #e8ebff); box-shadow: 0 0 10px rgba(152,166,255,.7); }
.vp__seek-dot {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(-50%) scale(0);
    box-shadow: 0 0 0 4px rgba(152,166,255,.35);
    transition: transform .16s;
}
.vp__seek:hover::before, .vp__seek:hover .vp__seek-buf, .vp__seek:hover .vp__seek-fill { height: 6px; }
.vp__seek:hover .vp__seek-dot, .vp__seek:focus-visible .vp__seek-dot { transform: translateX(-50%) scale(1); }
.vp__seek-tip {
    position: absolute;
    bottom: 20px; left: 0;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(8,6,26,.94);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.vp__seek:hover .vp__seek-tip { opacity: 1; }

.vp__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.vp__grp { display: flex; align-items: center; gap: 2px; }

.vp__ico {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.vp__ico:hover { background: rgba(255,255,255,.16); }
.vp__ico:active { transform: scale(.92); }
.vp__ico:focus-visible { outline: 2px solid #98A6FF; }
.vp__rate { width: auto; padding: 0 9px; font-size: 12.5px; font-weight: 800; font-family: inherit; }

.vp__vol { display: flex; align-items: center; }
.vp__vol-range {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 4px;
    margin: 0 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, #fff var(--vol,100%), rgba(255,255,255,.28) var(--vol,100%));
    opacity: 0;
    cursor: pointer;
    transition: width .25s, opacity .2s;
}
.vp__vol:hover .vp__vol-range, .vp__vol-range:focus { width: 72px; opacity: 1; }
.vp__vol-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.vp__vol-range::-moz-range-thumb {
    width: 11px; height: 11px;
    border: 0; border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.vp__time {
    display: flex; align-items: center; gap: 5px;
    margin-inline-start: 8px;
    font-size: 12px;
    color: rgba(255,255,255,.82);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vp__time b { color: #fff; font-weight: 700; }
.vp__time span:first-of-type { opacity: .5; }

/* وضع مضغوط: الإطار الرأسي ضيّق فلا تتّسع كل الأزرار */
.vp.is-narrow .vp__ico { width: 30px; height: 30px; }
.vp.is-narrow [data-vp-act="pip"] { display: none; }
.vp.is-narrow .vp__time { margin-inline-start: 3px; font-size: 11px; }
.vp.is-narrow .vp__vol:hover .vp__vol-range { width: 46px; }
.vp.is-narrow .vp__ui { padding: 26px 9px 9px; }
.vp.is-narrow .vp__rate { padding: 0 6px; font-size: 11.5px; }
/* أضيق: يبقى التشغيل والصوت والوقت (التقديم عبر شريط الوقت ولوحة المفاتيح) */
.vp.is-tiny [data-vp-act="back10"],
.vp.is-tiny [data-vp-act="fwd10"] { display: none; }

/* ── الشاشات الصغيرة ── */
@media (max-width: 900px) {
    .guide { padding: 24px 18px 26px; }
    .guide-card { padding: 16px; gap: 12px 16px; }
    .guide-card__num { width: 54px; }
    .guide-card__num .n { font-size: 27px; }
    .guide-card__title { width: auto; flex: 1; min-width: 140px; font-size: 15px; }
    .guide-card__desc { min-width: 100%; order: 5; }
}
@media (max-width: 620px) {
    .guide-head h2 { font-size: 18px; }
    .guide-card__watch { padding: 7px 13px; font-size: 12px; }

    .vlb { padding: 12px; }
    .vlb__title { font-size: 14px; }
    .vlb__nav span { display: none; }
    .vlb__nav { padding: 7px 10px; }
    .vp__frame { width: 100%; }
    .vp__frame.is-portrait { height: min(68vh, 620px); width: auto; }
    .vp__big { width: 60px; height: 60px; }
    .vp__end-title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .guide-card, .vp__ui, .vp__big, .vlb__x { transition: none !important; }
    .vp__big::after { animation: none !important; }
    .vlb__backdrop, .vlb__dialog, .vp__end { animation: none !important; }
}