/* LR01 — Popup "Đăng nhập hoặc đăng ký" trên cùng một form.
   Dựng trên class theme vne-v3 đã có (.vn-dialog, .vn-field, .vn-inputwrap, .vn-btn, .vn-check) nên file này chỉ chứa phần RIÊNG của popup
   (tiền tố .ua-, kiểu BEM nhẹ). Không dùng inline style, không !important, cỡ chữ theo rem.
   Dùng biến của theme: --brand-*, --text-*, --border-*, --error-*, --success-*, --radius-*, --font-* (tokens/colors.css). */

/* ── Lớp phủ + khung ───────────────────────────────────────────────────── */

/* .vn-dialog__overlay đặt display:flex nên thuộc tính hidden của HTML bị đè — khai lại để ẩn/hiện bằng hidden. */
.ua-overlay[hidden] { display: none; }

html.ua-scroll-lock { overflow: hidden; }

.ua-dialog {
  --dialog-w: 27.5rem;
  position: relative;
  max-height: calc(100vh - 2rem);
}

@supports (height: 100dvh) {
  .ua-dialog { max-height: calc(100dvh - 2rem); }
}

.ua-dialog:focus { outline: none; }

.ua-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2rem 1.75rem 1.5rem;
}

.ua-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.ua-close:hover { background: var(--surface-scrim); color: var(--text-primary); }
.ua-close:focus-visible { outline: none; box-shadow: var(--ring-brand); }

/* ── Đầu trang + các bước ───────────────────────────────────────────────── */

.ua-brand { display: flex; justify-content: center; margin-bottom: 1rem; }
.ua-brand__logo { display: block; width: auto; height: 2.75rem; }

.ua-step[hidden] { display: none; }

.ua-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  text-align: center;
  color: var(--text-primary);
}

.ua-sub {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  text-align: center;
  color: var(--text-secondary);
}

/* inline-block: email/số điện thoại xuống dòng nguyên khối, chỉ bẻ giữa chừng khi dài hơn cả khung. */
.ua-identifier { display: inline-block; max-width: 100%; color: var(--text-primary); overflow-wrap: anywhere; }

.ua-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.ua-back:hover { color: var(--text-primary); }
.ua-back:focus-visible { outline: none; box-shadow: var(--ring-brand); border-radius: var(--radius-xs); }

/* ── Ô nhập ─────────────────────────────────────────────────────────────── */

.ua-field { margin-bottom: 1rem; }

.ua-icon { flex: none; color: var(--text-tertiary); }

.ua-eye {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.ua-eye:hover { color: var(--text-primary); }
.ua-eye:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.ua-eye svg[hidden] { display: none; }

.ua-field__error {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-error);
}

/* Thông báo lỗi đã nêu lại quy tắc nên ẩn dòng gợi ý đi, tránh hai dòng đỏ chồng nhau. */
.ua-field--error .vn-field__help { display: none; }
.ua-field--error .vn-inputwrap { border-color: var(--error-600); }
.ua-field--error .vn-inputwrap:focus-within { box-shadow: var(--ring-error); }
.ua-field--error .ua-otp { border-color: var(--error-600); }
.ua-field--error .ua-otp:focus { border-color: var(--error-600); box-shadow: var(--ring-error); }

.ua-error {
  margin: 0 0 1rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--error-100);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--error-600);
}

.ua-consent { margin: 1rem 0; }
.ua-consent__text { font-size: 0.8125rem; line-height: 1.55; }
.ua-field--error .vn-check__box { border-color: var(--error-600); }

/* ── Nút + loading ──────────────────────────────────────────────────────── */

.ua-submit { margin-top: 0.25rem; }

/* Nút đang bận: vẫn giữ màu thương hiệu (không mờ như disabled) để người dùng thấy rõ đang xử lý. */
.ua-submit[aria-busy="true"] { opacity: 1; cursor: progress; pointer-events: none; }

.ua-spinner {
  display: inline-block;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 0.1875rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ua-spin 0.7s linear infinite;
}

.ua-spinner[hidden] { display: none; }

.ua-spinner--brand { width: 1.75rem; height: 1.75rem; margin-top: 0.75rem; color: var(--brand-600); }

.ua-spinner--lg {
  width: 2.75rem;
  height: 2.75rem;
  border: 0.25rem solid var(--brand-100);
  border-top-color: var(--brand-600);
}

@keyframes ua-spin { to { transform: rotate(360deg); } }

/* Loading TOÀN TRANG: phủ kín màn hình (cả popup, kể cả nút đóng) và chặn mọi thao tác chuột. Bàn phím do unified-auth.js chặn.
   Lớp chặn có hiệu lực NGAY khi hiện (opacity không ảnh hưởng việc bắt sự kiện chuột); hình chỉ hiện dần sau 0,2s
   để thao tác nhanh không làm nháy cả màn hình. */
