﻿@media (max-width: 767px) {
    .slider-user {
        display: none;
    }

    .select-user {
        display: block;
    }
}

@media (min-width: 768px) {
    .slider-user {
        display: block;
    }

    .select-user {
        display: none;
    }
}

.text-right {
    text-align: right;
    padding-top: 15px;
}

.disabled-user {
    color: red !important;
    cursor: not-allowed;
    text-decoration: line-through;
}

.disabled-btn {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Tooltip styling */
.disabled-user .tooltip {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 125%; /* Position the tooltip below the label */
    left: 50%;
    margin-left: -125px; /* Center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
    width: 250px; /* Tooltip width */
}

    /* Tooltip arrow */
    .disabled-user .tooltip::after {
        content: '';
        position: absolute;
        bottom: 100%; /* Position the arrow at the top of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #333 transparent;
    }

.disabled-user:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.btn-group-price {
    position: relative;
    display: flex;
    border-radius: 50px;
    overflow: hidden;
}

    .btn-group-price .tab-highlight {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(120deg, #f857a6 10%, #ef3f6e 100%);
        border-radius: 50px;
        z-index: 0;
        transition: transform 0.3s ease, width 0.3s ease;
    }

    .btn-group-price .btn {
        position: relative;
        z-index: 1;
        flex: 1;
        color: #000;
        background: none;
        transition: color 0.3s ease;
    }

.btn-check:checked + .btn {
    color: #fff;
}

.hot-sale {
    width: 55px;
    position: absolute;
    bottom: 1px;
    z-index: 1;
    right: 9px;
}