/* ============================================================
   OSP Platform — Legal Pages (Terms & Privacy) Premium CSS
   Extends landing.css design tokens and components
   ============================================================ */

@font-face { font-family:'Cairo'; src:url('../assets/fonts/Cairo/cairo-300.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Cairo'; src:url('../assets/fonts/Cairo/cairo-400.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cairo'; src:url('../assets/fonts/Cairo/cairo-500.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Cairo'; src:url('../assets/fonts/Cairo/cairo-600.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Cairo'; src:url('../assets/fonts/Cairo/cairo-700.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

html, body.legal-page-body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Legal Design Tokens (aligned with provided palette) ── */
:root {
  --brand-primary-light: #37ad01;
  --brand-primary-main: #268c43;
  --brand-primary-dark: #003c12;

  --brand-secondary-light: #eeeaf2;
  --brand-secondary-main: #6b5c7a;
  --brand-secondary-dark: #44384f;

  --brand-grey-light: #ebeced;
  --brand-grey-main: #a8aaad;
  --brand-grey-dark: #51555c;

  --brand-warning-light: #f4d255;
  --brand-warning-main: #f0c31d;
  --brand-info-light: #5ea3fa;
  --brand-info-main: #2b84f9;
  --brand-success-light: #83d991;
  --brand-success-main: #5acc6c;
  --brand-error-light: #eb6b6a;
  --brand-error-main: #e43a39;

  --brand-stroke-default: linear-gradient(135deg, #268c43 0%, #6b5c7a 100%);
  --brand-stroke-hover: linear-gradient(135deg, #37ad01 0%, #eeeaf2 100%);
  --brand-stroke-pressed: linear-gradient(135deg, #003c12 0%, #44384f 100%);
  --brand-stroke-disabled: linear-gradient(135deg, #51555c 0%, #ebeced 100%);

  --legal-container-max: 1240px;
  --legal-gutter: clamp(1rem, 2.4vw, 1.8rem);
}

.legal-page-body {
  font-family: var(--font);
  font-size: clamp(15px, 0.18vw + 14.2px, 17px);
  color: var(--g0);
  background: #f8faf9;
}

body.legal-page-body,
body.legal-page-body *:not(i):not(.fa):not([class^="ti-"]):not([class*=" ti-"]) {
  font-family: 'Cairo', Tahoma, 'Segoe UI', sans-serif !important;
}

.legal-page-body h1,
.legal-page-body h2,
.legal-page-body h3,
.legal-page-body h4,
.legal-page-body h5,
.legal-page-body h6,
.legal-page-body p,
.legal-page-body a,
.legal-page-body li,
.legal-page-body button,
.legal-page-body input,
.legal-page-body textarea,
.legal-page-body select {
  font-family: var(--font);
}

.legal-page-body .header .container,
.legal-page-body .footer .container {
  width: min(var(--legal-container-max), calc(100% - (var(--legal-gutter) * 2)));
  padding-inline: 0;
}

.legal-page-body .container {
  width: min(var(--legal-container-max), calc(100% - (var(--legal-gutter) * 2)));
  padding-inline: 0;
}

/* ── Scroll Progress ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--p2), var(--p3));
  z-index: 9999;
  transition: width .1s linear;
  border-radius: 0 var(--r-full) var(--r-full) 0;
}

/* ── Back To Top ── */
.back-to-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p2), var(--p3));
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-green);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: all .35s var(--ease);
  z-index: 500;
}
.back-to-top.visible {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-green-lg);
}
[dir="rtl"] .back-to-top { right: auto; left: 2rem; }

/* ── Legal Page Layout ── */
.legal-page {
  min-height: 100vh;
  padding-top: var(--nav-h);
  background: var(--bg);
}

/* ── Hero Banner ── */
.legal-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, #f7fbf6 0%, #eef8ef 55%, #e5f3e8 100%);
  padding: 2.25rem 0 2em;
  isolation: isolate;
  border-bottom: 1px solid rgba(19, 99, 45, .08);
}
.legal-hero .container {
  width: min(var(--legal-container-max), calc(100% - (var(--legal-gutter) * 2)));
  margin-inline: auto;
  padding-inline: 0;
}

.legal-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 12% 52%, rgba(84, 170, 106, .2) 0%, transparent 72%),
    radial-gradient(ellipse 52% 70% at 88% 22%, rgba(49, 143, 79, .12) 0%, transparent 60%);
  z-index: 0;
}

.legal-hero__noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .2; z-index: 0;
  pointer-events: none;
}

.legal-hero__panel {
  position: relative;
  z-index: 1;
  max-width: 860px;
  padding: 1.45rem 1.5rem;
  border-radius: 20px;
  border: 1px solid rgba(38, 140, 67, .2);
  background: linear-gradient(145deg, #ffffff 0%, #f7fcf8 65%, #f0f8f2 100%);
  box-shadow: 0 16px 38px rgba(0, 60, 18, .1);
  backdrop-filter: blur(2px);
}

.legal-hero__title {
  font-size: clamp(2rem, 2vw + 1.2rem, 3.3rem);
  font-weight: 800;
  color: var(--p0);
  line-height: 1.18;
  letter-spacing: -.6px;
  margin-bottom: .8rem;
  text-shadow: none;
  animation: fadeUp .6s .03s var(--ease) both;
}

.legal-hero__lead {
  margin: 0;
  max-width: 760px;
  color: rgba(18, 63, 39, .82);
  font-size: clamp(1rem, .5vw + .84rem, 1.14rem);
  line-height: 1.85;
  font-weight: 500;
  animation: fadeUp .7s .1s var(--ease) both;
}

/* ── Document Tabs ── */
.legal-tabs-wrap {
  background: var(--surface);
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: sticky; top: var(--nav-h); z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.legal-tabs {
  display: flex; align-items: stretch;
  width: min(var(--legal-container-max), calc(100% - (var(--legal-gutter) * 2)));
  margin: 0 auto;
  padding: 0;
}
.legal-tab {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.5rem;
  font-size: clamp(.95rem, .13vw + .9rem, 1.02rem); font-weight: 600;
  color: var(--g4);
  border: none; background: none; cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all .25s var(--ease);
  white-space: nowrap;
  text-decoration: none;
}
.legal-tab:hover { color: var(--p2); }
.legal-tab.active {
  color: var(--p1);
  border-bottom-color: var(--p2);
  background: linear-gradient(180deg, rgba(238,234,242,.18) 0%, rgba(238,234,242,0) 80%);
}
.legal-tab svg { flex-shrink: 0; }

/* ── Main Layout ── */
.legal-layout {
  width: min(var(--legal-container-max), calc(100% - (var(--legal-gutter) * 2)));
  margin: 0 auto;
  padding: 2.15rem 0 3.5rem;
  display: grid;
  grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  min-height: calc(100vh - var(--nav-h) - 56px);
}

/* ── Sidebar ToC ── */
.legal-toc {
  width: 280px;
  position: sticky;
  top: calc(var(--nav-h) + 56px + 3rem);
  flex-shrink: 0;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid rgba(38, 140, 67, .26);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  max-height: calc(100vh - var(--nav-h) - 56px - 6rem);
  display: flex; flex-direction: column;
  z-index: 10;
}

.legal-toc__header {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(135deg, var(--p5), rgba(238, 234, 242, .45));
  color: var(--p1);
  font-weight: 700; font-size: clamp(.8rem, .1vw + .75rem, .9rem); letter-spacing: .5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.legal-toc__list {
  overflow-y: auto;
  padding: .75rem .5rem;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(38,140,67,.25) transparent;
}
.legal-toc__list::-webkit-scrollbar { width: 4px; }
.legal-toc__list::-webkit-scrollbar-thumb { background: rgba(38,140,67,.3); border-radius: 99px; }

.legal-toc__item {
  display: block;
  padding: .5rem .85rem;
  border-radius: 10px;
  font-size: clamp(.92rem, .1vw + .88rem, .98rem);
  font-weight: 500;
  color: var(--g4);
  text-decoration: none;
  transition: all .2s var(--ease);
  line-height: 1.4;
  position: relative;
}
.legal-toc__item::before {
  content: '';
  position: absolute; inset-inline-start: .3rem; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--p2);
  border-radius: 99px;
  transition: height .2s var(--ease);
}
.legal-toc__item:hover {
  color: var(--p1);
  background: rgba(38,140,67,.07);
}
.legal-toc__item:hover::before { height: 60%; }
.legal-toc__item.is-active {
  color: var(--p1);
  background: rgba(38,140,67,.1);
  font-weight: 700;
}
.legal-toc__item.is-active::before { height: 70%; }

/* ── Document Body ── */
.legal-doc {
  width: 100%;
  min-width: 0;
  max-width: 920px;
}

.legal-section {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  scroll-margin-top: calc(var(--nav-h) + 56px + 2.5rem);
}
.legal-section:first-child { padding-top: 0; }
.legal-section:last-child { border-bottom: none; padding-bottom: 0; }

.legal-section__title {
  font-size: clamp(1.45rem, .8vw + 1.1rem, 1.85rem);
  font-weight: 800;
  color: var(--p0);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  line-height: 1.25;
}

.legal-section__title-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--p5), rgba(212,245,200,.6));
  color: var(--p1);
  font-size: .88rem;
  font-weight: 800;
  border: 1px solid rgba(38,140,67,.15);
  flex-shrink: 0;
}

