/* ==========================================================================
   responsive.css — طبقة التجاوب الموحّدة لموقع "الحل الواقعي"
   --------------------------------------------------------------------------
   ملف واحد مشترك بين جميع الصفحات:
     index.html · checkout.html · track.html · success.html
     privacy/terms/shipping/refund.html · لوحة الإدارة
   يُحمَّل بعد أنماط كل صفحة، فلا يحتاج إلى !important إلا في حالات نادرة
   (أنماط بوابة ميسر التي تستخدم !important أصلاً).

   قواعد العمل هنا:
   • لا تغيير في الهوية أو الألوان أو الشعار أو الخطوط.
   • لا تغيير في السلة أو الدفع أو الشحن أو تسجيل الدخول.
   • مقاسات مرنة (clamp/min/max) بدل المقاسات الثابتة.
   • دعم منطقة الأمان في iPhone عبر env(safe-area-inset-*).
   • استخدام dvh/svh لأن 100vh غير دقيقة في Safari على الجوال.

   الفهرس:
     1) متغيّرات ومقاسات عامة
     2) قواعد أساسية آمنة (الصور، الجداول، منع التمرير الأفقي)
     3) الوصولية (التركيز، تقليل الحركة، التكبير)
     4) الهيدر والقائمة (الصفحة الرئيسية)
     5) الهيرو والأقسام والعناوين
     6) البحث والتصنيفات
     7) شبكة المنتجات وبطاقات المنتجات
     8) النوافذ المنبثقة ومودال المنتج والمعرض
     9) السلة الجانبية
    10) الأزرار العائمة (واتساب / اتصال / أعلى)
    11) التذييل
    12) الحقول والنماذج (منع تكبير iPhone)
    13) صفحة إتمام الطلب
    14) صفحتا النجاح والتتبع
    15) صفحات السياسات
    16) لوحة الإدارة
    17) الوضع العرضي (Landscape)
   ========================================================================== */

/* ── 1) متغيّرات ومقاسات عامة ─────────────────────────────────────────────── */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --tap: 44px;              /* أصغر مساحة ضغط مقبولة */
  --gutter: 16px;           /* الهامش الجانبي العام */
  --nav-h: 80px;            /* ارتفاع الهيدر */
  --float-size: 56px;       /* قطر الأزرار العائمة */
  --float-gap: 12px;        /* التباعد بين الأزرار العائمة */
  --page-max: 1400px;
}

@media (max-width: 767px) {
  :root { --nav-h: 64px; --float-size: 52px; }
}
@media (max-width: 400px) {
  :root { --gutter: 12px; --float-size: 48px; --float-gap: 10px; }
}

/* حاوية مرنة جاهزة للاستخدام في أي قسم جديد */
.rs-container {
  width: min(100% - (var(--gutter) * 2), var(--page-max));
  margin-inline: auto;
}

/* ── 2) قواعد أساسية آمنة ────────────────────────────────────────────────── */

/* clip بدل hidden: يمنع الخروج الأفقي دون تعطيل position:sticky */
html, body { overflow-x: clip; }

/* شبكة أمان للمتصفحات التي لا تعرف القيمة clip — أهمّها Safari على iOS قبل
   الإصدار ١٦: القيمة المجهولة تُهمَل بصمت، فيبقى الخروج الأفقي بلا حارس. هذا
   وحده يفسّر لماذا بدا اللابتوب سليماً والجوال مكسوراً. الصفحة لا تستعمل
   position:sticky في أي قاعدة، فالرجوع إلى hidden هنا بلا كلفة.
   هذه طبقة ثانية فقط؛ السبب الجذري عولج في مصدره. */
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
html {
  -webkit-text-size-adjust: 100%;   /* لا تتضخم الخطوط تلقائياً في iOS */
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 8px);
}

/* لا تسمح لأي وسيط بتوسيع الصفحة أفقياً.
   ملاحظة: انتقائية منخفضة عن قصد حتى تتفوق عليها أي قاعدة مقاس صريحة. */
img, video, canvas, svg, iframe { max-width: 100%; }
img { height: auto; }

/* كسر النصوص الطويلة (روابط، معرّفات، بريد) بدل دفع التصميم */
body { overflow-wrap: break-word; }

/* أي جدول داخل حاوية تمرير لا يخرج عن الشاشة */
.tbl-wrap, .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── 3) الوصولية ─────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #FFD700;
  outline-offset: 2px;
  border-radius: 4px;
}

