/* =====================================================
   Woo Smart Filters — Frontend Styles
   ===================================================== */

:root {
  --wsf-accent:       #0073e6;
  --wsf-accent-light: #e8f1fc;
  --wsf-border:       #e5e7eb;
  --wsf-text:         #374151;
  --wsf-text-muted:   #9ca3af;
  --wsf-label-color:  #0066cc;
  --wsf-bg:           #ffffff;
  --wsf-radius:       4px;
  --wsf-transition:   0.18s ease;
}

/* ── Contenedor principal ──────────────────────────── */
.wsf-filter-wrap {
  position: relative;
  font-family: inherit;
  color: var(--wsf-text);
  background: var(--wsf-bg);
}

/* ── Barra superior ────────────────────────────────── */
.wsf-filter-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 10px;
  margin-bottom: 4px;
  min-height: 28px;
}

.wsf-active-count {
  font-size: 13px;
  color: var(--wsf-text-muted);
}

.wsf-active-count .wsf-count-num {
  font-weight: 700;
  color: var(--wsf-accent);
}

.wsf-clear-all {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--wsf-accent);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--wsf-transition);
}
.wsf-clear-all:hover { opacity: 0.7; }

/* ── Chips de filtros activos ──────────────────────── */
.wsf-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.wsf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--wsf-accent-light);
  color: var(--wsf-accent);
  border: 1px solid var(--wsf-accent);
  border-radius: 20px;
  padding: 3px 10px 3px 12px;
  font-size: 12px;
  font-weight: 500;
  animation: chipIn .15s ease;
}

@keyframes chipIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

.wsf-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wsf-accent);
  padding: 0;
  line-height: 1;
  font-size: 14px;
  margin-left: 2px;
  opacity: .7;
  transition: opacity var(--wsf-transition);
}
.wsf-chip-remove:hover { opacity: 1; }

/* ── Secciones ─────────────────────────────────────── */
.wsf-section {
  border-bottom: 1px solid var(--wsf-border);
  overflow: hidden;
}

.wsf-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  user-select: none;
}

.wsf-section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--wsf-label-color);
  letter-spacing: .01em;
}

.wsf-section-toggle {
  font-size: 18px;
  color: var(--wsf-label-color);
  line-height: 1;
  transition: transform var(--wsf-transition);
  display: inline-block;
}

.wsf-section.wsf-collapsed .wsf-section-toggle {
  transform: rotate(180deg);
}

.wsf-section-body {
  padding-bottom: 14px;
  overflow: hidden;
  max-height: 2000px;
  transition: max-height .3s ease, padding .3s ease, opacity .2s ease;
  opacity: 1;
}

.wsf-section.wsf-collapsed .wsf-section-body {
  max-height: 0 !important;
  padding-bottom: 0;
  opacity: 0;
}

/* ── Lista de checkboxes ───────────────────────────── */
.wsf-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wsf-check-item {
  margin: 0;
  padding: 0;
}

.wsf-check-item.wsf-hidden-item {
  display: none;
}

.wsf-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  transition: opacity var(--wsf-transition);
}

.wsf-check-label:hover { opacity: .8; }

/* Oculta el input nativo */
.wsf-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* Checkbox personalizado */
.wsf-check-box {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db;
  border-radius: 3px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--wsf-transition), background var(--wsf-transition);
  position: relative;
}

.wsf-check-box::after {
  content: '';
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
  transition: opacity var(--wsf-transition);
}

.wsf-checkbox:checked ~ .wsf-check-box {
  background: var(--wsf-accent);
  border-color: var(--wsf-accent);
}

.wsf-checkbox:checked ~ .wsf-check-box::after {
  opacity: 1;
}

.wsf-check-text {
  font-size: 14px;
  color: var(--wsf-text);
  flex: 1;
  line-height: 1.3;
}

.wsf-check-count {
  font-size: 13px;
  color: var(--wsf-text-muted);
  margin-left: auto;
}

/* Ítem seleccionado */
.wsf-check-item.wsf-is-checked .wsf-check-text {
  color: var(--wsf-accent);
  font-weight: 500;
}

/* ── Botón "Mostrar más" ───────────────────────────── */
.wsf-show-more {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--wsf-accent);
  padding: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  transition: opacity var(--wsf-transition);
}
.wsf-show-more:hover { opacity: .7; }

