/* ═══════════════════════════════════════════════════════════════════════
   OIC Mini Layouts — أدوات تخطيط هيكلية
   ───────────────────────────────────────────────────────────────────────
   مجموعة كلاسات مساعدة للتخطيط (Grid, Stack, Row, Split, Sidebar, إلخ)
   جميع التوكنز متوافقة مع variables.css الخاص بالقالب
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   1) GRID — الشبكات
   ⭐ Smart Grid v1.1.1012 — نفس فلسفة Cards v2:
   - الحد الأقصى للأعمدة = ما اختاره المستخدم (oic-mini-cols)
   - الحد الأدنى لعرض الخلية = 200px للنصوص العادية (oic-mini-min-cell)
   - عند الموبايل: المتصفح يقلل الأعمدة تلقائياً (auto-fit)
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      max(var(--oic-mini-min-cell, 200px), calc((100% - (var(--oic-mini-cols, 3) - 1) * var(--oic-mini-gap, var(--space-3))) / var(--oic-mini-cols, 3))),
      1fr
    )
  );
  gap: var(--oic-mini-gap, var(--space-3));
}
.oic-mini-grid-2 { --oic-mini-cols: 2; }
.oic-mini-grid-3 { --oic-mini-cols: 3; }
.oic-mini-grid-4 { --oic-mini-cols: 4; }
.oic-mini-grid-5 { --oic-mini-cols: 5; }
.oic-mini-grid-6 { --oic-mini-cols: 6; }

/* أحجام الخلية الدنيا */
.oic-mini-grid-cell-sm { --oic-mini-min-cell: 140px; }
.oic-mini-grid-cell-md { --oic-mini-min-cell: 200px; }
.oic-mini-grid-cell-lg { --oic-mini-min-cell: 260px; }
.oic-mini-grid-cell-xl { --oic-mini-min-cell: 320px; }

.oic-mini-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--oic-mini-min, 180px), 1fr));
  gap: var(--oic-mini-gap, var(--space-3));
}
.oic-mini-grid-auto-xs { --oic-mini-min: 110px; }
.oic-mini-grid-auto-sm { --oic-mini-min: 140px; }
.oic-mini-grid-auto-md { --oic-mini-min: 220px; }
.oic-mini-grid-auto-lg { --oic-mini-min: 280px; }
.oic-mini-grid-auto-xl { --oic-mini-min: 360px; }