.ua-loading {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: ua-loading-in 0.18s var(--ease-standard) 0.2s both;
}

.ua-loading[hidden] { display: none; }

/* Đã thành công, đang chờ chuyển trang: vẫn chặn thao tác nhưng KHÔNG che thông báo thành công của popup. */
.ua-loading--quiet {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

.ua-loading--quiet .ua-loading__card { display: none; }

.ua-loading__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: min(100%, 20rem);
  padding: 1.75rem 1.5rem;
  border-radius: 1rem;
  background: var(--surface-card);
  box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.28);
  text-align: center;
}

.ua-loading__text { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.ua-loading__hint { margin: -0.375rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-secondary); }
.ua-loading__hint[hidden], .ua-loading__cancel[hidden] { display: none; }

.ua-loading__cancel {
  padding: 0.375rem 0.75rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.ua-loading__cancel:hover { color: var(--text-link-hover); }
.ua-loading__cancel:focus-visible { outline: none; box-shadow: var(--ring-brand); }

@keyframes ua-loading-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ua-spinner { animation-duration: 1.6s; }
  .ua-loading { animation: ua-loading-in 0.01s linear 0.2s both; }
}

/* ── Liên kết dạng chữ ──────────────────────────────────────────────────── */

.ua-link { font-weight: 600; text-decoration: none; color: var(--text-link); }
.ua-link:hover { color: var(--text-link-hover); text-decoration: underline; }

.ua-inline-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.ua-inline-link:hover { color: var(--text-link-hover); }
.ua-inline-link:focus-visible { outline: none; box-shadow: var(--ring-brand); border-radius: var(--radius-xs); }
.ua-inline-link[disabled] { color: var(--text-disabled); text-decoration: none; cursor: not-allowed; }

.ua-aux { margin: 1rem 0 0; font-size: 0.875rem; text-align: center; }

/* ── Đăng nhập Google / Facebook ────────────────────────────────────────── */

.ua-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.ua-or::before,
.ua-or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-subtle);
}

.ua-social { display: grid; gap: 0.625rem; }
.ua-social__btn { gap: 0.625rem; }
.ua-social__icon { display: inline-flex; flex: none; }

.ua-note {
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  color: var(--text-tertiary);
}

/* ── OTP ────────────────────────────────────────────────────────────────── */

.ua-otp {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 3.5rem;
  /* Chừa bên trái đúng bằng letter-spacing để dãy số nằm chính giữa. */
  padding: 0 0 0 0.6em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--surface-card);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.6em;
  text-align: center;
  color: var(--text-primary);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.ua-otp::placeholder { color: var(--neutral-300); }
.ua-otp:hover { border-color: var(--neutral-500); }
.ua-otp:focus { border-color: var(--border-focus); box-shadow: var(--ring-brand); }

.ua-resend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ── Cloudflare Turnstile (khung cố định 300×65, thu nhỏ khi màn hình hẹp) ─ */

.ua-captcha { display: flex; flex-direction: column; align-items: center; margin: 0 0 1rem; }

.ua-captcha__box {
  width: calc(300px * var(--ua-captcha-scale, 1));
  height: calc(65px * var(--ua-captcha-scale, 1));
}

.ua-captcha__widget {
  width: 300px;
  height: 65px;
  transform: scale(var(--ua-captcha-scale, 1));
  transform-origin: 0 0;
}

.ua-captcha__status { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--text-tertiary); }
.ua-field--error .ua-captcha__box { outline: 1px solid var(--error-600); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ── Thành công ─────────────────────────────────────────────────────────── */

.ua-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0 0.5rem;
  text-align: center;
}

.ua-success[hidden] { display: none; }

.ua-success__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--success-100);
  color: var(--success-600);
}

.ua-success .ua-sub { margin-bottom: 0; }

.ua-success__continue { margin-top: 1.25rem; min-width: 12rem; }
.ua-success__continue[hidden] { display: none; }

/* Nút là thẻ <a> nên bị `.vne-v3 a { color: inherit }` (themes/vne-v3/base.css, specificity cao hơn `.vn-btn`) làm mất màu chữ trên
   trang không có `body.home-inter`. Trả lại màu theo biến của biến thể nút, cùng cách membership.css đã xử lý. */
.ua-success a.ua-success__continue { color: var(--_fg); }

/* ── Chân popup ─────────────────────────────────────────────────────────── */

.ua-support {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.8125rem;
  text-align: center;
  color: var(--text-tertiary);
}

.ua-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Màn hình hẹp ───────────────────────────────────────────────────────── */

@media (max-width: 30rem) {
  .ua-overlay { padding: 0.75rem; }
  .ua-body { padding: 1.5rem 1.125rem 1.125rem; }
  .ua-title { font-size: 1.25rem; }
  .ua-sub { margin-bottom: 1.25rem; font-size: 0.875rem; }
  .ua-otp { font-size: 1.5rem; }
}