/* ==========================================
   Antigravity Premium Shop Filters CSS
   ========================================== */

:root {
    --agsf-primary: #111214;
    --agsf-accent: #163f36;
    --agsf-border: #e6e6e6;
    --agsf-text: #4d4d4d;
    --agsf-text-light: #8c8c8c;
    --agsf-bg-light: #f7f7f8;
    --agsf-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Hide Default Astra Sidebar on Shop & Category Archives */
.post-type-archive-product #secondary,
.tax-product_cat #secondary,
.tax-product_tag #secondary {
    display: none !important;
}

/* Desktop Sidebar Left Grid Layout */
@media (min-width: 992px) {
    .ast-woocommerce-container {
        display: grid !important;
        grid-template-columns: 260px 1fr !important;
        column-gap: 54px !important;
        row-gap: 0 !important;
        align-items: start !important;
        width: 100% !important;
    }

    .woocommerce-breadcrumb {
        grid-column: 1 / span 2 !important;
        margin-bottom: 24px !important;
    }

    .agsf-sidebar {
        grid-column: 1 !important;
        grid-row: 2 / 20 !important;
        position: sticky !important;
        top: 48px !important;
        display: block !important;
        z-index: 10;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .woocommerce-products-header,
    .woocommerce-notices-wrapper,
    .woocommerce-result-count,
    .woocommerce-ordering,
    .products {
        grid-column: 2 !important;
    }

    .agsf-sidebar-close {
        display: none !important;
    }

    .agsf-mobile-trigger {
        display: none !important;
    }
}

/* Base Sidebar & Mobile Drawer Styles */
@media (max-width: 991px) {
    .agsf-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -320px !important;
        width: 300px !important;
        height: 100% !important;
        background: #ffffff !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
        z-index: 99999 !important;
        transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        overflow-y: auto !important;
    }

    .agsf-sidebar.is-open {
        left: 0 !important;
    }

    .agsf-sidebar-close {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        background: none !important;
        border: none !important;
        font-size: 28px !important;
        color: var(--agsf-primary) !important;
        cursor: pointer !important;
        padding: 4px !important;
        line-height: 1 !important;
    }

    /* Mobile trigger button */
    .agsf-mobile-trigger {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: var(--agsf-primary) !important;
        color: #ffffff !important;
        border: none !important;
        padding: 10px 20px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        cursor: pointer !important;
        margin-bottom: 24px !important;
        transition: background 0.2s, transform 0.2s !important;
    }

    .agsf-mobile-trigger:hover {
        background: var(--agsf-accent) !important;
        transform: translateY(-1px);
    }

    .agsf-mobile-trigger svg {
        width: 14px;
        height: 14px;
    }

    /* Overlay */
    .agsf-sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(17, 18, 20, 0.4) !important;
        z-index: 99998 !important;
        display: none !important;
        backdrop-filter: blur(2px);
    }

    .agsf-sidebar-overlay.is-open {
        display: block !important;
    }
}

/* Sidebar Widgets styling */
.agsf-sidebar__inner {
    padding: 24px !important;
    font-family: var(--agsf-font) !important;
}

.agsf-sidebar-title {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: var(--agsf-primary) !important;
    letter-spacing: -0.02em;
    margin: 0 0 24px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--agsf-primary) !important;
    text-transform: uppercase;
}

.agsf-widget {
    margin-bottom: 32px !important;
}

.agsf-widget-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--agsf-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 16px 0 !important;
}

/* 1. Clear button widget */
.agsf-widget--active {
    margin-bottom: 24px !important;
}

.agsf-clear-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: #fff !important;
    border: 1px solid var(--agsf-primary) !important;
    color: var(--agsf-primary) !important;
    padding: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border-radius: 4px;
}

.agsf-clear-btn:hover {
    background: var(--agsf-primary) !important;
    color: #fff !important;
}

/* 2. Search Form */
.agsf-search-form {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
}

.agsf-search-field {
    width: 100% !important;
    padding: 10px 40px 10px 14px !important;
    font-size: 14px !important;
    border: 1px solid var(--agsf-border) !important;
    border-radius: 4px !important;
    background: var(--agsf-bg-light) !important;
    outline: none !important;
    color: var(--agsf-primary) !important;
    transition: border 0.2s !important;
}

.agsf-search-field:focus {
    border-color: var(--agsf-primary) !important;
    background: #ffffff !important;
}

.agsf-search-submit {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: var(--agsf-text-light) !important;
    cursor: pointer !important;
    padding: 6px !important;
}

.agsf-search-submit:hover {
    color: var(--agsf-primary) !important;
}

.agsf-search-submit svg {
    width: 16px;
    height: 16px;
}

/* 3. Category & Status Lists */
.agsf-list, .agsf-status-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.agsf-list li {
    margin-bottom: 10px !important;
    font-size: 14px !important;
}

.agsf-list a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: var(--agsf-text) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.agsf-list li:hover a,
.agsf-list li.is-active a {
    color: var(--agsf-primary) !important;
    font-weight: 700 !important;
}

.agsf-list a small {
    color: var(--agsf-text-light) !important;
    font-size: 11px !important;
}

/* 4. Price Quick Ranges & Inputs */
.agsf-price-ranges {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.agsf-price-ranges li {
    margin-bottom: 8px !important;
    font-size: 13.5px !important;
}

.agsf-price-ranges a {
    color: var(--agsf-text) !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}

.agsf-price-ranges li:hover a,
.agsf-price-ranges li.is-active a {
    color: var(--agsf-primary) !important;
    font-weight: 700 !important;
}

.agsf-price-form {
    border-top: 1px solid var(--agsf-border) !important;
    padding-top: 16px !important;
}

.agsf-price-inputs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.agsf-price-inputs input {
    width: 100% !important;
    padding: 8px 10px !important;
    border: 1px solid var(--agsf-border) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    background: var(--agsf-bg-light) !important;
    color: var(--agsf-primary) !important;
    outline: none !important;
    text-align: center !important;
}

.agsf-price-inputs input:focus {
    border-color: var(--agsf-primary) !important;
    background: #ffffff !important;
}

.agsf-price-inputs span {
    color: var(--agsf-text-light) !important;
    font-size: 12px !important;
}

.agsf-price-apply {
    width: 100% !important;
    background: var(--agsf-primary) !important;
    color: #fff !important;
    border: none !important;
    padding: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer !important;
    transition: background 0.2s !important;
    border-radius: 4px !important;
}

.agsf-price-apply:hover {
    background: var(--agsf-accent) !important;
}

/* 5. Custom Status checkbox */
.agsf-checkbox-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--agsf-text) !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    margin-bottom: 12px !important;
}

.agsf-checkbox {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid var(--agsf-border) !important;
    background: var(--agsf-bg-light) !important;
    border-radius: 4px !important;
    display: inline-block !important;
    position: relative !important;
    transition: background 0.2s, border-color 0.2s !important;
}

.agsf-checkbox-link:hover .agsf-checkbox {
    border-color: var(--agsf-primary) !important;
}

.agsf-checkbox-link.is-checked .agsf-checkbox {
    background: var(--agsf-primary) !important;
    border-color: var(--agsf-primary) !important;
}

.agsf-checkbox-link.is-checked .agsf-checkbox::after {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 2px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.agsf-checkbox-link.is-checked {
    color: var(--agsf-primary) !important;
    font-weight: 700 !important;
}