/* =========================================================================
   BLACK PEARL POKER RUN — THE APPLICATION FORM

   Forminator ships a light-ground plugin design and generates a 35KB
   per-form stylesheet from the form's own settings. Both load AFTER the
   theme (see the <link> order on /apply/), and the generated sheet reaches
   specificity (1,3,0) — an id plus three classes — so a plain theme rule
   never lands. That is why the form arrived looking bolted on: only the
   handful of properties the old inner.css marked !important were taking.

   THE CONTRACT HERE
     1. Nothing is dequeued. Forminator's base/full sheets carry real
        structure — select2 flex, the intl-tel country container, the
        upload widget — and pulling them breaks behaviour, not just looks.
     2. Every rule is prefixed
          #form .apply__body .forminator-ui.forminator-custom-form.forminator-none
        which is (1,4,0) -- one id plus four classes -- so it outranks the
        generated sheet's (1,3,0) on weight alone, whatever the print order
        turns out to be. !important is reserved for select2 and the
        body-level popovers, whose chains run past (1,7,0).

        The id is #form, the theme's own section in page-apply.php. It used
        to be #forminator-module-7 -- the form's post id -- which tied the
        whole skin to one row in the database: rebuild the form, it gets a
        new id, and every rule here stops matching silently, leaving the
        plugin's light default sitting on a navy page. It also made the skin
        impossible to verify locally, where the same form is module 6.
        Nothing in this file depends on which form is on the page any more.
     3. NEVER `display: … !important` on .forminator-row or .forminator-col.
        Conditional logic hides fields by adding .forminator-hidden, and an
        !important display would show every hidden field on the page. The
        guard rule below is deliberate; leave it alone.
     4. Every value resolves to a token in tokens.css. No hex outside it.

   THE DESIGN
   The form is a manifest, not a list. Forminator's HTML fields become
   engraved chapter rules — a Roman numeral counter, a Baskervville title,
   a hairline above — so 44 fields read as five chapters. Labels drop to
   the brand's tracked-caps eyebrow. Choices become option cards that light
   a gold inset edge when taken. Gold is applied as the material from
   tokens.css, never as a flat fill.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1 · THE PANEL
   Elevation on navy is a lifted surface plus a gold hairline, never a drop
   shadow (tokens.css §6). The top edge is the leaf rule, which fades out at
   both ends, so the panel reads as set into the page rather than stuck on.
   ---------------------------------------------------------------------- */

/* Forminator prints a placeholder div holding a single <br> ahead of the
   real <form>; it only contributes a stray line-height of space. */
.apply__body > div.forminator-custom-form-7[data-forminator-render] { display: none; }

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none {
  position: relative;
  counter-reset: bp-chapter;
  max-width: var(--max-content);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--surface-1);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);

  /* The twelve-track grid lives on the FORM, not on the rows, because
     Forminator puts each field in a row of its own — email and phone are
     both "half width" but are siblings, not room-mates. Tracking the grid
     at form level lets two consecutive half-width rows share a line, which
     is the two-column layout the form was actually built as. */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-5);
  row-gap: var(--sp-5);
  align-items: start;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: var(--rule-gold);
  background-image: var(--bp-gold-rule);
}


/* -------------------------------------------------------------------------
   2 · THE GRID, PUT BACK
   The form was built with grid "none", which leaves every .forminator-col
   at `flex: 0 1 auto` and every row at `display: block` with no gutter —
   the reason first/last name, city/state and zip/country all stacked into
   one undifferentiated column. A twelve-track grid restores the pairs the
   form was actually designed around.
   ---------------------------------------------------------------------- */

/* Every direct child of the form is a full-width grid item by default —
   that covers the response message, the captcha row and the submit row. */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none > * { grid-column: span 12; }

