/* ==========================================================================
   الشبكة المحلية الخفيفة — Local Grid
   بديل محلي صغير عن Bootstrap للصفوف والأعمدة وأدوات التخطيط المستخدمة فعليًا.
   يقلل الاعتماد على CDN ويحافظ على سرعة واستقرار العرض.
   أضف هنا أي utility جديدة عند استخدامها في الصفحات.
   ========================================================================== */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row {
  --gx: 24px;
  --gy: 24px;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gx) / -2);
  margin-right: calc(var(--gx) / -2);
  margin-top: calc(var(--gy) * -1);
}
.row > * {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding-left: calc(var(--gx) / 2);
  padding-right: calc(var(--gx) / 2);
  margin-top: var(--gy);
}

.g-3 { --gx: 16px; --gy: 16px; }
.g-4 { --gx: 24px; --gy: 24px; }
.g-5 { --gx: 48px; --gy: 48px; }
@media (min-width: 992px) { .g-lg-5 { --gx: 48px; --gy: 48px; } }

.col-6  { width: 50%; }
.col-12 { width: 100%; }

@media (min-width: 576px) { .col-sm-6 { width: 50%; } }
@media (min-width: 768px) { .col-md-6 { width: 50%; } }
@media (min-width: 992px) {
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.33333%; }
  .col-lg-5 { width: 41.66667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.33333%; }
  .col-lg-10 { width: 83.33333%; }
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .justify-content-lg-end { justify-content: flex-end; }
  .d-lg-none { display: none !important; }
}

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.h-100 { height: 100%; }

.gap-2 { gap: .5rem; }
.m-0  { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }