/* Estilos para el header tipo e-commerce */
.header-ecommerce {
    background: #232f3e;
    color: #fff;
    padding: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.header-ecommerce .header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}
.header-ecommerce .logo {
    font-size: 2rem;
    font-weight: bold;
    color: #ffd700;
    text-decoration: none;
}
.header-ecommerce nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}
.header-ecommerce nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
}

/* Orders pending count badge (seller orders) */
.header-ecommerce nav ul li a.nav-orders-link,
.mobile-nav a.nav-orders-link{
    position:relative !important;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.header-ecommerce nav ul li a.nav-orders-link .orders-count,
.mobile-nav a.nav-orders-link .orders-count{
    position:absolute !important;
    top:-6px !important;
    right:-10px !important;
    min-width:18px !important;
    height:18px !important;
    padding:0 5px !important;
    border-radius:999px !important;
    background:#ef4444 !important;
    color:#fff !important;
    font-size:12px !important;
    font-weight:900 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:2px solid #232f3e !important;
    box-sizing:border-box !important;
    line-height:1 !important;
    z-index:2 !important;
    pointer-events:none;
}
.header-ecommerce nav ul li a:hover {
    color: #ffd700;
}
.header-ecommerce .header-icons {
    display: flex;
    gap: 18px;
    font-size: 1.2rem;
}
.header-ecommerce .header-icons a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}
.header-ecommerce .header-icons a:hover {
    color: #ffd700;
}

/* Cart count badge */
.header-ecommerce .header-icons .header-cart-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.header-ecommerce .header-icons .header-cart-link .cart-count{
    position:absolute;
    top:-6px;
    right:-8px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#ef4444;
    color:#fff;
    font-size:12px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #232f3e;
    box-sizing:border-box;
}

/* Logged-in account icon */
.header-ecommerce .header-icons .header-account-link.is-logged-in,
.header-ecommerce .header-icons .header-account-link.is-logged-in i{
    color:#22c55e;
}
.header-ecommerce .header-icons .header-account-link.is-logged-in:hover,
.header-ecommerce .header-icons .header-account-link.is-logged-in:hover i{
    color:#22c55e;
}

/* Logout icon in logo color */
.header-ecommerce .header-icons .header-logout-link,
.header-ecommerce .header-icons .header-logout-link i{
    color:#ffd700;
}
.header-ecommerce .header-icons .header-logout-link:hover,
.header-ecommerce .header-icons .header-logout-link:hover i{
    color:#ffd700;
}

/* Mobile menu */
.header-ecommerce .mobile-menu-btn{
    display:none;
    background:transparent;
    border:0;
    color:#fff;
    font-size:1.4rem;
    cursor:pointer;
    padding:8px;
}

.mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:9998;
}

.mobile-sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:290px;
    max-width:85vw;
    background:#232f3e;
    color:#fff;
    font-family: 'Segoe UI', Arial, sans-serif;
    z-index:9999;
    transform:translateX(-100%);
    transition:transform .2s ease;
    display:flex;
    flex-direction:column;
}

.mobile-sidebar.is-open{transform:translateX(0)}

.mobile-sidebar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 14px;
    border-bottom:1px solid rgba(255,255,255,0.12);
}

.mobile-sidebar-title{
    font-weight:700;
    letter-spacing:.2px;
}

.mobile-close-btn{
    background:transparent;
    border:0;
    color:#fff;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size:1.3rem;
    cursor:pointer;
    padding:8px;
}

.mobile-nav{
    padding:10px 10px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.mobile-nav a{
    color:#fff;
    text-decoration:none;
    padding:10px 10px;
    border-radius:10px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.mobile-nav a:hover{
    color:#ffd700;
}

.mobile-nav .mobile-account-link.is-logged-in,
.mobile-nav .mobile-account-link.is-logged-in i{
    color:#22c55e;
}
.mobile-nav .mobile-account-link.is-logged-in:hover,
.mobile-nav .mobile-account-link.is-logged-in:hover i{
    color:#22c55e;
}

.mobile-nav a i{width:22px}

.mobile-nav .mobile-logout-link,
.mobile-nav .mobile-logout-link i{
    color:#ffd700;
}
.mobile-nav .mobile-logout-link:hover,
.mobile-nav .mobile-logout-link:hover i{
    color:#ffd700;
}

.mobile-nav-sep{
    height:1px;
    background:rgba(255,255,255,0.12);
    margin:8px 6px;
}

body.mobile-menu-open{overflow:hidden}

@media (max-width: 768px) {
    .header-ecommerce .header-container{
        padding: 12px 12px;
        gap: 10px;
    }

    .header-ecommerce nav{display:none}

    .header-ecommerce .logo{
        font-size: 1.5rem;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-ecommerce .mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center}

    .header-ecommerce .header-icons{gap: 14px;font-size: 1.15rem}

    .header-ecommerce .header-icons .header-account-link{display:none}
    .header-ecommerce .header-icons .header-logout-link{display:none}
}