/* …except a row whose only field is a half-width one. Two of those in a
   row pair up; a lone one sits half-width with the next full-width field
   dropping below it, which is exactly how the builder laid it out. */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none > .forminator-row:has(> .forminator-col-6:only-child) { grid-column: span 6; }
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none > .forminator-row { margin: 0; }

/* Rows are grids too, for the fields that genuinely share one — the name
   pair, and the city/state and zip/country pairs inside the address block. */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-5);
  row-gap: var(--sp-5);
  align-items: start;
  margin: 0 0 var(--sp-5);
}
/* Conditional logic hides by class. This guard has to win, and it is the
   ONLY display rule in this file that carries !important. */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row.forminator-hidden { display: none !important; }

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row:last-of-type { margin-bottom: 0; }
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row .forminator-row { margin-bottom: var(--sp-4); }
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row .forminator-row:last-child { margin-bottom: 0; }

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-col {
  grid-column: span 12;
  min-width: 0;
  padding: 0;
}
/* Only rows the builder marked as sharing a line get paired. A lone
   half-width field keeps its own line; it is capped in §6 instead, which
   reads as a considered short field rather than a ragged half-empty row. */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row[data-multiple="true"] > .forminator-col-6,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row[data-multiple="true"] > .forminator-col-md-6 {
  grid-column: span 6;
}


/* -------------------------------------------------------------------------
   3 · CHAPTERS
   Forminator's HTML fields are the section headings. They arrived rendering
   as ordinary field labels, which is what flattened the whole form into one
   44-row list. Here they become the site's chapter grammar: hairline, gold
   numeral, Baskervville title.

   The counter only advances on chapters that are actually on screen — a
   display:none ancestor does not increment a CSS counter — so a guest
   application numbers I, II, III without the boat chapter leaving a gap.
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-field-html {
  counter-increment: bp-chapter;
  /* More air above the rule than below it — the rule opens the new chapter,
     it does not close the previous one. */
  margin: var(--sp-7) 0 var(--sp-2);
  padding-top: var(--sp-6);
  border-top: var(--hairline) solid var(--border-subtle);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-field-html::before {
  content: counter(bp-chapter, upper-roman);
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  /* NOT --tr-micro, and not the brand's label tracking either. Letter-spacing
     on a Roman numeral opens a gap between the strokes and "II" reads as two
     separate letters, so this one mark opts out of the tracked-caps rule. */
  letter-spacing: 0;
  color: var(--gold-core);
}
/* The first chapter opens the panel — it needs no rule above it. */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none #html-intro {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-field-html .forminator-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-snug);
  text-transform: none;
  color: var(--text-primary);
}


