/* =============================================
   FabricAI — Garment Selection Styles
   styles/garments.css
   ============================================= */

/* ─── Gender Toggle ─────────────────────────── */
.gender-toggle {
  display: flex;
  gap: var(--space-3);
  background: hsla(240, 10%, 10%, 0.5);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  width: fit-content;
  margin-bottom: var(--space-8);
}

.gender-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  border: none;
  background: none;
  cursor: pointer;
  transition: var(--transition-base);
  min-width: 140px;
  justify-content: center;
  overflow: hidden;
}

.gender-btn svg {
  width: 22px;
  height: 22px;
  transition: var(--transition-base);
}

.gender-btn:hover:not(.active) {
  color: var(--color-text-secondary);
  background: hsla(240, 10%, 20%, 0.4);
}

.gender-btn.active {
  background: var(--gradient-brand);
  color: white;
  box-shadow: var(--shadow-brand);
  animation: scalePop var(--duration-base) var(--ease-bounce);
}

.gender-btn.active svg {
  filter: drop-shadow(0 0 6px hsla(0,0%,100%,0.5));
}

/* ─── Garment Category Section ──────────────── */
.garment-section {
  margin-bottom: var(--space-8);
  animation: slideUp var(--duration-slow) var(--ease-out) both;
}

.garment-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.garment-category-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-brand);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.garment-category-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border-brand), transparent);
  opacity: 0.4;
}

/* ─── Garment Card Grid ─────────────────────── */
.garment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-3);
}

/* ─── Individual Garment Card ───────────────── */
.garment-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  background: hsla(240, 10%, 12%, 0.6);
  border: 1.5px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  text-align: center;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Subtle shimmer on hover */
.garment-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, hsla(0,0%,100%,0.04), transparent);
  transition: left var(--duration-slow) var(--ease-out);
}

.garment-card:hover::before {
  left: 100%;
}

.garment-card:hover {
  border-color: var(--color-brand-600);
  background: hsla(263, 40%, 18%, 0.4);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 15px hsla(263,70%,50%,0.15);
}

/* ─── Selected State ────────────────────────── */
.garment-card.selected {
  background: hsla(263, 50%, 20%, 0.6);
  border-color: var(--color-brand-500);
  box-shadow: var(--shadow-brand), var(--shadow-md);
  transform: translateY(-3px);
  animation: scalePop var(--duration-base) var(--ease-bounce);
}

.garment-card.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-brand-soft);
  pointer-events: none;
}

/* Check badge on selected */
.garment-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-bounce);
  box-shadow: var(--shadow-brand);
  z-index: 1;
}

.garment-card.selected .garment-check {
  opacity: 1;
  transform: scale(1);
}

.garment-check svg {
  width: 12px;
  height: 12px;
  color: white;
}

/* ─── Garment Icon ──────────────────────────── */
.garment-icon {
  width: 48px;
  height: 48px;
  color: var(--color-text-tertiary);
  transition: var(--transition-base);
  position: relative;
  z-index: 1;
}

.garment-card:hover .garment-icon,
.garment-card.selected .garment-icon {
  color: var(--color-text-brand);
  transform: scale(1.1);
}

/* ─── Garment Label ─────────────────────────── */
.garment-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
  z-index: 1;
  line-height: var(--leading-tight);
}

.garment-card:hover .garment-label,
.garment-card.selected .garment-label {
  color: var(--color-text-primary);
}

/* ─── Gender transition animation ───────────── */
.garment-container {
  position: relative;
}

.garment-container.switching {
  animation: fadeOut var(--duration-fast) var(--ease-out) forwards;
}

/* ─── Garment selection area wrapper ────────── */
.garment-selection-wrap {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

/* ─── No selection hint ─────────────────────── */
.garment-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-info-soft);
  border: 1px solid hsla(210, 75%, 60%, 0.25);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-info);
  opacity: 0;
  transform: translateY(8px);
  transition: var(--transition-slow);
}

.garment-hint.visible {
  opacity: 1;
  transform: translateY(0);
}

.garment-hint svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}