/* ============================================================
   صفحات المعلومات (خصوصية، شروط وأحكام، سياسات، ولاحقًا من نحن والأسئلة الشائعة…): المكوّنات المشتركة (ثيم 0.4.1، المهمة 1).
   القوالب: page-info.php + inc/info-pages.php. الألوان والخطوط والمسافات كلها من tokens.css (ما فما لون جديد مكتوب هوني).
   مبنية للتليفون (360px) أول، RTL، و«تقليل الحركة» يوقّف كل حركة.
   ============================================================ */

.dpg-page {
  --dpg-hdr: 69px;      /* ارتفاع الهيدر اللاصق (.main-header: زرّ 44 + مسافتين 12 + خطّ 1). pages.js يقيسو من الصفحة */
  --dpg-chips-h: 54px;  /* ارتفاع شريط الأقسام. pages.js يقيسو زادة */
  --dpg-anchor: calc(var(--dpg-hdr) + var(--dpg-chips-h) + var(--space-3)); /* قدّاش ينزل القسم تحت الهيدر والشريط كي نقفزو ليه */
  padding-block: var(--space-4) var(--space-8);
}
@media (min-width: 700px) {
  .dpg-page { max-width: 760px; }
}

/* ---- 1) الرأس «السحري» (Hero): خلفية لؤلؤية (أبيض ← وردي فاتح ← أزرق باهت، من ألوان الموقع برك)، عنوان كبير، سطر فرعي، ومكان لصورة ---- */
.dpg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 176px;
  padding: var(--space-5) var(--space-4);
  border: 1px solid rgba(var(--rouge-rgb), .12);
  border-radius: calc(var(--radius-lg) + 4px);
  background: var(--surface);
  background:
    radial-gradient(75% 120% at 0% 100%, rgba(var(--rouge-rgb), .14), transparent 62%),
    radial-gradient(70% 100% at 100% 0%, color-mix(in srgb, var(--info) 17%, transparent), transparent 70%),
    linear-gradient(225deg, var(--surface) 0%, color-mix(in srgb, var(--info) 6%, color-mix(in srgb, var(--rouge) 6%, var(--surface))) 52%, color-mix(in srgb, var(--rouge) 9%, var(--surface)) 100%);
  box-shadow: var(--card-shadow);
}
/* لمعة اللؤلؤة */
.dpg-hero::before {
  content: "";
  position: absolute;
  inset-block-start: -38%;
  inset-inline-start: -12%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 66%);
  z-index: -1;
  pointer-events: none;
}
.dpg-hero-txt { flex: 1; min-width: 0; }
.dpg-eyebrow { margin: 0 0 var(--space-2); font-size: 12px; font-weight: var(--fw-semibold); color: var(--rouge-fonce); }
.dpg-title {
  margin: 0;
  font-size: clamp(24px, 7.4vw, 30px);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--texte);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.dpg-sub { margin: var(--space-2) 0 0; font-size: 14.5px; line-height: 1.75; color: var(--texte-doux); text-wrap: pretty; }

/* مكان الصورة: ملف assets/pages/hero-<المفتاح>.webp يبدّل الدرع بلا لمس الكود */
.dpg-art { position: relative; flex: none; display: grid; place-items: center; width: 104px; height: 104px; }
.dpg-art-img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(var(--rouge-rgb), .22)); }
.dpg-shield { width: 92px; height: 92px; color: var(--rouge); filter: drop-shadow(0 10px 14px rgba(var(--rouge-rgb), .3)); overflow: visible; }
.dpg-shield-fill { fill: rgba(var(--rouge-rgb), .1); stroke: none; }
.dpg-shield-line, .dpg-shield-check { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.dpg-shield-check { stroke: var(--rouge-fonce); }

@media (max-width: 340px) { /* أصغر التليفونات: الصورة أصغر باش النص ياخذ بلاصة */
  .dpg-art { width: 84px; height: 84px; }
  .dpg-shield { width: 74px; height: 74px; }
  .dpg-hero { padding-inline: var(--space-3); }
}

/* بريق صغير (زينة): 3 نجمات، تلمع خفيف */
.dpg-spark { position: absolute; width: 11px; height: 11px; background: var(--rouge); opacity: .38; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); pointer-events: none; z-index: -1; }
.dpg-spark:nth-of-type(1) { inset-block-start: 16px; inset-inline-end: 118px; }
.dpg-spark:nth-of-type(2) { inset-block-end: 20px; inset-inline-end: 22px; width: 8px; height: 8px; }
.dpg-spark:nth-of-type(3) { inset-block-start: 34px; inset-inline-end: 14px; width: 7px; height: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .dpg-art { animation: dpg-float 4.8s ease-in-out infinite; }
  .dpg-spark { animation: dpg-twinkle 3.4s ease-in-out infinite; }
  .dpg-spark:nth-of-type(2) { animation-delay: -1.1s; }
  .dpg-spark:nth-of-type(3) { animation-delay: -2.2s; }
}
@keyframes dpg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes dpg-twinkle { 0%, 100% { opacity: .2; transform: scale(.85); } 50% { opacity: .6; transform: scale(1.1); } }