.legal-section__title-text {
  flex: 1;
}

.legal-section__body {
  font-size: clamp(1.04rem, .2vw + .96rem, 1.14rem);
  color: var(--muted);
  line-height: 1.95;
}

.legal-section__body p {
  margin-bottom: 1rem;
  color: var(--muted);
}
.legal-section__body p:last-child { margin-bottom: 0; }

/* ── Lists ── */
.legal-list {
  list-style: none;
  display: grid;
  gap: .65rem;
  margin: .75rem 0 1rem;
  padding: 0;
}

.legal-list__item {
  display: flex; align-items: flex-start; gap: .75rem;
  color: var(--muted);
  font-size: clamp(1rem, .15vw + .93rem, 1.08rem);
  line-height: 1.82;
  padding: .68rem .96rem;
  border-radius: 10px;
  background: rgba(0,0,0,.018);
  border: 1px solid rgba(0,0,0,.04);
  transition: background .2s, border-color .2s;
}
.legal-list__item:hover {
  background: rgba(38,140,67,.04);
  border-color: rgba(38,140,67,.1);
}

.legal-list__bullet {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--p5), rgba(212,245,200,.6));
  color: var(--p2);
  flex-shrink: 0;
  margin-top: .15rem;
}

/* ── Subsections (for Privacy section 3) ── */
.legal-subsection {
  margin: 1.25rem 0;
  border-radius: var(--r-md);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}
