/* ── Reuse legal-page layout from terms.php ── */
.legal-page {
  padding: 3rem 0 5rem;
}

.legal-hero {
  background: linear-gradient(135deg, #0F1F6E 0%, var(--primary) 60%, var(--secondary) 100%);
  padding: 3.5rem 0 2.5rem;
  text-align: center;
  color: #fff;
}

.legal-hero h1 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: .5rem;
}

.legal-hero p {
  opacity: .85;
  font-size: 1rem;
  max-width: 540px;
  margin: 0 auto;
}

.legal-hero .legal-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  padding: .35rem 1rem;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.legal-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
}

.legal-toc {
  position: sticky;
  top: 86px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.legal-toc h3 {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}

.legal-toc ol li {
  counter-increment: toc-counter;
  margin-bottom: .15rem;
}

.legal-toc ol li a {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .82rem;
  color: var(--text-muted);
  padding: .35rem .5rem;
  border-radius: 6px;
  transition: all var(--transition);
  line-height: 1.4;
  text-decoration: none;
}

.legal-toc ol li a::before {
  content: counter(toc-counter) ".";
  font-weight: 700;
  color: var(--secondary);
  flex-shrink: 0;
  min-width: 18px;
}

.legal-toc ol li a:hover {
  background: rgba(0,212,170,.08);
  color: var(--sec-dark);
}

[data-theme="dark"] .legal-toc ol li a:hover,
[data-theme="dark"] .legal-toc ol li a.active {
  background: rgba(99, 102, 241, .15);
}

.legal-toc ol li a.active {
  background: rgba(0,212,170,.12);
  color: var(--sec-dark);
  font-weight: 600;
}

/* RA 10173 highlight box */
.legal-law-box {
  background: rgba(30,64,255,.05);
  border: 1px solid rgba(30,64,255,.2);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.1rem;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--text);
}

.legal-law-box strong {
  color: var(--primary);
}

/* Data rights grid */
.rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.1rem 0;
}

.right-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  transition: box-shadow var(--transition), transform var(--transition);
}

.right-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.right-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}

.right-card-body strong {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  margin-bottom: .2rem;
  color: var(--text);
}

.right-card-body span {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Notice banner */
.legal-notice {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.35);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: .875rem;
  color: #92400E;
  line-height: 1.6;
}

.legal-notice i {
  flex-shrink: 0;
  margin-top: .15rem;
  color: var(--warning);
}

[data-theme="dark"] .legal-notice {
  color: #fde68a;
}

/* Content area */
.legal-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2.75rem;
  box-shadow: var(--shadow-sm);
}

.legal-section {
  margin-bottom: 2.75rem;
  scroll-margin-top: 94px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--border);
}

.legal-section-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--secondary), var(--sec-dark));
  color: #fff;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.legal-section p {
  color: var(--text);
  font-size: .925rem;
  line-height: 1.8;
  margin-bottom: .9rem;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul,
.legal-section ol {
  padding-left: 1.4rem;
  margin-bottom: .9rem;
}

.legal-section ul { list-style: disc; }
.legal-section ol { list-style: decimal; }

.legal-section li {
  font-size: .925rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: .3rem;
}

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

/* Info table for data types */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  margin: 1rem 0 .9rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.data-table th {
  background: rgba(30,64,255,.07);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--primary);
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--border);
}

.data-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
  line-height: 1.6;
}

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

.data-table tr:hover td {
  background: rgba(0,212,170,.04);
}

[data-theme="dark"] .data-table tr:hover td {
  background: rgba(99, 102, 241, .08);
}

/* Effective date pill */
.legal-effective {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0,212,170,.1);
  border: 1px solid rgba(0,212,170,.3);
  color: var(--sec-dark);
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem 1rem;
  border-radius: 50px;
  margin-top: 1.5rem;
}

/* Contact card */
.legal-contact-card {
  background: linear-gradient(135deg, rgba(0,212,170,.06), rgba(30,64,255,.06));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
}

.legal-contact-card p {
  margin-bottom: .4rem !important;
}

.legal-contact-card a {
  color: var(--primary);
  font-weight: 500;
}

