/* Integration-only states. Core page appearance remains in css/site.css. */
:root {
  --form-success: #28a745;
  --form-danger: #dc3545;
  --form-warning: #ffc107;
}

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

.registration-form input.valid {
  outline: 2px solid var(--form-success);
  outline-offset: 1px;
}

.iti__country-name {
  color: black;
}

.registration-form input.invalid {
  outline: 2px solid var(--form-danger);
  outline-offset: 1px;
}

.registration-form input[type="tel"][style*="border-color"] {
  outline-color: var(--form-warning);
}

.pageloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  width: 100%;
  height: 100%;
  background: rgb(249 249 249 / 80%);
}

.pageloader::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border: 4px solid rgb(11 33 79 / 20%);
  border-top-color: #0b214f;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
  animation: integration-loader-spin 0.8s linear infinite;
}

@keyframes integration-loader-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

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

.suggestion {
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .pageloader::after {
    animation: none;
  }
}