/* /Components/Shared/ParticipantCountSlider.razor.rz.scp.css */
/* ===== Track (webkit) - gray with rounded ends ===== */
[b-aacjvsxz3d] .participant-slider .mud-slider-input::-webkit-slider-runnable-track {
    background-color: rgba(120, 120, 120, 0.18) !important;
    border-radius: 3px !important;
    height: 6px !important;
    margin: 12px 0;
}

/* ===== Track (Firefox) ===== */
[b-aacjvsxz3d] .participant-slider .mud-slider-input::-moz-range-track {
    background-color: rgba(120, 120, 120, 0.18) !important;
    border-radius: 3px !important;
    height: 6px !important;
    margin: 12px 0;
}

/* ===== Filled portion of track ===== */
[b-aacjvsxz3d] .participant-slider .mud-slider-filled {
    border-radius: 3px !important;
    height: 6px !important;
    background-color: transparent !important;
}

/* ===== Thumb (webkit) - white pill shape with shadow ===== */
[b-aacjvsxz3d] .participant-slider .mud-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 38px !important;
    height: 24px !important;
    border-radius: 12px !important;
    background: white !important;
    box-shadow: 0 6px 13px rgba(0, 0, 0, 0.12), 0 0.5px 4px rgba(0, 0, 0, 0.12) !important;
    border: none !important;
    transform: none !important;
    margin-top: -9px;
    cursor: pointer;
}

/* ===== Thumb (Firefox) ===== */
[b-aacjvsxz3d] .participant-slider .mud-slider-input::-moz-range-thumb {
    width: 38px !important;
    height: 24px !important;
    border-radius: 12px !important;
    background: white !important;
    box-shadow: 0 6px 13px rgba(0, 0, 0, 0.12), 0 0.5px 4px rgba(0, 0, 0, 0.12) !important;
    border: none !important;
    transform: none !important;
    cursor: pointer;
}

/* ===== Thumb hover (webkit) ===== */
[b-aacjvsxz3d] .participant-slider .mud-slider-input::-webkit-slider-thumb:hover {
    box-shadow: 0 6px 13px rgba(0, 0, 0, 0.18), 0 0.5px 4px rgba(0, 0, 0, 0.18) !important;
}

/* ===== Thumb hover (Firefox) ===== */
[b-aacjvsxz3d] .participant-slider .mud-slider-input::-moz-range-thumb:hover {
    box-shadow: 0 6px 13px rgba(0, 0, 0, 0.18), 0 0.5px 4px rgba(0, 0, 0, 0.18) !important;
}

/* ===== Tick marks - subtle gray dots ===== */
[b-aacjvsxz3d] .participant-slider .mud-slider-track-tick {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background-color: rgba(60, 60, 67, 0.18) !important;
}