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

.topbar {
    /*background:rgba(255,0,0,.08) !important;*/
    width:100%;

    background:var(--header-bg);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--header-shadow);

    position:relative;

    z-index:9999999;

    box-sizing:border-box;

    overflow:visible;

}


/* خط سبز انتهای واقعی Header */

.topbar::after {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:#6F8F72;

    z-index:9999999;

}



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


.topbar-main {

    width:100%;

    min-height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-direction:row-reverse;

    padding:0 40px;

    box-sizing:border-box;

}



/* ==========================================
   BRAND
========================================== */


.brand {

    display:flex;

    flex-direction:row-reverse;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}



.brand img {

    width:175px;

    height:175px;

    object-fit:contain;

}



.logo {

    position:relative;

    color:var(--primary-dark);

    font-size:24px;

    font-weight:900;

    padding-left:22px;

    white-space:nowrap;

}



.logo::after {

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:4px;

    height:30px;

    border-radius:30px;

    background:
    linear-gradient(
        180deg,
        #6F8F72,
        #9BB58E,
        #D7C5A8
    );

}



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


.menu {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    flex:1;

}



.menu a {

    padding:8px 14px;

    border-radius:30px;

    color:var(--text);

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    white-space:nowrap;

}



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


.actions-wrapper {

    display:flex;

    align-items:center;

    gap:16px;

}



.reserve-btn {

    padding:10px 24px;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:white;

    text-decoration:none;

    font-size:15px;

    font-weight:900;

}



/* ==========================================
   HAMBURGER
========================================== */


.hamburger-btn {

    display:none;

    flex-direction:column;

    justify-content:space-between;

    width:27px;

    height:20px;

    padding:0;

    background:transparent;

    border:0;

}



.hamburger-btn span {

    width:100%;

    height:3px;

    border-radius:5px;

    background:var(--primary-dark);

}



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


.mobile-menu-overlay {


    position:fixed !important;


    inset:0;


    width:100vw;


    height:100vh;


    background:rgba(0,0,0,.40);


    backdrop-filter:blur(6px);


    -webkit-backdrop-filter:blur(6px);


    z-index:2147483647 !important;


    display:none;


    align-items:flex-start;


    isolation:isolate;


    transform:translateZ(0);


}



.mobile-menu-overlay.active {

    display:flex;

}



/* پنل منو */

.mobile-menu-card {


    width:100%;


    background:#fff;


    border-radius:0 0 28px 28px;


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


    transform:translateY(-100%);


    transition:.35s ease;


}



.mobile-menu-overlay.active 
.mobile-menu-card {

    transform:translateY(0);

}



/* Header منو */

.mobile-menu-header {


    height:70px;


    padding:0 22px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    background:#faf8f5;


}



.mobile-menu-title {


    font-size:17px;

    font-weight:900;

    color:var(--primary-dark);

}



.close-menu-btn {


    width:40px;

    height:40px;


    border-radius:50%;


    border:none;


    background:rgba(111,143,114,.12);


    font-size:28px;

}



/* لینک ها */

.mobile-links {


    display:flex;


    flex-direction:column;


    gap:8px;


    padding:18px;


}



.mobile-links a {


    height:50px;


    display:flex;


    align-items:center;


    padding:0 18px;


    border-radius:14px;


    color:var(--text);


    font-size:16px;


    font-weight:700;


    text-decoration:none;


}



.mobile-reserve-link {


    justify-content:center;


    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark)
    );


    color:#fff !important;

}



/* ==========================================
   TABLET
========================================== */


@media(max-width:992px){


    .menu {

        display:none;

    }



    .hamburger-btn {

        display:flex;

    }



    .topbar-main {

        min-height:75px;

        padding:8px 24px;

    }



    .brand img {

        width:75px;

        height:75px;

    }



    .logo {

        font-size:18px;

    }



}



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


@media(max-width:768px){


    .topbar-main {

        min-height:68px;

        padding:8px 14px;

    }



    .brand {

        gap:7px;

    }



    .brand img {

        width:44px;

        height:44px;

    }



    .logo {

        display:block;

        font-size:13px;

        padding-left:9px;

    }



    .logo::after {

        height:18px;

        width:3px;

    }



    .reserve-btn {

        padding:7px 12px;

        font-size:11px;

    }



}



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


@media(max-width:420px){


    .brand img {

        width:38px;

        height:38px;

    }



    .logo {

        font-size:11px;

    }



    .reserve-btn {

        padding:6px 9px;

        font-size:10px;

    }



}


.x-window,
.x-window-default,
.x-panel {
    z-index:2000000 !important;
}