.wsf-show-more::before {
  content: '+';
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.wsf-show-more.wsf-show-less::before {
  content: '−';
}

/* ── Rango de precio ───────────────────────────────── */
.wsf-price-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wsf-text);
}

.wsf-price-sep {
  color: var(--wsf-text-muted);
}

.wsf-range-slider {
  position: relative;
  height: 20px;
  margin: 8px 0 4px;
}

.wsf-range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--wsf-border);
  border-radius: 2px;
  transform: translateY(-50%);
}

.wsf-range-fill {
  position: absolute;
  height: 100%;
  background: var(--wsf-accent);
  border-radius: 2px;
  transition: left .05s, right .05s;
}

.wsf-range-input {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 4px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  pointer-events: none;
  left: 0;
}

.wsf-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--wsf-accent);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .1s ease;
}

.wsf-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.wsf-range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--wsf-accent);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ── Swatches de color ─────────────────────────────── */
.wsf-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.wsf-swatch-label {
  cursor: pointer;
  position: relative;
}

.wsf-swatch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.wsf-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.1);
  transition: transform .15s ease, box-shadow .15s ease;
}

.wsf-swatch-input:checked ~ .wsf-swatch {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px var(--wsf-accent);
}

.wsf-swatch-label:hover .wsf-swatch {
  transform: scale(1.1);
}

/* ── Estrellas ─────────────────────────────────────── */
.wsf-stars {
  display: flex;
  gap: 1px;
  font-size: 14px;
}

.wsf-star {
  color: #d1d5db;
}

.wsf-star--filled {
  color: #f59e0b;
}

/* ── Loader overlay ────────────────────────────────── */
.wsf-loader-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
  z-index: 10;
  border-radius: var(--wsf-radius);
}

.wsf-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--wsf-accent-light);
  border-top-color: var(--wsf-accent);
  border-radius: 50%;
  animation: wsf-spin .7s linear infinite;
}

@keyframes wsf-spin {
  to { transform: rotate(360deg); }
}

/* ── Sin resultados ────────────────────────────────── */
.wsf-no-products {
  text-align: center;
  padding: 48px 20px;
  color: var(--wsf-text-muted);
}

.wsf-no-products-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
}

.wsf-no-products p {
  margin: 0 0 16px;
  font-size: 15px;
}

.wsf-no-products .wsf-clear-all-btn {
  background: var(--wsf-accent);
  color: #fff;
  border: none;
  border-radius: var(--wsf-radius);
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: opacity var(--wsf-transition);
}
.wsf-no-products .wsf-clear-all-btn:hover { opacity: .85; }

/* ── Título del widget ─────────────────────────────── */
.wsf-filter-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--wsf-text);
}

/* ── Paginación ────────────────────────────────────── */
.wsf-pagination {
  text-align: center;
  margin-top: 24px;
}

.wsf-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  margin: 0 2px;
  border: 1px solid var(--wsf-border);
  border-radius: var(--wsf-radius);
  font-size: 14px;
  color: var(--wsf-text);
  text-decoration: none;
  transition: all var(--wsf-transition);
}

.wsf-pagination .page-numbers.current,
.wsf-pagination .page-numbers:hover {
  background: var(--wsf-accent);
  border-color: var(--wsf-accent);
  color: #fff;
}

/* ── Responsive ────────────────────────────────────── */
@media ( max-width: 768px ) {
  .wsf-filter-wrap {
    border: 1px solid var(--wsf-border);
    border-radius: 8px;
    padding: 12px 16px;
  }
}

/* ── Compatibilidad Elementor Loop Grid ────────────────────── */

/* El .elementor-loop-container usa CSS grid/flex de Elementor.
   Los ítems que devuelve el AJAX deben comportarse igual que los originales. */
.elementor-loop-container > li,
.elementor-loop-container > .product {
    /* Sin margen extra que rompa el grid de Elementor */
    margin: 0 !important;
}

/* Cuando no hay productos, centrar el mensaje dentro del loop container */
.elementor-loop-container > .wsf-no-products {
    grid-column: 1 / -1;
    width: 100%;
}

/* Fade-in suave al reemplazar contenido */
.elementor-loop-container {
    transition: opacity 0.2s ease;
}

