/* ==========================================================================
   HAYA PRO MENU
   TRANSPARENT OVER VIDEO
   FINAL — DESKTOP + MOBILE LOGO
   ========================================================================== */


/* ==========================================================================
   NAVBAR
   ========================================================================== */

.haya-pro-navbar {
    width: 100% !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    direction: rtl !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif !important;

    z-index: 99999 !important;
}


/* ==========================================================================
   DESKTOP HEADER
   ========================================================================== */

.haya-desktop-header-inner {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    max-width: 1240px !important;
    width: 100% !important;

    margin: 0 auto !important;
    padding: 0 20px !important;

    position: relative !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    z-index: 99999 !important;

    box-sizing: border-box !important;
}


/* ==========================================================================
   DESKTOP LOGO
   ========================================================================== */

.haya-desktop-logo {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    background: transparent !important;

    text-decoration: none !important;

    font-size: 20px !important;
    font-weight: 900 !important;

    letter-spacing: 1px !important;

    text-shadow:
        0 1px 5px rgba(0,0,0,0.5) !important;
}

.haya-desktop-logo img {
    display: block !important;

    width: auto !important;
    height: 44px !important;

    max-width: 220px !important;
    max-height: 60px !important;

    object-fit: contain !important;

    margin: 0 auto !important;
    padding: 0 !important;

    border: 0 !important;
}


/* ==========================================================================
   MAIN MENU
   ========================================================================== */

.haya-main-menu {
    list-style: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 15px !important;

    background: transparent !important;
}


.haya-menu-item {
    position: static !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: none !important;
}


.haya-menu-item > a {
    display: block !important;

    padding: 20px 18px !important;

    color: #ffffff !important;

    background: transparent !important;

    text-decoration: none !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    transition: color 0.3s ease !important;

    text-shadow:
        0 1px 5px rgba(0,0,0,0.5) !important;
}


.haya-menu-item > a:hover {
    color: #C49A6C !important;

    background: transparent !important;
}


.haya-arrow {
    color: #ffffff !important;

    background: transparent !important;
}


/* ==========================================================================
   MEGA MENU
   ========================================================================== */

.haya-mega-dropdown {
    position: absolute !important;

    top: 100% !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    min-width: 100% !important;
    max-width: 100% !important;

    padding: 30px 0 !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transition:
        opacity 0.25s ease-in-out,
        visibility 0.25s ease-in-out !important;

    z-index: 99999 !important;
}


.haya-has-mega:hover .haya-mega-dropdown {
    opacity: 1 !important;

    visibility: visible !important;
}


/* ==========================================================================
   MEGA CONTAINER
   ========================================================================== */

.haya-mega-container {
    display: flex !important;

    justify-content: space-between !important;

    align-items: flex-start !important;

    gap: 40px !important;

    max-width: 1200px !important;

    margin: 0 auto !important;

    padding: 0 20px !important;

    box-sizing: border-box !important;

    background: transparent !important;
}


.haya-mega-col {
    flex: 1 !important;

    min-width: 200px !important;

    box-sizing: border-box !important;

    background: transparent !important;
}


.haya-mega-head {
    font-size: 16px !important;

    font-weight: 800 !important;

    color: #ffffff !important;

    background: transparent !important;

    margin: 0 0 15px 0 !important;

    padding-bottom: 8px !important;

    display: inline-block !important;

    border-bottom:
        2px solid #C49A6C !important;

    text-shadow:
        0 1px 5px rgba(0,0,0,0.5) !important;
}


/* ==========================================================================
   MEGA LINKS
   ========================================================================== */

.haya-mega-links {
    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

    background: transparent !important;
}


.haya-mega-links li {
    margin-bottom: 10px !important;

    background: transparent !important;
}


.haya-mega-links a {
    display: block !important;

    color: #ffffff !important;

    background: transparent !important;

    text-decoration: none !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    transition: all 0.2s ease !important;

    text-shadow:
        0 1px 5px rgba(0,0,0,0.5) !important;
}


.haya-mega-links a:hover {
    color: #C49A6C !important;

    padding-right: 4px !important;
}


/* ==========================================================================
   PROMO BANNER
   ========================================================================== */

.haya-mega-banner-col {
    flex: 1.2 !important;

    max-width: 320px !important;

    background: transparent !important;
}


.haya-mega-banner {
    position: relative !important;

    display: block !important;

    height: 160px !important;

    border-radius: 8px !important;

    overflow: hidden !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.08) !important;
}


.haya-mega-banner img {
    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;
}


.haya-banner-overlay {
    position: absolute !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    padding: 12px !important;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,0.85)
        ) !important;

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    text-align: center !important;
}


/* ==========================================================================
   MOBILE BAR
   ========================================================================== */