/* نقاط Swiper مقاسها 8px من المكتبة. نوسّع مساحة اللمس رأسياً بعنصر شفاف
   بدل تكبير النقطة نفسها (لا تغيير في الشكل)، وأفقياً بمقدار نصف الفراغ
   فقط حتى لا تتقاطع مساحات النقاط المتجاورة */
@media (hover: none) {
  .swiper-pagination-bullet { position: relative; }
  .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    inset: -14px -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   الصفحة الرئيسية (body.store-page)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 4) الهيدر والقائمة ──────────────────────────────────────────────────── */
body.store-page nav.glass-nav .h-20 { height: var(--nav-h); }
body.store-page nav.glass-nav + div.pt-20 { padding-top: var(--nav-h); }

/* الشعار: يصغر بتناسب ولا يُقص */
body.store-page nav.glass-nav h1 {
  font-size: clamp(17px, 5vw, 24px);
  line-height: 1.2;
  white-space: nowrap;
}
body.store-page nav.glass-nav h1 + p { font-size: clamp(11px, 2.4vw, 12px); }
body.store-page nav.glass-nav .w-10.h-10 {
  width: clamp(32px, 9vw, 40px);
  height: clamp(32px, 9vw, 40px);
  flex-shrink: 0;
}

/* أيقونات الهيدر: مساحة ضغط 44×44 على الأقل ولا تتزاحم مع الشعار */
body.store-page nav.glass-nav button {
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.store-page nav.glass-nav .flex.items-center.gap-4 { gap: 4px; }
body.store-page nav.glass-nav #cartCount { top: 4px; right: 2px; }

/* القائمة المنسدلة: قابلة للتمرير ومساحات ضغط مريحة */
body.store-page #mobileMenu {
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(12px + var(--safe-b));
}
body.store-page #mobileMenu a {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 5) الهيرو والأقسام والعناوين ────────────────────────────────────────── */
body.store-page #home {
  height: 78vh;          /* احتياطي للمتصفحات القديمة */
  height: 78svh;         /* لا تتأثر بشريط Safari المتحرك */
  min-height: 340px;
  max-height: 640px;
}
body.store-page #home h2 {
  font-size: clamp(26px, 7.2vw, 72px);
  line-height: 1.18;
  margin-bottom: clamp(12px, 3vw, 24px);
}
body.store-page #home .max-w-2xl > span { font-size: clamp(12px, 3.4vw, 18px); }
body.store-page #home p { font-size: clamp(12px, 3.2vw, 16px); }
body.store-page #home button { min-height: var(--tap); }
body.store-page #home .absolute.inset-0.z-20 { padding-inline: clamp(14px, 5vw, 80px); }

/* أسهم الهيرو كانت تتقاطع مع النص على الجوال — نكتفي بالنقاط والسحب */
@media (max-width: 767px) {
  body.store-page #home .swiper-button-next,
  body.store-page #home .swiper-button-prev { display: none; }
}

/* عناوين الأقسام: مرنة بدل 36–40px ثابتة */
body.store-page section h2 {
  font-size: clamp(21px, 5.4vw, 40px);
  line-height: 1.3;
}
body.store-page section > .max-w-7xl,
body.store-page section.max-w-7xl { width: 100%; }
@media (max-width: 400px) {
  body.store-page section.px-4,
  body.store-page section > .px-4 { padding-inline: var(--gutter); }
}
body.store-page section { padding-inline: 0; }

/* الأكثر طلباً: صور بنِسَب موحّدة ولا تفيض */
body.store-page .topSellingSwiper img {
  height: clamp(110px, 32vw, 160px);
  object-fit: contain;
}
body.store-page .topSellingSwiper .h-40 { height: auto; }

/* صورة "من نحن" والخريطة: ارتفاعات مرنة بدل 500px/400px */
body.store-page #about img { height: clamp(220px, 48vw, 500px); }
body.store-page .map-section { height: clamp(260px, 55vw, 400px); }

/* ── 6) البحث والتصنيفات ─────────────────────────────────────────────────── */
body.store-page .search-wrapper > .relative {
  padding-inline: clamp(14px, 4vw, 24px);
  padding-block: clamp(10px, 3vw, 16px);
}
body.store-page #searchInput {
  font-size: 16px;            /* يمنع تكبير iPhone عند التركيز */
  min-height: 28px;
  min-width: 0;
}
body.store-page .search-wrapper i { margin-inline-start: clamp(6px, 2vw, 16px); }

