/* Register page styles */

.register__form {
  max-width: 480px;
  margin: 0 auto;
}

.register__field {
  margin-bottom: var(--space-lg);
}

.register__field .input {
  font-size: var(--font-display-sm);
  font-weight: 700;
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
}

.register__field .input::placeholder {
  font-weight: 400;
  font-size: var(--font-body-lg);
}

.register__field .input--error {
  border-color: rgba(186, 26, 26, 0.3);
  background: rgba(255, 218, 214, 0.3);
}

.register__error {
  color: var(--color-error);
  font-size: var(--font-label-md);
  margin-top: var(--space-xs);
  display: none;
}

.register__error--visible {
  display: block;
}

.register__submit {
  width: 100%;
  margin-top: var(--space-xl);
}

.register__confirmation {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.register__confirmation__category {
  font-size: var(--font-headline-sm);
  font-weight: 700;
  margin: var(--space-md) 0;
}

.register__confirmation__values {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin: var(--space-lg) 0;
}

.register__confirmation__value {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.register__confirmation__number {
  font-size: var(--font-display-sm);
  font-weight: 800;
}

.register__confirmation__label {
  font-size: var(--font-label-md);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
}

.register__confirmation__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
}