/*
 * villaGo — Shop Page Styles
 */

/* ── Toolbar ─────────────────────────────────────── */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--y-space-m);
  margin-block-end: 32px;
}

.shop-filter-btn {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
  background: var(--y-color-secondary);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: var(--y-font-m);
  transition: background var(--y-transition-fast);
  min-height: 44px;
}

.shop-filter-btn:hover {
  background: var(--y-color-secondary-subtle);
}

.shop-sort {
  background: var(--y-color-secondary);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: var(--y-font-m);
  min-height: 44px;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

/* ── Layout ──────────────────────────────────────── */
.shop-layout {
  display: flex;
  gap: 32px;
}

.shop-sidebar {
  width: 256px;
  flex-shrink: 0;
}

.shop-sidebar.hidden {
  display: none;
}

.shop-sidebar-card {
  position: sticky;
  top: 96px;
}

.shop-sidebar-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--y-space-s);
  margin-block-end: 20px;
}

.shop-sidebar-title {
  font-size: 1rem;
  font-weight: var(--y-weight-bold);
  margin: 0;
}

/* إعادة التعيين بجانب العنوان: يظهر على الجوال/اللوحي فقط (الشريط المنبثق) */
.shop-reset-link--toolbar {
  font-size: 0.8rem;
  color: var(--y-color-primary, #1b6b4a);
  flex-shrink: 0;
  display: none;
}

/* إعادة التعيين تحت زر التطبيق: سطح المكتب فقط */
.shop-reset-link--below-btn {
  display: none;
  text-align: center;
  font-size: 0.85rem;
  color: var(--y-color-text-muted, #8a8378);
}

@media (max-width: 992px) {
  .shop-reset-link--toolbar {
    display: block;
  }
}

.shop-sidebar-group {
  margin-block-end: 20px;
}

.shop-sidebar-group label {
  display: block;
  font-size: var(--y-font-s);
  font-weight: var(--y-weight-semibold);
  margin-block-end: var(--y-space-s);
}

.shop-sidebar-group select,
.shop-sidebar-group input {
  width: 100%;
  background: var(--y-color-secondary);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: var(--y-font-s);
  border: none;
  outline: none;
  font-family: inherit;
  min-height: 44px;
}

.shop-price-range {
  display: flex;
  gap: var(--y-space-s);
  align-items: center;
}

.shop-price-range input {
  flex: 1;
}

.shop-main {
  flex: 1;
  min-width: 0;
}

/* زر «تطبيق الفلاتر»: لا يُستخدم hero-search-btn هنا — أنماطه في home/style.css التي لا تُحمّل على المتجر */
.shop-sidebar-card .shop-filter-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 24px;
  width: 100%;
}

/* الجوال/اللوحي: مثل React — زر أساسي بعرض كامل و py-2.5 rounded-lg */
.shop-sidebar-card .shop-apply-filters-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  padding: 10px 16px;
  font-size: 0.9rem;
  min-height: 44px;
  line-height: 1.4;
  border-radius: var(--y-radius-m, 10px);
}

.shop-sidebar-card .shop-reset-link--below-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  margin-inline: var(--y-space-s);
}

@media (min-width: 993px) {
  .shop-reset-link--below-btn {
    display: block;
  }

  .shop-sidebar .shop-reset-link--toolbar {
    display: none !important;
  }

  /* الشريط الجانبي الضيق على سطح المكتب: زر تطبيق أصغر */
  .shop-sidebar-card .shop-apply-filters-btn {
    padding: 3px 6px;
    font-size: var(--y-font-s);
    min-height: 36px;
    line-height: 1.25;
  }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════ */

/* ── Large Desktop (lg) ──────────────────────────── */
@media (max-width: 1200px) {
  .shop-sidebar { width: 220px; }
}

/* ── Tablet (md) ─────────────────────────────────── */
@media (max-width: 992px) {
  .shop-sidebar {
    display: none;
  }
  .shop-sidebar.visible {
    display: block;
    width: 100%;
  }
  .shop-layout {
    flex-direction: column;
  }
}

/* ── Mobile Landscape / Large Phone (sm) ─────────── */
@media (max-width: 768px) {
  .shop-toolbar { gap: var(--y-space-s); }
}

/* ── Small Phone (xs) ────────────────────────────── */
@media (max-width: 480px) {
  .shop-filter-btn,
  .shop-sort {
    font-size: 0.85rem;
    padding: 10px 14px;
    min-height: 44px;
  }
}