/* -------------------------------------------------------------------------
   4 · LABELS, REQUIRED MARKS, HELP TEXT
   The brand's signature is wide tracked caps at 11px (tokens.css §3), not
   the 12px bold Forminator generated. The required mark comes off NPBA red
   — that red is the producer badge and nothing else (tokens.css §1).
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-label,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none [role="radiogroup"] > .forminator-label {
  display: block;
  margin: 0 0 var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-label);
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--text-label);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-label .forminator-required {
  margin-left: .3em;
  color: var(--gold-rich);
  font-weight: var(--fw-regular);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-description,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-description p {
  display: block;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-description a { color: var(--text-accent); }


/* -------------------------------------------------------------------------
   5 · TEXT CONTROLS
   One control height for the whole system (--field-height, 52px), matching
   the site's buttons. Fields are recessed to --surface-0, a step DARKER
   than the panel, so the input well reads as cut into the card.
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-input,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-textarea,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input[type="text"],
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input[type="email"],
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input[type="url"],
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input[type="tel"],
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input[type="number"] {
  width: 100%;
  height: var(--field-height);
  padding: 0 var(--sp-4);
  background-color: var(--surface-0);
  background-image: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  /* 1rem, never smaller — iOS zooms the whole page on focus below 16px. */
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: normal;
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-textarea {
  height: auto;
  min-height: 8.5rem;
  padding: var(--sp-4);
  line-height: var(--lh-normal);
  resize: vertical;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-input:hover,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-textarea:hover {
  border-color: var(--border-gold);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-input:focus,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-textarea:focus {
  outline: none;
  background-color: var(--bp-navy-deep);
  border-color: var(--gold-core);
  box-shadow: 0 0 0 3px rgba(223, 179, 91, .14);
}
/* Keyboard users still get the site's ring on top of the gold border. */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-input:focus-visible,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none ::placeholder {
  color: var(--text-muted);
  opacity: .8;
}

/* Chrome paints autofilled fields a hard white and there is no property that
   turns it off — an inset shadow the size of the field is the only way to
   keep a dark form dark once the browser fills it. */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input:-webkit-autofill,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input:-webkit-autofill:hover,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input:-webkit-autofill:focus,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 100px var(--surface-0) inset;
  box-shadow: 0 0 0 100px var(--surface-0) inset;
  caret-color: var(--text-primary);
  transition: background-color 100000s ease-in-out 0s;
}


/* -------------------------------------------------------------------------
   6 · NUMBER FIELDS
   Length overall, beam, year, top speed, crew count. The grid above already
   gives these half a line, so they need no extra cap — only the browser's
   spinner arrows removed, which sit badly against a flat dark well.
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input[type="number"] { -moz-appearance: textfield; }
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input[type="number"]::-webkit-outer-spin-button,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* -------------------------------------------------------------------------
   7 · SELECTS
   select2 stamps an inline pixel width onto its container and Forminator's
   generated sheet reaches (1,7,1) on the rendered text. This is the one
   region where !important is the honest tool.
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-select,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none span.select2-container {
  width: 100% !important;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-selection {
  min-height: var(--field-height) !important;
  height: var(--field-height) !important;
  padding: 0 var(--sp-2) 0 var(--sp-4) !important;
  background-color: var(--surface-0) !important;
  border: var(--hairline) solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) var(--ease-out);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-selection:hover {
  border-color: var(--border-gold) !important;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-selection__rendered {
  padding: 0 !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: var(--fw-regular) !important;
  line-height: 1.4 !important;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-selection__placeholder {
  color: var(--text-muted) !important;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-selection__arrow,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-selection__arrow b {
  color: var(--gold-core) !important;
  border-color: var(--gold-core) transparent transparent !important;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-container--open .select2-selection,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-selection:focus {
  border-color: var(--gold-core) !important;
  box-shadow: 0 0 0 3px rgba(223, 179, 91, .14) !important;
}

/* The dropdown panel is appended to <body>, outside .apply__body, so it
   needs its own root. Forminator is only ever on /apply/, so global scope
   here costs nothing. */
.select2-container .select2-dropdown,
.select2-container--open .select2-dropdown,
span.forminator-select-dropdown,
.forminator-select-dropdown.forminator-dropdown--default,
.forminator-select-dropdown.forminator-dropdown--basic {
  background-color: var(--bp-navy-card) !important;
  border: var(--hairline) solid var(--border-gold) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9) !important;
  overflow: hidden;
}
.select2-container .select2-results__option,
.forminator-select-dropdown .forminator-select-dropdown-option {
  padding: var(--sp-3) var(--sp-4) !important;
  background-color: transparent !important;
  color: var(--text-body) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
}
.select2-container .select2-results__option--highlighted {
  background-color: var(--bp-navy-mid) !important;
  color: var(--text-primary) !important;
}
.select2-container .select2-results__option[aria-selected="true"],
.select2-container .select2-results__option[data-selected="true"] {
  background-color: rgba(223, 179, 91, .14) !important;
  color: var(--gold-light) !important;
}
.select2-container .select2-search--dropdown { padding: var(--sp-3) !important; }
.select2-container .select2-search--dropdown .select2-search__field {
  height: 44px !important;
  padding: 0 var(--sp-3) !important;
  background-color: var(--surface-0) !important;
  color: var(--text-primary) !important;
  border: var(--hairline) solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
}
.select2-container .select2-results__options { max-height: 17rem !important; }
.select2-container .select2-results__options::-webkit-scrollbar { width: 8px; background: var(--bp-navy-deep); }
.select2-container .select2-results__options::-webkit-scrollbar-thumb { background: var(--gold-amber); }


