/* ============================================
   REGISTRATION PAGE – comfytee
   Extends auth.css
   ============================================ */

/* First + Last name in one row */
.auth-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.auth-form-row .auth-field {
  margin-bottom: 1.25rem;
}

/* Phone: unified control styles live in auth.css */

.auth-field-terms {
  margin-bottom: 1rem;
}

.auth-checkbox-terms .auth-checkbox-text {
  display: inline;
}

.auth-terms-link {
  color: var(--color-accent-primary);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}

.auth-terms-link:hover {
  opacity: 0.9;
  text-decoration: underline;
}

/* Submit button: position for in-button loader */
.registration-submit-btn {
  position: relative;
}

.registration-submit-btn.loading {
  pointer-events: none;
  opacity: 0.95;
}

.registration-submit-btn.loading .auth-btn-text {
  visibility: hidden;
}

.registration-submit-btn.loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -9px;
  margin-top: -9px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-black);
  border-top-color: transparent;
  border-radius: 50%;
  animation: regSpin 0.6s linear infinite;
}

@keyframes regSpin {
  to {
    transform: rotate(360deg);
  }
}

.registration-submit-btn.success {
  background: var(--color-accent-primary);
  color: var(--color-black);
}

/* Completion screen (if used by registration.js) */
.completion-screen {
  text-align: center;
  padding: 1rem 0;
  animation: authFadeIn 0.5s ease-out;
}

.completion-icon {
  margin-bottom: 1rem;
}

.completion-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.completion-description {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

/* Validation */
.input-field.valid {
  border-color: var(--color-accent-primary);
}

.input-field.invalid {
  border-color: var(--color-accent-secondary);
  animation: regShake 0.5s;
}

.auth-phone-unified:has(.auth-phone-national.valid) {
  border-color: var(--color-accent-primary);
}

.auth-phone-unified:has(.auth-phone-national.invalid) {
  border-color: var(--color-accent-secondary);
  animation: regShake 0.5s;
}

@keyframes regShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

/* PC: compact form row */
@media (min-width: 769px) {
  .auth-form-row {
    gap: 0.75rem;
    margin-bottom: 0;
  }

  .auth-form-row .auth-field {
    margin-bottom: 0.875rem;
  }

  .auth-field-terms {
    margin-bottom: 0.75rem;
  }
}

/* Mobile: keep name row */
@media (max-width: 768px) {
  .auth-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .auth-form-row .auth-field {
    margin-bottom: 1rem;
  }
}