@import url("styles.css");

.form-page { min-height: 100vh; padding: 120px 24px 64px; }
.form-shell { width: min(820px, 100%); margin: 0 auto; }
.form-header { margin-bottom: 2rem; }
.form-header h1 { margin: .65rem 0; color: var(--navy); font-family: var(--serif); font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; }
.form-header > p:last-child { color: var(--muted); font-size: 1.05rem; }
.home-link { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 2rem; color: var(--navy); font-weight: 700; }
.home-link img { width: 38px; height: 38px; object-fit: contain; }

.form-card { padding: clamp(1.4rem, 5vw, 3rem); border: 1px solid rgba(255,255,255,.75); border-radius: 26px; background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.progress-wrap { position: sticky; z-index: 20; top: 14px; display: flex; align-items: center; gap: 14px; margin-bottom: 2rem; padding: 14px 18px; border: 1px solid rgba(255,255,255,.75); border-radius: 14px; background: rgba(247,250,253,.9); backdrop-filter: blur(18px); }
.progress-track { flex: 1; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(19,42,76,.12); }
.progress-bar { width: 20%; height: 100%; border-radius: inherit; background: var(--gradient); transition: width .35s ease; }
.step-label { color: var(--navy); font-family: var(--mono); font-size: .73rem; white-space: nowrap; }

.form-step[hidden] { display: none; }
.form-step h2 { margin-bottom: .5rem; color: var(--navy); font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; }
.step-intro { margin-bottom: 2rem; color: var(--muted); font-size: 1.05rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label, .question legend { color: var(--navy-soft); font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.field small { color: var(--faint); font-size: .78rem; }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 2px solid var(--navy);
  border-radius: 0;
  padding: 9px 3px;
  color: var(--navy);
  background: transparent;
  font-family: var(--serif);
  font-size: 1.35rem;
  outline: none;
  transition: border-color .2s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--teal); }
.question { min-width: 0; margin: 0 0 2rem; padding: 0; border: 0; }
.question legend { margin-bottom: 12px; }
.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.option-grid.four { grid-template-columns: repeat(4, 1fr); }
.option {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 66px;
  padding: 12px 13px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255,255,255,.38);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.option:hover { transform: translateY(-1px); border-color: rgba(14,165,163,.55); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option-content { display: grid; gap: 3px; }
.option-content strong { color: var(--navy); line-height: 1.2; }
.option-content small { color: var(--muted); line-height: 1.2; }
.option:has(input:checked) { border-color: var(--teal); background: rgba(45,212,196,.15); box-shadow: inset 0 0 0 1px var(--teal); }
.form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 2.5rem; }
.form-message { min-height: 1.5rem; margin: 1rem 0 0; color: #a13027; font-weight: 600; text-align: center; }
.consent { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); line-height: 1.55; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--teal); }

.preview-grid, .result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 1.5rem 0; }
.preview-card, .result-card { padding: 1.3rem; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.48); }
.preview-card span, .result-card span { display: block; color: var(--faint); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.preview-card strong, .result-card strong { display: block; margin-top: 6px; color: var(--navy); font-family: var(--serif); font-size: 1.9rem; line-height: 1; }

.report { margin-top: 2rem; }
.report[hidden] { display: none; }
.report-head { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--navy), var(--navy-soft)); }
.report-head .eyebrow { color: rgba(255,255,255,.72); }
.report-head h2 { margin: .8rem 0; font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.report-head p { color: rgba(255,255,255,.78); }
.report-section { margin-top: 1.5rem; padding: clamp(1.3rem, 4vw, 2rem); border: 1px solid rgba(255,255,255,.76); border-radius: 20px; background: var(--glass); box-shadow: var(--shadow); }
.report-section h3 { margin-bottom: 1rem; color: var(--navy); font-family: var(--serif); font-size: 1.8rem; }
.result-list { display: grid; gap: 0; }
.result-row { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--border); }
.result-row span { color: var(--muted); }
.result-row strong { color: var(--navy); text-align: right; }
.gap-list { display: grid; gap: 12px; }
.gap-item { padding: 12px 14px; border-left: 4px solid var(--teal); border-radius: 8px; background: rgba(45,212,196,.08); }
.gap-item.critical { border-left-color: #c83d32; background: rgba(200,61,50,.08); }
.gap-item strong { display: block; color: var(--navy); }
.gap-item p { margin: 4px 0 0; color: var(--muted); }
.booking-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.booking-card h3 { margin-bottom: .4rem; }
.booking-card p { margin: 0; color: var(--muted); }
.status { min-height: 1.5rem; margin-top: 1rem; color: var(--teal); font-weight: 700; text-align: center; }

@media (max-width: 680px) {
  .form-page { padding: 24px 14px 50px; }
  .field-grid, .option-grid, .option-grid.four, .preview-grid, .result-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .progress-wrap { top: 8px; }
  .booking-card { align-items: flex-start; flex-direction: column; }
}

@media print {
  body { background: #fff; }
  .no-print, .form-card, .home-link { display: none !important; }
  .form-page { padding: 0; }
  .report { margin: 0; }
  .report-section, .report-head { box-shadow: none; break-inside: avoid; }
}

/* Honeypot: off-screen rather than display:none.
   A bot that skips display:none / visibility:hidden inputs will still find and
   fill this one, which is the whole point. Kept out of the tab order and out of
   the accessibility tree by attributes on the markup. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* "What this would cost" — the indicative pricing block.
   Ranges rather than single figures, because the form collects bands. */
.price-tier + .price-tier { margin-top: 1.6rem; }
.price-tier h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 .6rem;
  color: var(--navy);
  font-size: 1.05rem;
}
.price-scope {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .04em;
}
.price-lead { margin-bottom: .8rem; font-weight: 600; color: var(--navy); }
.price-note {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}
.price-exclusions { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.price-exclusions h4 { margin: 0 0 .7rem; color: var(--navy); font-size: .95rem; }
.price-exclusions ul { display: grid; gap: .45rem; color: var(--muted); font-size: .92rem; }
.price-exclusions li { display: flex; gap: .6rem; }
.price-exclusions li::before { color: var(--teal); content: "—"; }

/* Submission status under the report.
   Three visually distinct outcomes, because "we saved your details" and "nobody
   received them" must never look alike. `.status` already sets the layout; these
   only change colour. */
.status-pending { color: var(--muted); }
.status-sent { color: var(--teal); }
.status-rejected,
.status-failed {
  max-width: 60ch;
  margin-inline: auto;
  padding: .9rem 1.1rem;
  border-radius: 12px;
  color: #8a2b3f;
  background: #fdeef1;
  border: 1px solid #f3c9d2;
  font-weight: 600;
  line-height: 1.55;
}