/* tpl-music-player.css — DÙNG CHUNG (bộ template scrub). Tạo dáng lại nút nhạc `.player`
 * cho khớp chất liệu kính mờ của #access-dock. Cặp với `assets/js/tpl-music-player.js`.
 *
 * KHÔNG sửa `assets/js/config.js` — 33 template dùng chung file đó. Ta chỉ ĐÈ lên markup
 * + style mà nó `document.write` ra. Hợp đồng phải giữ nguyên (xem js đi kèm):
 *   `.player` gốc · `.playerIcon` nút · #playerVolumeOff/#playerVolumeOn · `.show-sec`.
 *
 * BẪY SPECIFICITY: <style> của config.js nằm CUỐI body, tức là SAU <link> này trong <head>.
 * Cùng specificity thì bản sau thắng -> mọi selector ở đây phải cao hơn một bậc bằng tiền
 * tố `body `. Không dùng !important: thừa, và làm template sau khó tinh chỉnh đè lên.
 *
 * `.player` KHÔNG nằm trong `.tpl-scrub` (config.js viết nó ở cuối body, ngoài @section)
 * nên không scope theo class đó được — file này chỉ nạp cho template nào bật cờ $player.
 */

body .player {
  /* Bề ngang tối đa của tooltip. Mobile: chừa 96px cho `.weddingplan-logo` bên phải
     (20 lề + 40 logo + 16 khe + 20 lề trái của .player) cộng 46px khe icon->tooltip.
     Đo ở 390px: tooltip mép phải = 20 + 46 + 248 = 314 < 330 = mép trái logo. */
  --tpl-tip-max: 310px;
  /* Icon 40px + 6px khe: tooltip trượt ra từ SAU nút chứ không luồn dưới nút — nền nút
     là kính trong suốt, để capsule chạy phía dưới sẽ lộ vệt mờ xuyên qua. */
  --tpl-tip-gap: 46px;
}

/* Vòng lan `weddingplanlogo-pulse 1s infinite` — bỏ hẳn. Việc gây chú ý đã có tooltip
   2s->7s (config.js:37-47) đảm nhiệm; một vòng đập vĩnh viễn cạnh ảnh cưới là nhiễu. */
body .player::after {
  content: none;
  /* `content:none` là đủ (không sinh hộp thì không có gì để chạy) nhưng animation-name
     vẫn cascade xuống và đọc ra được -> gỡ hẳn cho khỏi phải giải thích mỗi lần soi. */
  animation: none;
}

/* --- Nút ---------------------------------------------------------------- */

/* Giữ đúng 40px để thẳng hàng với `.weddingplan-logo` (cũng 40px, đối xứng bên phải). */
body .player .playerIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid rgba(168, 130, 144, .2);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .82);
  /* Bóng ĐỔ XUỐNG, cùng token với .dock-items: vật thể nổi trên trang. */
  box-shadow: 0 10px 30px rgba(28, 28, 28, .14), 0 2px 6px rgba(28, 28, 28, .06);
  color: #8a5f6d;
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

/* Vùng chạm 44px mà không phá đối xứng 40px với logo WP. Pseudo-element không phải
   đích hit-test riêng: bấm vào nó vẫn tính là bấm `.playerIcon`.
   -3px chứ không phải -2px: khối chứa của pseudo là PADDING BOX, tức là đã lùi vào
   1px viền rồi. Để -2px thì vùng chạm chỉ ra 42px (đo bằng elementFromPoint). */
body .player .playerIcon::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border-radius: 50%;
}

body .player .playerIcon:hover {
  border-color: rgba(168, 130, 144, .45);
}