/* NPC contact box */
.npc-box {
  background: rgba(16,185,129,.06);
  border: 1px solid rgba(16,185,129,.25);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.7;
}

.npc-box strong {
  color: var(--success);
}

.npc-box a {
  color: var(--primary);
}

/* Back to top */
.back-to-top-wrap {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .rights-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .legal-hero h1 { font-size: 1.7rem; }
  .legal-content { padding: 1.5rem 1.25rem; }
  .legal-section-title { font-size: 1.05rem; }
  .rights-grid { grid-template-columns: 1fr; }
  .data-table { font-size: .8rem; }
  .data-table th, .data-table td { padding: .6rem .75rem; }
}

/* TL;DR Box */
.tldr-box {
  background: linear-gradient(135deg, rgba(0,212,170,.05), rgba(30,64,255,.05));
  border: 1.5px solid rgba(0,212,170,.25);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.tldr-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.tldr-badge {
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  padding: .3rem .8rem;
  border-radius: 50px;
  letter-spacing: .05em;
  flex-shrink: 0;
}

.tldr-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}

.tldr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}

.tldr-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
}

[data-theme="dark"] .tldr-item {
  border-color: rgba(255, 255, 255, .08);
}

.tldr-item i {
  font-size: 1rem;
  margin-top: .1rem;
  flex-shrink: 0;
}

.tldr-good i { color: var(--success); }
.tldr-bad  i { color: var(--danger); }

.tldr-item strong {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .15rem;
  color: var(--text);
}

