/* ============================================================
   onboarding.css — GymBI by Statvo
   PURPOSE: Styles specific to the gym onboarding flow (Section 3).
   The liquid glass card, progress bar, terms box, PIN inputs,
   and step transitions all live here.
   Import this AFTER glass.css in index.html.
   ============================================================ */

/* ------------------------------------------------------------
   OUTER WRAPPER
   Centers the onboarding card vertically and horizontally,
   adds the decorative background blobs.
   ------------------------------------------------------------ */
.onboarding-wrap {
  min-height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  position: relative;
  overflow: hidden;
}

/* Decorative radial gradient blobs — same as login screen */
.onboarding-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.onboarding-blob-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);
  top: -150px; left: -150px;
}
.onboarding-blob-2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(77,166,255,0.07) 0%, transparent 70%);
  bottom: -80px; right: -80px;
}

/* ------------------------------------------------------------
   PROGRESS BAR
   Sits above the card, shows "Step X of 4".
   ------------------------------------------------------------ */
.ob-progress-wrap {
  width: 100%;
  max-width: 460px;
  margin-bottom: var(--sp-4);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.ob-progress-track {
  flex: 1;
  height: 4px;
  background: var(--glass-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.ob-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  /* Smooth width transition when advancing steps */
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px var(--accent-glow);
}

.ob-progress-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  font-family: var(--font-data);
}

/* ------------------------------------------------------------
   ONBOARDING CARD
   The main liquid glass card that holds all step content.
   Wider than login card to fit forms comfortably.
   ------------------------------------------------------------ */
.ob-card {
  width: 100%;
  max-width: 460px;
  padding: var(--sp-8);
  position: relative;
  z-index: 1;
  /* Step transitions use opacity + translateY — set here */
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Responsive: full width + less padding on small screens */
@media (max-width: 520px) {
  .ob-card {
    padding: var(--sp-6) var(--sp-5);
  }
}

/* ------------------------------------------------------------
   FORM GROUPS
   label + input stacked vertically with consistent spacing.
   ------------------------------------------------------------ */
.form-group {
  margin-bottom: var(--sp-5);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ------------------------------------------------------------
   TERMS BOX
   Scrollable area containing the Terms of Service text.
   Needs a fixed height so the checkbox stays visible.
   ------------------------------------------------------------ */
.ob-terms-box {
  height: 220px;
  background: var(--bg-0);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  /* Custom scrollbar already handled by .scroll-y in base.css */
}

.ob-terms-content h3 {
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--sp-1);
  color: var(--text-primary);
}

.ob-terms-content .terms-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

.ob-terms-content h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--sp-5) 0 var(--sp-2);
}

.ob-terms-content p,
.ob-terms-content li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--sp-2);
}

.ob-terms-content ul {
  padding-left: var(--sp-5);
  list-style: disc;
}

.ob-terms-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ------------------------------------------------------------
   TERMS ACCEPT CHECKBOX ROW
   ------------------------------------------------------------ */
.ob-terms-accept {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  padding: var(--sp-3) 0;
}

.ob-terms-accept input[type="checkbox"] {
  /* Custom-styled checkbox */
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  min-width: 18px;
  border: 2px solid var(--glass-border-bright);
  border-radius: 5px;
  background: var(--glass-1);
  cursor: pointer;
  margin-top: 1px;
  transition: all var(--transition-fast);
  position: relative;
}

.ob-terms-accept input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

/* Checkmark drawn via ::after pseudo-element */
.ob-terms-accept input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: 2px solid #000;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.ob-terms-accept span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ------------------------------------------------------------
   BUTTON SPINNER
   Small animated dot inside the finish button while saving.
   ------------------------------------------------------------ */
.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(0,0,0,0.3);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-left: var(--sp-2);
}

/* ------------------------------------------------------------
   SCALE-IN ANIMATION
   Used for the success checkmark on step 5.
   ------------------------------------------------------------ */
@keyframes scale-in {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}