/* -------------------------------------------------------------------------
   8 · CHOICES AS CARDS
   Four radio groups decide dockage, the room block, the dinner list and NPBA
   membership — the answers the committee actually reads. As bare bullets on
   a dark ground they were the weakest thing on the page. Here each option is
   a card that lights a gold inset edge when it is taken, which is the same
   inset-bar language the response messages use.
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none [role="radiogroup"] {
  display: grid;
  gap: var(--sp-2);
}
/* Forminator sets `pointer-events: none` on the radio <label> and re-enables
   it only on the label's spans, so a click in the label's own padding does
   nothing. A card that looks tappable but is not is worse than no card at
   all — so the padding moves off the label and onto the spans, which means
   the bullet and the text between them cover almost the whole card. Do not
   put the padding back on .forminator-radio. */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: var(--surface-2);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio:hover {
  background: var(--bp-navy-mid);
  border-color: var(--border-gold);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio .forminator-radio-bullet {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0 var(--sp-3) 0 var(--sp-4);
  background-color: transparent;
  border: var(--hairline) solid var(--border-gold-strong);
  border-radius: 50%;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio .forminator-radio-bullet::before {
  width: 8px;
  height: 8px;
  background-color: var(--gold-core);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio input:checked + .forminator-radio-bullet {
  background-color: transparent;
  border-color: var(--gold-core);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio .forminator-radio-label,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio .forminator-radio-bullet ~ span {
  /* stretch to the full card so the clickable area matches the visible one */
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-left: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-body);
  transition: color var(--dur-fast) var(--ease-out);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio:has(input:checked) {
  background: var(--bp-navy-mid);
  border-color: var(--border-gold-strong);
  box-shadow: inset 2px 0 0 0 var(--gold-core);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio:has(input:checked) .forminator-radio-label {
  color: var(--text-primary);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   9 · CONSENT
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-checkbox__wrapper {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-checkbox {
  /* STATIC on purpose. The ::after below has to resolve inset:0 against
     .forminator-checkbox__wrapper, so this label must not become the
     containing block. Forminator's own sheet sets it relative. */
  position: static;
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}
/* Forminator renders the consent sentence as a DIV that is a SIBLING of the
   <label>, so the text is not a label target and clicking it does nothing.
   This stretches the label over the whole card with a transparent overlay,
   which makes the card behave the way it looks. pointer-events has to be
   named explicitly because the label itself is set to none (see §8). */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-checkbox::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: pointer;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-checkbox .forminator-checkbox-box {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  background-color: transparent;
  border: var(--hairline) solid var(--border-gold-strong);
  border-radius: var(--radius-sm);
  color: var(--bp-navy-deep);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-checkbox .forminator-checkbox-box:hover {
  border-color: var(--gold-core);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-checkbox input:checked + .forminator-checkbox-box {
  background-color: var(--gold-core);
  border-color: var(--gold-core);
  color: var(--bp-navy-deep);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-checkbox__label,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-consent__label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-body);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-checkbox__wrapper:has(input:checked) {
  border-color: var(--border-gold-strong);
  box-shadow: inset 2px 0 0 0 var(--gold-core);
}


/* -------------------------------------------------------------------------
   10 · FILE UPLOAD
   A ghost button in the site's CTA grammar — outline gold, tracked caps —
   so "choose a photo of your boat" is clearly optional next to the solid
   gold submit.
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-file-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-2);
  border: var(--hairline) dashed var(--border-gold);
  border-radius: var(--radius-sm);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-button-upload {
  height: 44px;
  padding: 0 var(--sp-5);
  background: transparent;
  color: var(--text-accent);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  border: var(--hairline) solid var(--border-gold-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-button-upload:hover {
  background: rgba(223, 179, 91, .12);
  color: var(--gold-sheen);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-file-upload > span {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-button-delete {
  background: transparent;
  color: var(--state-error);
  border: 0;
  cursor: pointer;
}


/* -------------------------------------------------------------------------
   11 · DATE PICKER
   jQuery UI renders the calendar at the end of <body>, so it needs its own
   root the same way the select2 dropdown does.
   ---------------------------------------------------------------------- */

.ui-datepicker.forminator-calendar {
  padding: var(--sp-3) !important;
  background: var(--bp-navy-card) !important;
  border: var(--hairline) solid var(--border-gold) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9) !important;
  font-family: var(--font-sans) !important;
}
.ui-datepicker.forminator-calendar .ui-datepicker-header {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-primary) !important;
}
.ui-datepicker.forminator-calendar .ui-datepicker-title,
.ui-datepicker.forminator-calendar select {
  color: var(--text-primary) !important;
  background: var(--surface-0) !important;
  border-color: var(--border-subtle) !important;
  font-family: var(--font-sans) !important;
}
.ui-datepicker.forminator-calendar .ui-datepicker-prev,
.ui-datepicker.forminator-calendar .ui-datepicker-next { color: var(--gold-core) !important; cursor: pointer; }
.ui-datepicker.forminator-calendar th { color: var(--text-label) !important; font-size: var(--fs-micro) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase !important; }
.ui-datepicker.forminator-calendar td a,
.ui-datepicker.forminator-calendar td span {
  background: transparent !important;
  color: var(--text-body) !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  text-align: center;
}
.ui-datepicker.forminator-calendar td a:hover { background: var(--bp-navy-mid) !important; color: var(--text-primary) !important; }
.ui-datepicker.forminator-calendar td a.ui-state-active,
.ui-datepicker.forminator-calendar td .ui-state-active {
  background: var(--gold-core) !important;
  color: var(--bp-navy-deep) !important;
}


/* -------------------------------------------------------------------------
   12 · PHONE
   intl-tel-input's country container sits inside the field well.
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .iti__country-container,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .iti__selected-country {
  background: transparent !important;
  color: var(--text-body) !important;
}
.iti__dropdown-content,
.iti__country-list {
  background: var(--bp-navy-card) !important;
  border: var(--hairline) solid var(--border-gold) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-body) !important;
}
.iti__country { color: var(--text-body) !important; }
.iti__country.iti__highlight,
.iti__country:hover { background: var(--bp-navy-mid) !important; color: var(--text-primary) !important; }
.iti__dial-code { color: var(--text-muted) !important; }
.iti__search-input {
  background: var(--surface-0) !important;
  color: var(--text-primary) !important;
  border-bottom: var(--hairline) solid var(--border-subtle) !important;
}


/* -------------------------------------------------------------------------
   12b · FOCUS
   Forminator's generated sheet hard-codes a #254DEB focus outline on the
   select, the radio bullet and the consent box. That blue belongs to no part
   of this brand. One rule pulls every one of them onto --focus-ring.
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-selection:focus,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-selection:focus-visible,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-container--focus .select2-selection,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-radio input:focus-visible + .forminator-radio-bullet,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-checkbox input:focus-visible + .forminator-checkbox-box,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none *:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 1px !important;
}
/* Mouse users get the gold border and glow, not a ring. */
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .select2-container--focus .select2-selection:not(:focus-visible) {
  outline: none !important;
}


/* -------------------------------------------------------------------------
   13 · VALIDATION & RESPONSE
   Forminator's pink and mint notices are the single most jarring thing that
   can appear on a navy page. These use the derived state tokens instead
   (tokens.css §2), keeping the inset-bar shape Forminator already uses.
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-error-message {
  margin-top: var(--sp-2);
  padding: 0;
  background: transparent;
  color: var(--state-error);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-has_error .forminator-input,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-has_error .forminator-textarea {
  border-color: var(--state-error);
  background-color: var(--state-error-bg);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-has_error .forminator-radio .forminator-radio-bullet,
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-has_error .forminator-checkbox .forminator-checkbox-box {
  border-color: var(--state-error);
}

.apply__body .forminator-response-message,
.apply__body .forminator-response-message p {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  line-height: var(--lh-normal) !important;
}
.apply__body .forminator-response-message {
  margin: 0 0 var(--sp-5) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  border-radius: var(--radius-sm) !important;
}
.apply__body .forminator-response-message.forminator-error,
.apply__body .forminator-response-message.forminator-error p {
  background-color: var(--state-error-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 2px 0 0 0 var(--state-error) !important;
}
.apply__body .forminator-response-message.forminator-success,
.apply__body .forminator-response-message.forminator-success p {
  background-color: var(--state-success-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 2px 0 0 0 var(--state-success) !important;
}
.apply__body .forminator-response-message.forminator-loading {
  background-color: var(--surface-2) !important;
  color: var(--text-muted) !important;
}
/* The success notice replaces the form on submit — it should not sit alone
   as a bare strip on the page ground. */
.apply__body .forminator-success.forminator-show {
  padding: var(--sp-6) !important;
  border: var(--hairline) solid var(--border-gold) !important;
}


/* -------------------------------------------------------------------------
   14 · reCAPTCHA
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-field-captcha {
  margin-top: var(--sp-6);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-g-recaptcha > div { max-width: 100%; }


/* -------------------------------------------------------------------------
   15 · THE SUBMIT
   The one action, in the site's CTA grammar. Gold is applied here through
   --gold-surface WITH a scale token, which is the only sanctioned way to
   put gold on something (tokens.css, "THE GOLD SURFACE UTILITY") — a bare
   gradient fits the whole ladder inside the button and bands.
   ---------------------------------------------------------------------- */

#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row-last {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--hairline) solid var(--border-subtle);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-button-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: var(--sp-4) var(--sp-8);
  background-image: var(--gold-surface);
  background-size: var(--gold-scale-soft), var(--gold-scale-soft);
  background-position: var(--gold-origin), var(--gold-origin);
  background-repeat: no-repeat;
  background-color: var(--gold-core);
  color: var(--bp-navy-deep);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tagline);
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-button-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-button-submit:active { transform: translateY(0); }
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-button-submit:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
#form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-button-submit[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}


/* -------------------------------------------------------------------------
   16 · NARROW SCREENS
   Most of these applications will be filled in on a phone, at a dock.
   Pairs collapse, the panel loses its inset so the fields get the full
   width, and the submit goes full-bleed as the one thumb target.
   ---------------------------------------------------------------------- */

@media (max-width: 640px) {
  #form .apply__body .forminator-ui.forminator-custom-form.forminator-none {
    padding: var(--sp-5) var(--sp-4);
  }
  #form .apply__body .forminator-ui.forminator-custom-form.forminator-none,
  #form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-4);
  }
  #form .apply__body .forminator-ui.forminator-custom-form.forminator-none > *,
  #form .apply__body .forminator-ui.forminator-custom-form.forminator-none > .forminator-row:has(> .forminator-col-6:only-child) {
    grid-column: span 1;
  }
  #form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row[data-multiple="true"] > .forminator-col-6,
  #form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-row[data-multiple="true"] > .forminator-col-md-6 {
    grid-column: span 1;
  }
  #form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-button-submit {
    width: 100%;
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
    letter-spacing: var(--tr-label);
  }
  #form .apply__body .forminator-ui.forminator-custom-form.forminator-none .forminator-field-html {
    margin-top: var(--sp-6);
  }
}
