/* =========================================================
   AL HADATH AL KHALEEJI - PREMIUM SIDEBAR FINAL v1.4
   Strongly scoped to .ekh-premium-sidebar to avoid Jannah conflicts.
========================================================= */

.ekh-premium-sidebar,
.ekh-premium-sidebar *{
    box-sizing:border-box;
}

.ekh-premium-sidebar{
    width:100% !important;
    max-width:none !important;
    font-family:'Tajawal',Arial,sans-serif !important;
}

.ekh-premium-sidebar > section,
.ekh-premium-sidebar > .ekh-topic-banner{
    margin:0 0 26px !important;
}

/* ---------- Shared heading ---------- */
.ekh-premium-sidebar .ekh-side-box{
    position:relative;
    overflow:hidden;
    border-radius:22px !important;
    padding:21px !important;
    border:1px solid rgba(17,19,24,.08) !important;
    box-shadow:0 16px 38px rgba(17,19,24,.08) !important;
}

.ekh-premium-sidebar .ekh-side-head{
    position:relative;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin:0 0 17px !important;
    padding:0 0 13px !important;
    border-bottom:1px solid rgba(17,19,24,.08) !important;
}

.ekh-premium-sidebar .ekh-side-head:after{
    content:"";
    position:absolute;
    right:0;
    bottom:-1px;
    width:72px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,#c7192d,#ef4256);
}

.ekh-premium-sidebar .ekh-side-head h3{
    margin:0 !important;
    font-size:21px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    letter-spacing:-.1px;
}

/* Kill the old giant red ball from previous CSS and replace with a slim luxury accent */
.ekh-premium-sidebar .ekh-side-head > span{
    width:7px !important;
    height:30px !important;
    min-width:7px !important;
    border-radius:99px !important;
    background:linear-gradient(180deg,#ed3047,#a90f21) !important;
    box-shadow:0 7px 16px rgba(199,25,45,.20) !important;
}

/* =========================================================
   MOST READ - DARK SIGNATURE CARD
========================================================= */
.ekh-premium-sidebar .ekh-side-popular{
    background:
        radial-gradient(circle at 8% 5%,rgba(207,24,47,.20),transparent 18%),
        linear-gradient(160deg,#151619 0%,#0b0c0e 100%) !important;
    border-color:rgba(255,255,255,.07) !important;
    box-shadow:0 22px 52px rgba(0,0,0,.18) !important;
}

.ekh-premium-sidebar .ekh-side-popular .ekh-side-head{
    border-bottom-color:rgba(255,255,255,.10) !important;
}

.ekh-premium-sidebar .ekh-side-popular .ekh-side-head h3{
    color:#ffffff !important;
}

.ekh-premium-sidebar .ekh-side-popular ol{
    list-style:none !important;
    counter-reset:ekhpop;
    margin:0 !important;
    padding:0 !important;
}

.ekh-premium-sidebar .ekh-side-popular li{
    position:relative;
    counter-increment:ekhpop;
    padding:16px 54px 16px 4px !important;
    border-bottom:1px dashed rgba(255,255,255,.22) !important;
    transition:transform .2s ease;
}

.ekh-premium-sidebar .ekh-side-popular li:last-child{
    border-bottom:0 !important;
}

.ekh-premium-sidebar .ekh-side-popular li:hover{
    transform:translateX(-3px);
}

.ekh-premium-sidebar .ekh-side-popular li:before{
    content:counter(ekhpop,decimal-leading-zero);
    position:absolute;
    right:0;
    top:12px;
    color:#d9dce1 !important;
    font-size:25px !important;
    font-weight:800 !important;
    line-height:1 !important;
}

.ekh-premium-sidebar .ekh-side-popular li:first-child:before{
    color:#ef2440 !important;
}

.ekh-premium-sidebar .ekh-side-popular li a{
    color:#f4f5f7 !important;
    font-size:14.5px !important;
    font-weight:700 !important;
    line-height:1.75 !important;
    text-decoration:none !important;
}

.ekh-premium-sidebar .ekh-side-popular li a:hover{
    color:#ff5369 !important;
}

/* =========================================================
   TOPIC BANNERS - RESPONSIVE IMAGE, OPTIONAL TEXT
========================================================= */
.ekh-premium-sidebar .ekh-topic-banner{
    position:relative !important;
    display:block !important;
    width:100% !important;
    aspect-ratio:3 / 4 !important;
    min-height:0 !important;
    overflow:hidden !important;
    border-radius:25px !important;
    background:#111 !important;
    box-shadow:0 22px 54px rgba(0,0,0,.20) !important;
    text-decoration:none !important;
    isolation:isolate;
    transition:transform .30s ease,box-shadow .30s ease;
}

.ekh-premium-sidebar .ekh-topic-banner:hover{
    transform:translateY(-5px);
    box-shadow:0 28px 65px rgba(0,0,0,.26) !important;
}

.ekh-premium-sidebar .ekh-topic-banner-img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    margin:0 !important;
    border-radius:0 !important;
    transition:transform .40s ease;
}

.ekh-premium-sidebar .ekh-topic-banner:hover .ekh-topic-banner-img{
    transform:scale(1.018);
}

.ekh-premium-sidebar .ekh-topic-shade{
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.01) 0%,
        rgba(0,0,0,.01) 55%,
        rgba(0,0,0,.10) 74%,
        rgba(0,0,0,.48) 100%
    );
    pointer-events:none;
}

