/**
 * @file
 * Becker RFI webform visual styles — matches the React POC brand language.
 */

/* =========================================================================
   1. CSS Custom Properties (brand tokens)
   ========================================================================= */

:root {
  --rfi-blue: #122048;
  --rfi-blue-focus: #0a4b77;
  --rfi-yellow: #fdc20d;
  --rfi-teal: #4896a2;
  --rfi-error: #b01f5d;
  --rfi-success: #2e7d32;
  --rfi-gray-bg: #f4f4f4;
  --rfi-gray-border: #e0e0e0;
  --rfi-gray-input: #cccccc;
  --rfi-gray-text: #4a4a4a;
  --rfi-tile-hover-bg: #f0f8f9;
  --rfi-tile-selected-bg: #eef1f6;
  --rfi-white: #ffffff;
  --rfi-font: 'Euclid Circular A', Arial, sans-serif;
  --rfi-radius-card: 10px;
  --rfi-radius-input: 6px;
  --rfi-transition: 0.15s ease;
}

/* =========================================================================
   2. Page background
   ========================================================================= */

.path-form {
  background-color: var(--rfi-gray-bg);
  min-height: 100vh;
}

/* =========================================================================
   3. Form card container
   ========================================================================= */

form.webform-submission-becker-rfi-form {
  max-width: 720px !important;
  margin: 2rem auto;
  padding: 40px;
  background: var(--rfi-white);
  border: 1px solid var(--rfi-gray-border);
  border-radius: var(--rfi-radius-card);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  font-family: var(--rfi-font);
  color: var(--rfi-blue);
  box-sizing: border-box;
  isolation: isolate;
}

form.webform-submission-becker-rfi-form * {
  box-sizing: border-box;
}

/* =========================================================================
   4. Progress bar (progress-tracker plugin)
   ========================================================================= */

.webform-submission-becker-rfi-form .progress-tracker {
  list-style: none;
  display: flex;
  align-items: flex-start;
  padding: 0;
  margin: 0 0 2rem 0;
}

.webform-submission-becker-rfi-form .progress-step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

/* Connector line running right from each step (absent on last step) */
.webform-submission-becker-rfi-form .progress-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 7px;
  left: calc(50% + 10px);
  right: -50%;
  height: 3px;
  background: var(--rfi-gray-border);
  border-radius: 2px;
  z-index: 0;
}

.webform-submission-becker-rfi-form .progress-step.is-complete:not(:last-child)::after {
  background: var(--rfi-blue);
}

/* Step marker circle */
.webform-submission-becker-rfi-form .progress-marker {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rfi-gray-border);
  border: 2px solid var(--rfi-gray-border);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Hide numeric counter rendered by the plugin via ::before/::after */
.webform-submission-becker-rfi-form .progress-marker::before,
.webform-submission-becker-rfi-form .progress-marker::after {
  display: none !important;
}

.webform-submission-becker-rfi-form .progress-step.is-complete .progress-marker {
  background: var(--rfi-blue);
  border-color: var(--rfi-blue);
}

.webform-submission-becker-rfi-form .progress-step.is-active .progress-marker {
  background: var(--rfi-white);
  border: 3px solid var(--rfi-blue);
}

/* Step label */
.webform-submission-becker-rfi-form .progress-text {
  display: block;
}

.webform-submission-becker-rfi-form .progress-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--rfi-gray-text);
  white-space: nowrap;
  line-height: 1.2;
}

.webform-submission-becker-rfi-form .progress-step.is-active .progress-title {
  color: var(--rfi-blue);
}

/* =========================================================================
   5. Page/section heading (wizard page h2 title)
   ========================================================================= */

.webform-submission-becker-rfi-form .rfi-page-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rfi-blue);
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
  font-family: var(--rfi-font);
}

/* Hide the default wizard page h2 title (used in progress bar but rendered inline too) */
.webform-submission-becker-rfi-form .webform-wizard-page > h2:first-child {
  display: none;
}

/* =========================================================================
   6. Intent tile radios
   ========================================================================= */

.webform-submission-becker-rfi-form .rfi-intent-tiles {
  margin: 0;
  padding: 0;
  border: none;
  min-inline-size: auto;
}

/* The actual radio items live in div.form-radios inside the fieldset-wrapper */
.webform-submission-becker-rfi-form .rfi-intent-tiles .form-radios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.webform-submission-becker-rfi-form .rfi-intent-tiles .form-type-radio {
  position: relative;
  margin: 0;
}

