.media-player {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-player .controls {
    display: flex;
    flex-direction: row;      /* was: column — controls are inline, not stacked */
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background-color: var(--sb-surface, #dee1e3);
    border: 1px solid var(--sb-border, #ccc);
    height: 40px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 20px;
}

.media-player .media-progress-bar {
    width: 30%;
}

.media-player .left-controls {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.media-player .timer {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.media-player .volume-contol-group {
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: 20px;
    display: flex;          /* was: display: contents — broke alignment */
    align-items: center;
    gap: 4px;
}

.media-player .volume-contol-group:hover {
    background: var(--sb-accent, #383868);
    opacity: 0.85;
}

.media-player .volume-control {
    flex: 0 0 auto;
}

/* Range inputs: no overflow, vertically centered */
.media-player input[type="range"] {
    margin-top: 0;          /* was: 15px — caused overflow out of the 40px bar */
    margin-right: 6px;
    display: inline-flex;
    height: 4px;
    outline: none;
    vertical-align: middle;
    cursor: pointer;
    accent-color: var(--sb-accent, #2196f3);  /* native track/thumb color in modern browsers */
}

.media-player video,
.media-player audio {
    width: 100%;
}

/* Hide default browser controls */
.media-player video::-webkit-media-controls {
    display: none;
}

.media-player audio::-webkit-media-controls-enclosure {
    display: none !important;
}

.is-media::-webkit-media-controls-enclosure {
    display: none !important;
}

/* Bootstrap-style progress bar for audio */
.media-player .progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: var(--sb-accent, #2196f3);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    transition: width .3s ease;
}

body.theme-dark .media-player .controls {
    background-color: var(--sb-surface, #1f2330);
    border-color: var(--sb-border, #2c3142);
    color: var(--sb-text, #ffffff);
}

body.theme-dark .media-player .timer {
    color: var(--sb-text, #ffffff);
}