/**
 * FacetWP Facets Styling
 * 
 * Table of Contents:
 * 1. Global Settings
 * 2. Facets Container
 * 3. Search Facet
 * 4. Dropdown Facets
 * 5. Checkbox Facets
 * 6. Per Page Facet
 * 7. Active Facets
 * 8. Loading States
 * 9. Results & Pagination
 * 10. Responsive Design
 */

/* ============================================================================
   1. Global Settings
   ============================================================================ */

/* Hide WooCommerce ordering dropdown (replaced by FacetWP) */
.woocommerce-ordering,
.woocommerce .woocommerce-ordering,
form.woocommerce-ordering,
select.orderby {
    display: none !important;
}

/* ============================================================================
   2. Facets Container
   ============================================================================ */

.facetwp-facets {
    /*display: grid;*/
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
	display: flex;
	justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.facetwp-facet {
    margin-bottom: 0!important;
}

/* Facet labels */
.facetwp-facet-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

/* Facet counts */
.facetwp-facet-count {
    font-size: 0.875rem;
    color: #666;
    margin-left: 0.25rem;
}

/* ============================================================================
   3. Search Facet
   ============================================================================ */

.facetwp-facet-search,
.facetwp-facet-general_search {
    width: 100%;
    margin-bottom: 2rem!important;
}

.facetwp-facet-search input[type="text"],
.facetwp-search {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

.facetwp-search {
    padding-top: 0.5rem!important;
    padding-bottom: 0.5rem!important;
    font-size: 0.875rem!important;
    color: var(--black)!important;
    border-color: var(--primary) !important;
}

.facetwp-search::placeholder {
    color: var(--black)!important;
}

.facetwp-input-wrap {
    width: 100%;
    display: block;
}

/* Search icon */
.facetwp-icon {
    background: var(--primary, #81A5C0);
    color: white;
    border-radius: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    width: 2.5rem;
    height: 2rem;
    opacity: 1!important;
}

.facetwp-icon:before {
    display: inline-block!important;
    content: ''!important;
    width: 20px!important;
    height: 20px!important;
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='white'%3e%3cpath d='M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z'/%3e%3c/svg%3e") no-repeat!important;
    background-position: center!important;
    background-size: 20px 20px!important;
    transition: all 0.3s ease!important;
}

/* Loading state - show spinner */
.is-loading .facetwp-icon:before {
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='white'%3e%3cpath d='M272 112C272 85.5 293.5 64 320 64C346.5 64 368 85.5 368 112C368 138.5 346.5 160 320 160C293.5 160 272 138.5 272 112zM272 528C272 501.5 293.5 480 320 480C346.5 480 368 501.5 368 528C368 554.5 346.5 576 320 576C293.5 576 272 554.5 272 528zM112 272C138.5 272 160 293.5 160 320C160 346.5 138.5 368 112 368C85.5 368 64 346.5 64 320C64 293.5 85.5 272 112 272zM480 320C480 293.5 501.5 272 528 272C554.5 272 576 293.5 576 320C576 346.5 554.5 368 528 368C501.5 368 480 346.5 480 320zM139 433.1C157.8 414.3 188.1 414.3 206.9 433.1C225.7 451.9 225.7 482.2 206.9 501C188.1 519.8 157.8 519.8 139 501C120.2 482.2 120.2 451.9 139 433.1zM139 139C157.8 120.2 188.1 120.2 206.9 139C225.7 157.8 225.7 188.1 206.9 206.9C188.1 225.7 157.8 225.7 139 206.9C120.2 188.1 120.2 157.8 139 139zM501 433.1C519.8 451.9 519.8 482.2 501 501C482.2 519.8 451.9 519.8 433.1 501C414.3 482.2 414.3 451.9 433.1 433.1C451.9 414.3 482.2 414.3 501 433.1z'/%3e%3c/svg%3e") no-repeat!important;
    animation: spin 1s linear infinite!important;
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================================
   4. Dropdown Facets
   ============================================================================ */

.facetwp-facet-dropdown select,
.facetwp-dropdown {
    width: 100%;
    padding: 0.25rem;
    border: 1px solid #707070;
    border-radius: 0px;
    background: transparent;
    font-size: 0.875rem;
    color: var(--black);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2381A5C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    padding-right: 2rem;
	padding-left: 1rem;
}



/* ============================================================================
   5. Checkbox Facets
   ============================================================================ */

.facetwp-facet-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.facetwp-facet-checkboxes .facetwp-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.facetwp-facet-checkboxes .facetwp-checkbox:hover {
    border-color: var(--primary, #81A5C0);
    background: #f9f9f9;
}

.facetwp-facet-checkboxes .facetwp-checkbox.checked {
    border-color: var(--primary, #81A5C0);
    background: var(--primary, #81A5C0);
    color: white;
}

/* ============================================================================
   6. Per Page Facet
   ============================================================================ */

/* Positioned where order by dropdown used to be */
.facetwp-facet-per_page {
    display: flex;
    margin-bottom: 1rem;
}

.facetwp-facet-per_page select,
.facetwp-per-page-select {
    padding: 0;
    padding-right: 2rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 0.875rem;
    color: var(--black);
    margin-left: auto;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2381A5C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
}

/* ============================================================================
   7. Active Facets
   ============================================================================ */

.facetwp-active-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.facetwp-active-facet {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--primary, #81A5C0);
    color: white;
    border-radius: 4px;
    font-size: 0.875rem;
}

.facetwp-active-facet .facetwp-remove {
    cursor: pointer;
    font-weight: bold;
}

/* ============================================================================
   8. Loading States
   ============================================================================ */

.facetwp-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================================================
   9. Results & Pagination
   ============================================================================ */

/* Template wrapper */
.facetwp-template {
    position: relative;
}

/* Right side facets (paging and count) */
.facetwp-right-facets {
    display: flex;
    width: 30%;
    justify-content: space-between;
}

/* Results count */
.facetwp-result-count {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #666;
}

/* Pagination */
.facetwp-pager {
    margin-top: 2rem;
    text-align: center;
}

.facetwp-pager a {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
}

.facetwp-pager a:hover,
.facetwp-pager a.active {
    background: var(--primary, #81A5C0);
    color: white;
    border-color: var(--primary, #81A5C0);
}

/* ============================================================================
   10. Responsive Design
   ============================================================================ */

@media (max-width: 768px) {
    .facetwp-facets {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .facetwp-facet-per_page {
        margin-left: 0;
        margin-top: 1rem;
    }
    
    .facetwp-facet-checkboxes {
        flex-direction: column;
    }

    .facetwp-right-facets {
        width: 100%;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .facetwp-facets {
        gap: 0.5rem;
    }
}

/* ==============================================================================
   11. Load More
   ============================================================================== */

.facetwp-facet.facetwp-facet-load_more.facetwp-type-pager {
    text-align: center;
}

button.facetwp-load-more {
    background-color: var(--primary);
    box-shadow: none;
    font-family: var(--gp-font--montserrat);
    font-weight: 400;
    min-width: 190px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid var(--primary);
    border-radius: 0px;
    padding: 0.5em 1.75em;
}

button.facetwp-load-more:hover {
    background: white;
    color: var(--primary);
}