.legal-subsection__label {
  padding: .8rem 1.1rem;
  font-weight: 700;
  font-size: clamp(1rem, .12vw + .95rem, 1.06rem);
  color: var(--p1);
  background: linear-gradient(135deg, rgba(212,245,200,.45), rgba(238, 234, 242, .32));
  border-bottom: 1px solid rgba(38,140,67,.12);
}
.legal-subsection__items {
  padding: .85rem 1.1rem;
  display: grid; gap: .55rem;
  background: var(--surface);
}
.legal-subsection__item {
  display: flex; align-items: center; gap: .65rem;
  font-size: clamp(1rem, .12vw + .95rem, 1.06rem); color: var(--muted); line-height: 1.75;
}
.legal-subsection__item-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--p3); flex-shrink: 0;
}

/* ── Note / Callout ── */
.legal-note {
  display: flex; gap: .85rem;
  margin-top: 1.1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-md);
  background: rgba(38,140,67,.06);
  border: 1px solid rgba(38,140,67,.15);
  border-inline-start: 4px solid var(--p2);
}
.legal-note svg { color: var(--p2); flex-shrink: 0; margin-top: .12rem; }
.legal-note__text {
  font-size: clamp(.96rem, .12vw + .91rem, 1.02rem); color: var(--p1); line-height: 1.78; font-weight: 500;
}

/* ── Intro text before list ── */
.legal-intro-text {
  font-size: clamp(1.02rem, .16vw + .95rem, 1.1rem); color: var(--muted); line-height: 1.88;
  margin-bottom: .65rem;
}

/* ── Print button floating ── */
.legal-print-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.2rem;
  border-radius: var(--r-full);
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--g4);
  font-size: .84rem; font-weight: 600;
  cursor: pointer;
  transition: all .25s var(--ease);
  text-decoration: none;
}
.legal-print-btn:hover {
  background: var(--p5);
  color: var(--p1);
  border-color: rgba(38,140,67,.2);
}

/* ── Last updated card ── */
.legal-meta-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 2.5rem;
  padding: 1rem 1.4rem;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--sh-xs);
}
.legal-meta-card__date {
  display: flex; align-items: center; gap: .55rem;
  font-size: .88rem; color: var(--g4); font-weight: 500;
}
.legal-meta-card__date svg { color: var(--p2); }

