/*
 * WeCoMed — sub-page styles (privacy, terms, support, delete-account).
 *
 * Layered on top of site.css: every colour, radius, shadow and font here comes
 * from the design tokens the landing page already defines (:root in site.css),
 * so the legal pages read as the same product rather than a bolted-on document
 * dump. Nothing in this file redefines a token.
 */

/* ==========================================================================
   Shared additions to the cloned landing page
   ========================================================================== */

/* Store reviewers must be able to reach the policy pages from the home page. */
.footer-legal-links {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
}

.footer-legal-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.25s ease;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--primary);
}

.footer-legal-links + .copyright {
  margin-top: 26px;
}

/* The landing page inlines the logo as an SVG symbol; sub-pages reference the
   standalone file with <img>, which needs its own sizing rule. */
.brand-logo img {
  width: auto;
  height: 100%;
  display: block;
}

/* ==========================================================================
   Page shell
   ========================================================================== */

.legal-body {
  /* The header is fixed; reserve room so the title never starts underneath it.
     --header-h is published by lang-switch.js from the header's measured height,
     which is the only value that stays correct as the nav reflows. The fallback
     matches the desktop header for the no-JS case. --lang-suggest-h is the
     height of the language suggestion bar while it is on screen, and 0 the rest
     of the time. */
  padding-top: calc(var(--header-h, 92px) + var(--lang-suggest-h, 0px) + 40px);
  padding-bottom: 40px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--primary);
  color: #030712;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* The logo is the one header element that must never be squeezed. */
.brand-logo {
  flex: 0 0 auto;
}

.header-right {
  /* Without this the nav cannot shrink below its content width and pushes the
     language selector off the right edge on narrow screens. */
  min-width: 0;
}

/* Header navigation on sub-pages — the landing header has no nav of its own. */
.page-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.page-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.page-nav a:hover,
.page-nav a:focus-visible {
  color: var(--primary);
  border-color: rgba(0, 242, 255, 0.35);
  background: rgba(0, 242, 255, 0.07);
}

.page-nav a[aria-current='page'] {
  color: var(--primary);
  border-color: rgba(0, 242, 255, 0.45);
  background: rgba(0, 242, 255, 0.1);
}

/* ==========================================================================
   Log-in button

   The way back in for someone who already has an account — every other route
   off this site leads to registration. It sits on all eleven pages rather than
   only the landing page because a returning visitor looks for it in the header
   no matter which URL they arrived on, and the legal pages are exactly where
   they arrive from an app link.

   A class of its own rather than a `.header-link` variant: site.css hides
   `.header-link` below 768px, which is right for "Đăng ký ngay" — that one is
   an anchor to a section further down the same page, still reachable by
   scrolling — and wrong for a link that leaves the site entirely. This one
   sheds its label instead of disappearing.
   ========================================================================== */

.header-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Same as .lang-select: the header may squeeze .page-nav, never this. */
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 242, 255, 0.45);
  background: rgba(0, 242, 255, 0.1);
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.header-login:hover,
.header-login:focus-visible {
  border-color: var(--primary);
  background: rgba(0, 242, 255, 0.18);
  box-shadow: 0 0 18px rgba(0, 242, 255, 0.25);
}

.header-login svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* ==========================================================================
   Language selector

   A native <details> disclosure: it opens, closes and switches language with
   no JavaScript. lang-switch.js only layers on outside-click, Escape and
   arrow-key roving. The selector lives beside .page-nav rather than inside it
   so the nav can become a scrolling strip on phones without dragging the
   language control out of reach — or clipping the open menu.
   ========================================================================== */

.lang-select {
  position: relative;
  flex: 0 0 auto;
}

.lang-select > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

/* Both spellings are needed: Safari and older Chrome draw the disclosure
   triangle as a ::-webkit-details-marker, everything else as ::marker. */
.lang-select > summary::-webkit-details-marker {
  display: none;
}

.lang-select > summary::marker {
  content: '';
}

.lang-select > summary:hover,
.lang-select > summary:focus-visible,
.lang-select[open] > summary {
  color: var(--primary);
  border-color: rgba(0, 242, 255, 0.45);
  background: rgba(0, 242, 255, 0.08);
}

.lang-globe {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.lang-caret {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.75;
  transition: transform 0.25s ease;
}

.lang-select[open] .lang-caret {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1100;
  min-width: 208px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-deep);
  animation: lang-menu-in 0.18s ease both;
}

@keyframes lang-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.lang-menu a:hover,
.lang-menu a:focus-visible {
  color: var(--primary);
  background: rgba(0, 242, 255, 0.09);
}

