/**
 * Custom Product Filters – Stylesheet v1.0.1
 *
 * Fixes vs v1.0.0:
 *  1. Unavailable terms: display:none (completely hidden, not greyed out).
 *  2. Mobile UI: <select multiple> replaces single <select>.
 *  3. Multi-select styled to show selection clearly.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES
───────────────────────────────────────────────────────────────────────────── */

:root {
    --cpf-primary:          #2563eb;
    --cpf-primary-hover:    #1d4ed8;
    --cpf-primary-light:    rgba( 37, 99, 235, 0.08 );
    --cpf-danger:           #dc2626;
    --cpf-danger-hover:     #b91c1c;
    --cpf-text:             #1f2937;
    --cpf-text-muted:       #6b7280;
    --cpf-bg:               #ffffff;
    --cpf-border:           #e5e7eb;
    --cpf-border-radius:    6px;
    --cpf-transition:       150ms ease;
    --cpf-font-size:        0.9375rem;
    --cpf-gap:              1rem;
    --cpf-cb-size:          1.1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE
───────────────────────────────────────────────────────────────────────────── */

.cpf-filter-wrapper {
    font-size:   var( --cpf-font-size );
    color:       var( --cpf-text );
    line-height: 1.5;
    box-sizing:  border-box;
}

.cpf-filter-wrapper *,
.cpf-filter-wrapper *::before,
.cpf-filter-wrapper *::after {
    box-sizing: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORM LAYOUT
   Mobile-first: stacked column.
   Desktop (>768px): horizontal row.
───────────────────────────────────────────────────────────────────────────── */

.cpf-filter-form {
    display:        flex;
    flex-direction: column;
    gap:            var( --cpf-gap );
    position:       relative;
}

@media ( min-width: 769px ) {
    .cpf-filter-form {
        flex-direction: row;
        flex-wrap:      wrap;
        align-items:    flex-start;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FACET GROUP
───────────────────────────────────────────────────────────────────────────── */

.cpf-facet {
    border:        1px solid var( --cpf-border );
    border-radius: var( --cpf-border-radius );
    padding:       1rem;
    background:    var( --cpf-bg );
}

@media ( min-width: 769px ) {
    .cpf-facet {
        flex:      1 1 200px;
        min-width: 0;
    }
}

.cpf-facet__heading {
    font-weight:   600;
    margin-bottom: 0.75rem;
    font-size:     1rem;
    color:         var( --cpf-text );
}

/* ─────────────────────────────────────────────────────────────────────────────
   DESKTOP: CHECKBOX LIST
   Shown above 768 px. Hidden on mobile.
───────────────────────────────────────────────────────────────────────────── */

.cpf-checkboxes {
    display:        none;     /* Hidden on mobile by default */
    list-style:     none;
    margin:         0;
    padding:        0;
    flex-direction: column;
    gap:            0.25rem;
}

@media ( min-width: 769px ) {
    .cpf-checkboxes {
        display: flex;   /* Visible on desktop */
    }
}

/* Individual list item */
.cpf-checkboxes__item {
    display: block;
}

/* JS sets display:none inline to hide unavailable terms.
   This rule makes sure nothing can accidentally override it. */
.cpf-checkboxes__item[style*="display: none"] {
    display: none !important;
}

/* Label row */
.cpf-checkboxes__label {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    padding:       0.35rem 0.4rem;
    cursor:        pointer;
    border-radius: calc( var( --cpf-border-radius ) - 2px );
    transition:    background var( --cpf-transition );
    user-select:   none;
    -webkit-user-select: none;
}

.cpf-checkboxes__label:hover {
    background: var( --cpf-primary-light );
}

/* Custom checkbox */
.cpf-cb {
    width:              var( --cpf-cb-size );
    height:             var( --cpf-cb-size );
    border:             2px solid var( --cpf-border );
    border-radius:      3px;
    appearance:         none;
    -webkit-appearance: none;
    background-color:   var( --cpf-bg );
    cursor:             pointer;
    flex-shrink:        0;
    position:           relative;
    transition:         background      var( --cpf-transition ),
                        border-color   var( --cpf-transition );
}

.cpf-cb:checked {
    background-color: var( --cpf-primary );
    border-color:     var( --cpf-primary );
}

/* Checkmark */
.cpf-cb:checked::after {
    content:     '';
    position:    absolute;
    top:         1px;
    left:        3px;
    width:       5px;
    height:      9px;
    border:      2px solid #fff;
    border-top:  none;
    border-left: none;
    transform:   rotate( 45deg );
}

.cpf-cb:focus-visible {
    outline:      none;
    box-shadow:   0 0 0 3px rgba( 37, 99, 235, 0.3 );
    border-color: var( --cpf-primary );
}

.cpf-checkboxes__name {
    flex:  1;
    color: var( --cpf-text );
}

.cpf-checkboxes__count {
    color:       var( --cpf-text-muted );
    font-size:   0.8125rem;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE: SELECT MULTIPLE
   Shown at 768 px and below. Hidden on desktop.
───────────────────────────────────────────────────────────────────────────── */

.cpf-select-wrap {
    display: block;   /* Visible on mobile by default */
}

@media ( min-width: 769px ) {
    .cpf-select-wrap {
        display: none;   /* Hidden on desktop */
    }
}

/* Helper text shown below the select ("Hold Ctrl / ⌘ to select multiple") */
.cpf-select-wrap::after {
    content:    attr( data-helper );
    display:    block;
    font-size:  0.75rem;
    color:      var( --cpf-text-muted );
    margin-top: 0.35rem;
    font-style: italic;
}

/* The <select multiple> element */
.cpf-select {
    width:              100%;
    min-height:         130px;   /* Show ~4 options at once */
    padding:            0.25rem;
    border:             1px solid var( --cpf-border );
    border-radius:      var( --cpf-border-radius );
    background-color:   var( --cpf-bg );
    color:              var( --cpf-text );
    font-size:          var( --cpf-font-size );
    appearance:         none;
    -webkit-appearance: none;
    cursor:             pointer;
    transition:         border-color var( --cpf-transition ),
                        box-shadow   var( --cpf-transition );
}

.cpf-select:focus {
    outline:      none;
    border-color: var( --cpf-primary );
    box-shadow:   0 0 0 3px rgba( 37, 99, 235, 0.2 );
}

/* Individual options inside <select multiple> */
.cpf-select option {
    padding:       0.45rem 0.6rem;
    border-radius: 3px;
    cursor:        pointer;
    color:         var( --cpf-text );
}

/* Selected option highlight */
.cpf-select option:checked {
    background: var( --cpf-primary );
    color:      #ffffff;
}

/* Hidden options are completely invisible.
   JS sets both option.hidden = true AND option.disabled = true. */
.cpf-select option[hidden],
.cpf-select option:disabled {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACTION BUTTONS
───────────────────────────────────────────────────────────────────────────── */

.cpf-actions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.5rem;
    align-items: center;
}

/* Full-width stacked buttons on mobile */
@media ( max-width: 768px ) {
    .cpf-actions {
        flex-direction: column;
    }

    .cpf-btn {
        width: 100%;
    }
}

/* Align buttons to the bottom of the flex row on desktop */
@media ( min-width: 769px ) {
    .cpf-actions {
        align-self: flex-end;
        flex:       0 0 auto;
    }
}

.cpf-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0.6rem 1.25rem;
    border:          none;
    border-radius:   var( --cpf-border-radius );
    font-size:       var( --cpf-font-size );
    font-weight:     600;
    cursor:          pointer;
    white-space:     nowrap;
    line-height:     1;
    transition:      background  var( --cpf-transition ),
                     opacity     var( --cpf-transition ),
                     transform   var( --cpf-transition );
}

.cpf-btn:active {
    transform: scale( 0.97 );
}

.cpf-btn:focus-visible {
    outline:        2px solid var( --cpf-primary );
    outline-offset: 2px;
}

/* Apply */
.cpf-btn--apply {
    background: var( --cpf-primary );
    color:      #ffffff;
}

.cpf-btn--apply:hover:not( :disabled ) {
    background: var( --cpf-primary-hover );
}

.cpf-btn--apply:disabled {
    opacity: 0.65;
    cursor:  not-allowed;
}

/* Reset */
.cpf-btn--reset {
    background: transparent;
    color:      var( --cpf-danger );
    border:     2px solid var( --cpf-danger );
}

.cpf-btn--reset:hover {
    background: var( --cpf-danger );
    color:      #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING OVERLAY
───────────────────────────────────────────────────────────────────────────── */

.cpf-loading {
    position:        absolute;
    inset:           0;
    background:      rgba( 255, 255, 255, 0.75 );
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   var( --cpf-border-radius );
    z-index:         10;
}

.cpf-loading[hidden] {
    display: none;
}

.cpf-spinner {
    display:          inline-block;
    font-size:        0;
    width:            1.75rem;
    height:           1.75rem;
    border:           3px solid var( --cpf-border );
    border-top-color: var( --cpf-primary );
    border-radius:    50%;
    animation:        cpf-spin 0.7s linear infinite;
}

@keyframes cpf-spin {
    to { transform: rotate( 360deg ); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MESSAGES
───────────────────────────────────────────────────────────────────────────── */

.cpf-no-results,
.cpf-error {
    padding:       1.25rem;
    border-radius: var( --cpf-border-radius );
    font-size:     var( --cpf-font-size );
    margin:        0;
}

.cpf-no-results {
    background: #f9fafb;
    color:      var( --cpf-text-muted );
    border:     1px solid var( --cpf-border );
    text-align: center;
}

.cpf-error {
    background: #fef2f2;
    color:      var( --cpf-danger );
    border:     1px solid #fecaca;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RTL SUPPORT (Arabic / dir="rtl")
───────────────────────────────────────────────────────────────────────────── */

/* Flip the checkmark direction */
[dir="rtl"] .cpf-cb:checked::after {
    left:  auto;
    right: 3px;
}

/* Reverse the action buttons order */
[dir="rtl"] .cpf-actions {
    flex-direction: row-reverse;
}

/* Keep vertical stacking on mobile even in RTL */
@media ( max-width: 768px ) {
    [dir="rtl"] .cpf-actions {
        flex-direction: column;
    }
}

/* Text alignment for messages */
[dir="rtl"] .cpf-no-results,
[dir="rtl"] .cpf-error {
    text-align: right;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY
───────────────────────────────────────────────────────────────────────────── */

@media ( prefers-contrast: high ) {
    .cpf-cb {
        border-color: ButtonText;
    }

    .cpf-cb:checked {
        background-color: Highlight;
        border-color:     Highlight;
    }
}

@media ( prefers-reduced-motion: reduce ) {
    .cpf-spinner {
        animation-duration: 1.5s;
    }

    .cpf-checkboxes__label,
    .cpf-btn,
    .cpf-select {
        transition: none;
    }
}

@media print {
    .cpf-filter-wrapper {
        display: none;
    }
}