/* "Not right? Fix it" line (thank-you + account library) and the checkout
   "did you mean" hint. inc/email-correction.php. */

.email-fix { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-soft); font-size: .9rem; color: var(--ink); }
.email-fix.is-warn { border-color: var(--gold); background: var(--gold-soft); }
.email-fix__line { margin: 0; overflow-wrap: anywhere; }
.email-fix__toggle,
.email-hint__use { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.email-fix__toggle:hover,
.email-hint__use:hover { color: var(--ink-hover); }
.email-fix__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; }
.email-fix__form[hidden] { display: none; }
.email-fix__field { flex: 1 1 260px; min-width: 0; }
.email-fix__save { flex: 0 0 auto; }
.email-fix__err { flex-basis: 100%; margin: 0; color: var(--ink); font-size: .85rem; }

.thanks-head .email-fix { margin: 16px 0 0; }

.email-hint { margin: 6px 0 0; font-size: .85rem; color: var(--ink-muted); }
.email-hint[hidden] { display: none; }
.email-hint strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .email-fix__form { flex-direction: column; align-items: stretch; }
  .email-fix__field { flex-basis: auto; }
}