/* ═══════════════════════════════════════
   OIC Frame & Content Layouts
   ═══════════════════════════════════════ */

/* ── متغيرات الإطار (القيم الافتراضية — تُخصَّص من الطبقات الحرة) ──
   مثال في طبقة حرة على عنصر #page:
     خلفية: var(--c-surface)
     زوايا: 16px
     ظل: 0 8px 40px rgba(0,0,0,.12)
*/
:root {
  --frame-width:   1200px;  /* يأتي من لوحة التحكم */
  --frame-radius:  0px;     /* من الطبقات الحرة */
  --frame-shadow:  none;    /* من الطبقات الحرة */
  --frame-bg:      transparent; /* من الطبقات الحرة / النمط */
  --frame-border:  none;    /* من الطبقات الحرة */
  --frame-padding: 0px;     /* من الطبقات الحرة */
}

/* ── الحاوية الرئيسية المشتركة ── */
#page {
  background: var(--frame-bg);
  border-radius: var(--frame-radius);
  box-shadow: var(--frame-shadow);
  border: var(--frame-border);
  position: relative;
  /* overflow يُطبق فقط في boxed/framed لمنع خروج السكشنات */
}

/* ── .oic-page-wrap: الحاوية الموحدة للصفحات الداخلية ── */
.oic-page-wrap {
  width: 100%;
  max-width: var(--container-xl, 1280px);
  margin-inline: auto;
  padding-inline: var(--gap, 20px);
  box-sizing: border-box;
}

/* في full: محدود بـ container عادي */
.oic-frame-full .oic-page-wrap {
  max-width: var(--container-xl, 1280px);
}

/* في boxed/framed: يأخذ العرض الكامل لـ #page */
.oic-frame-boxed .oic-page-wrap,
.oic-frame-framed .oic-page-wrap {
  max-width: 100%;
  padding-inline: var(--gap, 20px);
}

/* ── Frame: العرض الكامل (افتراضي) ── */
.oic-frame-full #page {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ── Frame: مخطط المربع ── */
.oic-frame-boxed #page {
  max-width: var(--frame-width, 1200px);
  margin-inline: auto;
  overflow: clip;
}
/* السكشنات full-width داخل boxed تبقى ضمن الحاوية */
.oic-frame-boxed .oic-sb-sec.sec-width--full {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* ── Frame: مخطط المحدد ── */
.oic-frame-contained .oic-page-wrap {
  max-width: var(--frame-width, 1200px);
}
.oic-frame-contained .container {
  max-width: var(--frame-width, 1200px) !important;
}

/* ── Frame: مخطط البرواز ── */
.oic-frame-framed {
  padding: var(--frame-padding, 16px);
  min-height: 100vh;
  box-sizing: border-box;
}
.oic-frame-framed #page {
  max-width: var(--frame-width, 1200px);
  margin-inline: auto;
  border-radius: var(--frame-radius, 16px);
  overflow: clip;
}
/* السكشنات full-width داخل framed تبقى ضمن الإطار */
.oic-frame-framed .oic-sb-sec.sec-width--full {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}
/* أول وآخر سكشن يأخذان زوايا الإطار */
.oic-frame-framed .oic-sb-sec:first-of-type {
  border-radius: var(--frame-radius, 16px) var(--frame-radius, 16px) 0 0;
  overflow: clip;
}
.oic-frame-framed .oic-sb-sec:last-of-type {
  border-radius: 0 0 var(--frame-radius, 16px) var(--frame-radius, 16px);
  overflow: clip;
}

/* الموبايل — دائماً عرض كامل */
@media (max-width: 767px) {
  .oic-frame-boxed #page,
  .oic-frame-framed #page {
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .oic-frame-framed { padding: 0 !important; }
}