/* =========================================================
   WAFRA PERFORMANCE — hero-visual-fix.css
   Static CSS extracted from Blade.
   ========================================================= */

/* ============================================================
   WAFRA HERO
   VISUAL ONLY — NO SLIDER / VIDEO LOGIC TOUCHED
   ============================================================ */


/* ============================================================
   DESKTOP — REDUCE HERO HEIGHT
   ============================================================ */

@media(min-width:992px){

    html body.tpl-zakas
    .zk-dashhero,

    html body.tpl-zakas
    .zk-dashhero__desktop,

    html body.tpl-zakas
    .zk-dashhero__desktop
    .zk-dashhero__slide,

    html body.tpl-zakas
    .zk-dashhero__desktop
    .zk-dashhero__media{

        height:
            680px !important;

        min-height:
            680px !important;

        max-height:
            680px !important;
    }


    html body.tpl-zakas
    .zk-dashhero__desktop
    .zk-dashhero__media img,

    html body.tpl-zakas
    .zk-dashhero__desktop
    .zk-dashhero__media video{

        width:
            100% !important;

        height:
            100% !important;

        object-fit:
            cover !important;
    }


    /* ========================================================
       TITLE — FORCE ONE LINE ON DESKTOP
       ======================================================== */

    html body.tpl-zakas
    .zk-dashhero__desktop
    .zk-dashhero__copy h1,

    html body.tpl-zakas
    .zk-dashhero__desktop
    .zk-dashhero__copy h2,

    html body.tpl-zakas
    .zk-dashhero__desktop
    .zk-dashhero__copy h3{

        width:
            max-content;

        max-width:
            720px !important;

        white-space:
            nowrap !important;

        font-size:
            clamp(
                34px,
                3vw,
                53px
            ) !important;

        line-height:
            1.15 !important;
    }

}


/* ============================================================
   CTA — "اكتشف الآن" AS REAL GREEN BUTTON
   ============================================================ */

html body.tpl-zakas
.zk-dashhero
.zk-dashhero__cta{

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        10px !important;

    min-height:
        47px !important;

    padding:
        0 20px !important;

    border:
        1px solid
        rgba(255,255,255,.18) !important;

    border-radius:
        9px !important;

    background:
        #237447 !important;

    color:
        #ffffff !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    text-decoration:
        none !important;

    box-shadow:
        0 8px 22px
        rgba(16,74,43,.25) !important;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}


/* ICON INSIDE SAME BUTTON */

html body.tpl-zakas
.zk-dashhero
.zk-dashhero__cta::after{

    content:
        "←";

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        25px;

    flex:
        0 0 25px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.15);

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        900;

    line-height:
        1;
}


[dir="ltr"]
html body.tpl-zakas
.zk-dashhero
.zk-dashhero__cta::after{

    content:
        "→";
}


html body.tpl-zakas
.zk-dashhero
.zk-dashhero__cta:hover{

    background:
        #195e38 !important;

    color:
        #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 27px
        rgba(16,74,43,.32) !important;
}


/* ============================================================
   MOBILE
   Keep title responsive — never force one line on small screens
   ============================================================ */

@media(max-width:991px){

    html body.tpl-zakas
    .zk-dashhero__copy h1,

    html body.tpl-zakas
    .zk-dashhero__copy h2,

    html body.tpl-zakas
    .zk-dashhero__copy h3{

        white-space:
            normal !important;
    }


    html body.tpl-zakas
    .zk-dashhero
    .zk-dashhero__cta{

        min-height:
            44px !important;

        padding:
            0 17px !important;
    }

}


/* ============================================================
   WAFRA_HERO_DEVICE_AND_LOGO_FIX_V2
   ============================================================ */


/* DESKTOP HERO ONLY */

@media(min-width:992px){

    html body.tpl-zakas
    .zk-dashhero__desktop{

        display:
            block !important;
    }


    html body.tpl-zakas
    .zk-dashhero__mobile{

        display:
            none !important;
    }

}


/* MOBILE HERO ONLY */

@media(max-width:991px){

    html body.tpl-zakas
    .zk-dashhero__desktop{

        display:
            none !important;
    }


    html body.tpl-zakas
    .zk-dashhero__mobile{

        display:
            block !important;
    }

}


/* ============================================================
   HEADER LOGO
   No capsule / no background / no box
   ============================================================ */

