/*
 * Yachting Europe — shared form design system
 * File: wp-content/themes/enfold-child/forms.css
 *
 * ONE stylesheet for every contact / enquiry form on the site:
 *   - Gravity Forms (any form ID, Orbital theme, "Gravity Forms 2.5" theme
 *     or legacy markup) rendered inside a `.ye-form` wrapper
 *   - the custom Brevo forms (page-crew-list.php, footer newsletter in
 *     site-footer.php) and the Alpine reference
 *     form (reference-form.php) via the `.ye-form__*` classes
 *   - the card around the form (`.ye-form-panel`, printed by form-panel.php)
 *   - the contact column beside the form (`.ye-contact`, printed by
 *     form-contact.php)
 *
 * Loading: functions.php enqueues it (filemtime version) on every template
 * that calls wp_head(); self-contained templates print the same <link> with
 * `<?php ye_forms_css(); ?>` in <head>. Do NOT copy rules from here into a
 * page template — change them here.
 *
 * Specificity: Gravity Forms' own stylesheets (Orbital "theme framework",
 * gravity-theme, legacy) are opinionated and use CSS custom properties, so
 * every rule that touches GF markup carries !important on purpose.
 *
 * Contrast (WCAG 2.1 AA, checked against the warm-white card #F7F4EE and
 * white inputs): label #3D4852 ≈ 9.9:1 · sub-label/help #5B6670 ≈ 5.3:1 ·
 * placeholder #6B757E on white ≈ 4.7:1 · input border #848D95 on white
 * ≈ 3.4:1 (non-text 3:1) · error #B3261E ≈ 5.9:1 · required marker
 * #8A6A2C ≈ 4.6:1 · button navy on champagne ≈ 10:1.
 * Dark variant (navy #061727): label champagne ≈ 10:1 · text warm-white
 * ≈ 17:1 · border rgba(216,191,166,.55) ≈ 3.5:1 · error #F08A80 ≈ 7.4:1.
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. Tokens
   ───────────────────────────────────────────────────────────────────────── */
.ye-form,
.ye-form-panel,
.ye-contact {
  --ye-navy:        #061727;
  --ye-warm-white:  #F7F4EE;
  --ye-champagne:   #D8BFA6;
  --ye-gold:        #C9A45E;
  --ye-ocean:       #1C6E8C;

  /* surfaces */
  --ye-panel-bg:        var(--ye-warm-white);
  --ye-panel-border:    rgba(6,23,39,0.08);
  --ye-panel-accent:    var(--ye-gold);
  --ye-input-bg:        #FFFFFF;
  --ye-input-border:    #848D95;
  --ye-input-text:      var(--ye-navy);
  --ye-placeholder:     #6B757E;
  --ye-focus-border:    var(--ye-navy);
  --ye-focus-ring:      rgba(201,164,94,0.40);

  /* type */
  --ye-title:           var(--ye-navy);
  --ye-intro:           #3D4852;
  --ye-label:           #3D4852;
  --ye-sublabel:        #5B6670;
  --ye-help:            #5B6670;
  --ye-required:        #8A6A2C;
  --ye-choice:          var(--ye-navy);
  --ye-link:            var(--ye-ocean);

  /* states */
  --ye-error:           #B3261E;
  --ye-error-bg:        rgba(179,38,30,0.05);
  --ye-success:         var(--ye-navy);

  /* button */
  --ye-btn-bg:          var(--ye-champagne);
  --ye-btn-text:        var(--ye-navy);
  --ye-btn-border:      var(--ye-champagne);
  --ye-btn-hover-bg:    var(--ye-navy);
  --ye-btn-hover-text:  var(--ye-champagne);
  --ye-btn-hover-border:var(--ye-navy);

  /* contact column */
  --ye-contact-label:   #8A6A2C;
  --ye-contact-value:   var(--ye-navy);
  --ye-contact-icon:    var(--ye-gold);
  --ye-contact-border:  rgba(201,164,94,0.45);

  --ye-font-ui:    'Montserrat', sans-serif;
  --ye-font-serif: 'Cormorant Garamond', serif;
}

/* Dark variant: same component, inverted surface. Used only where the form
   sits inside an existing dark card (crew-list) or on a dark footer
   (newsletter). Geometry, type sizes and spacing are identical. */
