/*------------------------------------------------------------------
    File Name: custom.css
-------------------------------------------------------------------*/

/** ADD YOUR AWESOME CODES HERE **/

/*new menu*/

:root {
    --bg-black: #000000;
    --header-dark: #111111;
    --border-muted: #222222;
    --shein-orange: #FA6338;
    --text-white: #ffffff;
    --text-gray: #888888;
}

/* body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: #f8f8f8; margin: 0; } */

/* --- DESKTOP HEADER (BLACK THEME) --- */
.desktop-header { background: var(--bg-black); color: white; padding: 12px 0; display: block; }

/* Logo & Search Centering */
/* .logo-img { height: 32px; filter: invert(1); cursor: pointer; } */
.logo-img { height: 46px; cursor: pointer; }
.search-wrap { 
    background: #1a1a1a; border: 1px solid #333; border-radius: 4px; 
    display: flex; width: 100%; max-width: 450px; margin: 0 auto;
}
.search-wrap input { 
    background: transparent; border: none; color: white; 
    padding: 8px 12px; flex-grow: 1; font-size: 14px; outline: none;
}
.search-btn { background: transparent; border: none; color: white; padding: 0 12px; }

/* Icons on Right */
.right-icons { display: flex; align-items: center; justify-content: flex-end; gap: 25px; }
.icon-item { position: relative; cursor: pointer; padding: 5px 0; color: white; text-decoration: none; }
.badge-count { 
    position: absolute; top: -2px; right: -10px; 
    background: white; color: black; font-size: 10px; 
    font-weight: bold; border-radius: 10px; padding: 1px 5px; 
}

/* --- HOVER BOXES (UNIFIED STYLE) --- */
.hover-box {
    position: absolute; top: 100%; right: 0; width: 360px;
    background: white; color: black; border: 1px solid #ddd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
    display: none; z-index: 2000; margin-top: 10px; cursor: default;
}
.icon-item:hover .hover-box { display: block; }

/* Person Hover Box */
.user-header { padding: 15px; border-bottom: 1px solid #eee; }
.user-link { display: flex; justify-content: space-between; padding: 10px 15px; color: #444; text-decoration: none; font-size: 14px; }
.user-link:hover { background: #f9f9f9; }

/* Cart Hover Box Details */
.cart-promo { background: #FFF5F2; color: #8A6D3B; padding: 10px; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.cart-promo span { color: var(--shein-orange); font-weight: bold; }
.vendor-row { padding: 12px 15px; border-bottom: 1px solid #eee; font-weight: bold; font-size: 13px; display: flex; align-items: center; gap: 8px;}
.item-card { padding: 15px; display: flex; gap: 12px; border-bottom: 1px solid #f5f5f5; }
.item-img { width: 70px; height: 90px; object-fit: cover; border: 1px solid #eee; }
.item-info { flex-grow: 1; font-size: 13px; }
.price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.current-price { color: var(--shein-orange); font-weight: bold; font-size: 16px; }
.total-price { color: var(--shein-orange); font-size: 22px; font-weight: bold; }
.checkout-btn { background: black; color: white; width: 100%; border: none; padding: 12px; font-weight: bold; }

/* --- MOBILE HEADER (BLACK THEME) --- */
.mobile-header {
    background-color: var(--bg-black); display: none;
    align-items: center; padding: 12px 15px; height: 60px;
    border-bottom: 1px solid var(--border-muted);
}
.m-left, .m-right { flex: 1; display: flex; gap: 18px; align-items: center; }
.m-right { justify-content: flex-end; }
.m-center { flex: 0; display: flex; justify-content: center; }
/* .m-logo { height: 26px; filter: invert(1); } */
.m-logo { height: 26px; }
.mobile-header i { color: white; font-size: 1.3rem; }

/* Category Nav */
.mobile-tabs {
    background: var(--bg-black); display: none; overflow-x: auto;
    white-space: nowrap; border-bottom: 1px solid var(--border-muted);
    scrollbar-width: none;
}
.m-tab { display: inline-block; padding: 12px 18px; color: var(--text-gray); text-decoration: none; font-size: 14px; }
.m-tab.active { color: white; border-bottom: 3px solid white; font-weight: bold; }

/* --- DESKTOP NAV SCROLL --- */
.nav-container { background: var(--bg-black); border-bottom: 1px solid var(--border-muted); position: relative; }
.scroll-wrapper { display: flex; overflow-x: auto; white-space: nowrap; scrollbar-width: none; scroll-behavior: smooth; padding: 0 45px; }
.scroll-wrapper::-webkit-scrollbar { display: none; }
.scroll-wrapper a { padding: 12px 18px; color: var(--text-gray); text-decoration: none; font-size: 13px; text-transform: uppercase; }
.scroll-wrapper a:hover { color: white; }
.nav-btn { position: absolute; top: 0; height: 100%; width: 40px; background: rgba(0,0,0,0.8); border: none; color: white; z-index: 10; display: none; align-items: center; justify-content: center; }
#btn-left { left: 0; }
#btn-right { right: 0; display: flex; }

@media (max-width: 991px) {
    .desktop-header, .nav-container { display: none !important; }
    .mobile-header, .mobile-tabs { display: flex; }
}

/* end new menu*/