/**
 * auth.css — Redesign form đăng nhập / đăng ký của Voxel (widget ts-login) + nút Appress.
 * Target class THẬT trong DOM: .ts-auth .ts-login .ts-form-group .ts-input-icon
 * .ts-btn-1/.ts-btn-2 .ts-google-btn .view-password .or-group ...
 */

:root {
  --vxma-brand: #c0392b;
  --vxma-brand-strong: #a5291d;
  --vxma-brand-tint: rgba(192, 57, 43, .10);
  --vxma-brand-ring: rgba(192, 57, 43, .26);
  --vxma-surface: #ffffff;
  --vxma-field: #f4f2f1;
  --vxma-line: #e4e0dd;
  --vxma-line-strong: #d8d3cf;
  --vxma-ink: #1c1917;
  --vxma-ink-soft: #6f6763;
  --vxma-ink-faint: #9c948f;
  --vxma-radius: 15px;
  --vxma-ease: cubic-bezier(.32,.72,.28,1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --vxma-brand: #e8564a; --vxma-brand-strong: #c0392b;
    --vxma-brand-tint: rgba(232,86,74,.14); --vxma-brand-ring: rgba(232,86,74,.30);
    --vxma-surface: #1a1716; --vxma-field: #221e1c; --vxma-line: #2c2725; --vxma-line-strong: #3a3431;
    --vxma-ink: #f4f0ee; --vxma-ink-soft: #a79f9a; --vxma-ink-faint: #756d68;
  }
}

/* ---------- card ---------- */
.ts-auth .ts-form.ts-login,
.ts-auth form {
  max-width: 420px;
}

/* ---------- head / title ---------- */
.ts-login-head .vx-step-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--vxma-ink);
}

/* ---------- segmented tabs (login/register switch) ----------
   Bắt các kiểu markup tab phổ biến: [role=tablist], .ts-tabs, .auth-tabs,
   hoặc nhóm nút login/register do template tuỳ biến render. */
