/* ==========================================================================
   سومة — نظام التصميم
   كل الألوان والأبعاد هنا في :root فقط. لا لون مكتوب مباشرة في أي قاعدة أخرى.
   الوضع فاتح فقط، والصفحات RTL ومصممة للجوال أولاً.

   هويتان:
   - هوية سومة (--navy …) لكل الواجهة.
   - هوية المسوق (--tenant / --tenant-ink) لرأس لوحته وصفحته العامة فقط.
     تُضبط من app.js (CSSOM) ومن الصفحة العامة (<style nonce>). الافتراضي كحلي سومة.
   ========================================================================== */
:root {
  /* الهوية */
  --navy: #22304F;          /* كحلي أساسي */
  --sand: #E7E3DD;          /* رملي */
  --gold: #A8763E;          /* ذهبي للتمييز */

  /* الأسطح والنص */
  --bg: #F4F1EC;            /* خلفية الصفحات */
  --card: #FFFFFF;
  --line: #E2DCD2;          /* حدود البطاقات والحقول */
  --ink: #1B2233;           /* النص */
  --muted: #5A6275;         /* النص الثانوي */
  --on-navy: #FFFFFF;

  /* الحالة */
  --ok: #2F6B4A; --ok-bg: #E3EEE7;
  --warn: #7A5223; --warn-bg: #F3E8D8;
  --bad: #A23A2C; --bad-bg: #F6E3DF;

  /* حالات الطلبات */
  --st-new-bg: #E4E9F3;       --st-new: #22304F;
  --st-contacted-bg: #EDE7F3; --st-contacted: #4B3B6E;
  --st-following-bg: #F3E8D8; --st-following: #7A5223;
  --st-closed-bg: #E3EEE7;    --st-closed: #2F6B4A;
  --st-cancelled-bg: #EEEBE6; --st-cancelled: #5A6275;

  /* هوية المسوق — تُستبدل لكل مسوق في لوحته وصفحته العامة فقط.
     /super والدخول لا يضبطانها فتبقى على قيم سومة هذه */
  --tenant: var(--navy);          /* لون الرأس */
  --tenant-ink: var(--on-navy);
  --btn: var(--navy);             /* لون الأزرار الأساسية والاختيارات النشطة */
  --btn-ink: var(--on-navy);      /* نص الزر: فاتح أو داكن حسب --btn */
  --btn-line: var(--navy);        /* إطار ونص الزر الثانوي — نسخة أغمق إن كان --btn فاتحاً */

  /* الشكل */
  --r-control: 12px;        /* أزرار وحقول */
  --r-card: 18px;           /* بطاقات (16–20) */
  --control-h: 48px;        /* أقل ارتفاع للأزرار والحقول — هدف لمس مريح */
  --shadow: 0 1px 2px rgb(27 34 51 / .04), 0 4px 16px rgb(27 34 51 / .05);
  --font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

  color-scheme: light;
}

/* ---------- أساس ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.65 var(--font);
}
h1, h2, h3 { font-weight: 700; line-height: 1.35; color: var(--ink); }
strong, b { font-weight: 700; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
.wrap { max-width: 920px; margin: 0 auto; padding: 16px; }
.muted { color: var(--muted); font-size: .92rem; }
.center-text { text-align: center; }
.mt { margin-top: 12px; }
.wide { flex-basis: 100%; }
.full { width: 100%; }

/* ---------- رأس اللوحات ---------- */
/* رأس سومة أبيض: الشعار كحلي بإطار كحلي، فلو كان الرأس كحلياً لذاب الإطار فيه */
header.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: 10px 16px; background: var(--card); color: var(--ink);
  border-bottom: 1px solid var(--line);
}
header.bar h1 { font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 10px; color: inherit; min-width: 0; }
header.bar h1 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.bar .muted { color: inherit; opacity: .8; }
.brand-logo { height: 36px; width: auto; display: block; }
/* رأس لوحة المسوق: بلونه وشعاره */
header.bar.tenant { background: var(--tenant); color: var(--tenant-ink); border-bottom: 0; }
header.bar.tenant button.ghost, header.bar.tenant button.ghost:hover { color: var(--tenant-ink); }
header.bar.tenant button.ghost { border-color: color-mix(in srgb, var(--tenant-ink) 40%, transparent); }
header.bar.tenant button.ghost:hover { background: color-mix(in srgb, var(--tenant-ink) 12%, transparent); }
.tenant-logo { height: 40px; max-width: 120px; object-fit: contain; border-radius: 8px; }

