.roofing-comparison-slider-wrap {
    position: relative;
}

.roofing-comparison-slider-hint {
    display: none;
}

.roofing-comparison-slider-controls {
    display: none;
}

.roofing-comparison-slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.roofing-comparison-slider-dot {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 999px;
    background-color: #c8d0d8;
    padding: 0;
}

.roofing-comparison-slider-dot.is-active {
    width: 22px;
    background-color: #2A8347;
}

@media (max-width: 767.98px) {
    .roofing-comparison-slider-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        font-size: 12px;
        font-weight: 600;
        color: #5f6d7a;
    }

    .roofing-comparison-slider {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        margin: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: auto;
        overscroll-behavior-x: contain;
    }

    .roofing-comparison-slider::-webkit-scrollbar {
        display: none;
    }

    .roofing-comparison-slide {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 3px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .roofing-comparison-slide > .card {
        border: 2px solid #d6e4db !important;
        box-shadow: 0 8px 24px rgba(18, 39, 24, 0.08);
    }

    .roofing-comparison-slider-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 12px;
    }

    .roofing-comparison-slider-controls .btn {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
}