/* =========================================================================
   SENDPK.COM — Legal document page styles
   (privacy-policy.php + terms-conditions.php ONLY)
   -------------------------------------------------------------------------
   Page-specific styling only. Colours, radii, shadows and fonts are read
   from the shared design tokens in theme.css (:root) — nothing here
   redefines or overrides the global stylesheet. Everything is scoped
   under #legalPage so it can never leak onto other pages. Structure is
   deliberately close to assets/css/api-styles.css (sticky sidebar +
   scrolling doc column) so the two "long reference document" page types
   on this site share one visual language.
   ========================================================================= */

#legalPage {
  /* Combined height of the site's topbar + sticky navbar — used so this
     page's own overlays/panels never sit on top of and hide the site header. */
  --legal-header-offset: 96px;
}

/* =========================================================================
   HERO — compact banner (breadcrumb + eyebrow + H1 + lead + meta pills)
   ========================================================================= */
.hero-legal { padding: 2.4rem 0 2.6rem; }
@media (max-width: 991.98px) { .hero-legal { padding: 1.7rem 0 2rem; } }

.legal-breadcrumb { font-size: .82rem; color: var(--wa-muted); margin-bottom: 1.1rem; }
.legal-breadcrumb a { color: var(--wa-muted); }
.legal-breadcrumb a:hover { color: var(--wa-teal); }
.legal-breadcrumb .current { color: var(--wa-ink); font-weight: 600; }

.legal-hero-lead { color: var(--wa-body); font-size: 1.08rem; max-width: 720px; margin-bottom: 1.3rem; }

.legal-meta-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.legal-meta-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--wa-surface); border: 1px solid var(--wa-line); color: var(--wa-body);
  font-size: .82rem; font-weight: 600; border-radius: 50rem; padding: .4rem .95rem;
  box-shadow: var(--shadow-sm);
}
.legal-meta-pill i { color: var(--wa-teal); }
.legal-meta-pill.is-version i { color: var(--wa-action); }

/* =========================================================================
   LAYOUT — sticky TOC sidebar + scrolling content column
   ========================================================================= */
.legal-shell { display: flex; align-items: flex-start; max-width: 1320px; margin: 0 auto; }
.legal-sidebar {
  width: 300px; flex-shrink: 0;
  position: sticky; top: var(--legal-header-offset); align-self: flex-start;
  max-height: calc(100vh - var(--legal-header-offset) - 20px);
  overflow-y: auto;
  padding: 0 1rem 3rem 0;
}
.legal-main { flex: 1; min-width: 0; padding: 0 clamp(1.25rem, 4vw, 3.5rem) 5rem; }

.legal-sidebar-head {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--wa-muted);
  text-transform: uppercase; margin: 0 0 .7rem .6rem;
}
.legal-sidebar-head i { color: var(--wa-teal); }

