/* =========================================================
   LIGHT SOLUTIONS — qabul arizasi
   Minimal, bir-savol-bir-vaqtda (stepper) landing dizayn
   Palette: paper #FAFAF9, ink #16171A, accent (light) #FFC94A, accent-2 #6E5BFF
   Font: Manrope
   ========================================================= */

:root{
  --paper: #FAFAF9;
  --card: #FFFFFF;
  --ink: #16171A;
  --ink-soft: #6B6E76;
  --line: #E7E6E1;
  --accent: #FFC94A;
  --accent-ink: #7A5B00;
  --violet: #6E5BFF;
  --error: #E4483A;
  --success: #1E8E5A;
  --radius: 14px;
  --font: 'Manrope', sans-serif;
  --maxw: 640px;
}

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body{
  margin:0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  display:flex;
  flex-direction:column;
}

h1{
  font-size: clamp(1.55rem, 3.6vw, 2.2rem);
  font-weight: 800;
  line-height:1.22;
  letter-spacing:-0.01em;
  margin: 0 0 0.5em;
}
p{ margin:0 0 1em; color: var(--ink-soft); line-height:1.6; }
button{ font-family: var(--font); }

:focus-visible{ outline: 2px solid var(--violet); outline-offset: 3px; }

/* progress bar */
.progress-track{
  position: fixed; top:0; left:0; right:0; height:3px; background: var(--line); z-index: 50;
}
.progress-fill{
  height:100%; width:0%; background: var(--violet);
  transition: width .35s ease;
}

/* top bar */
.top-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px clamp(20px,5vw,48px) 0;
}
.brand{ display:flex; align-items:center; }
.brand-logo{ height: 48px; width: auto; display:block; }
.step-counter{ font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* stage */
.stage{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding: 40px clamp(20px,6vw,48px) 20px;
}

.screen{
  width:100%; max-width: var(--maxw);
  display:none;
  animation: rise .38s ease;
}
.screen.is-active{ display:block; }

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

.kicker{
  font-size: 0.82rem; font-weight:700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-ink); margin-bottom: 14px;
}
.lede{ font-size: 1.02rem; max-width: 52ch; }
.fine-print{ font-size: 0.82rem; color: var(--ink-soft); margin-top: 28px; }

/* question step number label */
.q-tag{ font-size: 0.8rem; font-weight:700; color: var(--violet); margin-bottom: 10px; letter-spacing:0.02em; }
.q-title{ font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; line-height:1.3; margin: 0 0 8px; }
.q-optional{ font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 22px; }

/* text/number/tel/textarea inputs */
.input-field{
  width:100%;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 600;
  padding: 14px 4px;
  border: none;
  border-bottom: 2px solid var(--line);
  background: transparent;
  color: var(--ink);
  margin-top: 18px;
}
.input-field:focus{ outline:none; border-color: var(--violet); }
.input-field::placeholder{ color: #B7B6AE; font-weight: 500; }
textarea.input-field{ resize: vertical; min-height: 100px; font-size: 1rem; font-weight:500; line-height:1.5; }

select.input-field{
  appearance: none;
  -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%236B6E76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
}

/* choice list (radio / checkbox) */
.choice-list{ display:flex; flex-direction:column; gap:10px; margin-top: 18px; }
.choice{
  display:flex; align-items:center; gap:14px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor:pointer;
  background: var(--card);
  transition: border-color .15s ease, background .15s ease;
}
.choice:hover{ border-color: var(--violet); }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice .mark{
  flex: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--line-strong, #C9C8C0);
  display:flex; align-items:center; justify-content:center;
  color: transparent;
  font-size: 0.7rem;
  transition: all .12s ease;
}
.choice[data-type="radio"] .mark{ border-radius: 50%; }
.choice[data-type="checkbox"] .mark{ border-radius: 5px; }
.choice input:checked + .mark{
  background: var(--violet); border-color: var(--violet); color: #fff;
}
.choice.is-checked{ border-color: var(--violet); background: #F4F2FF; }
.choice .label{ font-size: 0.98rem; font-weight: 600; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight: 700; font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: none;
  cursor:pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--ink); color: #fff; }
.btn-primary:hover{ background: #000; }
.btn-primary:disabled{ opacity: 0.35; cursor: not-allowed; transform:none; }
.btn-text{ background: transparent; color: var(--ink-soft); padding: 13px 10px; }
.btn-text:hover{ color: var(--ink); }

/* bottom bar */
.bottom-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px clamp(20px,6vw,48px) 28px;
  max-width: var(--maxw);
  margin: 0 auto;
  width:100%;
  visibility: hidden;
}
.bottom-bar.is-visible{ visibility: visible; }
.bottom-bar .btn-text:disabled{ visibility:hidden; }

.error-msg{
  font-size: 0.85rem; color: var(--error); font-weight:700; margin-top: 10px; min-height: 1.2em;
}

/* success / error screens */
[data-screen="success"], [data-screen="error"]{ text-align:center; }
[data-screen="success"] h1, [data-screen="error"] h1{ }
[data-screen="success"] .lede, [data-screen="error"] .lede{ margin-left:auto; margin-right:auto; }
.success-mark{
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--success); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.7rem; margin: 0 auto 22px;
}

/* loading state on submit button */
.btn.is-loading{ opacity:0.7; pointer-events:none; }

@media (max-width: 560px){
  .top-bar{ padding-top: 18px; }
  .brand-logo{ height: 36px; }
  .choice{ padding: 13px 14px; }
}