/* ===== profile-fix.css - ТОЛЬКО ДЛЯ СТРАНИЦЫ ПРОФИЛЯ ===== */

/* Все стили применяются ТОЛЬКО внутри #profile */
#profile .profile-page-container,
.page#profile .profile-page-container {
  display: grid !important;
  grid-template-columns: 1fr 2.2fr !important;
  gap: 28px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 24px !important;
  min-height: 100vh !important;
  align-items: start !important;
  position: relative !important;
  z-index: 5 !important;
}

#profile .profile-sidebar {
  position: sticky !important;
  top: 24px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#profile .profile-card {
  border-radius: 40px !important;
  padding: 40px 32px !important;
  text-align: center !important;
  background: rgba(8, 8, 18, 0.75) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#profile .avatar-wrapper {
  position: relative !important;
  width: 150px !important;
  height: 150px !important;
  margin: 0 auto 28px !important;
  display: block !important;
}

#profile .avatar-ring {
  position: absolute !important;
  inset: -5px !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg, #8b5cf6, #10b981, #3b82f6, #f59e0b, #8b5cf6) !important;
  animation: spinRing 10s linear infinite !important;
  display: block !important;
}

@keyframes spinRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#profile .avatar-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  padding: 4px !important;
  /* Только цвет-подложка: НЕ сбрасываем background-image, который JS ставит для аватара.
     Раньше здесь был background:...!important — он перекрывал загруженную аватарку на ПК. */
  background-color: rgba(20, 20, 35, 0.9) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

#profile .avatar-initial {
  font-size: 56px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #ffffff, #c4b5fd) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

#profile .avatar-status {
  position: absolute !important;
  bottom: 6px !important;
  right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  background: #10b981 !important;
  border-radius: 50% !important;
  border: 3px solid #0a0a14 !important;
  box-shadow: 0 0 25px #10b981 !important;
  z-index: 3 !important;
}

#profile .profile-username {
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  background: linear-gradient(135deg, #ffffff, #c4b5fd, #ffffff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
  display: block !important;
  word-break: break-word !important;
}

#profile .verified-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  padding: 6px 18px !important;
  border-radius: 60px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #6ee7b7 !important;
  margin-bottom: 18px !important;
}

#profile .profile-rating {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

#profile .stars {
  display: flex !important;
  gap: 3px !important;
  color: #fbbf24 !important;
}

#profile .rating-value {
  font-weight: 700 !important;
  color: #e5e5e5 !important;
  font-size: 0.95rem !important;
}

#profile .reviews-link {
  font-size: 0.7rem !important;
  color: #8b5cf6 !important;
  text-decoration: none !important;
  margin-left: 6px !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
}

#profile .profile-joined {
  font-size: 0.75rem !important;
  color: #71717a !important;
  margin-bottom: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#profile .profile-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
}

#profile .btn-gradient,
#profile .btn-glass,
#profile .btn-logout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 16px 24px !important;
  border-radius: 60px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

#profile .btn-gradient {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  color: white !important;
  border: none !important;
}

#profile .btn-glass {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.4) !important;
  color: #c4b5fd !important;
}

#profile .btn-logout {
  background: transparent !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

#profile .profile-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

#profile .balance-card {
  border-radius: 28px !important;
  padding: 28px 32px !important;
  background: rgba(8, 8, 18, 0.5) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}

#profile .balance-left {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

#profile .balance-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

#profile .balance-icon i {
  font-size: 28px !important;
  color: #10b981 !important;
}

#profile .balance-info {
  display: flex !important;
  flex-direction: column !important;
}

#profile .balance-label {
  font-size: 0.8rem !important;
  color: #71717a !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 6px !important;
}

#profile .balance-amount {
  font-size: 2.8rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #ffffff, #6ee7b7) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  line-height: 1.1 !important;
}

#profile .balance-trend {
  font-size: 0.7rem !important;
  color: #34d399 !important;
  margin-top: 6px !important;
}

#profile .balance-chevron {
  font-size: 32px !important;
  color: #71717a !important;
  opacity: 0.5 !important;
}

#profile .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}

#profile .stat-card {
  border-radius: 24px !important;
  padding: 24px 20px !important;
  background: rgba(10, 10, 22, 0.45) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#profile .stat-icon {
  font-size: 1.8rem !important;
  margin-bottom: 18px !important;
}

#profile .stat-card.products .stat-icon { color: #8b5cf6 !important; }
#profile .stat-card.purchases .stat-icon { color: #3b82f6 !important; }
#profile .stat-card.sales .stat-icon { color: #f59e0b !important; }

#profile .stat-value {
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: white !important;
  line-height: 1.1 !important;
}

#profile .stat-label {
  font-size: 0.75rem !important;
  color: #a1a1aa !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
}

#profile .profile-tabs {
  display: flex !important;
  gap: 8px !important;
  background: rgba(20, 20, 35, 0.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  padding: 6px !important;
  border-radius: 60px !important;
  width: fit-content !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#profile .profile-tab-btn {
  padding: 12px 28px !important;
  border-radius: 50px !important;
  background: transparent !important;
  border: none !important;
  color: #a1a1aa !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}

#profile .profile-tab-btn.active {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  color: white !important;
}

