/**
 * Filter Toggle styles
 * Create this file as filter-toggle.css in your theme's assets/css directory
 */

/* Round filter button styling */
.filter-toggle-button .wp-block-button__link {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    width: 48px!important;
    height: 48px!important;
    padding: 0!important;
    background-color: var(--wp--preset--color--charcoal-black-20);
    color: var(--wp--preset--color--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'%3E%3C/polygon%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%!important;
    text-indent: -9000px!important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.filter-toggle-button .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--charcoal-black);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* Filter groups styling */
.filter-group {
    max-width: var(--wp--style--global--wide-size);
    margin: 10px 0 2rem;
    padding: 15px;
    border: 1px solid var(--wp--preset--color--white, #ddd);
    border-radius: 4px;
    background-color: var(--wp--preset--color--subtle-background, #f9f9f9);
}

/* Always hide filter groups initially */
.filter-group {
    display: none;
}