/* ═══════════════════════════════════════════════════════════════════════
   2) STACK / ROW — التدفق
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-stack {
  display: flex;
  flex-direction: column;
  gap: var(--oic-mini-gap, var(--space-3));
}
.oic-mini-stack-xs { --oic-mini-gap: var(--space-1); }
.oic-mini-stack-sm { --oic-mini-gap: var(--space-2); }
.oic-mini-stack-md { --oic-mini-gap: var(--space-4); }
.oic-mini-stack-lg { --oic-mini-gap: var(--space-5); }

.oic-mini-row {
  display: flex;
  align-items: center;
  gap: var(--oic-mini-gap, var(--space-3));
}
.oic-mini-row-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oic-mini-gap, var(--space-2));
}
.oic-mini-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oic-mini-gap, var(--space-3));
}
.oic-mini-row-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oic-mini-gap, var(--space-3));
}
.oic-mini-row-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--oic-mini-gap, var(--space-2));
}


/* ═══════════════════════════════════════════════════════════════════════
   3) MEDIA / 3-ZONE / 4-ZONE — العناصر المتداخلة
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-media {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--oic-mini-gap, var(--space-3));
  align-items: center;
}
.oic-mini-media-top     { align-items: start; }
.oic-mini-media-reverse { grid-template-columns: minmax(0, 1fr) auto; }

.oic-mini-3 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--oic-mini-gap, var(--space-2));
  align-items: center;
}
.oic-mini-3-top { align-items: start; }

.oic-mini-4 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--oic-mini-gap, var(--space-2));
  align-items: center;
}


/* ═══════════════════════════════════════════════════════════════════════
   4) SPLIT — تقسيم العمودين
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-split {
  display: grid;
  grid-template-columns: minmax(0, var(--oic-mini-main, 1fr)) minmax(0, var(--oic-mini-side, 280px));
  gap: var(--oic-mini-gap, var(--space-4));
  align-items: start;
}
.oic-mini-split-50-50 { --oic-mini-main: 1fr; --oic-mini-side: 1fr; }
.oic-mini-split-60-40 { --oic-mini-main: 6fr; --oic-mini-side: 4fr; }
.oic-mini-split-70-30 { --oic-mini-main: 7fr; --oic-mini-side: 3fr; }
.oic-mini-split-75-25 { --oic-mini-main: 3fr; --oic-mini-side: 1fr; }
.oic-mini-split-auto  { --oic-mini-main: 1fr; --oic-mini-side: auto; }
.oic-mini-split-reverse {
  grid-template-columns: minmax(0, var(--oic-mini-side, 280px)) minmax(0, var(--oic-mini-main, 1fr));
}


/* ═══════════════════════════════════════════════════════════════════════
   5) SIDEBAR
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, var(--oic-mini-sidebar, 300px));
  gap: var(--oic-mini-gap, var(--space-4));
  align-items: start;
}
.oic-mini-sidebar-left {
  grid-template-columns: minmax(220px, var(--oic-mini-sidebar, 300px)) minmax(0, 1fr);
}


/* ═══════════════════════════════════════════════════════════════════════
   6) CARD ROW
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-card-row {
  display: grid;
  grid-template-columns: minmax(88px, var(--oic-mini-thumb, 132px)) minmax(0, 1fr);
  gap: var(--oic-mini-gap, var(--space-3));
  align-items: start;
}
.oic-mini-card-row-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(88px, var(--oic-mini-thumb, 132px));
}


/* ═══════════════════════════════════════════════════════════════════════
   7) MASONRY LITE
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-masonry-lite {
  columns: var(--oic-mini-cols, 3);
  column-gap: var(--oic-mini-gap, var(--space-3));
}
.oic-mini-masonry-lite > * {
  break-inside: avoid;
  margin-bottom: var(--oic-mini-gap, var(--space-3));
}


/* ═══════════════════════════════════════════════════════════════════════
   8) COVER — صورة + محتوى فوقها
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-cover {
  display: grid;
  min-height: var(--oic-mini-cover-h, 240px);
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.oic-mini-cover > * { grid-area: 1 / 1; }
.oic-mini-cover-content {
  align-self: end;
  padding: var(--oic-mini-pad, var(--space-4));
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.18), transparent);
  color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════
   9) CENTER / FRAME
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-center {
  display: grid;
  place-items: center;
  text-align: center;
}
.oic-mini-frame {
  display: grid;
  place-items: center;
  min-height: var(--oic-mini-frame-h, 180px);
  padding: var(--oic-mini-pad, var(--space-4));
}


/* ═══════════════════════════════════════════════════════════════════════
   10) SCROLL-X — تمرير أفقي
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-scroll-x {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--oic-mini-item-w, 220px), 1fr);
  gap: var(--oic-mini-gap, var(--space-3));
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: inline mandatory;
}
.oic-mini-scroll-x > * { scroll-snap-align: start; }


/* ═══════════════════════════════════════════════════════════════════════
   11) TABS / TOOLBAR / ACTIONS
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-tabs-row {
  display: flex;
  align-items: center;
  gap: var(--oic-mini-gap, var(--space-2));
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: var(--space-1);
}
.oic-mini-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oic-mini-gap, var(--space-3));
}
.oic-mini-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--oic-mini-gap, var(--space-2));
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   12) FORMS
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-form-row {
  display: grid;
  grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
  gap: var(--oic-mini-gap, var(--space-3));
  align-items: center;
}
.oic-mini-form-row-top { align-items: start; }
.oic-mini-input-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--oic-mini-gap, var(--space-2));
}
.oic-mini-pricing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--oic-mini-gap, var(--space-3));
  align-items: end;
}


/* ═══════════════════════════════════════════════════════════════════════
   13) TIMELINE
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-timeline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--oic-mini-gap, var(--space-3));
  align-items: start;
}
.oic-mini-timeline-list {
  display: grid;
  gap: var(--oic-mini-gap, var(--space-3));
}


/* ═══════════════════════════════════════════════════════════════════════
   14) ASPECT RATIO
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-aspect          { aspect-ratio: var(--oic-mini-aspect, 16/9); overflow: hidden; }
.oic-mini-aspect-square   { --oic-mini-aspect: 1/1; }
.oic-mini-aspect-wide     { --oic-mini-aspect: 16/9; }
.oic-mini-aspect-card     { --oic-mini-aspect: 4/3; }
.oic-mini-aspect-portrait { --oic-mini-aspect: 3/4; }


/* ═══════════════════════════════════════════════════════════════════════
   15) EDITOR ROWS — صفوف للمحرر
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-editor-row-2,
.oic-mini-editor-row-3,
.oic-mini-editor-row-4 {
  display: grid;
  gap: var(--oic-mini-gap, var(--space-3));
}
.oic-mini-editor-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oic-mini-editor-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oic-mini-editor-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* ═══════════════════════════════════════════════════════════════════════
   16) FOOTER GRID
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-footer-grid-2,
.oic-mini-footer-grid-3,
.oic-mini-footer-grid-4 {
  display: grid;
  gap: var(--oic-mini-gap, var(--space-5));
}
.oic-mini-footer-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oic-mini-footer-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oic-mini-footer-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.oic-mini-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--oic-mini-gap, var(--space-2));
}
.oic-mini-footer-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
}


/* ═══════════════════════════════════════════════════════════════════════
   17) SOCIAL — أزرار التواصل (بدون ألوان براندات)
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-social-row,
.oic-mini-header-icons,
.oic-mini-footer-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--oic-mini-gap, var(--space-2));
}
.oic-mini-social-column {
  display: grid;
  gap: var(--oic-mini-gap, var(--space-2));
  justify-items: start;
}
.oic-mini-social-grid {
  display: grid;
  grid-template-columns: repeat(var(--oic-mini-cols, 4), 36px);
  gap: var(--oic-mini-gap, var(--space-2));
}


/* ═══════════════════════════════════════════════════════════════════════
   18) OPTION PANEL
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-option-panel {
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-surface);
}
.oic-mini-option-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  background: var(--c-bg-alt);
  color: var(--primary-700);
  font-weight: var(--weight-bold);
  font-size: var(--font-sm);
}
.oic-mini-option-panel__body {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-4);
}


/* ═══════════════════════════════════════════════════════════════════════
   19) FIELD
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-field {
  display: grid;
  gap: var(--space-2);
}
.oic-mini-field__label {
  font-weight: var(--weight-bold);
  color: var(--c-text-light);
  font-size: var(--font-sm);
}
.oic-mini-field__hint {
  color: var(--c-text-muted);
  font-size: var(--font-xs);
}


/* ═══════════════════════════════════════════════════════════════════════
   20) TOGGLE GROUP
   ═══════════════════════════════════════════════════════════════════════ */

