/* Latina Onboarding - merged style.css
   full layout, sidebar, progress, question styling, responsive
*/

:root{
  --bg:#0b0b0d;
  --panel:#0f0f12;
  --muted:#bfc0c7;
  --accent1:#ff66b2;
  --accent2:#ff2a8c;
  --ok:#28a745;
}

/* Reset-ish */
*{box-sizing:border-box}
body{background:var(--bg); color:#fff;font-family:Inter,system-ui,Arial,Helvetica,sans-serif}

/* Outer layout */
.wizard-container, .latina-wizard {
  display:flex;
  max-width:1180px;
  margin:28px auto;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
}

/* Sidebar */
.wizard-sidebar {
  width:260px;
  background:linear-gradient(180deg,#0d0d0f,#0b0b0c);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
  flex-shrink:0;
}
.wizard-logo{font-weight:700;color:#fff;font-size:18px;line-height:1}
.wizard-steps{list-style:none;padding:0;margin:6px 0 0 0;display:flex;flex-direction:column;gap:10px}
.step-indicator {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:10px;
  background:#101012;
  color:var(--muted);
  cursor:pointer;
  font-weight:600;
}
.step-indicator span{font-weight:400;color:var(--muted);font-size:13px}
.step-indicator.active{background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#111}
.step-indicator.completed{box-shadow:inset 0 -2px 0 rgba(0,0,0,0.2)}
.step-indicator .num {
  width:34px;height:34px;border-radius:50%;background:#121214;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-weight:700;
}
.step-indicator.active .num { background:#fff;color:#111 }

/* progress in sidebar */
.sidebar-progress { margin-top:auto; }
.progress-fill {
  height:8px;
  width:0%;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border-radius:6px;
  transition:width .35s ease;
}
.progress-text{font-size:13px;color:var(--accent1);margin-top:8px}

/* Main content */
.wizard-main {
  flex:1;
  padding:28px;
  background: linear-gradient(180deg,#0b0b0d,#0a0a0b);
}

/* Steps */
.onboarding-step { display:none; }
.onboarding-step.active { display:block; }

/* Question step card */
.question-step {
  background:linear-gradient(180deg,#0c0c0d,#0b0b0c);
  border-radius:10px;
  padding:16px;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,0.03);
}
.q-label { margin:0 0 8px 0; font-weight:700; color:#fff; }
.q-options{ display:flex; flex-direction:column; gap:10px; }
.q-option {
  padding:12px; border-radius:8px; background:#0b0b0c; border:1px solid transparent; cursor:pointer; display:flex; align-items:center; gap:8px;
}
.q-option input{ margin-right:8px; transform:scale(1.02); }

/* Input elements */
input[type="text"], input[type="url"], textarea, select {
  width:100%; padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:#0b0b0c; color:#fff;
}
textarea{ min-height:90px }
label.inline { display:flex; gap:8px; align-items:center }

/* Uploads */
input[type="file"] { color:#fff }

/* Buttons area bottom */
.wizard-controls {
  display:flex; justify-content:flex-end; gap:10px; margin-top:20px; align-items:center;
}
.btn-back, .btn-next, .btn-submit {
  padding:10px 18px; border-radius:8px; border:none; cursor:pointer; font-weight:700;
}
.btn-back { background:#444; color:#fff }
.btn-next { background:var(--accent1); color:#111 }
.btn-next[disabled]{ opacity:.45; cursor:not-allowed }
.btn-submit { background:var(--ok); color:#fff }

/* Toast */
#latina-wizard-toast { transition:opacity .25s ease; }

/* Small screens */
@media (max-width:880px) {
  .wizard-container { flex-direction:column; padding:12px }
  .wizard-sidebar { width:100%; flex-direction:row; padding:12px; gap:8px; align-items:center; justify-content:space-between }
  .wizard-steps { flex-direction:row; gap:8px; width:100%; }
  .step-indicator { flex-direction:column; padding:8px; font-size:12px; }
  .wizard-main { padding:18px }
}

/* Accessibility focus */
input:focus, textarea:focus, select:focus { outline:2px solid rgba(255,102,178,0.18) }