/* ==========================================================================
   KARTIK YATRA — FORM STYLES
   --------------------------------------------------------------------------
   Loaded on top of style.css, and uses the same colours and fonts from
   the tokens in section 1 of that file. Only the registration page uses this.
   ========================================================================== */


/* ---- Page frame ---------------------------------------------------------- */
.form-page{ padding:104px 0 80px; }

.form-hero{ padding:24px 0 8px; }
.form-hero h1{ font-size:clamp(2.1rem, 5vw, 3rem); line-height:1.06; margin-bottom:10px; }

.form-section{ padding:34px 0 0; }
.form-section .section-head{ margin-bottom:22px; }
.form-section .section-head h2{ font-size:1.45rem; }
.form-section .section-head .lede{ font-size:.96rem; margin-top:6px; }


/* ---- Deposit / deadline notice ------------------------------------------- */
.notice{
  background:var(--maroon); color:#F6E9DD;
  border-radius:var(--radius); padding:18px 22px;
  font-size:.94rem; line-height:1.6; margin-top:18px;
}
.notice b{ color:#fff; }


/* ---- Itinerary ----------------------------------------------------------- */
.itin-row{ display:flex; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); }
.itin-row:last-child{ border-bottom:none; }
.itin-when{ width:122px; flex-shrink:0; }
.itin-day{ font-family:var(--font-display); font-weight:600; font-size:.98rem; }
.itin-date{ font-size:.84rem; color:var(--ink-faint); }
.itin-occasion{ font-size:.78rem; color:var(--maroon); font-weight:600; margin-top:3px; }
.itin-what{ flex:1; font-size:.93rem; color:var(--ink-soft); }
.itin-what div{ margin-bottom:3px; }
@media (max-width:520px){
  .itin-row{ flex-direction:column; gap:5px; }
  .itin-when{ width:auto; display:flex; gap:10px; align-items:baseline; }
}
.itin-notes{
  margin-top:18px; padding:16px 18px;
  background:var(--tint); border-radius:var(--radius-sm);
}
.itin-notes p{ margin:0 0 6px; font-size:.9rem; color:var(--ink-soft); }
.itin-notes p:last-child{ margin-bottom:0; }


/* ---- Form fields --------------------------------------------------------- */
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:.86rem; color:var(--ink-soft);
  margin-bottom:6px; font-weight:500;
}
.field .req{ color:var(--maroon); }
.field-note{ display:block; font-size:.78rem; color:var(--ink-faint); margin-top:5px; }

input[type=text], input[type=tel], input[type=email], input[type=date]{
  width:100%; padding:12px 13px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:.96rem;
}
input:focus{ outline:2px solid var(--gold); outline-offset:1px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .grid-2{ grid-template-columns:1fr; } }


/* ---- Radio option cards -------------------------------------------------- */
.option-list{ display:flex; flex-direction:column; gap:9px; }
.option{
  display:flex; align-items:flex-start; gap:12px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; cursor:pointer; background:var(--surface); font-size:.94rem;
  transition:border-color .15s, background .15s;
}
.option:hover{ border-color:var(--gold); }
.option input{ accent-color:var(--maroon); flex-shrink:0; margin-top:3px; }
.option-text{ flex:1; }
.option-note{ display:block; font-size:.81rem; color:var(--ink-faint); margin-top:3px; }
.option-price{
  margin-left:auto; color:var(--ink-soft); font-size:.9rem;
  font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:10px;
}
/* Highlight the chosen option */
.option:has(input:checked){ border-color:var(--gold); background:#FBF3E6; }


/* ---- Fixed charges list -------------------------------------------------- */
.fixed-charges{ margin-top:6px; }
.fixed-charges div{
  display:flex; justify-content:space-between;
  padding:10px 0; font-size:.92rem; color:var(--ink-soft);
  border-bottom:1px dashed var(--line);
}
.fixed-charges div:last-child{ border-bottom:none; }

.running-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:16px; padding-top:14px; border-top:2px solid var(--ink);
  font-family:var(--font-display); font-size:1.18rem; font-weight:600;
}


