/*
 * Trang Đăng Ký (dang-ky.php) - Styles
 * Scope styles to .auth-page to avoid leaking to other pages
 */

.auth-page {
  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}

/* Card styling */
.auth-page .card {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.auth-page .card-body {
  padding: 2rem 2rem;
}

/* Title */
.auth-page h2 {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #0f172a; /* slate-900 */
}

/* Alerts */
.auth-page #register-alert {
  margin-bottom: 1rem;
}

.auth-page .alert {
  border: 1px solid rgba(13, 110, 253, 0.15);
  border-radius: 12px;
}

.auth-page .alert .fa-check-circle {
  font-size: 1.25rem;
}

/* Code snippet (for username display) */
.auth-page code {
  background: #f1f5f9; /* slate-100 */
  color: #0f172a;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.95em;
}

/* Labels */
.auth-page .form-label {
  font-weight: 500;
  margin-bottom: 6px;
  color: #0f172a;
}

/* Inputs */
.auth-page .form-control {
  height: 48px;
  border-radius: 10px;
  border-color: #e7eaf0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-page .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Helper text */
.auth-page .form-text {
  color: #64748b; /* slate-500 */
  margin-top: 6px;
}

/* Checkbox row */
.auth-page .form-check-input {
  width: 1.1rem;
  height: 1.1rem;
}

.auth-page .form-check-label {
  color: #232b3b;
}

/* Submit button */
.auth-page #register-submit.btn {
  height: 48px;
  border-radius: 10px;
  font-weight: 600;
}

/* Horizontal rule spacing */
.auth-page hr.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Make the layout tighter on small screens */
@media (max-width: 575.98px) {
  .auth-page .card-body {
    padding: 1.25rem 1rem;
  }
  .auth-page h2 {
    font-size: 1.35rem;
    margin-bottom: 1rem !important;
  }
}

/* When form is hidden after success, make the success block breathe */
.auth-page .card-body:has(#register-alert:not(.d-none)) {
  padding-top: 1.25rem;
}