/* ═══════════════════════════════════════════════
   NEKAR MATRIMONY — FORMS CSS
═══════════════════════════════════════════════ */

/* ── Biodata Form Container ─────────────────── */
.form-container { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--border); }
.form-steps { display:flex; background:var(--cream-dk); border-bottom:1px solid var(--border); overflow-x:auto; }
.step-tab { flex:1; min-width:120px; padding:18px 16px; text-align:center; cursor:pointer; font-size:0.8rem; font-weight:600; color:var(--gray); transition:var(--transition); position:relative; white-space:nowrap; }
.step-tab.active { color:var(--navy); background:var(--white); }
.step-tab.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--orange); }
.step-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--cream-dk); color:var(--gray); font-size:10px; margin-right:6px; border:1.5px solid var(--gray-lt); }
.step-tab.active   .step-num { background:var(--orange); color:white; border-color:var(--orange); }
.step-tab.completed .step-num { background:var(--navy); color:white; border-color:var(--navy); }

/* ── Form Body ──────────────────────────────── */
.form-body { padding:40px; }
.form-section-title { font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:28px; padding-bottom:14px; border-bottom:1px solid var(--border-navy); display:flex; align-items:center; gap:10px; }
.form-section-title i { color:var(--orange); }
.step-content { display:none; }
.step-content.active { display:block; }

/* ── Form Grid ──────────────────────────────── */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:0.78rem; font-weight:600; color:var(--charcoal); text-transform:uppercase; letter-spacing:0.8px; }
.form-group label .req { color:var(--orange); }

/* ── Inputs ─────────────────────────────────── */
.form-group input,
.form-group select,
.form-group textarea {
  padding:12px 16px; border:2px solid var(--border-navy);
  border-radius:10px; font-size:0.9rem; color:var(--charcoal);
  background:var(--cream); outline:none; transition:var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--orange); background:white;
  box-shadow:0 0 0 3px rgba(224,123,26,0.1);
}
.form-group textarea { resize:vertical; min-height:100px; }

/* ── DOB Row ─────────────────────────────────── */
.dob-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* ── Radio / Checkbox ───────────────────────── */
.radio-group { display:flex; gap:10px; flex-wrap:wrap; }
.radio-option { display:flex; align-items:center; gap:8px; padding:10px 16px; border:2px solid var(--border-navy); border-radius:50px; cursor:pointer; font-size:0.85rem; transition:var(--transition); font-weight:500; }
.radio-option input { display:none; }
.radio-option:has(input:checked) { border-color:var(--orange); background:var(--orange-pale); color:var(--orange); font-weight:600; }
.checkbox-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.checkbox-option { display:flex; align-items:center; gap:8px; padding:9px 13px; border:2px solid var(--border-navy); border-radius:9px; cursor:pointer; font-size:0.82rem; transition:var(--transition); }
.checkbox-option input { display:none; }
.checkbox-option:has(input:checked) { border-color:var(--navy); background:rgba(11,37,69,0.06); color:var(--navy); font-weight:600; }

/* ── Photo Upload Grid ──────────────────────── */
.photo-count-bar { font-size:12px; color:var(--gray); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.photo-count-bar strong { color:var(--navy); }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.photo-item { position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1; border:2px solid var(--border-navy); transition:var(--transition); }
.photo-item.primary { border-color:var(--orange); border-width:3px; }
.photo-item img { width:100%; height:100%; object-fit:cover; display:block; }
.primary-badge { position:absolute; top:5px; left:5px; background:var(--orange); color:white; font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; display:flex; align-items:center; gap:3px; }
.photo-actions { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,0.75)); padding:8px 6px 6px; display:flex; gap:4px; justify-content:center; opacity:0; transition:var(--transition); }
.photo-item:hover .photo-actions { opacity:1; }
.photo-actions button { width:26px; height:26px; border-radius:50%; background:rgba(224,123,26,0.9); border:none; color:white; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.photo-actions button.del { background:rgba(163,45,45,0.9); }
.photo-add-btn { border:2px dashed var(--border); border-radius:10px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; color:var(--gray); font-size:10px; gap:5px; transition:var(--transition); background:var(--cream); }
.photo-add-btn:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-pale); }
.photo-add-btn i { font-size:22px; }

/* ── Password Strength ──────────────────────── */
.password-strength { font-size:11px; margin-top:4px; }
.strength-weak   { color:#A32D2D; }
.strength-medium { color:#7a4200; }
.strength-strong { color:#27500A; }

/* ── Form Nav ───────────────────────────────── */
.form-nav { display:flex; justify-content:space-between; align-items:center; padding:22px 40px; border-top:1px solid var(--border-navy); background:var(--cream-dk); }
.form-progress { font-size:0.83rem; color:var(--gray); }
.form-progress strong { color:var(--navy); }

/* ── Submitted Banner ───────────────────────── */
.submitted-banner { padding:50px 40px; text-align:center; }
.submitted-icon { width:72px; height:72px; border-radius:50%; background:var(--orange-pale); border:2px solid var(--orange); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.submitted-icon i { font-size:32px; color:var(--orange); }

/* ── Responsive ─────────────────────────────── */
@media(max-width:768px) {
  .form-grid { grid-template-columns:1fr; }
  .form-group.full { grid-column:1; }
  .checkbox-grid { grid-template-columns:1fr 1fr; }
  .form-body { padding:24px; }
  .form-nav { padding:18px 24px; flex-direction:column; gap:12px; }
  .dob-row { grid-template-columns:1fr; }
  /* Fix — age range stacks vertically on mobile */
  .age-range-wrap { flex-direction:column !important; align-items:stretch !important; }
  .age-range-wrap span { display:none; }
  .age-range-wrap input { width:100% !important; }
}
@media(max-width:480px) {
  /* Fix — education checkboxes single column on small phones */
  .checkbox-grid { grid-template-columns:1fr !important; }
  .form-body { padding:16px; }
}