/* ── WC Ajax Filter — filter.css ─────────────────────────────────────────── */

:root {
    --wcaf-accent:  #6c63ff;
    --wcaf-text:    #cccccc;
    --wcaf-bg:      #1e1e1e;
    --wcaf-border:  #2e2e2e;
    --wcaf-heading: #ffffff;
    --wcaf-input-bg:#2a2a2a;
    --wcaf-radius:  6px;
    --wcaf-font:    inherit;
}

/* Wrapper */
.wcaf-filter-wrap {
    font-family:    var(--wcaf-font);
    color:          var(--wcaf-text);
    background:     var(--wcaf-bg);
    border:         1px solid var(--wcaf-border);
    border-radius:  var(--wcaf-radius);
    padding:        0;
    overflow:       hidden;
}

/* ── Section ──────────────────────────────────────────────────────────────── */
.wcaf-section {
    border-bottom: 1px solid var(--wcaf-border);
}
.wcaf-section:last-of-type {
    border-bottom: none;
}

.wcaf-section-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         14px 16px;
    cursor:          pointer;
    font-weight:     700;
    font-size:       1rem;
    color:           var(--wcaf-heading);
    user-select:     none;
    transition:      background 0.2s;
}
.wcaf-section-header:hover {
    background: rgba(255,255,255,0.04);
}

.wcaf-toggle {
    font-size: 14px;
    color: var(--wcaf-text);
    transition: transform 0.25s ease;
}
.wcaf-section.collapsed .wcaf-toggle {
    transform: rotate(180deg);
}

