/* ==========================================================================
   components.css — Component-level styles
   ========================================================================== */

/* ── Product Cards ── */
.product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.product-card:hover { transform: translateY(-8px); }
.product-card img { transition: transform 0.5s ease; }
.product-card:hover img { transform: scale(1.1); }

/* ── Modals (visibility) ── */
#login-modal            { display: none; }
#login-modal.open       { display: flex; }
#logout-modal           { display: none; }
#logout-modal.open      { display: flex; }
#profile-complete-modal { display: none; }
#profile-complete-modal.open { display: flex; }

/* ── Mobile Menu ── */
#mobile-menu      { display: none; }
#mobile-menu.open { display: flex; }

/* ── Sidebar ── */
.sidebar-item { transition: all 0.2s ease; }
.sidebar-item.active { background: #dcfce7; color: #16a34a; }
.dark .sidebar-item.active { background: rgba(34,197,94,0.15) !important; color: #4ADE80 !important; }
#sidebar-categories .cat-group > div {
  transition: max-height 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
}

/* ── Notification Dropdown ── */
#notif-dropdown      { display: none; }
#notif-dropdown.open { display: block; }

/* ── Leaderboard Horizontal Scroll ── */
.lb-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem 1rem 1rem;
  margin: 0 -1rem;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.lb-scroll::-webkit-scrollbar        { height: 4px; }
.lb-scroll::-webkit-scrollbar-track  { background: #f1f5f9; border-radius: 99px; }
.lb-scroll::-webkit-scrollbar-thumb  { background: #22C55E; border-radius: 99px; }

/* ── Leaderboard Card ── */
.lb-card {
  min-width: min(320px, calc(100vw - 2.5rem));
  max-width: 340px;
  flex-shrink: 0;
}

/* ── Avatar Picker ── */
.avatar-preset {
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.avatar-preset:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}