/* TwPay v2 skin 1.34.0 — visual alignment to Design System v2 (spec Phụ lục T3 tokens).
   CSS only, loaded LAST. Does not touch the Payment Card (.twpc scopes its own tokens), barcodes, or the hero gold CTA.
   Rollback: remove the <link> to this file in index.php. */
:root {
  --v2-primary: #2563EB; --v2-primary-hover: #1D4ED8; --v2-primary-press: #1E40AF; --v2-primary-50: #EFF6FF; --v2-primary-100: #DBEAFE;
  --v2-success: #16A34A; --v2-success-ink: #15803D; --v2-success-bg: #F0FDF4;
  --v2-warn: #F59E0B; --v2-warn-ink: #B45309; --v2-warn-bg: #FFFBEB;
  --v2-danger: #DC2626; --v2-danger-ink: #B91C1C; --v2-danger-bg: #FEF2F2;
  --v2-ink: #0F172A; --v2-ink-2: #334155; --v2-muted: #64748B; --v2-line: #E2E8F0;
  --v2-r-card: 16px; --v2-r-btn: 12px; --v2-r-input: 12px;
  --v2-shadow: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.06);
  --v2-shadow-lg: 0 10px 30px rgba(15,23,42,.10);
  --v2-focus: 0 0 0 3px rgba(37,99,235,.28);
  /* map existing site tokens → v2 (status colors + radius + shadow) */
  --st-blue: var(--v2-primary); --st-blue-bg: var(--v2-primary-50);
  --st-green: var(--v2-success-ink); --st-green-bg: var(--v2-success-bg);
  --st-amber: var(--v2-warn-ink); --st-amber-bg: var(--v2-warn-bg);
  --st-red: var(--v2-danger-ink); --st-red-bg: var(--v2-danger-bg);
  --r-sm: 12px; --r-md: 12px; --r-lg: 16px; --radius: 16px;
  --shadow: var(--v2-shadow); --shadow-lg: var(--v2-shadow-lg);
}
:root:not([data-theme="dark"]) { --line: var(--v2-line); --muted: var(--v2-muted); --ink: var(--v2-ink); --ink-strong: var(--v2-ink); }

/* cards */
.acct-card, .gate-card, .hp-ro, .hp-recent-empty, #home.hp .hp-pr, .deal-card, .voucher-list > *, .hx-feat > *, .product-card, .rx-voucher-box {
  border-radius: var(--v2-r-card);
}
.acct-card, .gate-card, .hp-ro, .product-card { box-shadow: var(--v2-shadow); }

/* inputs + focus ring */
.auth-form-field, .tw-shell input[type="text"], .tw-shell input[type="email"], .tw-shell input[type="tel"], .tw-shell input[type="number"], .tw-shell input[type="password"], .tw-shell select:not(.language-select), .tw-shell textarea {
  border-radius: var(--v2-r-input);
}
.tw-shell input:focus-visible, .tw-shell select:focus-visible, .tw-shell textarea:focus-visible, .auth-form-field:focus {
  outline: none; border-color: var(--v2-primary); box-shadow: var(--v2-focus);
}
.tw-shell button:focus-visible, .tw-shell a:focus-visible { outline: 2px solid var(--v2-primary); outline-offset: 2px; }

