/* ===================== FORM PAGE ===================== */
.form-body{
  min-height:100vh;
  background: var(--gray-light);
  display:flex;
  flex-direction:column;
}

.form-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 28px;
}
.form-topbar .brand img{ height:38px; }
.form-exit{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color: var(--gray);
  padding:8px 14px;
  border-radius:8px;
  transition: background .2s ease, color .2s ease;
}

.form-progress-wrap{ padding: 0 28px; }
.form-progress{
  max-width: 640px;
  margin-inline:auto;
  height:6px;
  background:#e3e5f3;
  border-radius:999px;
  overflow:hidden;
}
.form-progress-bar{
  height:100%;
  width:8%;
  background: linear-gradient(90deg, var(--blue), var(--blue-dark));
  border-radius:999px;
  transition: width .4s ease;
}

.form-stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 30px 20px 60px;
}

.form-card{
  width:100%;
  max-width: 640px;
  background:#fff;
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 48px;
  border:1px solid #eef0fa;
}

.step{
  animation: stepIn .45s ease;
}
@keyframes stepIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform:none; }
}

.step-count{
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--blue);
  margin-bottom:10px;
  display:block;
}
.step h2{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-style:normal;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--ink);
  margin-bottom:8px;
}
.step .step-sub{
  color: var(--gray);
  font-size:14.5px;
  margin-bottom:28px;
}

/* Choice cards */
.choice-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom: 30px;
}
.choice-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border:2px solid #e7e9f5;
  border-radius:12px;
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
  background:#fff;
}
.choice-card.selected{ border-color: var(--blue); background: var(--blue-light); }
.choice-card .icon{
  width:44px; height:44px;
  border-radius:10px;
  background: var(--blue-light);
  color: var(--blue-dark);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.choice-card.selected .icon{ background: var(--blue); color:#fff; }
.choice-card .txt strong{ display:block; font-size:15.5px; color: var(--ink); }
.choice-card .txt span{ font-size:13px; color: var(--gray); }
.choice-card .tick{
  margin-left:auto;
  width:22px; height:22px;
  border-radius:50%;
  border:2px solid #d6d9ee;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.choice-card.selected .tick{ background: var(--blue); border-color: var(--blue); }

/* Text inputs */
.field{ margin-bottom: 30px; }
.field input[type=text],
.field input[type=tel],
.field textarea{
  width:100%;
  font-family:'Poppins', sans-serif;
  font-size:18px;
  padding: 16px 4px;
  border:none;
  border-bottom: 2px solid #e2e4f2;
  outline:none;
  background:transparent;
  color: var(--ink);
  transition: border-color .2s ease;
}
.field textarea{ resize:vertical; min-height:110px; border:2px solid #e2e4f2; border-radius:10px; padding:14px; font-size:15.5px; }
.field input:focus, .field textarea:focus{ border-color: var(--blue); }
.field .hint{ font-size:12.5px; color: var(--gray); margin-top:8px; }

.step-actions{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
}
.step-actions .spacer{ flex:1; }
.btn-link{
  background:none; border:none; cursor:pointer;
  font-family:'Poppins', sans-serif; font-weight:600; font-size:14px;
  color: var(--gray);
  padding:12px 6px;
  display:flex; align-items:center; gap:6px;
}
.btn-next{
  background: var(--blue);
  color:#fff;
  border:none;
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:14.5px;
  padding:15px 32px;
  border-radius:10px;
  cursor:pointer;
  display:flex; align-items:center; gap:10px;
  transition: background .2s ease, transform .2s ease;
}
.btn-next:disabled{ background:#c7cbe6; cursor:not-allowed; transform:none; }

@media (hover: hover) and (pointer: fine){
  .form-exit:hover{ background:#eceefa; color: var(--ink); }
  .choice-card:hover{ border-color: var(--blue); transform: translateY(-2px); }
  .btn-link:hover{ color: var(--ink); }
  .btn-next:hover{ background: var(--blue-dark); transform: translateY(-2px); }
}

/* Review step */
.review-list{ margin-bottom:30px; display:flex; flex-direction:column; gap:0; border-top:1px solid #eef0fa; }
.review-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding: 14px 0;
  border-bottom:1px solid #eef0fa;
}
.review-row dt{ font-size:13px; color: var(--gray); flex-shrink:0; }
.review-row dd{ margin:0; font-size:14.5px; font-weight:600; color: var(--ink); text-align:right; }

.success-box{ text-align:center; padding: 10px 0 6px; }
.success-box .icon{
  width:74px; height:74px;
  border-radius:50%;
  background: var(--blue-light);
  color: var(--blue);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 22px;
}
.success-box h2{ margin-bottom:10px; }
.success-box p{ color: var(--gray); font-size:15px; margin-bottom:30px; }

@media (max-width: 620px){
  .form-card{ padding: 32px 22px; border-radius:16px; }
  .review-row{ flex-direction:column; gap:4px; }
  .review-row dd{ text-align:left; }
}

@media (max-width: 400px){
  .form-topbar{ padding: 14px 18px; }
  .form-topbar .brand img{ height:32px; }
  .form-progress-wrap{ padding: 0 18px; }
  .form-stage{ padding: 22px 14px 44px; }
  .form-card{ padding: 26px 18px; }
  .choice-card{ padding:14px 16px; gap:12px; }
  .choice-card .icon{ width:38px; height:38px; }
  .choice-card .txt strong{ font-size:14.5px; }
  .step-actions{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
  .step-actions .spacer{ display:none; }
  .btn-next{ width:100%; justify-content:center; }
  .btn-link{ justify-content:center; }
}