.wcaf-section-body {
    padding:    4px 16px 16px;
    overflow:   hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.wcaf-section.collapsed .wcaf-section-body {
    max-height: 0 !important;
    padding-top:    0;
    padding-bottom: 0;
    opacity:    0;
    pointer-events: none;
}

/* ── Price slider ─────────────────────────────────────────────────────────── */
.wcaf-price-slider {
    margin: 8px 4px 16px;
}

/* Override jQuery UI */
.wcaf-filter-wrap .ui-slider {
    background:    var(--wcaf-border);
    border:        none;
    border-radius: 100px;
    height:        4px;
}
.wcaf-filter-wrap .ui-slider .ui-slider-range {
    background: var(--wcaf-accent);
    border-radius: 100px;
}
.wcaf-filter-wrap .ui-slider .ui-slider-handle {
    width:         18px;
    height:        18px;
    border-radius: 50%;
    background:    var(--wcaf-accent);
    border:        none;
    top:           -7px;
    cursor:        grab;
    outline:       none;
    box-shadow:    0 0 0 3px rgba(108,99,255,0.3);
}
.wcaf-filter-wrap .ui-slider .ui-slider-handle:active {
    cursor: grabbing;
}

/* Price inputs */
.wcaf-price-inputs {
    display: flex;
    gap:     8px;
}
.wcaf-price-inputs input {
    flex:           1;
    background:     var(--wcaf-input-bg);
    border:         1px solid var(--wcaf-border);
    border-radius:  var(--wcaf-radius);
    color:          var(--wcaf-text);
    font-size:      0.85rem;
    padding:        6px 10px;
    text-align:     center;
    width:          100%;
    min-width:      0;
}
.wcaf-price-inputs input:focus {
    outline:        none;
    border-color:   var(--wcaf-accent);
}

/* ── Checkboxes ───────────────────────────────────────────────────────────── */
.wcaf-checkbox-label {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     5px 0;
    cursor:      pointer;
    font-size:   0.92rem;
    color:       var(--wcaf-text);
    transition:  color 0.15s;
}
.wcaf-checkbox-label:hover {
    color: var(--wcaf-heading);
}

.wcaf-checkbox-label input[type="checkbox"] {
    -webkit-appearance: none;
    appearance:    none;
    width:         16px;
    height:        16px;
    flex-shrink:   0;
    border:        2px solid #555;
    border-radius: 3px;
    background:    transparent;
    cursor:        pointer;
    position:      relative;
    transition:    border-color 0.2s, background 0.2s;
}
.wcaf-checkbox-label input[type="checkbox"]:checked {
    background:   var(--wcaf-accent);
    border-color: var(--wcaf-accent);
}
.wcaf-checkbox-label input[type="checkbox"]:checked::after {
    content:   '';
    position:  absolute;
    left:      3px;
    top:       0px;
    width:     5px;
    height:    9px;
    border:    2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.wcaf-actions {
    padding:  14px 16px;
    display:  flex;
    gap:      8px;
    border-top: 1px solid var(--wcaf-border);
}
.wcaf-btn {
    flex:          1;
    padding:       9px 0;
    border:        none;
    border-radius: var(--wcaf-radius);
    font-size:     0.9rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.2s, opacity 0.2s;
}
.wcaf-btn-apply {
    background: var(--wcaf-accent);
    color:      #fff;
}
.wcaf-btn-apply:hover {
    opacity: 0.85;
}
.wcaf-btn-clear {
    background: var(--wcaf-input-bg);
    color:      var(--wcaf-text);
    border:     1px solid var(--wcaf-border);
}
.wcaf-btn-clear:hover {
    background: #333;
}

/* ── Loading overlay ──────────────────────────────────────────────────────── */
.wcaf-loading-overlay {
    position:       relative;
    min-height:     120px;
}
.wcaf-loading-overlay::after {
    content:         '';
    display:         block;
    position:        absolute;
    inset:           0;
    background:      rgba(255,255,255,0.6);
    z-index:         10;
    border-radius:   4px;
}
.wcaf-loading-overlay::before {
    content:         '';
    display:         block;
    width:           36px;
    height:          36px;
    border:          3px solid var(--wcaf-accent);
    border-right-color: transparent;
    border-radius:   50%;
    animation:       wcaf-spin 0.7s linear infinite;
    position:        absolute;
    top:             50%;
    left:            50%;
    margin:          -18px 0 0 -18px;
    z-index:         11;
}
@keyframes wcaf-spin {
    to { transform: rotate(360deg); }
}

/* Products fade animation */
.wcaf-fade {
    animation: wcaf-fadein 0.4s ease;
}
@keyframes wcaf-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* No products message */
.wcaf-no-products {
    padding:    20px;
    text-align: center;
    color:      #888;
    font-style: italic;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.wcaf-pagination {
    display:         flex;
    justify-content: center;
    gap:             6px;
    margin-top:      24px;
    flex-wrap:       wrap;
}
.wcaf-page-btn {
    padding:       6px 12px;
    border:        1px solid var(--wcaf-border);
    border-radius: var(--wcaf-radius);
    background:    var(--wcaf-input-bg);
    color:         var(--wcaf-text);
    cursor:        pointer;
    font-size:     0.85rem;
    transition:    background 0.2s, color 0.2s;
}
.wcaf-page-btn:hover,
.wcaf-page-btn.active {
    background: var(--wcaf-accent);
    color:      #fff;
    border-color: var(--wcaf-accent);
}

/* ── Context badge ────────────────────────────────────────────────────────── */
.wcaf-context-badge {
    padding:     10px 16px;
    font-size:   0.82rem;
    color:       var(--wcaf-text);
    border-bottom: 1px solid var(--wcaf-border);
    opacity:     0.75;
}
.wcaf-context-badge strong {
    color: var(--wcaf-heading);
}

/* ══════════════════════════════════════════════════════════════════════════
   ── MOBILE RESPONSIVO (≤ 1024px) ─────────────────────────────────────────
   ══════════════════════════════════════════════════════════════════════════ */

/* Botão flutuante "Abrir Filtros" — visível só no mobile */
.wcaf-mobile-toggle-btn {
    display:       none; /* oculto no desktop */
}

@media (max-width: 1024px) {

    /* ── Botão de abertura ──────────────────────────────────────────────── */
    .wcaf-mobile-toggle-btn {
        display:         flex;
        align-items:     center;
        justify-content: center;
        gap:             8px;
        width:           100%;
        padding:         10px 16px;
        background:      var(--wcaf-accent);
        color:           #fff;
        border:          none;
        border-radius:   99px;
        font-size:       0.95rem;
        font-weight:     400;
        cursor:          pointer;
        transition:      opacity 0.2s;
        box-sizing:      border-box;
    }
    .wcaf-mobile-toggle-btn:hover {
        opacity: 0.88;
    }
    .wcaf-mobile-toggle-btn svg {
        flex-shrink: 0;
    }

    /* ── Overlay / backdrop ─────────────────────────────────────────────── */
    .wcaf-mobile-overlay {
        display:    none;
        position:   fixed;
        inset:      0;
        background: rgba(0, 0, 0, 0.55);
        z-index:    99998;
        /* sem pointer-events para não bloquear o drawer */
    }
    .wcaf-mobile-overlay.wcaf-mobile-open {
        display: block;
    }

    /* ── Drawer (o próprio .wcaf-filter-wrap vira um painel deslizante) ─── */
    .wcaf-filter-wrap {
        /* Estado fechado: fora da tela (lado esquerdo) */
        position:         fixed;
        top:              0;
        left:             0;
        bottom:           0;
        width:            min(85vw, 360px);
        max-height:       100dvh;
        overflow-y:       auto;
        overflow-x:       hidden;
        z-index:          99999;
        border-radius:    0 var(--wcaf-radius) var(--wcaf-radius) 0;
        border-left:      none;
        transform:        translateX(-100%);
        transition:       transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        /* Scroll suave no iOS */
        -webkit-overflow-scrolling: touch;
    }

    /* Estado aberto */
    .wcaf-filter-wrap.wcaf-mobile-open {
        transform: translateX(0);
    }

    /* ── Cabeçalho do drawer com botão "Fechar Filtro" ──────────────────── */
    .wcaf-drawer-header {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        padding:         16px 16px 14px;
        border-bottom:   1px solid var(--wcaf-border);
        position:        sticky;
        top:             0;
        background:      var(--wcaf-bg);
        z-index:         1;
    }
    .wcaf-drawer-header-title {
        font-size:   1rem;
        font-weight: 700;
        color:       var(--wcaf-heading);
        margin:      0;
    }
    .wcaf-drawer-close-btn {
        display:         flex;
        align-items:     center;
        justify-content: center;
        gap:             6px;
        padding:         7px 14px;
        background:      var(--wcaf-input-bg);
        color:           var(--wcaf-text);
        border:          1px solid var(--wcaf-border);
        border-radius:   var(--wcaf-radius);
        font-size:       0.85rem;
        font-weight:     600;
        cursor:          pointer;
        transition:      background 0.2s, color 0.2s;
        white-space:     nowrap;
    }
    .wcaf-drawer-close-btn:hover {
        background: var(--wcaf-accent);
        color:      #fff;
        border-color: var(--wcaf-accent);
    }
    .wcaf-drawer-close-btn svg {
        flex-shrink: 0;
    }

    /* ── Esconde o cabeçalho do drawer no desktop ───────────────────────── */
    /* (já está oculto por padrão via JS — ver filter.js) */
}

/* No desktop, o drawer-header nunca deve aparecer */
@media (min-width: 1025px) {
    .wcaf-drawer-header {
        display: none !important;
    }
    .wcaf-mobile-overlay {
        display: none !important;
    }
}