/*
 * 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;
}

/* MING LIFE cream / champagne auth palette */
:root {
  --ml-auth-green:#0c6b4d;
  --ml-auth-green-dark:#07513b;
  --ml-auth-ink:#26352f;
  --ml-auth-muted:#756f64;
  --ml-auth-border:#e8dfcf;
  --ml-auth-canvas:#fbf7ee;
  --ml-auth-surface:#fffdf8;
  --ml-auth-gold:#c7a45a;
  --ml-auth-gold-soft:#f3e7c9;
}

body .auth-page {
  background:
    radial-gradient(circle at 88% 8%,rgba(199,164,90,.14),transparent 28%),
    linear-gradient(180deg,#fffdf8 0%,#fbf7ee 100%) !important;
}

body .auth-page .card {
  border:1px solid var(--ml-auth-border) !important;
  background:var(--ml-auth-surface) !important;
  box-shadow:0 14px 34px rgba(91,70,37,.09) !important;
}

body .auth-page h1,
body .auth-page h2,
body .auth-page h3,
body .auth-page .form-label {
  color:var(--ml-auth-ink) !important;
}

body .auth-page .form-text,
body .auth-page .text-muted,
body .auth-page .form-check-label {
  color:var(--ml-auth-muted) !important;
}

body .auth-page .form-control,
body .auth-page .form-select,
body .auth-page .input-group-text {
  color:var(--ml-auth-ink) !important;
  border-color:var(--ml-auth-border) !important;
  background:var(--ml-auth-surface) !important;
}

body .auth-page .form-control:focus,
body .auth-page .form-select:focus {
  border-color:var(--ml-auth-gold) !important;
  box-shadow:0 0 0 .2rem rgba(199,164,90,.14) !important;
}

body .auth-page .btn-primary {
  color:#fff !important;
  border-color:var(--ml-auth-green) !important;
  background:var(--ml-auth-green) !important;
}

body .auth-page .btn-primary:hover,
body .auth-page .btn-primary:focus-visible {
  border-color:var(--ml-auth-green-dark) !important;
  background:var(--ml-auth-green-dark) !important;
}

body .auth-page .btn-outline-secondary,
body .auth-page .btn-outline-primary {
  color:var(--ml-auth-green-dark) !important;
  border-color:#d8bd7d !important;
  background:var(--ml-auth-surface) !important;
}

body .auth-page .btn-outline-secondary:hover,
body .auth-page .btn-outline-primary:hover {
  border-color:var(--ml-auth-gold) !important;
  background:var(--ml-auth-gold-soft) !important;
}

body .auth-page a {
  color:var(--ml-auth-green-dark);
}

body .auth-page a:hover {
  color:var(--ml-auth-green);
}

body .auth-page code {
  color:var(--ml-auth-green-dark) !important;
  background:#f8f3e8 !important;
}

body .auth-page .modal-content {
  border:1px solid var(--ml-auth-border);
  background:var(--ml-auth-surface);
}

body .auth-page .modal-header,
body .auth-page .modal-footer {
  border-color:var(--ml-auth-border);
}