/* ========================= */
/* تبويبات الأقسام والتنقل */
/* ========================= */

.categories {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  padding: 10px 15px;
  gap: 10px;
  white-space: nowrap;
  scrollbar-width: none;

  /* Default: same as page background (no visible card) */
  background: transparent;
  border-radius: 22px;
  box-sizing: border-box;

  /* Sticky categories bar: stays under slider, then pins on scroll */
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 9999;
}

/* JS fallback: force-pin the categories bar when sticky is not effective */
.categories.dm-categories-fixed {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 9999;

  /* Full-width bar while pinned */
  left: 0;
  right: 0;
  width: 100%;
  border-radius: 0;

  /* Pinned: show subtle shadow while scrolling */
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.dm-categories-spacer {
  height: 0;
}

.categories::-webkit-scrollbar {
  display: none;
}

.categories button {
  background: var(--dm-tab-bg) !important;
  color: var(--dm-tab-text) !important;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.categories button.active,
.categories button[aria-selected="true"] {
  background: var(--dm-tab-active-bg) !important;
  color: var(--dm-tab-active-text) !important;
}

.category-items {
  display: none;
  padding: 14px 15px 0;
}

.category-items.active {
  display: block;
}

/* مسافة إضافية للصنف الأول تحت التابات */
.category-items.active .item-box:first-child {
  margin-top: 6px;
}

/* تبويبات لوحة التعديل */
.edit-tabs {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 15px;
  white-space: nowrap;
  scrollbar-width: none;
}

.edit-tabs::-webkit-scrollbar {
  display: none;
}

.edit-tabs .tab-btn {
  background: var(--dm-tab-bg);
  color: var(--dm-tab-text);
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
}

.edit-tabs .tab-btn.active {
  background: var(--dm-tab-active-bg);
  color: var(--dm-tab-active-text);
}

.edit-tabs .tab-btn.fixed-orange,
.edit-tabs .tab-btn.fixed-orange.active {
  background: var(--dm-tab-active-bg) !important;
  color: var(--dm-tab-active-text) !important;
  cursor: default;
}

.edit-tabs .tab-btn.fixed-orange::before,
.edit-tabs .tab-btn.fixed-orange::after {
    content: none !important;
    display: none !important;
}

/* Admin: main tab groups row (Settings/Content/Operations/Insights) */
.edit-tabs.dm-tab-groups {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--dm-tab-bg);
}

.edit-tabs.dm-tab-groups .tab-group-btn {
  background: transparent;
  color: var(--dm-tab-text);
  border: 2px solid var(--dm-tab-active-bg);
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
}

.edit-tabs.dm-tab-groups .tab-group-btn.active {
  background: var(--dm-tab-active-bg);
  color: var(--dm-tab-active-text);
}

.edit-tabs.dm-subtabs {
  margin-top: 0;
  display: none;
}

.edit-tabs.dm-subtabs.active {
  display: flex;
}

.edit-tab-content {
  display: none;
  text-align: right;
}

.edit-tab-content.active {
  display: block;
}