.webform-submission-becker-rfi-form .rfi-intent-tiles input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.webform-submission-becker-rfi-form .rfi-intent-tiles label {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1.5px solid var(--rfi-gray-border);
  border-radius: var(--rfi-radius-card);
  cursor: pointer;
  background: var(--rfi-white);
  transition: border-color var(--rfi-transition), background var(--rfi-transition), box-shadow var(--rfi-transition);
  min-height: 110px;
  font-weight: 400;
  color: var(--rfi-blue);
  position: relative;
  overflow: hidden;
}

.webform-submission-becker-rfi-form .rfi-intent-tiles label::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rfi-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
  position: absolute;
  top: 12px;
  right: 12px;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.webform-submission-becker-rfi-form .rfi-intent-tiles label:hover {
  border-color: var(--rfi-teal);
  background: var(--rfi-tile-hover-bg);
}

.webform-submission-becker-rfi-form .rfi-intent-tiles input[type="radio"]:checked + label {
  border: 2px solid var(--rfi-blue);
  background: var(--rfi-tile-selected-bg);
}

.webform-submission-becker-rfi-form .rfi-intent-tiles input[type="radio"]:checked + label::after {
  transform: scale(1);
}

.webform-submission-becker-rfi-form .rfi-intent-tiles input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--rfi-blue-focus);
  outline-offset: 2px;
}

/* Tile icon (injected by JS as .rfi-tile-icon) */
.webform-submission-becker-rfi-form .rfi-intent-tiles .rfi-tile-icon {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.webform-submission-becker-rfi-form .rfi-intent-tiles .rfi-tile-icon svg {
  width: 100%;
  height: 100%;
}

/* Tile label title (the option text) */
.webform-submission-becker-rfi-form .rfi-intent-tiles .rfi-tile-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rfi-blue);
  line-height: 1.3;
  margin-bottom: 4px;
}

/* Tile description subtext (injected by JS) */
.webform-submission-becker-rfi-form .rfi-intent-tiles .rfi-tile-description {
  font-size: 12px;
  color: var(--rfi-gray-text);
  line-height: 1.4;
  font-weight: 400;
}

/* Requesting-for tiles: 2-column, smaller height */
.webform-submission-becker-rfi-form .rfi-requesting-tiles.form-radios {
  grid-template-columns: 1fr 1fr;
}

/* =========================================================================
   7. Two-column field layout for context page
   ========================================================================= */

/* First name + last name side by side via float (avoids inline-block width fighting) */
.webform-submission-becker-rfi-form .js-form-item-first-name,
.webform-submission-becker-rfi-form .js-form-item-last-name {
  float: left;
  width: calc(50% - 0.5rem) !important;
  margin-right: 0;
}

/* Element selector raises specificity to beat atge_base's .webform-submission-form .form-item margin-right: 0 */
form.webform-submission-becker-rfi-form .js-form-item-first-name {
  margin-right: 1rem;
}

/* Clear float after last-name so following fields stack normally */
.webform-submission-becker-rfi-form .js-form-item-last-name::after {
  content: '';
  display: table;
  clear: both;
}

.webform-submission-becker-rfi-form .js-form-item-email {
  clear: both;
}

/* Inside context containers: pairs of fields */
.webform-submission-becker-rfi-form .rfi-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.webform-submission-becker-rfi-form .rfi-context-grid > .js-form-item-company,
.webform-submission-becker-rfi-form .rfi-context-grid > .js-form-item-company-not-listed,
.webform-submission-becker-rfi-form .rfi-context-grid > .js-form-item-company-unlisted-name,
.webform-submission-becker-rfi-form .rfi-context-grid > .js-form-item-support-message,
.webform-submission-becker-rfi-form .rfi-context-grid > .js-form-item-is-current-student,
.webform-submission-becker-rfi-form .rfi-context-grid > .js-form-item-becker-student-email {
  grid-column: span 2;
}

/* Prevent grid columns from exceeding their track and allow selects to shrink */
.webform-submission-becker-rfi-form .rfi-context-grid > * {
  min-width: 0;
}

/* Force select elements to fill their grid column after display:none reveal */
.webform-submission-becker-rfi-form .rfi-context-grid select {
  width: 100%;
}

