/* =========================================================================
   Funding Xperts Enquiry Form
   -------------------------------------------------------------------------
   Styles for [fx_enquiry_form].

   Every colour is read from the theme's design tokens with a hard-coded
   fallback after the comma, so the form looks right on the Funding Xperts
   theme and remains legible on any other theme (or with the theme disabled).
   That is why you will see literal hex values here and nowhere in the theme:
   a plugin cannot assume its host.

   Accessibility rule inherited from the theme: brand cyan is a FILL with
   navy text on top, never ink on white. #00CCE7 on white is 1.95:1.
   ========================================================================= */

.fxe-form {
  --fxe-line:   var(--fx-color-border, #DCE5EF);
  --fxe-ink:    var(--fx-color-text, #16233A);
  --fxe-soft:   var(--fx-color-text-muted, #55637A);
  --fxe-paper:  var(--fx-color-bg, #ffffff);
  --fxe-mist:   var(--fx-color-bg-alt, #F2F6FA);
  --fxe-navy:   var(--fx-color-brand-navy, #18335F);
  --fxe-cyan:   var(--fx-color-brand-cyan, #00CCE7);
  --fxe-aqua:   var(--fx-color-brand-aqua, #8CEAEA);
  --fxe-focus:  var(--fx-color-brand-cyan-deep, #0097E8);
  --fxe-err:    var(--fx-color-error, #A32A20);
  --fxe-err-bg: var(--fx-color-error-bg, #FBEFEE);
  --fxe-err-ln: var(--fx-color-error-border, #EFC9C5);
  --fxe-ok:     var(--fx-color-success, #137A46);
  --fxe-ok-bg:  var(--fx-color-success-bg, #E9F6EF);
  --fxe-ok-ln:  var(--fx-color-success-border, #B9E2CC);
  --fxe-radius: var(--fx-radius-md, 8px);

  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 40rem;
  color: var(--fxe-ink);
}

/* ---- layout ---- */
.fxe-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

@media (max-width: 440px) {
  .fxe-row { grid-template-columns: 1fr; }
}

/* ---- fields ---- */
.fxe-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.fxe-req {
  color: var(--fxe-err);
  font-weight: 400;
}

.fxe-field input[type="text"],
.fxe-field input[type="email"],
.fxe-field input[type="tel"] {
  width: 100%;
  height: 46px;
  padding: 0 0.875rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--fxe-ink);
  background: var(--fxe-paper);
  border: 1.5px solid var(--fxe-line);
  border-radius: 7px;
}

.fxe-field input:focus {
  border-color: var(--fxe-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 151, 232, 0.16);
}

.fxe-field--error input {
  border-color: var(--fxe-err);
  background: var(--fxe-err-bg);
}

.fxe-error {
  display: block;
  font-size: 0.78125rem;
  color: var(--fxe-err);
  margin-top: 0.3125rem;
}

.fxe-summary {
  background: var(--fxe-err-bg);
  border: 1px solid var(--fxe-err-ln);
  border-left: 3px solid var(--fxe-err);
  border-radius: var(--fxe-radius);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--fxe-err);
}

/* ---- consent ---- */
.fxe-consent {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--fxe-soft);
  background: var(--fxe-mist);
  border: 1px solid var(--fxe-line);
  border-radius: 7px;
  padding: 0.875rem 1rem;
  margin: 0;
}

.fxe-consent a,
.fxe-check a { color: var(--fxe-navy); }

.fxe-check {
  display: flex;
  gap: 0.6875rem;
  align-items: flex-start;
  font-size: 0.84375rem;
  line-height: 1.5;
  flex-wrap: wrap;
}

.fxe-check input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--fxe-focus);
}

.fxe-check label {
  margin: 0;
  font-weight: 400;
  flex: 1;
  min-width: 12rem;
}

.fxe-check--error label,
.fxe-check.fxe-field--error label { color: var(--fxe-err); }

.fxe-check .fxe-error { flex-basis: 100%; }

/* Honeypot. Kept out of the layout and out of the accessibility tree
   without using display:none, which the cruder bots check for. */
.fxe-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- submit ---- */
.fxe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  cursor: pointer;
  /* Cyan fill, navy ink: 6.43:1. */
  color: var(--fxe-navy);
  background: var(--fxe-cyan);
  border: 2px solid var(--fxe-cyan);
  border-radius: var(--fxe-radius);
  transition: background-color 150ms ease;
}

.fxe-btn:hover {
  background: var(--fxe-aqua);
  border-color: var(--fxe-aqua);
}

.fxe-btn:focus-visible {
  outline: 3px solid var(--fxe-focus);
  outline-offset: 3px;
}

.fxe-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ---- thank you ---- */
.fxe-done {
  --fxe-ok:    var(--fx-color-success, #137A46);
  --fxe-ok-bg: var(--fx-color-success-bg, #E9F6EF);
  --fxe-ok-ln: var(--fx-color-success-border, #B9E2CC);

  text-align: center;
  padding: 2.25rem 1.5rem;
  max-width: 40rem;
}

.fxe-done__mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--fxe-ok-bg);
  border: 1px solid var(--fxe-ok-ln);
  color: var(--fxe-ok);
  display: grid;
  place-items: center;
  margin: 0 auto 1.125rem;
}

.fxe-done h2 {
  font-family: var(--fx-font-display, inherit);
  font-size: 1.42rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.625rem;
}

.fxe-done p {
  color: var(--fx-color-text-muted, #55637A);
  max-width: 38ch;
  margin: 0 auto 0.75rem;
  font-size: 0.9375rem;
}

.fxe-done__ref {
  font-family: var(--fx-font-mono, ui-monospace, Consolas, monospace);
  font-size: 0.78125rem;
  color: var(--fx-color-text-faint, #8794A8);
  margin-top: 1.125rem !important;
}

@media (prefers-reduced-motion: reduce) {
  .fxe-btn { transition: none; }
}

/* Administrator-only diagnostic on the thank-you screen. Never shown to a
   visitor: the page must look successful to them whether or not the mail
   server cooperated, while whoever runs the site needs to know immediately. */
.fxe-admin-warning {
  display: block;
  text-align: left;
  max-width: 34rem;
  margin: 1.5rem auto 0;
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fx-color-notice, #B7791F);
  background: var(--fx-color-notice-bg, #FDF6E7);
  border: 1px solid var(--fx-color-notice-border, #F0DEB4);
  border-left: 3px solid var(--fx-color-notice, #B7791F);
  border-radius: 7px;
}

.fxe-admin-warning strong { display: block; margin-bottom: 0.25rem; }
.fxe-admin-warning span { display: block; }