.legal-nav { list-style: none; padding: 0; margin: 0; counter-reset: legal-toc; }
.legal-nav li a {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .4rem .6rem; border-radius: 8px; font-size: .85rem; color: var(--wa-body); font-weight: 500;
  border-left: 2.5px solid transparent; line-height: 1.35;
}
.legal-nav li a:hover { background: var(--wa-page); color: var(--wa-ink); }
.legal-nav li a.active { background: rgba(34, 197, 94, .12); color: var(--wa-teal-dark); border-left-color: var(--wa-green); font-weight: 600; }
.legal-nav li a .num { flex-shrink: 0; color: var(--wa-muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
.legal-nav li a.active .num { color: var(--wa-teal-dark); }

.legal-sidebar-cta {
  margin-top: 1.3rem; padding: 1.1rem; background: var(--wa-page);
  border: 1px solid var(--wa-line); border-radius: var(--radius-card);
}
.legal-sidebar-cta p { font-size: .84rem; color: var(--wa-body); margin: 0 0 .6rem; }

/* =========================================================================
   CONTENT — numbered sections
   ========================================================================= */
section.legal-doc-section { scroll-margin-top: 110px; padding: 2.6rem 0; border-bottom: 1px solid var(--wa-line); }
section.legal-doc-section:first-of-type { padding-top: 1rem; }
section.legal-doc-section:last-of-type { border-bottom: none; padding-bottom: 0; }

.legal-main h2 { font-size: 1.55rem; display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1rem; }
.legal-main h2 .num { color: var(--wa-teal); font-variant-numeric: tabular-nums; }
.legal-main h3 { font-size: 1.15rem; display: flex; align-items: baseline; gap: .55rem; margin: 1.6rem 0 .7rem; }
.legal-main h3 .num { color: var(--wa-action); font-variant-numeric: tabular-nums; font-size: 1rem; }
.legal-main h3:first-child { margin-top: 0; }
.legal-main p { margin-bottom: 1rem; }
.legal-main p:last-child { margin-bottom: 0; }
.legal-main ul, .legal-main ol { margin-bottom: 1rem; padding-left: 1.2rem; }
.legal-main li { margin-bottom: .45rem; }
.legal-main li:last-child { margin-bottom: 0; }
.legal-main strong { color: var(--wa-ink); }

.legal-lead { color: var(--wa-body); font-size: 1.05rem; }

.legal-list-check { list-style: none; padding-left: 0; }
.legal-list-check li { display: flex; gap: .6rem; align-items: flex-start; }
.legal-list-check li i { color: var(--wa-action); margin-top: .3rem; flex-shrink: 0; }
.legal-list-cross li i { color: #c0392b; }

/* =========================================================================
   CALLOUT CARDS — info / warning / success notices
   ========================================================================= */
.legal-card { background: var(--wa-surface); border: 1px solid var(--wa-line); border-radius: var(--radius-card); padding: 1.4rem 1.5rem; margin: 1.2rem 0; box-shadow: var(--shadow-sm); }
.legal-card h4 { font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; letter-spacing: normal; }

.legal-callout { display: flex; gap: .9rem; border-radius: var(--radius-card); padding: 1.1rem 1.3rem; margin: 1.2rem 0; border: 1px solid; }
.legal-callout i.legal-callout-icon { font-size: 1.1rem; margin-top: .15rem; flex-shrink: 0; }
.legal-callout h4 { font-size: .92rem; font-weight: 700; margin: 0 0 .3rem; letter-spacing: normal; }
.legal-callout p { font-size: .9rem; margin: 0; }
.legal-callout p + p { margin-top: .5rem; }

.legal-callout-warning { background: #fff8ee; border-color: #f5d9a8; }
.legal-callout-warning h4, .legal-callout-warning i { color: #8a5a12; }
.legal-callout-warning p { color: #8a5a12; }

.legal-callout-info { background: #eef7fd; border-color: #bfe0f5; }
.legal-callout-info h4, .legal-callout-info i { color: #0b5f8a; }
.legal-callout-info p { color: #17618a; }

.legal-callout-success { background: #F3FBF6; border-color: #BCE3CD; }
.legal-callout-success h4, .legal-callout-success i { color: var(--wa-teal-dark); }
.legal-callout-success p { color: var(--wa-teal-dark); }

.legal-callout-danger { background: #fdecea; border-color: #f3c2bc; }
.legal-callout-danger h4, .legal-callout-danger i { color: #a3271b; }
.legal-callout-danger p { color: #a3271b; }

/* =========================================================================
   TABLES
   ========================================================================= */
.legal-table-wrap { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--wa-line); border-radius: var(--radius-card); }
#legalPage table.legal-table { width: 100%; border-collapse: collapse; font-size: .87rem; margin: 0; }
#legalPage table.legal-table th {
  background: var(--wa-page); text-align: left; padding: .7rem .9rem; font-weight: 700;
  border-bottom: 2px solid var(--wa-line); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wa-muted);
  white-space: nowrap;
}
#legalPage table.legal-table td { padding: .75rem .9rem; border-bottom: 1px solid var(--wa-line); vertical-align: top; color: var(--wa-body); }
#legalPage table.legal-table tr:last-child td { border-bottom: none; }
#legalPage table.legal-table td strong { color: var(--wa-ink); }

/* =========================================================================
   CONTACT CARD (final section)
   ========================================================================= */
.legal-contact-card { background: linear-gradient(135deg, var(--wa-teal-dark), var(--wa-teal)); color: #fff; border-radius: var(--radius-card); padding: 2.2rem; }
.legal-contact-card p { color: rgba(255, 255, 255, .88); }
.legal-contact-card h3 { color: #fff; }
.legal-th-narrow { width: 220px; }
.legal-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.legal-contact-item { display: flex; gap: .8rem; align-items: flex-start; }
.legal-contact-item i { font-size: 1.15rem; color: #d9fdd3; margin-top: .15rem; flex-shrink: 0; }
.legal-contact-item h4 { color: #fff; font-size: .85rem; font-weight: 700; margin: 0 0 .2rem; letter-spacing: normal; }
.legal-contact-item a, .legal-contact-item span { color: rgba(255, 255, 255, .88); font-size: .88rem; }
.legal-contact-item a:hover { color: #fff; }

/* =========================================================================
   BACK TO TOP
   ========================================================================= */
.legal-back-to-top { display: inline-flex; align-items: center; gap: .4rem; margin-top: 2rem; font-size: .84rem; font-weight: 600; }

/* =========================================================================
   MOBILE OFF-CANVAS SIDEBAR
   ========================================================================= */
.legal-mobile-toggle {
  display: none; position: fixed; top: calc(var(--legal-header-offset) + 10px); left: 14px; z-index: 1000;
  width: 44px; height: 44px; border-radius: 50%; background: var(--wa-green); color: #fff; border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2); align-items: center; justify-content: center; font-size: 1.1rem;
}
.legal-backdrop {
  display: none; position: fixed; top: var(--legal-header-offset); left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .4); z-index: 990;
}
.legal-backdrop.show { display: block; }

@media (max-width: 991.98px) {
  .legal-sidebar {
    position: fixed; top: var(--legal-header-offset); left: 0;
    height: calc(100vh - var(--legal-header-offset)); max-height: calc(100vh - var(--legal-header-offset));
    width: 300px; background: #fff; z-index: 1000;
    transform: translateX(-100%); transition: transform .25s ease; padding: 1.5rem 1rem 3rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
  }
  .legal-sidebar.show { transform: translateX(0); box-shadow: 0 0 30px rgba(0, 0, 0, .25); }
  .legal-mobile-toggle { display: flex; }
  /* Top padding must clear the fixed toggle button's own footprint — same
     fix pattern as .api-main / .price-main (see memory). */
  .legal-main { padding-top: 4.5rem; }
}

@media (max-width: 575.98px) {
  .legal-main h2 { font-size: 1.3rem; }
  .legal-contact-card { padding: 1.5rem; }
}