.lang-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.lang-menu a[aria-current='true'] {
  color: var(--primary);
}

.lang-menu a[aria-current='true'] .lang-code {
  color: var(--primary);
  border-color: rgba(0, 242, 255, 0.45);
  background: rgba(0, 242, 255, 0.1);
}

/* The tick marking the active language, drawn from two borders so the menu
   needs no third icon asset. */
.lang-menu a[aria-current='true']::after {
  content: '';
  width: 13px;
  height: 7px;
  margin-left: auto;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  border-radius: 1px;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* ==========================================================================
   Preferred-language suggestion bar

   Injected by lang-switch.js when the browser asks for a language this page is
   not written in. Anchored under the header rather than at the bottom of the
   viewport, where it would sit on top of the landing page's floating QR card.
   ========================================================================== */

.lang-suggest {
  position: fixed;
  top: calc(var(--header-h, 92px) + 14px);
  left: 50%;
  /* Below the header's z-index:1000. The open language menu lives inside the
     header's stacking context, so it can never outrank a bar placed above it —
     and the menu overlapping the bar is exactly the case that has to work. */
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 10px 10px 16px;
  border: 1px solid rgba(0, 242, 255, 0.3);
  border-radius: 999px;
  background: var(--card-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-deep), 0 0 30px rgba(0, 242, 255, 0.12);
  opacity: 0;
  transform: translate(-50%, -14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lang-suggest.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.lang-suggest.is-leaving {
  opacity: 0;
  transform: translate(-50%, -14px);
}

.lang-suggest-icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--primary);
}

.lang-suggest-icon svg {
  width: 19px;
  height: 19px;
}

.lang-suggest-text {
  margin: 0;
  flex: 1 1 auto;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.lang-suggest-go {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #030712;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s ease;
}

.lang-suggest-go:hover,
.lang-suggest-go:focus-visible {
  filter: brightness(1.12);
}

.lang-suggest-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.lang-suggest-close svg {
  width: 15px;
  height: 15px;
}

.lang-suggest-close:hover,
.lang-suggest-close:focus-visible {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.07);
}

/* ==========================================================================
   Header responsiveness
   ========================================================================== */

@media (max-width: 900px) {
  .page-nav a {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .header-right {
    gap: 10px;
  }

  /* Below this width the six nav pills wrap onto two or three rows, which grows
     the fixed header until it covers the page title. One horizontally scrolling
     row keeps the header a predictable height at every viewport. */
  .page-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* The scrollbar is hidden, so the fading right edge is the only cue that
       the row continues past the viewport. */
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    padding-right: 10px;
  }

  .page-nav::-webkit-scrollbar {
    display: none;
  }

  .page-nav a {
    padding: 6px 11px;
    font-size: 0.78rem;
  }

  /* Beside a scrolling nav strip and the language selector there is no width
     left for a third label, so the button keeps the icon and drops the words.
     The accessible name lives in aria-label on the anchor, not in the span, so
     hiding the span costs nothing to a screen reader. */
  .header-login {
    padding: 7px 10px;
  }

  .header-login-label {
    display: none;
  }

  .lang-select > summary {
    gap: 5px;
    padding: 6px 9px 6px 10px;
    font-size: 0.8rem;
  }

  .lang-menu {
    min-width: 194px;
  }
}

@media (max-width: 620px) {
  /* On phones the pill shape wastes the width the message needs, so the bar
     becomes a card that spans the viewport. */
  .lang-suggest {
    left: 16px;
    right: 16px;
    flex-wrap: wrap;
    max-width: none;
    padding: 14px;
    border-radius: var(--radius-sm);
    transform: translateY(-14px);
  }

  .lang-suggest.is-visible {
    transform: translateY(0);
  }

  .lang-suggest.is-leaving {
    transform: translateY(-14px);
  }

  /* Keep the dismiss control on the message row and give the action the full
     width below it, rather than letting it wrap onto a line of its own. */
  .lang-suggest-text {
    flex: 1 1 0;
    min-width: 0;
  }

  .lang-suggest-close {
    order: 2;
    margin: -4px -4px -4px 0;
  }

  .lang-suggest-go {
    order: 3;
    flex: 1 1 100%;
    padding: 10px 16px;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .brand-logo {
    height: 32px;
  }

  .lang-menu {
    /* Anchored to the viewport edge instead of the trigger so a menu wider than
       the remaining space cannot spill off-screen. */
    right: -6px;
    min-width: 186px;
  }
}

/* ==========================================================================
   Document header
   ========================================================================== */

.legal-hero {
  margin-bottom: 46px;
}

.legal-hero .eyebrow {
  margin-bottom: 14px;
}

.legal-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--text-white);
  margin: 0 0 18px;
}

