/* 
sm  ≥ 576px
md  ≥ 768px
lg  ≥ 992px
xl  ≥ 1200px
*/

/* Proportional spacing scale (mobile-first) */
:root {
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
}

/* Tablet */
@media (min-width: 768px) {
  :root {
    --space-1: 0.375rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.25rem;
  }
}

/* Desktop */
@media (min-width: 992px) {
  :root {
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
  }
}

/* Large desktop */
@media (min-width: 1200px) {
  :root {
    --space-1: 0.625rem;
    --space-2: 1.25rem;
    --space-3: 2rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
  }
}

/* Padding utilities (logical & physical) */
/* All sides */
.qw-p-0 { padding: var(--space-0); }
.qw-p-1 { padding: var(--space-1); }
.qw-p-2 { padding: var(--space-2); }
.qw-p-3 { padding: var(--space-3); }
.qw-p-4 { padding: var(--space-4); }
.qw-p-5 { padding: var(--space-5); }

/* Block (top / bottom) */
.qw-pt-1 { padding-top: var(--space-1); padding-block-start: var(--space-1); }
.qw-pt-2 { padding-top: var(--space-2); padding-block-start: var(--space-2); }
.qw-pt-3 { padding-top: var(--space-3); padding-block-start: var(--space-3); }
.qw-pt-4 { padding-top: var(--space-4); padding-block-start: var(--space-4); }
.qw-pt-5 { padding-top: var(--space-5); padding-block-start: var(--space-5); }

.qw-pb-1 { padding-bottom: var(--space-1); padding-block-end: var(--space-1); }
.qw-pb-2 { padding-bottom: var(--space-2); padding-block-end: var(--space-2); }
.qw-pb-3 { padding-bottom: var(--space-3); padding-block-end: var(--space-3); }
.qw-pb-4 { padding-bottom: var(--space-4); padding-block-end: var(--space-4); }
.qw-pb-5 { padding-bottom: var(--space-5); padding-block-end: var(--space-5); }

.qw-py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); padding-block-start: var(--space-1); padding-block-end: var(--space-1); }
.qw-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); padding-block-start: var(--space-2); padding-block-end: var(--space-2); }
.qw-py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); padding-block-start: var(--space-3); padding-block-end: var(--space-3); }
.qw-py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); padding-block-start: var(--space-4); padding-block-end: var(--space-4); }
.qw-py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); padding-block-start: var(--space-5); padding-block-end: var(--space-5); }

/* Inline (RTL-safe left/right) */
.qw-ps-1 { padding-left: var(--space-1); padding-inline-start: var(--space-1); }
.qw-ps-2 { padding-left: var(--space-2); padding-inline-start: var(--space-2); }
.qw-ps-3 { padding-left: var(--space-3); padding-inline-start: var(--space-3); }
.qw-ps-4 { padding-left: var(--space-4); padding-inline-start: var(--space-4); }
.qw-ps-5 { padding-left: var(--space-5); padding-inline-start: var(--space-5); }

.qw-pe-1 { padding-right: var(--space-1); padding-inline-end: var(--space-1); }
.qw-pe-2 { padding-right: var(--space-2); padding-inline-end: var(--space-2); }
.qw-pe-3 { padding-right: var(--space-3); padding-inline-end: var(--space-3); }
.qw-pe-4 { padding-right: var(--space-4); padding-inline-end: var(--space-4); }
.qw-pe-5 { padding-right: var(--space-5); padding-inline-end: var(--space-5); }

.qw-px-1 { padding-left: var(--space-1); padding-right: var(--space-1); padding-inline-start: var(--space-1); padding-inline-end: var(--space-1); }
.qw-px-2 { padding-left: var(--space-2); padding-right: var(--space-2); padding-inline-start: var(--space-2); padding-inline-end: var(--space-2); }
.qw-px-3 { padding-left: var(--space-3); padding-right: var(--space-3); padding-inline-start: var(--space-3); padding-inline-end: var(--space-3); }
.qw-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); padding-inline-start: var(--space-4); padding-inline-end: var(--space-4); }
.qw-px-5 { padding-left: var(--space-5); padding-right: var(--space-5); padding-inline-start: var(--space-5); padding-inline-end: var(--space-5); }

