/* ===========================================================================
   TwinFold form design system
   ===========================================================================
   One visual language for every form on the site, taken from the /renewal/
   form: square controls, a label above each field, a flat orange action, navy
   ink, and a single restrained shadow on the one raised surface.

   Loaded sitewide from base.html, AFTER css/legacy-form.css, so the overrides
   below win on equal specificity without !important.

   Typography is deliberately absent. Every rule here inherits font-family from
   the page, so the form takes Archivo inside .tfc-renewal and Poppins on the
   legacy marketing pages -- the shapes are identical everywhere, the type
   matches its surroundings rather than reading as a pasted-in object.

   Markup is untouched on purpose. Each form keeps the class names its own
   script binds to (.field / .options for application-form.js,
   .wrap-input100 / .input100 for campaign-form.js), so this is a restyle with
   no behavioural surface at all. Login and document upload had no form CSS of
   their own and get a `tfc-fields` class on the <form> instead.

   Covers:
     .tfc-form        the six-step application  (9 templates, ~20 pages)
     .contact100-*    the closed-lost short form (see campaign/css/shortform.css)
     .tfc-fields      login and document upload
     .rnw-*           /renewal/ -- already this design; renewal.css owns it and
                      loads later, so nothing here applies to it
   =========================================================================== */

:root {
  --tfc-f-ink: #0b2233;
  --tfc-f-muted: #5a6b78;
  --tfc-f-rule: #c9d3db;
  --tfc-f-accent: #f05a2b;
  --tfc-f-accent-dk: #d94a1d;
  --tfc-f-field-bg: #f7f9fa;
  --tfc-f-surface: #ffffff;
  --tfc-f-focus: #0c5881;
  --tfc-f-error: #c0322d;
  --tfc-f-error-bg: #fdf6f5;
  --tfc-f-control: 48px;
  --tfc-f-action: 54px;
}

/* ---------------------------------------------------------------------------
   The card
   --------------------------------------------------------------------------- */

.tfc-form {
  border: 1px solid var(--tfc-f-rule);
  border-radius: 0;
  color: var(--tfc-f-muted);
  box-shadow: 0 16px 44px rgba(11, 34, 51, 0.09);
}

/* A solid accent rule, not a three-stop gradient. */
.tfc-form::before {
  height: 3px;
  background: var(--tfc-f-accent);
}

.tfc-form .panel__title,
.tfc-form .tfc-step__title {
  color: var(--tfc-f-ink);
}

/* The eyebrow above the form heading was tracked-out capitals. */
.tfc-form__intro .panel__title {
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: 1.3125rem;
}

/* ---------------------------------------------------------------------------
   Progress
   --------------------------------------------------------------------------- */

.tfc-form__progress-step {
  border-radius: 0;
}

.tfc-form__progress-step[data-state="done"],
.tfc-form__progress-step[data-state="current"] {
  background: var(--tfc-f-accent);
}

.tfc-form__progress-label {
  color: var(--tfc-f-muted);
}

/* ---------------------------------------------------------------------------
   Fields
   --------------------------------------------------------------------------- */

.tfc-form .field > label,
.tfc-fields label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tfc-f-ink);
}

.tfc-form .field input,
.tfc-form .field select,
.tfc-form .field textarea,
.tfc-fields input[type="text"],
.tfc-fields input[type="email"],
.tfc-fields input[type="tel"],
.tfc-fields input[type="password"],
.tfc-fields input[type="file"],
.tfc-fields select,
.tfc-fields textarea {
  width: 100%;
  min-height: var(--tfc-f-control);
  padding: 0 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tfc-f-ink);
  background: var(--tfc-f-field-bg);
  border: 1px solid var(--tfc-f-rule);
  border-radius: 0;
  outline: none;
  transition: border-color 0.14s ease, background 0.14s ease,
    box-shadow 0.14s ease;
}

.tfc-form .field textarea,
.tfc-fields textarea {
  min-height: 120px;
  padding: 12px 14px;
  line-height: 1.55;
}

.tfc-fields input[type="file"] {
  padding: 11px 14px;
}

.tfc-form .field input::placeholder,
.tfc-fields input::placeholder,
.tfc-fields textarea::placeholder {
  color: #93a3ae;
}

.tfc-form .field input:hover,
.tfc-form .field select:hover,
.tfc-form .field textarea:hover {
  border-color: #aebcc7;
  background: var(--tfc-f-field-bg);
}

/* The focus ring is an inset bar under the control rather than a glow: it
   reads at a glance which field is live without tinting the whole box. */
.tfc-form .field input:focus,
.tfc-form .field select:focus,
.tfc-form .field textarea:focus,
.tfc-fields input:focus,
.tfc-fields select:focus,
.tfc-fields textarea:focus {
  background: var(--tfc-f-surface);
  border-color: var(--tfc-f-focus);
  box-shadow: inset 0 -2px 0 var(--tfc-f-focus);
}

.tfc-form .field input[aria-invalid="true"] {
  border-color: var(--tfc-f-error);
  background: var(--tfc-f-error-bg);
}

