@import url('https://fonts.googleapis.com/css?family=Roboto&subset=latin-ext');

/*WMPlayer default template*/
.wmplayer.default {
    background-color: #fff;
    box-shadow: 0 1px  10px -1px #636363;
    position:relative;
}

.wmplayer.default  * {
    box-sizing: border-box !important;
}

/*control panel*/
.wmplayer.default .wmp-panel {
    padding: 15px; position: relative;
}

/*control panel current track data*/
.wmplayer.default .wmp-current-track {
    margin: 0 100px;
    font-family: 'Roboto', sans-serif;
    font-size:13px;
    font-weight: normal;
    color: rgba(0,0,0,0.87);
    line-height:20px;

}

.wmplayer.default .wmp-current-track:after {
    content: '';
    display: table;
    clear: both;
}

.wmplayer.default .wmp-current-track-title {
    float: left;
    width: 80%;
    width: calc(100% - 90px);
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*control panel timer*/
.wmplayer.default .wmp-timer {
    float: left;
    width: 90px;
    text-align: right;
}

.wmplayer.default .wmp-timer .wmp-current-track-time:after {
    content: '/';
    display: inline;
}

/*control panel buttons*/
.wmplayer.default .wmp-button {
    cursor: pointer;
    fill:#7f7f7f;
    stroke:#7f7f7f;
    stroke-linecap: round;
    stroke-width: 2;
    stroke-linejoin: round;
}

.wmplayer.default .wmp-button svg {
    display: block;
}

.wmplayer.default .wmp-button path {
    stroke:#7f7f7f;
    stroke-width: 1;
}

.wmplayer.default .wmp-button:hover, .wmp-button:focus {
    fill: #304ffe;
    stroke: #304ffe;
}
.wmplayer.default .wmp-button:hover path,
.wmp-button:focus path {
    stroke: #304ffe;
}

.wmplayer.default .wmp-controls {
    display: inline-block;
    padding: 1px 0;
    position: absolute;
    top: 15px;
    left: 15px;
}

.wmplayer.default .wmp-controls:after {
    content: '';
    display: table;
    clear: both;
}

.wmplayer.default .wmp-controls .wmp-button {
    float: left;
}

.wmplayer.default .wmp-controls .wmp-button:not(:last-child) {
    margin-right: 8px;
}

.wmplayer.default .wmp-play .wmp-symbol-pause {
    display: none;
}

.wmplayer.default.playing .wmp-play .wmp-symbol-play {
    display: none;
}

.wmplayer.default.playing .wmp-play .wmp-symbol-pause {
    display: block;
}

/*volume bar*/
.wmplayer.default .wmp-volume-bar-container {
    display: inline-block;
    width: 75px;
    height: 20px;
    margin-left: 20px;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
}

.wmplayer.default .wmp-volume-bar-container:before {
    content: '';
    display: block;
    height: 2px;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0, -50%);
}

.wmplayer.default .wmp-volume-bar {
    width: 50%;
    height: 2px;
    background-color:#304ffe;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

.wmplayer.default .wmp-volume-bar:after {
    content:'';
    display: block;
    width:14px;
    height:14px;
    border-radius: 50%;
    background-color: #304ffe;
    position: absolute;
    top:50%;
    right:0;
    transform: translate(50%, -50%);
}

.wmplayer.default .wmp-volume-bar-container .wmp-button {
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translate(0, -50%);
}

.wmplayer.default.muted .wmp-mute .wmp-symbol-muted {
    display: none;
}

/*progress bar*/
.wmplayer.default .wmp-progress-bar-container {
    height: 20px;
    margin: 10px 0 0;
    position: relative;
    cursor: pointer;
}

.wmplayer.default .wmp-progress-bar-container:before {
    content: '';
    display: block;
    height: 2px;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0, -50%);
}

