/*!
 * WINAM website forms - acknowledgement + error UI (v1.0)
 * Palette taken from the WINAM logo SVG, with the darker button-safe variants
 * so every text/background pair clears WCAG AA (4.5:1) on white.
 *   blue  #27A9E0  -> text-safe #166b92 (5.91:1)
 *   orange #ED6B36 -> text-safe #b8441a (5.41:1)
 *   ink   #343132
 */

.wf-thanks {
  position: relative;
  text-align: center;
  padding: 30px 24px 28px;
  background: #ffffff;
  border: 1px solid #dfe7ec;
  border-top: 3px solid #27A9E0;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(52, 49, 50, .08);
  outline: none;
}

.wf-thanks__tick {
  display: block;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wf-thanks__tick-ring {
  stroke: #27A9E0;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: wf-ring .5s cubic-bezier(.65, 0, .45, 1) forwards;
}

.wf-thanks__tick-mark {
  stroke: #166b92;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: wf-mark .32s cubic-bezier(.65, 0, .45, 1) .42s forwards;
}

@keyframes wf-ring {
  to { stroke-dashoffset: 0; }
}

@keyframes wf-mark {
  to { stroke-dashoffset: 0; }
}

.wf-thanks__title {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  color: #343132;
}

.wf-thanks__body {
  margin: 0 auto;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.65;
  color: #4a5a68;
}

.wf-thanks__note {
  margin: 12px auto 0;
  max-width: 460px;
  font-size: 13px;
  line-height: 1.55;
  color: #5a6d7d;
}

.wf-thanks__note::before {
  content: '\2709';
  margin-right: 6px;
  color: #b8441a;
}

.wf-thanks__close {
  margin-top: 18px;
  padding: 9px 26px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: #166b92;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .18s ease;
}

.wf-thanks__close:hover,
.wf-thanks__close:focus-visible {
  background: #11577a;
  outline: 2px solid #27A9E0;
  outline-offset: 2px;
}

/* Compact variant for the narrow footer column. */
.content-footer__subscribe .wf-thanks {
  padding: 22px 16px 20px;
  text-align: left;
}

.content-footer__subscribe .wf-thanks__tick {
  width: 46px;
  height: 46px;
  margin: 0 0 12px;
}

.content-footer__subscribe .wf-thanks__title {
  font-size: 17px;
}

.content-footer__subscribe .wf-thanks__body,
.content-footer__subscribe .wf-thanks__note {
  max-width: none;
  font-size: 13px;
}

/* The assistance success card is brand blue (#12A6E0). White type on it only
   reaches 2.78:1, and the neutral greys are worse (2.56:1 / 1.93:1), so neither
   clears WCAG AA. Give the panel its own white surface instead: that restores
   the same 12.87 / 7.11 / 5.36 ratios the other three forms already pass with. */
.help-form-block .help-form__success .wf-thanks {
  background: #ffffff;
  border: 1px solid #dfe7ec;
  border-top: 3px solid #166b92;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(52, 49, 50, .14);
  padding: 26px 20px 22px;
  margin: 0;
}

/* Close button keeps the dark-blue fill, which is 5.91:1 on white. */
.help-form-block .help-form__success .wf-thanks__close {
  color: #ffffff;
  background: #166b92;
}

.help-form-block .help-form__success .wf-thanks__close:hover,
.help-form-block .help-form__success .wf-thanks__close:focus-visible {
  background: #11577a;
  outline: 2px solid #27A9E0;
  outline-offset: 2px;
}

/* The legacy card also renders its own close "x" in the corner; keep it visible
   against the new white panel. */
.help-form-block .help-form__success > .btn-close {
  color: #5a6d7d;
}

/* ------------------------------------------------------------------ errors */

.wf-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #8a2c10;
  background: #fdf1ec;
  border: 1px solid #f4c9b8;
  border-left: 3px solid #b8441a;
  border-radius: 6px;
}

.wf-alert__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
  background: #b8441a;
  border-radius: 50%;
}

.wf-alert__text {
  flex: 1 1 auto;
}

/* ----------------------------------------------------------------- spinner */

.wf-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: wf-spin .7s linear infinite;
}

@keyframes wf-spin {
  to { transform: rotate(360deg); }
}

button.is-busy {
  cursor: progress;
  opacity: .85;
}

/* The legacy status divs also carry inline colour from the old script, so make
   the wrapper itself neutral and let the panels above own the styling. */
#contact_form_status.is-success,
#contact_form_status.is-error,
#subscription_form_status.is-success,
#subscription_form_status.is-error,
#validation-messages-container.is-error {
  color: inherit !important;
}

@media (prefers-reduced-motion: reduce) {
  .wf-thanks__tick-ring,
  .wf-thanks__tick-mark {
    animation: none;
    stroke-dashoffset: 0;
  }
  .wf-spinner {
    animation-duration: 1.6s;
  }
}