/* ===== FAKKAR CATEGORY SELECTION ===== */

.category-selection-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.8rem;
  box-sizing: border-box;
  overflow-y: auto;
  gap: 1.2rem;
}

.selection-header {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.selection-header::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  height: 3px; width: 200%;
  background: linear-gradient(90deg, transparent, var(--primary), var(--indigo), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

.selection-header .back-btn {
  position: absolute;
  top: 1.6rem; left: 1.8rem;
  z-index: 2;
}

.selection-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.6rem;
  letter-spacing: -0.3px;
}
.selection-title span { color: var(--primary); }

.selection-subtitle {
  color: var(--text-3);
  font-size: 1.1rem;
  margin-bottom: 1.6rem;
}

.progress-indicator { display:flex; flex-direction:column; align-items:center; gap:0.8rem; }
.progress-text { font-size:1.1rem; font-weight:700; color:var(--text-2); }
.progress-bar { width:300px; height:8px; background:var(--surface-2); border-radius:var(--radius-full); overflow:hidden; border:1px solid var(--border); }
.progress-fill { height:100%; width:0%; background:linear-gradient(90deg, var(--primary), var(--indigo)); border-radius:var(--radius-full); transition:width 0.4s cubic-bezier(0.4,0,0.2,1); }

.categories-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-bottom: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.category-section {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  width: 100%;
  box-sizing: border-box;
}
.category-section:hover { border-color:var(--border-strong); box-shadow:var(--shadow-md); }

.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1.5px solid var(--border);
}
.section-icon {
  font-size: 1.8rem;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(245,166,35,0.12), rgba(245,166,35,0.06));
  border: 1.5px solid rgba(245,166,35,0.2);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.section-header h2 { font-size:1.5rem; font-weight:800; font-family:var(--font-display); color:var(--text); margin:0 0 0.25rem 0; }
.section-header p  { color:var(--text-3); font-size:0.9rem; margin:0; }

.section-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  width: 100%;
}

.category-card {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1rem;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 180px;
  justify-content: center;
  position: relative;
}
.category-card:hover { transform:translateY(-6px); border-color:var(--primary); background:var(--surface); box-shadow:0 8px 24px var(--primary-glow); }
.category-card.selected { border-color:var(--primary); background:rgba(245,166,35,0.07); box-shadow:0 0 0 3px var(--primary-glow), var(--shadow-md); transform:scale(1.04); }
.category-card.selected::after { content:'✓'; position:absolute; top:10px; right:10px; width:24px; height:24px; background:var(--primary); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:900; }

.category-card .card-icon { font-size:2.4rem; margin-bottom:0.9rem; display:block; animation:float 3.5s ease-in-out infinite; }
.category-card h3 { font-size:1rem; font-weight:700; font-family:var(--font-display); color:var(--text); margin-bottom:0.4rem; line-height:1.3; }
.category-card .card-description { font-size:0.8rem; color:var(--text-3); line-height:1.35; opacity:0; transform:translateY(6px); transition:var(--transition); }
.category-card:hover .card-description { opacity:1; transform:translateY(0); }

.selection-footer {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.8rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.confirm-button {
  position: relative;
  padding: 1.3rem 3.5rem;
  font-size: 1.2rem;
  font-weight: 800;
  font-family: var(--font-display);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: white;
  transition: var(--transition);
  min-width: 260px;
  min-height: 64px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 18px var(--primary-glow);
}
.confirm-button:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 10px 30px var(--primary-glow); filter:brightness(1.06); }
.confirm-button:disabled { background:var(--surface-2); color:var(--text-3); cursor:not-allowed; box-shadow:none; }
.confirm-button .btn-content { display:flex; align-items:center; justify-content:center; gap:0.7rem; }
.confirm-button .btn-glow { display:none; }

@media (max-width:1200px) { .section-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px) {
  .category-selection-wrapper { padding:1rem; gap:1rem; }
  .selection-header { padding:1.5rem 1rem; }
  .selection-title { font-size:1.8rem; }
  .section-grid { grid-template-columns:repeat(2,1fr); gap:0.8rem; }
  .category-section { padding:1.4rem; }
  .selection-header .back-btn { position:static; margin-bottom:0.5rem; }
}
@media (max-width:480px) {
  .section-grid { grid-template-columns:1fr 1fr; }
  .category-card { padding:1.4rem 0.8rem; min-height:140px; }
}