/* REMOVE DEFAULT STYLES */
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 16px;
    background: transparent;
}

/* WEBKIT — Chrome, Safari, Edge ----------------*/
.slider::-webkit-slider-runnable-track {
    height: 16px;
    background: #5E5B60;
    /* Track color */
    border-radius: 999px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #9500cc;
    /* Thumb color */
    cursor: pointer;
    margin-top: -16px;
    border: 3px solid #121212;
    /* Center thumb on track */
}

/* Progress (before thumb) */
.slider::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
            #A9A5A8 0%,
            /* Progress color */
            #A9A5A8 calc(var(--value) * 1%),
            #5E5B60 calc(var(--value) * 1%),
            #5E5B60 100%);
}

/* Set --value using JS */
.slider {
    --value: 35;
}

/* FIREFOX ----------------*/
.slider::-moz-range-track {
    height: 16px;
    background: #5E5B60;
    border-radius: 999px;
}

.slider::-moz-range-progress {
    height: 16px;
    background: #4CAF50;
    /* Progress color */
    border-radius: 999px;
}

.slider::-moz-range-thumb {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #4CAF50;
    /* Thumb color */
    cursor: pointer;
}

/* Owl carousel */
/* .owl-nav button {
    background-color: rgba(255, 255, 255, 0.1) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid #575757;
}

.owl-carousel {
    position: relative;
}

.owl-prev {
    position: absolute;
    left: -24px;
    top: 40%;
} */

.owl-item {
    margin-left: 5px !important;
    padding-right: 2px !important;
    height: 100% !important;
    padding-top: 2px !important;
}

/* Bubble that sits above the thumb */
.player-bubble {
    position: absolute;
    top: -48px;
    /* distance above the slider */
    left: 50%;
    transform: translateX(-50%);
    /* your purple color (cyb-purple) */
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

/* Little triangle pointer */
.player-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
}

/* Show it when the slider is interacted with */
.players-range:focus~.player-bubble,
.players-range:active~.player-bubble,
.range-wrapper:hover .player-bubble {
    opacity: 1;
}

/* .recommended-plan .package {
    border: 2px solid #fff !important;
} */

#package-selector .recommended-plan .package {
    position: relative;
    background: #121212;
    border-radius: 30px;
    border-color: #9500cc !important
}

#package-selector .recommended-plan .package:before,
#package-selector .recommended-plan .package:after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #9500cc, #9500cc, #fff, #9500cc, #9500cc, #fff,
            #9500cc, #9500cc, #fff, #9500cc);
    background-size: 400%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    animation: steam 20s linear infinite;
    border-radius: 30px;
    border: 0;
}

.owl-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mobile-package-item {
    padding-top: 2px;
}

.owl-nav button {
    border: 1px solid #575757 !important;
    border-radius: 50% !important;
    height: 36px !important;
    width: 36px !important;
    color: #fff !important;
    background-color: #121212 !important;
    transition: 0.3s;
}

.owl-nav button:hover {
    background-color: #6e0594 !important;
}

.owl-nav {
    right: 24px !important;
    top: 14px !important;
}

.owl-prev span {
    font-size: 24px;
    line-height: 0px;
}

.owl-next span {
    font-size: 24px;
    line-height: 0px;
}

@keyframes steam {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}


/* Always show on touch devices */
@media (pointer: coarse) {
    .player-bubble {
        opacity: 1;
    }
}

@media (max-width: 639px) {

    /* REMOVE DEFAULT STYLES */
    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 8px;
        background: transparent;
    }

    /* WEBKIT — Chrome, Safari, Edge ----------------*/
    .slider::-webkit-slider-runnable-track {
        height: 8px;
        background: #5E5B60;
        /* Track color */
        border-radius: 999px;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #9500cc;
        /* Thumb color */
        cursor: pointer;
        margin-top: -14px;
        border: 3px solid #121212;
        /* Center thumb on track */
    }

    /* Progress (before thumb) */
    .slider::-webkit-slider-runnable-track {
        background: linear-gradient(to right,
                #A9A5A8 0%,
                /* Progress color */
                #A9A5A8 calc(var(--value) * 1%),
                #5E5B60 calc(var(--value) * 1%),
                #5E5B60 100%);
    }

    /* Set --value using JS */
    .slider {
        --value: 35;
    }

    /* FIREFOX ----------------*/
    .slider::-moz-range-track {
        height: 8px;
        background: #5E5B60;
        border-radius: 999px;
    }

    .slider::-moz-range-progress {
        height: 8px;
        background: #4CAF50;
        /* Progress color */
        border-radius: 999px;
    }

    .slider::-moz-range-thumb {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: #4CAF50;
        /* Thumb color */
        cursor: pointer;
    }

    .recommended-plan .package {
        position: relative;
        background: #121212;
        border-radius: 30px;
        border-color: #9500cc !important
    }

    .recommended-plan .package:before,
    .recommended-plan .package:after {
        content: '';
        position: absolute;
        left: -3px;
        top: -3px;
        background: linear-gradient(45deg, #9500cc, #9500cc, #fff, #9500cc, #9500cc, #fff,
                #9500cc, #9500cc, #fff, #9500cc);
        background-size: 400%;
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        z-index: -1;
        animation: steam 20s linear infinite;
        border-radius: 30px;
        border: 0;
    }
}

.owl-stage {
    padding-left: 1px !important;
}

.mod-button.active {
    background-color: #9500cc;
    /* Highlighted background */
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.section--mods button.selected {
    background-color: #6C5CE7 !important;
    border-color: #6C5CE7 !important;
}

/* --- 1. TOOL TRANSITIONS (Pop-in effect) --- */
#package-selector {
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    pointer-events: none;
}

#package-selector.selector-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* --- 2. PLANS TRANSITIONS (Fade-out effect) --- */
#pricingPackages {
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform-origin: top center;
    opacity: 1;
    /* Default visible */
}

/* State: Fading Out / Hidden */
#pricingPackages.plans-fading {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
}

#pricingPackages.plans-hidden {
    display: none;
}

/* --- 3. MOBILE OVERRIDE --- */
/* Ensure plans NEVER hide on mobile */
@media (max-width: 768px) {

    #pricingPackages.plans-hidden,
    #pricingPackages.plans-fading {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}