/* ── أقسام المنتجات ───────────────────────────────────────────────────────
   الشكل الكامل للأزرار يُعرَّف هنا (لا نعتمد على أدوات Tailwind في الـHTML)
   حتى يبقى التباين ثابتاً ولا يُقصّ نص طويل مثل «الطوارئ والسلامة».
   • الكبير: صف مرتب في الوسط، ويلتف إلى صفين عند الحاجة بنفس الترتيب.
   • الجوال: صف أفقي واحد قابل للتمرير، يبدأ من اليمين بـ«الكل». */
body.store-page .cat-row {
  display: flex;
  gap: clamp(8px, 2vw, 14px);
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 10px;
}
body.store-page .cat-row .filter-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(14px, 3.4vw, 22px);
  padding-block: 8px;
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  /* غير المحدد: خلفية داكنة وحد واضح */
  background: #151518;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  /* لا قص للنص: يبقى في سطر واحد بعرضه الطبيعي دون تمدد مبالغ فيه */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto;
  max-width: none;
}
body.store-page .cat-row .filter-btn:hover,
body.store-page .cat-row .filter-btn:focus-visible {
  border-color: #FFD700;
  color: #FFD700;
}
/* القسم المختار: خلفية صفراء ونص داكن — نثبّت التباين بصراحة حتى عند
   :hover/:focus (على أندرويد تبقى حالة hover لاصقة بعد اللمس) */
body.store-page .cat-row .filter-btn.active,
body.store-page .cat-row .filter-btn.active:hover,
body.store-page .cat-row .filter-btn.active:focus,
body.store-page .cat-row .filter-btn.active:focus-visible {
  background: #FFD700;
  color: #0a0a0a;
  border-color: #FFD700;
}
@media (max-width: 640px) {
  body.store-page .cat-row {
    /* لا نضغط كل الأقسام داخل عرض الشاشة — تمرير أفقي بدلاً من ذلك */
    flex-wrap: nowrap;
    justify-content: flex-start; /* في RTL يعني: يبدأ من اليمين بـ«الكل» */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block-end: 6px;
    /* يسمح للزر الأول والأخير بالوصول إلى حافة الشاشة بشكل مرتب.
       الحشوة وحدها هنا بلا هامشٍ سالب: القاعدة `section { padding-inline: 0 }`
       تُلغي حشوة القسم px-4 في هذا المدى، فلا شيء يُلغى بهامشٍ سالب. */
    margin-inline: 0;
    padding-inline: var(--gutter);
  }
  body.store-page .cat-row::-webkit-scrollbar { display: none; }
  body.store-page .cat-row .filter-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 40px;
  }
}

/* دون 400px وحدها يستعيد القسم حشوته (انظر القاعدة أعلى الملف)، فهنا فقط
   يلزم هامشٌ سالب يُلغيها حتى يصل الزرّ إلى الحافة. سابقاً كان هذا الهامش
   مطبَّقاً حتى 640px بينما الحشوة لا تُستعاد إلا دون 400px، فبين 401px و640px
   كان الصف يخرج 16px من كل جانب — أي 32px تمرير أفقي على آيفون 414/428/430. */
@media (max-width: 400px) {
  body.store-page .cat-row { margin-inline: calc(var(--gutter) * -1); }
}
/* الشاشات الكبيرة: أزرار بعرضها الطبيعي فقط، مع التفاف مرتب في صفين */
@media (min-width: 1024px) {
  body.store-page .cat-row {
    max-width: 900px;
    margin-inline: auto;
  }
  body.store-page .cat-row .filter-btn { padding-inline: 22px; }
}

/* ── 7) شبكة المنتجات وبطاقات المنتجات ──────────────────────────────────── */
body.store-page #productsGrid {
  display: grid;
  gap: clamp(10px, 2.4vw, 24px);
  /* أقل من 360px: بطاقة واحدة مريحة بدل عمودين ضيقين */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
}
@media (min-width: 360px)  { body.store-page #productsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 600px)  { body.store-page #productsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { body.store-page #productsGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* الشاشات الكبيرة: 5 أعمدة مع توسيع الحاوية إلى 1400px حتى لا تضيق البطاقات
   (5 أعمدة داخل 1280px تعطي 237px فقط، أضيق من عمود الـ 4) */
@media (min-width: 1500px) {
  body.store-page #products {
    max-width: var(--page-max);
    width: min(100% - 32px, var(--page-max));
  }
  body.store-page #productsGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

/* منطقة الصورة: نسبة ثابتة لجميع البطاقات = ارتفاع موحّد */
.product-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: clamp(8px, 2.5vw, 16px);
  background: rgba(0, 0, 0, .2);
  border: 0;
  overflow: hidden;
  cursor: pointer;
}
@media (max-width: 359px) {
  .product-thumb { aspect-ratio: 4 / 3; }   /* بطاقة واحدة عريضة لا تطول الصفحة */
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* لا تمدد ولا قص للمنتج */
  object-position: center;
}

