/* 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-inputwrap, .vn-btn) 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);
  border-radius: 2rem;   /* y như modal đăng nhập cũ (rounded-[32px]) */
}

@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: 3.5rem 1.5rem 1.5rem;   /* 3,5rem = chỗ cho nút đóng, như modal cũ */
  scrollbar-width: thin;
}

.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: 3rem; }

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

.ua-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--weight-extra);
  line-height: 1.5;
  text-align: center;
  color: var(--text-primary);
}

.ua-title + .ua-sub { margin-top: -0.875rem; }   /* tiêu đề có thêm dòng mô tả (bước nhập mã): kéo sát lại như trước */

.ua-sub {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  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; }

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

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

/* Y như ô nhập của modal cũ: cao 44px (42 + viền), bo 16px, chữ 14px, chỉ có placeholder (nhãn là .ua-sr-only). */
.ua-dialog .vn-inputwrap { padding: 0 0.75rem; border-radius: 1rem; }
.ua-dialog .vn-input { font-size: 0.875rem; }
.ua-dialog .vn-input--md { height: 2.625rem; }

.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);
}

.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 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--error-100);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--error-600);
}

/* ── Ghi nhớ + Quên mật khẩu? (dưới nút, như modal cũ) ──────────────────── */

.ua-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ua-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.ua-remember__box { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand-600); cursor: pointer; }
.ua-remember__box:focus-visible { outline: none; box-shadow: var(--ring-brand); border-radius: var(--radius-xs); }

/* Thẻ <a> bị `.vne-v3 a { color: inherit }` (themes/vne-v3/base.css) đè màu → nâng độ ưu tiên, cùng cách .ua-success__continue. */
.ua-dialog a.ua-forgot { color: var(--brand-700); text-decoration: none; }
.ua-dialog a.ua-forgot:hover { text-decoration: underline; }
.ua-dialog a.ua-forgot:focus-visible { outline: none; box-shadow: var(--ring-brand); border-radius: var(--radius-xs); }

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

.ua-dialog .ua-submit {
  height: 2.75rem;
  margin: 0 0 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
}

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


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

/* Chân thẻ y như modal cũ: đường kẻ sát mép thẻ (bù lại padding của .ua-body), hai nút Google / Facebook ở giữa. */
.ua-social-footer {
  margin: 1.25rem -1.5rem -1.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

.ua-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.ua-dialog .ua-social .ua-social__btn { --_fg: var(--text-secondary); width: auto; height: 2.25rem; gap: 0.5rem; padding: 0 1rem; border-radius: 1rem; font-size: 0.8125rem; font-weight: var(--weight-semibold); }
.ua-social__icon { display: inline-flex; flex: none; }

/* ── Cloudflare Turnstile (dưới Google / Facebook) ──────────────────────── */

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

/* Widget luôn 300×65: --ua-captcha-scale (JS đặt) thu nhỏ cả khung lẫn widget khi chỗ trống hẹp hơn 300px. */
.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); }

/* ── 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: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ── 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: 0.75rem 0 0;
  padding-top: 0.625rem;
  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: 3rem 1rem 1rem; }
  .ua-social-footer { margin: 1.25rem -1rem -1rem; padding: 0.875rem 1rem; }
  .ua-sub { margin-bottom: 1.25rem; font-size: 0.875rem; }
  .ua-otp { font-size: 1.5rem; }
}

/* ── Màn hình thấp ──────────────────────────────────────────────────────── */

/* Điện thoại nhỏ / cửa sổ trình duyệt thấp: nén thêm một nấc để bước nhập vẫn vừa khung, không bật thanh cuộn. */
@media (max-height: 40rem) {
  .ua-body { padding-top: 2.75rem; }
  .ua-brand { margin-bottom: 0.5rem; }
  .ua-brand__logo { height: 2rem; }
  .ua-title { margin-bottom: 0.75rem; }
  .ua-sub { margin-bottom: 0.75rem; }
  .ua-field { margin-bottom: 0.5rem; }
  .ua-dialog .vn-input--md { height: 2.5rem; }
  .ua-dialog .ua-submit { height: 2.5rem; margin-bottom: 0.5rem; }
  .ua-social-footer { margin-top: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .ua-captcha { margin-top: 0.5rem; }
  .ua-support { margin-top: 0.5rem; padding-top: 0.5rem; }
}