/* ===== LEGAL CENTRE + CONSENT — styling (§33/§35/§36/§37) ====================================

   §36 — «Professional. Clean. High-trust. No excessive gradients. No marketing hero.» So there is
   no hero, no gradient, no illustration and no colour that is not already in `styles.css`. The
   page reads like a document because it is one: a wide measure would be unreadable, so the body is
   capped at ~72 characters and the table of contents sits beside it on a desktop.

   §35 — EVERY directional property here is LOGICAL (`margin-inline`, `padding-inline-start`,
   `border-inline-start`, `inset-inline`, `text-align: start`). There is one layout, and it is
   correct in both directions — not an LTR layout with an RTL override sheet, which is how a
   mirrored site ends up with a border on the wrong edge of one component.

   §37 — nothing has a fixed width. The only element that could overflow 390px is the inventory
   table, and it is inside a focusable scroller (`.lg-tablewrap`) so the TABLE scrolls and the PAGE
   never does. `tabindex="0"` on that scroller is deliberate: a scrollable region that cannot be
   reached by keyboard is unreadable to anyone not using a mouse.

   §33 — focus is visible everywhere (`:focus-visible`), the skip link is real, contrast is taken
   from the existing palette's dark-on-light pairs, and `prefers-reduced-motion` removes the
   dialog's entrance. Print styles exist because a legal page is a document people save.          */

:root {
  --lg-ink: #0f172a;
  --lg-ink-2: #475569;
  --lg-line: #e2e8f0;
  --lg-bg: #ffffff;
  --lg-soft: #f8fafc;
  --lg-accent: var(--brand, #307fe2);
  --lg-radius: 14px;
}

/* ---------------------------------------------------------------- the page -- */

.lg-body { background: var(--lg-soft); }
.lg-main { flex: 1; }

.lg-skip {
  /* Hidden by CLIPPING, not by being pushed 9999px off-canvas. On an RTL page «off to the start»
     is off to the RIGHT, and a browser counts that as scrollable overflow — the skip link was
     itself a source of horizontal scroll on the very pages it exists to make accessible. Clipped
     to a 1px box it is invisible, still focusable, and occupies nothing. */
  position: absolute;
  inset-inline-start: 0;
  clip-path: inset(50%);
  width: 1px; height: 1px; overflow: hidden;
  white-space: nowrap;
  top: 0;
  z-index: 100;
  background: var(--lg-accent);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 0 0 var(--lg-radius) var(--lg-radius);
  font-weight: 700;
}
.lg-skip:focus { inset-inline-start: 1rem; clip-path: none; width: auto; height: auto; overflow: visible; }

.lg-wrap { padding-block: 1.6rem 3.5rem; }

.lg-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .86rem; color: var(--lg-ink-2); margin-block-end: 1.2rem;
}
.lg-crumbs a { color: var(--lg-ink-2); text-decoration: none; }
.lg-crumbs a:hover { color: var(--lg-accent); text-decoration: underline; }
.lg-crumbs [aria-current] { color: var(--lg-ink); font-weight: 600; }

.lg-head {
  background: var(--lg-bg);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  padding: 1.6rem 1.5rem;
  margin-block-end: 1.4rem;
}
.lg-h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.35;
  margin: 0 0 .55rem;
  color: var(--lg-ink);
  font-weight: 800;
}
.lg-lede { margin: 0 0 1.1rem; color: var(--lg-ink-2); font-size: 1.02rem; line-height: 1.75; max-width: 62ch; }

/* §26 — the three stamps, side by side, each labelled. */
.lg-stamp { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1.1rem; }
.lg-stamp > div { min-width: 0; }
.lg-stamp dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lg-ink-2); margin: 0 0 .15rem; }
.lg-stamp dd { margin: 0; font-weight: 700; color: var(--lg-ink); font-size: .95rem; }
.lg-stamp--wide { gap: .9rem 2.5rem; }