/* ---- 2) شريط الأقسام (Chips): لاصق تحت الهيدر، يتمرّر أفقيًا ---- */
.dpg-chips {
  position: sticky;
  top: var(--dpg-hdr);
  z-index: 20;
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) calc(var(--space-4) * -1) 0;
  padding: var(--space-2) var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast), box-shadow var(--dur-mid);
}
.dpg-chips::-webkit-scrollbar { display: none; }
.dpg-chips.is-stuck { border-bottom-color: var(--ligne); box-shadow: 0 8px 14px -12px rgba(0, 0, 0, .28); }
@supports (background: color-mix(in srgb, red, blue)) and (backdrop-filter: blur(8px)) {
  .dpg-chips { background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.dpg-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--texte);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
@media (hover: hover) {
  .dpg-chip:hover { border-color: var(--rouge); color: var(--rouge-fonce); }
}
.dpg-chip[aria-current] { background: var(--noir); border-color: var(--noir); color: var(--blanc); font-weight: var(--fw-semibold); }
.dpg-chip:focus-visible { outline: 2px solid var(--rouge-fonce); outline-offset: 2px; }
@media (min-width: 700px) {
  .dpg-chips { margin-inline: 0; padding-inline: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); }
  .dpg-chips.is-stuck { border-color: var(--ligne); }
  .dpg-chip { padding-inline: var(--space-3); } /* 8 أزرار (صفحة الشروط) يدخلو في سطر وحد في عمود 760px: بـ16px الأخير كان يتقصّ (فاض 52px) */
}
html.dpg-smooth { scroll-behavior: smooth; }

/* ---- 3) البطاقات ---- */
.dpg-cards { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.dpg-card {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  scroll-margin-top: var(--dpg-anchor);
}
.dpg-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
/* الأيقونة: دايرة بحلقة ناريّة (نفس حلقة دوائر الأقسام) وأيقونة خطية حمراء */
.dpg-ico {
  flex: none;
  width: 46px;
  height: 46px;
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--or-clair), var(--rouge) 35%, var(--rouge-fonce) 65%, var(--or) 100%);
}
.dpg-ico > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); color: var(--rouge); }
.dpg-ico svg { width: 22px; height: 22px; }
.dpg-card-title { margin: 0; min-width: 0; font-size: 17px; font-weight: var(--fw-bold); line-height: 1.5; color: var(--texte); text-wrap: balance; overflow-wrap: anywhere; }

.dpg-body > * { margin: 0; }
.dpg-body > * + * { margin-top: var(--space-3); }
.dpg-body p { font-size: 14.5px; line-height: 1.9; color: var(--texte); }
.dpg-body h3 { margin: var(--space-4) 0 0; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.6; color: var(--texte); }
.dpg-body ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.dpg-body li { position: relative; padding-inline-start: 22px; font-size: 14.5px; line-height: 1.85; color: var(--texte); }
.dpg-body li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: .8em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rouge);
  box-shadow: 0 0 0 3px rgba(var(--rouge-rgb), .14);
}
.dpg-body a:not(.dpg-more) { color: var(--rouge-fonce); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.dpg-body a:focus-visible { outline: 2px solid var(--rouge-fonce); outline-offset: 2px; border-radius: 4px; }

/* بند مهمّ: يبان أكثر من الباقي */
.dpg-body .dpg-callout {
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--rouge);
  border-radius: var(--radius-md);
  background: rgba(var(--rouge-rgb), .07);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.85;
}
/* رابط لصفحة أخرى (بلا تكرار التفاصيل) */
.dpg-more { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--rouge-fonce); font-size: 14.5px; font-weight: var(--fw-semibold); text-decoration: none; }
.dpg-more svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-smooth); }
@media (hover: hover) {
  .dpg-more:hover svg { transform: translateX(-3px); }
}
.dpg-more:focus-visible { outline: 2px solid var(--rouge-fonce); outline-offset: 2px; border-radius: 6px; }

/* ---- 4) التذييل: آخر تحديث + «تواصل معانا» ---- */
.dpg-foot {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(var(--rouge-rgb), .05);
  text-align: center;
}
.dpg-updated { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--texte-doux); }
.dpg-updated svg { width: 16px; height: 16px; }
.dpg-foot-note { margin: 0; font-size: 14px; line-height: 1.75; color: var(--texte-doux); text-wrap: balance; }
.dpg-contact { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; min-height: 48px; text-decoration: none; }