.product-cat-badge,
.product-stock-badge {
  position: absolute;
  top: 8px;
  font-size: clamp(11px, 2.8vw, 12px);   /* لا تصغير للنص عن 11px */
  padding: 3px 7px;
  border-radius: 5px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.product-cat-badge { right: 8px; }
.product-stock-badge { left: 8px; }

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  padding: clamp(10px, 3vw, 18px);
  min-width: 0;
}

/* اسم المنتج: سطران دائماً حتى تتساوى ارتفاعات البطاقات */
.product-name {
  font-size: clamp(13px, 3.4vw, 17px);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.45em * 2);
  overflow-wrap: anywhere;
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  min-width: 0;
}
.product-price {
  font-size: clamp(15px, 4vw, 20px);
  white-space: nowrap;
  min-width: 0;
}

/* زر الشراء ظاهر دائماً وفي موضع ثابت (كان يظهر عند hover فقط = غير قابل للاستخدام باللمس) */
.product-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.product-add {
  flex: 1 1 auto;
  min-height: var(--tap);
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(12px, 3.2vw, 15px);
  white-space: nowrap;
  cursor: pointer;
}
.product-view {
  flex: 0 0 auto;
  width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* أعمالنا: صور بنسبة موحّدة */
body.store-page #worksGrid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
/* شارة التصنيف: كانت 10px (أصغر من الحد المقروء) ولا تخرج عن البطاقة */
body.store-page .work-cat-badge {
  font-size: clamp(11px, 2.8vw, 12px);
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 8) النوافذ المنبثقة ومودال المنتج والمعرض ──────────────────────────── */
.modal { overscroll-behavior: contain; }

body.store-page #productModal .modal-content {
  max-width: min(960px, 100% - 16px);
  max-height: 92vh;
  max-height: 92dvh;
}
/* الصنف product-img-section كان مفقوداً من DOM فلم تعمل قواعد style.css الخاصة
   بالجوال. أُضيف إلى المتصفّح، ونُثبّت هنا عرض سطح المكتب كما كان (نصف النافذة). */
@media (min-width: 768px) {
  body.store-page #productModal .product-img-section { width: 50%; }
}
@media (max-width: 767px) {
  body.store-page #productModal { padding: 0; }
  body.store-page #productModal .modal-content {
    width: 100%;
    max-width: 100%;
    height: 90vh;
    height: 90dvh;
    max-height: 90vh;
    max-height: 90dvh;
  }
  body.store-page #productModal .product-img-section {
    height: clamp(150px, 28vh, 260px);
    height: clamp(150px, 28dvh, 260px);
    min-height: 0;
  }
  body.store-page #productModal .product-actions-bar {
    padding-bottom: calc(12px + var(--safe-b));
  }
  body.store-page #productModal .btn-add-cart { min-height: 48px; }
}

/* أزرار الكمية: مساحة ضغط كافية */
body.store-page .qty-control { height: 44px; width: 132px; }
body.store-page .qty-btn { width: 44px; }

/* معرض الصور: زر الإغلاق ظاهر دائماً على الشاشات الصغيرة */
body.store-page #galleryMainImg { max-height: 70vh; max-height: 70dvh; }
@media (max-width: 640px) {
  body.store-page .gallery-close {
    position: fixed;
    top: calc(10px + var(--safe-t));
    left: calc(10px + var(--safe-l));
    width: var(--tap);
    height: var(--tap);
    z-index: 30;
  }
  body.store-page .gallery-counter {
    position: fixed;
    top: calc(22px + var(--safe-t));
    right: calc(14px + var(--safe-r));
  }
  body.store-page #imageGalleryModal .w-12 { width: 40px; height: 40px; }
}

/* مودالات الحجز/الدخول: لا تتجاوز الشاشة ومحتواها قابل للتمرير */
body.store-page #bookingModal .modal-content,
body.store-page #authModal .modal-content {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding-bottom: calc(24px + var(--safe-b));
}
body.store-page #bookingModal .grid-cols-2 { gap: 8px; }
@media (max-width: 380px) {
  body.store-page #bookingModal .grid.grid-cols-2 { grid-template-columns: 1fr; }
}

