/* Shared styling for /privacy-policy, /terms, /data-deletion.
   Matches wasally-landing.html's REAL look: dark navy nav + footer
   bookending a light (white/slate) content area — not an all-dark page.
   Requires the Tailwind CDN script (same as wasally-landing.html) for the
   nav/footer utility classes to render. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  background: #ffffff;
  color: #334155; /* slate-700 */
  line-height: 1.85;
}

a { color: #2563eb; } /* blue-600, matches .btn-p / brand accent */

nav.legal-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,22,40,.92);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid rgba(59,130,246,.2);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 10px;
}
nav.legal-nav .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
nav.legal-nav .brand span {
  font-family: "IBM Plex Mono", monospace; font-weight: 700; color: #fff; font-size: 15px;
}
nav.legal-nav .back {
  margin-inline-start: auto; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.55); text-decoration: none; transition: color .15s;
}
nav.legal-nav .back:hover { color: #93c5fd; }

main.legal {
  max-width: 780px; margin: 0 auto; padding: 48px 20px 90px;
}
main.legal h1 {
  font-size: 30px; font-weight: 700; color: #0f172a; margin-bottom: 6px; letter-spacing: -0.01em;
}
main.legal .updated {
  font-size: 13px; color: #94a3b8; margin-bottom: 36px;
}
main.legal h2 {
  font-size: 19px; font-weight: 700; color: #1d4ed8; margin: 34px 0 12px;
}
main.legal p, main.legal li { font-size: 14.5px; color: #475569; }
main.legal ul, main.legal ol { padding-inline-start: 22px; margin: 8px 0 8px; }
main.legal li { margin-bottom: 6px; }
main.legal strong { color: #1e293b; }
main.legal .callout {
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 12px; padding: 16px 18px; margin: 16px 0;
}
main.legal .callout p { color: #1e3a8a; }
main.legal .callout.warn {
  background: #fffbeb; border-color: #fde68a;
}
main.legal .callout.warn p { color: #92400e; }
main.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13.5px; }
main.legal th, main.legal td {
  text-align: start; padding: 8px 10px; border-bottom: 1px solid #e2e8f0;
  color: #475569;
}
main.legal th { color: #1d4ed8; font-weight: 600; }

form.request-form {
  display: flex; flex-direction: column; gap: 12px; margin-top: 16px; max-width: 480px;
}
form.request-form label { font-size: 13px; color: #64748b; margin-bottom: -6px; }
form.request-form input, form.request-form textarea, form.request-form select {
  background: #f8fafc; border: 1px solid #cbd5e1;
  border-radius: 8px; padding: 10px 12px; color: #0f172a; font-family: inherit; font-size: 14px;
}
form.request-form input:focus, form.request-form textarea:focus, form.request-form select:focus {
  outline: none; border-color: #2563eb;
}
form.request-form button {
  background: #2563eb; color: #fff; font-weight: 600; border: none; border-radius: 8px;
  padding: 12px 20px; font-size: 14px; cursor: pointer; font-family: inherit;
  transition: background .18s;
}
form.request-form button:hover { background: #1d4ed8; }
#requestFormStatus { font-size: 13px; color: #1d4ed8; display: none; margin-top: 6px; }