/*==================================================
    HEADER
==================================================*/

.Site-Header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#ffffff;

    border-bottom:1px solid #eef2f7;

    z-index:9999;

    transition:.3s;

}

.Header-Container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:88px;

    gap:30px;

}

/*==================================================
    LOGO
==================================================*/

.Site-Logo{

    flex-shrink:0;

}

.Site-Logo a{

    font-size:32px;

    font-weight:800;

    color:var(--Primary);

    text-decoration:none;

}

/*==================================================
    RIGHT SIDE
==================================================*/

.Header-Right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex:1;

    gap:35px;

}

/*==================================================
    MENU
==================================================*/

.Main-Menu ul{

    display:flex;

    align-items:center;

    gap:34px;

    margin:0;

    padding:0;

    list-style:none;

}

.Main-Menu li{

    position:relative;

}

.Main-Menu a{

    color:#1f2937;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.Main-Menu a:hover{

    color:var(--Primary);

}

/*==================================================
    MEGA MENU
==================================================*/

.Has-Mega{

    position:relative;

}

.Mega-Menu{

    position:absolute;

    top:65px;

    left:0;

    display:none;

    width:720px;

    padding:30px;

    background:#ffffff;

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

    gap:30px;

}

.Has-Mega:hover .Mega-Menu{

    display:flex;

}

.Mega-Column{

    flex:1;

}

.Mega-Column h4{

    margin-bottom:15px;

    color:var(--Primary);

    font-size:18px;

}

.Mega-Column a{

    display:block;

    padding:8px 0;

    color:#555;

}

.Mega-Column a:hover{

    color:var(--Primary);

    padding-left:8px;

}

.Mobile-Language,
.Mobile-Catalog{

    display:none;

}

/*==================================================
    ACTIONS
==================================================*/

.Header-Actions{

    display:flex;

    align-items:center;

    gap:15px;

    flex-shrink:0;

}

/*==================================================
    LANGUAGE
==================================================*/

.Language-Dropdown select{

    height:46px;

    padding:0 16px;

    border:1px solid #dbe2ea;

    border-radius:10px;

    background:#fff;

    outline:none;

    cursor:pointer;

}

/*==================================================
    CATALOG BUTTON
==================================================*/

.Header-Catalog-Btn{

    display:flex;

    align-items:center;

    gap:10px;

    height:46px;

    padding:0 22px;

    background:var(--Primary);

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-weight:700;

    transition:.3s;

    white-space:nowrap;

}

.Header-Catalog-Btn:hover{

    background:#08365f;

    transform:translateY(-2px);

}

.Header-Catalog-Btn i{

    font-size:15px;

}

/*==================================================
    MOBILE TOGGLE
==================================================*/

#Menu-Toggle{

    display:none;

}

.Mobile-Toggle{

    display:none;

    width:46px;

    height:46px;

    border-radius:10px;

    background:#f5f7fb;

    cursor:pointer;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:1100px){

    .Header-Container{

        min-height:80px;

    }

    .Site-Logo a{

        font-size:28px;

    }

    .Header-Right{

        gap:20px;

    }

    .Main-Menu ul{

        gap:22px;

    }

    .Header-Catalog-Btn{

        padding:0 18px;

    }

}


/*==================================================
    MOBILE
==================================================*/

