/* =========================================================
   AL REEM HEADER V5 - FINAL CLEAN RESPONSIVE
   Same Bootstrap/theme libraries
   File: public/assets/front-end/css/alreem-header.css
========================================================= */

.alreem-header{
    --ah-primary:#173f56;
    --ah-primary-dark:#102f41;
    --ah-gold:#d5aa48;
    --ah-white:#fff;
    --ah-soft:#f8fafb;
    --ah-border:#e1e7ec;
    --ah-text:#1e2d37;
    --ah-muted:#788692;
    position:relative;
    z-index:1030;
    width:100%;
    margin:0!important;
    padding:0!important;
    background:#fff;
}

.alreem-header,
.alreem-header *,
.alreem-header *:before,
.alreem-header *:after{
    box-sizing:border-box;
    box-shadow:none!important;
    text-shadow:none!important;
}

.alreem-header a{ text-decoration:none!important; }

/* topbar */
.alreem-header .topbar{
    min-height:36px;
    padding:0!important;
    margin:0!important;
    background:#f8fafb!important;
    border-bottom:1px solid var(--ah-border);
}
.alreem-header .topbar>.container{
    min-height:36px;
    display:flex;
    align-items:center;
}
.alreem-header .topbar-link{
    color:var(--ah-muted)!important;
    font-size:12.5px!important;
}
.alreem-header .topbar-link:hover,
.alreem-header .topbar i,
.alreem-header .topbar .text-primary{
    color:var(--ah-primary)!important;
}

/* main */
.alreem-header .alreem-main-header{
    position:relative!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
}
.alreem-header .alreem-main-navbar{
    min-height:82px!important;
    padding:7px 0!important;
    margin:0!important;
    background:#fff!important;
    border-bottom:1px solid var(--ah-border);
}
.alreem-header .alreem-main-row{
    display:grid!important;
    grid-template-columns:165px minmax(340px,1fr) auto;
    grid-template-areas:"logo search actions";
    align-items:center;
    gap:22px;
    min-height:68px;
}

/* one logo only */
.alreem-header .alreem-brand-logo{
    grid-area:logo;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:165px!important;
    min-width:165px!important;
    height:68px!important;
    margin:0!important;
    padding:0!important;
    line-height:0!important;
    overflow:visible!important;
}
.alreem-header .alreem-brand-logo img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:158px!important;
    max-height:66px!important;
    object-fit:contain!important;
    object-position:center!important;
    aspect-ratio:auto!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
}

/* search */
.alreem-header .alreem-search{
    grid-area:search;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
}
.alreem-header .search_form,
.alreem-header .search_form>.d-flex{
    position:relative;
    width:100%;
}
.alreem-header .search-bar-input{
    width:100%!important;
    height:48px!important;
    padding-inline-start:17px!important;
    padding-inline-end:58px!important;
    color:var(--ah-text)!important;
    background:var(--ah-soft)!important;
    border:1px solid var(--ah-border)!important;
    border-radius:10px!important;
    outline:0!important;
    font-size:14px!important;
}
.alreem-header .search-bar-input::placeholder{
    color:#98a4ae!important;
    opacity:1;
}
.alreem-header .search-bar-input:focus{
    background:#fff!important;
    border-color:var(--ah-gold)!important;
}
.alreem-header .search_button{
    position:absolute!important;
    top:4px!important;
    inset-inline-end:4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;
    height:40px!important;
    padding:0!important;
    border:0!important;
    border-radius:8px!important;
    background:var(--ah-primary)!important;
    z-index:5!important;
}
.alreem-header .search_button:hover{ background:var(--ah-primary-dark)!important; }
.alreem-header .search_button .input-group-text{
    width:40px!important;
    height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}
.alreem-header .search_button i{
    color:#fff!important;
    font-size:18px!important;
}
.alreem-header .search-card{
    top:calc(100% + 7px)!important;
    width:100%!important;
    border:1px solid var(--ah-border)!important;
    border-radius:10px!important;
    background:#fff!important;
}

