/* ==================================================
   🔥 HEADER CSS
   🔥  STYLE FINAL
   ================================================== */

*{
    box-sizing:border-box;
}

.site-header{
    width:100%;
    background:#111;
    position:sticky;
    top:0;
    z-index:999;
    font-family:Arial, sans-serif;
}

/* TOP BAR */

.header-main{
    width:100%;
    min-height:76px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:12px 18px;
    background:#111;
}

/* LOGO */

.header-logo{
    color:#fff;
    font-size:34px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
}

/* SEARCH */

.header-search{
    flex:1;
    display:flex;
    height:48px;
}

.header-search-input{
    flex:1;
    height:48px;
    border:none;
    outline:none;
    padding:0 18px;
    font-size:18px;
    border-radius:8px 0 0 8px;
    background:#fff;
    color:#111;
}

.header-search-btn{
    width:68px;
    height:48px;
    border:none;
    outline:none;
    cursor:pointer;
    background:#ff9800;
    color:#111;
    font-size:24px;
    border-radius:0 8px 8px 0;
}

.header-search-btn:hover{
    background:#ffa733;
}

/* RIGHT MENU */

.header-right{
    display:flex;
    align-items:center;
    gap:18px;
    color:#fff;
    white-space:nowrap;
}

.header-lang,
.header-login,
.header-orders,
.header-cart{
    color:#fff;
    font-size:14px;
    line-height:18px;
    cursor:pointer;
    padding:6px 8px;
    border:1px solid transparent;
}

.header-lang:hover,
.header-login:hover,
.header-orders:hover,
.header-cart:hover,
.header-logo:hover{
    border:1px solid #fff;
    border-radius:3px;
}

.header-cart{
    font-size:30px;
}

/* CATEGORY BAR */

.header-categories{
    width:100%;
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:10px 16px;
    background:#232f3e;
    scrollbar-width:thin;
}

.header-category-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 16px;
    font-size:15px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    background:transparent;
    color:#fff;
    cursor:pointer;
    white-space:nowrap;
    transition:.2s;
}

.header-category-chip:hover{
    background:#ff9800;
    color:#111;
    border-color:#ff9800;
}

/* MOBILE */

@media(max-width:768px){

    .header-main{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        padding:14px;
    }

    .header-logo{
        text-align:center;
        font-size:36px;
    }

    .header-search{
        width:100%;
        height:50px;
    }

    .header-search-input{
        height:50px;
        font-size:18px;
    }

    .header-search-btn{
        height:50px;
        width:70px;
    }

    .header-right{
        justify-content:center;
        gap:10px;
        flex-wrap:wrap;
        display:none;
    }

    .header-categories{
        background:#fff;
        padding:12px;
    }

    .header-category-chip{
        background:#f5f5f5;
        color:#111;
        border:1px solid #ddd;
        font-size:14px;
        padding:8px 18px;
    }

    .header-category-chip:hover{
        background:#ff9800;
        color:#fff;
    }

}