/* ==========================================================================
   تنسيق الصفحات القانونية (الخصوصية، الشروط، الاسترجاع، تواصل معنا)
   ملف منفصل عن style.css عشان ما يأثر على حجم الصفحة الرئيسية ولا على
   ترتيب قواعد تكبير الخط الموجودة بآخر style.css.
   يعتمد على نفس متغيرات الألوان المعرّفة في style.css.
   ========================================================================== */

.legal-page {
  background: var(--bg-dark);
  color: var(--text-main);
  min-height: 100vh;
}

.legal-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 20px 72px;
}

/* ---------- الترويسة ---------- */
.legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-color);
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-main);
  text-decoration: none;
}

.legal-brand .logo-slot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.3px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  overflow: hidden;
  flex-shrink: 0;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
}

.legal-back:hover { color: var(--accent-hover); }

/* ---------- العنوان ---------- */
.legal-head { margin-bottom: 30px; }

.legal-head h1 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 5.5vw, 32px);
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.35;
}

.legal-updated {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.legal-intro {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-main);
  margin: 22px 0 34px;
}

/* ---------- فهرس سريع ---------- */
.legal-toc {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 36px;
  background: var(--bg-sidebar);
}

.legal-toc h2 {
  font-family: var(--font-heading);
  font-size: 14px;
  margin: 0 0 10px;
  color: var(--text-muted);
  font-weight: 700;
}

.legal-toc ol {
  margin: 0;
  padding-inline-start: 1.3em;
  font-size: 13.5px;
  line-height: 2.1;
}

.legal-toc a {
  color: var(--accent);
  text-decoration: none;
}

.legal-toc a:hover { text-decoration: underline; }

/* ---------- الأقسام ---------- */
.legal-section {
  margin-bottom: 34px;
  scroll-margin-top: 20px;
}

.legal-section h2 {
  font-family: var(--font-heading);
  font-size: clamp(17px, 3.6vw, 20px);
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.5;
}

.legal-section h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 20px 0 8px;
  color: var(--text-main);
}

.legal-section p,
.legal-section li {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--text-main);
}

.legal-section p { margin: 0 0 12px; }

.legal-section ul,
.legal-section ol {
  margin: 0 0 14px;
  padding-inline-start: 1.4em;
}

.legal-section li { margin-bottom: 7px; }

.legal-section strong { font-weight: 700; }

.legal-section a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- جدول ---------- */
.legal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 420px;
}

.legal-table th,
.legal-table td {
  padding: 11px 13px;
  text-align: right;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.7;
}

.legal-table th {
  background: var(--bg-input);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.legal-table tr:last-child td { border-bottom: none; }

/* ---------- صندوق تنبيه ---------- */
.legal-callout {
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin: 0 0 16px;
}

.legal-callout p { margin: 0; font-size: 14px; }

.legal-callout.is-warn {
  border-inline-start-color: var(--danger);
  background: var(--danger-soft);
}

/* ---------- بطاقات التواصل ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
}

.contact-card h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}

.contact-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.8;
}

.contact-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contact-value a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
  direction: ltr;
}

.contact-value a:hover { text-decoration: underline; }

.copy-mini {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}

.copy-mini:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- تذييل قانوني مشترك ---------- */
.legal-footer {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-bottom: 12px;
}

.legal-footer-links a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}

.legal-footer-links a:hover { color: var(--accent); }

.legal-footer-links a[aria-current="page"] {
  color: var(--accent);
  font-weight: 500;
}

.legal-copy {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 520px) {
  .legal-wrap { padding: 18px 16px 56px; }
  .legal-brand { font-size: 15.5px; }
}