/* actions */
.alreem-header .alreem-actions{
    grid-area:actions;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    margin:0!important;
    white-space:nowrap;
}
.alreem-header .navbar-tool{ margin:0!important; }
.alreem-header .navbar-tool-icon-box,
.alreem-header .navbar-tool-icon-box.bg-secondary{
    position:relative;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    color:var(--ah-primary)!important;
    background:#fff!important;
    border:1px solid var(--ah-border)!important;
    border-radius:10px!important;
}
.alreem-header .navbar-tool:hover .navbar-tool-icon-box,
.alreem-header .navbar-tool-icon-box:hover{
    border-color:var(--ah-gold)!important;
}
.alreem-header .navbar-tool-icon{
    color:var(--ah-primary)!important;
    font-size:18px!important;
}
.alreem-header .navbar-tool-label{
    position:absolute!important;
    top:-7px!important;
    inset-inline-end:-7px!important;
    min-width:20px!important;
    height:20px!important;
    padding:0 5px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#173f56!important;
    background:var(--ah-gold)!important;
    border:2px solid #fff!important;
    border-radius:999px!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1!important;
}
.alreem-header #cart_items .navbar-tool-text,
.alreem-header #cart_items .cart-total,
.alreem-header #cart_items .cart-total-price{
    display:none!important;
}
.alreem-header .navbar-tool-text{
    margin-inline-start:7px!important;
    color:var(--ah-text)!important;
    font-size:12px!important;
}
.alreem-header .navbar-tool-text small{
    display:block;
    color:var(--ah-muted)!important;
    font-size:10.5px!important;
}
.alreem-header .img-profile{
    width:36px!important;
    height:36px!important;
    object-fit:cover!important;
}

/* desktop nav */
.alreem-header .alreem-nav-bar{
    min-height:46px!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
    background:var(--ah-primary)!important;
    border:0!important;
}
.alreem-header .alreem-nav-bar>.container{
    min-height:46px!important;
    display:flex;
    align-items:center;
}
.alreem-header #navbarCollapse{
    width:100%;
    min-height:46px;
    align-items:center;
}
@media(min-width:768px){
    .alreem-header #navbarCollapse{
        display:flex!important;
        visibility:visible!important;
        height:auto!important;
    }
}
.alreem-header .navbar-stuck-menu .navbar-nav{
    align-items:center;
    margin:0;
}
.alreem-header .navbar-stuck-menu .nav-link,
.alreem-header .navbar-stuck-menu .dropdown-toggle,
.alreem-header .navbar-stuck-menu button.dropdown-toggle{
    min-height:46px;
    display:inline-flex!important;
    align-items:center;
    gap:6px;
    padding:0 12px!important;
    color:rgba(255,255,255,.93)!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    font-size:13px!important;
    font-weight:600!important;
    white-space:nowrap;
}
.alreem-header .navbar-stuck-menu .nav-link:hover,
.alreem-header .navbar-stuck-menu .dropdown-toggle:hover{
    color:#fff!important;
    background:rgba(255,255,255,.08)!important;
}
.alreem-header .category-menu-toggle-btn{
    min-height:46px!important;
    padding-inline:15px!important;
    margin-inline-end:8px!important;
    color:#173f56!important;
    background:var(--ah-gold)!important;
}

/* dropdown */
.alreem-header .dropdown-menu{
    margin-top:7px!important;
    padding:7px!important;
    background:#fff!important;
    border:1px solid var(--ah-border)!important;
    border-radius:10px!important;
}
.alreem-header .dropdown-item{
    min-height:38px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 10px!important;
    color:var(--ah-text)!important;
    border-radius:7px!important;
    font-size:13px;
}
.alreem-header .dropdown-item:hover{
    color:var(--ah-primary)!important;
    background:#f7f9fa!important;
}

/* mega menu: overlay, zero layout height */
.alreem-header .alreem-megamenu{
    position:absolute!important;
    top:100%!important;
    right:0!important;
    left:0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    z-index:1050!important;
}

/* RTL/LTR */
html[dir="rtl"] .alreem-header{direction:rtl!important;}
html[dir="ltr"] .alreem-header{direction:ltr!important;}
html[dir="rtl"] .alreem-header .search-bar-input{text-align:right!important;}
html[dir="ltr"] .alreem-header .search-bar-input{text-align:left!important;}

/* laptop */
@media(min-width:992px) and (max-width:1399.98px){
    .alreem-header .alreem-main-row{
        grid-template-columns:145px minmax(360px,1fr) auto;
        gap:16px;
    }
    .alreem-header .alreem-brand-logo{
        width:145px!important;
        min-width:145px!important;
        height:62px!important;
    }
    .alreem-header .alreem-brand-logo img{
        max-width:138px!important;
        max-height:60px!important;
    }
}

/* tablet */
@media(min-width:768px) and (max-width:991.98px){
    .alreem-header .alreem-main-navbar{min-height:72px!important;}
    .alreem-header .alreem-main-row{
        grid-template-columns:112px minmax(220px,1fr) auto;
        gap:10px;
        min-height:58px;
    }
    .alreem-header .alreem-brand-logo{
        width:112px!important;
        min-width:112px!important;
        height:56px!important;
    }
    .alreem-header .alreem-brand-logo img{
        max-width:108px!important;
        max-height:54px!important;
    }
    .alreem-header .navbar-tool-text{display:none!important;}
    .alreem-header .navbar-tool-icon-box,
    .alreem-header .navbar-tool-icon-box.bg-secondary{
        width:39px!important;
        height:39px!important;
        min-width:39px!important;
    }
}

