:root {
  --brand-primary: #14B8A6;
  --brand-button: #14B8A6;
  --brand-btn-radius: 12px;
  --brand-font-size: 16px;
  /* شفافية الكروت يقودها محرّر المالك (owner-v2.html).
     ‎--card-opacity‎ (افتراضياً 0.85 توافقاً مع ما هو محفوظ في DB قديماً) و
     ‎--rattl-card-bg‎ تستهلكها كروت الصفحة الرئيسية وكروت الصفحات العامة.
     في النمط الصلب (الافتراضي) نُجبر الكروت على ‎rgba(255,255,255,1)‎ من JS
     حتى لا تنخدع كروت ‎.theme-card‎ الجديدة وتظهر شبه شفافة بدون رغبة المالك. */
  --card-opacity: 0.85;
  --rattl-card-bg: rgba(255, 255, 255, 1);
  --rattl-card-blur: 0px;
}
/* 2026-06-30 fix: قبل هذا التحديث كانت قواعد ‎body .plan-card‎ و
   ‎body .glass-card‎ تخسر معركة الـCSS specificity ضد Tailwind class
   ‎bg-white‎ على نفس العناصر — الـclass selector له نفس وزن الـtag-class
   والـbg-white يَلوّن بعد قواعدنا في cascade order. النتيجة: السلايدر
   يحدّث ‎--rattl-card-bg‎ صح، لكن المتصفّح يرسم ‎bg-white‎ فوقه. الإصلاح:
   نضيف ‎!important‎ على هاتين القاعدتين فقط (المتغيّر يحفظ المرونة:
   المالك يقدر يضبطه على أي rgba) — لا نلمس بقية CSS. */
body .plan-card,
body .glass-card {
  background: var(--rattl-card-bg, rgba(255, 255, 255, var(--card-opacity))) !important;
  backdrop-filter: blur(var(--rattl-card-blur, 0px));
  -webkit-backdrop-filter: blur(var(--rattl-card-blur, 0px));
}
body.cards-glass .plan-card,
body.cards-glass .glass-card {
  background: rgba(255, 255, 255, var(--card-opacity)) !important;
  backdrop-filter: blur(calc(16px + var(--rattl-card-blur, 0px))) saturate(180%);
  -webkit-backdrop-filter: blur(calc(16px + var(--rattl-card-blur, 0px))) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
/* Separators (section dividers) follow the same opacity in glass mode so the
   page-background image is visible BETWEEN cards too — without this the
   owner sees cards become translucent but the section strip stays opaque
   and reports "transparency for cards and separators doesn't work". */
body.cards-glass section.border-y,
body.cards-glass #features,
body.cards-glass #packages {
  background-color: rgba(255, 255, 255, var(--card-opacity)) !important;
  backdrop-filter: blur(calc(8px + var(--rattl-card-blur, 0px)));
  -webkit-backdrop-filter: blur(calc(8px + var(--rattl-card-blur, 0px)));
}
body.cards-glass section.border-y.border-slate-100,
body.cards-glass section.border-y.border-teal-100 {
  border-color: rgba(255, 255, 255, calc(var(--card-opacity) * 0.5)) !important;
}
/* 2026-06-30: إخفاء أقسام الصفحة الرئيسية ديناميكياً من محرّر المظهر.
   السلوك القديم كان يضبط ‎section.hidden = true‎ من JS inline — وهذا
   يشتغل لكن الـ live preview في owner-v2.html ما يقدر يبدّل العنصر
   بسرعة عبر postMessage. الحل: ‎page-theme-cards.js‎ يبدّل صنفاً على
   ‎<body>‎ ونحن هنا نستهلك الصنف. الاثنان يتعايشان: لو الـ inline JS
   شغّال يضبط ‎hidden‎ والأصناف لو الـ script تأخّر. */
body.hide-section-features #features,
body.hide-section-how #how,
body.hide-section-trust section:has([data-cms-key="trust_title"]) {
  display: none !important;
}
/* ───── إصلاح وميض الألوان (FOUC) ──────────────────────────────────
   السبب الجذري: عناصر HTML فيها ألوان Tailwind ثابتة (مثل bg-[#0F766E])
   لا تعكس ثيم المالك حتى يشتغل JavaScript. هنا نُعيد تعريف كلاسات
   Tailwind المحدّدة لتقرأ من متغيرات CSS — فلما السكربت يضبط المتغير
   (من الكاش أو الـ API) كل العناصر تتلوّن فوراً بلون المالك.
   القيمة الاحتياطية (fallback) هي اللون الأصلي حتى لو JS ما اشتغل. */