body .player .playerIcon:focus-visible {
  outline: 2px solid #a88290;
  outline-offset: 2px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .player .playerIcon {
    background-color: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* Trạng thái ĐANG PHÁT: nền đặc. Đọc được từ xa bằng khối màu, khớp aria-pressed.
   Specificity (0,3,1) nên thắng cả rule trong @supports ở trên. */
body .player.player--on .playerIcon {
  background-color: #a88290;
  border-color: rgba(138, 95, 109, .35);
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .player.player--on .playerIcon:hover {
  background-color: #9a7383;
}

/* `fill: currentColor` là lưới an toàn: JS hỏng -> vẫn là cặp SVG gốc `fill="#fff"`,
   trắng trên nền kính trắng = vô hình. Có dòng này thì nút chỉ mất icon mới, không mất
   chức năng (xem "rủi ro upstream đổi markup" trong js đi kèm). */
body .player .playerIcon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Hai span do config.js bật/tắt bằng inline style.display — line-height 0 để phần
   descender của span không đẩy icon lệch tâm. */
body .player .playerIcon span {
  line-height: 0;
}

/* --- Equalizer (hiện khi đang phát) -------------------------------------- */

body .player .tpl-eq rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tpl-player-eq 900ms ease-in-out infinite;
}

body .player .tpl-eq rect:nth-child(2) {
  animation-delay: .15s;
}

body .player .tpl-eq rect:nth-child(3) {
  animation-delay: .3s;
}

@keyframes tpl-player-eq {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}

/* --- Tooltip ------------------------------------------------------------- */

/* Khung ngoài = cửa sổ cắt cho hiệu ứng trượt. Bản gốc để `width:310px` CỨNG ở cả
   khung ngoài lẫn ruột -> trên máy 390px nó chiếm gần trọn bề ngang và đè lên
   `.weddingplan-logo` (lỗi có sẵn, sửa luôn ở đây).
   `width:max-content` chỉ đo được khi ruột nằm TRONG luồng -> ruột đổi absolute
   thành relative bên dưới. */
body .player .player-secondary {
  top: 50%;
  left: var(--tpl-tip-gap);
  width: -webkit-max-content;
  width: max-content;
  max-width: var(--tpl-tip-max);
  height: auto;
  padding: 0;
  box-sizing: border-box;
  transform: translateY(-50%);   /* căn giữa theo nút, kể cả khi chữ xuống 2 dòng */
}

/* inline-flex để co theo chữ; `left:0` xoá độ lệch -25px của bản gốc (mẹo luồn ruột
   xuống dưới icon — không còn cần khi tooltip đã tách hẳn sang phải nút). */
body .player .player-secondary-content {
  position: relative;
  left: 0;
  display: inline-flex;
  width: auto;
  max-width: var(--tpl-tip-max);
  min-height: 40px;
  height: auto;
  padding: 9px 16px;
  box-sizing: border-box;
  border: 1px solid rgba(168, 130, 144, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  font-family: 'Bellota Text', cursive;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #7d6560;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .player .player-secondary-content {
    background: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* Bản gốc chỉ hiện tooltip đúng một lần lúc 2s->7s rồi thôi. Thêm hover/focus để
   người đến muộn vẫn tra được nút này làm gì. `.show-sec` giữ nguyên, không đụng. */
body .player:hover .player-secondary {
  visibility: visible;
}

body .player:hover .player-secondary-content {
  transform: translate3d(0, 0, 0);
}

/* Bàn phím: :focus-visible chứ KHÔNG phải :focus-within. Nút có tabindex=0 nên bấm
   chuột cũng focus vào nó -> focus-within sẽ ghim tooltip mở suốt lúc nhạc đang chạy,
   đúng thứ mà playPause() cố dẹp đi (nó gỡ .show-sec ngay khi bấm).
   Để RIÊNG một khối: trình duyệt chưa biết :has() bỏ nguyên rule chứa nó — gộp chung
   với :hover ở trên là mất luôn cả hover. Không có :has() thì chỉ mất tooltip lúc tab
   tới, aria-label vẫn nói đủ. */
body .player:has(.playerIcon:focus-visible) .player-secondary {
  visibility: visible;
}

body .player:has(.playerIcon:focus-visible) .player-secondary-content {
  transform: translate3d(0, 0, 0);
}

@media (max-width: 799px) {
  body .player {
    --tpl-tip-max: calc(100vw - 142px);   /* 96 chừa cho logo WP + 46 khe icon */
  }
}

@media (prefers-reduced-motion: reduce) {
  body .player .playerIcon,
  body .player .player-secondary-content {
    transition: none;
  }
  /* Equalizer đứng yên ở 3 chiều cao khác nhau — vẫn đọc ra "đang phát". */
  body .player .tpl-eq rect {
    animation: none;
    transform: scaleY(.5);
  }
  body .player .tpl-eq rect:nth-child(2) {
    transform: scaleY(1);
  }
  body .player .tpl-eq rect:nth-child(3) {
    transform: scaleY(.7);
  }
}
