/* assets/css/legal.css — صفحات نصّية طويلة: الخصوصية، والشروط لاحقاً.
   Built on variables.css and style.css, so it inherits the site's palette and
   type rather than restating them. */

.legal-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: #fff;
  padding: 130px 0 60px;
  text-align: center;
}
.legal-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; margin-bottom: 14px; }
.legal-hero p { color: #cfe0f0; max-width: 640px; margin: 0 auto; }
.legal-meta {
  display: inline-flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
  margin-top: 22px; font-size: 13.5px; color: #a9c4dd;
}
.legal-meta b { color: #fff; font-weight: 700; }

.legal-body { padding: 56px 0 80px; }
.legal-layout { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: start; }

/* الفهرس. A privacy policy is read by someone looking for one paragraph —
   usually "what do you collect" or "how do I delete it" — not from the top. */
.legal-toc {
  position: sticky; top: 96px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 20px; background: var(--paper); box-shadow: var(--shadow-sm);
}
.legal-toc h2 { font-size: 15px; color: var(--navy); margin-bottom: 12px; }
.legal-toc a {
  display: block; padding: 7px 10px; border-radius: 8px;
  color: var(--muted); font-size: 14px;
}
.legal-toc a:hover { background: var(--sky); color: var(--blue); }

.legal-content section { margin-bottom: 42px; scroll-margin-top: 100px; }
.legal-content h2 {
  font-size: 22px; font-weight: 800; color: var(--navy);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--sky);
}
.legal-content h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 22px 0 8px; }
.legal-content p { color: var(--ink); margin-bottom: 14px; }
.legal-content ul { margin: 0 0 16px; padding-inline-start: 22px; list-style: disc; }
.legal-content li { margin-bottom: 8px; }
.legal-content a:not(.btn) { color: var(--blue); text-decoration: underline; }

.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14.5px; }
.legal-table th, .legal-table td {
  text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.legal-table th { background: var(--sky); color: var(--navy); font-weight: 700; }
.legal-table-wrap { overflow-x: auto; }

/* The strongest paragraph in this document is the one listing what the app
   does NOT take, so it is the one that looks different. */
.legal-callout {
  border: 1px solid var(--line); border-inline-start: 4px solid var(--green);
  background: #f2fbf7; border-radius: var(--radius-sm);
  padding: 18px 20px; margin: 4px 0 20px;
}
.legal-callout.warn { border-inline-start-color: var(--gold); background: var(--gold-light); }
.legal-callout p:last-child { margin-bottom: 0; }
.legal-callout ul { margin-bottom: 0; }

.legal-lang-switch {
  display: inline-flex; gap: 8px; margin-top: 20px;
}
.legal-lang-switch a {
  padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .3);
}
.legal-lang-switch a:hover { background: rgba(255, 255, 255, .22); }

/* القسم الإنجليزي داخل صفحة عربية.
   dir on the section, not on the page: the store reviewer reads this half and
   the guardian reads the other, and neither should meet the other's direction. */
#en { direction: ltr; text-align: left; }
#en .legal-content h2, #en h3 { text-align: left; }
#en .legal-table th, #en .legal-table td { text-align: left; }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-hero { padding: 110px 0 44px; }
}

/* ── نموذج طلب الحذف ─────────────────────────────────────────────────── */
.request-form {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.request-form label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink); }
.request-form label small { font-weight: 400; color: var(--muted); }
.request-form .req { color: #c74444; }
.request-form .wide, .request-form .form-submit { grid-column: 1 / -1; }
.request-form input, .request-form select, .request-form textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 15px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
}
.request-form input:focus, .request-form select:focus, .request-form textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24, 119, 201, .14);
}
.request-form textarea { resize: vertical; line-height: 1.7; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-note { color: var(--muted); font-size: 13px; margin: 0; }

/* المصيدة: مخفيّة عن الإنسان وعن قارئ الشاشة، وموجودة للبرامج الآلية.
   Not display:none — some bots skip what is display:none, and a real user on a
   screen reader must not be asked to fill a field that means "you are a bot". */
.honeypot {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.form-message { margin-top: 18px; font-size: 14.5px; font-weight: 600; }
.form-message.ok {
  color: var(--green); background: #f2fbf7; border: 1px solid #cdeade;
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.form-message.error {
  color: #a83232; background: #fff3f3; border: 1px solid #f2d4d4;
  border-radius: var(--radius-sm); padding: 14px 16px;
}