#profile .tab-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  padding: 3px 10px !important;
  border-radius: 40px !important;
  font-size: 0.7rem !important;
}

#profile .products-list-container {
  border-radius: 28px !important;
  padding: 28px !important;
  background: rgba(10, 10, 22, 0.45) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  min-height: 400px !important;
}

/* Empty state */
#profile .empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 30px !important;
  text-align: center !important;
  height: 100% !important;
  min-height: 400px !important;
}

#profile .empty-icon {
  width: 200px !important;
  height: 200px !important;
  margin-bottom: 28px !important;
}

#profile .empty-title {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: white !important;
  margin-bottom: 14px !important;
}

#profile .empty-desc {
  font-size: 1rem !important;
  color: #a1a1aa !important;
  max-width: 420px !important;
  margin-bottom: 36px !important;
  line-height: 1.7 !important;
}

#profile .btn-primary {
  padding: 18px 40px !important;
  border-radius: 60px !important;
  background: linear-gradient(135deg, #8b5cf6, #4f46e5) !important;
  border: none !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
}

/* Карточки товаров */
#profile .product-item {
  display: flex !important;
  align-items: center !important;
  padding: 18px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  cursor: pointer !important;
}

#profile .product-img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  object-fit: cover !important;
  margin-right: 18px !important;
  background: #1a1a2e !important;
}

#profile .product-info {
  flex: 1 !important;
}

#profile .product-title {
  font-weight: 700 !important;
  color: white !important;
  margin-bottom: 6px !important;
}

#profile .product-price {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #10b981 !important;
}

#profile .product-status {
  font-size: 0.7rem !important;
  padding: 4px 12px !important;
  border-radius: 30px !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  display: inline-block !important;
}

#profile .product-actions {
  display: flex !important;
  gap: 8px !important;
}

#profile .product-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #a1a1aa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ (ТОЛЬКО ДЛЯ ПРОФИЛЯ) ===== */
@media (max-width: 1024px) {
  #profile .profile-page-container,
  .page#profile .profile-page-container {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }
  
  #profile .profile-sidebar {
    position: static !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  
  #profile .stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  #profile .profile-page-container,
  .page#profile .profile-page-container {
    padding: 16px !important;
    gap: 20px !important;
  }
  
  #profile .profile-card {
    padding: 28px 20px !important;
    border-radius: 32px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 12, 20, 0.9) !important;
  }
  
  #profile .avatar-wrapper {
    width: 120px !important;
    height: 120px !important;
  }
  
  #profile .avatar-initial {
    font-size: 44px !important;
  }
  
  #profile .profile-username {
    font-size: 1.8rem !important;
  }
  
  #profile .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  #profile .stat-card {
    padding: 18px 20px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 12, 20, 0.7) !important;
  }
  
  #profile .balance-card {
    padding: 20px 20px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 12, 20, 0.7) !important;
  }
  
  #profile .balance-amount {
    font-size: 2rem !important;
  }
  
  #profile .balance-icon {
    width: 52px !important;
    height: 52px !important;
  }
  
  #profile .profile-tabs {
    width: 100% !important;
    justify-content: center !important;
  }
  
  #profile .profile-tab-btn {
    padding: 10px 16px !important;
    flex: 1 !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
  }
  
  #profile .products-list-container {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 12, 20, 0.7) !important;
  }
}

@media (max-width: 480px) {
  #profile .profile-page-container,
  .page#profile .profile-page-container {
    padding: 8px !important;
    gap: 10px !important;
  }
  
  #profile .profile-card {
    padding: 16px 12px !important;
  }
  
  #profile .avatar-wrapper {
    width: 100px !important;
    height: 100px !important;
  }
  
  #profile .avatar-initial {
    font-size: 38px !important;
  }
  
  #profile .profile-username {
    font-size: 1.5rem !important;
  }
  
  #profile .balance-amount {
    font-size: 1.6rem !important;
  }
  
  #profile .stat-value {
    font-size: 1.6rem !important;
  }
  
  #profile .btn-gradient,
  #profile .btn-glass,
  #profile .btn-logout {
    padding: 12px 18px !important;
    font-size: 0.8rem !important;
  }
  
  #profile .product-item {
    flex-wrap: wrap !important;
  }
  
  #profile .product-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    margin-top: 12px !important;
  }
}


input:focus, textarea:focus, select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,0.2) !important;
}


/* Полностью убираем любые эффекты при наведении на товары в профиле */
#profile .product-item,
.profile-page-container .product-item {
  transition: none !important;
  transform: none !important;
}

#profile .product-item:hover,
.profile-page-container .product-item:hover {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.03) !important;
  transform: none !important;
  transition: none !important;
}

/* Убираем анимацию при наведении на товары в профиле */
#profile .product-item,
.profile-page-container .product-item {
  transition: none !important;
  transform: none !important;
}

#profile .product-item:hover,
.profile-page-container .product-item:hover {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  transform: none !important;
  transition: none !important;
}