.oic-mini-toggle-group {
  display: grid;
  grid-template-columns: repeat(var(--oic-mini-cols, 5), minmax(0, 1fr));
  gap: var(--space-2);
}
.oic-mini-toggle-btn {
  min-height: 38px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  color: var(--c-text-light);
  display: grid;
  place-items: center;
  font-weight: var(--weight-bold);
  font-size: var(--font-sm);
  transition: all var(--duration-200) var(--ease-in-out);
  cursor: pointer;
}
.oic-mini-toggle-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.oic-mini-toggle-btn.is-active {
  background: var(--c-primary);
  color: var(--c-primary-text);
  border-color: var(--c-primary);
  box-shadow: var(--shadow-sm);
}

/*
      Inline Grid:
      قائمة أفقية من عناصر صغيرة متساوية/مرنة.
    */
    .oic-mini-l-inline-grid {
      display: grid;
      grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
      gap: var(--gap-3);
    }

    .oic-mini-l-inline-grid--2 {
      --cols: 2;
    }

    .oic-mini-l-inline-grid--3 {
      --cols: 3;
    }

    .oic-mini-l-inline-grid--4 {
      --cols: 4;
    }


        /*
      Stack:
      عناصر تحت بعض مع gap.
      يستخدم داخل الكارد، الفورم، النصوص، الفوتر، القائمة الرأسية.
    */

     .oic-mini-l-list-item {
      padding: 12px;
      border: 1px solid var(--oic-border);
      border-radius: var(--oic-radius-md);
      background: var(--oic-surface-2);
    }

    .oic-mini-l-stack {
      display: flex;
      flex-direction: column;
      gap: var(--stack-gap, var(--gap-3));
    }

    .oic-mini-l-stack--compact {
      --stack-gap: var(--gap-2);
    }

    .oic-mini-l-stack--loose {
      --stack-gap: var(--gap-5);
    }
    /*
      Between:
      عنصر في جهة وعنصر في الجهة الأخرى.
      ممتاز لعنوان + زر، اسم + رقم، أيقونة + إجراء.
    */
    .oic-mini-l-between {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--gap-3);
    }

      @media (max-width: 760px) {
      .oic-mini-l-two,
      .oic-mini-l-two--reverse {
        grid-template-columns: 1fr;
      }

      .oic-mini-l-inline-grid {
        grid-template-columns: 1fr;
      }

      .oic-mini-l-between {
        align-items: stretch;
        flex-direction: column;
      }
    }
    .oic-mini-l-small {
      font-size: 13px;
    }
     .oic-mini-l-muted {
      color: var(--oic-muted);
    }
    .oic-mini-l-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: var(--oic-primary-soft);
      color: var(--c-text);
      border: 1px solid rgba(11, 122, 87, .18);
      flex: 0 0 auto;
    }
    .oic-mini-l-count {
      min-width: 32px;
      height: 32px;
      display: inline-grid;
      place-items: center;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: var(--oic-mini-gap, var(--space-2));
      font-size: 17px;
      font-weight: 800;
    }