.tldr-item span {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.tldr-note {
  font-size: .78rem;
  color: var(--text-muted);
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.tldr-note i { color: var(--secondary); }

@media (max-width: 600px) {
  .tldr-grid { grid-template-columns: 1fr; }
}

/* Shared legal document presentation */
.legal-hero,.legal-page { --legal-muted:#64748b; --legal-accent:#4f46e5; }
[data-theme="dark"] .legal-hero,[data-theme="dark"] .legal-page { --legal-muted:#a5afc2; --legal-accent:#b1aaff; }
.legal-hero { background:var(--card); color:var(--text); padding:36px 0 0; text-align:left; border-bottom:1px solid var(--border); }
.legal-hero .container { max-width:1120px; }
.legal-breadcrumb { display:flex; align-items:center; gap:10px; font-size:.72rem; color:var(--legal-muted); margin-bottom:24px; }
.legal-breadcrumb a { color:var(--legal-muted); }
.legal-breadcrumb i { font-size:.55rem; }
.legal-hero .legal-badge { background:rgba(99,102,241,.09); border:0; border-radius:7px; backdrop-filter:none; color:var(--legal-accent); font-size:.68rem; padding:6px 10px; margin-bottom:14px; }
.legal-hero h1 { font-size:clamp(1.9rem,4vw,2.7rem); font-weight:600; letter-spacing:-.045em; line-height:1.2; color:var(--text); margin-bottom:12px; }
.legal-hero h1>i { display:none; }
.legal-hero p { color:var(--legal-muted); opacity:1; font-size:.88rem; line-height:1.8; max-width:650px; margin:0; }
.legal-tabs { display:flex; gap:26px; margin-top:26px; }
.legal-tabs a { padding:12px 0 15px; border-bottom:2px solid transparent; font-size:.8rem; font-weight:500; color:var(--legal-muted); }
.legal-tabs a[aria-current="page"] { color:var(--legal-accent); border-color:var(--legal-accent); }
.legal-page { padding:30px 0 56px; }
.legal-layout { max-width:1120px; padding:0 24px; grid-template-columns:240px minmax(0,1fr); gap:28px; }
.legal-toc { top:96px; padding:18px 12px; border-radius:14px; box-shadow:none; max-height:calc(100dvh - 120px); overflow:auto; }
.legal-toc summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.72rem; font-weight:600; color:var(--text); padding:2px 8px 12px; cursor:pointer; }
.legal-toc summary::-webkit-details-marker { display:none; }
.legal-toc summary>i { font-size:.65rem; color:var(--legal-muted); transition:transform .15s; }
.legal-toc details[open]>summary>i { transform:rotate(180deg); }
.legal-toc ol li a { padding:8px; font-size:.73rem; line-height:1.5; color:var(--legal-muted); gap:7px; }
.legal-toc ol li a::before { color:var(--legal-muted); font-size:.66rem; font-weight:500; padding-top:2px; }
.legal-toc ol li a:hover,.legal-toc ol li a.active { color:var(--legal-accent); background:rgba(99,102,241,.1); }
.legal-content { min-width:0; padding:28px 32px; border-radius:16px; box-shadow:0 4px 24px #00000004; }
.legal-notice { padding:12px 14px; font-size:.73rem; line-height:1.7; margin-bottom:22px; border-radius:9px; }
.tldr-box { background:var(--bg); border:1px solid var(--border); padding:20px; border-radius:12px; margin-bottom:30px; }
.tldr-header { gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.tldr-badge { background:rgba(99,102,241,.12); color:var(--legal-accent); font-size:.65rem; font-weight:600; border-radius:6px; padding:5px 8px; }
.tldr-title { font-size:.88rem; font-weight:600; }
.tldr-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tldr-item { padding:12px; border-radius:9px; gap:8px; }
.tldr-item>div { min-width:0; }
.tldr-item strong { font-size:.76rem; line-height:1.6; font-weight:600; }
.tldr-item span { display:block; color:var(--legal-muted); font-size:.73rem; line-height:1.7; }
.tldr-note { color:var(--legal-muted); font-size:.7rem; align-items:flex-start; line-height:1.6; }
.legal-section { margin-bottom:30px; scroll-margin-top:100px; }
.legal-section-title { font-size:1.05rem; line-height:1.5; font-weight:600; gap:10px; border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:16px; }
.legal-section-num { width:28px; height:28px; border-radius:8px; background:rgba(99,102,241,.1); color:var(--legal-accent); font-size:.73rem; }
.legal-section p,.legal-section li { font-size:.85rem; line-height:1.9; }
.legal-section a,.legal-contact-card a,.npc-box a { color:var(--legal-accent); overflow-wrap:anywhere; }
.legal-content { overflow-wrap:anywhere; }
.legal-law-box,.legal-contact-card,.npc-box { background:var(--bg); border-radius:10px; font-size:.82rem; }
.legal-law-box strong { color:var(--legal-accent); }
.rights-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.right-card { padding:14px; box-shadow:none; }
.right-card:hover { transform:none; box-shadow:none; }
.right-card-icon { background:rgba(99,102,241,.1); color:var(--legal-accent); }
.right-card-body { min-width:0; }
.right-card-body strong { font-size:.8rem; }
.right-card-body span { color:var(--legal-muted); font-size:.75rem; }
.legal-table-wrap { overflow:auto; margin:16px 0; border:1px solid var(--border); border-radius:10px; }
.legal-table-wrap .data-table { margin:0; min-width:440px; border:0; border-radius:0; }
.data-table th { color:var(--legal-accent); background:rgba(99,102,241,.07); font-size:.7rem; letter-spacing:.03em; }
.data-table td { font-size:.78rem; }
.legal-effective { color:var(--legal-accent); background:rgba(99,102,241,.08); border-color:var(--border); font-size:.72rem; border-radius:8px; }
@media(max-width:900px) { .legal-layout { grid-template-columns:minmax(0,1fr); gap:18px; } .legal-toc { position:static; max-height:none; padding:14px; } .legal-toc summary { padding:4px; } .legal-toc details[open] summary { margin-bottom:10px; } .legal-toc ol { max-height:260px; overflow:auto; } }
@media(max-width:600px) { .legal-hero { padding-top:24px; } .legal-hero p { font-size:.8rem; } .legal-layout { padding:0 16px; } .legal-page { padding:20px 0 36px; } .legal-content { padding:20px 16px; } .tldr-box { padding:14px; } .tldr-grid,.rights-grid { grid-template-columns:minmax(0,1fr); } .legal-section-title { font-size:.98rem; align-items:flex-start; } .legal-tabs { gap:22px; } .legal-tabs a { font-size:.75rem; } }