/* =========================================================
   WC Dimension Filter Widget – wcdf.css
   ========================================================= */

.wcdf-widget .wcdf-filter-form {
    padding: 4px 0;
}

/* --- Slider group ---------------------------------------- */
.wcdf-slider-group {
    margin-bottom: 20px;
}

.wcdf-slider-group label {
    display: block;
    font-weight: 400;
    font-size: 0.875rem;
    margin-bottom: 10px;
    color: #333;
}

/* --- Track ---------------------------------------------- */
.wcdf-track-wrap {
    padding: 0 8px;
}

.wcdf-track {
    position: relative;
    height: 4px;
    background: #ddd;
    border-radius: 4px;
    margin: 12px 0 8px;
}

/* Coloured bar between the two thumbs */
.wcdf-range-bar {
    position: absolute;
    top: 0;
    height: 100%;
    background: #75954D;   /* WP admin blue – override to match your theme */
    border-radius: 4px;
    pointer-events: none;
}

/* --- Thumbs --------------------------------------------- */
.wcdf-thumb {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 4px solid #75954D;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: box-shadow .15s, transform .1s;
    z-index: 2;
    touch-action: none;  /* needed for pointer events on mobile */
}

.wcdf-thumb:active,
.wcdf-thumb.wcdf-dragging {
    cursor: grabbing;
    box-shadow: 0 2px 8px rgba(34,113,177,.4);
    transform: translate(-50%, -50%) scale(1.15);
    z-index: 3;
}

.wcdf-thumb:focus-visible {
    outline: 2px solid #75954D;
    outline-offset: 2px;
}

/* --- Value display -------------------------------------- */
.wcdf-values {
    font-size: 0.8rem;
    color: #555;
    text-align: center;
    margin-top: 4px;
}

.wcdf-val-min,
.wcdf-val-max {
    font-weight: 600;
    color: #75954D;
}

/* --- Buttons -------------------------------------------- */
.wcdf-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.wcdf-apply {
    flex: 1;
    background: #75954D;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.wcdf-apply:hover {
    background: #135e96;
}

.wcdf-reset {
    font-size: 0.8rem;
    color: #888;
    text-decoration: none; 
    transition: color .2s;
}

.wcdf-reset:hover {
    color: #c00;
}

/* Active filter indicator on the track */
.wcdf-slider-group.wcdf-active .wcdf-track {
    background: #c3d9f0;
}