/* =====================================================================
 * DP Filters — Sidebar filter bar styles
 * Desktop sidebar width ~300px, Salient Material skin coherence
 * ===================================================================== */

.dp-filters {
    padding: 0 0 20px;
}

/* --- Filter group --- */
.dp-filter-group {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dp-filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.dp-filter-group__title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: color 0.15s ease;
}

.dp-filter-group__title:hover {
    color: #d39f47;
}

/* --- Toggle button (chevron) --- */
.dp-filter-group__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: color 0.15s ease;
}

.dp-filter-group__toggle:hover {
    color: #d39f47;
}

.dp-filter-group__toggle svg {
    transition: transform 0.3s ease;
}

.dp-filter-group[data-collapsed="true"] .dp-filter-group__toggle svg {
    transform: rotate(-90deg);
}

/* --- Collapsible content wrapper --- */
.dp-filter-group__content {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}

.dp-filter-group[data-collapsed="true"] .dp-filter-group__content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

/* Notes special case: scrollable checkbox list when expanded (desktop) */
.dp-filter-group[data-dimension="notes"]:not([data-collapsed="true"]) .dp-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
}

/* --- Pill buttons --- */
.dp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.4;
    font-family: inherit;
}

.dp-pill:hover {
    border-color: #212121;
    color: #212121;
}

.dp-pill.active {
    background: #212121;
    border-color: #212121;
    color: #fff;
}

/* --- Select dropdown --- */
.dp-select {
    display: block;
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 10px 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 13px;
    color: #333;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.dp-select:hover,
.dp-select:focus {
    border-color: #212121;
    outline: none;
}

/* --- Checkbox list --- */
.dp-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Custom scrollbar for checkbox list */
.dp-checkbox-list::-webkit-scrollbar {
    width: 4px;
}

.dp-checkbox-list::-webkit-scrollbar-track {
    background: transparent;
}

.dp-checkbox-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.dp-checkbox-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    gap: 6px;
    transition: color 0.15s ease;
}

.dp-checkbox-item:hover {
    color: #212121;
}

.dp-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #212121;
    cursor: pointer;
    margin: 0;
}

.dp-checkbox-label {
    flex: 1;
    line-height: 1.3;
}

.dp-checkbox-count {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
}

/* --- Price inputs --- */
.dp-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dp-price-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #333;
    text-align: center;
    -moz-appearance: textfield;
    transition: border-color 0.15s ease;
}

.dp-price-input::-webkit-outer-spin-button,
.dp-price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dp-price-input:hover,
.dp-price-input:focus {
    border-color: #212121;
    outline: none;
}

.dp-price-separator {
    font-size: 14px;
    color: #999;
    flex-shrink: 0;
}

.dp-price-currency {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    flex-shrink: 0;
}

.dp-price-range-label {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
}

/* --- Active filter chips area --- */
.dp-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dp-active-filters:empty {
    display: none;
}

.dp-active-filters .dp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 14px;
    font-size: 12px;
    color: #333;
    line-height: 1.3;
}

.dp-active-filters .dp-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: none;
    color: #999;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.dp-active-filters .dp-chip__remove:hover {
    color: #212121;
}

/* --- Clear all button --- */
.dp-clear-all {
    display: block;
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.dp-clear-all:hover {
    border-color: #212121;
    color: #212121;
}

/* --- Result count --- */
.dp-result-count {
    font-size: 12px;
    color: #999;
    margin-bottom: 16px;
}

.dp-result-count:empty {
    display: none;
}

/* =====================================================================
 * Loading overlay & spinner (T03)
 * ===================================================================== */
.dp-loading-overlay {
    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;
    z-index: 10;
    pointer-events: none;
}

.dp-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #212121;
    border-radius: 50%;
    animation: dp-spin 0.7s linear infinite;
}

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

/* --- No results message --- */
.dp-no-results {
    list-style: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 15px;
}

/* =====================================================================
 * Mobile filter overlay (T04)
 * Custom overlay replaces Salient's broken mobile sidebar toggle.
 * Triggered via body.dp-filters-open class.
 * ===================================================================== */

/* --- Mobile filter trigger button (visible only on mobile) --- */
.dp-mobile-filter-btn {
    display: none; /* Hidden on desktop */
}

/* --- Backdrop overlay --- */
.dp-overlay-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.dp-filters-open .dp-overlay-backdrop {
    display: block;
    opacity: 1;
}

/* --- Mobile overlay header --- */
.dp-mobile-overlay-header {
    display: none;
}

/* --- Appliquer button (mobile only) --- */
.dp-mobile-apply-btn {
    display: none;
}

/* --- Active filters above grid on mobile --- */
.dp-mobile-active-filters {
    display: none;
}

/* =====================================================================
 * Responsive — Mobile (≤999px, matches Salient's mobile breakpoint)
 * ===================================================================== */