/* Override Chosen.js inline width so all selects fill their form-item container.
   !important is required because Chosen sets width as a style attribute. */
.webform-submission-becker-rfi-form .chosen-container {
  width: 100% !important;
}

/* Multi-select Chosen containers auto-size to content (a bare search input),
   rendering shorter than the single-select .chosen-single siblings. Set a
   min-height so the empty state matches the 48px .chosen-single height. */
.webform-submission-becker-rfi-form .chosen-container-multi .chosen-choices {
  min-height: 48px;
  box-sizing: border-box;
}

/* =========================================================================
   8. Input fields
   ========================================================================= */

/* Element selector raises specificity to 0,2,1 — beats atge_base's 0,2,0 rule */
form.webform-submission-becker-rfi-form .form-item {
  margin-bottom: 1.25rem;
  padding-right: 0;
}

.webform-submission-becker-rfi-form .form-item__label,
.webform-submission-becker-rfi-form label:not(.option) {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rfi-blue);
  margin-bottom: 6px;
  font-family: var(--rfi-font);
}

.webform-submission-becker-rfi-form .form-required {
  color: var(--rfi-error);
}

.webform-submission-becker-rfi-form input[type="text"],
.webform-submission-becker-rfi-form input[type="email"],
.webform-submission-becker-rfi-form input[type="tel"],
.webform-submission-becker-rfi-form textarea {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--rfi-gray-input);
  border-radius: var(--rfi-radius-input);
  font-family: var(--rfi-font);
  font-size: 0.9375rem;
  color: var(--rfi-blue);
  background: var(--rfi-white);
  transition: border-color var(--rfi-transition), box-shadow var(--rfi-transition);
  outline: none;
  appearance: none;
}

.webform-submission-becker-rfi-form textarea {
  height: auto;
  min-height: 100px;
  padding: 12px 16px;
  resize: vertical;
}

.webform-submission-becker-rfi-form input[type="text"]:focus,
.webform-submission-becker-rfi-form input[type="email"]:focus,
.webform-submission-becker-rfi-form input[type="tel"]:focus,
.webform-submission-becker-rfi-form textarea:focus {
  border: 2px solid var(--rfi-blue-focus);
  box-shadow: 0 0 0 3px rgba(10, 75, 119, 0.1);
}

.webform-submission-becker-rfi-form select {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 16px;
  border: 1.5px solid var(--rfi-gray-input);
  border-radius: var(--rfi-radius-input);
  font-family: var(--rfi-font);
  font-size: 0.9375rem;
  color: var(--rfi-blue);
  background: var(--rfi-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 12px center/18px no-repeat;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--rfi-transition), box-shadow var(--rfi-transition);
  outline: none;
}

.webform-submission-becker-rfi-form select:focus {
  border: 2px solid var(--rfi-blue-focus);
  box-shadow: 0 0 0 3px rgba(10, 75, 119, 0.1);
}

/* =========================================================================
   9. Error states
   ========================================================================= */

.webform-submission-becker-rfi-form .form-item--error input,
.webform-submission-becker-rfi-form .form-item--error select,
.webform-submission-becker-rfi-form .form-item--error textarea {
  border: 2px solid var(--rfi-error);
}

.webform-submission-becker-rfi-form .form-item--error .form-item__label,
.webform-submission-becker-rfi-form .form-item--error label {
  color: var(--rfi-error);
}

/* atge_base/form-element.html.twig uses class="error-message", not
   "form-item__error-message". Target both so all text-input errors use the
   brand color instead of atge_base's global #ff0000. */