/* ── Fallback: items del Loop Grid cuando Elementor renderiza via WSF ── */
/* Estos estilos se aplican SOLO si el tema no tiene los suyos propios   */

.e-loop-item {
    /* No forzar estilos — dejar que Elementor y el tema manden */
}

/* El body de la tarjeta en el fallback */
.wsf-loop-item-body {
    padding: 12px;
}

.wsf-loop-item-body .woocommerce-loop-product__title {
    font-size: 1em;
    margin: 0 0 8px;
}

.wsf-loop-item-body .woocommerce-loop-product__title a {
    color: inherit;
    text-decoration: none;
}

.wsf-loop-item-body .price {
    display: block;
    margin-bottom: 10px;
}

/* Fade-in del contenedor completo tras filtrar */
.elementor-loop-container {
    transition: opacity 0.25s ease;
}

/* ── Imagen del producto en fallback de Loop Grid ──────────────── */
.wsf-product-image-wrap {
    position: relative;
    overflow: hidden;
}

.wsf-product-image-wrap img,
.wsf-product-image-wrap .wp-post-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.wsf-product-image-wrap .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--wsf-accent, #0073e6);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    pointer-events: none;
}

.wsf-product-image-wrap a {
    display: block;
    line-height: 0;
}

.wsf-product-info-wrap {
    padding: 12px 16px 16px;
}

.wsf-product-info-wrap .woocommerce-loop-product__title {
    font-size: 1em;
    margin: 0 0 6px;
    line-height: 1.3;
}

.wsf-product-info-wrap .woocommerce-loop-product__title a {
    color: inherit;
    text-decoration: none;
}

.wsf-product-info-wrap .woocommerce-loop-product__title a:hover {
    color: var(--wsf-accent, #0073e6);
}

.wsf-product-info-wrap .price {
    display: block;
    margin-bottom: 10px;
    font-size: 0.95em;
}

/* ── Fallback cards cuando Elementor no renderiza el template ──── */
/* Replica visualmente el diseño de las cards del Loop Grid        */

.e-loop-item .wsf-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s ease;
}

.e-loop-item .wsf-card-inner:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
}

.e-loop-item .wsf-card-image {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
    aspect-ratio: 1 / 1;
}

.e-loop-item .wsf-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 12px;
    box-sizing: border-box;
    transition: transform .3s ease;
}

.e-loop-item .wsf-card-inner:hover .wsf-card-image img {
    transform: scale(1.04);
}

.e-loop-item .wsf-card-image a {
    display: block;
    height: 100%;
}

.e-loop-item .wsf-card-image .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: #cc0000;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.e-loop-item .wsf-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.e-loop-item .wsf-card-body .woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.35;
}

.e-loop-item .wsf-card-body .woocommerce-loop-product__title a {
    color: #1d3557;
    text-decoration: none;
}

.e-loop-item .wsf-card-body .woocommerce-loop-product__title a:hover {
    color: #0073e6;
}

.e-loop-item .wsf-card-body .price {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}

.e-loop-item .wsf-card-body .price del {
    opacity: .6;
    margin-right: 4px;
}

.e-loop-item .wsf-card-body .price ins {
    text-decoration: none;
    font-weight: 700;
    color: #c0392b;
}

.e-loop-item .wsf-card-body .button {
    margin-top: auto;
    display: inline-block;
    padding: 8px 16px;
    background: #0073e6;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background .2s;
}

