/*
 * Minimal Gravity Forms "Orbital" grid layout — hand-extracted verbatim from GF's
 * gravity-forms-theme-foundation.min.css (the full GF bundle, incl. a reset, was
 * deliberately deferred in Phase 1; see ThemeStyles). This is the layout our
 * ported forms rely on and which was missing:
 *
 *   .gform_fields{ display:grid; grid-template-columns:repeat(12,1fr);
 *                  column-gap:var(--gf-form-gap-x=16px);
 *                  row-gap:var(--gf-form-gap-y=40px) }
 *   .gfield--width-{full|half|quarter} -> span 12|6|3
 *
 * The 40px ROW gap is what spaces the footer Connect form's stacked fields (it
 * looked condensed without it); the 12-col grid lays out the homepage widget's
 * From/To/Passengers/submit row. Scoped to .gform_wrapper so it only affects our
 * forms and nothing else on the page (Rule 1).
 */
.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(auto-fill, auto);
  column-gap: 16px;
  row-gap: 40px;
  inline-size: 100%;
}
.gform_wrapper .gfield--width-full {
  grid-column: span 12;
}
.gform_wrapper .gfield--width-half {
  grid-column: span 6;
}
.gform_wrapper .gfield--width-quarter {
  grid-column: span 3;
}

/*
 * Homepage quick-quote widget only: vertically centre the single field row with
 * the circular submit button, and add the bottom pad the child CSS zeroes
 * (`#gform_6{padding:20px 20px 0 20px}`) — on live GF's own CSS supplied it.
 */
.form-section .gform_wrapper .gform_fields {
  align-items: center;
}
.form-section form#gform_6 {
  padding-bottom: 20px;
}

/*
 * Phase 7.5 — embedded QUOTE forms only (`.form-embed-section`, i.e. the four
 * request-quote pages). Everything below is scoped to that section so it can NEVER
 * touch the footer "Connect with us" form (`.bottomquotebg-section`) or the
 * homepage quick-quote widget (`.form-section`), both of which have their own
 * bespoke child-theme layout that already matches live. These rules reproduce the
 * GF-provided spacing the embedded forms need to match live pixel-for-pixel.
 */

/* On live the form sits inside a SiteOrigin panel/textwidget whose row spacing
   puts ~15px above the form heading and ~25px below the submit. That empty panel
   scaffold was removed to fix a hydration mismatch (scripts/fix-quote-forms.mjs),
   so reproduce its outer vertical spacing on the section itself. Matches live at
   desktop; tablet/mobile keep their own residual spacing deltas (tracked). */
.form-embed-section {
  padding-top: 15px;
  padding-bottom: 25px;
  /* Live nests the form in a SiteOrigin `.textwidget.custom-html-widget` whose
     15px horizontal padding insets the whole form-column chain (textwidget→
     container→row→col-md-8) so the fields sit 30px in from each edge. We removed
     that panel scaffold (hydration fix), so reproduce its horizontal padding
     here. At desktop the inner `.container`'s max-width dominates, so this has no
     visual effect there (desktop parity preserved); at mobile it insets the
     full-width form to match live's 315px field width instead of 345px. */
  padding-left: 15px;
  padding-right: 15px;
}

/*
 * Mobile single-column collapse (GF foundation parity). GF's own foundation CSS
 * makes `.gfield{grid-column:1/-1}` the default and only applies the
 * `--width-half`/`--width-quarter` column spans inside `@media (min-width:640px)`
 * — so below 640px every field spans the full row (First/Last name, From/To and
 * the two Date fields stack instead of pairing up). Our hand-extracted grid set
 * the spans unconditionally, so at 375px it kept them side-by-side while live
 * stacked them — a ~400px height shortfall on the request-quote pages. Reinstate
 * GF's collapse. Scoped to `.form-embed-section` so the footer/homepage widgets
 * (bespoke child CSS, already matching live) are untouched.
 */
@media (max-width: 639px) {
  .form-embed-section .gform_wrapper .gfield--width-half,
  .form-embed-section .gform_wrapper .gfield--width-quarter {
    grid-column: 1 / -1;
  }
}