.ekh-premium-sidebar .ekh-banner-label{
    position:absolute !important;
    z-index:5 !important;
    top:18px !important;
    right:18px !important;
    display:inline-flex !important;
    align-items:center !important;
    min-height:32px !important;
    padding:6px 13px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#e52a42,#a70d20) !important;
    color:#fff !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1 !important;
    box-shadow:0 8px 20px rgba(199,25,45,.30) !important;
}

.ekh-premium-sidebar .ekh-banner-title{
    position:absolute !important;
    z-index:5 !important;
    right:24px !important;
    left:24px !important;
    bottom:82px !important;
    margin:0 !important;
    color:#fff !important;
    font-size:25px !important;
    line-height:1.5 !important;
    font-weight:800 !important;
    text-align:center !important;
    text-shadow:0 3px 14px rgba(0,0,0,.55) !important;
}

.ekh-premium-sidebar .ekh-banner-cta{
    position:absolute !important;
    z-index:5 !important;
    left:50% !important;
    bottom:20px !important;
    transform:translateX(-50%) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:118px !important;
    min-height:40px !important;
    padding:9px 18px !important;
    border-radius:999px !important;
    background:rgba(14,16,19,.76) !important;
    border:1px solid rgba(255,255,255,.30) !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    box-shadow:0 8px 22px rgba(0,0,0,.23) !important;
}

