/**
 * Versiclad order form styling — pixel-matched against the LIVE SnapForms
 * form (https://versiclad.snapforms.com.au/form/ceilink-order-form),
 * inspected directly on 2026-08-27, not the site's general HubSpot-embed
 * look. SnapForms runs its own separate design system (Open Sans, navy
 * #073763 banners, Bootstrap-3-style grid) that never matched Versiclad's
 * main-site "silka" brand font — replicating THAT, since that's the actual
 * form experience being replaced.
 *
 * Confirmed real values, measured directly on the live Spacemaker form
 * 2026-08-27 (getBoundingClientRect/getComputedStyle, not eyeballed):
 *   - page bg #ECF0F1, white card max-width 1000px, no shadow
 *   - card padding: 15px UNIFORM (.panel-body) — not 15/30/30
 *   - column gutter: 30px between adjacent fields (15px col padding each
 *     side, Bootstrap's row/-15px-margin + col/15px-padding technique) —
 *     grid gap below is 30px to match, not an arbitrary 20px
 *   - navy #073763 section banners, 20px/500, padding 10px, margin 20px 0 5px
 *   - field row spacing: each field's own margin-bottom:15px (rows
 *     themselves add no extra gap)
 *   - label margin-bottom: 5px
 *   - inputs: 1px #CFD9DB border, 4px radius, 6px 12px padding, 34px
 *     height, 13px Open Sans
 *   - IMAGES ARE NOT STRETCHED TO FILL THEIR COLUMN. SnapForms resizes each
 *     upload to a specific measured px width and renders it at that size
 *     (centered via auto margins when full-width, left-aligned at natural
 *     size in narrower columns). Every image in spacemaker.json now carries
 *     an explicit measured width — this was the single biggest visible
 *     mismatch in the previous pass (images were stretching edge-to-edge).
 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  --vof-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --vof-page-bg: #ecf0f1;
  --vof-card-bg: #ffffff;
  --vof-navy: #073763;
  --vof-text: #525252;
  --vof-input-text: #555555;
  --vof-input-border: #cfd9db;
  --vof-error: #b91c1c;
}

body.vof-page {
  background: var(--vof-page-bg);
  margin: 0;
  padding: 30px 0;
}

.versiclad-order-form {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--vof-card-bg);
  border-radius: 3px;
  padding: 15px;
  font-family: var(--vof-font);
  font-size: 13px;
  color: var(--vof-text);
}

.vof-section { margin-bottom: 0; }

.vof-section-header {
  background: var(--vof-navy);
  color: #ffffff;
  font-family: var(--vof-font);
  font-size: 20px;
  font-weight: 500;
  padding: 10px;
  margin: 0 0 15px;
  text-align: center; /* client request 2026-09-03: centre text in the blue panel */
}

.vof-hero-image {
  display: block;
  max-width: 100%;
  margin: 10px auto; /* centered — real form auto-margins full-width images */
}

.vof-inline-image {
  display: block;
  max-width: 100%;
  border-radius: 3px;
  /* NOT centered, NOT stretched — real form left-aligns these at their
     measured natural size within the column. 200px fallback for the
     handful of conditionally-hidden images not yet measured (Lighting,
     Skylights, Post & Beams brackets) — real form was collapsed on those
     by default so no live measurement exists yet, see spec _notes. */
  width: 200px;
}

/* full-width product photos (e.g. Thickness's hero render) are centered
   on the live form, unlike the default left-aligned option-illustration
   images above — field.image.centered opts a specific image into this */
.vof-inline-image--centered {
  margin: 0 auto;
}

.vof-inline-image--right {
  margin-left: auto;
  margin-right: 0;
}

.vof-field-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 30px; /* measured: 15px col padding × 2 adjoining columns */
  padding: 0 15px;
}
@media (max-width: 700px) {
  .vof-field-grid { grid-template-columns: 1fr; }
  .vof-field { grid-column: 1 / -1 !important; }
}

.vof-field {
  margin-bottom: 15px;
  /* keeps each field's input/select/radio-group flush to a common bottom
     edge across a row even when a sibling's label wraps to two lines —
     the live SnapForms form doesn't do this (plain Bootstrap block columns,
     no cross-column alignment), this is a deliberate improvement over the
     source, not a source-fidelity match */
  display: flex;
  flex-direction: column;
}

