/* ==========================================================================
   xCRM Legal Pages — Privacy Policy + Terms
   Prefix: xlg- / xlg__
   Reuses hp__ header classes from xcrm-home.css.
   ========================================================================== */

/* ── Keyframes ── */
@keyframes xlg-rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes xlg-fade { from { opacity:0; } to { opacity:1; } }
@keyframes xlg-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes xlg-float { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(8px,-12px) scale(1.08); } }
@keyframes xlg-pop { 0% { opacity:0; transform:scale(0.9); } 100% { opacity:1; transform:scale(1); } }
@keyframes xlg-draw { to { stroke-dashoffset:0; } }

/* ── Base ── */
.xcrm-legal-page { font-family:var(--x-font-sans); background:var(--x-bg); color:var(--x-text); direction:rtl; min-height:100vh; }
.xcrm-legal-page *, .xcrm-legal-page *::before, .xcrm-legal-page *::after { box-sizing:border-box; }
.xlg { font-family:var(--x-font-sans); }

/* ── Scroll Progress ── */
.xlg-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:50; pointer-events:none; background:transparent; }
.xlg-progress__bar { height:100%; width:0%; background:linear-gradient(to left, #6366F1, #8B5CF6, #06B6D4); transform-origin:right; transition:width 0.15s ease-out; border-radius:0 3px 3px 0; }

/* ── Animations ── */
.xlg-anim { opacity:0; animation:xlg-rise 0.6s var(--x-ease-standard) forwards; }
.xlg-anim--1 { animation-delay:0.05s; } .xlg-anim--2 { animation-delay:0.12s; }
.xlg-anim--3 { animation-delay:0.2s; } .xlg-anim--4 { animation-delay:0.28s; }
.xlg-anim--5 { animation-delay:0.36s; }

/* ── Hero ── */
.xlg__hero { position:relative; padding:clamp(80px,12vw,120px) 0 clamp(48px,6vw,72px); overflow:hidden; }
.xlg__hero-bg { position:absolute; inset:0; pointer-events:none; }
.xlg__grid { position:absolute; inset:0; opacity:0.6; mask-image:radial-gradient(ellipse at 50% 30%, black 10%, transparent 65%); -webkit-mask-image:radial-gradient(ellipse at 50% 30%, black 10%, transparent 65%); }
.xlg__orb { position:absolute; border-radius:50%; filter:blur(60px); opacity:0.1; pointer-events:none; animation:xlg-float 24s ease-in-out infinite; }
.xlg__orb--1 { width:300px; height:300px; top:-80px; right:-60px; background:radial-gradient(circle, #6366F1, transparent 70%); }
.xlg__orb--2 { width:250px; height:250px; bottom:-60px; left:-40px; background:radial-gradient(circle, #8B5CF6, transparent 70%); animation-delay:-12s; }
.dark .xlg__orb { opacity:0.15; }
.xlg__hero-inner { max-width:72rem; margin:0 auto; padding-inline:clamp(16px,3vw,32px); position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; }

/* Breadcrumb */
.xlg__breadcrumb { display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--x-text-muted); margin-bottom:24px; }
.xlg__breadcrumb a { color:var(--x-text-muted); text-decoration:none; transition:color 0.2s; }
.xlg__breadcrumb a:hover { color:var(--x-primary); }
.xlg__breadcrumb-sep { opacity:0.4; }
.xlg__breadcrumb-current { color:var(--x-text); font-weight:600; }

/* Icon badge */
.xlg__hero-icon-wrap { position:relative; margin-bottom:20px; }
.xlg__hero-glow { position:absolute; inset:-12px; border-radius:50%; background:radial-gradient(circle, rgba(99,102,241,0.2), transparent 70%); filter:blur(12px); }
.xlg__hero-dash { position:absolute; inset:-8px; border-radius:50%; border:2px dashed rgba(99,102,241,0.25); animation:xlg-spin 28s linear infinite; }
.xlg__hero-icon { width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg, #6366F1, #8B5CF6); color:#fff; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; box-shadow:0 4px 20px rgba(99,102,241,0.3); }
@media (min-width:640px) { .xlg__hero-icon { width:64px; height:64px; } }

/* Eyebrow */
.xlg__eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:999px; border:1px solid rgba(99,102,241,0.2); background:rgba(255,255,255,0.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--x-primary); font-size:0.8rem; font-weight:700; margin:0 0 16px; }
.dark .xlg__eyebrow { background:rgba(13,19,32,0.7); color:#a5b4fc; }

/* Title */
.xlg__title { font-size:clamp(1.5rem,4vw,2.25rem); font-weight:900; line-height:1.3; letter-spacing:-0.02em; margin:0 0 16px; background:linear-gradient(to left, #6366F1, #8B5CF6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Description */
.xlg__desc { font-size:clamp(0.92rem,1.6vw,1.02rem); color:var(--x-text-highlight); line-height:1.75; max-width:42rem; margin:0 0 24px; }

/* Meta pills */
.xlg__meta { display:flex; flex-wrap:wrap; gap:10px; }
.xlg__meta-pill { display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:999px; background:var(--x-base); border:1px solid var(--x-border-subtle); font-size:0.78rem; }
.xlg__meta-pill svg { color:var(--x-primary); flex-shrink:0; }
.xlg__meta-label { color:var(--x-text-muted); font-weight:500; }
.xlg__meta-val { color:var(--x-text); font-weight:700; }

/* ── Content Layout ── */
.xlg__content { max-width:72rem; margin:0 auto; padding:clamp(32px,5vw,56px) clamp(16px,3vw,32px) clamp(64px,8vw,96px); }
.xlg__layout { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:1024px) { .xlg__layout { grid-template-columns:250px minmax(0,1fr); } }

/* ── TOC (desktop) ── */
.xlg__toc { display:none; }
@media (min-width:1024px) {
  .xlg__toc { display:block; position:sticky; top:6rem; align-self:start; max-height:calc(100vh - 8rem); }
}
.xlg__toc-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.xlg__toc-icon { width:28px; height:28px; border-radius:8px; background:var(--x-soft-primary); color:var(--x-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.xlg__toc-title { font-size:0.82rem; font-weight:800; color:var(--x-text); flex:1; }
.xlg__toc-pct { font-size:0.82rem; font-weight:800; color:var(--x-primary); }
.xlg__toc-progress { height:6px; border-radius:999px; background:rgba(102,112,133,0.1); margin-bottom:16px; overflow:hidden; }
.xlg__toc-progress-bar { height:100%; width:0%; border-radius:999px; background:linear-gradient(to left, #6366F1, #8B5CF6, #06B6D4); transform-origin:right; transition:width 0.15s ease-out; }
.xlg__toc-nav { display:flex; flex-direction:column; gap:4px; max-height:55vh; overflow-y:auto; scrollbar-width:thin; }
.xlg__toc-nav::-webkit-scrollbar { width:4px; }
.xlg__toc-nav::-webkit-scrollbar-thumb { background:var(--x-border); border-radius:4px; }
.xlg__toc-link { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; text-decoration:none; transition:all 0.25s var(--x-ease-standard); position:relative; }
.xlg__toc-num { width:22px; height:22px; border-radius:50%; background:rgba(102,112,133,0.1); color:var(--x-text-muted); display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; flex-shrink:0; transition:all 0.25s; }
.xlg__toc-text { font-size:0.78rem; color:var(--x-text-muted); transition:color 0.25s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xlg__toc-link:hover .xlg__toc-text { color:var(--x-text); }
.xlg__toc-link:hover .xlg__toc-num { background:rgba(99,102,241,0.15); color:var(--x-primary); }
.xlg__toc-link.is-active { background:rgba(99,102,241,0.08); box-shadow:inset 0 0 0 1px rgba(99,102,241,0.18); }
.xlg__toc-link.is-active .xlg__toc-num { background:#6366F1; color:#fff; }
.xlg__toc-link.is-active .xlg__toc-text { color:var(--x-primary); font-weight:700; }

/* ── TOC (mobile) ── */
.xlg__toc-mobile { margin-bottom:24px; }
@media (min-width:1024px) { .xlg__toc-mobile { display:none; } }
.xlg__toc-mobile-header { display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:800; color:var(--x-text); margin-bottom:10px; }
.xlg__toc-mobile-header svg { color:var(--x-primary); }
.xlg__toc-mobile-pct { margin-right:auto; color:var(--x-primary); font-weight:800; }
.xlg__toc-mobile-scroll { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
.xlg__toc-mobile-scroll::-webkit-scrollbar { display:none; }
.xlg__toc-chip { flex-shrink:0; padding:7px 14px; border-radius:999px; background:var(--x-base); border:1px solid var(--x-border-subtle); font-size:0.75rem; font-weight:600; color:var(--x-text-muted); text-decoration:none; white-space:nowrap; scroll-snap-align:start; transition:all 0.2s; }
.xlg__toc-chip span { color:var(--x-primary); font-weight:800; margin-left:4px; }
.xlg__toc-chip.is-active { background:rgba(99,102,241,0.08); border-color:rgba(99,102,241,0.25); color:var(--x-primary); }

/* ── Main column ── */
.xlg__main { min-width:0; }

/* Intro callout */
.xlg__intro { display:flex; gap:14px; align-items:flex-start; padding:1.25rem; border-radius:1rem; border:1px solid rgba(99,102,241,0.15); background:linear-gradient(to left, rgba(99,102,241,0.04), rgba(139,92,246,0.03)); margin-bottom:2rem; }
.dark .xlg__intro { background:linear-gradient(to left, rgba(99,102,241,0.08), rgba(139,92,246,0.05)); }
.xlg__intro-icon { width:36px; height:36px; border-radius:10px; background:rgba(99,102,241,0.1); color:var(--x-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.xlg__intro p { font-size:0.875rem; color:var(--x-text-highlight); line-height:1.8; margin:0; }

/* ── Section cards ── */
.xlg__section { position:relative; background:var(--x-base); border:1px solid var(--x-border-subtle); border-radius:1rem; padding:1.25rem; margin-bottom:1.25rem; box-shadow:var(--x-shadow-soft); transition:box-shadow 0.3s, border-color 0.3s; scroll-margin-top:7rem; overflow:hidden; }
@media (min-width:640px) { .xlg__section { padding:1.75rem; } }
.xlg__section:hover { box-shadow:var(--x-shadow-card-hover); }
.xlg__section-accent { position:absolute; top:0; right:0; left:0; height:2px; background:linear-gradient(to left, #6366F1, #8B5CF6, #06B6D4); transform:scaleX(0); transform-origin:right; transition:transform 0.4s var(--x-ease-standard); }
.xlg__section:hover .xlg__section-accent { transform:scaleX(1); }
.xlg__section-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.xlg__section-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; }
.xlg__section-num { position:absolute; bottom:-6px; left:-6px; width:22px; height:22px; border-radius:50%; color:#fff; font-size:0.65rem; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(99,102,241,0.3); }
.xlg__section-title { font-size:clamp(1rem,2.5vw,1.125rem); font-weight:800; margin:0; line-height:1.4; }
.xlg__section-title a { color:var(--x-text); text-decoration:none; transition:color 0.2s; }
.xlg__section-title a:hover { color:var(--x-primary); }
.xlg__section-body { padding-right:2px; }

/* ── Block renderers ── */
.xlg__p { font-size:0.875rem; color:var(--x-text-highlight); line-height:1.9; margin:0 0 1rem; }
@media (min-width:640px) { .xlg__p { font-size:0.9375rem; line-height:2; } }
.xlg__p:last-child { margin-bottom:0; }

.xlg__list { list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:0.625rem; }
.xlg__list li { display:flex; gap:10px; align-items:flex-start; font-size:0.85rem; color:var(--x-text-highlight); line-height:1.7; }
.xlg__list li svg { color:var(--x-primary); flex-shrink:0; margin-top:3px; }

.xlg__callout { display:flex; gap:12px; align-items:flex-start; padding:1rem; border-radius:0.75rem; border:1px solid; margin:1rem 0; }
.xlg__callout-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.xlg__callout-body { flex:1; min-width:0; }
.xlg__callout-title { display:block; font-size:0.82rem; font-weight:700; margin-bottom:4px; }
.xlg__callout-body p { font-size:0.82rem; color:var(--x-text-highlight); line-height:1.75; margin:0; }
.xlg__callout-link { display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:0.78rem; font-weight:700; color:var(--x-primary); text-decoration:none; transition:color 0.2s; }
.xlg__callout-link:hover { color:var(--x-primary-hover); }

.xlg__subs { display:grid; grid-template-columns:1fr; gap:0.75rem; margin:1rem 0; }
@media (min-width:640px) { .xlg__subs { grid-template-columns:1fr 1fr; } }
.xlg__sub { padding:1rem; border-radius:0.75rem; border:1px solid var(--x-border-subtle); background:rgba(102,112,133,0.04); }
.xlg__sub strong { display:block; font-size:0.85rem; font-weight:700; color:var(--x-text); margin-bottom:4px; }
.xlg__sub p { font-size:0.78rem; color:var(--x-text-highlight); line-height:1.6; margin:0; }

/* ── Related links ── */
.xlg__related { margin-top:2rem; padding:1.5rem; border-radius:1rem; border:1px solid rgba(99,102,241,0.15); background:linear-gradient(to left, rgba(99,102,241,0.03), var(--x-base), rgba(139,92,246,0.03)); position:relative; overflow:hidden; }
.dark .xlg__related { background:linear-gradient(to left, rgba(99,102,241,0.06), var(--x-base), rgba(139,92,246,0.04)); }
.xgl__related-header { display:flex; align-items:center; justify-content:center; gap:8px; font-size:0.95rem; font-weight:800; color:var(--x-text); margin-bottom:16px; }
.xgl__related-header svg { color:var(--x-primary); }
.xlg__related-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:640px) { .xlg__related-grid { grid-template-columns:1fr 1fr; } }
.xlg__related-card { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:0.75rem; background:var(--x-base); border:1px solid var(--x-border-subtle); text-decoration:none; transition:all 0.25s var(--x-ease-standard); }
.xlg__related-card:hover { transform:translateY(-2px); border-color:rgba(99,102,241,0.3); box-shadow:var(--x-shadow-soft); }
.xlg__related-icon { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.xlg__related-body { flex:1; min-width:0; }
.xlg__related-body strong { display:block; font-size:0.85rem; font-weight:700; color:var(--x-text); margin-bottom:2px; }
.xlg__related-body span { font-size:0.75rem; color:var(--x-text-muted); }
.xlg__related-arrow { color:var(--x-text-muted); flex-shrink:0; transition:transform 0.25s var(--x-ease-standard), color 0.25s; }
.xlg__related-card:hover .xlg__related-arrow { transform:translateX(-4px); color:var(--x-primary); }

/* ── Back to top FAB ── */
.xlg__fab { position:fixed; bottom:1.5rem; left:1.5rem; width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, #6366F1, #8B5CF6); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:50; box-shadow:0 0 20px rgba(99,102,241,0.35); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transform:translateY(12px) scale(0.8); transition:all 0.3s var(--x-ease-standard); }
.xlg__fab.is-visible { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.xlg__fab:hover { transform:translateY(0) scale(1.08); }
.xlg__fab:active { transform:translateY(0) scale(0.94); }
.xlg__fab:focus-visible { outline:2px solid var(--x-primary); outline-offset:2px; }

/* ── Footer ── */
.xlg__footer { border-top:1px solid var(--x-border-subtle); padding:24px 0; background:var(--x-base); }
.xlg__footer-inner { max-width:72rem; margin:0 auto; padding-inline:clamp(16px,3vw,32px); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.xlg__footer-copy { font-size:0.78rem; color:var(--x-text-muted); margin:0; }
.xlg__footer-links { display:flex; gap:18px; }
.xlg__footer-links a { font-size:0.8rem; font-weight:600; color:var(--x-text-highlight); text-decoration:none; transition:color 0.2s; }
.xlg__footer-links a:hover { color:var(--x-primary); }

/* ── Focus visible ── */
.xlg__toc-link:focus-visible, .xlg__toc-chip:focus-visible, .xlg__related-card:focus-visible, .xlg__section-title a:focus-visible {
  outline:2px solid var(--x-primary); outline-offset:2px; border-radius:8px;
}

/* ── Reveal ── */
[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity 0.6s var(--x-ease-standard), transform 0.6s var(--x-ease-standard); }
[data-reveal].is-visible { opacity:1; transform:none; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .xlg-anim, [data-reveal], .xlg__hero-dash, .xlg__orb {
    animation:none !important; opacity:1 !important; transform:none !important; transition:none !important;
  }
  .xlg-progress__bar, .xlg__toc-progress-bar { transition:none; }
}