/* buttons — primary filled / secondary outline (hero gold CTA + Payment Card untouched) */
#home.hp .hp-recent-btn.is-primary, #home.hp .hp-rate .home-rate-cta, #home.hp .hp-recent-empty .hp-recent-btn, #home.hp .hp-pr.b .hp-pr-c, .home-rate-cta, .gate-card button, .auth-modal button[type="submit"], .rx-voucher-box button {
  background: var(--v2-primary); color: #fff; border-color: transparent;
}
#home.hp .hp-recent-btn.is-primary:hover, #home.hp .hp-rate .home-rate-cta:hover, #home.hp .hp-recent-empty .hp-recent-btn:hover, #home.hp .hp-pr.b .hp-pr-c:hover, .gate-card button:hover, .auth-modal button[type="submit"]:hover { background: var(--v2-primary-hover); }
#home.hp .hp-recent-btn.is-primary:active, #home.hp .hp-rate .home-rate-cta:active, #home.hp .hp-pr.b .hp-pr-c:active, .gate-card button:active, .auth-modal button[type="submit"]:active { background: var(--v2-primary-press); }
.hp-recent-btn:not(.is-primary), #home.hp .hp-pall, .hp-recent-all, .acct-link {
  color: var(--v2-primary); border-color: var(--v2-primary-100);
}
.hp-recent-btn, .home-rate-cta, #home.hp .hp-pall, .gate-card button, .auth-modal button[type="submit"] { min-height: 44px; border-radius: var(--v2-r-btn); font-weight: 700; }
.filter-chip { border-radius: 9999px; }
.filter-chip.active, .filter-chip[aria-pressed="true"] { background: var(--v2-primary); border-color: var(--v2-primary); color: #fff; }

/* typography rhythm */
.tw-shell h2, .hx-sec > h2, .hp-recent-hd h2 { font-weight: 800; letter-spacing: -.01em; }
.acct-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--v2-muted); }

/* status tones (Recent Orders) */
.hp-ro.tone-need .hp-ro-st, .hp-ro.tone-wait .hp-ro-st { color: var(--v2-warn-ink); }
.hp-ro.tone-go .hp-ro-st { color: var(--v2-primary); }
.hp-ro.tone-done .hp-ro-st { color: var(--v2-success-ink); }
.hp-ro.tone-off .hp-ro-st { color: var(--v2-danger-ink); }

/* bottom nav active */
.bottom-nav button.active, .bottom-nav [aria-current="page"] { color: var(--v2-primary); }

/* keep the Payment Card + barcodes exactly as designed */
.twpc svg, .twpc canvas, .twpc img { filter: none; }

/* 1.34.1: one primary button style everywhere (exchange/checkout steps were still navy) */
.tw-shell .btn-primary, .tw-shell .bg-\[\#0B3A6E\] {
  background: var(--v2-primary); background-image: none; color: #fff; border-radius: var(--v2-r-btn); min-height: 44px; box-shadow: 0 6px 16px -8px rgba(37,99,235,.55);
}
.tw-shell .btn-primary:hover, .tw-shell .bg-\[\#0B3A6E\]:hover { background: var(--v2-primary-hover); }
.tw-shell .btn-primary:active, .tw-shell .bg-\[\#0B3A6E\]:active { background: var(--v2-primary-press); }
.tw-shell .btn-primary:disabled, .tw-shell .bg-\[\#0B3A6E\]:disabled { background: #94A3B8; box-shadow: none; }

/* 1.34.1: dark mode — section titles were navy on dark */
:root[data-theme="dark"] #home.hp h2, :root[data-theme="dark"] .hp-recent-hd h2, :root[data-theme="dark"] .tw-shell .screen-title { color: #E2E8F0; }
:root[data-theme="dark"] .hp-recent-all, :root[data-theme="dark"] .acct-link { color: #93C5FD; }
.tw-shell .app-screen:not(#home) .btn-primary, .tw-shell #auth-modal .btn-primary, .tw-shell .gate-card .btn-primary, .tw-shell .home-below .btn-primary { background: var(--v2-primary); background-image: none; box-shadow: 0 6px 16px -8px rgba(37,99,235,.55); }
.tw-shell .app-screen:not(#home) .btn-primary:hover, .tw-shell #auth-modal .btn-primary:hover { background: var(--v2-primary-hover); }
.tw-shell .btn-auth-submit { background: var(--v2-primary); background-image: none; border-radius: var(--v2-r-btn); box-shadow: 0 6px 16px -8px rgba(37,99,235,.55); }
.tw-shell .btn-auth-submit:hover { background: var(--v2-primary-hover); }