/* ═══════════════════════════════════════════════
   WC Filtros Personalizados v1.3 – Estilos
   ═══════════════════════════════════════════════ */

:root {
    --wcf-primary: #2c3e50;
    --wcf-accent: #e74c3c;
    --wcf-accent-hover: #c0392b;
    --wcf-accent-light: rgba(231,76,60,.08);
    --wcf-accent-glow: rgba(231,76,60,.25);
    --wcf-bg: #f8f9fa;
    --wcf-white: #ffffff;
    --wcf-border: #e2e8f0;
    --wcf-text: #2d3748;
    --wcf-text-light: #718096;
    --wcf-shadow: 0 1px 3px rgba(0,0,0,.08);
    --wcf-shadow-lg: 0 10px 40px rgba(0,0,0,.12);
    --wcf-radius: 8px;
    --wcf-sidebar-w: 280px;
    --wcf-transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ── Layout ─────────────────────────────────── */
.wcf-shop-wrapper { display:flex; gap:2rem; max-width:1400px; margin:0 auto; padding:1.5rem 1rem; align-items:flex-start; }
.wcf-products-area { flex:1; min-width:0; position:relative; }

/*
 * FIX: Asegurar que la grid de productos dentro de wcf-products-area
 * siempre respete el número de columnas, tanto en la carga inicial
 * como después de filtrar con AJAX.
 *
 * Algunos temas definen .products como flexbox o grid.
 * Estos estilos actúan como fallback si el tema no aplica los suyos
 * dentro de nuestro wrapper.
 */
.wcf-products-area ul.products { display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.wcf-products-area ul.products li.product { box-sizing:border-box; padding:0 10px; margin-bottom:20px; }
.wcf-products-area ul.products.columns-1 li.product { width:100%; }
.wcf-products-area ul.products.columns-2 li.product { width:50%; }
.wcf-products-area ul.products.columns-3 li.product { width:33.333%; }
.wcf-products-area ul.products.columns-4 li.product { width:25%; }
.wcf-products-area ul.products.columns-5 li.product { width:20%; }
@media (max-width: 768px) {
    .wcf-products-area ul.products li.product { width:50% !important; }
}
@media (max-width: 480px) {
    .wcf-products-area ul.products li.product { width:100% !important; }
}

/* ── Sidebar ────────────────────────────────── */
.wcf-sidebar { position:sticky; top:2rem; width:var(--wcf-sidebar-w); min-width:var(--wcf-sidebar-w); background:var(--wcf-white); border:1px solid var(--wcf-border); border-radius:var(--wcf-radius); box-shadow:var(--wcf-shadow); overflow:hidden; }
.wcf-sidebar-inner { padding:1.25rem; max-height:calc(100vh - 4rem); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--wcf-border) transparent; }
.wcf-sidebar-inner::-webkit-scrollbar { width:5px; }
.wcf-sidebar-inner::-webkit-scrollbar-thumb { background:var(--wcf-border); border-radius:3px; }
.wcf-sidebar-title { font-size:1.1rem; font-weight:700; color:var(--wcf-primary); margin:0 0 1rem; padding-bottom:.75rem; border-bottom:2px solid var(--wcf-accent); }
.wcf-close-btn { display:none; position:absolute; top:.75rem; right:.75rem; background:none; border:none; font-size:1.5rem; color:var(--wcf-text-light); cursor:pointer; z-index:10; }

/* ── Filter groups ──────────────────────────── */
.wcf-filter-group { border-bottom:1px solid var(--wcf-border); padding-bottom:.75rem; margin-bottom:.75rem; }
.wcf-filter-group:last-of-type { border-bottom:none; margin-bottom:0; }
.wcf-filter-heading { display:flex; justify-content:space-between; align-items:center; font-size:.85rem; font-weight:600; color:var(--wcf-text); text-transform:uppercase; letter-spacing:.04em; cursor:pointer; padding:.5rem 0; margin:0; user-select:none; transition:color var(--wcf-transition); }
.wcf-filter-heading:hover { color:var(--wcf-accent); }
.wcf-arrow { font-size:.7rem; transition:transform var(--wcf-transition); }
.wcf-filter-heading.collapsed .wcf-arrow { transform:rotate(-90deg); }
.wcf-filter-body { padding:.25rem 0 .5rem; transition:max-height .3s ease, opacity .2s ease; overflow:hidden; }
.wcf-filter-body.is-hidden { max-height:0 !important; opacity:0; padding:0; }

/* ── Checkboxes ─────────────────────────────── */
.wcf-checkbox { display:flex; align-items:center; gap:.5rem; padding:.35rem 0; cursor:pointer; font-size:.85rem; color:var(--wcf-text); transition:color var(--wcf-transition); }
.wcf-checkbox:hover { color:var(--wcf-accent); }
.wcf-checkbox input { display:none; }
.wcf-check-mark { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:2px solid var(--wcf-border); border-radius:4px; transition:all var(--wcf-transition); flex-shrink:0; }
.wcf-checkbox input:checked + .wcf-check-mark { background:var(--wcf-accent); border-color:var(--wcf-accent); }
.wcf-checkbox input:checked + .wcf-check-mark::after { content:'✓'; color:#fff; font-size:.7rem; font-weight:700; }
.wcf-count { margin-left:auto; color:var(--wcf-text-light); font-size:.75rem; }


/* ══════════════════════════════════════════════
   SLIDER DE PRECIO — Diseño Premium v1.3
   ══════════════════════════════════════════════ */

/* Badges de precio sobre el slider */
.wcf-price-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .35rem;
}
.wcf-price-badge {
    display: inline-block;
    background: var(--wcf-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 4px;
    letter-spacing: .01em;
    position: relative;
    transition: all .15s ease;
}
.wcf-price-badge::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--wcf-accent);
}