/* mobile */
@media(max-width:767.98px){
    .alreem-header .topbar{min-height:34px;}
    .alreem-header .topbar>.container{
        min-height:34px;
        padding-inline:12px!important;
    }
    .alreem-header .topbar-link{font-size:11.5px!important;}

    .alreem-header .alreem-main-navbar{
        min-height:auto!important;
        padding:8px 0!important;
    }
    .alreem-header .alreem-main-row{
        display:grid!important;
        grid-template-columns:40px minmax(78px,1fr) auto;
        grid-template-areas:
            "menu logo actions"
            "search search search";
        align-items:center!important;
        column-gap:8px!important;
        row-gap:8px!important;
        min-height:0!important;
        padding-inline:11px!important;
    }

    .alreem-header .alreem-mobile-menu-toggle{
        grid-area:menu;
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        margin:0!important;
        padding:0!important;
        background:#fff!important;
        border:1px solid var(--ah-border)!important;
        border-radius:9px!important;
    }

    .alreem-header .alreem-brand-logo{
        grid-area:logo;
        justify-self:center!important;
        width:96px!important;
        min-width:96px!important;
        height:46px!important;
    }
    .alreem-header .alreem-brand-logo img{
        max-width:92px!important;
        max-height:44px!important;
    }

    .alreem-header .alreem-actions{
        grid-area:actions;
        gap:5px!important;
        justify-self:end!important;
    }
    .alreem-header .navbar-tool-text{display:none!important;}
    .alreem-header .navbar-tool-icon-box,
    .alreem-header .navbar-tool-icon-box.bg-secondary{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        border-radius:9px!important;
    }

    .alreem-header .alreem-search{
        grid-area:search;
        display:block!important;
        width:100%!important;
        min-width:0!important;
    }
    .alreem-header .search-bar-input{
        height:42px!important;
        padding-inline-start:13px!important;
        padding-inline-end:48px!important;
        font-size:12.5px!important;
    }
    .alreem-header .search_button{
        top:3px!important;
        inset-inline-end:3px!important;
        width:36px!important;
        height:36px!important;
    }
    .alreem-header .search_button .input-group-text{
        width:36px!important;
        height:36px!important;
    }

    /* nav consumes no vertical space */
    .alreem-header .alreem-nav-bar{
        min-height:0!important;
        height:0!important;
        margin:0!important;
        padding:0!important;
        background:transparent!important;
    }
    .alreem-header .alreem-nav-bar>.container{
        min-height:0!important;
        height:0!important;
        padding:0!important;
    }

    /* drawer */
    .alreem-header #navbarCollapse{
        position:fixed!important;
        top:0!important;
        bottom:0!important;
        width:min(88vw,330px)!important;
        height:100vh!important;
        min-height:100vh!important;
        padding:18px 16px 22px!important;
        margin:0!important;
        background:#fff!important;
        overflow-y:auto!important;
        z-index:1100!important;
    }
    html[dir="rtl"] .alreem-header #navbarCollapse{right:0!important;left:auto!important;}
    html[dir="ltr"] .alreem-header #navbarCollapse{left:0!important;right:auto!important;}
    .alreem-header #navbarCollapse:not(.show){display:none!important;}
    .alreem-header #navbarCollapse.show{display:block!important;}

    .alreem-header #navbarCollapse .navbar-nav{
        width:100%!important;
        display:block!important;
        margin:0!important;
    }
    .alreem-header #navbarCollapse .nav-item{
        width:100%;
        border-bottom:1px solid #edf1f3;
    }
    .alreem-header #navbarCollapse .nav-link,
    .alreem-header #navbarCollapse .dropdown-toggle,
    .alreem-header #navbarCollapse .dropdown-item{
        width:100%!important;
        min-height:44px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        padding:9px 4px!important;
        color:var(--ah-text)!important;
        background:#fff!important;
        border:0!important;
        border-radius:0!important;
        font-size:13px!important;
        text-align:inherit!important;
    }

    .alreem-header .alreem-megamenu{display:none!important;}
}

/* small mobile */
@media(max-width:480px){
    .alreem-header .alreem-main-row{
        grid-template-columns:38px minmax(70px,1fr) auto;
        padding-inline:9px!important;
        column-gap:6px!important;
    }
    .alreem-header .alreem-brand-logo{
        width:84px!important;
        min-width:84px!important;
        height:42px!important;
    }
    .alreem-header .alreem-brand-logo img{
        max-width:81px!important;
        max-height:40px!important;
    }
    .alreem-header .alreem-mobile-menu-toggle,
    .alreem-header .navbar-tool-icon-box,
    .alreem-header .navbar-tool-icon-box.bg-secondary{
        width:36px!important;
        height:36px!important;
        min-width:36px!important;
    }
}