@media only screen and (max-width: 999px) {

    /* --- Show our mobile filter button --- */
    .dp-mobile-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        color: #333;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        font-family: inherit;
        margin-bottom: 16px;
    }

    .dp-mobile-filter-btn svg {
        width: 18px;
        height: 18px;
    }

    .dp-mobile-filter-btn .dp-filter-count-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: #212121;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
    }

    .dp-mobile-filter-btn .dp-filter-count-badge:empty {
        display: none;
    }

    /* --- Mobile active filter chips above grid --- */
    .dp-mobile-active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 12px;
    }

    .dp-mobile-active-filters:empty {
        display: none;
    }

    .dp-mobile-active-filters .dp-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        background: #f0f0f0;
        border: 1px solid #ddd;
        border-radius: 14px;
        font-size: 12px;
        color: #333;
        line-height: 1.3;
    }

    .dp-mobile-active-filters .dp-chip__remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border: none;
        background: none;
        color: #999;
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
    }

    .dp-mobile-active-filters .dp-chip__remove:hover {
        color: #212121;
    }

    .dp-mobile-active-filters .dp-mobile-clear-all {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        background: none;
        border: 1px solid #999;
        border-radius: 14px;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        font-family: inherit;
    }

    .dp-mobile-active-filters .dp-mobile-clear-all:hover {
        border-color: #212121;
        color: #212121;
    }

    /* --- Sidebar as slide-up overlay ---
     * Overrides Salient's mobile sidebar rules which use:
     * opacity:0!important, left:-9999px, pointer-events:none, position:fixed
     * We keep the fixed positioning but reposition as bottom sheet.
     */
    #sidebar,
    .archive.woocommerce .container-wrap > .main-content #sidebar,
    .woocommerce .container-wrap > .main-content #sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        height: 85vh !important;
        max-height: 85vh !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        z-index: 99999 !important;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        display: block !important;
        flex-wrap: unset !important;
        justify-content: unset !important;
        align-items: unset !important;
    }

    body.dp-filters-open #sidebar,
    body.dp-filters-open.archive.woocommerce .container-wrap > .main-content #sidebar {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: all !important;
        left: 0 !important;
    }

    /* Override Salient's mobile sidebar hiding */
    #sidebar > .inner {
        transform: none !important;
        padding: 0 20px 100px !important;
    }

    /* --- Mobile overlay header (sticky at top) --- */
    .dp-mobile-overlay-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
        border-radius: 16px 16px 0 0;
    }

    .dp-mobile-overlay-header .dp-overlay-title {
        font-size: 16px;
        font-weight: 600;
        color: #212121;
    }

    .dp-mobile-overlay-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: none;
        color: #666;
        font-size: 24px;
        cursor: pointer;
        padding: 0;
        border-radius: 50%;
        transition: background 0.15s ease;
    }

    .dp-mobile-overlay-close:hover {
        background: #f0f0f0;
    }

    /* --- Appliquer button (sticky at bottom) --- */
    .dp-mobile-apply-btn {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100000;
        padding: 12px 20px;
        background: #fff;
        border-top: 1px solid #eee;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body.dp-filters-open .dp-mobile-apply-btn {
        transform: translateY(0);
    }

    .dp-mobile-apply-btn button {
        display: block;
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: 8px;
        background: #212121;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        letter-spacing: 0.02em;
    }

    .dp-mobile-apply-btn button:active {
        background: #000;
    }

    /* --- Filter groups: vertical stacking, full width --- */
    .dp-filters {
        padding: 16px 0 0;
    }

    .dp-filter-group {
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    /* --- Pill buttons: wrap, larger touch targets --- */
    .dp-pills {
        gap: 8px;
    }

    .dp-pill {
        padding: 10px 16px;
        font-size: 14px;
        min-height: 44px;
    }

    /* --- Marques dropdown: full width, taller --- */
    .dp-select {
        padding: 12px 36px 12px 14px;
        font-size: 14px;
        min-height: 44px;
    }

    /* --- Notes checkboxes: larger touch targets --- */
    .dp-checkbox-list {
        max-height: none;
        overflow-y: visible;
    }

    .dp-checkbox-item {
        padding: 8px 0;
        min-height: 44px;
        font-size: 14px;
        gap: 10px;
    }

    .dp-checkbox-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    /* --- Price inputs: side by side, taller --- */
    .dp-price-inputs {
        gap: 10px;
    }

    .dp-price-input {
        padding: 12px;
        font-size: 14px;
        min-height: 44px;
    }

    /* --- Hide Salient's filter trigger, close button, and sidebar header
           on mobile (we use our own overlay controls) --- */
    .nectar-shop-filter-trigger {
        display: none !important;
    }

    #sidebar .nectar-close-btn-wrap {
        display: none !important;
    }

    #sidebar .header {
        display: none !important;
    }

    /* --- Hide sidebar active-filters/clear/count on mobile
           (duplicated above grid) --- */
    #sidebar .dp-active-filters,
    #sidebar .dp-clear-all,
    #sidebar .dp-result-count {
        display: none;
    }

    /* --- Prevent body scroll when overlay open --- */
    body.dp-filters-open {
        overflow: hidden;
    }
}