.tfc-form .field input[aria-invalid="true"]:focus {
  border-color: var(--tfc-f-error);
  box-shadow: inset 0 -2px 0 var(--tfc-f-error);
}

.tfc-form .field__error,
.tfc-fields .errorlist,
.tfc-fields .invalid-feedback {
  color: var(--tfc-f-error);
  font-size: 0.8125rem;
}

.tfc-form .form-errors {
  border-radius: 0;
  border: none;
  border-left: 3px solid var(--tfc-f-error);
  background: #fdeceb;
  color: #8d2420;
}

/* ---------------------------------------------------------------------------
   Radio options (the application form's six questions)
   --------------------------------------------------------------------------- */

.tfc-form .options label {
  border-radius: 0;
  border: 1px solid var(--tfc-f-rule);
  background: var(--tfc-f-field-bg);
  color: var(--tfc-f-ink);
  font-weight: 500;
  /* The card used to lift on hover. Twenty-odd of these on a page is a lot of
     movement for a control whose job is to be picked once. */
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.tfc-form .options label:hover {
  border-color: var(--tfc-f-focus);
  background: var(--tfc-f-surface);
  transform: none;
  box-shadow: none;
}

.tfc-form .options label:active {
  transform: none;
}

.tfc-form .options input:checked + label,
.tfc-form .options input:checked + label:hover {
  border-color: var(--tfc-f-accent);
  background: rgba(240, 90, 43, 0.06);
  color: var(--tfc-f-ink);
  box-shadow: inset 3px 0 0 var(--tfc-f-accent);
}

/* No tick on the chosen option.
   legacy-form.css draws one as a 17x9 box with only its left and bottom
   borders, rotated -45deg -- the standard CSS checkmark. Giving that box a
   background fills the whole rectangle, which is what turned the tick into a
   solid orange diamond.

   Rather than recolour it, it is gone: the chosen row already states itself
   three times over with the accent border, the tinted background and the bar
   down its left edge, and with the form auto-advancing the row is on screen for
   about a fifth of a second anyway. Deleting this block restores the tick. */
.tfc-form .options label::after,
.tfc-form .options input:checked + label::after {
  content: none;
}

.tfc-form .options input:focus-visible + label {
  outline: 2px solid var(--tfc-f-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Actions
   --------------------------------------------------------------------------- */

.tfc-form .btn,
.tfc-fields button[type="submit"],
.tfc-fields .btn {
  border-radius: 0;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: none;
  transition: background-color 0.14s ease, color 0.14s ease,
    border-color 0.14s ease;
}

.tfc-form .btn:hover,
.tfc-form .btn:focus {
  transform: none;
  box-shadow: none;
}

.tfc-form .btn--primary,
.tfc-fields button[type="submit"],
.tfc-fields .btn-danger,
.tfc-fields .btn-danger-gradiant {
  min-height: var(--tfc-f-action);
  padding: 0 28px;
  color: #fff;
  background: var(--tfc-f-accent);
  background-image: none;
  border: 1px solid var(--tfc-f-accent);
  box-shadow: none;
}

.tfc-form .btn--primary:hover,
.tfc-form .btn--primary:focus,
.tfc-fields button[type="submit"]:hover,
.tfc-fields button[type="submit"]:focus,
.tfc-fields .btn-danger:hover,
.tfc-fields .btn-danger-gradiant:hover {
  color: #fff;
  background: var(--tfc-f-accent-dk);
  background-image: none;
  border-color: var(--tfc-f-accent-dk);
  box-shadow: none;
}

.tfc-form .btn--outline {
  color: var(--tfc-f-ink);
  background: transparent;
  border: 1px solid var(--tfc-f-rule);
}

.tfc-form .btn--outline:hover,
.tfc-form .btn--outline:focus {
  color: var(--tfc-f-ink);
  border-color: var(--tfc-f-ink);
  background: transparent;
}

/* The contact step's submit spans the card, the way the renewal form's does.
   It is the only button left in the form. */
.tfc-form__actions--submit {
  display: block;
}

.tfc-form__actions--submit .btn--primary {
  display: flex;
  width: 100%;
}

/* The last step's action is the commitment, so it spans the card the way the
   renewal form's does. */
.tfc-form .tfc-step[data-final] .btn--primary {
  flex: 1;
}

/* ---------------------------------------------------------------------------
   Consent rows
   --------------------------------------------------------------------------- */

.tfc-form .consent,
.tfc-fields .consent {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tfc-f-muted);
}

.tfc-form .consent input[type="checkbox"],
.tfc-fields input[type="checkbox"] {
  accent-color: var(--tfc-f-focus);
}

/* ---------------------------------------------------------------------------
   Login and document upload
   --------------------------------------------------------------------------- */
/* These had no form styling of their own -- bare legacy theme buttons and
   unstyled inputs -- so they get the shared treatment plus the card. */

.tfc-fields {
  max-width: 34rem;
}

.tfc-fields .field,
.tfc-fields .form-group {
  margin-bottom: 15px;
}

.tfc-fields button[type="submit"],
.tfc-fields .btn-danger-gradiant {
  width: 100%;
}