@media(max-width:991px){

    .Header-Container{

        min-height:74px;

        gap:15px;

    }

    .Site-Logo{

        flex:1;

    }

    .Site-Logo a{

        font-size:26px;

    }

    .Mobile-Toggle{

        display:flex;

        order:3;

        flex-shrink:0;

    }

    .Header-Actions{

        order:2;

    }

    
    .Header-Actions{

    display:none;

}

.Mobile-Language,
.Mobile-Catalog{

    display:block;

    width:100%;

    margin-top:15px;

}

.Mobile-Language select{

    width:100%;

    height:46px;

    border:1px solid #ddd;

    border-radius:8px;

    padding:0 12px;

    background:#fff;

}

.Mobile-Catalog .Header-Catalog-Btn{

    width:100%;

    justify-content:center;

}

    .Main-Menu{

        position:fixed;

        top:74px;

        left:-100%;

        width:320px;

        height:calc(100vh - 74px);

        background:#ffffff;

        transition:.35s;

        overflow-y:auto;

        box-shadow:15px 0 40px rgba(0,0,0,.10);

        padding:25px;

        z-index:9998;

    }

    #Menu-Toggle:checked ~ .Header-Right .Main-Menu{

        left:0;

    }

    .Main-Menu ul{

        flex-direction:column;

        align-items:flex-start;

        gap:0;

    }

    .Main-Menu li{

        width:100%;

        border-bottom:1px solid #f0f0f0;

    }

    .Main-Menu li:last-child{

        border:none;

    }

    .Main-Menu a{

        display:block;

        width:100%;

        padding:15px 0;

    }

    .Mega-Menu{

        position:static;

        display:block;

        width:100%;

        box-shadow:none;

        padding:15px 0 5px;

        border-radius:0;

        background:none;

    }

    .Mega-Column{

        margin-bottom:20px;

    }

    .Mega-Column h4{

        font-size:16px;

        margin-bottom:10px;

    }

    .Mega-Column a{

        padding:6px 0;

        font-size:14px;

    }

}


/*==================================================
    SMALL MOBILE
==================================================*/

@media(max-width:576px){

    .Header-Container{

        min-height:68px;

    }

    .Site-Logo a{

        font-size:23px;

    }

    .Main-Menu{

        top:68px;

        width:100%;

        height:calc(100vh - 68px);

    }

}

/* ==========================================================
   RTL - تغيير اتجاه المنيو (حل نهائي)
========================================================== */
[dir="rtl"] .Header-Container {
    flex-direction: row !important;
}

[dir="rtl"] .Header-Right {
    flex-direction: row !important;
}

/* ===== المنيو الرئيسي ===== */
[dir="rtl"] .Main-Menu {
    direction: rtl !important;
}

[dir="rtl"] .Main-Menu ul {
    flex-direction: row-reverse !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

[dir="rtl"] .Main-Menu li {
    direction: rtl !important;
    text-align: right !important;
}

[dir="rtl"] .Main-Menu a {
    text-align: right !important;
    direction: rtl !important;
}

/* ===== قائمة اللغة ===== */
[dir="rtl"] .Language-Dropdown {
    direction: rtl !important;
}

[dir="rtl"] .Language-Dropdown select {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 16px !important;
    padding-left: 35px !important;
    background-position: left 12px center !important;
}

/* ===== زر الكتالوج ===== */
[dir="rtl"] .Header-Catalog-Btn {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .Header-Catalog-Btn i {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* ===== الميجا منيو ===== */
[dir="rtl"] .Mega-Menu {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .Mega-Column {
    text-align: right !important;
    direction: rtl !important;
}

[dir="rtl"] .Mega-Column a {
    text-align: right !important;
}

[dir="rtl"] .Mega-Column a:hover {
    padding-left: 0 !important;
    padding-right: 8px !important;
}

/* ===== MOBILE RTL ===== */
@media (max-width: 991px) {
    [dir="rtl"] .Main-Menu {
        left: auto !important;
        right: -100% !important;
        transition: right 0.35s !important;
    }
    
    [dir="rtl"] #Menu-Toggle:checked ~ .Header-Right .Main-Menu {
        left: auto !important;
        right: 0 !important;
    }
    
    [dir="rtl"] .Main-Menu ul {
        flex-direction: column !important;
        align-items: flex-end !important;
    }
    
    [dir="rtl"] .Main-Menu li {
        text-align: right !important;
        width: 100% !important;
    }
    
    [dir="rtl"] .Main-Menu a {
        text-align: right !important;
        padding: 15px 0 !important;
    }
    
    [dir="rtl"] .Mega-Menu {
        right: 0 !important;
        left: auto !important;
        text-align: right !important;
    }
}