[role="tablist"].auth-tabs,
.ts-auth .auth-tabs,
.ts-auth .ts-login-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--vxma-field);
  border: 1px solid var(--vxma-line);
  border-radius: 999px;
  padding: 4px;
  margin: 0 0 20px;
}
.ts-auth .auth-tabs button,
.ts-auth .ts-login-tabs a {
  border: 0; background: transparent; cursor: pointer;
  padding: 11px 0; text-align: center; text-decoration: none;
  font-size: 14.5px; font-weight: 600; color: var(--vxma-ink-faint);
  border-radius: 999px; transition: color .25s var(--vxma-ease), background .25s var(--vxma-ease);
}
.ts-auth .auth-tabs button[aria-selected="true"],
.ts-auth .auth-tabs button.active,
.ts-auth .ts-login-tabs a.active {
  color: var(--vxma-brand);
  background: var(--vxma-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 10px -4px rgba(0,0,0,.18);
}

/* ---------- input with leading icon ---------- */
.ts-auth .ts-input-icon.flexify,
.ts-auth .ts-input-icon {
  display: flex; align-items: center; gap: 10px;
  background: var(--vxma-field);
  border: 1.5px solid var(--vxma-line);
  border-radius: var(--vxma-radius);
  padding: 0 14px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ts-auth .ts-input-icon.flexify:focus-within,
.ts-auth .ts-input-icon:focus-within {
  background: var(--vxma-surface);
  border-color: var(--vxma-brand);
  box-shadow: 0 0 0 4px var(--vxma-brand-ring);
}
.ts-auth .ts-input-icon > svg {
  width: 19px; height: 19px; flex: none;
  color: var(--vxma-ink-faint); fill: currentColor; transition: color .2s;
}
.ts-auth .ts-input-icon:focus-within > svg { color: var(--vxma-brand); }
.ts-auth .ts-input-icon input.ts-filter,
.ts-auth .ts-input-icon input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: 0;
  font-size: 15px; color: var(--vxma-ink); padding: 14px 0;
}
.ts-auth .ts-input-icon input::placeholder { color: var(--vxma-ink-faint); }

/* show / hide password */
.ts-auth .view-password {
  flex: none; display: grid; place-items: center; cursor: pointer;
  width: 30px; height: 30px; border-radius: 9px; color: var(--vxma-ink-faint);
  transition: color .2s, background .2s;
}
.ts-auth .view-password:hover { color: var(--vxma-ink-soft); background: var(--vxma-line); }
.ts-auth .view-password.active { color: var(--vxma-brand); }
.ts-auth .view-password svg { width: 19px; height: 19px; }

/* ---------- buttons ---------- */
.ts-auth .ts-btn {
  border-radius: var(--vxma-radius);
  font-weight: 650;
  transition: transform .12s var(--vxma-ease), box-shadow .2s, background .2s, border-color .2s;
}
.ts-auth .ts-btn:active { transform: scale(.985); }

/* primary (login / submit) */
.ts-auth .ts-btn.ts-btn-2 {
  color: #fff;
  background: linear-gradient(170deg, var(--vxma-brand), var(--vxma-brand-strong));
  border: 0;
  box-shadow: 0 8px 20px -8px var(--vxma-brand-ring);
}
.ts-auth .ts-btn.ts-btn-2:hover { box-shadow: 0 10px 26px -8px var(--vxma-brand-ring); }
.ts-auth .ts-btn.ts-btn-2 svg { fill: currentColor; }

/* secondary (sign up / recover) */
.ts-auth .ts-btn.ts-btn-1 {
  background: var(--vxma-surface);
  border: 1.5px solid var(--vxma-line);
  color: var(--vxma-ink);
}
.ts-auth .ts-btn.ts-btn-1:hover { border-color: var(--vxma-line-strong); }

/* google / social */
.ts-auth .ts-btn.ts-google-btn,
.ts-auth .ts-social-connect .ts-btn {
  background: var(--vxma-surface);
  border: 1.5px solid var(--vxma-line);
  color: var(--vxma-ink);
}
.ts-auth .ts-btn.ts-google-btn:hover { border-color: var(--vxma-line-strong); }

/* Appress apple button -> style pill đen */
.appress-btn-apple-login {
  border-radius: var(--vxma-radius) !important;
}

/* ---------- divider ---------- */
.ts-auth .or-group { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; }
.ts-auth .or-line { flex: 1; height: 1px; background: var(--vxma-line); }
.ts-auth .or-text {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--vxma-ink-faint); white-space: nowrap;
}

/* ---------- misc ---------- */
.ts-auth .field-info { color: var(--vxma-ink-soft); font-size: 13px; }
.ts-auth .field-info a { color: var(--vxma-brand); font-weight: 600; text-decoration: none; }
.ts-auth .field-info a:hover { text-decoration: underline; }

/* ---------- Sign in with Apple (dùng chung base .ts-btn của Voxel) ----------
   Wording/khối giống nút Google login; chỉ đổi màu: đen nền trắng chữ (sáng),
   trắng nền đen chữ (tối) theo hướng dẫn Apple. */
.ts-btn.ts-apple-btn {
  background: #000 !important;
  color: #fff !important;
  border: 1.5px solid #000 !important;
}
.ts-btn.ts-apple-btn svg { fill: currentColor; }
.ts-btn.ts-apple-btn:hover { background: #111 !important; }
@media (prefers-color-scheme: dark) {
  .ts-btn.ts-apple-btn {
    background: #fff !important; color: #000 !important; border-color: #fff !important;
  }
  .ts-btn.ts-apple-btn:hover { background: #f0f0f0 !important; }
}

/* ---------- Safe area: không để status bar / notch che nội dung ----------
   Chỉ áp khi mở trong app (html.vxma-in-app do app-bridge.js gắn).
   iOS: status bar overlay -> pad top theo safe-area. Android (overlays=false)
   env top = 0 nên vô hại. Cũng chừa lề dưới cho home indicator. */
html.vxma-in-app body {
  padding-top: env(safe-area-inset-top);
  box-sizing: border-box;
}
/* nếu theme có thanh top cố định, đẩy nó xuống dưới status bar */
html.vxma-in-app .ts-navbar,
html.vxma-in-app header[class*="sticky"],
html.vxma-in-app .elementor-sticky--active {
  padding-top: env(safe-area-inset-top);
}

@media (prefers-reduced-motion: reduce) {
  .ts-auth * { transition: none !important; }
}