.webform-submission-becker-rfi-form .error-message,
.webform-submission-becker-rfi-form .form-item--error .form-item__error-message,
.webform-submission-becker-rfi-form .form-item__error-message {
  color: var(--rfi-error);
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

/* stable9/fieldset.html.twig renders the error in a plain <div> (no class)
   inside .fieldset-wrapper. Radios groups receive class "error" on the
   fieldset (not "form-item--error" used by text inputs). */
.webform-submission-becker-rfi-form fieldset.error .fieldset-wrapper > div:not([class]) {
  color: var(--rfi-error);
  font-size: 12px;
  margin-top: 4px;
}

/* Form-level error summary must remain visible on this form even though the
   base theme hides .messages--error for webforms globally.
   Must be `flex` (not `block`) to preserve the row layout from .messages__wrapper
   — .messages__wrapper provides display:flex which the hide rule overrides to none;
   restoring to `block` would lose flex, breaking inline icon/text and margin-left:auto
   on the close button. */
form.webform-submission-becker-rfi-form .messages--error {
  display: flex;
}

/* Re-skin the Drupal status message to match the RFI design language.
   The base theme's .messages and .messages--error add a grey background,
   a heavy box-shadow, and bold font that all clash with the form card. */
form.webform-submission-becker-rfi-form .messages__wrapper {
  /* Remove the column-flex wrapper margin/height that the theme adds. */
  height: auto;
  margin-bottom: 1rem;
}

form.webform-submission-becker-rfi-form .messages.messages--error {
  background: #fce8ef;
  border: 1.5px solid var(--rfi-error);
  border-radius: var(--rfi-radius-input);
  box-shadow: none;
  color: var(--rfi-error);
  font-family: var(--rfi-font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.75rem 1rem;
  width: 100%;
}

form.webform-submission-becker-rfi-form .messages.messages--error a {
  color: var(--rfi-error);
  text-decoration: underline;
}

form.webform-submission-becker-rfi-form .messages.messages--error .icon-error-wrapper {
  background: var(--rfi-error);
  border-radius: 50%;
  /* inline-flex centers the glyph both axes; without this the 22px icon
     overflows the 22px circle (the theme uses display:inline+text-align:center
     which we cannot rely on inside our flex row). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 22px;
  margin-right: 10px;
  width: 22px;
}

form.webform-submission-becker-rfi-form .messages.messages--error .icon-bkr-error {
  color: var(--rfi-white);
  /* Keep the glyph smaller than the circle so it doesn't clip at the border. */
  font-size: 0.875rem;
  line-height: 1.375rem;
}

form.webform-submission-becker-rfi-form .messages.messages--error .icon-bkr-close {
  color: var(--rfi-error);
}

/* Tile option labels inside an error-state radios fieldset must stay blue;
   only the group error message should be error-colored. */
.webform-submission-becker-rfi-form .rfi-intent-tiles.error label.option {
  color: var(--rfi-blue);
}

/* =========================================================================
   10. Yes/No student toggle (injected by JS)
   ========================================================================= */

.webform-submission-becker-rfi-form .rfi-toggle-wrapper {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--rfi-gray-input);
  border-radius: var(--rfi-radius-input);
  overflow: hidden;
  width: fit-content;
  margin-top: 4px;
}

.webform-submission-becker-rfi-form .rfi-toggle-btn {
  padding: 10px 28px;
  font-family: var(--rfi-font);
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  background: var(--rfi-white);
  color: var(--rfi-gray-text);
  cursor: pointer;
  transition: background var(--rfi-transition), color var(--rfi-transition);
  line-height: 1;
}

.webform-submission-becker-rfi-form .rfi-toggle-btn + .rfi-toggle-btn {
  border-left: 1.5px solid var(--rfi-gray-input);
}

.webform-submission-becker-rfi-form .rfi-toggle-btn.is-active {
  background: var(--rfi-blue);
  color: var(--rfi-white);
}

.webform-submission-becker-rfi-form .rfi-toggle-btn:hover:not(.is-active) {
  background: var(--rfi-gray-bg);
}

/* Hide the original label when the toggle is active (theme rules use !important) */
.webform-submission-becker-rfi-form .rfi-toggle-enhanced label.option {
  display: none !important;
}

/* Hide the underlying checkbox when toggle is active */
.webform-submission-becker-rfi-form .rfi-toggle-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* =========================================================================
   11. Navigation buttons
   ========================================================================= */

.webform-submission-becker-rfi-form .form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.webform-submission-becker-rfi-form .webform-button--next,
.webform-submission-becker-rfi-form .webform-button--submit {
  background: var(--rfi-yellow) !important;
  color: var(--rfi-blue) !important;
  font-family: var(--rfi-font);
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--rfi-radius-input);
  padding: 12px 28px;
  cursor: pointer;
  transition: transform var(--rfi-transition), opacity var(--rfi-transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.webform-submission-becker-rfi-form .webform-button--next:hover,
.webform-submission-becker-rfi-form .webform-button--submit:hover {
  transform: scale(1.02);
  opacity: 0.95;
}

.webform-submission-becker-rfi-form .webform-button--next:disabled,
.webform-submission-becker-rfi-form .webform-button--submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.webform-submission-becker-rfi-form .webform-button--previous {
  background: transparent;
  border: none;
  color: var(--rfi-blue);
  font-family: var(--rfi-font);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--rfi-transition);
  order: -1;
}

.webform-submission-becker-rfi-form .webform-button--previous:hover {
  opacity: 0.7;
}

/* =========================================================================
   12. Consent checkboxes
   ========================================================================= */

.webform-submission-becker-rfi-form .form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 1rem;
}

