/* =========================================================
   GLOBAL DAY ZERO — Fluent Forms brand styling
   Paste into: Fluent Forms → Global Settings → Custom CSS
   (or your theme's custom CSS box). Targets all Fluent forms.
   Matches the dark phosphor GDZ look used across the site.
   ========================================================= */

/* tokens (kept local so this block is self-contained) */
.fluentform {
  --gdz-bg-1:#0F1212;
  --gdz-bg-2:#14181A;
  --gdz-line:#222829;
  --gdz-line-2:#303739;
  --gdz-ink:#F2EFE8;
  --gdz-ink-muted:#8A8B86;
  --gdz-ink-dim:#5C5E5A;
  --gdz-accent:#B7E66E;
  --gdz-accent-deep:#7BAE3C;
  font-family:'Inter Tight',-apple-system,system-ui,sans-serif;
}

/* labels */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-input--label {
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gdz-ink-dim);
  margin-bottom:6px;
}
.fluentform .ff-el-input--label .ff_t_c,
.fluentform .ff-el-is-required label:after { color:var(--gdz-accent); }

/* text / email / textarea / select inputs */
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=url],
.fluentform input[type=number],
.fluentform textarea,
.fluentform select,
.fluentform .ff_input-name input {
  width:100%;
  background:var(--gdz-bg-1) !important;
  border:1px solid var(--gdz-line) !important;
  border-radius:10px !important;
  padding:12px 14px !important;
  color:var(--gdz-ink) !important;
  font-family:'Inter Tight',sans-serif !important;
  font-size:14px !important;
  box-shadow:none !important;
  transition:border-color .2s;
}
.fluentform input::placeholder,
.fluentform textarea::placeholder { color:var(--gdz-ink-dim); }

/* focus state */
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
  outline:none !important;
  border-color:var(--gdz-accent-deep) !important;
  box-shadow:0 0 0 2px rgba(183,230,110,.12) !important;
}

/* select dropdown arrow on dark bg */
.fluentform select {
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238A8B86' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px !important;
}

/* submit button */
.fluentform .ff-btn-submit,
.fluentform button[type=submit] {
  width:100%;
  background:var(--gdz-accent) !important;
  color:#0A0C0C !important;
  font-family:'Inter Tight',sans-serif !important;
  font-weight:500 !important;
  font-size:15px !important;
  padding:14px !important;
  border:none !important;
  border-radius:999px !important;
  cursor:pointer;
  box-shadow:0 12px 32px -12px rgba(183,230,110,.4) !important;
  transition:transform .15s;
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type=submit]:hover { transform:translateY(-2px); }

/* spacing between fields */
.fluentform .ff-t-container,
.fluentform .ff-el-group { margin-bottom:14px !important; }

/* checkboxes / radios accent */
.fluentform input[type=checkbox],
.fluentform input[type=radio] { accent-color:var(--gdz-accent); }

/* success message */
.fluentform .ff-message-success,
.ff-message-success {
  background:rgba(183,230,110,.08) !important;
  border:1px solid var(--gdz-accent-deep) !important;
  color:var(--gdz-ink) !important;
  border-radius:10px !important;
  padding:14px 16px !important;
  font-size:14px !important;
}

/* validation errors */
.fluentform .error-text,
.fluentform .ff-el-is-error .text-danger {
  color:#E6A86E !important;
  font-size:12px !important;
}
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea {
  border-color:#E6A86E !important;
}

/* inline two-up rows (e.g. name + email) — Fluent column containers */
.fluentform .ff-t-cell { padding:0 6px; }
.fluentform .ff-t-row { margin:0 -6px; }

/* force equal-height, top-aligned columns so name + email line up */
.fluentform .ff_row_wrapper,
.fluentform .ff-t-row,
.fluentform [class*="ff-t-container"] {
  display:flex !important;
  align-items:flex-start !important;
  flex-wrap:wrap;
}
.fluentform .ff-t-cell,
.fluentform [class*="ff-t-cell"] {
  display:flex !important;
  flex-direction:column;
  justify-content:flex-start;
}
/* normalise label height so single- and double-line labels still align fields */
.fluentform .ff-el-input--label {
  min-height:16px;
  display:flex;
  align-items:flex-end;
}
/* ensure inputs in a row share the same top */
.fluentform .ff-el-group { margin-top:0 !important; }