.lg-headlinks { display: flex; flex-wrap: wrap; gap: .5rem; }
.lg-lang {
  display: inline-block;
  border: 1px solid var(--lg-line);
  background: var(--lg-soft);
  color: var(--lg-ink);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .86rem; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s ease, border-color .18s ease;
}
.lg-lang:hover { background: #eef2f7; border-color: #cbd5e1; }

.lg-badge {
  display: inline-block; vertical-align: middle;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
  border-radius: 999px; padding: .12rem .6rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.lg-badge--soft { background: #f1f5f9; color: #475569; border-color: var(--lg-line); }

/* ---------------------------------------------------------------- columns -- */

.lg-cols { display: grid; gap: 1.4rem; align-items: start; }
/* A grid item's default `min-width: auto` is the width of its widest CONTENT — so the cookie
   inventory table (min-width 640px, inside its own scroller) stretched the single mobile column to
   711px and the whole page scrolled sideways at 390. `min-width: 0` lets the column be the screen's
   width and hands the overflow back to the scroller that was built for it. */
.lg-cols > * { min-width: 0; }
@media (min-width: 1024px) {
  .lg-cols { grid-template-columns: 250px minmax(0, 1fr); }
  .lg-toc { position: sticky; top: 1rem; max-height: calc(100dvh - 2rem); overflow: auto; }
}

.lg-toc {
  background: var(--lg-bg);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  padding: 1.1rem 1rem;
}
.lg-toc__t { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lg-ink-2); margin: 0 0 .7rem; font-weight: 700; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.lg-toc li { margin: 0 0 .1rem; }
.lg-toc a {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .32rem .45rem;
  border-radius: 8px;
  color: var(--lg-ink-2); text-decoration: none;
  font-size: .87rem; line-height: 1.5;
}
.lg-toc a:hover { background: var(--lg-soft); color: var(--lg-accent); }
.lg-toc a span { color: #94a3b8; font-size: .78rem; font-weight: 700; min-width: 1.3em; }

/* ---------------------------------------------------------------- the doc -- */

.lg-doc {
  background: var(--lg-bg);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  padding: 1.7rem 1.6rem 2.2rem;
  color: var(--lg-ink);
  /* §33 — the measure. A legal page read edge-to-edge on a 1440 screen is unreadable. */
  max-width: 78ch;
}
.lg-h2 {
  display: flex; gap: .7rem; align-items: baseline;
  font-size: 1.16rem; font-weight: 800; line-height: 1.5;
  margin: 2.2rem 0 .7rem;
  padding-block-start: .3rem;
  color: var(--lg-ink);
  scroll-margin-top: 1.5rem;
}
.lg-doc > .lg-h2:first-child, .lg-company .lg-h2 { margin-block-start: 0; }
.lg-h2__n {
  flex: 0 0 auto;
  min-width: 1.9rem; height: 1.9rem;
  display: inline-grid; place-items: center;
  background: var(--lg-soft); border: 1px solid var(--lg-line);
  border-radius: 8px;
  font-size: .8rem; color: var(--lg-ink-2); font-weight: 700;
}
.lg-h3 { font-size: 1.02rem; font-weight: 800; margin: 1.8rem 0 .6rem; color: var(--lg-accent); }
.lg-p { margin: 0 0 .85rem; line-height: 1.95; font-size: .97rem; color: #1e293b; }
.lg-ul, .lg-ol { margin: 0 0 1rem; padding-inline-start: 1.4rem; }
.lg-ul li, .lg-ol li { margin: 0 0 .45rem; line-height: 1.85; font-size: .96rem; color: #1e293b; }
.lg-ul { list-style: disc; }
.lg-ol { list-style: decimal; }

.lg-dl { margin: 0 0 1.1rem; }
.lg-dl dt { font-weight: 700; color: var(--lg-ink); margin: .8rem 0 .2rem; font-size: .95rem; }
.lg-dl dd { margin: 0; padding-inline-start: 0; line-height: 1.85; color: #334155; font-size: .95rem; }
.lg-dl dt:first-child { margin-block-start: 0; }

.lg-identity {
  background: var(--lg-soft);
  border: 1px solid var(--lg-line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: grid;
  gap: .1rem .9rem;
}
@media (min-width: 640px) { .lg-identity { grid-template-columns: max-content minmax(0, 1fr); } }
.lg-identity dt { margin: .35rem 0 0; font-size: .85rem; color: var(--lg-ink-2); font-weight: 600; }
.lg-identity dd { margin: .35rem 0 0; font-size: .92rem; font-weight: 600; word-break: break-word; }
.lg-identity a { color: var(--lg-accent); }

/* §4/§39 — the flagged note. Visible, not decorative. */
.lg-note {
  border-inline-start: 3px solid #cbd5e1;
  background: var(--lg-soft);
  border-radius: 0 10px 10px 0;
  padding: .85rem 1rem;
  margin: 0 0 1.1rem;
}
html[dir="rtl"] .lg-note { border-radius: 10px 0 0 10px; }
.lg-note p { margin: 0; font-size: .91rem; line-height: 1.8; color: #334155; }
.lg-note--flag { border-inline-start-color: #d97706; background: #fffbeb; }

/* §8 — the link from a summary page to the text that actually governs. Stands at the top of the
   document, before the first clause, because that ordering is the point: read this and you already
   know the page you are on is not the source. */
.lg-source {
  border-inline-start: 3px solid var(--lg-accent, #0b5cab);
  background: #f1f6fc;
  border-radius: 0 10px 10px 0;
  padding: .85rem 1rem;
  margin: 0 0 1.4rem;
}
html[dir="rtl"] .lg-source { border-radius: 10px 0 0 10px; }
.lg-source p { margin: 0; font-size: .92rem; line-height: 1.8; color: #334155; }
.lg-source a { color: var(--lg-accent, #0b5cab); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.lg-flag {
  display: inline-block;
  background: #d97706; color: #fff;
  border-radius: 6px; padding: .1rem .5rem;
  font-size: .63rem; font-weight: 800; letter-spacing: .05em;
  margin-block-end: .4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  direction: ltr;
}

/* §37 — the table scrolls, the page does not. */
.lg-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--lg-line);
  border-radius: 12px;
  margin: 0 0 1.2rem;
}
.lg-table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 640px; }
.lg-table th, .lg-table td {
  padding: .65rem .8rem;
  text-align: start;
  border-block-end: 1px solid var(--lg-line);
  vertical-align: top;
  line-height: 1.65;
}
.lg-table thead th { background: var(--lg-soft); font-weight: 800; color: var(--lg-ink); white-space: nowrap; }
.lg-table tbody th { font-weight: 700; color: var(--lg-ink); }
.lg-table tbody tr:last-child th, .lg-table tbody tr:last-child td { border-block-end: 0; }

/* ---------------------------------------------------------- the legal centre -- */

.lg-cards { display: grid; gap: .9rem; margin-block-end: 2rem; }
@media (min-width: 720px) { .lg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lg-card {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--lg-bg);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  padding: 1.2rem 1.2rem;
  text-decoration: none;
  color: inherit;
  text-align: start;
  font: inherit;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lg-card:hover { border-color: var(--lg-accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.lg-card--action { border-style: dashed; }
.lg-card__ic {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--lg-soft); border-radius: 10px; color: var(--lg-accent);
}
.lg-card__ic svg { width: 20px; height: 20px; }
.lg-card__body { display: block; min-width: 0; }
.lg-card__t { display: block; font-weight: 800; font-size: 1rem; margin-block-end: .3rem; color: var(--lg-ink); }
.lg-card__d { display: block; font-size: .9rem; line-height: 1.7; color: var(--lg-ink-2); margin-block-end: .45rem; }
.lg-card__m { display: block; font-size: .78rem; color: #94a3b8; }

.lg-company {
  background: var(--lg-bg);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  padding: 1.5rem 1.4rem;
}
.lg-addr { margin: 1rem 0 0; color: var(--lg-ink-2); font-size: .92rem; line-height: 1.8; }

/* ---------------------------------------------------------------- footer links -- */

/* The five legal links are longer in English than the footer bar is wide on a phone. They wrap
   instead of overflowing — the gap replaces the old left-margin so the wrapped rows are spaced too. */
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.footer__legal a + a { margin-inline-start: 0; }
.lg-cookiebtn {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: none;
}
.lg-cookiebtn:hover { text-decoration: underline; }

/* §28 — the acceptance sentence on the sign-in / registration sheet. Fine print that is still
   comfortably readable: the acceptance it describes is real, so it is not 10px grey. */
.auth-legal {
  margin: .85rem 0 0;
  font-size: .8rem;
  line-height: 1.85;
  color: #64748b;
  text-align: start;
}
.auth-legal a { color: var(--brand, #0b5cab); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* §31 — the marketing opt-in in «حسابي». A row, never pre-ticked, and withdrawable in one click. */
.mkt-row { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 0; border-block-end: 1px solid var(--lg-line, #e6ebf2); }
.mkt-row:last-of-type { border-block-end: 0; }
.mkt-row input[type="checkbox"] { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .15rem; accent-color: var(--brand, #0b5cab); flex: none; }
.mkt-row__t { display: block; font-weight: 700; font-size: .95rem; }
.mkt-row__d { display: block; font-size: .82rem; color: #64748b; line-height: 1.7; margin-block-start: .15rem; }
.mkt-note { font-size: .82rem; color: #64748b; line-height: 1.8; margin: 0 0 .9rem; }
.mkt-state { font-size: .78rem; color: #16a34a; margin-block-start: .5rem; min-block-size: 1.1em; }

/* ================================================================ CONSENT ==== */

#cookieConsent[hidden] { display: none; }

.cc-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9000;
  background: #fff;
  border-block-start: 1px solid var(--lg-line);
  box-shadow: 0 -8px 30px rgba(15, 23, 42, .10);
  animation: cc-up .25s ease;
}
@keyframes cc-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.cc-banner__in {
  max-width: 1160px; margin-inline: auto;
  padding: 1.1rem 1.1rem;
  display: grid; gap: 1rem; align-items: center;
}
@media (min-width: 900px) { .cc-banner__in { grid-template-columns: minmax(0, 1fr) auto; padding-block: 1.25rem; } }

.cc-title { margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 800; color: var(--lg-ink); }
.cc-banner__txt p { margin: 0; font-size: .9rem; line-height: 1.75; color: var(--lg-ink-2); max-width: 74ch; }
.cc-link { color: var(--lg-accent); font-weight: 600; }

.cc-banner__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 899px) { .cc-banner__btns .cc-btn { flex: 1 1 auto; } }

.cc-btn {
  border: 1px solid var(--lg-line);
  background: #fff;
  color: var(--lg-ink);
  border-radius: 10px;
  padding: .62rem 1.15rem;
  font: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, transform .1s ease;
}
.cc-btn:hover { background: var(--lg-soft); border-color: #cbd5e1; }
.cc-btn:active { transform: translateY(1px); }
.cc-btn--primary { background: var(--lg-accent); border-color: var(--lg-accent); color: #fff; }
.cc-btn--primary:hover { filter: brightness(1.07); background: var(--lg-accent); }
.cc-btn--ghost { background: transparent; border-color: transparent; color: var(--lg-ink-2); text-decoration: underline; }
.cc-btn--ghost:hover { background: var(--lg-soft); }

/* ------------------------------------------------------- the preference centre -- */

.cc-backdrop {
  position: fixed; inset: 0; z-index: 9001;
  background: rgba(15, 23, 42, .45);
  animation: cc-fade .2s ease;
}
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }

.cc-modal {
  position: fixed; z-index: 9002;
  inset-inline: 0; bottom: 0;
  margin-inline: auto;
  width: min(560px, 100%);
  max-height: min(88dvh, 720px);
  background: #fff;
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  box-shadow: 0 -10px 40px rgba(15, 23, 42, .25);
  animation: cc-up .25s ease;
}
@media (min-width: 640px) {
  .cc-modal { top: 50%; bottom: auto; transform: translateY(-50%); border-radius: 18px; animation: cc-fade .2s ease; }
}

.cc-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-block-end: 1px solid var(--lg-line);
}
.cc-modal__head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--lg-ink); }
.cc-x {
  border: 0; background: var(--lg-soft); color: var(--lg-ink-2);
  width: 32px; height: 32px; border-radius: 9px;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.cc-x:hover { background: #e2e8f0; }

/* `flex: 1 1 auto; min-height: 0` is what makes `max-height` on the dialog real: without it the
   body refuses to shrink below its content, the dialog grows past its cap, and the Save button —
   the only way to record a choice — renders below the bottom of a 390px screen. */
.cc-modal__body { padding: 1.1rem 1.3rem; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.cc-intro { margin: 0 0 1.1rem; font-size: .89rem; line-height: 1.75; color: var(--lg-ink-2); }
.cc-foot { margin: 1rem 0 0; font-size: .87rem; }

.cc-cat { border: 1px solid var(--lg-line); border-radius: 12px; padding: .9rem 1rem; margin-block-end: .7rem; }
.cc-cat__head { display: flex; align-items: center; gap: .6rem; }
.cc-cat__label { font-weight: 800; font-size: .95rem; color: var(--lg-ink); cursor: pointer; }
.cc-cat__state { font-size: .76rem; color: var(--lg-ink-2); background: var(--lg-soft); border-radius: 999px; padding: .12rem .55rem; }
.cc-cat__d { margin: .5rem 0 0; font-size: .87rem; line-height: 1.7; color: var(--lg-ink-2); }

.cc-switch { margin-inline-start: auto; position: relative; display: inline-flex; flex: 0 0 auto; }
.cc-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-switch__track {
  width: 46px; height: 26px; border-radius: 999px;
  background: #cbd5e1; position: relative; transition: background .2s ease;
  /* THE TRACK IS PAINT, NOT A CONTROL. It is `position: relative` (its knob is absolutely placed
     inside it) and it comes after the input in the DOM, so it painted ON TOP of the invisible
     checkbox and swallowed every click aimed at the switch: the toggle looked interactive and only
     the label text actually worked. It is `aria-hidden` decoration, so the fix is to make it
     transparent to the pointer and let the input underneath receive the click. Found by the browser
     gate, which could not tick a category it could see. */
  pointer-events: none;
}
.cc-switch__track::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.cc-switch input:checked + .cc-switch__track { background: #16a34a; }
.cc-switch input:checked + .cc-switch__track::after { transform: translateX(20px); }
html[dir="rtl"] .cc-switch input:checked + .cc-switch__track::after { transform: translateX(-20px); }
.cc-switch.is-locked .cc-switch__track { background: #94a3b8; }
.cc-switch.is-locked input { cursor: not-allowed; }
.cc-switch input:focus-visible + .cc-switch__track { outline: 2px solid var(--lg-accent); outline-offset: 2px; }

.cc-modal__btns {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 1rem 1.3rem;
  border-block-start: 1px solid var(--lg-line);
  background: var(--lg-soft);
  border-radius: 0 0 18px 18px;
}
.cc-modal__btns .cc-btn { flex: 1 1 auto; }

/* ---------------------------------------------------------- a11y + print -- */

.lg-lang:focus-visible, .cc-btn:focus-visible, .lg-card:focus-visible,
.lg-toc a:focus-visible, .cc-x:focus-visible, .lg-tablewrap:focus-visible {
  outline: 2px solid var(--lg-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-modal, .cc-backdrop { animation: none; }
  .lg-card { transition: none; }
}

@media print {
  .lg-toc, .lg-crumbs, .lg-headlinks, #cookieConsent, .footer, .header, .topbar { display: none !important; }
  .lg-doc, .lg-head { border: 0; padding: 0; max-width: none; }
  .lg-body { background: #fff; }
  .lg-h2 { break-after: avoid; }
  .lg-note { break-inside: avoid; }
}