/* =====================================================
   BUYER HEADER
   Production Ready
===================================================== */

/* =========================
   GLOBAL
========================= */

body{
    overflow-x:hidden;
}

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

.main-header{
    position:sticky;
    top:0;
    z-index:1000000;

    height:72px;

    display:flex;
    align-items:center;

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

    border-bottom:1px solid #e5e7eb;
}

.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{

    display:flex;
    align-items:center;

    text-decoration:none;

    flex-shrink:0;
}

.brand-logo{

    display:block;

    width:auto;
    height:50px;

    max-width:190px;

    object-fit:contain;

    transition:transform .2s ease;
}

.brand:hover .brand-logo{

    transform:scale(1.03);
}

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

.header-actions{

    position:relative;

    display:flex;
    align-items:center;

    gap:10px;

    flex-shrink:0;

    z-index:1000001;
}

/* =========================
   NOTIFICATION BUTTON
========================= */

.notification-btn{

    text-decoration:none;

    color:inherit;

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

    outline:none;

    -webkit-tap-highlight-color:transparent;
}

.notification-btn:focus,
.notification-btn:active{

    outline:none;
}

/* =========================
   BELL CONTAINER
========================= */

.notification-wrapper{

    position:relative;

    width:44px;
    height:44px;

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

    background:#ffffff;

    border:1px solid #d1d5db;
    border-radius:50%;

    color:#111827;

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

.notification-wrapper:hover{

    background:#f8fafc;

    border-color:#cbd5e1;
}

.notification-wrapper:active{

    transform:scale(.95);
}

.notification-wrapper i{

    font-size:20px;
}

/* =========================
   BADGE
========================= */

.notification-count{

    position:absolute;

    top:-4px;
    right:-4px;

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

    padding:0 5px;

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

    border-radius:999px;

    background:#ef4444;
    color:#ffffff;

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

    line-height:1;

    border:2px solid #ffffff;

    z-index:10;
}

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

.menu-btn{

    width:44px;
    height:44px;

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

    background:#eef2f7;

    border:1.5px solid #d1d5db;
    border-radius:50%;

    cursor:pointer;

    color:#0f172a;

    box-shadow:0 1px 3px rgba(0,0,0,.08);

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

.menu-btn:hover{

    background:#e5e7eb;

    box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.menu-btn:active{

    transform:scale(.95);
}

.menu-btn i{

    font-size:20px;

    font-weight:900;
}

/* =========================
   DROPDOWN
========================= */

.menu-dropdown{

    position:absolute;

    top:56px;
    right:0;

    width:260px;
    max-width:calc(100vw - 32px);

    display:none;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:18px;

    box-shadow:
        0 20px 50px rgba(15,23,42,.12),
        0 2px 10px rgba(15,23,42,.06);

    animation:dropdownFade .18s ease;

    z-index:2100;
}

.menu-dropdown.open{

    display:block;
}

@keyframes dropdownFade{

    from{

        opacity:0;

        transform:
            translateY(-8px)
            scale(.98);
    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}

/* =========================
   GROUPS
========================= */

.menu-group{

    border-top:1px solid #f1f5f9;
}

.menu-group:first-child{

    border-top:none;
}

.menu-group-title{

    padding:10px 16px 8px;

    background:#fafafa;

    color:#64748b;

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

    text-transform:uppercase;
    letter-spacing:.08em;

    user-select:none;
}

/* =========================
   LINKS
========================= */

.menu-dropdown a{

    display:flex;
    align-items:center;

    gap:14px;

    padding:14px 18px;

    color:#0f172a;

    text-decoration:none;

    font-size:14px;
    font-weight:500;

    transition:
        background .18s,
        transform .12s;
}

.menu-dropdown a:hover{

    background:#f8fafc;
}

.menu-dropdown a:active{

    transform:scale(.98);
}

.menu-dropdown a i{

    width:18px;

    color:#64748b;

    font-size:16px;
}

.menu-dropdown a:hover i{

    color:#0f172a;
}

.menu-dropdown .danger{

    color:#dc2626;
}

.menu-dropdown .danger i{

    color:#dc2626;
}

.menu-dropdown .danger:hover{

    background:#fef2f2;
}

.menu-dropdown a.current-role{

    background:#eff6ff;

    color:#2563eb;

    font-weight:700;
}

.menu-dropdown a.current-role i{

    color:#2563eb;
}

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

@media (max-width:768px){

    .header-actions{

        gap:8px;
    }

    .brand-logo{

        height:50px;
    }

    .notification-wrapper,
    .menu-btn{

        width:42px;
        height:42px;
    }

    .notification-wrapper i,
    .menu-btn i{

        font-size:19px;
    }

    .menu-dropdown{

        width:250px;

        max-width:calc(100vw - 24px);

        border-radius:16px;
    }

    .menu-dropdown a{

        padding:16px 18px;

        font-size:15px;
    }

    .menu-group-title{

        font-size:12px;
    }
}

/* =====================================================
   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;
    }

    .notification-wrapper,
    .menu-btn{

        width:40px;
        height:40px;
    }

    .notification-wrapper i,
    .menu-btn i{

        font-size:18px;
    }
}