/* css/planner.css */

/* Wizard Layout & Animations */
.wizard-step { display: none; animation: fadeIn 0.4s ease; }
.wizard-step.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.wizard-nav { 
  display: flex; justify-content: space-between; 
  margin-top: 2rem; border-top: 1px solid #1e1e22; padding-top: 1.5rem; 
}

/* Progress Bar */
.progress-bar { 
  height: 6px; background: #1e1e22; 
  border-radius: 3px; margin-bottom: 2rem; overflow: hidden; 
}
.progress-fill { 
  height: 100%; background: var(--brand); 
  width: 33.33%; transition: width 0.3s ease; 
}
.sub-texts{
  color: var(--brand);
}

/* Form Elements Adapted to TFW Theme */
.form-group { margin-bottom: 1.5rem; }
.form-group label { margin-bottom: 0.5rem; font-weight: 600; }
.form-group select { 
  background: #0f1013; color: var(--text); 
  border: 1px solid #26262a; border-radius: 12px; 
  padding: .8rem .9rem; width: 100%; appearance: none;
  cursor: pointer;
}
.form-group select:focus { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Live TDEE Dashboard */
.live-stats {
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.10), rgba(245, 197, 24, 0.02));
  border: 1px solid rgba(245, 197, 24, 0.28);
  border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; text-align: center;
}
.live-stats h3 { color: var(--brand); margin: 0; font-size: 2rem; }
.live-stats p { margin: 0; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

/* Error state for validation */
.input-error { border-color: #ff4444 !important; outline: 1px solid #ff4444; }

/* Latausruudun tyylit (VAIHE 3) */
.loading-container {
  text-align: center;
  padding: 2rem 0;
  animation: fadeIn 0.4s ease;
}
.loading-bar-bg {
  background: #1e1e22;
  border-radius: 999px;
  height: 12px;
  width: 100%;
  margin: 1.5rem 0;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.loading-bar-fill {
  background: var(--brand);
  height: 100%;
  width: 0%;
  transition: width 0.3s ease-out;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(245, 197, 24, 0.5);
}
.loading-text {
  color: var(--brand);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  min-height: 1.8rem;
}
.loading-subtext {
  color: var(--muted);
  font-size: 1.5rem;
  font-weight: 900;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}