/* ── Animations ── */
@keyframes blink {
  0%,100% { opacity: 1; } 50% { opacity: .3; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }

/* ── RTL Adjustments ── */
[dir="rtl"] .legal-hero__panel { text-align: right; }
[dir="rtl"] .legal-section__title { flex-direction: row; }
[dir="rtl"] .legal-list__item { flex-direction: row; }
[dir="rtl"] .legal-note { border-inline-start: 4px solid var(--p2); }
[dir="rtl"] .legal-toc__item::before { inset-inline-start: .3rem; }
[dir="rtl"] .back-to-top { right: auto; left: 2rem; }
[dir="rtl"] .legal-subsection__item { flex-direction: row; }
[dir="rtl"] .legal-meta-card { flex-direction: row-reverse; }
[dir="rtl"] .legal-tabs { flex-direction: row; }
[dir="rtl"] .legal-tab { flex-direction: row; }

/* ── Responsive ── */

/* Desktop: scroll inside the legal document area */
@media (min-width: 901px) {
  .legal-layout {
    height: calc(100vh - var(--nav-h) - 56px);
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow: hidden;
  }

  .legal-toc {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .legal-doc {
    height: 100%;
    overflow-y: auto;
    padding-inline-end: .45rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .legal-doc::-webkit-scrollbar { width: 0; height: 0; }

  .legal-section {
    scroll-margin-top: 1rem;
  }
}

/* Tablet / smaller desktop */
@media (max-width: 1100px) {
  :root { --legal-container-max: 1080px; }
  .legal-layout {
    grid-template-columns: 240px 1fr;
    gap: 2.5rem;
  }
}

/* Tablet */
@media (max-width: 900px) {
  :root { --legal-gutter: 1rem; }

  .legal-layout {
    grid-template-columns: 1fr;
    padding: 1.65rem 0 3.25rem;
    min-height: auto;
  }
  .legal-toc {
    position: static;
    top: auto;
    width: 100%;
    max-height: none;
  }
  .legal-doc { max-width: none; }
  .legal-toc__list { max-height: 220px; }
  .legal-hero { padding: 2.6rem 0 2.25rem; }
  .legal-hero__panel { padding: 1.2rem 1.15rem; border-radius: 14px; }
  .legal-section__title { font-size: clamp(1.25rem, 1.5vw + .8rem, 1.5rem); }
  .legal-section__body { font-size: 1rem; line-height: 1.86; }

}

/* Mobile */
@media (max-width: 640px) {
  .legal-page-body {
    font-size: 15px;
    line-height: 1.7;
  }

  .legal-hero { padding: 2.25rem 0 1.8rem; }
  .legal-hero__title { font-size: clamp(1.55rem, 6vw, 2.2rem); }
  .legal-hero__lead { font-size: .98rem; line-height: 1.75; }

  .legal-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0;
  }
  .legal-tabs::-webkit-scrollbar { display: none; }
  .legal-tab { padding: .9rem 1rem; font-size: .92rem; }

  .legal-layout { padding: 1.25rem 0 2.7rem; gap: 1.5rem; }
  .legal-section { padding: 2rem 0; }
  .legal-section__title { font-size: 1.24rem; }

  .legal-meta-card {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  [dir="rtl"] .legal-meta-card { align-items: flex-end; }

  .legal-list__item { padding: .6rem .78rem; font-size: .96rem; line-height: 1.72; }

  .legal-page-body .nav-link { font-size: .95rem; }
  .legal-page-body .footer__col-title { font-size: 1.02rem; }
  .legal-page-body .footer__link { font-size: .93rem; }
}

@media (max-width: 400px) {
  .legal-hero__panel { padding: 1rem .95rem; }
}

/* ── Print ── */
@media print {
  .header, .legal-tabs-wrap, .legal-toc, #scroll-progress, .back-to-top { display: none !important; }
  .legal-page { padding-top: 0; }
  .legal-hero { background: #f5f5f5; color: #000; padding: 2rem 0; }
  .legal-hero__panel {
    background: transparent;
    border-color: rgba(0,0,0,.1);
    box-shadow: none;
    padding: 0;
  }
  .legal-hero__title, .legal-hero__lead { color: #000 !important; }
  .legal-layout { grid-template-columns: 1fr; gap: 2rem; }
  .legal-doc { max-width: none; }
  .legal-section { break-inside: avoid; }
}