/* Track wrapper */
.wcf-range-wrapper {
    position: relative;
    height: 40px;
    margin: .25rem 0 .5rem;
}
.wcf-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: #edf2f7;
    border-radius: 3px;
    transform: translateY(-50%);
    pointer-events: none;
    overflow: hidden;
}
.wcf-range-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, var(--wcf-accent), #ff6b6b);
    border-radius: 3px;
    transition: left .05s, right .05s;
}

/* Range inputs */
.wcf-range-input {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}
.wcf-range-input::-webkit-slider-runnable-track { height:6px; background:transparent; border:none; }
.wcf-range-input::-moz-range-track { height:6px; background:transparent; border:none; }

/* Thumbs — diseño premium con sombra y anillo */
.wcf-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wcf-white);
    border: 3px solid var(--wcf-accent);
    box-shadow: 0 2px 8px var(--wcf-accent-glow), 0 1px 3px rgba(0,0,0,.1);
    cursor: grab;
    pointer-events: auto;
    margin-top: -8px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.wcf-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 3px 12px var(--wcf-accent-glow), 0 2px 6px rgba(0,0,0,.1);
}
.wcf-range-input::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.25);
}
.wcf-range-input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wcf-white);
    border: 3px solid var(--wcf-accent);
    box-shadow: 0 2px 8px var(--wcf-accent-glow), 0 1px 3px rgba(0,0,0,.1);
    cursor: grab;
    pointer-events: auto;
}

/* Inputs numéricos */
.wcf-price-inputs {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .35rem;
}
.wcf-price-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wcf-price-field span {
    font-size: .68rem;
    font-weight: 600;
    color: var(--wcf-text-light);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.wcf-price-field input {
    width: 100%;
    padding: .45rem .5rem;
    border: 1.5px solid var(--wcf-border);
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--wcf-text);
    text-align: center;
    background: var(--wcf-white);
    transition: all var(--wcf-transition);
    -moz-appearance: textfield;
}
.wcf-price-field input::-webkit-outer-spin-button,
.wcf-price-field input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.wcf-price-field input:focus {
    outline: none;
    border-color: var(--wcf-accent);
    box-shadow: 0 0 0 3px var(--wcf-accent-light);
}
.wcf-price-separator {
    color: var(--wcf-text-light);
    font-size: .85rem;
    padding-top: 1rem;
}


/* ── Pills ──────────────────────────────────── */
.wcf-size-pills { display:flex; flex-wrap:wrap; gap:.4rem; }
.wcf-pill { cursor:pointer; }
.wcf-pill input { display:none; }
.wcf-pill-label { display:inline-block; padding:.3rem .7rem; font-size:.8rem; font-weight:500; border:1.5px solid var(--wcf-border); border-radius:20px; color:var(--wcf-text); transition:all var(--wcf-transition); }
.wcf-pill input:checked + .wcf-pill-label { background:var(--wcf-accent); border-color:var(--wcf-accent); color:#fff; }
.wcf-pill:hover .wcf-pill-label { border-color:var(--wcf-accent); }

/* ── Color swatches ─────────────────────────── */
.wcf-color-swatches { display:flex; flex-wrap:wrap; gap:.6rem; }
.wcf-swatch { display:flex; flex-direction:column; align-items:center; gap:.25rem; cursor:pointer; }
.wcf-swatch input { display:none; }
.wcf-swatch-circle { width:28px; height:28px; border-radius:50%; border:2px solid var(--wcf-border); transition:all var(--wcf-transition); box-shadow:inset 0 0 0 2px #fff; }
.wcf-swatch input:checked + .wcf-swatch-circle { border-color:var(--wcf-accent); box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--wcf-accent); transform:scale(1.1); }
.wcf-swatch-name { font-size:.65rem; color:var(--wcf-text-light); text-transform:capitalize; }

.wcf-color-rojo{background:#e74c3c}.wcf-color-azul{background:#3498db}.wcf-color-verde{background:#27ae60}.wcf-color-negro{background:#2c3e50}.wcf-color-blanco{background:#f5f5f5;border-color:#ccc}.wcf-color-amarillo{background:#f1c40f}.wcf-color-naranja{background:#e67e22}.wcf-color-rosa{background:#e91e63}.wcf-color-morado{background:#9b59b6}.wcf-color-gris{background:#95a5a6}.wcf-color-cafe{background:#795548}.wcf-color-marron{background:#795548}.wcf-color-beige{background:#d4c5a9}


/* ══════════════════════════════════════════════
   BOTONES — Diseño mejorado v1.3
   ══════════════════════════════════════════════ */
.wcf-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--wcf-border);
}
.wcf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem 1rem;
    border: none;
    border-radius: var(--wcf-radius);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    letter-spacing: .01em;
    position: relative;
    overflow: hidden;
}
.wcf-btn svg {
    flex-shrink: 0;
}