/* ---------- البطاقات ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.card h2 { font-size: 1.1rem; margin: 0 0 14px; }
.card h3 { font-size: 1rem; margin: 18px 0 8px; }

/* ---------- الحقول ---------- */
label, .flabel { display: block; font-size: .92rem; font-weight: 500; margin: 12px 0 6px; color: var(--ink); }
input, select, textarea {
  width: 100%; min-height: var(--control-h); padding: 10px 14px;
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-control);
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 110px; }
/* القوائم: Safari/WebKit يتجاهل الارتفاع ويرسم شكل النظام ما لم نلغِ appearance.
   السهم صورة SVG مضمّنة (img-src يسمح data:) في جهة البداية المنطقية — يسار في RTL */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235A6275' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 14px center; background-size: 12px 8px;
}
[dir="ltr"] select, select[dir="ltr"] { background-position: right 14px center; }
input[type="date"] { -webkit-appearance: none; appearance: none; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 15%, transparent); }
input[dir="ltr"] { text-align: left; }
input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--navy); }
input[type="color"] { width: 64px; padding: 4px; cursor: pointer; }
input[type="file"] { padding: 10px; }
[aria-invalid="true"] { border-color: var(--bad) !important; box-shadow: 0 0 0 3px var(--bad-bg) !important; }
.hint { display: block; font-size: .82rem; color: var(--muted); margin-top: 4px; }
.req { color: var(--bad); }

