/* ── AiO Auth Pages (login / signup / forget) ─────────────────────────── */
* { font-family: 'Nunito','Noto Sans Thai',sans-serif; }
.gradient-brand { background: linear-gradient(135deg,#542485 0%,#5F2993 50%,#8B47B5 100%); }
.circle-deco { position:absolute; border-radius:50%; background:rgba(255,255,255,0.06); }
input:focus { outline:none; }

.inp {
  width:100%; padding:0.625rem 1rem;
  border:1.5px solid #e2e8f0; border-radius:0.625rem;
  font-size:0.9375rem; transition:border-color .2s, box-shadow .2s;
  background:#fff; color:#1e293b;
}
.inp:focus { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,0.12); }
.inp.error  { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,0.10); }
.inp-icon-l { padding-left:2.6rem; }
.inp-icon-r { padding-right:2.6rem; }

.btn-primary {
  width:100%; padding:0.75rem 1.5rem;
  background:#2563eb; color:#fff;
  font-weight:700; font-size:1rem; border-radius:0.625rem;
  border:none; cursor:pointer;
  transition:background .2s, transform .1s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(37,99,235,0.30);
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
}
.btn-primary:hover  { background:#1d4ed8; }
.btn-primary:active { transform:scale(0.98); }
.btn-primary:disabled { background:#93c5fd; cursor:not-allowed; box-shadow:none; }

.btn-violet {
  width:100%; padding:0.75rem 1.5rem;
  background:#7c3aed; color:#fff;
  font-weight:700; font-size:1rem; border-radius:0.625rem;
  border:none; cursor:pointer;
  transition:background .2s, transform .1s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(124,58,237,0.30);
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
}
.btn-violet:hover   { background:#6d28d9; }
.btn-violet:active  { transform:scale(0.98); }
.btn-violet:disabled { background:#c4b5fd; cursor:not-allowed; box-shadow:none; }

.btn-outline {
  width:100%; padding:0.72rem 1.5rem;
  background:transparent; color:#64748b;
  font-weight:700; font-size:0.9375rem; border-radius:0.625rem;
  border:1.5px solid #e2e8f0; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
}
.btn-outline:hover { border-color:#7c3aed; color:#7c3aed; background:#faf5ff; }

.btn-line {
  width:100%; padding:0.72rem 1.5rem;
  background:#06C755; color:#fff;
  font-weight:700; font-size:0.9375rem; border-radius:0.625rem;
  border:none; cursor:pointer;
  transition:background .2s; box-shadow:0 4px 14px rgba(6,199,85,0.28);
  display:flex; align-items:center; justify-content:center; gap:0.625rem;
}
.btn-line:hover { background:#05b84c; }

.str-bar { height:4px; border-radius:9999px; flex:1; transition:background .25s; background:#e2e8f0; }

.panel { display:none; }
.panel.active { display:block; animation:slideUp 0.32s ease-out; }

.step-circle {
  width:2rem; height:2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.8125rem; font-weight:800; transition:all .3s;
  border:2px solid #e2e8f0; background:#f8fafc; color:#94a3b8; flex-shrink:0;
}
.step-circle.active { border-color:#7c3aed; background:#7c3aed; color:#fff; box-shadow:0 0 0 4px rgba(124,58,237,0.12); }
.step-circle.done   { border-color:#16a34a; background:#16a34a; color:#fff; }

/* ── SweetAlert2 Custom — Premium & Dark Mode ────────────────────────────────── */
.swal2-popup {
  border-radius: 1.5rem !important;
  font-family: 'Nunito', 'Noto Sans Thai', sans-serif !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  padding: 2rem 1.5rem !important;
}
.swal2-title {
  font-weight: 800 !important;
  color: #1e293b !important;
  font-size: 1.5rem !important;
}
.swal2-html-container {
  font-weight: 600 !important;
  color: #64748b !important;
  line-height: 1.6 !important;
}
.swal2-confirm {
  background: #7c3aed !important; /* Use violet for auth pages */
  border-radius: 1rem !important;
  font-weight: 800 !important;
  padding: 0.75rem 2.5rem !important;
  font-size: 0.875rem !important;
  box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3) !important;
}
.swal2-cancel {
  border-radius: 1rem !important;
  font-weight: 800 !important;
  padding: 0.75rem 2.5rem !important;
  font-size: 0.875rem !important;
}

/* Dark mode overrides for SweetAlert2 */
.dark .swal2-popup {
  background: #111827 !important;
  border: 1px solid #374151 !important;
  color: #f9fafb !important;
}
.dark .swal2-title { color: #f9fafb !important; }
.dark .swal2-html-container { color: #9ca3af !important; }
.dark .swal2-confirm { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important; }
.dark .swal2-actions { border-top-color: #374151 !important; }