/* Margin utilities (logical & physical) */
/* All sides */
.qw-m-0 { margin: var(--space-0); }
.qw-m-1 { margin: var(--space-1); }
.qw-m-2 { margin: var(--space-2); }
.qw-m-3 { margin: var(--space-3); }
.qw-m-4 { margin: var(--space-4); }
.qw-m-5 { margin: var(--space-5); }

/* Block (top / bottom) */
.qw-mt-1 { margin-top: var(--space-1); margin-block-start: var(--space-1); }
.qw-mt-2 { margin-top: var(--space-2); margin-block-start: var(--space-2); }
.qw-mt-3 { margin-top: var(--space-3); margin-block-start: var(--space-3); }
.qw-mt-4 { margin-top: var(--space-4); margin-block-start: var(--space-4); }
.qw-mt-5 { margin-top: var(--space-5); margin-block-start: var(--space-5); }

.qw-mb-1 { margin-bottom: var(--space-1); margin-block-end: var(--space-1); }
.qw-mb-2 { margin-bottom: var(--space-2); margin-block-end: var(--space-2); }
.qw-mb-3 { margin-bottom: var(--space-3); margin-block-end: var(--space-3); }
.qw-mb-4 { margin-bottom: var(--space-4); margin-block-end: var(--space-4); }
.qw-mb-5 { margin-bottom: var(--space-5); margin-block-end: var(--space-5); }

.qw-my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); margin-block-start: var(--space-1); margin-block-end: var(--space-1); }
.qw-my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); margin-block-start: var(--space-2); margin-block-end: var(--space-2); }
.qw-my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); margin-block-start: var(--space-3); margin-block-end: var(--space-3); }
.qw-my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); margin-block-start: var(--space-4); margin-block-end: var(--space-4); }
.qw-my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); margin-block-start: var(--space-5); margin-block-end: var(--space-5); }

/* Inline (RTL-safe) */
.qw-ms-1 { margin-left: var(--space-1); margin-inline-start: var(--space-1); }
.qw-ms-2 { margin-left: var(--space-2); margin-inline-start: var(--space-2); }
.qw-ms-3 { margin-left: var(--space-3); margin-inline-start: var(--space-3); }
.qw-ms-4 { margin-left: var(--space-4); margin-inline-start: var(--space-4); }
.qw-ms-5 { margin-left: var(--space-5); margin-inline-start: var(--space-5); }

.qw-me-1 { margin-right: var(--space-1); margin-inline-end: var(--space-1); }
.qw-me-2 { margin-right: var(--space-2); margin-inline-end: var(--space-2); }
.qw-me-3 { margin-right: var(--space-3); margin-inline-end: var(--space-3); }
.qw-me-4 { margin-right: var(--space-4); margin-inline-end: var(--space-4); }
.qw-me-5 { margin-right: var(--space-5); margin-inline-end: var(--space-5); }

.qw-mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); margin-inline-start: var(--space-1); margin-inline-end: var(--space-1); }
.qw-mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); margin-inline-start: var(--space-2); margin-inline-end: var(--space-2); }
.qw-mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); margin-inline-start: var(--space-3); margin-inline-end: var(--space-3); }
.qw-mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); margin-inline-start: var(--space-4); margin-inline-end: var(--space-4); }
.qw-mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); margin-inline-start: var(--space-5); margin-inline-end: var(--space-5); }

/* Auto alignment (RTL-safe) */
.qw-ms-auto { margin-left: auto; margin-inline-start: auto; }
.qw-me-auto { margin-right: auto; margin-inline-end: auto; }
.qw-mx-auto { margin-left: auto; margin-right: auto; margin-inline-start: auto; margin-inline-end: auto; }