.haya-mobile-bar {
    display: none !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    height: 64px !important;

    padding: 12px 18px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    align-items: center !important;
    justify-content: space-between !important;

    background: transparent !important;

    border: none !important;
    box-shadow: none !important;

    z-index: 99999 !important;
}


.haya-mobile-toggle,
.haya-mobile-cart {
    display: flex !important;

    align-items: center !important;

    background: transparent !important;

    border: none !important;

    padding: 5px !important;

    color: #ffffff !important;

    cursor: pointer !important;

    text-shadow:
        0 1px 5px rgba(0,0,0,0.5) !important;

    z-index: 3 !important;
}


/* ==========================================================================
   MOBILE LOGO
   ========================================================================== */

.haya-mobile-logo {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: auto !important;
    max-width: 180px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    background: transparent !important;

    text-decoration: none !important;

    font-size: 20px !important;
    font-weight: 900 !important;

    letter-spacing: 1px !important;

    text-shadow:
        0 1px 5px rgba(0,0,0,0.5) !important;

    z-index: 2 !important;
}


.haya-mobile-logo img {
    display: block !important;

    width: auto !important;
    height: 38px !important;

    max-width: 160px !important;
    max-height: 48px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


/* ==========================================================================
   DRAWER
   ========================================================================== */

.haya-drawer-header,
.haya-drawer-overlay {
    display: none !important;
}


/* ==========================================================================
   📱 MOBILE
   ========================================================================== */

@media (max-width: 991px) {

    /* ----------------------------------------------------------
       NAVBAR
       ---------------------------------------------------------- */

    .haya-pro-navbar {
        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

        z-index: 99999 !important;
    }


    /* ----------------------------------------------------------
       MOBILE BAR
       ---------------------------------------------------------- */

    .haya-mobile-bar {
        display: flex !important;

        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        height: 64px !important;

        padding: 12px 18px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

        z-index: 99999 !important;
    }


    /* ----------------------------------------------------------
       DESKTOP LOGO HIDDEN ON MOBILE
       ---------------------------------------------------------- */

    .haya-desktop-logo {
        display: none !important;
    }


    /* ----------------------------------------------------------
       MOBILE LOGO
       ---------------------------------------------------------- */

    .haya-mobile-logo {
        display: flex !important;

        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

        transform: translate(-50%, -50%) !important;

        width: auto !important;

        max-width: 180px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .haya-mobile-logo img {
        display: block !important;

        width: auto !important;

        height: 38px !important;

        max-width: 160px !important;

        max-height: 48px !important;

        object-fit: contain !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* ----------------------------------------------------------
       DRAWER OVERLAY
       ---------------------------------------------------------- */

    .haya-drawer-overlay {
        display: block !important;

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        background:
            rgba(0,0,0,0.5) !important;

        z-index: 999998 !important;

        opacity: 0 !important;

        visibility: hidden !important;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease !important;
    }


    .haya-drawer-overlay.active {
        opacity: 1 !important;

        visibility: visible !important;
    }


    /* ----------------------------------------------------------
       DRAWER
       ---------------------------------------------------------- */

    .haya-menu-wrapper {
        position: fixed !important;

        top: 0 !important;

        right: -320px !important;

        width: 300px !important;

        height: 100vh !important;

        background:
            rgba(0,0,0,0.95) !important;

        z-index: 999999 !important;

        box-shadow:
            -5px 0 25px rgba(0,0,0,0.15) !important;

        transition:
            right 0.3s cubic-bezier(
                0.4,
                0,
                0.2,
                1
            ) !important;

        overflow-y: auto !important;
    }


    .haya-menu-wrapper.active {
        right: 0 !important;
    }


    /* ----------------------------------------------------------
       DRAWER HEADER
       ---------------------------------------------------------- */

    .haya-drawer-header {
        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        padding: 18px 20px !important;

        border-bottom:
            1px solid rgba(
                255,
                255,
                255,
                0.15
            ) !important;

        background: transparent !important;
    }


    .haya-drawer-title {
        font-weight: 800 !important;

        font-size: 16px !important;

        color: #ffffff !important;
    }


    .haya-drawer-close {
        background: transparent !important;

        border: none !important;

        font-size: 26px !important;

        cursor: pointer !important;

        color: #ffffff !important;
    }


    /* ----------------------------------------------------------
       MOBILE MENU
       ---------------------------------------------------------- */

    .haya-desktop-header-inner {
        flex-direction: column !important;

        padding: 0 !important;

        background: transparent !important;
    }


    .haya-main-menu {
        flex-direction: column !important;

        align-items: flex-start !important;

        width: 100% !important;

        padding: 10px 0 !important;

        gap: 0 !important;
    }


    .haya-menu-item {
        width: 100% !important;

        border-bottom:
            1px solid rgba(
                255,
                255,
                255,
                0.12
            ) !important;
    }


    .haya-menu-item > a {
        padding: 14px 20px !important;

        font-size: 15px !important;

        color: #ffffff !important;

        text-shadow: none !important;
    }


    /* ----------------------------------------------------------
       MOBILE MEGA MENU
       ---------------------------------------------------------- */

    .haya-mega-dropdown {
        position: static !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        padding: 15px 20px !important;

        display: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;
    }


    .haya-has-mega.open .haya-mega-dropdown {
        display: block !important;
    }


    .haya-mega-container {
        flex-direction: column !important;

        gap: 15px !important;

        padding: 0 !important;
    }


    .haya-mega-head {
        color: #ffffff !important;

        font-size: 14px !important;

        text-shadow: none !important;
    }


    .haya-mega-links a {
        color: #ffffff !important;

        font-size: 14px !important;

        padding: 5px 0 !important;

        text-shadow: none !important;
    }


    .haya-mega-banner-col {
        display: none !important;
    }
}


/* ==========================================================================
   🧹 ELEMENTOR SHORTCODE
   MENU MUST NOT RESERVE SPACE ABOVE VIDEO
   ========================================================================== */

.elementor-widget-shortcode:has(.haya-pro-navbar) {
    height: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    overflow: visible !important;
}


.elementor-widget-shortcode:has(.haya-pro-navbar)
> .elementor-widget-container {
    height: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;
}


.elementor-widget-shortcode:has(.haya-pro-navbar)
.elementor-shortcode {
    height: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;
}


/* ==========================================================================
   🎬 HERO / VIDEO
   ========================================================================== */

.elementor-element.elementor-element-43ac7f2 {
    margin-top: 0 !important;

    padding-top: 0 !important;
}


.elementor-element.elementor-element-929644f {
    margin-top: 0 !important;

    padding-top: 0 !important;
}


.elementor-element.elementor-element-929644f
.elementor-widget-container {
    margin: 0 !important;

    padding: 0 !important;
}


.elementor-element.elementor-element-929644f
.kimoshoes-hero-container {
    margin: 0 !important;

    padding: 0 !important;
}


.elementor-element.elementor-element-929644f
.kimoshoes-video-bg {
    margin: 0 !important;

    padding: 0 !important;
}


.elementor-element.elementor-element-929644f
.kimoshoes-video-bg video {
    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    object-fit: cover !important;
}


/* ==========================================================================
   🖥️ DESKTOP
   LOGO فوق + MENU تحت
   ========================================================================== */

@media (min-width: 992px) {

    .haya-pro-navbar {
        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        background: transparent !important;
    }


    .haya-desktop-header-inner {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        width: 100% !important;

        max-width: 1240px !important;

        margin: 0 auto !important;

        padding: 0 20px !important;

        box-sizing: border-box !important;
    }


    .haya-desktop-logo {
        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: auto !important;

        height: auto !important;

        margin: 10px 0 2px 0 !important;

        padding: 0 !important;

        background: transparent !important;
    }


    .haya-desktop-logo img {
        display: block !important;

        width: auto !important;

        height: 44px !important;

        max-width: 220px !important;

        max-height: 60px !important;

        object-fit: contain !important;

        margin: 0 auto !important;

        padding: 0 !important;
    }


    .haya-main-menu {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        gap: 15px !important;
    }


    .haya-menu-item > a {
        padding: 18px 18px !important;
    }
}


/* ==========================================================================
   📱 MOBILE FINAL
   ========================================================================== */

@media (max-width: 991px) {

    .haya-pro-navbar {
        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .haya-mobile-bar {
        display: flex !important;

        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        height: 64px !important;

        margin: 0 !important;

        padding: 12px 18px !important;

        box-sizing: border-box !important;

        background: transparent !important;
    }


    .haya-mobile-logo {
        display: flex !important;

        position: absolute !important;

        left: 50% !important;

        top: 50% !important;

        transform: translate(-50%, -50%) !important;

        align-items: center !important;

        justify-content: center !important;

        width: auto !important;

        max-width: 180px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .haya-mobile-logo img {
        display: block !important;

        width: auto !important;

        height: 38px !important;

        max-width: 160px !important;

        max-height: 48px !important;

        object-fit: contain !important;

        margin: 0 !important;

        padding: 0 !important;
    }
}
/* ==========================================================
   DESKTOP MENU ORDER
   Accueil → Produits → Offres → Contactez
   ========================================================== */

@media (min-width: 992px) {

    .haya-main-menu {
        direction: ltr !important;
    }

    .haya-main-menu > .haya-menu-item > a {
        direction: ltr !important;
        text-align: center !important;
    }
}