/* Basic layout for the custom audio player */
.sir-audio-player {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;            /* pill */
    background: #f5f7ff;              /* light card-ish background */
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
    font-size: 14px;
}

/* Play / pause button */
.sir-audio-play {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: none;
    background: #7C93FE;              /* same family as your brand purple/blue */
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.sir-audio-play:hover {
    background: #657af0;
    transform: translateY(-1px);
    box-shadow: 0 6px 10px rgba(37, 99, 235, 0.25);
}

.sir-audio-play:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Progress slider */
.sir-audio-progress {
    -webkit-appearance: none;
    appearance: none;
    width: 160px;
    height: 6px;
    border-radius: 9999px;
    background: #e0e7ff;
    cursor: pointer;
}

/* WebKit thumb */
.sir-audio-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #7C93FE;
    box-shadow: 0 0 0 3px #eef2ff;
    cursor: pointer;
}

/* Firefox thumb */
.sir-audio-progress::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #7C93FE;
    box-shadow: 0 0 0 3px #eef2ff;
    cursor: pointer;
}

/* Firefox track */
.sir-audio-progress::-moz-range-track {
    height: 6px;
    border-radius: 9999px;
    background: #e0e7ff;
}

/* Time label */
.sir-audio-time {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
}