.vof-field > label {
  flex-shrink: 0;
}

.vof-field > input,
.vof-field > select,
.vof-field > textarea,
.vof-field > .vof-radio-group,
.vof-field > .vof-checkbox-group {
  margin-top: auto;
}

/* direct child only — must NOT match nested radio/checkbox option <label>s
   (.vof-radio-option / .vof-checkbox-option), which have their own distinct
   font-weight/size/margin. Was a descendant selector before 2026-08-27,
   which leaked font-weight:600 and an extra 5px margin-bottom onto every
   radio option label, causing a ~10px group gap instead of the source's 5px. */
.vof-field > label {
  display: block;
  font-family: var(--vof-font);
  font-weight: 600;
  font-size: 14px;
  color: var(--vof-text);
  margin-bottom: 5px;
}

/* live form's own required marker: <span class="text-danger">*</span>,
   measured rgb(237, 84, 102) — not the same red as --vof-error */
.vof-required {
  color: rgb(237, 84, 102);
}

.vof-field input[type="text"],
.vof-field input[type="number"],
.vof-field input[type="date"],
.vof-field input[type="email"],
.vof-field select,
.vof-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  color: var(--vof-input-text);
  border: 1px solid var(--vof-input-border);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--vof-font);
  font-size: 13px;
  height: 34px;
}

.vof-field textarea { height: auto; min-height: 68px; }

.vof-field input[disabled] { background: #f5f5f5; }

/* calculated/read-only fields (e.g. Panel Quantities' row Total) — measured
   live 2026-08-28: rgb(238,238,238), not the disabled-input grey above */
.vof-field input[readonly] { background: #eeeeee; }

/* file upload — live form is a Bootstrap input-group: readonly filename
   display + navy "Browse" button wrapping the real file input, confirmed
   live via Post and Beams' "Please upload any plans or drawings" field */
.vof-file-group {
  display: flex;
  width: 100%;
}
.vof-file-display {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--vof-input-border);
  border-right: none;
  border-radius: 4px 0 0 4px;
  padding: 6px 12px;
  font-family: var(--vof-font);
  font-size: 13px;
  height: 34px;
}
.vof-file-browse {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  background: var(--vof-navy);
  color: #ffffff;
  border-radius: 0 4px 4px 0;
  font-family: var(--vof-font);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.vof-file-browse input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.vof-radio-group {
  display: flex;
  flex-direction: column;
  gap: 5px; /* measured live 2026-08-27 — was 6px, but native radio's UA-default
               margin-top (3px) stacked on top of it, actual rendered gap was
               11px vs source's real 5px */
  padding-top: 4px;
}

/* a few radio groups lay options out in one row on the live form (e.g.
   Spacemaker's Thickness) — measured gap: 20px between options */
.vof-radio-group--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.vof-radio-option {
  font-family: var(--vof-font);
  font-weight: 400;
  font-size: 14px; /* measured live 2026-08-27 — was 13px */
  color: var(--vof-input-text);
  display: flex;
  align-items: center;
  gap: 7px; /* measured live 2026-08-27 — was 6px */
}
/* live form does NOT use the native radio appearance — it hides the real
   input and draws the circle itself via label::before (18px circle,
   grey border, navy fill when checked) + label::after (8px white dot,
   checked only). Measured directly 2026-08-27 on an unchecked and a
   checked option: circle 18x18px, border 0.8px solid rgb(200,200,200)
   empty / var(--vof-navy) filled, inner dot 8x8px white centered
   (offset 5px = (18-8)/2, so no extra math needed). Replicated here by
   styling the native input directly with appearance:none rather than
   hiding it + faking one with a label — same visual result, simpler
   markup, and the input stays natively clickable/keyboard-operable. */
.vof-radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 0.8px solid rgb(200, 200, 200);
  background-color: transparent;
  position: relative;
  cursor: pointer;
}
.vof-radio-option input[type="radio"]:checked {
  background-color: var(--vof-navy);
  border-color: var(--vof-navy);
}
.vof-radio-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

.vof-field-note {
  display: block;
  margin-top: 5px;
  color: #92640a;
  font-size: 12px;
}

/* real live-form caption text (SnapForms .help-block) — measured 2026-08-27
   off Spacemaker's "Select Thickness" field: rgb(136,136,136), 13px, 5px
   top margin. Distinct from .vof-field-note (a reviewer flag, not content). */
.vof-help-text {
  display: block;
  margin-top: 5px;
  color: rgb(136, 136, 136);
  font-size: 13px;
}

/* live form centers the Next/Previous/Submit row, then the "Save and
   Complete Later" link sits centered below it with a 20px gap —
   measured 2026-08-28, was a left-aligned single-row flex before */
.vof-actions {
  text-align: center;
  padding: 15px;
}

.vof-actions-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.vof-divider {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 10px 0 15px;
}

/* the page-header divider (above the first section banner) is a distinct
   navy rule on the live form, not the light-grey one used between
   sub-blocks — measured 2026-08-27: 0.8px solid #1c4587, 20px margins */
.vof-divider--navy {
  border-top: 0.8px solid #1c4587;
  margin: 20px 0;
}

.vof-divider--light {
  border-top: 0.8px solid #dde4e6;
  margin: 20px 0;
}

/* page-header title (e.g. "Spacemaker Order / Quote Form") above the
   first section banner — measured 2026-08-27: 30px/700, centered */
.vof-page-title {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--vof-font);
  font-size: 30px;
  font-weight: 700;
  color: var(--vof-text);
  margin: 0;
}