/* SweetAlert على الشاشات الصغيرة */
.swal2-popup { width: min(92vw, 32em) !important; }
.swal2-title { font-size: clamp(17px, 5vw, 24px) !important; }

/* ── 9) السلة الجانبية ───────────────────────────────────────────────────── */
body.store-page #cartSidebar {
  width: min(100%, 400px);
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  overscroll-behavior: contain;
}
body.store-page #cartSidebar > div:first-child {
  padding: clamp(12px, 3vw, 24px) clamp(14px, 4vw, 24px);
  padding-top: calc(clamp(12px, 3vw, 24px) + var(--safe-t));
}
body.store-page #cartSidebar > div:first-child button {
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.store-page #cartItems {
  padding: clamp(10px, 3vw, 16px);
  padding-bottom: calc(12px + var(--safe-b));
}
/* شريط المجموع كان absolute فيغطي آخر منتج في السلة.
   إعادته إلى تدفق الـ flex هي معالجة السبب: #cartItems (flex:1) يأخذ
   المتبقي فقط، فلا تداخل عند أي عدد منتجات أو أي ارتفاع شاشة. */
body.store-page #cartSidebar .cart-footer-custom {
  position: static;
  flex: 0 0 auto;
  padding: clamp(12px, 3vw, 16px);
  padding-bottom: calc(16px + var(--safe-b));
}
body.store-page #cartSidebar .cart-footer-custom button { min-height: 48px; }
@media (max-width: 360px) {
  body.store-page #cartItems .shrink-0 { width: 76px; height: 88px; }
  body.store-page #cartSidebar .cart-footer-custom .w-7\/12 { width: 58%; }
}
body.cart-open { overflow: hidden; }

/* ── 10) الأزرار العائمة ─────────────────────────────────────────────────── */
/* z-index 45: أعلى من المحتوى والهيدر (40) وأدنى من غلاف السلة (55)
   والمودالات (50+) → لا تغطي أزرار السلة أو إتمام الطلب. */
body .float-btn,
body #scrollTopBtn {
  position: fixed;
  z-index: 45;
  top: auto;
}
body .float-wa {
  right: calc(var(--gutter) + var(--safe-r));
  left: auto;
  bottom: calc(var(--gutter) + var(--safe-b));
}
body .float-call {
  right: calc(var(--gutter) + var(--safe-r));
  left: auto;
  bottom: calc(var(--gutter) + var(--safe-b) + var(--float-size) + var(--float-gap));
}
body #scrollTopBtn {
  left: calc(var(--gutter) + var(--safe-l));
  right: auto;
  bottom: calc(var(--gutter) + var(--safe-b));
  width: var(--float-size);
  height: var(--float-size);
}
/* :not(.hidden) حتى لا تتعارض القاعدة مع إظهار/إخفاء الزر من JS */
body #scrollTopBtn:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}
body .float-btn > div {
  width: var(--float-size);
  height: var(--float-size);
  font-size: clamp(18px, 5vw, 26px);
}
/* التلميحات النصية بلا معنى على اللمس، وقد تخرج عن الشاشة */
@media (hover: none) {
  body .float-btn > span { display: none; }
}

/* أثناء التمرير للأسفل على الشاشات الصغيرة تنسحب الأزرار جزئياً خارج الحافة
   فلا تغطي بطاقات المنتجات، وتعود عند التوقف أو التمرير للأعلى (JS يضيف الصنف) */
@media (max-width: 640px) {
  body .float-btn {
    transition: transform .25s ease, opacity .25s ease;
  }
  body .float-btn.float-tucked {
    transform: translateX(calc(var(--float-size) * 0.62));
    opacity: .35;
  }
}

/* ── 11) التذييل ─────────────────────────────────────────────────────────── */
/* مساحة إضافية أسفل الصفحة حتى لا تحجب الأزرار العائمة آخر المحتوى */
body.store-page footer { padding-bottom: calc(24px + var(--float-size) + var(--safe-b)); }
body.store-page footer ul a {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* رابط "افتح في خرائط جوجل" كان بارتفاع 16px فقط */
body.store-page .map-section a.inline-block {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  font-size: clamp(12px, 3vw, 13px);
}
body.store-page footer h2 { font-size: clamp(18px, 5vw, 24px); }
body.store-page footer .w-10.h-10 { width: var(--tap); height: var(--tap); }
body.store-page footer #newsletterEmail { font-size: 16px; }

/* ── 12) الحقول والنماذج ────────────────────────────────────────────────── */
/* 16px هو الحد الذي يمنع iOS من تكبير الصفحة عند التركيز على الحقل.
   iPad يفعل ذلك أيضاً (عرضه 768–1024)، لذا القاعدة تغطي كل شاشة ≤1024
   وكل جهاز لمسي بلا مؤشر، لا الجوال وحده. */
@media (max-width: 1024px), (hover: none) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }
  .mysr-form input,
  .moyasar-form input,
  #moyasar-form-container input {
    font-size: 16px !important;
  }
}
input, select, textarea { max-width: 100%; }
select { min-height: var(--tap); }