/* ---------- الأزرار ---------- */
button, a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control-h); padding: 10px 20px;
  font: 500 1rem/1.2 var(--font); text-decoration: none; text-align: center;
  background: var(--btn); color: var(--btn-ink);
  border: 1px solid var(--btn); border-radius: var(--r-control); cursor: pointer;
  transition: background .15s, border-color .15s;   /* بلا color: لون المسوق يُطبَّق بعد التحميل فيومض النص */
}
button:hover, a.button:hover { background: color-mix(in srgb, var(--btn) 88%, #000); color: var(--btn-ink); }
/* الثانوي: إطار ونص بلون الأزرار (نسخته المقروءة على الأبيض والرملي) */
button.ghost, a.button.ghost { background: transparent; color: var(--btn-line); border-color: var(--btn-line); }
button.ghost:hover, a.button.ghost:hover { background: color-mix(in srgb, var(--btn-line) 8%, transparent); color: var(--btn-line); }
button.gold, a.button.gold { background: var(--gold); border-color: var(--gold); }
button.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
a.button.wa { background: #1F8F55; border-color: #1F8F55; color: #fff; }
a.button.wa:hover { background: #18774A; }
/* زر على لون المسوق (الصفحة العامة) */
a.button.on-tenant { background: transparent; color: var(--tenant-ink); border-color: color-mix(in srgb, var(--tenant-ink) 45%, transparent); }
a.button.on-tenant:hover { background: color-mix(in srgb, var(--tenant-ink) 12%, transparent); }
/* «صغير» للأزرار داخل القوائم: أقصر بصرياً لكن هدف اللمس يبقى 40px على الأقل */
button.small, a.button.small { min-height: 40px; padding: 6px 14px; font-size: .9rem; }
button:disabled { opacity: .55; cursor: wait; }

/* ---------- تخطيط ---------- */
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 180px; }
.row > button, .row.shrink, .shrink { flex: 0 0 auto; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.fc.full, .grid2 > .full { grid-column: 1 / -1; }
.center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.center .card { width: 100%; max-width: 420px; }

/* ---------- صفحة الدخول ---------- */
.login-brand { display: block; width: min(240px, 70%); height: auto; margin: 4px auto 18px; }
.login-card h2 { text-align: center; }

/* ---------- الرسائل ---------- */
.msg { margin-top: 10px; font-size: .92rem; min-height: 1.2em; }
.msg.err { color: var(--bad); }
.msg.ok { color: var(--ok); }
.msg.err:not(:empty) { background: var(--bad-bg); padding: 10px 12px; border-radius: var(--r-control); }
.notice { position: fixed; inset-inline: 0; top: 0; z-index: 50; display: grid; gap: 6px; padding: 8px; pointer-events: none; }
.notice__item {
  pointer-events: auto; max-width: 640px; margin: 0 auto; width: 100%; display: flex; gap: 8px;
  align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--r-control);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 500;
}
.notice__item.err { border-color: var(--bad); color: var(--bad); }
.notice__item.ok { border-color: var(--ok); color: var(--ok); }

/* ---------- القوائم والشارات ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.badge { display: inline-block; font-size: .78rem; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: var(--sand); color: var(--ink); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.st-new { background: var(--st-new-bg); color: var(--st-new); }
.badge.st-contacted { background: var(--st-contacted-bg); color: var(--st-contacted); }
.badge.st-following { background: var(--st-following-bg); color: var(--st-following); }
.badge.st-closed { background: var(--st-closed-bg); color: var(--st-closed); }
.badge.st-cancelled { background: var(--st-cancelled-bg); color: var(--st-cancelled); }

/* ---------- تبويبات اللوحة ---------- */
nav.tabs { display: flex; gap: 4px; padding: 0 16px; background: var(--card); border-bottom: 1px solid var(--line); overflow-x: auto; }
nav.tabs a { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 16px; text-decoration: none; color: var(--muted); font-weight: 500; border-bottom: 3px solid transparent; white-space: nowrap; }
nav.tabs a[aria-current="page"] { color: var(--btn-line); border-color: var(--btn-line); }   /* خط على أبيض: النسخة المقروءة */

/* ---------- بطاقات الحالات (KPI) ---------- */
.kpis { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.kpi { flex: 0 0 auto; display: grid; gap: 2px; justify-items: start; min-width: 104px; min-height: 64px; padding: 10px 14px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none; }
.kpi:hover { background: var(--card); color: var(--ink); border-color: var(--btn-line); }
.kpi strong { font-size: 1.35rem; line-height: 1.1; }
.kpi .muted { font-size: .82rem; }
.kpi[aria-pressed="true"] { border-color: var(--btn-line); box-shadow: inset 0 0 0 1px var(--btn-line); }
.kpi.st-new strong { color: var(--st-new); } .kpi.st-contacted strong { color: var(--st-contacted); }
.kpi.st-following strong { color: var(--st-following); } .kpi.st-closed strong { color: var(--st-closed); }
.kpi.st-cancelled strong { color: var(--st-cancelled); }

/* ---------- الفلاتر وقائمة الطلبات ---------- */
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; align-items: end; }
.filters .q { grid-column: 1 / -1; }
.filters label { margin: 0 0 4px; font-size: .82rem; color: var(--muted); }
.filters button[type="reset"] { width: 100%; }
@media (min-width: 720px) { .filters { grid-template-columns: repeat(4, 1fr); } .filters .q { grid-column: span 2; } }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.req-list a { display: grid; gap: 4px; padding: 14px 16px; background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-card); }
.req-list a:hover { border-color: var(--navy); color: var(--ink); }
.req-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.empty { text-align: center; padding: 36px 16px; color: var(--muted); }
.share { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.share code { direction: ltr; unicode-bidi: isolate; background: var(--bg); padding: 6px 10px; border-radius: 8px; overflow-wrap: anywhere; }

/* ---------- تفاصيل الطلب ---------- */
dl.fields { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
dl.fields dt { color: var(--muted); }
dl.fields dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
dl.fields dt.section { grid-column: 1 / -1; color: var(--navy); font-weight: 700; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.status-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.status-picker button { min-height: 44px; background: var(--card); color: var(--ink); border-color: var(--line); }
.status-picker button:hover { background: var(--sand); color: var(--ink); }
.status-picker button[aria-pressed="true"].st-new { background: var(--st-new-bg); color: var(--st-new); border-color: var(--st-new); }
.status-picker button[aria-pressed="true"].st-contacted { background: var(--st-contacted-bg); color: var(--st-contacted); border-color: var(--st-contacted); }
.status-picker button[aria-pressed="true"].st-following { background: var(--st-following-bg); color: var(--st-following); border-color: var(--st-following); }
.status-picker button[aria-pressed="true"].st-closed { background: var(--st-closed-bg); color: var(--st-closed); border-color: var(--st-closed); }
.status-picker button[aria-pressed="true"].st-cancelled { background: var(--st-cancelled-bg); color: var(--st-cancelled); border-color: var(--st-cancelled); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.inline-form { margin-top: 8px; }
.inline-form .msg { flex-basis: 100%; margin: 0; }

/* ---------- إعدادات الهوية ---------- */
.brand-preview { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 16px; margin: 6px 0 4px;
  border-radius: var(--r-card); background: var(--tenant); color: var(--tenant-ink); font-weight: 700; }
.brand-preview img { height: 40px; max-width: 120px; object-fit: contain; }
.preview-wrap { display: grid; gap: 10px; margin: 6px 0 4px; }
.preview-wrap .brand-preview { margin: 0; }
.preview-buttons { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-card); background: var(--bg); }
.color-fields { display: grid; gap: 4px 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .color-fields { grid-template-columns: 1fr 1fr; } }
.color-row { display: flex; gap: 10px; align-items: center; }
.color-row input[type="text"] { max-width: 140px; }
.logo-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-box img { height: 64px; max-width: 160px; object-fit: contain; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--bg); }
.city-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }

/* ---------- الصفحة العامة ---------- */
body.public main.wrap { max-width: 600px; }
.pub-head { background: var(--tenant); color: var(--tenant-ink); }
.pub-head__inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 28px; padding-bottom: 24px; text-align: center; }
.pub-head h1 { margin: 0; font-size: 1.45rem; color: inherit; }
.pub-logo { height: 80px; max-width: 200px; object-fit: contain; }
.pub-foot { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 24px 16px 32px; color: var(--muted); font-size: .85rem; }
.foot-logo { height: 22px; width: auto; display: block; }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- النموذج متعدد الخطوات ---------- */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.paths legend, fieldset.step legend { font-weight: 700; margin-bottom: 10px; font-size: 1.05rem; }
.path-cards { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .path-cards { grid-template-columns: repeat(3, 1fr); } }
.path-card { display: grid; gap: 2px; justify-items: center; text-align: center; min-height: 96px; padding: 14px 10px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); }
.path-card:hover { background: var(--bg); color: var(--ink); border-color: var(--btn-line); }
.path-card[aria-pressed="true"] { border-color: var(--btn-line); box-shadow: inset 0 0 0 2px var(--btn-line); background: var(--card); }
.path-icon { font-size: 1.5rem; }
ol.steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 18px 0 8px; overflow-x: auto; }
ol.steps li { flex: 1 1 0; min-width: 96px; font-size: .82rem; color: var(--muted); padding-top: 8px; border-top: 3px solid var(--line); }
ol.steps li.done { border-color: var(--navy); }
ol.steps li.current { border-color: var(--btn-line); color: var(--ink); font-weight: 700; }
ol.steps .n { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--sand); font-size: .75rem; }
ol.steps li.current .n { background: var(--btn); color: var(--btn-ink); }
ol.steps li.done .n { background: var(--navy); color: #fff; }
.affix { display: flex; align-items: stretch; }
.affix input { border-start-end-radius: 0; border-end-end-radius: 0; }
.affix span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-inline-start: 0;
  border-start-end-radius: var(--r-control); border-end-end-radius: var(--r-control); background: var(--bg); font-size: .85rem; color: var(--muted); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
label.check { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-weight: 400; min-height: 32px; }
[data-field][aria-invalid="true"] .dpick, [data-field][aria-invalid="true"] .checks { outline: 2px solid var(--bad); border-radius: var(--r-control); }
.step-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 18px; }
.step-nav button { flex: 1; }
.chip { min-height: 40px; padding: 6px 14px; font-size: .92rem; font-weight: 400; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
.chip:hover { background: var(--sand); color: var(--ink); }
.chip[aria-pressed="true"]:hover, .chip.on:hover { background: color-mix(in srgb, var(--btn) 88%, #000); color: var(--btn-ink); }
.chip[aria-pressed="true"], .chip.on { background: var(--btn); color: var(--btn-ink); border-color: var(--btn-line); }
.dpick { display: grid; gap: 8px; }
.dpick-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.dpick-selected:empty { display: none; }
.dpick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--bg); }

/* ---------- صفحة الأسعار (/pricing) — تُدمج لاحقاً في الصفحة التعريفية ---------- */
.pricing-intro { text-align: center; margin: 12px 0 20px; }
.pricing-intro h2 { margin: 0 0 6px; font-size: 1.35rem; }
.brand-link { display: block; }
.plans { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.card.plan { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.card.plan h3 { margin: 0; font-size: 1.15rem; }
.card.plan.featured { border: 2px solid var(--gold); }
.ribbon { position: absolute; top: -12px; inset-inline-start: 18px; background: var(--gold); color: var(--on-navy);
  font-size: .8rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.price strong { font-weight: 700; color: var(--navy); }
.price.big strong { font-size: 2rem; line-height: 1.2; }
.price .unit { color: var(--muted); font-size: .9rem; }
.price del.was { color: var(--muted); font-size: .95rem; text-decoration-thickness: 2px; }
.price.big del.was { font-size: 1.1rem; }
.alt-price { color: var(--muted); font-size: .92rem; }
.alt-price .price strong { font-size: 1rem; }
.offer-note { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.badge.gold { background: var(--gold); color: var(--on-navy); }
.features { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 6px; flex: 1; }
.features li { padding-inline-start: 26px; position: relative; }
.features li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--gold); font-weight: 700; }
a.button.wa.ghost-wa, a.button.ghost-wa { background: transparent; color: var(--btn-line); border-color: var(--btn-line); }
a.button.ghost-wa:hover { background: color-mix(in srgb, var(--btn-line) 8%, transparent); }
.section-title { font-size: 1.15rem; margin: 28px 0 12px; text-align: center; }
.addons { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.card.addon { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin: 0; }
.card.addon h3 { margin: 0 0 4px; }
.card.addon p { margin: 0; }
.addon-body { flex: 1 1 260px; }
.addon-side { display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex: 0 0 auto; min-width: 160px; }
#contact { margin-top: 24px; }

/* ---------- Turnstile (الدخول ونموذج /r/{slug}) ---------- */
.ts-wrap { margin: 14px 0 6px; }
.ts-box { display: flex; justify-content: center; min-height: 65px; max-width: 100%; }  /* ارتفاع محجوز: لا قفزة عند ظهور الويدجت */
.ts-box iframe { max-width: 100%; }