/**
 * Axis Filter for WooCommerce — axis-filter.css
 * Edit freely to match your theme. All colours use CSS custom properties
 * so you can override in your theme's Additional CSS without touching this file.
 */

/* ── Design tokens ────────────────────────────────────────── */
:root {
    --axis-accent:        #e8343a;
    --axis-accent-light:  rgba(232, 52, 58, 0.12);
    --axis-text:          #1a1a1a;
    --axis-text-muted:    #666;
    --axis-border:        #e0e0e0;
    --axis-bg:            #fff;
    --axis-bg-input:      #f7f7f7;
    --axis-radius:        8px;
    --axis-radius-sm:     6px;
    --axis-radius-pill:   20px;
    --axis-transition:    0.2s ease;
}

/* ── Filter sidebar wrapper ───────────────────────────────── */
.axis-filter {
    background:  var(--axis-bg);
    border:      1px solid var(--axis-border);
    border-radius: var(--axis-radius);
    padding:     24px 20px;
    font-family: inherit;
    min-width:   220px;
    max-width:   280px;
    box-sizing:  border-box;
}

/* ── Header row ───────────────────────────────────────────── */
.axis-filter__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
    padding-bottom:  14px;
    border-bottom:   2px solid var(--axis-accent);
}

.axis-filter__title {
    font-size:       15px;
    font-weight:     700;
    color:           var(--axis-text);
    text-transform:  uppercase;
    letter-spacing:  0.05em;
}

/* ── Clear all button ─────────────────────────────────────── */
.axis-filter__reset {
    background:      none;
    border:          1px solid var(--axis-accent);
    color:           var(--axis-accent);
    font-size:       11px;
    font-weight:     600;
    padding:         3px 10px;
    border-radius:   var(--axis-radius-pill);
    cursor:          pointer;
    text-transform:  uppercase;
    letter-spacing:  0.04em;
    transition:      background var(--axis-transition), color var(--axis-transition);
    white-space:     nowrap;
}

.axis-filter__reset:hover {
    background: var(--axis-accent);
    color:      #fff;
}

/* ── Filter groups ────────────────────────────────────────── */
.axis-filter__group {
    margin-bottom: 16px;
}

.axis-filter__label {
    display:        block;
    font-size:      11px;
    font-weight:    700;
    color:          var(--axis-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  6px;
}

/* ── Dropdowns ────────────────────────────────────────────── */
.axis-filter__select-wrap {
    position: relative;
}

/* Custom chevron */
.axis-filter__select-wrap::after {
    content:          '';
    position:         absolute;
    right:            12px;
    top:              50%;
    transform:        translateY(-50%);
    width:            0;
    height:           0;
    border-left:      4px solid transparent;
    border-right:     4px solid transparent;
    border-top:       5px solid var(--axis-text-muted);
    pointer-events:   none;
    transition:       border-top-color var(--axis-transition);
}

.axis-filter__select {
    width:            100%;
    appearance:       none;
    -webkit-appearance: none;
    background:       var(--axis-bg-input);
    border:           1px solid var(--axis-border);
    border-radius:    var(--axis-radius-sm);
    padding:          9px 32px 9px 12px;
    font-size:        13px;
    color:            var(--axis-text);
    cursor:           pointer;
    outline:          none;
    transition:       border-color var(--axis-transition), box-shadow var(--axis-transition), background var(--axis-transition);
    box-sizing:       border-box;
}

.axis-filter__select:focus {
    border-color: var(--axis-accent);
    box-shadow:   0 0 0 3px var(--axis-accent-light);
    background:   var(--axis-bg);
}

.axis-filter__select:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
}

/* Active (has a value selected) group highlight */
.axis-attr-group--active .axis-filter__select {
    border-color: var(--axis-accent);
    background:   #fff8f8;
}

.axis-attr-group--active .axis-filter__select-wrap::after {
    border-top-color: var(--axis-accent);
}

/* ── Entrance animation for dynamic groups ────────────────── */
.axis-attr-group {
    animation: axis-fadein 0.22s ease forwards;
}

@keyframes axis-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading dots ─────────────────────────────────────────── */
.axis-filter__loading {
    display:         flex;
    gap:             5px;
    justify-content: center;
    padding:         12px 0;
}

.axis-filter__loading span {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--axis-accent);
    animation:     axis-bounce 1.2s infinite ease-in-out;
}

.axis-filter__loading span:nth-child(2) { animation-delay: 0.15s; }
.axis-filter__loading span:nth-child(3) { animation-delay: 0.30s; }

@keyframes axis-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* ── Hidden product cards ─────────────────────────────────── */
.axis-product-hidden {
    display: none !important;
}