/* Watnapahpong audio player — album detail page (scoped, namespaced .wnp-*) */

/* keep the fixed bar from covering page footer content */
.wnp-has-player { padding-bottom: 132px; }
@media (min-width: 768px) { .wnp-has-player { padding-bottom: 96px; } }

.wnp-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  background: #fff;
  border-top: 1px solid rgba(174, 124, 73, .35);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .10);
  font-family: "inter", "notosarifthai", sans-serif;
  padding: 6px 12px 10px;
}
.wnp-player[hidden] { display: none; }
.wnp-audio { display: none; }

/* row 1: seek */
.wnp-seekrow { display: flex; align-items: center; gap: 10px; }
.wnp-cur, .wnp-dur { color: #828282; font-size: .72rem; min-width: 38px; text-align: center; }
.wnp-seek {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px; background: #ece3d6; outline: none;
}
.wnp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #592202; cursor: pointer; }
.wnp-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #592202; cursor: pointer; }

/* row 2: controls */
.wnp-ctrlrow { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.wnp-now { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.wnp-cover { width: 40px; height: 40px; flex: none; border-radius: 8px; background: #ae7c49; color: #fff; display: flex; align-items: center; justify-content: center; }
.wnp-title { color: #592202; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wnp-transport { display: flex; align-items: center; gap: 6px; }
.wnp-extra { display: flex; align-items: center; gap: 8px; border-left: 1px solid #eee; padding-left: 12px; }

.wnp-btn { background: transparent; border: 0; color: #71502f; font-size: 1.05rem; line-height: 1; padding: 8px; cursor: pointer; border-radius: 50%; }
.wnp-btn:hover { color: #ae7c49; }
.wnp-btn.wnp-on { color: #ae7c49; }
.wnp-main { width: 44px; height: 44px; background: #215934; color: #fff; display: flex; align-items: center; justify-content: center; }
.wnp-main:hover { color: #fff; background: #1b4a2b; }
.wnp-speed { font-size: .8rem; font-weight: 600; border: 1px solid #ae7c49; color: #ae7c49; border-radius: 14px; padding: 3px 8px; min-width: 48px; }
.wnp-vol { width: 80px; }
.wnp-repeat.wnp-repeat-one { position: relative; }
.wnp-repeat.wnp-repeat-one::after { content: "1"; position: absolute; top: 2px; right: 2px; font-size: .5rem; font-weight: 700; }

/* track-list active row */
.table tr.is-playing > td { background: #f7f2ea; color: #592202; font-weight: 600; }

/* responsive: stack rows; drop secondary controls that don't fit / aren't useful on mobile */
@media (max-width: 575.98px) {
  .wnp-ctrlrow { flex-wrap: wrap; gap: 8px; }
  .wnp-now { flex: 1 1 100%; order: 1; }
  .wnp-transport { order: 2; flex: 1 1 100%; justify-content: center; }
  .wnp-extra { order: 3; border-left: 0; padding-left: 0; }
  .wnp-back15, .wnp-fwd15 { display: none; }   /* skip ±15 hidden on phones */
  .wnp-vol { display: none; }                  /* volume is OS-level on mobile; mute stays */
}