/* ===========================================================
   legal.css — Terms, Refund and Privacy pages.

   Loaded AFTER the active theme's stylesheet. Every colour is read
   through a fallback chain so one file serves both theme families:
     var(--bg,  var(--s3-bg,  #0C0C0C))   classic themes define --bg,
     var(--text,var(--s3-ink, #D7E2EA))   Studio 3D defines --s3-bg / --s3-ink.
   Whichever is defined wins; the literal is the last resort.
   =========================================================== */

.lg-body{
  --lg-bg:    var(--bg,     var(--s3-bg,  #0C0C0C));
  --lg-ink:   var(--text,   var(--s3-ink, #D7E2EA));
  --lg-line:  var(--line,   var(--s3-line, rgba(215,226,234,.16)));
  --lg-accent:var(--accent, #B600A8);
  --lg-max:   760px;

  background: var(--lg-bg);
  color: var(--lg-ink);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
.lg-body *,
.lg-body *::before,
.lg-body *::after{ box-sizing: border-box; }

/* ---------------------------------------------------------- top bar */
.lg-top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.25rem clamp(1.25rem, 5vw, 3rem);
  border-bottom: 1px solid var(--lg-line);
  flex-wrap: wrap;
}
.lg-brand{
  font-weight:700; letter-spacing:.02em; font-size:1.05rem;
  color: var(--lg-ink); text-decoration:none;
}
.lg-top-end{ display:flex; align-items:center; gap:1rem; }
.lg-lang{ display:flex; gap:.3rem; }
.lg-lang a{
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-decoration:none;
  color: var(--lg-ink); opacity:.45; padding:.25rem .5rem; border-radius:999px;
  transition: opacity .2s, background-color .2s;
}
.lg-lang a:hover{ opacity:.85; }
.lg-lang a.on{ opacity:1; background: color-mix(in srgb, var(--lg-ink) 12%, transparent); }
.lg-back{
  font-size:.82rem; color:var(--lg-ink); opacity:.6; text-decoration:none;
  transition: opacity .2s;
}
.lg-back:hover{ opacity:1; }

/* ------------------------------------------------------------- body */
.lg-main{
  flex:1 0 auto;
  width:100%; max-width: var(--lg-max);
  margin-inline:auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2rem) 4rem;
}

.lg-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom: 2.5rem; }
.lg-tabs a{
  font-size:.78rem; text-decoration:none; color:var(--lg-ink);
  border:1px solid var(--lg-line); border-radius:999px; padding:.45rem 1rem;
  opacity:.65; transition: opacity .2s, border-color .2s, background-color .2s;
}
.lg-tabs a:hover{ opacity:1; border-color: color-mix(in srgb, var(--lg-ink) 40%, transparent); }
.lg-tabs a.on{
  opacity:1; border-color: var(--lg-accent);
  background: color-mix(in srgb, var(--lg-accent) 14%, transparent);
}

.lg-h1{
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height:1.1; font-weight:700; letter-spacing:-.02em;
  margin: 0 0 1.75rem;
}
.lg-lead{ opacity:.7; }

/* The document itself. Long-form reading: generous measure, calm rhythm. */
.lg-doc{ font-size: clamp(.98rem, 1.4vw, 1.06rem); line-height: 1.75; }
.lg-doc h2{
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height:1.3; font-weight:600; letter-spacing:-.01em;
  margin: 2.75rem 0 .85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lg-line);
}
.lg-doc h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.lg-doc p{ margin: 0 0 1.15rem; opacity:.86; }
.lg-doc strong{ font-weight:600; opacity:1; color:var(--lg-ink); }
.lg-doc ul{ margin: 0 0 1.15rem; padding-inline-start: 1.35rem; }
.lg-doc li{ margin-bottom:.5rem; opacity:.86; }
.lg-doc a{ color: var(--lg-accent); }

html[lang="ar"] .lg-doc{ line-height: 2.05; }
html[lang="ar"] .lg-h1,
html[lang="ar"] .lg-doc h2{ letter-spacing: 0; }

.lg-foot{
  display:flex; flex-wrap:wrap; gap:1.25rem;
  margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--lg-line);
}
.lg-cta{
  font-size:.85rem; text-decoration:none; color:var(--lg-ink); opacity:.7;
  transition: opacity .2s;
}
.lg-cta:hover{ opacity:1; }

/* ---------------------------------------------------------- bottom */
.lg-bottom{
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding: 1.5rem clamp(1.25rem, 5vw, 3rem);
  border-top: 1px solid var(--lg-line);
  font-size:.75rem; opacity:.45;
}
.lg-bottom-links{ display:flex; gap:1rem; flex-wrap:wrap; }
.lg-bottom-links a{ color:var(--lg-ink); text-decoration:none; }
.lg-bottom-links a:hover{ text-decoration:underline; }

/* ------------------------------------------------------ the footer
   links added to the two public layouts */
.legal-links{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.legal-links a{ text-decoration:none; opacity:.55; transition:opacity .2s; }
.legal-links a:hover{ opacity:1; }

@media print{
  .lg-top, .lg-tabs, .lg-foot, .lg-bottom{ display:none; }
  .lg-body{ background:#fff; color:#000; }
  .lg-doc p, .lg-doc li{ opacity:1; }
}