:root { 
    --main: #7000ff; 
    --main-hover: #5a00cc;   
    --red: #f53b49;
    --bg: #f2f4f7;
    --white: #ffffff; 
    --text: #1f2026; 
    --gray: #8b8e99;
    --header-height: 80px;
}

body.dark-mode { 
    --bg: #121212; --white: #1e1e1e; --text: #ffffff; --gray: #aab;
}

* { box-sizing: border-box; }
body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg); color: var(--text); 
    margin: 0; padding-top: var(--header-height); 
    transition: 0.3s; 
}

/* HEADER */
.main-header { 
    background: var(--white); position: fixed; top: 0; left: 0; width: 100%; 
    z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,0.05); padding: 10px 0;
}
.header-container { 
    max-width: 1200px; margin: 0 auto; padding: 0 15px; 
    display: flex; align-items: center; justify-content: space-between; 
    gap: 15px; flex-wrap: wrap; 
}
.left-section { display: flex; align-items: center; gap: 15px; }
.brand-logo { color: var(--main); font-weight: 800; font-size: 22px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.menu-trigger { font-size: 24px; cursor: pointer; }

/* Qidiruv */
.search-container { flex: 1; position: relative; max-width: 600px; min-width: 200px; }
#main-search { width: 100%; padding: 12px 45px 12px 15px; border: 1px solid #e0e0e0; border-radius: 12px; background: var(--bg); outline: none; }
.search-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--gray); cursor: pointer; }

/* Navigatsiya */
.nav-icons { display: flex; gap: 15px; align-items: center; }
.nav-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; color: var(--text); font-size: 10px; font-weight: 600; min-width: 50px; position: relative; }
.nav-item:hover { color: var(--main); }
.nav-item i { font-size: 20px; margin-bottom: 4px; }
.badge { position: absolute; top: -5px; right: 5px; background: var(--red); color: white; border-radius: 50%; font-size: 10px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); z-index: 2; }

/* ASOSIY QISM */
.container { max-width: 1200px; margin: 0 auto; padding: 15px; }
.mobile-cat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-title { font-size: 20px; font-weight: 800; margin: 0; }
.filter-btn-mobile { display: none; background: white; border: 1px solid #ddd; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; }
.product-card { background: var(--white); border-radius: 16px; padding: 10px; position: relative; cursor: pointer; transition: 0.3s; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.product-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 12px; }
.product-badge { position: absolute; top: 12px; left: 12px; background: var(--red); color: white; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 20px; z-index: 2; }

/* TUGMALAR */
.buy-btn { width: 100%; background: var(--main); color: white; border: none; padding: 12px; border-radius: 10px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; }
.buy-btn:hover { background: var(--main-hover); transform: translateY(-2px); }

/* --- MODALLAR (MUHIM: Display None) --- */
.modal, .thanks-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.6); z-index: 5000; 
    display: none; 
    align-items: center; justify-content: center; backdrop-filter: blur(4px); 
}

/* Modal ichki dizayni */
.product-modal-body { 
    width: 95%; max-width: 800px; background: var(--white); border-radius: 20px; padding: 25px; 
    max-height: 90vh; overflow-y: auto; position: relative; animation: popUp 0.3s ease;
}
.modal-content-grid { display: flex; gap: 30px; }

/* Asosiy Rasm */
.modal-img-wrapper { 
    flex: 1; text-align: center; background: #f9f9f9; border-radius: 15px; 
    display: flex; align-items: center; justify-content: center; padding: 10px; 
    max-height: 400px; /* Rasm juda katta bo'lib ketmasligi uchun */
}
.modal-img-wrapper img { 
    max-width: 100%; 
    max-height: 100%; /* Konteynerdan chiqib ketmaydi */
    object-fit: contain; 
}
.modal-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* --- RANGLAR (Wildberries Style - TUZATILDI) --- */
.color-options {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}
.color-circle { 
    width: 50px !important;    /* Aniq o'lcham */
    height: 50px !important;   /* Aniq o'lcham */
    border-radius: 50%; 
    border: 2px solid #eee; 
    cursor: pointer; 
    object-fit: cover !important; /* Rasm cho'zilib ketmaydi */
    transition: 0.2s;
    flex-shrink: 0; /* Ezilib qolmaydi */
}
.color-circle:hover { transform: scale(1.1); }
.color-circle.active { 
    border-color: var(--main); 
    box-shadow: 0 0 0 2px rgba(112, 0, 255, 0.3); 
    transform: scale(1.1);
}

/* Razmerlar */
.size-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.size-btn { border: 1px solid #ddd; padding: 10px 18px; border-radius: 8px; background: var(--white); color: var(--text); font-weight: 600; cursor: pointer; transition: 0.2s; min-width: 45px; }
.size-btn:hover { border-color: var(--main); color: var(--main); }
.size-btn.selected { background: var(--main); color: white; border-color: var(--main); }

/* X Tugmasi */
.modal-close, .close-btn { position: absolute; top: 15px; right: 15px; font-size: 28px; color: var(--gray); cursor: pointer; width: 35px; height: 35px; text-align: center; line-height: 35px; background: #f5f5f5; border-radius: 50%; transition: 0.3s; z-index: 10; }
.modal-close:hover { color: var(--red); background: rgba(245, 59, 73, 0.1); transform: rotate(90deg); }

/* Profil va Boshqalar */
.auth-card, .thanks-content { background: var(--white); padding: 30px; border-radius: 20px; width: 90%; max-width: 350px; text-align: center; position: relative; animation: popUp 0.3s ease; }
.check-anim { width: 80px; height: 80px; background: #00c853; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 20px; }
.profile-card { padding: 0; }
.profile-header { background: linear-gradient(135deg, var(--main), #8e2de2); padding: 30px 20px 50px; color: white; text-align: center; }
.avatar-section { margin-top: -45px; margin-bottom: 20px; text-align: center; }
.avatar-wrapper { width: 90px; height: 90px; border-radius: 50%; border: 4px solid var(--white); display: inline-block; position: relative; background: white; }
#user-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Mobil uchun */
@media (max-width: 768px) {
    :root { --header-height: 120px; }
    .header-container { padding-bottom: 10px; }
    .left-section { order: 1; flex: 1; }
    .nav-icons { order: 2; }
    .search-container { order: 3; width: 100%; max-width: none; margin-top: 10px; }
    .nav-text { display: none; }
    .modal-content-grid { flex-direction: column; }
    .filter-btn-mobile { display: block; }
    
    /* Mobil modal rasm */
    .modal-img-wrapper { height: 250px; }
}
@keyframes popUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Drawer (Menu & Cart) */
.drawer { position: fixed; top: 0; height: 100%; width: 300px; background: var(--white); z-index: 2000; transition: 0.3s; visibility: hidden; display: flex; flex-direction: column; }
.left-drawer { left: 0; transform: translateX(-100%); }
.right-drawer { right: 0; transform: translateX(100%); }
.drawer.active { transform: translateX(0); visibility: visible; }
.cat-list-side { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; }
.cat-list-side li { padding: 14px 20px; border-bottom: 1px solid #f9f9f9; cursor: pointer; display: flex; gap: 15px; color: var(--text); }
.social-footer { padding: 20px; text-align: center; border-top: 1px solid #eee; margin-top: auto; }
.social-links { display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.soc-btn { font-size: 32px; text-decoration: none; }