html body.tpl-zakas
.zk-header
.site-branding{

    background:
        transparent !important;
}


html body.tpl-zakas
.zk-header
.site-branding .logo{

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    min-height:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


html body.tpl-zakas
.zk-header
.site-branding .logo::before,

html body.tpl-zakas
.zk-header
.site-branding .logo::after{

    display:
        none !important;
}


html body.tpl-zakas
.zk-header
.zk-logo{

    display:
        block !important;

    width:
        auto !important;

    max-width:
        170px !important;

    max-height:
        48px !important;

    padding:
        0 !important;

    margin:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    object-fit:
        contain !important;
}


@media(max-width:991px){

    html body.tpl-zakas
    .zk-header
    .zk-logo{

        max-width:
            135px !important;

        max-height:
            40px !important;
    }

}

@media(max-width:767px){

    /* ROOT — this was the real remaining height */
    body.tpl-zakas .zk-cinema .zk-dashhero{
        position:relative !important;

        width:100% !important;

        height:520px !important;
        min-height:520px !important;
        max-height:520px !important;

        margin:0 !important;
        padding:0 !important;

        overflow:hidden !important;

        background:#090909 !important;
    }


    /* MOBILE DEVICE */
    body.tpl-zakas
    .zk-dashhero
    .zk-dashhero__mobile{

        position:relative !important;

        display:block !important;

        width:100% !important;

        height:520px !important;
        min-height:520px !important;
        max-height:520px !important;

        margin:0 !important;
        padding:0 !important;

        overflow:hidden !important;
    }


    /* SLIDE */
    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__slide{

        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        min-height:0 !important;
        max-height:none !important;

        overflow:hidden !important;
    }


    /* VIDEO AREA FILLS ENTIRE HERO */
    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__media{

        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        margin:0 !important;
        padding:0 !important;

        overflow:hidden !important;

        background:#090909 !important;
    }


    /* YOUTUBE COVER */
    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__media iframe{

        position:absolute !important;

        top:50% !important;
        left:50% !important;

        width:auto !important;
        height:100% !important;

        min-width:100% !important;
        min-height:100% !important;

        max-width:none !important;

        aspect-ratio:16 / 9 !important;

        border:0 !important;

        transform:
            translate(-50%,-50%) !important;
    }


    /* DIRECT VIDEO / IMAGE */
    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__media video,

    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__media img{

        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
        object-position:center !important;
    }


    /* GRADIENT OVER VIDEO */
    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__shade{

        position:absolute !important;

        inset:0 !important;

        z-index:2 !important;

        background:
            linear-gradient(
                0deg,
                rgba(0,0,0,.76) 0%,
                rgba(0,0,0,.20) 52%,
                rgba(0,0,0,.05) 100%
            ) !important;
    }


    /* TEXT OVER VIDEO — NOT A BLACK BLOCK */
    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__copy{

        position:absolute !important;

        z-index:3 !important;

        top:auto !important;
        right:18px !important;
        bottom:24px !important;
        left:18px !important;

        width:auto !important;

        margin:0 !important;
        padding:0 !important;

        background:transparent !important;

        transform:none !important;

        text-align:right !important;
    }


    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__copy h1{

        margin:0 !important;

        font-size:27px !important;
        line-height:1.18 !important;

        letter-spacing:0 !important;
    }


    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__copy p{

        margin:7px 0 0 !important;

        font-size:11px !important;
        line-height:1.55 !important;
    }


    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__cta{

        margin-top:12px !important;
    }


    body.tpl-zakas
    .zk-dashhero__mobile
    .zk-dashhero__progress{

        display:none !important;
    }

}


/* smaller phones */

@media(max-width:390px){

    body.tpl-zakas .zk-cinema .zk-dashhero,

    body.tpl-zakas
    .zk-dashhero
    .zk-dashhero__mobile{

        height:490px !important;
        min-height:490px !important;
        max-height:490px !important;
    }

}

@media(max-width:767px){

    body.tpl-zakas
    .zk-dashhero
    .zk-dashhero__mobile
    .zk-dashhero__media{

        overflow:hidden !important;
    }

    body.tpl-zakas
    .zk-dashhero
    .zk-dashhero__mobile
    .zk-dashhero__media iframe{

        transform:
            translate(-50%,-50%)
            scale(1.42) !important;

        transform-origin:
            center center !important;
    }

}