/* =====================================================
 SELLER HEADER (PRODUCTION READY)
===================================================== */

.main-header{
    position:sticky;
    top:0;
    height:72px;

    background:rgba(255,255,255,.95);
    backdrop-filter:blur(14px);

    display:flex;
    align-items:center;

    border-bottom:1px solid #e5e7eb;

    z-index:1000000;
}

.header-inner{
    width:100%;
    max-width:1200px;

    height:100%;

    margin:0 auto;
    padding:0 16px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* LOGO */

.brand{
    flex-shrink:0;

    display:flex;
    align-items:center;

    text-decoration:none;

    overflow:hidden;
}

.brand-logo{
    display:block;
    height:50px;
    width:auto;
    max-width:190px;
    object-fit:contain;
    transition:transform .2s ease;
}

.brand:hover .brand-logo{
    transform:scale(1.02);
}

/* ================= HEADER MENU ================= */
/* =========================
   HEADER ACTIONS
========================= */

.header-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    position:relative;
}

/* Search */

.header-icon,
.menu-btn{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#f8fafc;

    border:1px solid #e5e7eb;

    color:#374151;

    cursor:pointer;

    text-decoration:none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .15s ease,
        box-shadow .2s ease;
}

.header-icon:hover,
.menu-btn:hover{

    background:#fff7ed;

    border-color:#fdba74;

    color:#f97316;

    box-shadow:
        0 4px 12px rgba(249,115,22,.12);
}

.header-icon:active,
.menu-btn:active{

    transform:scale(.95);

}

.header-icon i,
.menu-btn i{

    font-size:18px;

    line-height:1;

}

/* ================= DROPDOWN ================= */
.menu-dropdown{

    position:absolute;

    top:54px;
    right:0;

    min-width:220px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:16px;

    overflow:hidden;

    display:none;

    box-shadow:
        0 20px 45px rgba(15,23,42,.15);

    z-index:9999;

}

.menu-dropdown.open{
    display:block;
}

.menu-dropdown a{

    display:block;

    padding:13px 16px;

    color:#111827;

    font-size:14px;

    text-decoration:none;

    transition:.2s;

}

.menu-dropdown a:hover{

    background:#f8fafc;

}

.menu-dropdown .danger{

    color:#dc2626;

}
/* ================= MOBILE (96% WIDTH) ================= */
@media (max-width: 768px){
    .brand-logo{
        height:50px;
    }
    .header-icon,
    .menu-btn{
        width:46px;
        height:46px;
    }
    
}


/* =====================================================
   BUYER TOOLBAR
===================================================== */

.buyer-toolbar{

    width:100%;
    max-width:1200px;

    margin:8px auto;

    padding:0 10px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    overflow:visible;
}

/* =====================================================
   TOOLBAR BUTTON
===================================================== */

.icon-btn{

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    min-width:42px;
    height:42px;

    padding:0 12px;

    border:none;
    border-radius:999px;

    background:transparent;

    color:#0f172a;

    text-decoration:none;

    font-size:13px;
    font-weight:600;

    transition:
        background .2s,
        transform .15s,
        color .2s;

    overflow:visible;
}

.icon-btn:hover{

    background:#f8fafc;
}

.icon-btn:active{

    transform:scale(.96);
}

.icon-btn i{

    font-size:22px;
}

.icon-btn span{

    white-space:nowrap;
}

/* =====================================================
   ACTIVE ITEM
===================================================== */

.icon-btn::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-6px;

    width:0;
    height:3px;

    background:#0f172a;

    border-radius:2px;

    transform:translateX(-50%);

    transition:width .25s ease;
}

.icon-btn.active{

    color:#0f172a;

    font-weight:800;
}

.icon-btn.active::after{

    width:70%;
}

.icon-btn.active i{

    font-size:24px;
}

.icon-btn.active span{

    font-weight:800;
}

/* =====================================================
   CART
===================================================== */

.cart-btn{

    overflow:visible;
}

.cart-icon-wrapper{

    position:relative;

    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:visible;
}

.cart-count{

    position:absolute;

    top:-7px;
    right:-10px;

    min-width:18px;
    height:18px;

    padding:0 5px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:#f97316;
    color:#fff;

    font-size:10px;
    font-weight:800;

    line-height:1;

    border:2px solid #fff;

    z-index:100;
}

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

@media (max-width:768px){

    body{

        padding-bottom:84px;
    }

    .buyer-toolbar{

        position:fixed;

        left:0;
        right:0;
        bottom:0;

        width:100%;
        max-width:none;

        margin:0;

        padding:
            8px 4px
            calc(8px + env(safe-area-inset-bottom));

        background:#ffffff;

        border-top:1px solid #e5e7eb;

        justify-content:space-around;

        z-index:99999;
    }

    .icon-btn{

        width:52px;
        height:52px;

        padding:0;

        border-radius:14px;
    }

    .icon-btn span{

        display:none;
    }

    .icon-btn i{

        font-size:22px;
    }

    .icon-btn.active{

        background:#eef2ff;
    }

    .icon-btn.active::after{

        display:none;
    }

    .cart-icon-wrapper{

        width:30px;
        height:30px;
    }

    .cart-count{

        top:-5px;
        right:-8px;

        background:#ff3b30;

        box-shadow:
            0 2px 8px rgba(0,0,0,.18);
    }
}

/* =====================================================
   SMALL DEVICES
===================================================== */

@media (max-width:480px){

    .header-inner{

        padding:0 12px;
    }

    .buyer-toolbar{

        padding:
            8px 2px
            calc(8px + env(safe-area-inset-bottom));
    }

    .icon-btn{

        width:48px;
        height:48px;
    }

    
    .menu-btn{

        width:40px;
        height:40px;
    }


    .menu-btn i{

        font-size:18px;
    }
}