.cf7-range-selector-container {
    padding: 20px 10px 40px;
    max-width: 100%;
}

.cf7-range-slider {
    height: 4px;
    border: none;
    background: #e0e6e6;
    box-shadow: none;
}

/* Connect bar (the active part between handles) */
.cf7-range-slider .noUi-connect {
    background: #4a6363; /* Dark teal as requested */
}

/* Handles */
.cf7-range-slider .noUi-handle {
    width: 24px;
    height: 24px;
    right: -12px;
    top: -10px;
    border-radius: 50%;
    border: 3px solid #4a6363;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

/* Remove default noUiSlider markers on handles */
.cf7-range-slider .noUi-handle::before,
.cf7-range-slider .noUi-handle::after {
    display: none;
}

.cf7-range-slider .noUi-handle:hover {
    transform: scale(1.1);
}

/* Value labels container */
.cf7-range-values {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-family: inherit;
    font-weight: 600;
    color: #8fa0a0;
    font-size: 14px;
}

/* Adjust positions based on handle movement if needed, 
   but standard layout usually puts them at extremes or 
   we can position them absolutely relative to handles.
   For simplicity and robustness, we'll keep them styled 
   as labels below. */

.cf7-range-val-low, .cf7-range-val-high {
    position: relative;
}

/* Optional: match the exact positioning from image */
.cf7-range-selector-container {
    position: relative;
}

.cf7-range-values {
    position: relative;
    height: 20px;
}

.cf7-range-val-low {
    position: absolute;
    left: 0; 
    transform: translateX(-50%);
}

.cf7-range-val-high {
    position: absolute;
    left: 0;
    transform: translateX(-50%);
}