/*
 * Sub-pixel vertical parity below the Bootstrap `md` breakpoint (992px), where
 * `col-md-8` becomes full-width. Live nests the form in a deeper SiteOrigin
 * panel/textwidget chain that we flattened to fix a hydration mismatch
 * (scripts/fix-quote-forms.mjs); the flattened DOM collapses the form title's
 * 20px top margin 1px higher than live, and the CTA block below the form
 * sub-pixel-rounds 1px shorter — leaving the page 2px under live's exact height.
 * Playwright fails on ANY size mismatch, and the ~2700px gold-edged form region
 * anti-aliases against live when shifted. Absorb the two 1px deltas (one above
 * the form, one below) so the form aligns to live and total height matches. At
 * tablet-1024/desktop `col-md-8` constrains the column and both already match, so
 * this is scoped to <992px only. Verified vs live at 780 and 375.
 */
@media (max-width: 991px) {
  .form-embed-section {
    padding-top: 16px;
    padding-bottom: 26px;
  }
}

/* ~8px label→input gap GF's foundation gives each top-label field on live. */
.form-embed-section .gform_wrapper .gfield_label {
  margin-bottom: 8px;
}

/* Field descriptions (e.g. the Passengers number field's "Please enter a number
   from 1 to 19.") sit 8px below the input at 13px/18.59px on live; GF's default
   here is 14px/20px flush, which makes each ~6px too short. Match live. The
   consent description has its own (more specific) rule, so this doesn't touch it. */
.form-embed-section .gform_wrapper .gfield_description {
  margin-top: 8px;
  font-size: 13px;
  line-height: 18.59px;
}

/*
 * Consent checkbox: the ported child rule `form .gform-body input{width:100%}`
 * (no !important) would stretch the checkbox full-width; live keeps it inline
 * before its label with the description below. Reset it and lay the checkbox +
 * label out inline like live.
 */
.form-embed-section .gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
/* Live renders a 20×20 square custom checkbox (appearance:none, grey border). The
   ported child `input{width:100%}` would stretch/squish it, so pin its box. */
.form-embed-section .gform_wrapper .ginput_container_consent input[type="checkbox"] {
  width: 20px !important;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgb(104, 110, 119);
  background-color: #fff;
  accent-color: #204ce5;
}
/* Consent description box: live's exact bordered-note styling (13px grey copy,
   translucent border, 16px pad, 12px above). Scoped to consent so it never touches
   the passenger/number field descriptions. */
.form-embed-section .gform_wrapper .gfield--type-consent .gfield_description {
  margin-top: 12px;
  padding: 16px;
  font-size: 13px;
  line-height: 18.59px;
  color: rgb(88, 94, 106);
  border: 1px solid rgba(104, 110, 119, 0.35);
}

/*
 * Heading (title + description) + required-fields legend spacing GF gives the
 * embedded quote forms on live. The form is no longer inside `.main-heading`, so
 * these reproduce live's 216px heading block exactly.
 */
.form-embed-section .gform_wrapper .gform_heading .gform_title {
  margin: 20px 0 10px;
}
.form-embed-section .gform_wrapper .gform_heading .gform_description {
  padding-top: 30px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 30px;
}
.form-embed-section .gform_wrapper .gform_required_legend {
  padding-top: 30px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 30px;
}

/*
 * Date fields: the ported child rule styles `input[type=text/email/tel/number]`
 * (live's date field is a jQuery datepicker text input, so it inherits the 64px
 * gold-bordered look). We render a native `input[type=date]`, which that rule
 * misses — so replicate the same treatment here (64px tall, gold border) to match
 * live's Date of Departure/Return fields.
 */
.form-embed-section .gform_wrapper .gform-body input[type="date"] {
  height: 64px !important;
  border: 1px solid #c4b183 !important;
  border-radius: 0 !important;
  padding-left: 12px;
  font-family: "Poppins", sans-serif;
  color: #1e1f1e;
  font-size: 16px;
  background-color: transparent;
  box-shadow: 0 0 !important;
}