/* Botón primario — "Aplicar filtros" */
.wcf-btn-primary {
    background: var(--wcf-accent);
    color: #fff;
    box-shadow: 0 2px 8px var(--wcf-accent-glow);
}
.wcf-btn-primary:hover {
    background: var(--wcf-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--wcf-accent-glow);
}
.wcf-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px var(--wcf-accent-glow);
}

/* Botón secundario — "Limpiar todo" */
.wcf-btn-secondary {
    background: var(--wcf-bg);
    color: var(--wcf-text-light);
    border: 1.5px solid var(--wcf-border);
}
.wcf-btn-secondary:hover {
    background: var(--wcf-white);
    border-color: var(--wcf-accent);
    color: var(--wcf-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.wcf-btn-secondary:active {
    transform: translateY(0);
}


/* ── Tags ───────────────────────────────────── */
.wcf-active-filters { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.wcf-tag { display:inline-flex; align-items:center; gap:.3rem; background:var(--wcf-bg); border:1px solid var(--wcf-border); border-radius:20px; padding:.25rem .65rem; font-size:.78rem; color:var(--wcf-text); cursor:pointer; transition:all var(--wcf-transition); }
.wcf-tag:hover { background:var(--wcf-accent); color:#fff; border-color:var(--wcf-accent); }
.wcf-tag .wcf-tag-remove { font-weight:700; font-size:.9rem; line-height:1; }

/* ── Loader ─────────────────────────────────── */
.wcf-loader { position:absolute; inset:0; background:rgba(255,255,255,.8); display:flex; align-items:flex-start; justify-content:center; padding-top:4rem; z-index:50; }
.wcf-spinner { width:36px; height:36px; border:3px solid var(--wcf-border); border-top-color:var(--wcf-accent); border-radius:50%; animation:wcfSpin .7s linear infinite; }
@keyframes wcfSpin { to { transform:rotate(360deg); } }

/* ── No results / count / pagination ────────── */
.wcf-no-results { text-align:center; padding:3rem 1rem; color:var(--wcf-text-light); }
.wcf-no-results svg { opacity:.4; margin-bottom:1rem; }
.wcf-no-results p { font-size:.95rem; margin-bottom:1rem; }
.wcf-result-count { font-size:.85rem; color:var(--wcf-text-light); margin-bottom:.75rem; }
/* Pagination styles removed — using WooCommerce native pagination */

/* ── Mobile ─────────────────────────────────── */
.wcf-mobile-trigger { display:none; position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); background:var(--wcf-primary); color:#fff; border:none; border-radius:30px; padding:.75rem 1.5rem; font-size:.9rem; font-weight:600; box-shadow:var(--wcf-shadow-lg); cursor:pointer; z-index:999; }
.wcf-mobile-trigger:hover { background:var(--wcf-accent); transform:translateX(-50%) translateY(-2px); }
.wcf-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9998; animation:wcfFadeIn .2s ease; }
@keyframes wcfFadeIn { from{opacity:0} to{opacity:1} }

@media (max-width: 991px) {
    .wcf-shop-wrapper { flex-direction:column; }
    .wcf-sidebar { position:fixed; top:0; left:-320px; width:300px; min-width:300px; height:100vh; z-index:9999; border-radius:0; border:none; transition:left .35s cubic-bezier(.4,0,.2,1); }
    .wcf-sidebar.is-open { left:0; box-shadow:var(--wcf-shadow-lg); }
    .wcf-sidebar-inner { max-height:100vh; padding-top:3rem; }
    .wcf-close-btn { display:block; }
    .wcf-mobile-trigger { display:block; }
}
@media (max-width: 480px) {
    .wcf-sidebar { width:85vw; min-width:auto; }
}