@font-face{font-family:'Cairo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/cairo-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/cairo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* JAT ERP — formal contract stylesheet. Shared across all templates. */

:root {
  --ink: #111111;
  --ink-soft: #333333;
  --muted: #6b6b6b;
  --rule: #1a1a1a;
  --rule-light: #cfcfcf;
  --paper: #ffffff;
  --shell-bg: #e9e6de;
  --shell-ink: #2a2a28;
}
@media (prefers-color-scheme: dark) {
  :root { --shell-bg: #16161c; --shell-ink: #e8e6de; }
}
:root[data-theme="dark"] { --shell-bg: #16161c; --shell-ink: #e8e6de; }
:root[data-theme="light"] { --shell-bg: #e9e6de; --shell-ink: #2a2a28; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--shell-bg);
  color: var(--shell-ink);
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  padding: 28px 16px 80px;
}

.desk { max-width: 900px; margin: 0 auto; }

.back-link {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--shell-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--shell-ink);
  opacity: .75;
}
.back-link:hover { opacity: 1; }

.doc-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--rule-light);
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}
.doc-meta-bar h2 { margin: 0; font-size: 14px; letter-spacing: .03em; }
.doc-meta-bar span { font-size: 12px; color: var(--muted); }

.pages { display: flex; flex-direction: column; align-items: center; gap: 34px; }

.page {
  direction: rtl;
  width: 100%;
  max-width: 760px;
  min-height: 1074px; /* A4 ratio at 760px width — a floor, never a clip */
  background: var(--paper);
  border: 1px solid #d8d8d8;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 30px -18px rgba(0,0,0,.28);
  padding: clamp(24px, 6%, 50px) clamp(22px, 6.4%, 54px);
  display: flex;
  flex-direction: column;
  color: var(--ink);
  position: relative;
}
@media (max-width: 560px) {
  .page { min-height: 0; }
}

/* ---- Letterhead: unchanged look, kept as the one branded element ---- */
.lh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #9c7530;
  margin-bottom: clamp(14px, 3vw, 26px);
}
.lh-mark { display: flex; align-items: center; gap: 10px; }
.lh-icon {
  width: 26px; height: 26px;
  background-image: url("/assets/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex: none;
}
.lh-word { display: flex; flex-direction: column; line-height: 1.15; }
.lh-ar { font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; font-weight: 700; font-size: 13.5px; color: #14152c; }
.lh-en { font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; font-weight: 600; font-size: 8.5px; letter-spacing: .12em; color: #7a7a7a; }
.lh-doc { font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 10.5px; color: #7a7a7a; letter-spacing: .02em; }

/* ---- Body: plain, formal, text-only from here down ---- */
.page-body { flex: 1; display: flex; flex-direction: column; gap: clamp(9px, 2.2vw, 14px); }

.doc-title {
  margin: 0 0 2px;
  text-align: center;
  font-weight: 700;
  font-size: clamp(17px, 3.2vw, 21px);
  color: var(--ink);
}
.doc-subtitle { margin: 0 0 6px; text-align: center; font-size: 11.5px; color: var(--muted); }

.front p, .clause p, .legacy-block p {
  margin: 0 0 6px;
  font-size: 11.6px;
  line-height: 1.85;
  color: var(--ink-soft);
  text-align: justify;
  text-align-last: right;
}
.front p:last-child, .clause p:last-child { margin-bottom: 0; }
.front strong, .clause strong { color: var(--ink); font-weight: 700; }

.clause-title {
  margin: 4px 0 2px;
  font-weight: 700;
  font-size: 11.8px;
  color: var(--ink);
}

.clause-list, .legacy-list {
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.clause-list li, .legacy-list li {
  font-size: 11.4px;
  line-height: 1.75;
  color: var(--ink-soft);
  list-style: none;
  position: relative;
  /* RTL: indent text from the RIGHT; the marker lives in that right-side gutter */
  padding-inline-start: 16px;
}
.clause-list li::before, .legacy-list li::before {
  content: "–";
  position: absolute;
  inset-inline-start: 0; /* right edge in RTL */
  color: var(--ink);
}

table.formal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2px 0 6px;
  font-size: 10.6px;
}
table.formal-table th, table.formal-table td {
  border: 1px solid #999;
  padding: 5px 7px;
  text-align: center;
  vertical-align: middle;
  color: var(--ink-soft);
}
table.formal-table thead th { font-weight: 700; color: var(--ink); }
table.formal-table td:first-child { text-align: right; }

/* .table-scroll: wraps every formal-table so if a column ever can't fit
   (long figures, small screens) the TABLE scrolls — the page layout never
   breaks. formal-table--money: realistic column proportions for a table
   that will carry real currency figures instead of blank placeholders —
   the amount column gets guaranteed width and never wraps a number mid-way. */
.table-scroll { overflow-x: auto; }
table.formal-table.formal-table--money td:nth-child(2),
table.formal-table.formal-table--money th:nth-child(2) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sign-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.sign-col { display: flex; flex-direction: column; gap: 9px; }
.sign-col h4 { margin: 0 0 2px; font-size: 11.8px; font-weight: 700; color: var(--ink); }
.sign-row { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ink-soft); }
.sign-row .lbl { font-size: 10.4px; color: var(--muted); }
.sign-row .ln { border-bottom: 1px solid #999; min-height: 16px; }

.pf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 9px;
  margin-top: 8px;
  border-top: 1px solid var(--rule-light);
  font-size: 8.5px;
  color: var(--muted);
}
.pf-num { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

@media (max-width: 560px) {
  .sign-grid { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; padding: 0; }
  .desk { max-width: none; }
  .back-link, .doc-meta-bar { display: none; }
  .pages { gap: 0; }
  .page { box-shadow: none; border: none; aspect-ratio: auto; width: auto; max-width: none; page-break-after: always; }
}