/* custom-range.css */
.customRangeBar > .dual-range,
.customRangeBar .dual-range,
.customRangeBar .ranges,
.customRangeBar .range-active,
.customRangeBar .bubble {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.customRangeBar {
    height: 34px !important;
    overflow: hidden;
}
 
    .customRangeBar ._track {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        height: 6px;
        border-radius: 12px;
        background: #dee2e6;
    }

    .customRangeBar > .dual-range {
        background: unset !important;
        border: none !important;
        box-shadow: unset !important;
    }

    .customRangeBar .ranges {
        height: 44px !important;
        min-height: 44px !important;
        overflow: hidden !important;
        position: relative;
        width: 100%;
    }

    .customRangeBar .range-active {
        background: linear-gradient(90deg, #4cb050, #3d8e41) !important;
    }

.dual-range {
    position: relative;
}

    .dual-range .ranges {
        position: relative;
        height: 44px;
        touch-action: none;
    }

    .dual-range input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        position: absolute;
        left: 0;
        top: 12px;
        background: transparent;
        margin: 0;
        height: 0;
        pointer-events: none;
    }

        .dual-range input[type="range"]::-webkit-slider-runnable-track {
            height: 8px;
            background: transparent;
            border: none;
        }

        .dual-range input[type="range"]::-moz-range-track {
            height: 8px;
            background: transparent;
            border: none;
        }

        .dual-range input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 3px solid #0d6efd;
            background: #fff;
            margin-top: -6px;
            box-shadow: 0 2px 6px rgba(13,110,253,0.18);
            cursor: grab;
            z-index: 3;
        }

        .dual-range input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 3px solid #0d6efd;
            background: #fff;
            box-shadow: 0 2px 6px rgba(13,110,253,0.18);
            cursor: grab;
            z-index: 3;
        }

    .dual-range ._track {
        position: absolute;
        left: 0;
        right: 0;
        top: 23px;
        height: 8px;
        border-radius: 10px;
        background: #e9ecef;
        z-index: 1;
    }

    .dual-range .range-active {
        position: absolute;
        top: 18px;
        height: 8px;
        border-radius: 10px;
        background: linear-gradient(90deg,#0d6efd,#6610f2);
        z-index: 2;
    }

    .dual-range .bubble {
        position: absolute;
        transform: translateX(-50%);
        color: #4cb050;
        font-weight: 600;
        font-size: 0.9rem;
        z-index: 4;
        pointer-events: none;
        white-space: nowrap;
    }

    .dual-range .labels {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        margin-top: .55rem;
    }

.grabbing::-webkit-slider-thumb {
    cursor: grabbing !important;
}

.grabbing::-moz-range-thumb {
    cursor: grabbing !important;
}

.customRangeBar .all-label {
    position: absolute;
    left: 50%;
    color: #4cb050;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: 0.8rem;
    z-index: 6;
    white-space: nowrap;
}

.customRangeBar .dual-range.all-state .bubble {
    width: 0;
    height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    position: relative;
    top: 10px;
}

    .customRangeBar .dual-range.all-state .bubble::after {
        content: "⟷";
        font-size: 1rem;
        color: #4cb050;
        position: absolute;
        left: -10px;
        transform: translate(-50%, -50%);
    }

/* Mobil (max 768px) */
@media (max-width: 768px) {
    .customRangeBar .dual-range.all-state .bubble::after {
        top: 0px; /* Mobil için */
    }
}

/* Masaüstü (min 769px) */
@media (min-width: 769px) {
    .customRangeBar .dual-range.all-state .bubble::after {
        top: 10px; /* Masaüstü için */
    }
}


.bubble.all-state {
    width: 0;
    height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    position: relative;
    top: 10px;
}

    .bubble.all-state::after {
        content: "⟷";
        font-size: 1rem;
        color: #4cb050;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.customRangeBar .dual-range.all-state .bubble {
    pointer-events: none;
    top: 0 !important;
}

.customRangeBar .dual-range.all-state .range-active {
    left: 0 !important;
    width: 100% !important;
}

@media (max-width: 420px) {
    .customRangeBar .all-label {
        font-size: 0.8rem;
        top: 0;
        padding: 1px 6px;
    }

    .customRangeBar .dual-range.all-state .bubble {
        width: 8px;
        height: 8px;
        border: 1px solid #fff;
    }
}

.customRangeBar .ranges,
.customRangeBar input[type=range] {
    pointer-events: auto !important;
    z-index: 1050 !important;
}

.custom-modal, .custom-modal-body {
    overscroll-behavior: contain;
}

.customRangeBar .ranges,
.customRangeBar .ranges * {
    touch-action: none !important;
    -ms-touch-action: none !important;
    pointer-events: auto !important;
}