/* =========================================================
   POLL - PREMIUM FEATURE CARD
========================================================= */
.ekh-premium-sidebar .ekh-poll{
    background:
        radial-gradient(circle at 92% 0,rgba(199,25,45,.13),transparent 30%),
        linear-gradient(155deg,#ffffff,#fbf5f7) !important;
    border-color:rgba(199,25,45,.15) !important;
}

.ekh-premium-sidebar .ekh-poll .ekh-side-head h3{
    color:#8f1020 !important;
}

.ekh-premium-sidebar .ekh-poll-q{
    margin:0 0 16px !important;
    padding:16px 17px !important;
    border-radius:15px !important;
    background:linear-gradient(135deg,#181a1f,#292c32) !important;
    color:#fff !important;
    font-size:17px !important;
    line-height:1.75 !important;
    font-weight:800 !important;
    box-shadow:0 12px 28px rgba(0,0,0,.13) !important;
}

.ekh-premium-sidebar .ekh-poll-options{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
}

.ekh-premium-sidebar .ekh-poll-option{
    position:relative !important;
    overflow:hidden !important;
    width:100% !important;
    min-height:52px !important;
    border:1px solid #e4dfe1 !important;
    border-radius:13px !important;
    background:#fff !important;
    padding:0 14px !important;
    cursor:pointer !important;
    text-align:right !important;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.ekh-premium-sidebar .ekh-poll-option:hover{
    transform:translateX(-3px);
    border-color:#c7192d !important;
    box-shadow:0 9px 20px rgba(199,25,45,.09) !important;
}

.ekh-premium-sidebar .ekh-poll-label,
.ekh-premium-sidebar .ekh-poll-pct{
    position:relative !important;
    z-index:3 !important;
    font-family:inherit !important;
    font-weight:800 !important;
    font-size:13.5px !important;
    color:#25282d !important;
}

.ekh-premium-sidebar .ekh-poll-pct{
    float:left !important;
    color:#80858c !important;
}

.ekh-premium-sidebar .ekh-poll-bar{
    position:absolute !important;
    z-index:1 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    background:linear-gradient(90deg,rgba(199,25,45,.16),rgba(199,25,45,.05)) !important;
    transition:width .4s ease !important;
}

.ekh-premium-sidebar .ekh-poll-foot{
    display:flex !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-top:14px !important;
    padding-top:12px !important;
    border-top:1px dashed rgba(199,25,45,.16) !important;
    color:#7f848b !important;
    font-size:11.5px !important;
}

.ekh-premium-sidebar .ekh-poll-msg{
    color:#c7192d !important;
    font-weight:800 !important;
}

/* =========================================================
   ALBUM - DARK LAYERED CARD
========================================================= */
.ekh-premium-sidebar .ekh-album-box{
    background:linear-gradient(160deg,#15171c,#090a0d) !important;
    border-color:rgba(255,255,255,.07) !important;
    box-shadow:0 22px 52px rgba(0,0,0,.18) !important;
}

.ekh-premium-sidebar .ekh-album-box .ekh-side-head{
    border-bottom-color:rgba(255,255,255,.09) !important;
}

.ekh-premium-sidebar .ekh-album-box .ekh-side-head h3{
    color:#fff !important;
}

.ekh-premium-sidebar .ekh-album{
    position:relative !important;
    display:block !important;
    margin:10px 8px 8px !important;
    text-decoration:none !important;
}

.ekh-premium-sidebar .ekh-album-stack{
    position:absolute !important;
    right:10px !important;
    left:10px !important;
    height:100% !important;
    border-radius:16px !important;
    background:#363940 !important;
    transform:translateY(8px) rotate(.5deg) !important;
}

.ekh-premium-sidebar .ekh-album-stack-2{
    right:20px !important;
    left:20px !important;
    transform:translateY(15px) rotate(-.7deg) !important;
    background:#24272c !important;
}

.ekh-premium-sidebar .ekh-album img{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:100% !important;
    height:270px !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:16px !important;
    margin:0 !important;
}

.ekh-premium-sidebar .ekh-album-gradient{
    position:absolute !important;
    z-index:4 !important;
    inset:0 !important;
    border-radius:16px !important;
    background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.88) 100%) !important;
}

.ekh-premium-sidebar .ekh-album-count{
    position:absolute !important;
    z-index:5 !important;
    top:14px !important;
    left:14px !important;
    padding:6px 11px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#e42b42,#a90f21) !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:800 !important;
}

.ekh-premium-sidebar .ekh-album strong{
    position:absolute !important;
    z-index:5 !important;
    right:16px !important;
    left:16px !important;
    bottom:16px !important;
    color:#fff !important;
    font-size:20px !important;
    line-height:1.5 !important;
    font-weight:800 !important;
}

/* =========================================================
   LATEST NEWS - DARK WRAPPER + CLEAN WHITE CARDS
========================================================= */
.ekh-premium-sidebar .ekh-latest-box{
    background:
        radial-gradient(circle at 5% 4%,rgba(199,25,45,.15),transparent 18%),
        linear-gradient(160deg,#17191e,#0b0c0f) !important;
    border-color:rgba(255,255,255,.07) !important;
    box-shadow:0 22px 54px rgba(0,0,0,.19) !important;
}

.ekh-premium-sidebar .ekh-latest-box .ekh-side-head{
    border-bottom-color:rgba(255,255,255,.09) !important;
}

.ekh-premium-sidebar .ekh-latest-box .ekh-side-head h3{
    color:#fff !important;
}

.ekh-premium-sidebar .ekh-side-latest{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
}

.ekh-premium-sidebar .ekh-side-latest article{
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    gap:13px !important;
    align-items:center !important;
    min-height:104px !important;
    padding:10px !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:15px !important;
    background:#fff !important;
    box-shadow:0 8px 20px rgba(0,0,0,.10) !important;
    overflow:hidden !important;
    transition:transform .2s ease,box-shadow .2s ease;
}

.ekh-premium-sidebar .ekh-side-latest article:hover{
    transform:translateX(-3px);
    box-shadow:0 13px 28px rgba(0,0,0,.15) !important;
}

.ekh-premium-sidebar .ekh-side-thumb{
    display:block !important;
    width:112px !important;
    height:84px !important;
    overflow:hidden !important;
    border-radius:11px !important;
    background:#eef0f2 !important;
}

.ekh-premium-sidebar .ekh-side-thumb img{
    width:112px !important;
    height:84px !important;
    max-width:none !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:11px !important;
    margin:0 !important;
}

.ekh-premium-sidebar .ekh-side-latest-copy{
    min-width:0 !important;
}

.ekh-premium-sidebar .ekh-side-latest h4{
    margin:0 0 6px !important;
    font-size:14.5px !important;
    line-height:1.55 !important;
    font-weight:800 !important;
}

.ekh-premium-sidebar .ekh-side-latest h4 a{
    color:#23272d !important;
    text-decoration:none !important;
}

.ekh-premium-sidebar .ekh-side-latest h4 a:hover{
    color:#c7192d !important;
}

.ekh-premium-sidebar .ekh-side-latest small{
    color:#959aa1 !important;
    font-size:10.5px !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media(min-width:992px){
    .ekh-premium-sidebar{
        position:sticky !important;
        top:90px !important;
    }
}

@media(max-width:991px){
    .ekh-premium-sidebar{
        margin-top:28px !important;
        position:static !important;
    }

    .ekh-premium-sidebar .ekh-topic-banner{
        aspect-ratio:4 / 5 !important;
    }
}

@media(max-width:640px){
    .ekh-premium-sidebar .ekh-side-box{
        padding:16px !important;
        border-radius:18px !important;
    }

    .ekh-premium-sidebar .ekh-topic-banner{
        aspect-ratio:4 / 5 !important;
        border-radius:20px !important;
    }

    .ekh-premium-sidebar .ekh-banner-label{
        top:14px !important;
        right:14px !important;
    }

    .ekh-premium-sidebar .ekh-banner-title{
        right:18px !important;
        left:18px !important;
        bottom:74px !important;
        font-size:21px !important;
    }

    .ekh-premium-sidebar .ekh-banner-cta{
        bottom:18px !important;
    }

    .ekh-premium-sidebar .ekh-side-latest article{
        grid-template-columns:96px minmax(0,1fr) !important;
    }

    .ekh-premium-sidebar .ekh-side-thumb,
    .ekh-premium-sidebar .ekh-side-thumb img{
        width:96px !important;
    }

    .ekh-premium-sidebar .ekh-side-thumb{
        height:76px !important;
    }

    .ekh-premium-sidebar .ekh-side-thumb img{
        height:76px !important;
    }
}