/* Responsive logical overrides */
@media (min-width: 768px) {
  .qw-px-md-4 { padding-left: var(--space-4); padding-right: var(--space-4); padding-inline-start: var(--space-4); padding-inline-end: var(--space-4); }
  .qw-mt-md-5 { margin-top: var(--space-5); margin-block-start: var(--space-5); }
}

@media (min-width: 992px) {
  .qw-ps-lg-5 { padding-left: var(--space-5); padding-inline-start: var(--space-5); }
  .qw-me-lg-auto { margin-right: auto; margin-inline-end: auto; }
}


.d-none{
    display: none !important;
}

/* How to use (examples)
<!-- RTL-safe card -->
<div class="qw-p-3 px-md-4 my-4">
  <h2 class="qw-qw-mb-2">العنوان</h2>
  <p class="qw-qw-mb-3">نص توضيحي</p>
  <a class="qw-ms-auto">اقرأ المزيد</a>
</div> */




/* Core Utility Scale */


/* MIN-HEIGHT UTILITIES */

/* .min-h-0    { min-height: 0; }
.min-h-auto { min-height: auto; } */

/* Viewport-based */
/* .min-h-screen   { min-height: 100vh; } */
/* .min-h-dvh      { min-height: 100dvh; } mobile-safe */
/* .min-h-svh      { min-height: 100svh; } */
/* .min-h-lvh      { min-height: 100lvh; } */

/* Percentage */
/* .min-h-full { min-height: 100%; } */

/* Spacing scale */
/* .min-h-1  { min-height: 0.25rem; } */ /* 4px */
/* .min-h-2  { min-height: 0.5rem; }
.min-h-3  { min-height: 0.75rem; }
.min-h-4  { min-height: 1rem; }
.min-h-6  { min-height: 1.5rem; }
.min-h-8  { min-height: 2rem; }
.min-h-10 { min-height: 2.5rem; }
.min-h-12 { min-height: 3rem; }
.min-h-16 { min-height: 4rem; }
.min-h-20 { min-height: 5rem; }
.min-h-24 { min-height: 6rem; }
.min-h-32 { min-height: 8rem; }
.min-h-40 { min-height: 10rem; }
.min-h-48 { min-height: 12rem; }
.min-h-64 { min-height: 16rem; } */

/* Semantic Layout Heights */

/* For layouts, cards, and sections */

/* SEMANTIC MIN-HEIGHTS */

/* .min-h-xs  { min-height: 6rem; }
.min-h-sm  { min-height: 12rem; }
.min-h-md  { min-height: 20rem; }
.min-h-lg  { min-height: 28rem; }
.min-h-xl  { min-height: 36rem; } */

/* Common layout patterns */
/* .min-h-header { min-height: 4rem; }
.min-h-footer { min-height: 5rem; }
.min-h-card   { min-height: 12rem; }
.min-h-modal  { min-height: 60vh; } */


/* CSS Variable–Driven System (Best for Design Systems) */


/* :root {
  --min-h-1: 0.25rem;
  --min-h-2: 0.5rem;
  --min-h-3: 0.75rem;
  --min-h-4: 1rem;
  --min-h-6: 1.5rem;
  --min-h-8: 2rem;
  --min-h-12: 3rem;
  --min-h-16: 4rem;
  --min-h-24: 6rem;
  --min-h-32: 8rem;
  --min-h-48: 12rem;
  --min-h-64: 16rem;
}

.min-h-1  { min-height: var(--min-h-1); }
.min-h-2  { min-height: var(--min-h-2); }
.min-h-3  { min-height: var(--min-h-3); }
.min-h-4  { min-height: var(--min-h-4); }
.min-h-6  { min-height: var(--min-h-6); }
.min-h-8  { min-height: var(--min-h-8); }
.min-h-12 { min-height: var(--min-h-12); }
.min-h-16 { min-height: var(--min-h-16); }
.min-h-24 { min-height: var(--min-h-24); }
.min-h-32 { min-height: var(--min-h-32); }
.min-h-48 { min-height: var(--min-h-48); }
.min-h-64 { min-height: var(--min-h-64); } */


