
/* ── مسافة بين أزرار الهيدر وشعار الموقع (تصميم متناسق) ── */
.site-header .header-branding{
    margin-inline:12px;
    flex-shrink:0;
}
.site-header .header-branding .logo-container,
.site-header .header-branding .logo-link{
    display:flex;
    align-items:center;
}
.site-header .float-btn,
.site-header .float-actions{
    flex-shrink:0;
}
@media (max-width:480px){
    .site-header .header-branding{ margin-inline:10px; }
}
@media (max-width:360px){
    .site-header .header-branding{ margin-inline:6px; }
}


/* ── شريط البريدكرمب — سطر رفيع مستقل تحت الهيدر مباشرة ── */
.breadcrumb-strip{
    width:100%;
    background:var(--primary-color,#fff);
    border-bottom:1px solid rgba(0,0,0,.07);
}
body.dark-mode .breadcrumb-strip{
    border-bottom-color:rgba(255,255,255,.08);
}
/* ── على الشاشات الكبيرة: القائمة الجانبية تبقى ظاهرة بشكل دائم بعرض
   280px (نفس منطق .site-header بملف site.css) — لازم نطبّق نفس الإزاحة
   على شريط البريدكرمب وإلا القائمة الجانبية تحجب جزئه الأيسر ── */
@media (min-width: 769px){
    body.sidebar-page .breadcrumb-strip,
    body.sidebar-page .pspkg-qn-wrap{
        margin-left:var(--sidebar-w,280px) !important;
        width:calc(100% - var(--sidebar-w,280px)) !important;
    }
    [dir="rtl"] body.sidebar-page .breadcrumb-strip,
    [dir="rtl"] body.sidebar-page .pspkg-qn-wrap{
        margin-left:0 !important;
        margin-right:var(--sidebar-w,280px) !important;
    }
}
.breadcrumb-strip .breadcrumb{
    max-width:1180px;
    margin:0 auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    padding:8px 20px;
    font-size:.82rem;
    color:var(--text-color,#555);
}
.breadcrumb-strip .breadcrumb a{
    color:var(--text-color,#555);
    text-decoration:none;
    opacity:.75;
    white-space:nowrap;
}
.breadcrumb-strip .breadcrumb a:hover{
    opacity:1;
    text-decoration:underline;
}
.breadcrumb-strip .breadcrumb i{
    font-size:.65rem;
    opacity:.5;
}
.breadcrumb-strip .breadcrumb .current-page{
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
@media (max-width:480px){
    .breadcrumb-strip .breadcrumb{ padding:7px 14px; font-size:.75rem; gap:4px; }
}


/* ── شريط التنقّل السريع — نسخة طبق الأصل من partials/header.php الأصلي ── */
.pspkg-qn-wrap{
    width:100%;
    background:transparent;
    padding:10px 14px 12px;
    box-sizing:border-box;
}
.pspkg-qn-inner{
    max-width:1180px;
    margin:0 auto;
    background:var(--glass-bg-light);
    border:1px solid var(--glass-border-light);
    border-radius:20px;
    backdrop-filter:blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
    box-shadow:0 4px 20px rgba(0,0,0,.06);
    display:flex;
    align-items:stretch;
    direction:ltr;
    overflow:hidden;
    transition:background .3s ease, border-color .3s ease;
}
body.dark-mode .pspkg-qn-inner{
    background:var(--glass-bg-dark);
    border-color:var(--glass-border-dark);
    box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.pspkg-qn-item{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    padding:12px 4px 10px;
    background:none;
    border:none;
    color:var(--text-color);
    text-decoration:none;
    cursor:pointer;
    position:relative;
    -webkit-tap-highlight-color:transparent;
    font-family:inherit;
}
.pspkg-qn-icon{
    width:26px; height:26px;
    width:clamp(20px,6vw,30px);
    height:clamp(20px,6vw,30px);
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;
    font-size:clamp(1rem,4.4vw,1.5rem);
    line-height:1;
}
.pspkg-qn-icon svg{ width:100%; height:100%; display:block; }
.pspkg-qn-icon img{ width:100%; height:100%; display:block; object-fit:contain; }
.pspkg-qn-label{
    font-size:.72rem;
    font-size:clamp(.56rem,2.6vw,.82rem);
    font-weight:500;
    color:var(--text-color);
    opacity:.75;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}
.pspkg-qn-item.active .pspkg-qn-label{ opacity:1; font-weight:700; }
.pspkg-qn-item-wide{ flex:1.6 1 0; }
.pspkg-qn-item-wide .pspkg-qn-label{ overflow:visible; text-overflow:clip; }
.pspkg-qn-underline{
    position:absolute;
    bottom:0; left:50%;
    transform:translateX(-50%) scaleX(0);
    width:58%;
    height:3px;
    border-radius:3px 3px 0 0;
    background:#2f7dfb;
    transition:transform .2s ease;
}
.pspkg-qn-item.active .pspkg-qn-underline{ transform:translateX(-50%) scaleX(1); }
.pspkg-qn-item.placeholder{
    opacity:.28;
    filter:grayscale(.9);
    pointer-events:none;
    cursor:not-allowed;
    -webkit-user-select:none;
    user-select:none;
}
.pspkg-qn-divider{
    flex:0 0 auto;
    width:1px;
    align-self:center;
    height:60%;
    background:var(--card-border);
    opacity:.6;
}
.pspkg-qn-ps{ color:#256AC0; }
.pspkg-qn-xbox{ color:#4AA32E; }
.pspkg-qn-pc{ color:#3D88A1; }
.pspkg-qn-android{ color:#6EA616; }
.pspkg-qn-grid{ color:#A15BDA; }

@media (max-width:480px){
    .pspkg-qn-wrap{ padding:8px 8px 10px; }
    .pspkg-qn-item{ padding:10px 2px 8px; gap:4px; }
}
@media (max-width:360px){
    .pspkg-qn-icon{ width:18px; height:18px; font-size:.9rem; }
    .pspkg-qn-label{ font-size:.5rem; }
}


#switchChannelBanner{
    position:fixed;
    top:var(--header-h, 62px);
    left:0;right:0;
    z-index:2090;
    isolation:isolate;
    will-change:transform;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 18px;
    background:var(--primary-color, #fff);
    border-bottom:2px solid #229ED9;
    box-shadow:0 4px 18px rgba(34,158,217,.18);
    transform:translateY(-110%) translateZ(0);
    opacity:0;
    pointer-events:none;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .28s ease, top .25s ease;
    font-size:.82rem;
}
#switchChannelBanner.sw-visible{
    transform:translateY(0) translateZ(0);
    opacity:1;
    pointer-events:auto;
}
/* على الشاشات الكبيرة السايد بار دائم بعرض 280px — نفس إزاحة
   .site-header و.breadcrumb-strip و#pushBanner، وإلا يحجب جزء الشريط ── */
@media (min-width: 769px){
    body.sidebar-page #switchChannelBanner{
        left:var(--sidebar-w,280px); right:0;
    }
    [dir="rtl"] body.sidebar-page #switchChannelBanner{
        left:0; right:var(--sidebar-w,280px);
    }
}
.sw-icon{
    flex-shrink:0;
    width:34px;height:34px;
    background:rgba(34,158,217,.12);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#229ED9;
    font-size:1rem;
}
.sw-text{
    flex:1;
    min-width:0;
    color:var(--text-color,#111);
    font-weight:600;
    line-height:1.35;
}
.sw-text span{
    display:block;
    font-size:.72rem;
    font-weight:400;
    color:#888;
    margin-top:1px;
}
.sw-join-btn{
    flex-shrink:0;
    padding:7px 16px;
    background:#229ED9;
    color:#fff;
    border:none;
    border-radius:20px;
    font-size:.78rem;
    font-weight:700;
    cursor:pointer;
    transition:opacity .2s,transform .15s;
    white-space:nowrap;
    font-family:inherit;
    display:flex;align-items:center;gap:6px;
    text-decoration:none;
}
.sw-join-btn:hover{opacity:.88;transform:scale(1.04);color:#fff;}
.sw-close-btn{
    flex-shrink:0;
    width:28px;height:28px;
    background:transparent;
    border:none;
    cursor:pointer;
    color:#aaa;
    font-size:.85rem;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:color .18s,background .18s;
    font-family:inherit;
}
.sw-close-btn:hover{color:var(--text-color,#111);background:rgba(0,0,0,.07);}
body.dark-mode .sw-close-btn:hover{background:rgba(255,255,255,.1);}
/* على الموبايل الصغير: النص والزر ياخذون مساحة أقل عشان الشريط ما ينكسر لسطرين طويلة */
@media (max-width: 480px){
    #switchChannelBanner{ padding:8px 12px; gap:8px; }
    .sw-text{ font-size:.76rem; }
    .sw-text span{ font-size:.66rem; }
    .sw-join-btn{ padding:6px 12px; font-size:.72rem; }
    .sw-join-btn span.sw-btn-full{ display:none; }
}


#pushBanner{
    position:fixed;
    top:var(--header-h, 62px);
    left:0;right:0;
    z-index:2100;
    isolation:isolate;
    will-change:transform;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 18px;
    background:var(--primary-color, #fff);
    border-bottom:2px solid var(--accent-color, #27ae60);
    box-shadow:0 4px 18px rgba(39,174,96,.18);
    transform:translateY(-110%) translateZ(0);
    opacity:0;
    pointer-events:none;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
    font-size:.82rem;
}
#pushBanner.pb-visible{
    transform:translateY(0) translateZ(0);
    opacity:1;
    pointer-events:auto;
}
/* على الشاشات الكبيرة السايد بار دائم بعرض 280px وz-index:2000 —
   نفس إزاحة .site-header و.breadcrumb-strip، وإلا يحجب جزء الشريط ── */
@media (min-width: 769px){
    body.sidebar-page #pushBanner{
        left:var(--sidebar-w,280px); right:0;
    }
    [dir="rtl"] body.sidebar-page #pushBanner{
        left:0; right:var(--sidebar-w,280px);
    }
}
.pb-icon{
    flex-shrink:0;
    width:34px;height:34px;
    background:rgba(39,174,96,.12);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--accent-color,#27ae60);
    font-size:1rem;
    animation:pb-bell .9s ease-in-out infinite alternate;
}
@keyframes pb-bell{
    0%{transform:rotate(-12deg);}
    100%{transform:rotate(12deg);}
}
.pb-text{
    flex:1;
    color:var(--text-color,#111);
    font-weight:600;
    line-height:1.35;
}
.pb-text span{
    display:block;
    font-size:.72rem;
    font-weight:400;
    color:#888;
    margin-top:1px;
}
.pb-enable-btn{
    flex-shrink:0;
    padding:7px 16px;
    background:var(--accent-color,#27ae60);
    color:#fff;
    border:none;
    border-radius:20px;
    font-size:.78rem;
    font-weight:700;
    cursor:pointer;
    transition:opacity .2s,transform .15s;
    white-space:nowrap;
    font-family:inherit;
    display:flex;align-items:center;gap:6px;
}
.pb-enable-btn:hover{opacity:.88;transform:scale(1.04);}
.pb-enable-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.pb-close-btn{
    flex-shrink:0;
    width:28px;height:28px;
    background:transparent;
    border:none;
    cursor:pointer;
    color:#aaa;
    font-size:.85rem;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:color .18s,background .18s;
    font-family:inherit;
}
.pb-close-btn:hover{color:var(--text-color,#111);background:rgba(0,0,0,.07);}
body.dark-mode .pb-close-btn:hover{background:rgba(255,255,255,.1);}
