/*
 * The public pages: privacy, terms, account deletion, support.
 *
 * Arabic first and right-to-left, with the English below it on the same page
 * rather than behind a toggle. A store reviewer reads English and must not have
 * to find a language switch to check the policy; an Omani company reads Arabic
 * and should not have to either.
 *
 * Deliberately plain. These pages are read once, often on a phone, sometimes by
 * someone who is annoyed — legibility beats personality here.
 */

:root {
  --ink: #1a1618;
  --ink-muted: #6b6266;
  --line: #e4dedf;
  --surface: #ffffff;
  --background: #faf8f8;
  --brand: #d10a11;
  --brand-dark: #9b060c;
  --radius: 12px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f4f0f1;
    --ink-muted: #a9a0a3;
    --line: #332d2f;
    --surface: #1f1b1c;
    --background: #141112;
    --brand: #ff6b6b;
    --brand-dark: #ff9a9a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

.brand {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}

main { padding: 32px 0 64px; }

section[lang="ar"] { direction: rtl; text-align: right; }
section[lang="en"] { direction: ltr; text-align: left; }

section + section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

h1 { font-size: 26px; line-height: 1.35; margin: 0 0 8px; }
h2 { font-size: 19px; margin: 32px 0 8px; }
p, li { color: var(--ink); }
.muted { color: var(--ink-muted); font-size: 14px; }

ul { padding-inline-start: 22px; }
li { margin-bottom: 6px; }

a { color: var(--brand); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 20px 0;
}

label { display: block; font-weight: 600; margin-bottom: 6px; }

input[type="email"], textarea {
  width: 100%;
  padding: 12px;
  font: inherit;
  color: var(--ink);
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 10px;
}

input[type="email"] { direction: ltr; text-align: left; }

textarea { min-height: 90px; resize: vertical; }

button {
  margin-top: 16px;
  padding: 13px 20px;
  width: 100%;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

button:disabled { opacity: 0.55; cursor: default; }

/* Status messages carry an icon character as well as a colour, so they still
   read in greyscale and to someone who does not see red as different. */
.result {
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--background);
}

.result[hidden] { display: none; }

footer {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  color: var(--ink-muted);
  font-size: 14px;
}

footer a { margin-inline-end: 16px; }