/*
 * Legal pages (terms, privacy, refund, cancellation, DPA, accessibility; English and Arabic).
 * Same world as the homepage: dark violet header and hero, Cairo display type, the homepage's purple, its footer.
 * Type scale: 14 / 17 / 19 / 28 / clamp(34-56). Spacing steps: 8 / 12 / 16 / 24 / 32 / 48 / 64.
 */
:root {
  --lg-primary: #7c3aed;
  --lg-primary-deep: #6d28d9;
  --lg-grad: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  --lg-ink: #12101c;
  --lg-text: #2b2f3d;
  --lg-muted: #5d6475;
  --lg-line: #ece9f5;
  --lg-surface: #f7f6fb;
  --lg-tint: #f3effe;
  --lg-night: #0c0816;
  --lg-header-h: 76px;
  --lg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--lg-header-h) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: #ffffff;
  color: var(--lg-text);
  font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(124, 58, 237, 0.18); color: var(--lg-ink); }
a { color: var(--lg-primary-deep); text-decoration: underline; text-decoration-color: rgba(109, 40, 217, 0.35); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--lg-primary); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---- Header: the homepage's dark bar ---- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 8, 22, 0.92);
  border-bottom: 1px solid rgba(167, 139, 250, 0.35);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}
.header-content { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--lg-header-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #f8fafc; font-size: 28px; line-height: 1; text-decoration: none; }
.logo:hover { color: #ffffff; }
.logo-img { width: 40px; height: 40px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-lang {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(196, 181, 253, 0.4); border-radius: 11px; background: rgba(22, 16, 36, 0.9);
  color: #fafafa; font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color 0.2s var(--lg-ease), background 0.2s var(--lg-ease);
}
.header-lang svg { width: 16px; height: 16px; opacity: 0.85; }
.header-lang:hover { border-color: rgba(196, 181, 253, 0.8); background: rgba(36, 26, 58, 0.95); }
.cta-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px;
  border-radius: 11px; background: var(--lg-grad); color: #ffffff; font-size: 16px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3); transition: transform 0.2s var(--lg-ease), box-shadow 0.2s var(--lg-ease);
}
.cta-button:hover { color: #ffffff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(147, 51, 234, 0.4); }

/* ---- Hero: title on the homepage's night violet ---- */
.legal-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 50% -20%, rgba(124, 58, 237, 0.55), transparent 65%),
    radial-gradient(600px 320px at 92% 0%, rgba(56, 189, 248, 0.14), transparent 70%),
    radial-gradient(520px 300px at 4% 100%, rgba(147, 51, 234, 0.22), transparent 70%),
    var(--lg-night);
  color: #f8fafc;
  padding: 72px 0 64px;
}
.legal-hero::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.45), transparent);
}
.legal-hero h1 {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #f8fafc;
  text-wrap: balance;
}
[dir='rtl'] .legal-hero h1 { letter-spacing: 0; }
.legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 24px 0 0; font-size: 14px; color: rgba(237, 233, 254, 0.78); }
.legal-meta-date { display: inline-flex; align-items: center; gap: 8px; }
.legal-meta-date::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.18); }
.legal-hero .lang-note { margin: 12px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.7; color: rgba(237, 233, 254, 0.78); }
.legal-hero .lang-note a { color: #ddd6fe; text-decoration-color: rgba(221, 214, 254, 0.5); }

/* ---- Reading layout: contents beside the text ---- */
.legal-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.legal-toc { position: sticky; top: calc(var(--lg-header-h) + 32px); align-self: start; max-height: calc(100vh - var(--lg-header-h) - 64px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.legal-toc:hover, .legal-toc:focus-within { scrollbar-color: #d9d2f0 transparent; }
.legal-toc-title { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--lg-ink); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-toc a {
  display: block; padding: 8px 12px; border-radius: 10px;
  color: var(--lg-muted); font-size: 14px; line-height: 1.45; text-decoration: none;
  transition: background 0.2s var(--lg-ease), color 0.2s var(--lg-ease);
}
.legal-toc a:hover { background: var(--lg-surface); color: var(--lg-ink); }
.legal-toc a[aria-current='true'] { background: var(--lg-tint); color: var(--lg-primary-deep); font-weight: 700; }
.legal-toc-mobile { display: none; }

.legal-body { max-width: 72ch; min-width: 0; }
[dir='rtl'] .legal-body { line-height: 1.9; }
.legal-body > :first-child { margin-top: 0; }
.legal-body p { margin: 0 0 16px; }
.legal-body .intro { font-size: 19px; line-height: 1.75; color: var(--lg-ink); }
.legal-body h2 {
  margin: 56px 0 16px;
  padding-top: 48px;
  border-top: 1px solid var(--lg-line);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--lg-ink);
  text-wrap: balance;
}
[dir='rtl'] .legal-body h2 { letter-spacing: 0; }
.legal-body h3 { margin: 32px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--lg-ink); }
.legal-body strong { color: var(--lg-ink); font-weight: 700; }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-inline-start: 24px; }
.legal-body li { margin: 0 0 8px; padding-inline-start: 4px; }
.legal-body li::marker { color: var(--lg-primary); }
.legal-body h2:target, .legal-body h3:target { animation: lg-target 1.6s var(--lg-ease); }
@keyframes lg-target { from { color: var(--lg-primary); } to { color: var(--lg-ink); } }

/* A notice the reader must not miss (refunds, important limits). */
.highlight-box {
  margin: 24px 0;
  padding: 20px 24px;
  border: 1px solid #f2d7a6;
  border-radius: 16px;
  background: #fff8ea;
}
.highlight-box p, .highlight-box li { color: #6b4300; }
.highlight-box > :last-child { margin-bottom: 0; }
.highlight-box strong { color: #4a2e00; }

/* How to reach us. */
.contact-box {
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--lg-line);
  border-radius: 20px;
  background: var(--lg-surface);
}
.contact-box h2, .contact-box h3 { margin: 0 0 16px; padding: 0; border: 0; font-size: 28px; font-weight: 800; line-height: 1.3; color: var(--lg-ink); }
.contact-box p { margin: 0 0 8px; }
.contact-box > :last-child { margin-bottom: 0; }

/* The accessibility statement carries both languages on one page. */
.statement-ar { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--lg-line); font-family: 'Cairo', 'Tajawal', system-ui, sans-serif; line-height: 1.9; }

/* ---- Footer: the homepage's own (rules copied from homepage-bundle.css; the markup is its rendered footer) ---- */
footer *, footer *::before, footer *::after { margin: 0; padding: 0; }
footer { font-size: 16px; line-height: 1.6; }
footer .container { padding: 0 20px; }
footer a { text-decoration: none; }
.footer-logo-img { width: 32px; height: 32px; border-radius: 8px; vertical-align: middle; margin-left: 8px; }
footer { background: #1a202c; color: white; padding: 60px 0 30px; }
footer .container { max-width: 1200px; }
.footer-content { display: grid; grid-template-columns: minmax(220px, 1.35fr) repeat(5, minmax(0, 1fr)); gap: 24px 20px; margin-bottom: 40px; align-items: start; }
.footer-links { min-width: 0; }
.footer-publish .footer-compare-title { margin-top: 22px; }
.footer-seo .footer-blog-list > .footer-seo-group-label:first-child { margin-top: 0; padding-top: 0; }
.footer-brand h3 { font-size: 32px; font-weight: 400; margin-bottom: 15px; }
.footer-brand p { color: #94a3b8; line-height: 1.8; max-width: 320px; }
.footer-contact { margin-top: 16px; }
.footer-contact-title { font-size: 16px; font-weight: 400; color: #e2e8f0; margin-bottom: 8px; }
.footer-contact-line { color: #94a3b8; line-height: 1.8; margin: 0; }
.footer-contact-email { color: #e2e8f0; text-decoration: none; }
.footer-contact-wa { display: inline-flex; align-items: center; gap: 6px; }
.footer-contact-wa span { white-space: nowrap; }
.footer-contact-wa .footer-wa-icon { flex: none; color: #25d366; }
.footer-contact-email:hover { color: #ec4899; text-decoration: underline; }
.footer-links h4 { font-size: 18px; font-weight: 400; margin-bottom: 15px; }
.footer-links h4 .footer-blog-title-link { color: inherit; text-decoration: none; display: inline; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.footer-links h4 .footer-blog-title-link:hover { color: #ec4899; text-decoration: none; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links a:not(.footer-blog-title-link) { color: #94a3b8; text-decoration: none; display: block; padding: 8px 0; transition: color 0.3s ease; }
.footer-links a:not(.footer-blog-title-link):hover { color: #ec4899; }
.footer-seo-group-label { color: #e2e8f0; font-size: 13px; font-weight: 800; margin-top: 10px; padding-top: 4px; }
.footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid #334155; color: #64748b; }
.footer-payment-logos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.footer-payment-logos img { height: 24px; width: auto; object-fit: contain; border-radius: 4px; background: #ffffff; padding: 3px 6px; }
.footer-social { margin-top: 16px; }
.footer-social a { display: inline-block; }
.footer-social img { width: 22px; height: 22px; object-fit: cover; border-radius: 5px; }
.footer-legal-note { margin-top: 8px; font-size: 13px; line-height: 1.6; color: #94a3b8; }
.footer-rss-note, .footer-knowledge-note { margin-top: 8px; font-size: 13px; line-height: 1.6; color: #94a3b8; }
.footer-rss-note a, .footer-knowledge-note a { color: #e2e8f0; text-decoration: underline; text-underline-offset: 2px; }
.footer-rss-note a:hover, .footer-knowledge-note a:hover { color: #ec4899; }
.footer-knowledge-note .footer-knowledge-title { color: #94a3b8; font-weight: 700; text-decoration: none; }
.footer-knowledge-note .footer-knowledge-title:hover { color: #ec4899; }
.footer-knowledge-note .footer-knowledge-title::after { content: ':'; }
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
  .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .footer-content > .footer-brand { grid-column: 1 / -1; }
  .footer-content { align-items: start; }
  .footer-content > .footer-tools { grid-column: 1 / -1; grid-row: 2; }
  .footer-tools ul, .footer-policy ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .footer-content > .footer-publish { grid-column: 1; grid-row: 3 / span 2; }
  .footer-content > .footer-blog { grid-column: 2; grid-row: 3; }
  .footer-content > .footer-main { grid-column: 2; grid-row: 4; }
  .footer-content > .footer-policy { grid-column: 1 / -1; grid-row: 5; }
  .footer-links a:not(.footer-blog-title-link) { padding: 6px 0; line-height: 1.45; }
}

/* ---- Smaller screens ---- */
@media (max-width: 1024px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; }
  .legal-toc { display: none; }
  .legal-toc-mobile { display: block; margin: 0 0 32px; border: 1px solid var(--lg-line); border-radius: 16px; background: var(--lg-surface); }
  .legal-toc-mobile summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 20px;
    font-size: 14px; font-weight: 700; color: var(--lg-ink); cursor: pointer; list-style: none;
  }
  .legal-toc-mobile summary::-webkit-details-marker { display: none; }
  .legal-toc-mobile summary svg { width: 18px; height: 18px; color: var(--lg-primary); transition: transform 0.25s var(--lg-ease); }
  .legal-toc-mobile[open] summary svg { transform: rotate(180deg); }
  .legal-toc-mobile ol { list-style: none; margin: 0; padding: 0 8px 12px; display: grid; gap: 2px; }
  .legal-toc-mobile a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--lg-text); font-size: 14px; line-height: 1.45; text-decoration: none; }
  .legal-toc-mobile a:hover { background: var(--lg-tint); }
}
@media (max-width: 640px) {
  :root { --lg-header-h: 64px; }
  .container { padding: 0 16px; }
  .logo { font-size: 22px; gap: 8px; }
  .logo-img { width: 32px; height: 32px; }
  .header-actions { gap: 8px; }
  .header-lang { padding: 0 12px; }
  .header-lang svg { display: none; }
  .cta-button { padding: 0 16px; font-size: 14px; }
  .legal-hero { padding: 48px 0 40px; }
  .legal-layout { padding: 24px 16px 64px; }
  .legal-body .intro { font-size: 17px; }
  .legal-body h2 { margin-top: 40px; padding-top: 32px; font-size: 24px; }
  .contact-box { padding: 24px 20px; }
  .contact-box h2, .contact-box h3 { font-size: 24px; }
}

/* Closing acknowledgement on the Terms. */
.highlight-box.ack-box { border-color: #bfe5cc; background: #f1fbf4; }
.ack-box p, .ack-box strong { color: #14532d; }

.highlight-box a { color: #6b4300; text-decoration-color: rgba(107, 67, 0, 0.45); }

/* The homepage footer's copyright grey is 3.4:1 on the dark footer; the legal pages need 4.5:1. */
.footer-bottom { color: #94a3b8; }