/* ---- Family member cards ------------------------------------------------- */
.member-card{
  border:1px solid var(--line); border-left:3px solid var(--maroon);
  border-radius:var(--radius-sm); margin-bottom:12px;
  background:var(--surface); overflow:hidden;
}
.member-head{
  display:flex; align-items:center; gap:11px;
  padding:14px 15px; cursor:pointer; user-select:none;
}
.member-head .chev{ transition:transform .18s ease; flex-shrink:0; color:var(--ink-faint); }
.member-card.open .chev{ transform:rotate(90deg); }
.member-title{ font-weight:600; font-size:.96rem; flex:1; }
.member-tag{ font-weight:400; color:var(--ink-faint); font-size:.85rem; }
.member-amount{
  font-variant-numeric:tabular-nums; color:var(--maroon);
  font-weight:600; font-size:.92rem; white-space:nowrap;
}
.member-remove{
  border:none; background:none; color:var(--ink-faint);
  cursor:pointer; padding:5px; border-radius:6px; line-height:0;
}
.member-remove:hover{ color:var(--maroon); background:#F5E9E7; }

.member-body{ padding:0 15px 18px; display:none; }
.member-card.open .member-body{ display:block; }

.member-total{
  display:flex; justify-content:space-between;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--font-display); font-size:1.02rem; font-weight:600;
}

.age-toggle{ display:flex; gap:10px; }
.age-toggle label{
  flex:1; text-align:center; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:11px; cursor:pointer; font-size:.89rem;
  background:var(--surface);
}
.age-toggle label:has(input:checked){ border-color:var(--gold); background:#FBF3E6; font-weight:600; }
.age-toggle input{ margin-right:7px; accent-color:var(--maroon); }

.inherit-note{
  background:var(--tint); border-radius:var(--radius-sm);
  padding:13px 15px; font-size:.87rem; color:var(--ink-soft); margin-bottom:14px;
}
.inherit-note b{ color:var(--ink); }

.child-intro{ font-size:.87rem; color:var(--ink-soft); margin:0 0 12px; }

.addon{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; margin-bottom:9px; background:var(--surface);
}
.addon > label{
  display:flex; align-items:center; gap:10px;
  cursor:pointer; font-size:.93rem; font-weight:500;
}
.addon input[type=checkbox]{ accent-color:var(--maroon); }
.addon .option-price{ font-weight:400; }
.addon .addon-options{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:none;
}
.addon.checked .addon-options{ display:block; }


/* ---- Add member button --------------------------------------------------- */
.add-member{
  width:100%; padding:14px;
  border:1.5px dashed var(--gold); border-radius:var(--radius-sm);
  background:none; color:var(--maroon); font-weight:600; font-size:.95rem;
  cursor:pointer; font-family:inherit; transition:background .15s;
}
.add-member:hover{ background:#FBF3E6; }


/* ---- Totals panel -------------------------------------------------------- */
.totals-panel{
  margin-top:38px; padding:26px;
  border-radius:var(--radius); background:var(--ink); color:#fff;
}
.totals-panel .row{
  display:flex; justify-content:space-between;
  padding:7px 0; font-size:.95rem; color:#D2D4EA;
}
.totals-panel .row.grand{
  font-family:var(--font-display); font-size:1.55rem; color:#fff; font-weight:600;
  border-top:1px solid rgba(255,255,255,.2); margin-top:8px; padding-top:15px;
}
.totals-panel .row.deposit{ color:var(--gold-light); font-weight:600; font-size:1.02rem; }
.totals-panel .totals-note{
  margin:14px 0 0; font-size:.82rem; color:#9FA2C4; line-height:1.55;
}


/* ---- Submit and errors --------------------------------------------------- */
.submit-button{
  width:100%; margin-top:22px; padding:16px;
  border:none; border-radius:var(--radius-sm);
  background:var(--maroon); color:#fff;
  font-size:1rem; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background .15s, transform .15s;
}
.submit-button:hover:not(:disabled){ background:#71232A; transform:translateY(-1px); }
.submit-button:disabled{ opacity:.55; cursor:not-allowed; }

.form-error{
  color:var(--maroon); font-size:.9rem; margin-top:14px;
  background:#F9ECEA; border:1px solid #E7C9C5;
  border-radius:var(--radius-sm); padding:12px 14px;
}


/* ---- Success panel ------------------------------------------------------- */
.success-panel{
  background:#EEF4EC; color:#2E4A2A;
  border-radius:var(--radius); padding:36px 28px; text-align:center; margin-top:24px;
}
.success-panel h2{ color:#2E4A2A; margin-bottom:10px; }
.success-names{ font-size:.95rem; }
.success-total{ font-family:var(--font-display); font-size:2.1rem; margin:14px 0 4px; }
.success-ref{ font-size:.87rem; color:#4A6146; margin-top:10px; }
.success-panel .btn-outline-dark{ border-color:#2E4A2A; color:#2E4A2A; }
.success-panel .btn-outline-dark:hover{ background:#2E4A2A; color:#fff; }