/* =========================================================
   Eagle Smart Lockers — Legal page styling
   Used by Privacy Policy and Terms of Use
   ========================================================= */

.legal-hero {
  background: linear-gradient(160deg, #050810 0%, #0c0f12 60%, #131720 100%);
  color: var(--ivory);
  padding: 70px 0 50px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.legal-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(168,168,168,.18), transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(138,143,150,.12), transparent 55%);
  pointer-events: none;
}
.legal-hero .container { position: relative; z-index: 2; }
.legal-hero .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: 1.8px;
  color: var(--gold-2);
  text-transform: uppercase; font-weight: 600;
  margin-bottom: 12px;
}
.legal-hero .crumb a { color: var(--gold-2); }
.legal-hero .crumb a:hover { color: #fff; }
.legal-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  margin: 0 0 6px;
  color: #fff;
  letter-spacing: -.6px;
}
html[dir="rtl"] .legal-hero h1 { font-family: var(--font-ar); font-weight: 700; letter-spacing: 0; }
.legal-hero .legal-updated {
  font-size: 12px; letter-spacing: 1.4px;
  color: rgba(246,246,247,.55);
  text-transform: uppercase;
}

.legal-body { padding: 48px 0 64px; background: var(--ivory); }
.legal-body .container { max-width: 880px; }
.legal-toc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 28px;
}
.legal-toc h2 {
  font-size: 11px; letter-spacing: 2px;
  color: var(--gold-deep); text-transform: uppercase; font-weight: 700;
  margin: 0 0 10px;
}
.legal-toc ol {
  list-style: decimal inside; padding: 0; margin: 0;
  columns: 2; column-gap: 24px;
  font-size: 13.5px;
}
.legal-toc ol li { padding: 3px 0; color: var(--text-soft); break-inside: avoid; }
.legal-toc ol li a { color: var(--ink); }
.legal-toc ol li a:hover { color: var(--gold-deep); }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

.legal-section { margin-bottom: 32px; scroll-margin-top: 100px; }
.legal-section h2 {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -.2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.legal-section h3 {
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  margin: 16px 0 6px;
}
.legal-section p,
.legal-section ul li,
.legal-section ol li {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
}
.legal-section p { margin: 8px 0; }
.legal-section ul,
.legal-section ol { padding-left: 22px; margin: 8px 0; }
html[dir="rtl"] .legal-section ul,
html[dir="rtl"] .legal-section ol { padding-left: 0; padding-right: 22px; }
.legal-section li { margin: 4px 0; }
.legal-section a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal-section a:hover { color: var(--ink); }
.legal-section strong { color: var(--ink); font-weight: 600; }

.legal-note {
  margin-top: 24px;
  padding: 14px 18px;
  background: rgba(168,168,168,.08);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  font-size: 12.5px; line-height: 1.6;
  color: var(--text-soft);
}
html[dir="rtl"] .legal-note { border-left: 0; border-right: 3px solid var(--gold); border-radius: 10px 0 0 10px; }