/* ══════════════════════════════════════════════════════════════════════════
   13) صفحة إتمام الطلب (body.checkout-page)
   ══════════════════════════════════════════════════════════════════════════ */
/* المحتوى يترك أسفله مساحة تساوي ارتفاع الشريط الثابت + منطقة الأمان */
body.checkout-page .wrap {
  padding: 18px var(--gutter) calc(var(--paybar-h, 80px) + var(--safe-b) + 24px);
}
/* هيدر صفحة الدفع فقط: 64–72px + احترام منطقة الأمان العلوية في iPhone */
body.checkout-page .hdr {
  min-height: 66px;
  padding: 8px var(--gutter);
  padding-top: calc(8px + var(--safe-t));
  padding-inline-start: calc(var(--gutter) + var(--safe-l));
  padding-inline-end: calc(var(--gutter) + var(--safe-r));
}
body.checkout-page .hdr .back-btn { width: var(--tap); height: var(--tap); }
body.checkout-page .logo-txt { font-size: clamp(14px, 4.2vw, 16px); }
body.checkout-page .hdr .logo { min-height: var(--tap); }
body.checkout-page .hdr-spacer { width: var(--tap); }
body.checkout-page .prog { padding: 11px var(--gutter); }
/* أسماء الخطوات وشارات الدفع كانت 10px: أصغر من الحد المقروء */
body.checkout-page .sl { font-size: 11px; }
body.checkout-page .pib { font-size: 11px; min-height: 24px; }

/* حشوة البطاقات: تنقص قليلاً على الشاشات الضيقة جداً دون فقدان الاتساق */
@media (max-width: 400px) { body.checkout-page { --pad: 16px; } }

/* الحقول المتجاورة: عمود واحد على الجوال ثم صفوف على الشاشات الأوسع */
body.checkout-page .grid-2,
body.checkout-page .grid-3 { grid-template-columns: 1fr; }
@media (min-width: 480px) { body.checkout-page .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 560px) { body.checkout-page .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { body.checkout-page .grid-3 { grid-template-columns: repeat(3, 1fr); } }

body.checkout-page .field-label { font-size: 12px; }
body.checkout-page input,
body.checkout-page select,
body.checkout-page textarea { min-height: 48px; }
body.checkout-page .gps-btn { min-height: 48px; }

/* بطاقة المنتج داخل الملخص: الاسم الطويل لا يدفع السعر خارج البطاقة */
body.checkout-page .oi { gap: 12px; min-width: 0; }
body.checkout-page .oi .popt-body { min-width: 0; }
body.checkout-page .inm { overflow-wrap: anywhere; }
body.checkout-page .ipr { font-size: clamp(13px, 3.6vw, 15px); }
body.checkout-page .iimg { width: clamp(48px, 14vw, 56px); height: clamp(48px, 14vw, 56px); }

/* بطاقات الاختيار (الشحن والدفع): مساحة ضغط مريحة ولا تتزاحم الشعارات */
body.checkout-page .popt { padding: 16px 18px; min-height: 64px; }
body.checkout-page .pics { flex-wrap: wrap; justify-content: flex-end; }
body.checkout-page .cpwrap { padding: 0 var(--pad) var(--pad); }
body.checkout-page .cpinput { min-height: var(--tap); min-width: 0; }
body.checkout-page .cpbtn { min-height: var(--tap); }
body.checkout-page .coupon-msg { margin-inline: var(--pad); overflow-wrap: anywhere; }
body.checkout-page .coupon-sum { min-height: 56px; }
body.checkout-page .tots { margin-inline: var(--pad); }
body.checkout-page .tr.fin .tv { font-size: clamp(22px, 6vw, 28px); }

/* شريط ملخص المبلغ السفلي: 72–88px، يحترم منطقة الأمان ولا يغطي المحتوى.
   ليس زر دفع — ينقل إلى زر ميسر / Apple Pay الرسمي ويختفي عند ظهوره. */
body.checkout-page .paybtnwrap {
  padding: 12px var(--gutter) calc(12px + var(--safe-b));
  padding-inline-start: calc(var(--gutter) + var(--safe-l));
  padding-inline-end: calc(var(--gutter) + var(--safe-r));
}
body.checkout-page .paybtn {
  min-height: 56px;
  max-width: 460px;
  font-size: clamp(14px, 4vw, 15px);
}
body.checkout-page .pb-action { min-height: 36px; }
body.checkout-page .bamt { white-space: nowrap; }
body.checkout-page #moyasar-form-container { max-width: 100%; overflow-x: hidden; }

/* شاشات ضيقة جداً (320px): المبلغ وزر الانتقال لا يتقاطعان */
@media (max-width: 340px) {
  body.checkout-page .paybtn { gap: 8px; padding: 10px; }
  body.checkout-page .pb-total { font-size: 12px; }
  body.checkout-page .pb-action { font-size: 12px; padding: 8px 10px; gap: 5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   14) صفحتا النجاح والتتبع
   ══════════════════════════════════════════════════════════════════════════ */
body.success-page .wrap {
  padding: 20px var(--gutter) calc(24px + var(--safe-b));
}
body.success-page .big { font-size: clamp(20px, 6vw, 26px); }
body.success-page .btns { flex-wrap: wrap; }
body.success-page .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 140px);
}
body.success-page .row { gap: 10px; flex-wrap: wrap; }
body.success-page .v, body.success-page .mono { overflow-wrap: anywhere; }

