/**
 * Phox Facets - Core Styles
 *
 * Polished default styling for all facet elements.
 * Uses CSS custom properties so themes can override easily.
 */

/* ─── CSS Custom Properties ───────────────────────────────────── */

:root{--phox-facet-accent:#6366f1;--phox-facet-accent-hover:#4f46e5;--phox-facet-accent-soft:rgba(99, 102, 241, 0.12);--phox-facet-border:#e5e7eb;--phox-facet-border-focus:#6366f1;--phox-facet-bg:#ffffff;--phox-facet-bg-soft:#f8fafc;--phox-facet-bg-hover:#f1f5f9;--phox-facet-text:#1e293b;--phox-facet-text-muted:#64748b;--phox-facet-radius:8px;--phox-facet-radius-sm:6px;--phox-facet-shadow:0 1px 3px rgba(0, 0, 0, 0.06);--phox-facet-shadow-hover:0 4px 12px rgba(0, 0, 0, 0.08);--phox-facet-shadow-focus:0 0 0 3px rgba(99, 102, 241, 0.2);--phox-facet-transition:0.2s ease;--phox-facet-title-size:0.8125rem;--phox-facet-title-weight:600;--phox-facet-title-spacing:0.04em;}
/* ─── Loading States ──────────────────────────────────────────── */

.phox-facets-loading{position:relative;pointer-events:none;opacity:0.6;transition:opacity var(--phox-facet-transition);}
.phox-facets-loader{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255, 255, 255, 0.7);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--phox-facet-transition), visibility var(--phox-facet-transition);z-index:100;}
.phox-facets-loader.active{opacity:1;visibility:visible;}
.phox-facets-spinner{width:40px;height:40px;border:3px solid var(--phox-facet-bg-soft);border-top:3px solid var(--phox-facet-accent);border-radius:50%;animation:phox-spin 0.8s linear infinite;}
@keyframes phox-spin {
    0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

/* ─── Base Facet Styles ───────────────────────────────────────── */

/* Card styling – margin is controlled by each element's Spacing design panel */
.phox-facet{padding:1.25em;max-width:100%;box-sizing:border-box;background:var(--phox-facet-bg);border:1px solid var(--phox-facet-border);border-radius:var(--phox-facet-radius);box-shadow:var(--phox-facet-shadow);transition:box-shadow var(--phox-facet-transition), border-color var(--phox-facet-transition);}
.phox-facet:hover{border-color:var(--phox-facet-border);box-shadow:var(--phox-facet-shadow-hover);}
.phox-facet__title{font-weight:var(--phox-facet-title-weight);margin-bottom:0.875em;font-size:var(--phox-facet-title-size);text-transform:uppercase;letter-spacing:var(--phox-facet-title-spacing);color:var(--phox-facet-text);padding-bottom:0.5em;border-bottom:1px solid var(--phox-facet-border);}
.phox-facet__list{list-style:none;padding:0;margin:0;}
.phox-facet__item{margin-bottom:0.5em;padding:0.35em 0;border-radius:var(--phox-facet-radius-sm);transition:background var(--phox-facet-transition);}
.phox-facet__item:hover{background:var(--phox-facet-bg-soft);}
.phox-facet__empty{color:var(--phox-facet-text-muted);font-style:italic;font-size:0.9em;}
/* ─── Checkbox Facet ──────────────────────────────────────────── */

.phox-facet-checkbox .phox-facet__item{display:flex;align-items:center;gap:0.5em;}
.phox-facet-checkbox input[type="checkbox"]{width:1.125rem;height:1.125rem;margin:0;cursor:pointer;accent-color:var(--phox-facet-accent);flex-shrink:0;}
.phox-facet-checkbox label{cursor:pointer;display:flex;align-items:center;gap:0.625em;flex:1;color:var(--phox-facet-text);font-size:0.9375rem;}
.phox-facet__count{color:var(--phox-facet-text-muted);font-size:0.8125rem;margin-left:auto;background:var(--phox-facet-bg-soft);padding:0.2em 0.5em;border-radius:4px;}
.phox-facet__count::before{content:"(";}
.phox-facet__count::after{content:")";}
/* Checkbox search filter */
.phox-facet__search{margin-bottom:0.875em;}
.phox-facet__search-input{width:100%;padding:0.5em 0.75em;border:1px solid var(--phox-facet-border);border-radius:var(--phox-facet-radius-sm);font-size:0.9em;background:var(--phox-facet-bg);transition:border-color var(--phox-facet-transition), box-shadow var(--phox-facet-transition);}
.phox-facet__search-input:focus{outline:none;border-color:var(--phox-facet-border-focus);box-shadow:var(--phox-facet-shadow-focus);}
/* ─── Collapsible Facets ─────────────────────────────────────── */

.phox-facet.is-collapsible > .phox-facet__title{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;}
.phox-facet.is-collapsible > .phox-facet__title::after{content:"";width:0.45em;height:0.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform 0.2s ease;flex-shrink:0;margin-left:0.5em;opacity:0.5;}
.phox-facet.is-collapsible.is-collapsed > .phox-facet__title::after{transform:rotate(-45deg);}
.phox-facet.is-collapsed > .phox-facet__list, .phox-facet.is-collapsed > .phox-facet__search{display:none;}
/* ─── Radio Facet ─────────────────────────────────────────────── */

.phox-facet-radio .phox-facet__item{display:flex;align-items:center;gap:0.5em;}
.phox-facet-radio input[type="radio"]{width:18px;height:18px;margin:0;cursor:pointer;accent-color:var(--phox-facet-accent);}
.phox-facet-radio label{cursor:pointer;display:flex;align-items:center;gap:0.5em;flex:1;}
/* ─── Dropdown Facet ──────────────────────────────────────────── */

.phox-facet-dropdown select, .phox-facet-sort select{width:100%;padding:0.625em 2.25em 0.625em 0.875em;font-size:0.9375rem;border:1px solid var(--phox-facet-border);border-radius:var(--phox-facet-radius-sm);background:var(--phox-facet-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.75em center;background-size:12px;appearance:none;cursor:pointer;color:var(--phox-facet-text);transition:border-color var(--phox-facet-transition), box-shadow var(--phox-facet-transition);}
.phox-facet-dropdown select:hover, .phox-facet-sort select:hover{border-color:var(--phox-facet-text-muted);}
.phox-facet-dropdown select:focus, .phox-facet-sort select:focus{outline:none;border-color:var(--phox-facet-border-focus);box-shadow:var(--phox-facet-shadow-focus);}
/* ─── Search Facet ────────────────────────────────────────────── */

.phox-facet-search{position:relative;}
.phox-facet-search__form{position:relative;display:flex;align-items:center;}
.phox-facet-search__input{width:100%;padding:0.625em 2.5em 0.625em 1em;font-size:0.9375rem;border:1px solid var(--phox-facet-border);border-radius:var(--phox-facet-radius-sm);background:var(--phox-facet-bg);color:var(--phox-facet-text);transition:border-color var(--phox-facet-transition), box-shadow var(--phox-facet-transition);}
.phox-facet-search__input::placeholder{color:var(--phox-facet-text-muted);}
.phox-facet-search__input:hover{border-color:var(--phox-facet-text-muted);}
.phox-facet-search__input:focus{outline:none;border-color:var(--phox-facet-border-focus);box-shadow:var(--phox-facet-shadow-focus);}
.phox-facet-search__icon{position:absolute;right:0.8em;top:50%;transform:translateY(-50%);color:#999;pointer-events:none;font-size:0.9em;}
.phox-facet-search__clear{position:absolute;right:0.8em;top:50%;transform:translateY(-50%);background:none;border:none;color:#999;cursor:pointer;font-size:1.2em;padding:0;line-height:1;transition:color var(--phox-facet-transition);}
.phox-facet-search__clear:hover{color:#333;}
/* ─── Range Slider Facet ──────────────────────────────────────── */

.phox-facet-range{padding:1em 1.25em;margin:0;}
.phox-facet-range__inputs{display:flex;align-items:center;gap:0.5em;}
.phox-facet-range__input{flex:1;padding:0.5em;border:1px solid var(--phox-facet-border);border-radius:var(--phox-facet-radius);text-align:center;font-size:0.9em;max-width:100px;}
.phox-facet-range__input:focus{outline:none;border-color:var(--phox-facet-accent);}
.phox-facet-range__separator{color:var(--phox-facet-text-muted);}
.phox-facet-range__prefix, .phox-facet-range__suffix{color:var(--phox-facet-text-muted);font-size:0.9em;white-space:nowrap;}
.phox-facet-range__slider{margin:1.5em 0 1em;position:relative;height:30px;}
.phox-facet-range__track{position:absolute;top:50%;left:0;right:0;height:6px;transform:translateY(-50%);background:#e5e5e5;border-radius:3px;pointer-events:none;}
.phox-facet-range__fill{position:absolute;top:0;bottom:0;background:var(--phox-facet-accent);border-radius:3px;}
/* Native dual range handles — stacked on top of each other (shifted up to align above track) */
.phox-facet-range__handle{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;outline:none;transform:translateY(-6px);}
/* Webkit thumb */
.phox-facet-range__handle::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--phox-facet-bg, #fff);border:2px solid var(--phox-facet-accent);cursor:pointer;pointer-events:auto;box-shadow:0 1px 3px rgba(0, 0, 0, 0.15);position:relative;z-index:1;}
.phox-facet-range__handle::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);}
/* Firefox thumb */
.phox-facet-range__handle::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--phox-facet-bg, #fff);border:2px solid var(--phox-facet-accent);cursor:pointer;pointer-events:auto;box-shadow:0 1px 3px rgba(0, 0, 0, 0.15);}
.phox-facet-range__handle::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);}
/* Firefox track — make transparent since we use our own */
.phox-facet-range__handle::-moz-range-track{background:transparent;border:none;height:6px;}
/* noUiSlider overrides (when loaded) */
.phox-facet-range .noUi-connect{background:var(--phox-facet-accent);}
.phox-facet-range .noUi-handle{border-color:var(--phox-facet-accent);}
/* ─── Pagination Facet ────────────────────────────────────────── */

/* Card comes from .phox-facet; here only layout */
.phox-facet-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
/* Hide entire card when pagination is hidden (e.g. only 1 page) */
.phox-facet-pagination--hidden{display:none !important;}
.phox-facet-pagination__numbers, .phox-facet-pagination__nav{display:flex;align-items:center;gap:0.5em;flex-wrap:wrap;}
.phox-facet-pagination__link{display:inline-flex;align-items:center;justify-content:center;min-width:2.5em;height:2.5em;padding:0 0.75em;border:1px solid var(--phox-facet-border);border-radius:var(--phox-facet-radius-sm);text-decoration:none;color:var(--phox-facet-text);font-size:0.875rem;font-weight:500;transition:all var(--phox-facet-transition);cursor:pointer;background:var(--phox-facet-bg);}
.phox-facet-pagination__link:hover:not(.is-active):not(.is-disabled){background:var(--phox-facet-bg-hover);border-color:var(--phox-facet-text-muted);color:var(--phox-facet-accent);}
.phox-facet-pagination__link.is-active{background:var(--phox-facet-accent);border-color:var(--phox-facet-accent);color:#fff;cursor:default;box-shadow:var(--phox-facet-shadow);}
.phox-facet-pagination__link.is-disabled{opacity:0.45;pointer-events:none;cursor:default;}
.phox-facet-pagination__ellipsis{padding:0 0.25em;color:#999;}
.phox-facet-pagination__load-more{display:inline-flex;align-items:center;justify-content:center;padding:0.75em 1.75em;border:1px solid var(--phox-facet-accent);border-radius:var(--phox-facet-radius-sm);background:var(--phox-facet-accent);color:#fff;font-size:0.9375rem;font-weight:500;cursor:pointer;transition:all var(--phox-facet-transition);}
.phox-facet-pagination__load-more:hover{background:var(--phox-facet-accent-hover);border-color:var(--phox-facet-accent-hover);box-shadow:var(--phox-facet-shadow-hover);}
/* ─── Reset Button ────────────────────────────────────────────── */

.phox-facet-reset{display:inline-flex;align-items:center;gap:0.5em;padding:0.5em 1em;background:var(--phox-facet-bg-soft);border:1px solid var(--phox-facet-border);border-radius:var(--phox-facet-radius-sm);font-size:0.875rem;font-weight:500;cursor:pointer;transition:all var(--phox-facet-transition);color:var(--phox-facet-text-muted);}
.phox-facet-reset:hover{background:var(--phox-facet-bg-hover);border-color:var(--phox-facet-text-muted);color:var(--phox-facet-text);}
.phox-facet-reset__icon{font-size:1.1em;opacity:0.8;}
.phox-facet-reset-wrapper.is-hidden{display:none;}
/* ─── Results Count ───────────────────────────────────────────── */
/* Uses same .phox-facet card as other facets; only typography differs */

.phox-facet-results{font-size:0.9375rem;color:var(--phox-facet-text-muted);}
.phox-facet-results__count{font-weight:600;color:var(--phox-facet-accent);}
/* ─── Active Filters ──────────────────────────────────────────── */

.phox-facet-active__list{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center;}
.phox-facet-active__item{display:inline-flex;align-items:center;gap:0.4em;padding:0.4em 0.75em;background:var(--phox-facet-bg-soft);border:1px solid var(--phox-facet-border);border-radius:var(--phox-facet-radius-sm);font-size:0.8125rem;color:var(--phox-facet-text);transition:background var(--phox-facet-transition), border-color var(--phox-facet-transition);}
.phox-facet-active__item:hover{background:var(--phox-facet-bg-hover);border-color:var(--phox-facet-text-muted);}
.phox-facet-active__label{white-space:nowrap;font-weight:500;color:var(--phox-facet-text-muted);}
.phox-facet-active__remove{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;background:var(--phox-facet-accent);border:none;border-radius:50%;color:#fff;font-size:0.75em;cursor:pointer;padding:0;line-height:1;transition:background var(--phox-facet-transition), transform var(--phox-facet-transition);}
.phox-facet-active__remove:hover{background:var(--phox-facet-accent-hover);transform:scale(1.08);}
.phox-facet-active__clear-all{background:var(--phox-facet-bg);border:1px solid var(--phox-facet-border);border-radius:var(--phox-facet-radius-sm);padding:0.4em 0.85em;font-size:0.8125rem;font-weight:500;cursor:pointer;color:var(--phox-facet-text-muted);transition:all var(--phox-facet-transition);}
.phox-facet-active__clear-all:hover{background:var(--phox-facet-bg-hover);border-color:var(--phox-facet-text-muted);color:var(--phox-facet-text);}
.phox-facet-active.is-hidden{display:none;}
/* ─── Responsive ──────────────────────────────────────────────── */

@media(max-width:768px){
    .phox-facet-pagination__numbers, .phox-facet-pagination__nav{gap:0.25em;}
   .phox-facet-pagination__link{min-width:2em;height:2em;padding:0 0.5em;font-size:0.85em;}
   .phox-facet-range__inputs{flex-direction:column;}
   .phox-facet-range__separator{display:none;}
   .phox-facet-range__input{max-width:none;}
}

/* ─── WooCommerce Integration ─────────────────────────────────── */

.breakdance-woocommerce .phox-facets-loading{min-height:200px;}
/* ─── Content Animation ───────────────────────────────────────── */

@keyframes phox-fade-in {
    from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

.phox-facets-target > *{animation:phox-fade-in 0.3s ease forwards;}
/* ─── Accessibility ───────────────────────────────────────────── */

.phox-facet input:focus-visible, .phox-facet select:focus-visible, .phox-facet button:focus-visible, .phox-facet a:focus-visible{outline:2px solid var(--phox-facet-border-focus);outline-offset:2px;}
/* Screen reader only */
.phox-facet-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;}[data-entrance]{visibility:hidden;backface-visibility:hidden;}
.is-animating[data-entrance],
.is-animated[data-entrance]{visibility:visible;}
.builder-element[data-entrance]{/* Don't hide the element in the builder, otherwise it becomes unselectable. */ visibility:visible;}