/* Base (Mobile First) */

/* These apply to mobile by default */

/* =========================
   MIN-HEIGHT — MOBILE BASE
   ========================= */

.min-h-0 { min-height: 0; }
.min-h-auto { min-height: auto; }

.min-h-full { min-height: 100%; }

/* Viewport */
.min-h-screen { min-height: 100vh; }
.min-h-dvh { min-height: 100dvh; }

/* Scale */
.min-h-4  { min-height: 4rem; }
.min-h-8  { min-height: 8rem; }
.min-h-12 { min-height: 12rem; }
.min-h-16 { min-height: 16rem; }
.min-h-18 { min-height: 18rem; }
.min-h-20 { min-height: 20rem; }
.min-h-24 { min-height: 24rem; }
.min-h-28 { min-height: 28rem; }
.min-h-30 { min-height: 30rem; }
.min-h-32 { min-height: 32rem; }
.min-h-36 { min-height: 36rem; }
.min-h-40 { min-height: 40rem; }

/* Semantic */
.min-h-card { min-height: 12rem; }
.min-h-section { min-height: 60vh; }

.h-100 { height: 100% !important; }
.h-0 { height: 0 !important; }
.h-auto { height: auto !important; }

.w-100 { width: 100% !important; }
.w-75 { width: 75% !important; }
.w-50 { width: 50% !important; }
.w-25 { width: 25% !important; }
.w-0 { width: 0 !important; }
.w-auto { width: auto !important; }

/* Tablet (≥ 768px) */

/* Prefix: tab- */

/* =========================
   TABLET
   ========================= */

@media (min-width: 768px) {
  .tab-min-h-4  { min-height: 4rem; }
  .tab-min-h-8  { min-height: 8rem; }
  .tab-min-h-12 { min-height: 12rem; }
  .tab-min-h-16 { min-height: 16rem; }
  .tab-min-h-20 { min-height: 20rem; }
  .tab-min-h-24 { min-height: 24rem; }
  .tab-min-h-28 { min-height: 28rem; }
  .tab-min-h-32 { min-height: 32rem; }
  .tab-min-h-36 { min-height: 36rem; }
  .tab-min-h-40 { min-height: 40rem; }
}

/* Desktop (≥ 992px) */

/* Prefix: desk- */

/* =========================
   DESKTOP
   ========================= */

@media (min-width: 992px) {
  .desk-min-h-4  { min-height: 4rem; }
  .desk-min-h-8  { min-height: 8rem; }
  .desk-min-h-12 { min-height: 12rem; }
  .desk-min-h-16 { min-height: 16rem; }
  .desk-min-h-20 { min-height: 20rem; }
  .desk-min-h-24 { min-height: 24rem; }
  .desk-min-h-28 { min-height: 28rem; }
  .desk-min-h-32 { min-height: 32rem; }
  .desk-min-h-36 { min-height: 36rem; }
  .desk-min-h-40 { min-height: 40rem; }
}

/* Large Desktop (≥ 1280px) */

/* Prefix: lgd- (Large Desktop) */

/* =========================
   LARGE DESKTOP
   ========================= */

@media (min-width: 1280px) {
  .lgd-min-h-4  { min-height: 4rem; }
  .lgd-min-h-8  { min-height: 8rem; }
  .lgd-min-h-12 { min-height: 12rem; }
  .lgd-min-h-16 { min-height: 16rem; }
  .lgd-min-h-20 { min-height: 20rem; }
  .lgd-min-h-24 { min-height: 24rem; }
  .lgd-min-h-28 { min-height: 28rem; }
  .lgd-min-h-32 { min-height: 32rem; }
  .lgd-min-h-36 { min-height: 36rem; }
  .lgd-min-h-40 { min-height: 40rem; }
}