/* ────────────────────────────────────────────────────────────────────────
   Contact Form — section frame converted from
   GANS-main/src/app/careers/_scenes/CareersContactScene.tsx
   The form itself is rendered by whatever form plugin shortcode the
   admin pastes into the block (Contact Form 7, WPForms, Fluent Forms,
   Gravity Forms, Ninja Forms, etc.). We only theme the wrapper +
   common form primitives so the plugin's default markup blends with
   the dark stone-deep card.
   ────────────────────────────────────────────────────────────────────── */

.gans-contact-form {
  --iron:  #7d7d7d;
  --steel: #9b9b9b;
  position: relative;
  overflow: hidden;
  background: var(--stone-deep, #2a2a2a);
  color: var(--cloud, #ffffff);
  padding: 6rem 0;
}

.gans-contact-form .ff-el-group.optional label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gans-contact-form .ff-el-group.optional label::after {
  content: ". Optional";
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.ff-el-group.ff-custom_html.privacy-msg * {
    font-size: 12px;
    color: var(--steel);
}

@media (min-width: 768px) {
  .gans-contact-form { padding: 8rem 0; }
}

.gans-contact-form__backdrop {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gans-contact-form__pattern {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: left 70%;
  background-size: min(80vw, 1200px) auto;
  opacity: 0.14;
  -webkit-mask-image:
    linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
  mask-image:
    linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.gans-contact-form__gold-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 60% at 92% 90%, rgba(var(--gold-rgb), 0.08) 0%, rgba(var(--gold-rgb), 0) 70%);
}

.gans-contact-form__inner {
  position: relative;
  margin: 0 auto;
  max-width: 1440px;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
}

@media (min-width: 768px) {
  .gans-contact-form__inner {
    padding: 0 3rem;
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }
}

/* ── Pitch column ────────────────────────────────────────────────────── */

.gans-contact-form__label-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gans-contact-form__label-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold, #c8a977);
}

.gans-contact-form__label {
  font-family: var(--font-suisse, sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gold, #c8a977);
}

.gans-contact-form__heading {
  margin: 1.5rem 0 0;
  font-family: var(--font-suisse, sans-serif);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--cloud, #ffffff);
  text-wrap: balance;
}

.gans-contact-form__heading .highlight {
  font-weight: 500;
  color: var(--gold, #c8a977);
}

.gans-contact-form__desc {
  margin: 1.25rem 0 0;
  max-width: 28rem;
  font-size: 15px;
  line-height: 1.65;
  color: var(--steel);
}

.gans-contact-form__points {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.gans-contact-form__point-label {
  display: block;
  font-family: var(--font-suisse, sans-serif);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold, #c8a977);
}

.gans-contact-form__points p {
  margin: 0.5rem 0 0;
  max-width: 26rem;
  font-size: 14px;
  line-height: 1.6;
  color: var(--steel);
}

/* ── Form card ───────────────────────────────────────────────────────── */

.gans-contact-form__card {
  position: relative;
  padding: 1.75rem;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
}

@media (min-width: 768px) {
  .gans-contact-form__card { padding: 2.5rem; }
}

.gans-contact-form__card-edge {
  position: absolute;
  top: -1px;
  left: 1.75rem;
  width: 48px;
  height: 1px;
  background: var(--gold, #c8a977);
}

@media (min-width: 768px) {
  .gans-contact-form__card-edge { left: 2.5rem; }
}

.gans-contact-form__placeholder {
  padding: 1.25rem 1.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  font-family: var(--font-suisse, sans-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--steel);
}

.gans-contact-form__placeholder strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--cloud, #ffffff);
}

/* ── Form theming — overrides for whatever plugin renders inside ────────
   We target common selectors used by Contact Form 7, WPForms, Fluent
   Forms, Gravity Forms and Ninja Forms. Anything not styled here picks
   up the plugin's defaults. */

.gans-contact-form__form {
  font-family: var(--font-suisse, sans-serif);
  color: var(--cloud, #ffffff);
}

/* Labels — uppercase eyebrow style, regardless of plugin */
.gans-contact-form__form label,
.gans-contact-form__form .wpforms-field-label,
.gans-contact-form__form .gfield_label,
.gans-contact-form__form .ff-el-input--label label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-suisse, sans-serif);
  font-size: 11px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -.025em;
  color: var(--steel, #c6c6c6);
}

/* Text inputs / textareas / selects */
.gans-contact-form__form input[type="text"],
.gans-contact-form__form input[type="email"],
.gans-contact-form__form input[type="tel"],
.gans-contact-form__form input[type="url"],
.gans-contact-form__form input[type="number"],
.gans-contact-form__form input[type="date"],
.gans-contact-form__form input[type="search"],
.gans-contact-form__form input[type="password"],
.gans-contact-form__form input[type="file"],
.gans-contact-form__form textarea,
.gans-contact-form__form select {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  padding: 0.5rem 0 0.75rem;
  font-family: var(--font-suisse, sans-serif);
  font-size: 15px;
  color: var(--cloud, #ffffff);
  caret-color: var(--gold, #c8a977);
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s ease;
  box-shadow: none;
}

.gans-contact-form__form textarea {
  resize: vertical;
  min-height: 7rem;
}

.gans-contact-form__form input::placeholder,
.gans-contact-form__form textarea::placeholder {
  color: rgba(155, 155, 155, 0.55);
}

.gans-contact-form__form input:focus,
.gans-contact-form__form textarea:focus,
.gans-contact-form__form select:focus {
  border-color: var(--gold, #c8a977);
}

.gans-contact-form__form select option {
  background: var(--stone-deep, #2a2a2a);
  color: var(--cloud, #ffffff);
}

/* Submit button — gold pill */
.gans-contact-form__form input[type="submit"],
.gans-contact-form__form button[type="submit"],
.gans-contact-form__form .wpforms-submit,
.gans-contact-form__form .gform_button,
.gans-contact-form__form .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 1.75rem;
  border: none;
  border-radius: 9999px;
  background: var(--gold, #c8a977);
  color: var(--stone-deep, #2a2a2a);
  font-family: var(--font-suisse, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease;
  box-shadow: none;
}

.gans-contact-form__form input[type="submit"]:hover,
.gans-contact-form__form button[type="submit"]:hover,
.gans-contact-form__form .wpforms-submit:hover,
.gans-contact-form__form .gform_button:hover,
.gans-contact-form__form .ff-btn-submit:hover {
  background: #e0c592;
}

/* Plugin response messages (success / validation) */
.gans-contact-form__form .wpcf7-response-output,
.gans-contact-form__form .wpforms-confirmation-container,
.gans-contact-form__form .gform_confirmation_message,
.gans-contact-form__form .ff-message-success {
  margin-top:0;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: rgba(var(--gold-rgb), 0.06);
  color: var(--cloud, #ffffff);
  font-size: 14px;
  line-height: 1.55;
}

.gans-contact-form__form .wpcf7-not-valid-tip,
.gans-contact-form__form .wpforms-error,
.gans-contact-form__form .gfield_description.validation_message,
.gans-contact-form__form .ff-el-is-error .text-danger {
  margin-top: 0.35rem;
  font-size: 12px;
  color: #f3b4ad;
}

/* ════════════════════════════════════════════════════════════════════════
   Fluent Forms — specific overrides
   These ride on top of the generic rules above so Fluent's bundled CSS
   stops clashing with the dark stone-deep card.
   ════════════════════════════════════════════════════════════════════════ */

/* Form container — strip Fluent's wrapper padding/background */
.gans-contact-form__form .frm-fluent-form,
.gans-contact-form__form .ff_form_instance,
.gans-contact-form__form .ff_t_container {
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

/* Row layout — Fluent's 2-column rows */
.gans-contact-form__form .ff_columns,
.gans-contact-form__form .ff-t-cell {
  background: transparent !important;
}

.gans-contact-form__form .ff-t-cell {
  padding-inline: 0 !important;
  padding-block: 0.75rem !important;
}

@media (min-width: 768px) {
  .gans-contact-form__form .ff-t-cell + .ff-t-cell {
    padding-left: 1.5rem !important;
  }
}

/* Field group spacing */
.gans-contact-form__form .ff-el-group {
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .gans-contact-form__form .ff-el-group {
    margin-bottom: 1.75rem;
  }
}

/* Label block (Fluent wraps label + asterisk inside .ff-el-input--label) */
.gans-contact-form__form .ff-el-input--label {
  margin-bottom: 0.5rem;
}

.gans-contact-form__form .ff-el-input--label label {
  display: block;
  margin: 0;
  font-family: var(--font-suisse, sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--steel);
}

/* Required asterisk */
.gans-contact-form__form .ff-el-is-required.asterisk-right label:after,
.gans-contact-form__form .ff_required {
  color: var(--gold, #c8a977);
  margin-left: 0.25rem;
}

/* Help text under fields */
.gans-contact-form__form .ff-el-help-message {
  margin-top: 0.5rem;
  font-size: 12px;
  color: rgba(155, 155, 155, 0.7);
  line-height: 1.5;
}

/* Inputs / textareas / selects — override Fluent's box-shadow + radius */
.gans-contact-form__form .ff-el-form-control {
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: transparent !important;
  padding: 0.5rem 0 0.75rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--steel, #ffffff) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 15px !important;
  height: auto !important;
  min-height: 0 !important;
}

.gans-contact-form__form .ff-el-form-control:focus {
  border-bottom-color: var(--gold, #c8a977) !important;
  box-shadow: none !important;
}

/* Select dropdown arrow — inline SVG chevron, works in every browser */
.gans-contact-form__form select,
.gans-contact-form__form select.ff-el-form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 2rem !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239b9b9b' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 12px 12px !important;
  cursor: pointer;
}

/* Swap chevron to gold on focus */
.gans-contact-form__form select:focus,
.gans-contact-form__form select.ff-el-form-control:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23c8a977' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>") !important;
}

.gans-contact-form__form select.ff-el-form-control option {
  background: var(--stone-deep, #2a2a2a);
  color: var(--cloud, #ffffff);
}

/* Checkbox / radio groups — keep them legible on dark */
.gans-contact-form__form .ff-el-form-check-label,
.gans-contact-form__form .ff-el-form-check-input + label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-family: var(--font-suisse, sans-serif);
}

.gans-contact-form__form .ff-el-form-check-input[type="checkbox"],
.gans-contact-form__form .ff-el-form-check-input[type="radio"] {
  accent-color: var(--gold, #c8a977);
}

/* File upload */
.gans-contact-form__form .ff-el-form-control[type="file"] {
  padding: 0.75rem 0 !important;
}

.gans-contact-form__form .ff_upload_btn,
.gans-contact-form__form .ff-upload-zone {
  border: 1px dashed rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 2px !important;
  padding: 1rem 1.25rem !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.gans-contact-form__form .ff_upload_btn:hover,
.gans-contact-form__form .ff-upload-zone:hover {
  border-color: rgba(200, 169, 119, 0.7) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Submit button — wrapper alignment + button styling */
.gans-contact-form__form .ff_submit_btn_wrapper,
.gans-contact-form__form .ff-el-group.ff_submit_btn_wrapper {
  text-align: left;
  margin-top: 0.75rem;
}

/* Privacy message beside submit button.
   When a Custom HTML field with class "privacy-msg" sits before the
   submit-button wrapper, float it left and right-align the submit so
   they share a row. Stacks vertically on small screens. */
.gans-contact-form__form .ff-el-group.ff-custom_html.privacy-msg {
  float: left;
  max-width: 24rem;
  margin: 0.75rem 1.5rem 0 0;
}

.gans-contact-form__form .ff-el-group.ff-custom_html.privacy-msg + .ff-el-group.ff_submit_btn_wrapper,
.gans-contact-form__form .ff-el-group.ff-custom_html.privacy-msg ~ .ff-el-group.ff_submit_btn_wrapper {
  text-align: right;
  clear: none;
}

/* Clear the float so subsequent siblings (response messages, errors)
   continue below the privacy-msg + submit row. */
.gans-contact-form__form::after {
  content: '';
  display: block;
  clear: both;
}

@media (max-width: 639px) {
  .gans-contact-form__form .ff-el-group.ff-custom_html.privacy-msg {
    float: none;
    max-width: none;
    margin: 0 0 1rem;
  }

  .gans-contact-form__form .ff-el-group.ff-custom_html.privacy-msg + .ff-el-group.ff_submit_btn_wrapper,
  .gans-contact-form__form .ff-el-group.ff-custom_html.privacy-msg ~ .ff-el-group.ff_submit_btn_wrapper {
    text-align: left;
  }
}

.gans-contact-form__form .ff-btn-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 48px !important;
  padding: 0 1.75rem !important;
  border: none !important;
  border-radius: 9999px !important;
  background: var(--gold, #c8a977) !important;
  color: var(--stone-deep, #2a2a2a) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gans-contact-form__form .ff-btn-submit:hover {
  background: #e0c592 !important;
}

/* Loading state — keep button visually consistent */
.gans-contact-form__form .ff-btn-submit.ff-working {
  opacity: 0.7;
}

/* Inline field errors */
.gans-contact-form__form .ff-el-is-error .ff-el-form-control {
  border-bottom-color: #f3b4ad !important;
}

.gans-contact-form__form .error.text-danger,
.gans-contact-form__form .ff-el-is-error .text-danger {
  margin-top: 0.35rem;
  font-size: 12px;
  color: #f3b4ad;
  font-family: var(--font-suisse, sans-serif);
}

/* Form-level error banner */
.gans-contact-form__form .ff-errors-in-stack {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(243, 180, 173, 0.4);
  background: rgba(243, 180, 173, 0.06);
  color: #f3b4ad;
  font-size: 13px;
  border-radius: 2px;
}

/* Section break / title inside the form */
.gans-contact-form__form .ff_section_break_wrapper h3,
.gans-contact-form__form .ff_section_break_wrapper p {
  color: var(--cloud, #ffffff);
}

.gans-contact-form__form .ff_section_break_wrapper p {
  color: var(--steel);
  font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════════════
   Forminator — specific overrides
   Mirrors the Fluent block above for Forminator's own markup so its
   bundled CSS blends with the dark stone-deep card.
   ════════════════════════════════════════════════════════════════════════ */

/* Form wrapper reset */
.gans-contact-form__form .forminator-ui,
.gans-contact-form__form .forminator-custom-form,
.gans-contact-form__form .forminator-design--default {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Row layout — Forminator's grid (uses .forminator-row + .forminator-col) */
.gans-contact-form__form .forminator-row {
  margin: 0 0 1.5rem !important;
  background: transparent !important;
}

.gans-contact-form__form .forminator-row > [class*="forminator-col"] {
  background: transparent !important;
  padding: 0 !important;
}

@media (min-width: 768px) {
  .gans-contact-form__form .forminator-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.75rem !important;
  }
  .gans-contact-form__form .forminator-row > [class*="forminator-col"] {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Field group spacing */
.gans-contact-form__form .forminator-field {
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Labels */
.gans-contact-form__form .forminator-label {
  display: block !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
  color: var(--steel) !important;
  background: transparent !important;
}

/* Required asterisk */
.gans-contact-form__form .forminator-required,
.gans-contact-form__form .forminator-label .forminator-required {
  color: var(--gold, #c8a977) !important;
  margin-left: 0.25rem;
}

/* Label hint — produced by the {hint text} markdown shortcut in the
   field label (see gans_forminator_label_hint() filter in functions.php).
   Mirrors the small ". Optional" / "· Optional · PDF or DOCX" caption
   beside labels in CareersContactScene.tsx. */
.gans-contact-form__form .forminator-label .gans-label-hint {
  display: inline;
  margin-left: 0.5rem;
  font-family: var(--font-suisse, sans-serif);
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  color: rgba(155, 155, 155, 0.55) !important;
  text-transform: uppercase;
}

/* Help/description text under fields */
.gans-contact-form__form .forminator-description {
  margin-top: 0.5rem !important;
  font-size: 12px !important;
  color: rgba(155, 155, 155, 0.7) !important;
  line-height: 1.5;
}

/* Inputs / textareas / selects */
.gans-contact-form__form .forminator-input,
.gans-contact-form__form .forminator-textarea,
.gans-contact-form__form .forminator-select,
.gans-contact-form__form select.forminator-select2,
.gans-contact-form__form input.forminator-input,
.gans-contact-form__form textarea.forminator-textarea {
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: transparent !important;
  padding: 0.5rem 0 0.75rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cloud, #ffffff) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 15px !important;
  height: auto !important;
  min-height: 0 !important;
  caret-color: var(--gold, #c8a977) !important;
}

.gans-contact-form__form .forminator-textarea {
  resize: vertical !important;
  min-height: 7rem !important;
}

.gans-contact-form__form .forminator-input::placeholder,
.gans-contact-form__form .forminator-textarea::placeholder {
  color: rgba(155, 155, 155, 0.55) !important;
}

.gans-contact-form__form .forminator-input:focus,
.gans-contact-form__form .forminator-textarea:focus,
.gans-contact-form__form .forminator-select:focus,
.gans-contact-form__form select.forminator-select2:focus {
  border-bottom-color: var(--gold, #c8a977) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Native select fallback chevron (only applies if Select2 isn't init'd) */
.gans-contact-form__form select.forminator-select,
.gans-contact-form__form select.forminator-select2 {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 2rem !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239b9b9b' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 12px 12px !important;
  cursor: pointer;
}

.gans-contact-form__form select.forminator-select:focus,
.gans-contact-form__form select.forminator-select2:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23c8a977' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>") !important;
}

.gans-contact-form__form select.forminator-select option,
.gans-contact-form__form select.forminator-select2 option {
  background: var(--stone-deep, #2a2a2a) !important;
  color: var(--cloud, #ffffff) !important;
}

/* ── Select2 (Forminator's real select UI) ────────────────────────────
   Forminator wraps the native <select> with Select2's custom DOM. The
   real <select> is screen-reader-only; what users see + click is the
   .select2-container span. Style its inner pieces to mirror the
   border-bottom dropdown in CareersContactScene.tsx. */

/* Visible wrapper — full width, no inline width override from Select2 */
.gans-contact-form__form .forminator-select.select2-container {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}

/* Selection — the visible "input" replacement */
.gans-contact-form__form .select2-selection,
.gans-contact-form__form .select2-selection--single,
.gans-contact-form__form .select2-selection--multiple {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0.5rem 2rem 0.75rem 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 15px !important;
  color: var(--cloud, #ffffff) !important;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

/* Focus / open → gold underline */
.gans-contact-form__form .select2-container--open .select2-selection,
.gans-contact-form__form .select2-container--focus .select2-selection,
.gans-contact-form__form .select2-selection:focus,
.gans-contact-form__form .select2-selection--single:focus {
  border-bottom-color: var(--gold, #c8a977) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Comprehensive outline / blue-focus-ring removal */
.gans-contact-form__form .select2-container .select2-selection,
.gans-contact-form__form .select2-container .select2-selection--single,
.gans-contact-form__form .select2-container .select2-selection--multiple,
.gans-contact-form__form .select2-container .select2-selection:focus,
.gans-contact-form__form .select2-container .select2-selection--single:focus,
.gans-contact-form__form .select2-container .select2-selection__rendered:focus,
.gans-contact-form__form .select2-container--focus .select2-selection,
.gans-contact-form__form .select2-container--focus .select2-selection--single,
.gans-contact-form__form .select2-container--focus .select2-selection--multiple,
.gans-contact-form__form .select2-container--open .select2-selection,
.gans-contact-form__form .select2-container--open .select2-selection--single,
.gans-contact-form__form .select2-container--open .select2-selection--multiple,
.gans-contact-form__form .forminator-select.select2-container .select2-selection {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Rendered text inside the selection */
.gans-contact-form__form .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.3 !important;
  color: var(--cloud, #ffffff) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 15px !important;
}

/* Placeholder — dimmer than the chosen value, mirrors text-steel/65 */
.gans-contact-form__form .select2-selection__placeholder {
  color: rgba(155, 155, 155, 0.65) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 15px !important;
}

/* Clear (×) button — gold, no chip background */
.gans-contact-form__form .select2-selection__clear {
  color: var(--gold, #c8a977) !important;
  background: transparent !important;
  font-weight: 400 !important;
  margin-right: 0.5rem !important;
}

/* Chevron — kill Forminator's icon font glyph, replace with our SVG */
.gans-contact-form__form .select2-selection__arrow {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  width: 12px !important;
  height: 12px !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  pointer-events: none;
}

.gans-contact-form__form .select2-selection__arrow b,
.gans-contact-form__form .select2-selection__arrow .forminator-icon-chevron-down {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border: none !important;
  margin: 0 !important;
  position: static !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239b9b9b' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
  transition: background-image 0.2s ease;
}

.gans-contact-form__form .select2-selection__arrow .forminator-icon-chevron-down::before {
  content: "" !important;
}

/* Gold chevron when open */
.gans-contact-form__form .select2-container--open .select2-selection__arrow b,
.gans-contact-form__form .select2-container--open .select2-selection__arrow .forminator-icon-chevron-down {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23c8a977' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>") !important;
}

/* ── Select2 dropdown popup ──────────────────────────────────────────
   Forminator adds .forminator-dropdown--{theme} (default/flat/material…)
   to its dropdowns, so [class*="forminator-dropdown--"] reliably targets
   them whether they attach inside the form or float to <body>. */

/* `body` prefix + `.select2-container--open` raises specificity so these
   rules beat Forminator's bundled Select2 CSS regardless of load order. */
body .select2-container--open[class*="forminator-dropdown--"] .select2-dropdown,
body .select2-container[class*="forminator-dropdown--"] .select2-dropdown,
body [class*="forminator-dropdown--"].select2-container .select2-dropdown {
  background: var(--stone-deep, #2a2a2a) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 2px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  margin-top: 4px !important;
  color: var(--cloud, #ffffff) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  overflow: hidden !important;
  outline: none !important;
}

body .select2-container--open[class*="forminator-dropdown--"] .select2-dropdown--above {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

body .select2-container[class*="forminator-dropdown--"] .select2-results {
  padding: 0.25rem 0 !important;
  background: transparent !important;
}

body .select2-container[class*="forminator-dropdown--"] .select2-results__options {
  background: transparent !important;
  max-height: 18rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

body .select2-container[class*="forminator-dropdown--"] .select2-results__option {
  padding: 0.625rem 1rem !important;
  margin: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

body .select2-container[class*="forminator-dropdown--"] .select2-results__option--highlighted,
body .select2-container[class*="forminator-dropdown--"] .select2-results__option--highlighted[aria-selected],
body .select2-container[class*="forminator-dropdown--"] .select2-results__option:hover {
  background: rgba(var(--gold-rgb), 0.1) !important;
  color: var(--gold, #c8a977) !important;
}

body .select2-container[class*="forminator-dropdown--"] .select2-results__option[aria-selected="true"],
body .select2-container[class*="forminator-dropdown--"] .select2-results__option--selected {
  background: rgba(var(--gold-rgb), 0.06) !important;
  color: var(--cloud, #ffffff) !important;
}

/* Search input inside dropdown (if search is enabled) */
body .select2-container[class*="forminator-dropdown--"] .select2-search--dropdown {
  padding: 0.5rem !important;
  background: transparent !important;
}

body .select2-container[class*="forminator-dropdown--"] .select2-search__field {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--cloud, #ffffff) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 13px !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

body .select2-container[class*="forminator-dropdown--"] .select2-search__field:focus {
  border-color: var(--gold, #c8a977) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Empty / "no results" message */
body .select2-container[class*="forminator-dropdown--"] .select2-results__option--disabled {
  color: rgba(155, 155, 155, 0.55) !important;
  cursor: default;
}

body .select2-container[class*="forminator-dropdown--"] .select2-results__option--disabled:hover {
  background: transparent !important;
  color: rgba(155, 155, 155, 0.55) !important;
}

/* Checkbox / radio */
.gans-contact-form__form .forminator-checkbox,
.gans-contact-form__form .forminator-radio {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  font-family: var(--font-suisse, sans-serif) !important;
}

.gans-contact-form__form .forminator-checkbox input[type="checkbox"],
.gans-contact-form__form .forminator-radio input[type="radio"] {
  accent-color: var(--gold, #c8a977);
}

/* ── File upload — mirrors CareersContactScene.tsx dropzone ─────────────
   Forminator's single-file markup is:
     <div class="forminator-file-upload" data-element="...">
       <input type="file" class="forminator-input-file...">
       <button class="forminator-button forminator-button-upload">Browse</button>
       <span data-empty-text="Drop a file or click to browse">Drop a file or click to browse</span>
       <button class="forminator-button-delete">×</button>
     </div>
   (The "Browse" + placeholder text are swapped from Forminator's defaults
   via the gans_forminator_upload_markup filter in functions.php.)
   We turn the wrapper into a flex drop zone and reorder children:
   span (left) + delete button + Browse (right). */

.gans-contact-form__form .forminator-file-upload {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin-top: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  border: 1px dashed rgba(255, 255, 255, 0.2) !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.gans-contact-form__form .forminator-file-upload:hover {
  border-color: rgba(200, 169, 119, 0.7) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Hidden native <input type="file"> — kept accessible for JS triggers */
.gans-contact-form__form .forminator-file-upload > input[type="file"],
.gans-contact-form__form .forminator-input-file,
.gans-contact-form__form .forminator-input-file-required {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Filename / placeholder span — paperclip + text, on the LEFT */
.gans-contact-form__form .forminator-file-upload > span {
  order: 1;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gans-contact-form__form .forminator-file-upload > span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 5.5 5 10a2 2 0 0 1-2.83-2.83l5-5a3 3 0 0 1 4.24 4.24L6.5 11.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* "Browse" trigger button — RIGHT side, small uppercase eyebrow */
.gans-contact-form__form .forminator-file-upload .forminator-button-upload,
.gans-contact-form__form button.forminator-button-upload {
  order: 3;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--steel) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 0.2s ease;
}

.gans-contact-form__form .forminator-file-upload:hover .forminator-button-upload,
.gans-contact-form__form .forminator-button-upload:hover {
  color: var(--gold, #c8a977) !important;
  background: transparent !important;
}

/* Delete button — sits between filename and Browse once a file is chosen */
.gans-contact-form__form .forminator-file-upload .forminator-button-delete {
  order: 2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--steel) !important;
  cursor: pointer;
  transition: color 0.2s ease;
}

.gans-contact-form__form .forminator-file-upload .forminator-button-delete:hover {
  color: var(--gold, #c8a977) !important;
}

.gans-contact-form__form .forminator-file-upload .forminator-button-delete .forminator-icon-close::before {
  content: "×";
  font-size: 18px;
  line-height: 1;
}

/* ── Multi-upload (drag & drop) — best-effort match using the same look */
.gans-contact-form__form .forminator-multi-upload {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.gans-contact-form__form .forminator-multi-upload-message {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin-top: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  border: 1px dashed rgba(255, 255, 255, 0.2) !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.gans-contact-form__form .forminator-multi-upload-message:hover {
  border-color: rgba(200, 169, 119, 0.7) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.gans-contact-form__form .forminator-multi-upload-message .forminator-icon-upload {
  display: none !important;
}

.gans-contact-form__form .forminator-multi-upload-message > p {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 14px !important;
}

.gans-contact-form__form .forminator-multi-upload-message > p::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 5.5 5 10a2 2 0 0 1-2.83-2.83l5-5a3 3 0 0 1 4.24 4.24L6.5 11.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.gans-contact-form__form .forminator-multi-upload-message > p a {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--steel) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.gans-contact-form__form .forminator-multi-upload-message:hover > p a,
.gans-contact-form__form .forminator-multi-upload-message > p a:hover {
  color: var(--gold, #c8a977) !important;
}

/* Uploaded-files list under the multi-upload drop zone */
.gans-contact-form__form .forminator-uploaded-files {
  list-style: none !important;
  margin: 0.5rem 0 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: var(--font-suisse, sans-serif) !important;
}

/* Submit button — gold pill. Scoped to submit only so it doesn't catch
   the upload button (.forminator-button-upload) inside the drop zone. */
.gans-contact-form__form .forminator-button-submit,
.gans-contact-form__form button.forminator-button-submit,
.gans-contact-form__form button[type="submit"].forminator-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 48px !important;
  padding: 0 1.75rem !important;
  border: none !important;
  border-radius: 9999px !important;
  background: var(--gold, #c8a977) !important;
  color: var(--stone-deep, #2a2a2a) !important;
  font-family: var(--font-suisse, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gans-contact-form__form .forminator-button-submit:hover,
.gans-contact-form__form button.forminator-button-submit:hover,
.gans-contact-form__form button[type="submit"].forminator-button:hover {
  background: #e0c592 !important;
}

/* ── HTML-text beside submit button ────────────────────────────────────
   Forminator renders the submit in its own .forminator-row. To place a
   line of HTML text to its LEFT and the submit button on the RIGHT, add
   a Custom HTML field DIRECTLY ABOVE the submit row and wrap your text
   in a div with class "gans-msg-beside-submit", e.g.:

     <div class="gans-msg-beside-submit">Submitting confirms you have
     read the GANS recruitment privacy notice.</div>

   The :has() selector targets the row containing that class and floats
   it left, pulling the next sibling .forminator-row (the submit row)
   up alongside it. Mirrors CareersContactScene.tsx (md:col-span-2 flex
   justify-between). */

.gans-contact-form__form .gans-msg-beside-submit {
  margin: 0;
  max-width: 24rem;
  font-family: var(--font-suisse, sans-serif);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(155, 155, 155, 0.7);
}

.gans-contact-form__form .gans-msg-beside-submit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hide the auto-generated "HTML" label on the host field */
.gans-contact-form__form
  .forminator-row:has(.gans-msg-beside-submit)
  .forminator-label {
  display: none !important;
}

@media (min-width: 640px) {
  /* Row holding the message floats left */
  .gans-contact-form__form .forminator-row:has(.gans-msg-beside-submit) {
    display: block !important;
    float: left;
    max-width: 24rem;
    margin: 0.75rem 1.5rem 0 0 !important;
    background: transparent !important;
  }

  /* Submit row directly after it sits to the right */
  .gans-contact-form__form .forminator-row:has(.gans-msg-beside-submit) + .forminator-row {
    display: block !important;
    margin: 0 !important;
    text-align: right;
    clear: none !important;
  }

  .gans-contact-form__form .forminator-row:has(.gans-msg-beside-submit) + .forminator-row .forminator-col,
  .gans-contact-form__form .forminator-row:has(.gans-msg-beside-submit) + .forminator-row .forminator-field {
    display: block !important;
    flex: none !important;
    text-align: right;
  }

  /* Clear the float so response messages / errors render below */
  .gans-contact-form__form .forminator-row:has(.gans-msg-beside-submit) + .forminator-row::after {
    content: '';
    display: block;
    clear: both;
  }
}

/* Stack vertically on mobile */
@media (max-width: 639px) {
  .gans-contact-form__form .forminator-row:has(.gans-msg-beside-submit) {
    margin: 0 0 1rem !important;
  }

  .gans-contact-form__form .forminator-row:has(.gans-msg-beside-submit) + .forminator-row,
  .gans-contact-form__form .forminator-row:has(.gans-msg-beside-submit) + .forminator-row .forminator-col,
  .gans-contact-form__form .forminator-row:has(.gans-msg-beside-submit) + .forminator-row .forminator-field {
    text-align: left;
  }
}

.gans-contact-form__form .forminator-button-submit.forminator-loading,
.gans-contact-form__form button[type="submit"].forminator-button.forminator-loading {
  opacity: 0.7;
}

/* Inline field errors */
.gans-contact-form__form .forminator-error .forminator-input,
.gans-contact-form__form .forminator-error .forminator-textarea,
.gans-contact-form__form .forminator-error .forminator-select,
.gans-contact-form__form .forminator-has_error .forminator-input,
.gans-contact-form__form .forminator-has_error .forminator-textarea {
  border-bottom-color: #f3b4ad !important;
}

.gans-contact-form__form .forminator-error-message {
  margin-top: 0.35rem !important;
  font-size: 12px !important;
  color: #f3b4ad !important;
  font-family: var(--font-suisse, sans-serif) !important;
}

/* Form-level response banner */
.gans-contact-form__form .forminator-response-message,
.gans-contact-form__form .forminator-success {
  margin-top: 1rem !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid rgba(var(--gold-rgb), 0.4) !important;
  background: rgba(var(--gold-rgb), 0.06) !important;
  color: var(--cloud, #ffffff) !important;
  font-size: 13px !important;
  border-radius: 2px !important;
  font-family: var(--font-suisse, sans-serif) !important;
}

.gans-contact-form__form .forminator-response-message.forminator-error {
  border-color: rgba(243, 180, 173, 0.4) !important;
  background: rgba(243, 180, 173, 0.06) !important;
  color: #f3b4ad !important;
}

.forminator-row.forminator-row-last .forminator-col {
    display: flex;
    justify-content: end;
}