/*
 * Deliberately thin.
 *
 * These forms live inside a WordPress page, so the theme should own the look.
 * This sets layout and the code row — the things a theme has no opinion about
 * — and leaves fonts, colours and button styling to whatever is already there.
 *
 * NOTE there is no defensive reset here, unlike the embedded ticket widget.
 * That one ships a designed card and has to defend it from the theme; these
 * are bare form controls that are SUPPOSED to inherit. A reset would fight the
 * site instead of fitting into it. Every selector is scoped under
 * `.cqn-account`, so overriding any of it from the theme is a one-liner.
 */

.cqn-account { display: block; }

.cqn-account__step { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.cqn-account__step[hidden] { display: none; }

.cqn-account__label { font-weight: 600; }

.cqn-account__input { width: 100%; max-width: 24rem; }
.cqn-account__input[aria-invalid="true"] { border-color: #b42318; }

.cqn-account__code { display: flex; gap: 0.5rem; }
.cqn-account__digit {
  width: 3rem;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 600;
}

/* Inherits the theme's button styling; only the disabled state is asserted,
   because a themed button often gives no visual cue for it. */
.cqn-account__button[disabled] { opacity: 0.5; cursor: not-allowed; }

.cqn-account__link {
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.cqn-account__msg { color: #b42318; font-weight: 600; margin: 0; }
.cqn-account__msg[hidden] { display: none; }
.cqn-account__help { margin: 0; font-size: 0.875em; opacity: 0.8; }
.cqn-account__done { margin: 0; }