body.track-page .mono,
body.track-page #orderId,
body.track-page #orderTrack { overflow-wrap: anywhere; }
body.track-page a[class*="px-5"],
body.track-page a[class*="py-3"],
body.track-page .max-w-3xl > .flex > a {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}
@media (max-width: 420px) {
  body.track-page .max-w-3xl > .flex.items-center.justify-between { flex-wrap: wrap; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   15) صفحات السياسات
   ══════════════════════════════════════════════════════════════════════════ */
body.policy-page { padding: clamp(12px, 3vw, 48px); }
body.policy-page .p-8 { padding: clamp(16px, 4vw, 32px); }
body.policy-page .p-8.border-b { flex-wrap: wrap; gap: 10px; }
body.policy-page h1 { font-size: clamp(19px, 5.4vw, 24px); }
body.policy-page h2 { font-size: clamp(15px, 4.4vw, 18px); }
body.policy-page a[class*="rounded-full"] {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   16) لوحة الإدارة (body.admin-page / body.admin-login-page)
   ══════════════════════════════════════════════════════════════════════════ */

/* صفحة الدخول: كانت overflow:hidden فيُقص المحتوى في الوضع العرضي */
body.admin-login-page {
  overflow-x: clip;
  overflow-y: auto;
  padding: clamp(16px, 5vw, 40px) var(--gutter);
  align-items: center;
}
body.admin-login-page::before { inset: 0; }   /* كان inset:-30% فيوسّع الصفحة */
body.admin-login-page .login-box { padding: clamp(22px, 6vw, 40px); }
body.admin-login-page input, body.admin-login-page button { min-height: var(--tap); }

/* التخطيط العام */
body.admin-page .content { padding: clamp(12px, 3vw, 22px); }
body.admin-page .topbar { padding: 12px clamp(12px, 3vw, 22px); gap: 10px; }
body.admin-page .topbar-title { font-size: clamp(15px, 4.4vw, 18px); }
body.admin-page .topbar-right { flex-wrap: wrap; justify-content: flex-end; }
body.admin-page .refresh-btn { min-height: 38px; }

/* زر القائمة يظهر على الجوال والتابلت فقط */
body.admin-page .admin-menu-btn {
  display: none;
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #FFD700;
  font-size: 18px;
  cursor: pointer;
}
body.admin-page .sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(2px);
  z-index: 140;
}

@media (max-width: 1024px) {
  body.admin-page .admin-menu-btn { display: inline-flex; }
  body.admin-page .sidebar {
    width: min(280px, 84vw);
    transform: translateX(100%);      /* مخفية إلى يمين الشاشة (RTL) */
    z-index: 150;
    padding-bottom: var(--safe-b);
  }
  body.admin-page .sidebar.open { transform: translateX(0); }
  body.admin-page .sidebar-backdrop.open { display: block; }
  body.admin-page .main { margin-right: 0; }
  body.admin-page .nav-item { min-height: var(--tap); }
}

