/* Functional registration-form styles. The visual theme remains in assets/*.css. */

.registration-form .iti {
  display: block;
  width: 100%;
}

.registration-form input.valid:not([type="tel"]) {
  border-color: #3d9eff !important;
  box-shadow: inset 0 0 0 1px #3d9eff !important;
}

.registration-form input.invalid:not([type="tel"]) {
  border-color: #f87171 !important;
  box-shadow: inset 0 0 0 1px #f87171 !important;
}

.registration-form .iti.field-ok {
  border-color: transparent !important;
  box-shadow: inset 0 0 0 2px #3d9eff !important;
}

.registration-form .iti.field-error {
  border-color: transparent !important;
  box-shadow: inset 0 0 0 2px #f87171 !important;
}

.registration-form button[aria-busy="true"] {
  cursor: wait;
}

.registration-form input:focus-visible,
.registration-form button:focus-visible,
:where(a, button):focus-visible {
  outline: 2px solid #8ec5ff;
  outline-offset: 3px;
}

.registration-form .visually-hidden {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

#toast-container > .toast {
  z-index: 10080;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}