/* 0) أساسيات مفيدة */
*,
*::before,
*::after { box-sizing: border-box; }

html { 
  /* خط مرن يمنع التكبير/التصغير الغير متناسق */
  font-size: clamp(14px, 2.6vw, 16px);
  -webkit-text-size-adjust: 100%;
}

img, video, canvas, svg { 
  max-width: 100%; 
  height: auto; 
  display: block; 
}

/* امنع أي عنصر يزوّغ برا الشاشة */
body { overflow-x: hidden; }
:where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; }

/* جداول عريضة على موبايل */
.table-responsive, 
:where(table) { width: 100%; }
:where(.table, table) { display: block; overflow-x: auto; }

/* فورمات */
input, select, textarea, button { font: inherit; }

/* 1) اعمل حاويات مرنة */
.container, .wrap, .content, .inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* 2) عالج مشاكل الـflex/grid الشائعة */
:where(.row, .flex, .d-flex, [class*="flex"]) {
  display: flex;
  flex-wrap: wrap;
  min-width: 0; /* مهم عشان النصوص الكبيرة ما تدفعش العناصر للخروج */
  gap: 12px;
}

/* أي عمود ثابت العرض على ديسكتوب خليه يتمدد على الموبايل */
[class*="col-"] { min-width: 0; }

/* 3) أزرار وروابط طويلة */
a, button { word-break: break-word; }

/* 4) الصور/البانرات */
.banner, .hero, .header-img { 
  background-size: cover; 
  background-position: center; 
}
.banner img, .hero img { width: 100%; height: auto; }

/* 5) عناصر بتعرض برّه بسبب عرض ثابت */
*[style*="width:"], 
[class*="w-"] {
  max-width: 100%;
}

/* 6) موبايل: نقط قطع رئيسية */
@media (max-width: 992px) {
  /* لو عندك سايدبار + محتوى، خليه عمود فوق بعض */
  .layout, .sidebar-layout, .two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  /* بدّل أي عرض ثابت إلى مرن */
  [class*="col-"], .col, .card, .box {
    width: 100% !important;
  }
  /* جداول */
  table thead { display: none; }
  table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 8px 0; }
  table td { padding: 6px 8px; }
  /* فورمات */
  input[type="text"], input[type="email"], input[type="tel"], 
  select, textarea {
    width: 100%;
  }
}

@media (max-width: 576px) {
  /* مسافات داخلية آمنة لحواف الآيفون */
  body { padding-bottom: env(safe-area-inset-bottom); }
  /* حجم العناوين */
  h1 { font-size: clamp(20px, 6vw, 28px); }
  h2 { font-size: clamp(18px, 5.2vw, 24px); }
  h3 { font-size: clamp(16px, 4.6vw, 20px); }
  p, li { font-size: clamp(14px, 4vw, 16px); line-height: 1.6; }
  /* كروت وصور داخلية */
  .card img, .box img { width: 100%; height: auto; }
}

/* 7) عناصر طافية أو موضوعة position في أماكن غريبة على الموبايل */
@media (max-width: 768px) {
  [class*="float-"] { float: none !important; }
  [style*="position: absolute"], [style*="position:absolute"] {
    position: static !important;
  }
}

/* 8) قوائم التنقل */
.nav, .navbar, .menu {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.nav a, .menu a { padding: 10px 12px; }

/* 9) سلايدر/كاروسيل بيطلع برا */
.slider, .carousel {
  overflow: hidden;
}
.slider * { min-width: 0; }

/* 10) فوتر ثابت ممكن يغطي المحتوى */
.footer-fixed, .sticky-footer {
  max-width: 100%;
}

/* 11) إصلاحات overflow عامة لأي عنصر شاذ */
*[style*="min-width"] { min-width: 0 !important; }