.vof-submit,
.vof-next,
.vof-prev {
  background: var(--vof-navy);
  color: #ffffff;
  border: 1px solid var(--vof-navy);
  border-radius: 4px; /* measured: Submit/Add-Row buttons are 4px */
  padding: 6px 12px;
  font-family: var(--vof-font);
  font-weight: 400;
  font-size: 13px;
  cursor: pointer;
}

.vof-next,
.vof-prev {
  border-radius: 5px; /* measured separately: Next/Previous are 5px, not 4px */
}

/* plain underlined link on the live form, not a boxed button — measured
   2026-08-28: rgb(7,55,99), underline, 13px, 20px gap above it */
.vof-save-link {
  display: inline-block;
  margin-top: 20px;
  background: none;
  border: none;
  padding: 0;
  color: var(--vof-navy);
  font-family: var(--vof-font);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.vof-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.vof-status { font-size: 13px; font-family: var(--vof-font); }
.vof-status--error { color: var(--vof-error); }

/* inline per-field error marks — added 2026-09-02 alongside the existing
   bottom-of-page summary, per a live tester's request ("missing field
   notifications below the fields itself"). Kept subtle: a red input border
   plus a small caption, not a layout-shifting banner. */
.vof-field--error > input,
.vof-field--error > select,
.vof-field--error > textarea,
.vof-field--error .vof-file-group {
  border-color: var(--vof-error);
}
.vof-field-error-text {
  color: var(--vof-error);
  font-size: 12px;
  font-family: var(--vof-font);
  margin-top: 4px;
}

/* real "table" repeaters (Add Row / Remove Row) — SnapForms shows
   field.minRows rows by default, "Add Row" clones another identical row.
   Button styling matches the live form's own .newtablerowbutton (same
   navy btn-primary look as Next/Submit, measured 2026-08-27). */
.vof-repeater-label {
  font-family: var(--vof-font);
  font-weight: 600;
  font-size: 13px;
  color: var(--vof-text);
  padding: 0 15px;
  margin-bottom: 5px;
}
.vof-repeater-row {
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  margin-top: 10px;
}
.vof-repeater-row:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.vof-repeater-add,
.vof-repeater-remove {
  background: var(--vof-navy);
  color: #ffffff;
  border: 1px solid var(--vof-navy);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--vof-font);
  font-size: 13px;
  cursor: pointer;
  margin: 0 15px 10px;
  /* .vof-repeater is a flex column (same .vof-field base as every other
     field), and flex's default align-items:stretch was stretching this
     button to the full container width (measured 940px vs the live
     form's own compact ~79px) — align-self opts it back out, matching
     every other product's repeater too, not just this one */
  align-self: flex-start;
}
.vof-repeater-add:disabled { opacity: 0.6; cursor: not-allowed; }
.vof-repeater-remove {
  background: transparent;
  color: var(--vof-navy);
}

.vof-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.vof-checkbox-option {
  font-family: var(--vof-font);
  font-weight: 400;
  font-size: 13px;
  color: var(--vof-input-text);
  display: flex;
  align-items: center;
  gap: 6px;
}