.e-loop-item .wsf-card-body .button:hover {
    background: #0060c7;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   MÓVIL / TABLET — Botón "Filtrar" + Drawer lateral
   Solo activo en pantallas ≤ 1024px
   ═══════════════════════════════════════════════════════════════ */

/* El botón pill — oculto en escritorio, visible en móvil/tablet */
.wsf-mobile-toggle-btn {
  display: none;
}

/* Body sin scroll cuando el drawer está abierto */
body.wsf-no-scroll {
  overflow: hidden !important;
}

@media (max-width: 1024px) {

  /* Mostrar el botón "Filtrar" */
  .wsf-mobile-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #1d3557;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #1d3557;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    transition: background .18s ease, color .18s ease;
  }
  .wsf-mobile-toggle-btn:hover,
  .wsf-mobile-toggle-btn:active {
    background: #1d3557;
    color: #fff;
  }
  .wsf-mobile-toggle-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
  }

  /* Ocultar el widget original en su posición de la página */
  .wsf-filter-wrap {
    display: none !important;
  }

  /* ── Overlay oscuro ── */
  #wsf-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 99998;
  }
  #wsf-drawer-overlay.wsf-drawer-open {
    display: block;
    animation: wsfOverlayIn .22s ease forwards;
  }
  @keyframes wsfOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ── Drawer lateral ── */
  #wsf-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(88vw, 360px);
    height: 100%;
    background: #fff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    transform: translateX(110%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -4px 0 32px rgba(0, 0, 0, .18);
    will-change: transform;
  }
  #wsf-drawer.wsf-drawer-open {
    transform: translateX(0);
  }

  /* Cabecera del drawer */
  .wsf-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
  }
  .wsf-drawer-title {
    font-size: 17px;
    font-weight: 700;
    color: #1d3557;
    margin: 0;
  }
  .wsf-drawer-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    padding: 4px 6px;
    line-height: 1;
    transition: color .15s ease;
  }
  .wsf-drawer-close:hover { color: #1d3557; }

  /* Cuerpo del drawer — scrollable */
  .wsf-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 32px;
  }

  /* Dentro del drawer, el .wsf-filter-wrap SÍ debe ser visible */
  #wsf-drawer .wsf-filter-wrap {
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SUBCATEGORÍAS EXPANDIBLES — v1.1.0
   ═══════════════════════════════════════════════════════════ */

/* Flecha indicadora de que hay subcategorías */
.wsf-subcat-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}
.wsf-subcat-arrow::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--wsf-text-muted, #888);
  border-bottom: 2px solid var(--wsf-text-muted, #888);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.22s ease, border-color 0.18s;
}

/* Flecha apuntando hacia arriba cuando está abierto */
.wsf-check-item.wsf-subcats-open > .wsf-check-label .wsf-subcat-arrow::after {
  transform: rotate(-135deg) translateY(-2px);
  border-color: var(--wsf-accent, #1d3557);
}

/* Ítem padre con hijos: cursor pointer en toda la fila */
.wsf-check-item.wsf-has-subcats > .wsf-check-label {
  cursor: pointer;
}

/* Lista de subcategorías */
.wsf-subcats-list {
  list-style: none;
  margin: 4px 0 6px 0;
  padding: 0 0 0 28px;
  border-left: 2px solid var(--wsf-border, #e2e8f0);
}

/* Ítem de subcategoría */
.wsf-subcat-item {
  padding: 2px 0;
}
.wsf-subcat-item > .wsf-check-label {
  padding: 5px 4px;
  font-size: 0.88em;
}
.wsf-subcat-item > .wsf-check-label .wsf-check-text {
  color: var(--wsf-text-muted, #555);
}
.wsf-subcat-item.wsf-is-checked > .wsf-check-label .wsf-check-text {
  color: var(--wsf-accent, #1d3557);
  font-weight: 600;
}
.wsf-subcat-item > .wsf-check-label .wsf-check-count {
  font-size: 0.82em;
}

/* Estado de carga de subcategorías */
.wsf-subcats-list.wsf-subcats-loading {
  display: block !important;
  padding: 8px 28px;
  color: var(--wsf-text-muted, #888);
  font-size: 0.85em;
}
.wsf-subcats-list.wsf-subcats-loading::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--wsf-border, #e2e8f0);
  border-top-color: var(--wsf-accent, #1d3557);
  border-radius: 50%;
  animation: wsf-spin 0.7s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

/* Separador visual entre padre y subcategorías */
.wsf-check-item.wsf-subcats-open {
  padding-bottom: 4px;
}
.wsf-check-item.wsf-subcats-open > .wsf-check-label {
  border-radius: 4px 4px 0 0;
}
.wsf-check-item.wsf-subcats-open > .wsf-check-label .wsf-check-text {
  font-weight: 600;
  color: var(--wsf-accent, #1d3557);
}

/* Mobile: las subcategorías siguen siendo legibles en el drawer */
@media (max-width: 991px) {
  .wsf-subcats-list {
    padding-left: 24px;
  }
  .wsf-subcat-item > .wsf-check-label {
    padding: 6px 4px;
    font-size: 0.9em;
  }
}