/* =========== © 2026 Centroarts - https://m1r.ru =========== */

:root {
  --player-rd: var(--rd-box);
  --player-bg: var(--c-body-light);
  --player-sw: inset 0 1px 8px 0 hsl(var(--player-bg)), 0 2px 4px 0 rgba(0, 0, 0, 0.07), 0 4px 20px 0 rgba(0, 0, 0, 0.07);

  --player-track-base-gradient: linear-gradient(0deg, hsla(var(--c-text), 0.05) 0%, hsla(var(--c-text), 0) 100%);
  --player-track-base-sw: inset 0 -2px 0 0 hsla(var(--c-text), 0.05);

  --player-track-current-gradient: linear-gradient(0deg, hsla(var(--c-primary), 0.5) 0%, hsla(var(--c-primary), 0.1) 100%);
  --player-track-current-sw: inset 0 -2px 0 0 hsl(var(--c-primary));

  --player-track-load-gradient: linear-gradient(0deg, hsla(var(--c-text), 0.05) 0%, hsla(var(--c-text), 0) 100%);
  --player-track-load-sw: inset 0 -2px 0 0 hsla(var(--c-text), 0.05);
}

.im-timer { --i-img: url(../icons/pl-timer.svg); }
.im-download { --i-img: url(../icons/pl-download.svg); }
.im-speed1 { --i-img: url(../icons/pl-speed-x1.svg); }
.im-speed15 { --i-img: url(../icons/pl-speed-x15.svg); }
.im-speed2 { --i-img: url(../icons/pl-speed-x2.svg); }
.im-mute { --i-img: url(../icons/pl-mute.svg); }
.im-volume { --i-img: url(../icons/pl-volume.svg); }
.im-backward { --i-img: url(../icons/pl-backward.svg); }
.im-forward { --i-img: url(../icons/pl-forward.svg); }
.im-next { --i-img: url(../icons/pl-next.svg); }
.im-prev { --i-img: url(../icons/pl-prev.svg); }

.m1r-player {
  z-index: 100;
  background-color: hsl(var(--player-bg));
  box-shadow: var(--player-sw);
}
.m1r-player *, .m1r-player { touch-action: manipulation; }
.m1r-player ~ .atext { margin-top: var(--g-sect); }

@media (min-width: 992px) {
  .bookbox-audio ~ .m1r-player { border-top-left-radius: 0; border-top-right-radius: 0; }
  .m1r-player { position: sticky; top: 0px; border-radius: var(--player-rd); }
}
@media (max-width: 991px) {
  .bookbox-audio ~ .m1r-player { margin-top: var(--g-gap); }
  .m1r-player { position: fixed; inset: 0; top: auto; }
  body { padding-bottom: 104px; }
}

.m1r-track {
  position: relative; z-index: 1; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding: 0 16px; font-size: var(--fs-3); font-weight: bold;
  box-shadow: var(--player-track-base-sw);
  background-image: var(--player-track-base-gradient);

  border-top-left-radius: inherit; border-top-right-radius: inherit;
  touch-action: none; overflow: hidden;
  cursor: pointer;
}
.m1r-player.state-idle .m1r-track { cursor: not-allowed; }
.m1r-player.state-idle .m1r-track-lprogress { opacity: 0; }

.m1r-track-ctime, .m1r-track-dtime { opacity: .5; pointer-events: none; }
.m1r-track-cprogress, .m1r-track-lprogress, .m1r-track-sprogress { position: absolute; inset: 0; right: auto; height: inherit; pointer-events: none; }
.m1r-track input {
  position: absolute; inset: 0; width: 100%; opacity: 0; z-index: -1;
  cursor: inherit; border: 0 none; padding: 0; margin: 0;
}

.m1r-track-cprogress, .m1r-track-sprogress {
  box-shadow: var(--player-track-current-sw);
  background-image: var(--player-track-current-gradient);
  z-index: 2;
}
.m1r-track-lprogress {
  box-shadow: var(--player-track-load-sw);
  background-image: var(--player-track-load-gradient);
  z-index: 1;
}
.m1r-track-sprogress, .m1r-track-lprogress { transition: opacity .2s ease; }
.m1r-track-sprogress.hide { opacity: 0; }

.m1r-control-panel, .m1r-controls, .pl-ctrl, .pl-ctrl-group-l, .pl-ctrl-group-r { display: flex; align-items: center; justify-content: center; }
.m1r-control-panel { gap: 4px; padding: 12px 16px; }
.m1r-controls { flex: 1 1 auto; }
.pl-ctrl { flex-shrink: 0; padding: 8px; width: 40px; height: 40px; }
.pl-ctrl-group-l, .pl-ctrl-group-r { gap: 4px; min-width: 84px; }
.pl-ctrl-group-l { justify-content: start; }
.pl-ctrl-group-r { justify-content: end; }

.m1r-controls .pl-play { margin: 0 4px; }

.pl-switch {
  --pl-switch-s: 24px;
  --pl-switch-s-inv: -24px;

  width: var(--pl-switch-s);
  height: var(--pl-switch-s);
}
.pl-ctrl-switch .pl-switch:not(:first-child) { margin-left: var(--pl-switch-s-inv); }

.pl-ctrl-group-l .pl-ctrl, .pl-ctrl-group-r .pl-ctrl { opacity: .7; transition: opacity .15s ease; }
.pl-ctrl-group-l .pl-ctrl:hover, .pl-ctrl-group-r .pl-ctrl:hover { opacity: 1; }

.pl-ctrl-switch .pl-switch { opacity: 0; transform: scale(0.5); transition: transform .2s ease, opacity .2s ease; }
.pl-ctrl-switch .pl-switch.active { opacity: 1; transform: scale(1); }

.pl-timer { display: flex; flex-direction: column; justify-content: center; font-weight: bold; line-height: 1; font-size: 13px; }
.pl-timer * { display: block; font-style: normal; }
.pl-timer-label { font-size: 9px; }

.pl-timer.active {
  animation: timer-pulse 1s infinite linear;
}
@keyframes timer-pulse { 
  0% { opacity: .5; } 
  20% { opacity: 1; } 
  80% { opacity: 1; }
  100% { opacity: .5; } 
}

.pl-play:not(.playnow) .im-pause, .pl-play.playnow .im-play { display: none; }

/* Tracklist */
.plist-item { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.plist-item:not(.playnow) .plist-toggle .im-pause, .plist-item.playnow .plist-toggle .im-play { display: none; }
.plist-item.active .plist-toggle { --btn-sw: inset 0 0 0 2px hsla(var(--c-primary),0.5) }

.plist-item:not(:first-child) { border-top: 1px solid var(--c-border); }
.plist-item .cont { flex: 1 1 auto; min-width: 0; }
.plist-item i { font-style: normal; }
.plist-item .plist-download { position: relative; z-index: 2; --btn-c-text: hsl(var(--c-primary)); }
.plist-item .plist-download:hover { --btn-c-text: hsl(var(--c-link-hover)); }

.plist-title { display: block; font-weight: bold; font-size: var(--fs-1); }
.plist-duration {
  display: flex; align-items: center;
  gap: 4px; font-size: var(--fs-2); line-height: 16px;
  pointer-events: none; user-select: none; opacity: .6;
}
.plist-duration .im { --i-size: 16px; }