.wmplayer.default .wmp-progress-bar {
    width: 50%;
    height: 2px;
    background-color:#304ffe;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

.wmplayer.default .wmp-progress-bar:after {
    content:'';
    display: block;
    width:14px;
    height:14px;
    border-radius: 50%;
    background-color: #304ffe;
    position: absolute;
    top:50%;
    right:0;
    transform: translate(50%, -50%);
}

/*playlist*/
.wmplayer.default .wmp-playlist {
    display: table;
    width: 100%;
    table-layout:fixed;
    border-collapse:collapse;
    border-spacing:0;
}

.wmplayer.default .wmp-playlist > div {
    display: table-row;
    cursor: pointer;
    border-top: 1px solid rgba(0,0,0,0.12);
}

.wmplayer.default .wmp-playlist > div:hover, div.wmp-playlist > div:focus {
    background-color:#f5f5f5;
}

.wmplayer.default .wmp-playlist > div.wmp-current {
    background-color:#f5f5f5;
}

.wmplayer.default .wmp-playlist > div > span {
    display: table-cell;
    font-family: 'Roboto', sans-serif;
    font-size:13px;
    vertical-align: middle;
    color: rgba(0,0,0,0.87);
    padding: 10px 9px;
}

.wmplayer.default .wmp-playlist > div > span:first-child {
    width: 50px;
    padding-left: 15px;
    text-align:right;
}

.wmplayer.default .wmp-playlist > div > span:nth-child(2) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wmplayer.default .wmp-playlist > div > span:last-child {
    width: 64px;
    padding-right: 15px;
    text-align:right;
}

.wmplayer.default .wmp-playlist > div.wmp-error > span {
    color: rgba(255,0,0,0.87);
}

/*footer*/
.wmplayer.default .wmp-footer {
    padding: 5px 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #7f7f7f;
    border-top: 1px solid rgba(0,0,0,0.12);
}

.wmplayer.default .wmp-footer a {
    color: rgba(0,0,0,0.87);
    text-decoration: none;
}

.wmplayer.default .wmp-footer a:hover,
.wmplayer.default .wmp-footer a:focus {
    color: #304ffe;
}

/*dark theme*/
.wmplayer.default.dark {
    background-color: rgba(0,0,0,0.87);
}

.wmplayer.default.dark .wmp-current-track {
    color: #f5f5f5;
}

.wmplayer.default.dark .wmp-button {
    fill: #f5f5f5;
    stroke:#f5f5f5;
}

.wmplayer.default.dark .wmp-button path {
    stroke: #f5f5f5;
}

.wmplayer.default.dark .wmp-button:hover,
.wmp-button:focus {
    fill: #f5f5f5;
    stroke: #f5f5f5;
}

.wmplayer.default.dark .wmp-button:hover path,
.wmp-button:focus path {
    stroke: #f5f5f5;
}

.wmplayer.default.dark .wmp-volume-bar-container:before {
    background-color: rgba(255,255,255,0.13);
}

.wmplayer.default.dark .wmp-volume-bar {
    background-color: #f5f5f5;
}

.wmplayer.default.dark .wmp-volume-bar:after {
    background-color: #f5f5f5;
}

.wmplayer.default.dark .wmp-progress-bar-container:before {
    background-color: rgba(255,255,255,0.13);
}

.wmplayer.default.dark .wmp-progress-bar {
    background-color: #f5f5f5;
}

.wmplayer.default.dark .wmp-progress-bar:after {
    background-color: #f5f5f5;
}

.wmplayer.default.dark .wmp-playlist > div {
    border-top-color: rgba(255,255,255,0.13);
}

.wmplayer.default.dark .wmp-playlist > div > span {
    color: #f5f5f5;
}

.wmplayer.default.dark .wmp-playlist > div:hover,
div.wmp-playlist > div:focus {
    background-color: rgba(255,255,255,0.13);
}

.wmplayer.default.dark .wmp-playlist > div.wmp-current {
    background-color: rgba(255,255,255,0.13);
}

.wmplayer.default.dark .wmp-playlist > div.wmp-error > span {
    color: rgba(255,0,0,0.87);
}

.wmplayer.default.dark .wmp-footer {
    border-top-color: rgba(255,255,255,0.13);
}

.wmplayer.default.dark .wmp-footer a {
    color: #7f7f7f;
    text-decoration: none;
}

.wmplayer.default.dark .wmp-footer a:hover,
.wmplayer.default.dark .wmp-footer a:focus {
    color: #fff;
}

@media only screen and (max-width: 480px) {
    .wmplayer.default .wmp-current-track {
        margin: 0 0 10px;
    }

    .wmplayer.default .wmp-controls {
        position: static;
    }

    .wmplayer.default .wmp-volume-bar-container {
        float: right;
        position: relative;
        top: auto;
        right: auto;
    }
}


/* ===== WMPlayer.css (added cover styles) ===== */

/* Album cover next to controls */
.wmp-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wmp-cover {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 4px;
  overflow: hidden;
  background: #222;
  display: inline-block;
}

.wmp-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* If player layout uses stacked controls, ensure cover stays aligned */
@media (max-width: 480px) {
  .wmp-cover { width: 48px; height: 48px; flex: 0 0 48px; }
}