/* =======================================================
   SHOP TOOLBAR — Filter Button & Woo Sort (.orderby)
   ======================================================= */

:root {
  /* Colors */
  --dfm-bg: #fff;
  --dfm-text: #111827;
  --dfm-text-soft: #0f172a;
  --dfm-border: #e5e7eb;

  /* Controls */
  --dfm-btn-height: 50px;
  --dfm-btn-radius: 14px;
  --dfm-btn-font: 15px;

  /* Spacing */
  --dfm-space-2: 10px;
  --dfm-space-3: 16px;

  /* Shadows */
  --dfm-shadow-md: 0 6px 16px rgba(17,24,39,.25);
}

/* Toolbar container (desktop & mobile) */
.df-toolbar,
.df-toolbar--mobile {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: var(--dfm-bg) !important;
  border: 1px solid var(--dfm-border) !important;
  border-radius: 14px !important;
  margin-bottom: 28px !important; /* spacing ke grid produk */
}

/* FILTER button (strong specificity) */
.df-toolbar .df-pill--filter,
.df-toolbar--mobile .df-pill--filter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--dfm-btn-height) !important;
  line-height: var(--dfm-btn-height) !important;
  border-radius: var(--dfm-btn-radius) !important;
  padding: 0 22px !important;
  min-width: 140px !important;
  font-weight: 700 !important;
  font-size: var(--dfm-btn-font) !important;
  background: var(--dfm-text-soft) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dfm-shadow-md) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.df-toolbar .df-pill--filter:hover,
.df-toolbar--mobile .df-pill--filter:hover {
  background: var(--dfm-text) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.25) !important;
}
.df-toolbar .df-pill--filter svg,
.df-toolbar--mobile .df-pill--filter svg {
  margin-right: 8px !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}

/* SORT select (Woo .orderby) — reset + caret */
.df-sort select.orderby,
.df-toolbar--mobile .df-sort select.orderby,
.woocommerce-ordering select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  border: 1px solid var(--dfm-border) !important;
  border-radius: var(--dfm-btn-radius) !important;
  padding: 0 44px 0 16px !important;

  display: inline-block !important;
  height: var(--dfm-btn-height) !important;
  line-height: var(--dfm-btn-height) !important;
  min-width: 230px !important;
  max-width: 320px !important;

  font-size: var(--dfm-btn-font) !important;
  font-weight: 600 !important;
  color: var(--dfm-text-soft) !important;

  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08) !important;
  box-sizing: border-box !important;
}

/* Remove pseudo arrows from themes / old Edge */
.df-sort,
.woocommerce-ordering { position: relative !important; overflow: visible !important; }
.df-sort::before,
.df-sort::after,
.woocommerce-ordering::before,
.woocommerce-ordering::after { content: none !important; display: none !important; }
.df-sort select.orderby::-ms-expand,
.woocommerce-ordering select::-ms-expand { display: none !important; }

/* Mobile: 2 kolom stabil */
@media (max-width: 768px) {
  .df-toolbar--mobile {
    display: grid !important;
    grid-template-columns: 0.9fr 1.5fr !important; /* ~37% : 63% */
    gap: 10px !important;
    align-items: center !important;
    padding: var(--dfm-space-2) !important;
  }
}

/* Desktop refinements */
@media (min-width: 1024px) {
  .df-toolbar--mobile {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: var(--dfm-space-2) !important;
    padding: var(--dfm-space-2) var(--dfm-space-3) !important;
    margin: 12px 0 36px !important;
  }
  .df-toolbar--mobile .df-sort select.orderby {
    min-width: 230px !important;
    max-width: 300px !important;
  }
}

/* Safari baseline tweak */
@supports (-webkit-appearance:none) {
  .df-sort select.orderby,
  .df-toolbar--mobile .df-sort select.orderby {
    transform: translateY(-1px);
  }
}
/* Safety: pastikan select bisa menerima klik */
.df-toolbar, .df-toolbar--mobile,
.df-sort, .woocommerce-ordering,
.df-sort select.orderby, .woocommerce-ordering select {
  position: relative;
  pointer-events: auto;
  z-index: 1;
}

/* Jangan ada overlay non-visible yang nutup area toolbar */
.df-filter-overlay:not(.visible) {
  pointer-events: none !important;
  opacity: 0 !important;
}
/* Pastikan area toolbar dapat diklik & tidak ketutup layer lain */
.df-toolbar, .df-toolbar--mobile, .df-sort, .woocommerce-ordering {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.df-sort select.orderby, .woocommerce-ordering select {
  pointer-events: auto;
}

/* Overlay tidak menghalangi saat hidden */
.df-filter-overlay:not(.visible) {
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Optional: kunci scroll saat drawer terbuka */
html.dfm-lock, html.dfm-lock body { overflow: hidden; }