.legal-meta {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.legal-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
}

/* ==========================================================================
   Prose
   ========================================================================== */

.legal-content {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.85;
}

/* The landing container is 1200px — far too wide for a wall of legal prose.
   Cap the measure at a readable line length instead. */
.legal-content.container {
  width: min(880px, calc(100% - 12%));
}

.legal-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--text-white);
  margin: 58px 0 16px;
  padding-left: 18px;
  border-left: 3px solid var(--primary);
  scroll-margin-top: 110px;
}

.legal-content h3 {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text-white);
  margin: 32px 0 10px;
}

.legal-content p {
  margin: 0 0 18px;
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.legal-content li {
  margin-bottom: 9px;
}

.legal-content li::marker {
  color: var(--primary);
}

.legal-content strong {
  color: var(--text-white);
  font-weight: 600;
}

.legal-content em {
  color: var(--text-soft);
}

.legal-content a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 242, 255, 0.3);
  transition: all 0.2s ease;
}

.legal-content a:hover,
.legal-content a:focus-visible {
  border-bottom-color: var(--primary);
  text-shadow: 0 0 12px rgba(0, 242, 255, 0.5);
}

/* ==========================================================================
   Table of contents
   ========================================================================== */

.toc {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur);
  padding: 26px 30px;
  margin-bottom: 12px;
}

.toc h2 {
  all: unset;
  display: block;
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 34px;
  font-size: 0.94rem;
}

.toc li {
  margin-bottom: 7px;
  break-inside: avoid;
}

.toc a {
  border-bottom: none;
}

@media (max-width: 700px) {
  .toc {
    padding: 22px;
  }

  .toc ol {
    columns: 1;
  }
}

/* ==========================================================================
   Callouts
   ========================================================================== */

.callout {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--blur);
  padding: 22px 26px;
  margin: 28px 0;
  box-shadow: var(--shadow-soft);
}

.callout > :first-child {
  margin-top: 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout--warning {
  border-left-color: #ff4d6d;
  background: rgba(80, 12, 26, 0.42);
}

.callout--warning strong {
  color: #ffccd5;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  margin: 26px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  backdrop-filter: var(--blur);
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 540px;
  font-size: 0.92rem;
}

.table-wrap th,
.table-wrap td {
  text-align: left;
  vertical-align: top;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}

.table-wrap th {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.76rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: rgba(0, 242, 255, 0.05);
  white-space: nowrap;
}

.table-wrap tr:last-child td {
  border-bottom: none;
}

.table-wrap td strong {
  color: var(--text-white);
}

/* ==========================================================================
   Numbered steps
   ========================================================================== */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 62px;
  min-height: 42px;
  margin-bottom: 22px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1rem;
  color: #030712;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: var(--shadow-glow);
}

/* ==========================================================================
   FAQ disclosure
   ========================================================================== */

.legal-content details {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--blur);
  padding: 18px 24px;
  margin-bottom: 12px;
  transition: border-color 0.25s ease;
}

.legal-content details:hover {
  border-color: rgba(0, 242, 255, 0.28);
}

.legal-content details[open] {
  background: var(--card-strong);
  border-color: rgba(0, 242, 255, 0.28);
}

.legal-content summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-white);
  list-style-position: outside;
}

.legal-content summary::marker {
  color: var(--primary);
}

.legal-content details[open] summary {
  margin-bottom: 12px;
}

.legal-content details > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Contact list
   ========================================================================== */

.contact-list {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 30px;
  font-size: 0.96rem;
}

.contact-list dt {
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding-top: 3px;
}

.contact-list dd {
  margin: 0;
  color: var(--text-soft);
}

@media (max-width: 560px) {
  .contact-list {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .contact-list dd {
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   Support page cards
   ========================================================================== */

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
  margin: 28px 0;
}

.support-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur);
  padding: 26px;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.support-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 242, 255, 0.32);
}

.support-card h3 {
  margin: 0 0 8px;
  font-size: 0.76rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--primary);
}

.support-card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--text-muted);
}

/* ==========================================================================
   Inline actions
   ========================================================================== */

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0;
}

.btn-danger {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #ff4d6d, #c9184a);
  border: 1px solid transparent;
  box-shadow: 0 0 28px rgba(255, 77, 109, 0.28);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.btn-danger:hover,
.btn-danger:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 38px rgba(255, 77, 109, 0.45);
}

.legal-content .btn-glow,
.legal-content .btn-secondary,
.legal-content .btn-danger {
  border-bottom: none;
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .support-card:hover,
  .btn-danger:hover {
    transform: none;
  }
}