/* ========================= */
/* التصميم المتجاوب والموبايل */
/* ========================= */

/*
 * إتاحة مساحة تحت المحتوى حتى لا يغطيه الـ bottom bar.
 * للزائر: مساحة صغيرة فقط.
 * للـ owner: مساحة أكبر عشان زرار الحفظ/الخروج.
 */
body::after {
  content: "";
  display: block;
  height: calc(env(safe-area-inset-bottom, 0px) + 72px);
}

body.dm-owner::after {
  content: "";
  display: block;
  height: calc(env(safe-area-inset-bottom, 0px) + 96px);
}

/* تحسين عرض الجدول على الموبايل */
@media (max-width: 560px) {
  .dm-cart-dialog {
    width: 100%;
  }
  
  .dm-cart-table thead {
    display: none;
  }
  
  .dm-cart-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 8px 0;
  }
  
  .dm-cart-table td:last-child {
    grid-column: span 2;
    text-align: right;
  }
  
  .dm-order-form {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .slider .slide img {
    height: 260px;
  }
  
  .dm-toplist {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .dm-toplist {
    grid-template-columns: 1fr;
  }
  
  #dm-traffic .dm-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .slider .slide img {
    height: 300px;
  }
}

@media (max-width: 600px) {
  .items-wrapper .item-block {
    padding: 12px !important;
  }
  
  .items-wrapper .item-block input[type="text"] {
    height: 42px !important;
  }
  
  .items-wrapper .item-block .image-preview img {
    width: 150px;
    height: 150px;
  }
  
}

@media (max-width: 700px) {
  #dm-traffic .dm-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* قفل أي تمرير أفقي عنيد */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* يساعد التمركز ويمنع "اللزم" على الأطراف */
.categories, .edit-tabs {
  scroll-padding-inline: 15px;
}

.categories button, .edit-tabs .tab-btn {
  scroll-snap-align: center;
  scroll-margin-inline: 15px;
}