.webform-submission-becker-rfi-form .form-type-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--rfi-blue);
  cursor: pointer;
}

.webform-submission-becker-rfi-form .form-type-checkbox label {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--rfi-gray-text);
  line-height: 1.5;
  cursor: pointer;
}

/* sms_optin: native visible checkbox (opacity:revert inline) + full-width description */
.webform-submission-becker-rfi-form .form-item-sms-optin label::before,
.webform-submission-becker-rfi-form .form-item-sms-optin label::after {
  display: none;
}

.webform-submission-becker-rfi-form .form-item-sms-optin .description {
  flex-basis: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--rfi-gray-text);
  line-height: 1.5;
}


/* Company autocomplete: stretch to fill its B2B grid column */
.webform-submission-becker-rfi-form .rfi-context-grid .js-form-item-company input {
  width: 100%;
}

/* Suppress throbber — element+class selector (0,2,2) beats bkr_subtheme's .js input.form-autocomplete (0,2,1) */
form.webform-submission-becker-rfi-form input.form-autocomplete {
  background-image: none;
}

/* =========================================================================
   13. Conditional field transition (smooth reveal via max-height)
   ========================================================================= */

.webform-submission-becker-rfi-form .rfi-conditional-field {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
}

.webform-submission-becker-rfi-form .rfi-conditional-field.is-hidden {
  max-height: 0;
  opacity: 0;
}

.webform-submission-becker-rfi-form .rfi-conditional-field.is-visible {
  max-height: 200px;
  opacity: 1;
}

/* =========================================================================
   14. Step page fade-in animation
   ========================================================================= */

@keyframes rfi-page-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.webform-submission-becker-rfi-form .rfi-page-entering {
  animation: rfi-page-enter 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* =========================================================================
   15. Confirmation / success screen
   ========================================================================= */

.webform-confirmation.rfi-confirmation {
  text-align: center;
  padding: 3rem 2rem;
}

.rfi-confirmation__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: #e8f5e9;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
}

.rfi-confirmation__icon svg {
  width: 40px;
  height: 40px;
}

@keyframes rfi-check-draw {
  from {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes rfi-circle-grow {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.rfi-confirmation__icon {
  animation: rfi-circle-grow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.rfi-confirmation__icon svg path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: rfi-check-draw 0.5s ease 0.3s forwards;
}

.rfi-confirmation__title {
  font-family: var(--rfi-font);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--rfi-blue);
  margin: 0 0 0.75rem 0;
  animation: rfi-page-enter 0.4s ease 0.2s both;
}

.rfi-confirmation__message {
  font-size: 1rem;
  color: var(--rfi-gray-text);
  max-width: 440px;
  margin: 0 auto 1rem;
  line-height: 1.6;
  animation: rfi-page-enter 0.4s ease 0.35s both;
}

.rfi-confirmation__back {
  margin-top: 2rem;
  animation: rfi-page-enter 0.4s ease 0.5s both;
}

.rfi-confirmation__back a {
  color: var(--rfi-blue);
  font-weight: 600;
  text-decoration: underline;
  font-size: 0.875rem;
}

/* =========================================================================
   16. Responsive
   ========================================================================= */

@media (max-width: 640px) {
  .webform-submission-becker-rfi-form {
    margin: 0;
    padding: 24px 20px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  .webform-submission-becker-rfi-form .rfi-intent-tiles .form-radios {
    grid-template-columns: 1fr;
  }

  .webform-submission-becker-rfi-form .js-form-item-first-name,
  .webform-submission-becker-rfi-form .js-form-item-last-name {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  .webform-submission-becker-rfi-form .rfi-context-grid {
    grid-template-columns: 1fr;
  }

  .webform-submission-becker-rfi-form .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .webform-submission-becker-rfi-form .webform-button--next,
  .webform-submission-becker-rfi-form .webform-button--submit {
    width: 100%;
    justify-content: center;
  }
}