.ye-form--dark,
.ye-form-panel--dark,
.ye-contact--dark {
  --ye-panel-bg:        rgba(255,255,255,0.03);
  --ye-panel-border:    rgba(216,191,166,0.18);
  --ye-panel-accent:    var(--ye-champagne);
  --ye-input-bg:        rgba(255,255,255,0.05);
  --ye-input-border:    rgba(216,191,166,0.55);
  --ye-input-text:      var(--ye-warm-white);
  --ye-placeholder:     rgba(247,244,238,0.55);
  --ye-focus-border:    var(--ye-champagne);
  --ye-focus-ring:      rgba(216,191,166,0.28);
  --ye-title:           #FFFFFF;
  --ye-intro:           rgba(247,244,238,0.72);
  --ye-label:           var(--ye-champagne);
  --ye-sublabel:        rgba(216,191,166,0.85);
  --ye-help:            rgba(247,244,238,0.62);
  --ye-required:        var(--ye-champagne);
  --ye-choice:          rgba(247,244,238,0.88);
  --ye-link:            var(--ye-champagne);
  --ye-error:           #F08A80;
  --ye-error-bg:        rgba(240,138,128,0.08);
  --ye-success:         var(--ye-champagne);
  --ye-btn-hover-bg:    var(--ye-warm-white);
  --ye-btn-hover-text:  var(--ye-navy);
  --ye-btn-hover-border:var(--ye-warm-white);
  --ye-contact-label:   var(--ye-champagne);
  --ye-contact-value:   rgba(247,244,238,0.88);
  --ye-contact-icon:    var(--ye-champagne);
  --ye-contact-border:  rgba(216,191,166,0.40);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. Panel (card around the form) — printed by form-panel.php
   ───────────────────────────────────────────────────────────────────────── */
.ye-form-panel {
  background: var(--ye-panel-bg);
  border: 1px solid var(--ye-panel-border);
  border-top: 2px solid var(--ye-panel-accent);
  padding: 52px 48px 44px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.ye-form-panel__title {
  font-family: var(--ye-font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ye-title);
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}
.ye-form-panel__title em { font-style: italic; color: var(--ye-panel-accent); }
.ye-form-panel__rule {
  width: 32px;
  height: 1px;
  background: var(--ye-panel-accent);
  margin: 0 0 20px;
}
.ye-form-panel__intro {
  font-family: var(--ye-font-ui);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ye-intro);
  margin: 0 0 10px;
}
.ye-form-panel__legend {
  font-family: var(--ye-font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ye-sublabel);
  margin: 0 0 30px;
}
.ye-form-panel__legend .ye-form__required { color: var(--ye-required); font-weight: 500; }
.ye-form-panel__privacy {
  font-family: var(--ye-font-ui);
  font-size: 10.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ye-help);
  margin: 18px 0 0;
}
.ye-form-panel__privacy a {
  color: var(--ye-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.ye-form-panel__privacy a:hover,
.ye-form-panel__privacy a:focus-visible { color: var(--ye-title); outline: none; }

/* ─────────────────────────────────────────────────────────────────────────
   3. Gravity Forms — wrapper, headings, layout grid
   ───────────────────────────────────────────────────────────────────────── */
.ye-form .gform_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  background: transparent !important;
  font-family: var(--ye-font-ui) !important;
}
/* GF's own title/description/legend never show — the panel prints them. */
.ye-form .gform_heading,
.ye-form .gform_title,
.ye-form .gform_description,
.ye-form .gform_required_legend,
.ye-form .gform_wrapper > h2,
.ye-form .gform_wrapper > h3 { display: none !important; }

.ye-form .gform_body { margin: 0 !important; padding: 0 !important; }

/* 12-column grid. Field widths come from the Gravity Forms editor
   (drag the field edge: full / half / third …), never from nth-child. */
.ye-form .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 22px 20px !important;
  grid-column-gap: 20px !important;
  grid-row-gap: 22px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.ye-form .gfield {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
.ye-form .gfield--width-half,
.ye-form .gfield--width-six-twelfths,
.ye-form .gf_left_half,
.ye-form .gf_right_half           { grid-column: span 6 !important; }
.ye-form .gfield--width-third,
.ye-form .gfield--width-four-twelfths,
.ye-form .gf_left_third,
.ye-form .gf_middle_third,
.ye-form .gf_right_third          { grid-column: span 4 !important; }
.ye-form .gfield--width-two-thirds,
.ye-form .gfield--width-eight-twelfths { grid-column: span 8 !important; }
.ye-form .gfield--width-quarter,
.ye-form .gfield--width-three-twelfths { grid-column: span 3 !important; }
.ye-form .gfield--width-three-quarter,
.ye-form .gfield--width-nine-twelfths  { grid-column: span 9 !important; }
.ye-form .gfield--width-five-twelfths  { grid-column: span 5 !important; }
.ye-form .gfield--width-seven-twelfths { grid-column: span 7 !important; }
.ye-form .gfield--width-ten-twelfths   { grid-column: span 10 !important; }
.ye-form .gfield--width-eleven-twelfths{ grid-column: span 11 !important; }
.ye-form .gfield--width-full,
.ye-form .gfield--width-twelve-twelfths,
.ye-form .gfield--type-textarea,
.ye-form .gfield--type-section,
.ye-form .gfield--type-html,
.ye-form .gfield--type-fileupload,
.ye-form .gfield--type-captcha,
.ye-form .gfield--type-consent,
.ye-form .gsection,
.ye-form .gfield_html                  { grid-column: 1 / -1 !important; }

/* Brevo-style honeypot input (crew-list): keep it off-screen whatever the
   generic input rule says */
.ye-form .input--hidden {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
/* A two-choice radio (e.g. Unit: Metres / Feet) sits beside a text input in the
   same row: lay it out inline at input height so labels and baselines line up. */
.ye-form .gfield--type-radio .gfield_radio:has(.gchoice:nth-child(2):last-child) {
  flex-direction: row !important;
  align-items: center !important;
  gap: 28px !important;
  min-height: 48px !important;
}

/* Hidden / honeypot / utility fields take no grid space */
.ye-form .gfield--type-hidden,
.ye-form .gform_hidden,
.ye-form .gfield_visibility_hidden,
.ye-form .gform_validation_container,
.ye-form .gfield--type-honeypot {
  display: none !important;
  position: absolute !important;
  left: -9000px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. Labels, sub-labels, descriptions, required marker
   ───────────────────────────────────────────────────────────────────────── */
.ye-form .gfield_label,
.ye-form legend.gfield_label,
.ye-form .gform-field-label:not(.gform-field-label--type-sub):not(.gform-field-label--type-inline),
.ye-form__label {
  display: block !important;
  font-family: var(--ye-font-ui) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  color: var(--ye-label) !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}
/* Sub-labels (First / Last, Day / Month / Year, address parts) — always
   above the input regardless of the form's sub-label placement setting. */
.ye-form .ginput_complex label,
.ye-form .ginput_complex legend,
.ye-form .gform-field-label--type-sub,
.ye-form .clear-multi label,
.ye-form__sublabel {
  order: -1 !important;
  display: block !important;
  font-family: var(--ye-font-ui) !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  color: var(--ye-sublabel) !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  float: none !important;
}
/* Required marker: whatever the form's indicator setting outputs
   ("*", "(Required)" or "(Vereist)"), render a single marker. */
.ye-form .gfield_required {
  display: inline-block !important;
  color: var(--ye-required) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: baseline !important;
}
.ye-form .gfield_required::after {
  content: '*';
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  margin-left: 3px;
  letter-spacing: 0;
}
/* Gravity Forms 2.5+ nests the indicator (<span class="gfield_required">
   <span class="gfield_required gfield_required_text">…</span></span>), so both
   spans match the rule above and each drew an asterisk ("NAME **"). Only the
   outer span draws the marker; the inner one stays collapsed and empty. */
.ye-form .gfield_required .gfield_required::after { content: none; }
.ye-form__required { color: var(--ye-required); font-weight: 500; margin-left: 3px; }

.ye-form .gfield_description:not(.validation_message):not(.gfield_validation_message),
.ye-form__help {
  display: block;
  font-family: var(--ye-font-ui) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: var(--ye-help) !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.ye-form .gfield_description:not(.validation_message):not(.gfield_validation_message) a,
.ye-form__help a { color: var(--ye-link); }

/* Section break fields (forms 2 & 3) */
.ye-form .gsection,
.ye-form .gfield--type-section {
  margin: 10px 0 -4px !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ye-panel-border) !important;
}
.ye-form .gsection_title {
  font-family: var(--ye-font-serif) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  color: var(--ye-title) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}
.ye-form .gsection_description {
  font-family: var(--ye-font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 300 !important;
  color: var(--ye-help) !important;
  margin: 6px 0 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. Inputs, selects, textareas
   ───────────────────────────────────────────────────────────────────────── */
.ye-form .ginput_container { margin: 0 !important; padding: 0 !important; }

.ye-form input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=image]),
.ye-form select,
.ye-form textarea,
.ye-form__input,
.ye-form__select,
.ye-form__textarea {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 13px 16px !important;
  background: var(--ye-input-bg) !important;
  border: 1px solid var(--ye-input-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 2px solid transparent !important;   /* keeps a ring in forced-colours mode */
  outline-offset: 0 !important;
  color: var(--ye-input-text) !important;
  font-family: var(--ye-font-ui) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}
/* Visible focus state on every field (border + soft gold ring) */
.ye-form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
.ye-form select:focus,
.ye-form textarea:focus,
.ye-form__input:focus,
.ye-form__select:focus,
.ye-form__textarea:focus {
  border-color: var(--ye-focus-border) !important;
  box-shadow: 0 0 0 3px var(--ye-focus-ring) !important;
  outline: 2px solid transparent !important;
}
.ye-form input::placeholder,
.ye-form textarea::placeholder,
.ye-form__input::placeholder,
.ye-form__textarea::placeholder { color: var(--ye-placeholder) !important; opacity: 1 !important; }

.ye-form input[readonly],
.ye-form__input[readonly] {
  background: rgba(6,23,39,0.04) !important;
  cursor: not-allowed !important;
}
.ye-form--dark input[readonly],
.ye-form--dark .ye-form__input[readonly] { background: rgba(255,255,255,0.02) !important; }

.ye-form select,
.ye-form__select {
  padding-right: 42px !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C9A45E'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 10px 6px !important;
}
.ye-form select option,
.ye-form__select option { background: #FFFFFF; color: #061727; }

.ye-form textarea,
.ye-form__textarea {
  min-height: 140px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}
.ye-form--compact textarea { min-height: 96px !important; }

/* Number fields: GF sets width:auto on them */
.ye-form .ginput_container_number input { width: 100% !important; }

/* Name field: First / Last side by side */
.ye-form .ginput_complex,
.ye-form .ginput_complex.ginput_container_name,
.ye-form .ginput_container_address {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.ye-form .ginput_complex > span,
.ye-form .ginput_complex > div:not(.clear-multi),
.ye-form .ginput_container_address > span {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.ye-form .ginput_complex > span:empty,
.ye-form .ginput_complex .ginput_right:empty,
.ye-form .ginput_complex .ginput_left:empty { display: none !important; }
.ye-form .ginput_container_address .ginput_full,
.ye-form .ginput_container_address .address_line_1,
.ye-form .ginput_container_address .address_line_2,
.ye-form .ginput_container_address .address_country { grid-column: 1 / -1 !important; }

/* Date fields (Day / Month / Year) stay on one row and never go narrower
   than half width — three inputs need the room */
.ye-form .gfield--type-date.gfield--width-third,
.ye-form .gfield--type-date.gfield--width-four-twelfths,
.ye-form .gfield--type-date.gfield--width-quarter,
.ye-form .gfield--type-date.gfield--width-three-twelfths,
.ye-form .gfield--type-date.gfield--width-five-twelfths { grid-column: span 6 !important; }
.ye-form .ginput_container_date { display: block !important; }
.ye-form .ginput_container_date .clear-multi {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: flex-end !important;
  width: 100% !important;
}
.ye-form .ginput_container_date .clear-multi > * {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}
.ye-form .ginput_container_date .clear-multi .gfield_date_year { flex: 1.4 1 0 !important; }
.ye-form .ginput_container_date .clear-multi input,
.ye-form .ginput_container_date .clear-multi select {
  text-align: center !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.ye-form .ginput_container_date .clear-multi select { padding-right: 28px !important; background-position: right 8px center !important; }
.ye-form .ginput_container_date .ui-datepicker-trigger { display: none !important; }
.ye-form .ginput_container_date input.datepicker { width: 100% !important; }

/* Checkboxes, radios, consent, multi-choice */
.ye-form .gfield_checkbox,
.ye-form .gfield_radio,
.ye-form .gfield_choice,
.ye-form .ginput_container_consent,
.ye-form__choices {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ye-form .gchoice,
.ye-form .gfield_checkbox li,
.ye-form .gfield_radio li,
.ye-form .ginput_container_consent,
.ye-form__check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ye-form input[type=checkbox],
.ye-form input[type=radio],
.ye-form__check input[type=checkbox],
.ye-form__check input[type=radio] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;
  accent-color: var(--ye-navy);
  cursor: pointer;
  outline: 2px solid transparent;
}
.ye-form--dark input[type=checkbox],
.ye-form--dark input[type=radio],
.ye-form--dark .ye-form__check input { accent-color: var(--ye-champagne); }
.ye-form input[type=checkbox]:focus-visible,
.ye-form input[type=radio]:focus-visible,
.ye-form__check input:focus-visible { outline: 2px solid var(--ye-focus-border) !important; outline-offset: 2px; }
.ye-form .gchoice label,
.ye-form .gfield_checkbox label,
.ye-form .gfield_radio label,
.ye-form .ginput_container_consent label,
.ye-form .gfield_consent_description,
.ye-form__check span,
.ye-form__check label {
  order: 0 !important;
  display: block !important;
  font-family: var(--ye-font-ui) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  line-height: 1.55 !important;
  color: var(--ye-choice) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  cursor: pointer;
}
.ye-form .gfield_consent_description {
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  margin-top: 8px !important;
  font-size: 11px !important;
  color: var(--ye-help) !important;
}
.ye-form__check a,
.ye-form .gchoice a,
.ye-form .ginput_container_consent a { color: var(--ye-link); }
/* "Other" choice text input inside a radio list */
.ye-form .gchoice input[type=text] { margin-top: 4px !important; }

/* File upload (crew registration CV) */
.ye-form input[type=file] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: var(--ye-input-bg);
  border: 1px dashed var(--ye-input-border);
  font-family: var(--ye-font-ui);
  font-size: 12px;
  font-weight: 300;
  color: var(--ye-label);
  cursor: pointer;
}
.ye-form input[type=file]:focus-visible { outline: 2px solid var(--ye-focus-border); outline-offset: 2px; }
.ye-form .gform_fileupload_rules,
.ye-form .gform_fileupload_multifile .gform_drop_instructions {
  font-family: var(--ye-font-ui) !important;
  font-size: 11px !important;
  color: var(--ye-help) !important;
}
.ye-form .gform_fileupload_multifile .gform_drop_area {
  background: var(--ye-input-bg) !important;
  border: 1px dashed var(--ye-input-border) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}
.ye-form .gform_button_select_files {
  background: transparent !important;
  color: var(--ye-label) !important;
  border: 1px solid var(--ye-input-border) !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  font-family: var(--ye-font-ui) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

/* CAPTCHA / HTML fields */
.ye-form .ginput_recaptcha,
.ye-form .gfield--type-captcha .ginput_container { margin: 0 !important; }
.ye-form .gfield_html {
  font-family: var(--ye-font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: var(--ye-intro) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. Submit button
   ───────────────────────────────────────────────────────────────────────── */
.ye-form .gform_footer,
.ye-form .gform-footer,
.ye-form .gform_page_footer,
.ye-form .gfield--type-submit,
.ye-form__actions {
  display: block !important;
  margin: 30px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  grid-column: 1 / -1 !important;
}
.ye-form--compact .gform_footer,
.ye-form--compact .gform-footer,
.ye-form--compact .gfield--type-submit { margin-top: 16px !important; }

.ye-form .gform_footer input[type=submit],
.ye-form .gform_footer button,
.ye-form .gform_page_footer input[type=submit],
.ye-form .gform_page_footer button,
.ye-form .gfield--type-submit input[type=submit],
.ye-form .gfield--type-submit button,
.ye-form .gform_button,
.ye-form .gform-button--submit,
.ye-form__submit {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 18px 40px !important;
  background: var(--ye-btn-bg) !important;
  color: var(--ye-btn-text) !important;
  border: 1px solid var(--ye-btn-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 2px solid transparent !important;
  font-family: var(--ye-font-ui) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.2s !important;
}
.ye-form .gform_footer input[type=submit]:hover,
.ye-form .gform_footer button:hover,
.ye-form .gform_page_footer input[type=submit]:hover,
.ye-form .gfield--type-submit input[type=submit]:hover,
.ye-form .gfield--type-submit button:hover,
.ye-form .gform_button:hover,
.ye-form__submit:hover:not(:disabled) {
  background: var(--ye-btn-hover-bg) !important;
  color: var(--ye-btn-hover-text) !important;
  border-color: var(--ye-btn-hover-border) !important;
}
.ye-form .gform_footer input[type=submit]:focus-visible,
.ye-form .gform_footer button:focus-visible,
.ye-form .gform_page_footer input[type=submit]:focus-visible,
.ye-form .gfield--type-submit input[type=submit]:focus-visible,
.ye-form .gfield--type-submit button:focus-visible,
.ye-form .gform_button:focus-visible,
.ye-form__submit:focus-visible {
  box-shadow: 0 0 0 3px var(--ye-focus-ring) !important;
  border-color: var(--ye-focus-border) !important;
}
.ye-form .gform_footer input[type=submit]:disabled,
.ye-form .gform_footer button:disabled,
.ye-form__submit:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }
/* GF 2.9 "Submitting…" state and spinner */
.ye-form .gform_ajax_spinner { display: none !important; }
.ye-form .gform-loader { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   7. Validation (one red, one format, errors tied to their field)
   ───────────────────────────────────────────────────────────────────────── */
/* Top summary (GF 2.5+ .gform_validation_errors, legacy .validation_error) */
.ye-form .gform_validation_errors,
.ye-form .validation_error,
.ye-form__alert {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 24px !important;
  padding: 14px 18px !important;
  background: var(--ye-error-bg) !important;
  border: 1px solid var(--ye-error) !important;
  border-left-width: 3px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--ye-font-ui) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--ye-error) !important;
  text-align: left !important;
}
.ye-form .gform_validation_errors .gform-icon,
.ye-form .gform_validation_errors > .gform-icon { display: none !important; }
.ye-form .gform_submission_error {
  font-family: var(--ye-font-ui) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--ye-error) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
}
.ye-form .gform_validation_errors ul,
.ye-form .gform_validation_errors .gform_validation_error_link { margin: 6px 0 0 !important; padding: 0 0 0 18px !important; }
.ye-form .gform_validation_errors li { margin: 2px 0 !important; }
.ye-form .gform_validation_errors a {
  color: var(--ye-error) !important;
  text-decoration: underline !important;
  font-weight: 400 !important;
}
.ye-form .gform_validation_errors:focus,
.ye-form .gform_validation_errors:focus-visible { outline: 2px solid var(--ye-error) !important; outline-offset: 2px !important; }

/* Per-field message (sits under the field; GF links it via aria-describedby) */
.ye-form .gfield_validation_message,
.ye-form .validation_message,
.ye-form .gfield_description.validation_message,
.ye-form__error {
  display: block !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--ye-font-ui) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.5 !important;
  color: var(--ye-error) !important;
  text-align: left !important;
}
.ye-form .gfield_error,
.ye-form .gfield.gfield_error {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ye-form .gfield_error .gfield_label,
.ye-form .gfield_error legend.gfield_label { color: var(--ye-label) !important; }
.ye-form .gfield_error input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.ye-form .gfield_error select,
.ye-form .gfield_error textarea,
.ye-form .gfield_error input[type=file],
.ye-form input[aria-invalid="true"],
.ye-form select[aria-invalid="true"],
.ye-form textarea[aria-invalid="true"],
.ye-form__input[aria-invalid="true"],
.ye-form__textarea[aria-invalid="true"],
.ye-form .ye-form__field--error .ye-form__choices {
  border-color: var(--ye-error) !important;
}
.ye-form .gfield_error .ginput_container { margin: 0 !important; padding: 0 !important; }
.ye-form .gfield_error .ginput_complex .gfield_validation_message { grid-column: 1 / -1 !important; }

/* ─────────────────────────────────────────────────────────────────────────
   8. Confirmation / success (same style everywhere, always inside the card)
   ───────────────────────────────────────────────────────────────────────── */
.ye-form .gform_confirmation_wrapper,
.ye-form__success {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.ye-form .gform_confirmation_message,
.ye-form__success-message {
  display: block !important;
  padding: 36px 0 20px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--ye-font-serif) !important;
  font-size: 24px !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.01em !important;
  color: var(--ye-success) !important;
  text-align: center !important;
}
.ye-form .gform_confirmation_message::before,
.ye-form__success-message::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--ye-panel-accent);
  margin: 0 auto 22px;
}
.ye-form .gform_confirmation_message a,
.ye-form__success-message a { color: var(--ye-link); }
.ye-form .gform_confirmation_message p,
.ye-form__success-message p { margin: 0 0 8px !important; }
/* Longer custom success copy (reference form) */
.ye-form__success-body {
  font-family: var(--ye-font-ui);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ye-intro);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.ye-form__success-body a { color: var(--ye-link); }

/* ─────────────────────────────────────────────────────────────────────────
   9. Custom (non-GF) form building blocks — Brevo form, reference form
   ───────────────────────────────────────────────────────────────────────── */
.ye-form__fields { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; }
.ye-form__field { margin: 0; padding: 0; min-width: 0; }
.ye-form__field--half-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ye-form__section { margin-top: 40px; }
.ye-form__section:first-child { margin-top: 0; }
.ye-form__section-title {
  font-family: var(--ye-font-serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--ye-title);
  margin: 0 0 8px;
  line-height: 1.25;
}
.ye-form__section-rule { width: 28px; height: 1px; background: var(--ye-panel-accent); margin: 0 0 22px; }
.ye-form__section-body {
  font-family: var(--ye-font-ui);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ye-intro);
  margin: 0 0 22px;
}
.ye-form__choices { gap: 0 !important; }
.ye-form__choices .ye-form__check {
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(216,191,166,0.35);
  background: var(--ye-input-bg);
  transition: background 0.2s;
}
.ye-form__choices .ye-form__check:first-child { border-top: 1px solid rgba(216,191,166,0.35); }
.ye-form__choices .ye-form__check:hover { background: rgba(216,191,166,0.08); }
.ye-form__choices { border: 1px solid transparent; }
.ye-form__consent {
  margin-top: 32px;
  padding: 20px 22px;
  background: rgba(216,191,166,0.10);
  border: 1px solid rgba(216,191,166,0.35);
}
.ye-form__consent .ye-form__check { padding: 0 !important; background: transparent; border: 0; }
.ye-form__consent .ye-form__check span { font-size: 12px !important; color: var(--ye-intro) !important; }
.ye-form__actions { display: flex; flex-direction: column; gap: 14px; }
.ye-form__server-error {
  font-family: var(--ye-font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ye-error);
  padding: 12px 16px;
  border: 1px solid var(--ye-error);
  border-left-width: 3px;
  background: var(--ye-error-bg);
}
.ye-form__visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important;
}
.ye-form__noscript {
  font-family: var(--ye-font-ui);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ye-intro);
  padding: 16px 20px;
  border: 1px solid var(--ye-panel-border);
  border-left: 3px solid var(--ye-panel-accent);
}
.ye-form__noscript a { color: var(--ye-link); }

/* ─────────────────────────────────────────────────────────────────────────
   10. Compact variant (footer newsletter, crew-list): same type & colours, tighter
   ───────────────────────────────────────────────────────────────────────── */
.ye-form--compact .gform_fields { gap: 12px !important; }
.ye-form--compact .gfield_label,
.ye-form--compact .ye-form__label { margin-bottom: 6px !important; }
.ye-form--compact input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.ye-form--compact select,
.ye-form--compact .ye-form__input {
  min-height: 44px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
}
.ye-form--compact .gform_footer input[type=submit],
.ye-form--compact .gform_footer button,
.ye-form--compact .gform_button,
.ye-form--compact .ye-form__submit { padding: 15px 28px !important; }
.ye-form--compact .gform_confirmation_message {
  font-size: 19px !important;
  padding: 16px 0 8px !important;
}
.ye-form--compact .gform_confirmation_message::before { margin-bottom: 14px; }
/* Inline (name + email + button on one row) when there is room */
@media (min-width: 640px) {
  .ye-form--compact.ye-form--inline .gform_fields { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .ye-form--compact.ye-form--inline .gfield { grid-column: span 6 !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. Contact column beside the form — printed by form-contact.php
   ───────────────────────────────────────────────────────────────────────── */
.ye-contact { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none; }
.ye-contact__item { display: flex; align-items: flex-start; gap: 18px; margin: 0; }
.ye-contact__icon {
  width: 40px; height: 40px; flex: 0 0 40px;
  border: 1px solid var(--ye-contact-border);
  display: flex; align-items: center; justify-content: center;
}
.ye-contact__icon svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--ye-contact-icon);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ye-contact__body { min-width: 0; padding-top: 2px; }
.ye-contact__label {
  display: block;
  font-family: var(--ye-font-ui);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ye-contact-label);
  margin: 0 0 5px;
}
.ye-contact__value {
  font-family: var(--ye-font-ui);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ye-contact-value);
  text-decoration: none;
  letter-spacing: 0.02em;
  word-break: break-word;
  transition: color 0.25s;
}
a.ye-contact__value:hover,
a.ye-contact__value:focus-visible { color: var(--ye-link); outline: none; }
.ye-contact__note {
  display: block;
  font-family: var(--ye-font-ui);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ye-help);
  margin-top: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. Responsive — single column below tablet width
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* thirds and quarters become halves before the full collapse */
  .ye-form .gfield--width-third,
  .ye-form .gfield--width-four-twelfths,
  .ye-form .gfield--width-quarter,
  .ye-form .gfield--width-three-twelfths,
  .ye-form .gfield--width-five-twelfths,
  .ye-form .gf_left_third,
  .ye-form .gf_middle_third,
  .ye-form .gf_right_third { grid-column: span 6 !important; }
  .ye-form .gfield--width-two-thirds,
  .ye-form .gfield--width-eight-twelfths,
  .ye-form .gfield--width-three-quarter,
  .ye-form .gfield--width-nine-twelfths,
  .ye-form .gfield--width-seven-twelfths,
  .ye-form .gfield--width-ten-twelfths,
  .ye-form .gfield--width-eleven-twelfths { grid-column: 1 / -1 !important; }
  .ye-form-panel { padding: 40px 32px 36px; }
}
@media (max-width: 767px) {
  .ye-form .gform_fields { gap: 20px 0 !important; }
  .ye-form .gfield,
  .ye-form .gfield[class*="gfield--width-"],
  .ye-form .gf_left_half, .ye-form .gf_right_half,
  .ye-form .gf_left_third, .ye-form .gf_middle_third, .ye-form .gf_right_third { grid-column: 1 / -1 !important; }
  .ye-form .ginput_complex,
  .ye-form .ginput_complex.ginput_container_name,
  .ye-form .ginput_container_address { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .ye-form__field--half-row { grid-template-columns: minmax(0, 1fr); }
  .ye-form--compact.ye-form--inline .gfield { grid-column: 1 / -1 !important; }
  /* 16px stops iOS Safari zooming into the field on focus */
  .ye-form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
  .ye-form select,
  .ye-form textarea,
  .ye-form__input, .ye-form__select, .ye-form__textarea { font-size: 16px !important; }
  .ye-form-panel { padding: 32px 22px 30px; }
  .ye-form-panel__title { font-size: 25px; }
  .ye-contact { gap: 18px; }
}
@media (max-width: 380px) {
  .ye-form-panel { padding: 28px 18px 26px; }
  .ye-form .gform_footer input[type=submit],
  .ye-form .gform_footer button,
  .ye-form .gform_button,
  .ye-form__submit { padding-left: 20px !important; padding-right: 20px !important; letter-spacing: 0.2em !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ye-form *, .ye-form-panel *, .ye-contact * { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Light-surface guard
   Some pages receive dark-theme input rules from outside the theme files
   (Customizer / Enfold custom CSS keyed to a form's cssClass, e.g. the old
   "ye-sell-form" on /sell/). Re-assert the tokens at higher specificity so a
   light panel always renders the light inputs, whatever else is loaded.
   ───────────────────────────────────────────────────────────────────────── */
html body .ye-form-panel:not(.ye-form-panel--dark) .ye-form:not(.ye-form--dark) input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=image]),
html body .ye-form-panel:not(.ye-form-panel--dark) .ye-form:not(.ye-form--dark) select,
html body .ye-form-panel:not(.ye-form-panel--dark) .ye-form:not(.ye-form--dark) textarea {
  background: var(--ye-input-bg) !important;
  border: 1px solid var(--ye-input-border) !important;
  color: var(--ye-input-text) !important;
}