/* الجداول: تمرير أفقي داخل الحاوية بدل خروجها عن الشاشة */
body.admin-page .tbl-wrap table { min-width: 780px; }
body.admin-page #couponsTable { min-width: 680px; }
body.admin-page th, body.admin-page td { white-space: nowrap; }
body.admin-page td .status { white-space: nowrap; }
body.admin-page .acts { flex-wrap: wrap; gap: 6px; }
/* أزرار الصفوف كانت 25–27px فقط: صعبة اللمس ومتلاصقة على الجوال واللوحي.
   التوسيع محصور بالشاشات ≤1024 والأجهزة اللمسية حتى لا تتغير كثافة الجدول على سطح المكتب */
@media (max-width: 1024px), (hover: none) {
  body.admin-page .act-btn,
  body.admin-page .pagination button,
  body.admin-page #prevPageBtn,
  body.admin-page #nextPageBtn {
    min-height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.admin-page .filter-btn { min-height: 40px; }
}

/* الإحصائيات والبطاقات */
body.admin-page .stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
body.admin-page .ops-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
body.admin-page .hero-title { font-size: clamp(18px, 5vw, 24px); }
body.admin-page .stat-val { font-size: clamp(20px, 5.5vw, 26px); }
body.admin-page .panel-hdr { padding: 12px clamp(12px, 3vw, 18px); }
body.admin-page .filters { gap: 6px; }
body.admin-page .search-inp { min-width: 0; flex: 1 1 140px; max-width: 100%; }
body.admin-page #productsGrid,
body.admin-page #worksAdminGrid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  padding: clamp(12px, 3vw, 16px);
}
body.admin-page .prod-acts .act-btn { flex: 1 1 auto; }

/* الجداول على الجوال: كل صف يتحول إلى بطاقة مستقلة بعنوان لكل خلية، فلا
   يُقتطع عمود ولا يحتاج الموظف تمريراً أفقياً. مقصور على جداول اللوحة التي
   تحمل خلاياها data-label وتُوسم بـ .admin-table. */
@media (max-width: 760px) {
  body.admin-page .admin-table { min-width: 0 !important; }
  body.admin-page .admin-table thead { display: none; }
  body.admin-page .admin-table tbody { display: block; }
  body.admin-page .admin-table tbody tr {
    display: block;
    margin: 10px clamp(10px, 3vw, 14px);
    background: var(--card2, #16161a);
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 14px;
    padding: 4px 2px;
  }
  body.admin-page .admin-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    white-space: normal;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    text-align: right;
  }
  body.admin-page .admin-table tbody td:last-child {
    border-bottom: none;
    flex-wrap: wrap;
  }
  /* عنوان العمود يظهر داخل البطاقة بدل رأس الجدول */
  body.admin-page .admin-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    color: var(--gray, #6b7280);
  }
  /* صف حالة فارغ أو صف تحميل: بلا عنوان وبعرض كامل */
  body.admin-page .admin-table tbody td[colspan] { display: block; }
  body.admin-page .admin-table tbody td[colspan]::before { content: none; }
  body.admin-page .admin-table .acts { justify-content: flex-end; }
  body.admin-page .filters { flex-wrap: wrap; }
  body.admin-page .filters .search-inp { flex: 1 1 100%; min-width: 0 !important; }
}

/* النوافذ والنماذج داخل اللوحة */
body.admin-page .modal-overlay { padding: 12px; align-items: flex-start; }
body.admin-page .modal {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin-block: auto;
}
body.admin-page .modal-body { padding: clamp(14px, 4vw, 20px); }
body.admin-page .modal-body input,
body.admin-page .modal-body select,
body.admin-page .modal-body textarea { max-width: 100%; }
body.admin-page .variant-row { min-width: 0; }
body.admin-page .modal-close { width: var(--tap); height: var(--tap); }

/* ══════════════════════════════════════════════════════════════════════════
   17) الوضع العرضي (شاشات قصيرة)
   ══════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 480px) {
  body.store-page #home {
    height: auto;
    min-height: 300px;
    max-height: none;
  }
  body.store-page #home h2 { font-size: clamp(22px, 5vw, 40px); }
  body.store-page #mobileMenu { max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); }
  body.store-page #productModal .modal-content { height: 96vh; height: 96dvh; max-height: 96vh; max-height: 96dvh; }
  body.store-page #productModal .product-img-section { height: 40vh; height: 40dvh; }
  body.admin-login-page { align-items: flex-start; }
}