.bg-\[\#0F766E\] {
  background-color: var(--brand-button, #0F766E) !important;
}
.text-\[\#0F766E\] {
  color: var(--brand-button, #0F766E) !important;
}
.bg-\[\#0F766E\]\/15 {
  background-color: color-mix(in srgb, var(--brand-button, #0F766E) 15%, transparent) !important;
}
.bg-\[\#0F766E\]\/30 {
  background-color: color-mix(in srgb, var(--brand-button, #0F766E) 30%, transparent) !important;
}
.bg-\[\#0F766E\]\/80 {
  background-color: color-mix(in srgb, var(--brand-button, #0F766E) 80%, transparent) !important;
}
.text-\[\#0F766E\]\/40 {
  color: color-mix(in srgb, var(--brand-button, #0F766E) 40%, transparent) !important;
}
.border-\[\#0F766E\]\/20 {
  border-color: color-mix(in srgb, var(--brand-button, #0F766E) 20%, transparent) !important;
}
.border-\[\#0F766E\]\/10 {
  border-color: color-mix(in srgb, var(--brand-button, #0F766E) 10%, transparent) !important;
}
.border-\[\#0F766E\]\/15 {
  border-color: color-mix(in srgb, var(--brand-button, #0F766E) 15%, transparent) !important;
}
.bg-\[\#E8F5F2\] {
  background-color: color-mix(in srgb, var(--brand-button, #0F766E) 8%, white) !important;
}
.bg-\[\#C8EAE4\] {
  background-color: color-mix(in srgb, var(--brand-button, #0F766E) 18%, white) !important;
}
.hover\:bg-\[\#115e59\]:hover {
  background-color: color-mix(in srgb, var(--brand-button, #0F766E), black 18%) !important;
}
.hover\:bg-teal-700:hover {
  background-color: color-mix(in srgb, var(--brand-button, #0F766E), black 10%) !important;
}
.hover\:bg-\[\#E8F5F2\]:hover {
  background-color: color-mix(in srgb, var(--brand-button, #0F766E) 8%, white) !important;
}
.shadow-teal-600\/30 {
  --tw-shadow-color: color-mix(in srgb, var(--brand-button, #0F766E) 30%, transparent);
}
/* ───── نهاية إصلاح FOUC ─────────────────────────────────────────── */
* { font-family: 'Tajawal', sans-serif; }
html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
}
main,
header,
footer,
section {
  max-width: 100%;
}
#page-background-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0;
  pointer-events: none;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity .25s ease;
}
body.has-page-background #page-background-layer {
  opacity: 1;
}
body.has-page-background {
  background-color: #f7fffd !important;
  background-image: none !important;
}
body.has-page-background header {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(14px);
}
body.has-page-background main > section,
body.has-page-background footer {
  position: relative;
}
body.has-page-background #features {
  background: rgba(255,255,255,.84) !important;
  backdrop-filter: blur(8px);
}
/* Card-like panels that sit on top of the page background.
   PRE-fix: this hard-coded background-color:rgba(255,255,255,.82) !important, which
   overrode the owner's transparency slider — they could pick 30% in owner-v2
   and still see 82% on the live site. Now we read --rattl-card-bg (default solid)
   so the slider actually wins. */
body.has-page-background .group.relative.bg-white,
body.has-page-background .rounded-2xl.bg-white,
body.has-page-background .bg-white.rounded-2xl,
body.has-page-background .bg-white\/70 {
  background-color: var(--rattl-card-bg, rgba(255,255,255,1));
  backdrop-filter: blur(var(--rattl-card-blur, 0px));
  -webkit-backdrop-filter: blur(var(--rattl-card-blur, 0px));
}
/* The default plan-card / glass-card rules above (line ~39) already use the
   same variables, but those static cards on the homepage also carry .bg-white
   (Tailwind). When Tailwind finishes loading, .bg-white re-applies background-color
   which has SAME specificity but loses to body-prefixed rules. We make this
   explicit for the homepage package & feature cards so the owner's slider
   always reaches them. */
body #packages .plan-card,
body #features .glass-card,
body #how .glass-card {
  background-color: var(--rattl-card-bg, rgba(255,255,255,1));
  backdrop-filter: blur(var(--rattl-card-blur, 0px));
  -webkit-backdrop-filter: blur(var(--rattl-card-blur, 0px));
}
/* قسم "كيف يعمل" يملك خلفية على مستوى القسم كاملاً (data-cms-card-bg-key).
   نجعل خلفية العنصر نفسه شفافة حتى لا يظهر بلون الكرت الافتراضي —
   صورة الخلفية تظهر عبر ::before كما تعمل كروت الصفحة الأخرى.
   المحدد الأعلى specificity (section#how[attr]) يتغلب بطبيعته على
   قاعدة [data-cms-card-bg-key] المُحقنة من page-theme-cards.js */
section#how[data-cms-card-bg-key] {
  background: transparent;
}
/* قسم الهيرو كذلك يملك خلفية على مستوى القسم كاملاً (data-cms-card-bg-key="index_hero").
   نفس مبدأ #how: نجعل خلفية العنصر شفافة حتى تظهر صورة الخلفية المرفوعة
   عبر ::before — بدون هذه القاعدة يغطّيها اللون الأبيض الافتراضي
   المُحقن من page-theme-cards.js على كل [data-cms-card-bg-key]. */
section.home-hero-section[data-cms-card-bg-key] {
  background: transparent;
}
/* بطاقات "كيف يعمل" نفسها يجب أن تبقى بلا أي خلفية مستقلة أو overlay،
   بحيث تظهر فقط خلفية القسم الكبير خلف النصوص والشرائح الثلاث. */
body #how [data-cms-card-index][data-cms-card-bg-key] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body #how [data-cms-card-index][data-cms-card-bg-key]::before,
body #how [data-cms-card-index][data-cms-card-bg-key]::after {
  content: none !important;
  background: none !important;
}