/* =============================================
   Questionnaire Page Styles
   10-Step Form | Mobile-First
   ============================================= */

/* --- Progress Bar --- */
.progress-bar {
  position:fixed; top:56px; left:0; right:0;
  z-index:900; background:var(--white);
  border-bottom:1px solid var(--gray-200);
  padding:12px 16px;
}
.progress-inner {
  max-width:600px; margin:0 auto;
}
.progress-info {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px;
}
.progress-step { font-size:.8rem; font-weight:600; color:var(--green-700); }
.progress-label { font-size:.75rem; color:var(--gray-500); }
.progress-track {
  width:100%; height:4px; background:var(--gray-200);
  border-radius:2px; overflow:hidden;
}
.progress-fill {
  height:100%; background:var(--green-600);
  border-radius:2px; transition:width .4s ease;
}

/* --- Form Container --- */
.questionnaire-page {
  padding:130px 16px 100px;
  min-height:100vh;
  background:var(--gray-50);
}
.form-container {
  max-width:600px; margin:0 auto;
}

/* --- Step --- */
.form-step {
  display:none;
  animation:stepIn .35s ease;
}
.form-step.active { display:block; }

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

.step-header {
  margin-bottom:24px;
}
.step-header h2 {
  font-size:1.25rem; font-weight:700; color:var(--gray-900);
  margin-bottom:4px;
}
.step-header p {
  font-size:.85rem; color:var(--gray-500);
}

/* --- Form Groups --- */
.form-group {
  margin-bottom:18px;
}
.form-group label {
  display:block; font-size:.85rem; font-weight:600;
  color:var(--gray-700); margin-bottom:6px;
}
.form-group label .required {
  color:#ef4444; margin-left:2px;
}
.form-group .hint {
  font-size:.75rem; color:var(--gray-400); margin-top:4px;
}

/* --- Inputs --- */
.form-input,
.form-select,
.form-textarea {
  width:100%; padding:12px 14px;
  font-family:var(--font); font-size:.9rem;
  color:var(--gray-800); background:var(--white);
  border:1.5px solid var(--gray-300);
  border-radius:var(--radius);
  transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline:none;
  border-color:var(--green-500);
  box-shadow:0 0 0 3px rgba(79, 209, 139, 0.2);
}
.form-input::placeholder { color:var(--gray-400); }
.form-textarea { min-height:90px; resize:vertical; }
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}

/* --- Row (2 cols) --- */
.form-row {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}

/* --- Checkbox/Radio Cards --- */
.option-grid {
  display:grid; grid-template-columns:1fr; gap:8px;
}
.option-grid.cols-2 { grid-template-columns:1fr 1fr; }
.option-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }

.option-card {
  position:relative; cursor:pointer;
}
.option-card input {
  position:absolute; opacity:0; width:0; height:0;
}
.option-card .option-label {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:var(--white);
  border:1.5px solid var(--gray-300);
  border-radius:var(--radius);
  font-size:.875rem; font-weight:500; color:var(--gray-700);
  transition:all .2s;
}
.option-card .option-icon {
  font-size:1.2rem; flex-shrink:0;
  color: var(--gray-500);
  transition: all 0.2s;
}
.option-card input:checked + .option-label {
  border-color:var(--green-600);
  background:var(--green-50);
  color:var(--green-800);
  box-shadow:0 0 0 1px var(--green-600);
}
.option-card input:checked + .option-label .option-icon {
  color: var(--green-600);
}
.option-card .option-label:hover {
  border-color:var(--green-400);
}

/* --- Toggle Switch --- */
.toggle-group {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  background:var(--white);
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius);
  margin-bottom:8px;
}
.toggle-group .toggle-text {
  font-size:.875rem; font-weight:500; color:var(--gray-700);
}
.toggle-switch {
  position:relative; width:44px; height:24px;
}
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:var(--gray-300); border-radius:12px;
  cursor:pointer; transition:background .2s;
}
.toggle-slider::before {
  content:''; position:absolute;
  width:18px; height:18px; left:3px; top:3px;
  background:var(--white); border-radius:50%;
  transition:transform .2s;
}
.toggle-switch input:checked + .toggle-slider {
  background:var(--green-600);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform:translateX(20px);
}

/* --- Service Selector (Page 2) --- */
.service-grid {
  display:grid; grid-template-columns:1fr; gap:10px;
}
.service-card {
  position:relative; cursor:pointer;
}
.service-card input {
  position:absolute; opacity:0; width:0; height:0;
}
.service-card .service-label {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:var(--white);
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);
  transition:all .2s;
}
.service-card .service-icon {
  width:40px; height:40px;
  background:var(--gray-100);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
  color: var(--gray-600);
  transition:all .2s;
}
.service-card .service-text h4 {
  font-size:.9rem; font-weight:600; color:var(--gray-800);
}
.service-card .service-text p {
  font-size:.75rem; color:var(--gray-500); margin-top:1px;
}
.service-card input:checked + .service-label {
  border-color:var(--green-600);
  background:var(--green-50);
  box-shadow:0 0 0 1px var(--green-600);
}
.service-card input:checked + .service-label .service-icon {
  background:var(--green-600); color:var(--white);
}

/* --- Navigation Buttons --- */
.form-nav {
  display:flex; gap:10px; margin-top:28px;
  padding-top:20px; border-top:1px solid var(--gray-200);
}
.form-nav .btn { flex:1; justify-content:center; padding:14px 20px; }
.btn-back {
  background:var(--white); color:var(--gray-600);
  border:1.5px solid var(--gray-300);
}
.btn-back:hover { background:var(--gray-50); color:var(--gray-800); }
.btn-next {
  background:var(--green-700); color:var(--white);
}
.btn-next:hover { background:var(--green-800); }
.btn-submit {
  background:var(--green-600); color:var(--white);
  font-size:1rem;
}
.btn-submit:hover { background:var(--green-700); }

/* --- Conditional hide --- */
.conditional { display:none; }
.conditional.show { display:block; animation:stepIn .25s ease; }

/* --- Summary (Step 10) --- */
.summary-card {
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:16px; margin-bottom:12px;
}
.summary-card h4 {
  font-size:.85rem; font-weight:600; color:var(--green-700);
  margin-bottom:8px; padding-bottom:6px;
  border-bottom:1px solid var(--gray-100);
}
.summary-row {
  display:flex; justify-content:space-between;
  padding:4px 0; font-size:.8rem;
}
.summary-row .label { color:var(--gray-500); }
.summary-row .value { color:var(--gray-800); font-weight:500; }

/* --- File Upload --- */
.file-upload {
  border:2px dashed var(--gray-300);
  border-radius:var(--radius-lg);
  padding:24px; text-align:center;
  cursor:pointer; transition:all .2s;
}
.file-upload:hover { border-color:var(--green-400); background:var(--green-50); }
.file-upload input { display:none; }
.file-upload .upload-icon { font-size:1.5rem; margin-bottom:6px; }
.file-upload .upload-text { font-size:.85rem; color:var(--gray-500); }

/* --- Responsive --- */
@media (min-width:640px) {
  .questionnaire-page { padding-top:140px; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .option-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px) {
  .progress-bar { top:64px; }
  .questionnaire-page { padding-top:150px; }
}