/* ═══════════════════════════════════════════════════════════════════════
   ⭐ MOBILE BREAKPOINTS — v1.1.1012
   جعل كل الـ layouts الكبيرة تنزل لعمود واحد على الموبايل
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Split → عمود واحد */
  .oic-mini-split,
  .oic-mini-split-reverse {
    grid-template-columns: 1fr !important;
  }
  
  /* Sidebar → عمود واحد */
  .oic-mini-sidebar,
  .oic-mini-sidebar-left {
    grid-template-columns: 1fr !important;
  }
  
  /* Card Row → عمود واحد */
  .oic-mini-card-row,
  .oic-mini-card-row-reverse {
    grid-template-columns: 1fr !important;
  }
  
  /* Form row → عمود واحد */
  .oic-mini-form-row,
  .oic-mini-form-row-top {
    grid-template-columns: 1fr !important;
  }
  
  /* Editor rows → عمود واحد */
  .oic-mini-editor-row-2,
  .oic-mini-editor-row-3,
  .oic-mini-editor-row-4 {
    grid-template-columns: 1fr !important;
  }
  
  /* Footer grid → عمودين أو واحد */
  .oic-mini-footer-grid-3,
  .oic-mini-footer-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .oic-mini-footer-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  /* الشاشات الأصغر: footer grid عمود واحد */
  .oic-mini-footer-grid-2,
  .oic-mini-footer-grid-3,
  .oic-mini-footer-grid-4 {
    grid-template-columns: 1fr !important;
  }
}