/* ===========================================================================
   PRODUCT AUDIO PREVIEWS — PLAYER STYLES
   ===========================================================================
   QUICK TWEAKS: change the VARIABLES in the first block below.
   To make changes that survive plugin updates, copy the .pap-players variable
   block into your (child) theme stylesheet and change values there instead —
   theme CSS loads after this file, so your values win.
   =========================================================================== */

/* ============================== THE KNOBS ================================= */
.pap-players {
  --pap-accent: #7d4928;     /* brown: play button, played slider, thumb */
  --pap-radius: 7px;         /* corner rounding (card + image) */
  --pap-art: 86px;            /* song image size (square) */
  --pap-btn-size: 35px;      /* round play button diameter */
  --pap-bg: #faf9f8;         /* card background */
  --pap-border: #ece9e6;     /* card border */
  --pap-name: #2b2b2b;       /* song title colour */
  --pap-track: #e7e2dd;      /* unplayed slider colour */
  --pap-time-size: 21px;     /* time text size */
  --pap-gap: 12px;           /* gap between stacked players */
}

/* ============================ STRUCTURE (rarely edit) ==================== */
.pap-players {
  display: flex;
  flex-direction: column;
  gap: var(--pap-gap);
  margin: 18px 0 4px;
  width: 100%;
}

.pap-player {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: var(--pap-bg);
  border: 1px solid var(--pap-border);
  border-radius: var(--pap-radius);
  padding: 12px;
  box-sizing: border-box;
}

/* Song image (left), square, crops to fill so odd shapes stay tidy */
.pap-art {
  flex: 0 0 auto;
  width: var(--pap-art);
  height: var(--pap-art);
  border-radius: var(--pap-radius);
  background-size: cover;
  background-position: center;
  background-color: #eee;
}
.pap-art--empty {
  display: flex; align-items: center; justify-content: center;
  color: #b7a89c; font-size: 11px; text-align: center; line-height: 1.4;
}

/* Right side: three rows, total height matches the image */
.pap-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Row 1 — title (marquee added by JS only when it overflows) */
.pap-name-wrap { overflow: hidden; white-space: nowrap; }
.pap-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pap-name);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
.pap-name.pap-scroll {
  text-overflow: clip;
  padding-right: 40px;
  animation: pap-marquee var(--pap-scroll-dur, 9s) linear infinite;
}
@keyframes pap-marquee {
  0%, 12%   { transform: translateX(0); }
  88%, 100% { transform: translateX(var(--pap-scroll-x, -50%)); }
}

/* Row 2 — seek slider; played portion painted brown via --v (set by JS) */
.pap-seek-row { display: flex; align-items: center; }
.pap-seek {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  border: none;
  outline: none;
  background: linear-gradient(to right,
    var(--pap-accent) var(--v, 0%),
    var(--pap-track) var(--v, 0%));
  cursor: pointer;
  margin: 0;
}
.pap-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--pap-accent); border: none; cursor: pointer;
}
.pap-seek::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--pap-accent); border: none; cursor: pointer;
}
.pap-seek::-webkit-slider-runnable-track { border: none; }
.pap-seek::-moz-range-track { height: 4px; border-radius: 999px; background: transparent; border: none; }

/* Row 3 — centered round play button + time pinned bottom-right */
.pap-btn-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
}
.pap-play {
  width: var(--pap-btn-size);
  height: var(--pap-btn-size);
  border-radius: 50%;
  border: none;
  outline: none;
  box-shadow: none;
  background: var(--pap-accent);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: transform 0.15s ease;
}
.pap-play:focus,
.pap-play:focus-visible { outline: none; box-shadow: none; }
.pap-play:hover  { transform: scale(1.08); }
.pap-play:active { transform: scale(0.95); }
.pap-play svg { width: 46%; height: 46%; fill: #fff; display: block; }
.pap-player .pap-icon-pause { display: none; }
.pap-player.is-playing .pap-icon-play  { display: none; }
.pap-player.is-playing .pap-icon-pause { display: block; }

.pap-time {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: var(--pap-time-size);
  line-height: 1;
  color: #8a8178;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================== MOBILE =================================== */
@media (max-width: 640px) {
  .pap-players { --pap-art: 76px; --pap-time-size: 17px; }
  .pap-player { padding: 10px; gap: 12px; }
  .pap-name { font-size: 15px; }
}