/* assets/player.css */

.tracks-table .cart-btn { background:transparent; border:none; cursor:pointer; }
      .tracks-table .cart-btn .ap-ico { width:28px; height:28px; display:block; color:#fff; }
      .tracks-table .cart-btn .ap-ico-plus { display:none; }
      .tracks-table .cart-btn.is-added .ap-ico-cart { display:none; }
      .tracks-table .cart-btn.is-added .ap-ico-plus { display:block; }
      .tracks-table .cart-btn.is-added { opacity:.9; cursor:default; pointer-events:none; }

      /* ===== PREVIEW BUTTON (BLACK CIRCLE + WHITE PLAY; PLAYING = WHITE CIRCLE + BLACK PAUSE) ===== */
      .tracks-table .preview-btn{
        width:34px;
        height:34px;
        border-radius:999px;
        border:none;
        background:#000;           /* default black */
        cursor:pointer;
        padding:0;
        display:inline-flex;
        align-items:center;
        justify-content:center;

        /* hide unicode so it won't become "?" */
        color:transparent !important;
        font-size:0 !important;
        text-shadow:none !important;
        line-height:0;
      }

      .tracks-table .preview-btn::before{
        content:"";
        width:20px;
        height:20px;
        display:block;
        background-repeat:no-repeat;
        background-position:center;
        background-size:contain;

        /* white triangle play */
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 7l10 5-10 5V7Z'/%3E%3C/svg%3E");
      }

      .tracks-table .preview-btn.playing{
        background:#fff; /* playing white bg */
      }

      .tracks-table .preview-btn.playing::before{
        /* black pause */
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000000' stroke-width='2.6' stroke-linecap='round' d='M9 7v10M15 7v10'/%3E%3C/svg%3E");
      }

/* ===================== PLAYER BASE ===================== */
#audio-player{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background:#000;
  color:#fff;
  padding:10px 12px;
  box-shadow:0 -2px 12px rgba(0,0,0,0.65);
  z-index:220;
}

.ap-grid{
  display:grid;
  grid-template-columns:minmax(260px,340px) 1fr auto;
  align-items:center;
  gap:14px;
}

/* ===================== LEFT INFO ===================== */
.ap-info{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  min-width:0;
}

.ap-avatar-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid #2a2a2a;
  background:#101010;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}

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

.ap-text{ min-width:0; }
.ap-title{
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#player-title{ display:inline; }

.ap-sub{
  margin-top:2px;
  font-size:12px;
  opacity:0.82;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ap-dot{ margin:0 6px; opacity:.7; }
.ap-unit{ opacity:.8; }

.ap-time{
  font-size:12px;
  opacity:.9;
  white-space:nowrap;
  text-align:right;
}
.ap-slash{ opacity:.7; margin:0 6px; }

/* ===================== WAVEFORM + SEEK ===================== */
.ap-wave{
  position:relative;
  height:44px;
  border-radius:10px;
  background:#070707;
  border:1px solid #1f1f1f;
  overflow:hidden;
  cursor:pointer;
  min-width:140px;
}

#wave-canvas{
  width:100%;
  height:44px;
  display:block;
}

.ap-progress-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

#progress-bar{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
  background: rgba(255,200,0,0.10);
}
#progress-knob{
  position:absolute;
  top:50%;
  left:0%;
  transform:translate(-50%,-50%);
  width:14px;
  height:14px;
  border-radius:999px;
  background:#fff; /* ✅ WHITE KNOB */
  box-shadow: 0 0 8px rgba(255,255,255,0.25);
  opacity:0.95;
}


/* ===================== RIGHT SIDE ===================== */
.ap-right{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}

.ap-controls{
  display:flex;
  align-items:center;
  gap:10px;
}

.ap-btn{
  padding:0;
  border:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* ===== SVG icons ===== */
.ap-ico{
  width:28px;
  height:28px;
  display:block;
  color:#fff;
}

/* ===================== ICON-ONLY BUTTONS (NO BG) ===================== */
.ap-cart,
.ap-btn--control{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: 2.8rem;
  width:  2.8rem;
  border-radius: 50%;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}

.ap-cart:hover,
.ap-btn--control:hover{
  background: rgba(255,255,255,0.08) !important;
}

/* ===================== PLAY ICON TOGGLE ===================== */
#btn-play .ico-pause{ display:none; }
#btn-play.is-playing .ico-play{ display:none; }
#btn-play.is-playing .ico-pause{ display:block; }

/* ===================== CART -> PLUS STATE ===================== */
#player-cart .ap-ico-plus{ display:none; }
#player-cart.is-added .ap-ico-cart{ display:none; }
#player-cart.is-added .ap-ico-plus{ display:block; }

/* kapag added na: disabled look + no click */
#player-cart.is-added{
  opacity: .9;
  cursor: default;
  pointer-events: none;
}

/* ===================== VOLUME POPUP ===================== */
.ap-volume{
  position:relative;
  --vol-color:#22ff6b; /* green */
  --vol-pct:100%;
}

.ap-volume .ico-muted{ display:none; }
.ap-volume.is-muted .ico-vol{ display:none; }
.ap-volume.is-muted .ico-muted{ display:block; }

.ap-volume.is-muted,
.ap-volume.is-low{
  --vol-color:#ff3b3b; /* red */
}
.ap-volume.is-muted .ap-ico,
.ap-volume.is-low .ap-ico{
  color: var(--vol-color);
}

.ap-vol-pop{
  position:absolute;
  right:50%;
  transform:translateX(50%);
  bottom: calc(2.8rem + 10px);
  width:48px;
  height:140px;
  background: rgba(20,20,20,0.98);
  border:1px solid #2a2a2a;
  border-radius:12px;
  padding:10px 8px;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  z-index:99999;
}
.ap-volume.open .ap-vol-pop{ display:flex; }

.ap-vol-range{
  width:120px;
  height:6px;
  transform:rotate(-90deg);
  appearance:none;
  background:transparent;
  outline:none;
}

.ap-vol-range::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background: linear-gradient(
    to right,
    var(--vol-color) 0%,
    var(--vol-color) var(--vol-pct),
    rgba(255,255,255,0.18) var(--vol-pct),
    rgba(255,255,255,0.18) 100%
  );
}
.ap-vol-range::-moz-range-track{
  height:6px;
  border-radius:999px;
  background: linear-gradient(
    to right,
    var(--vol-color) 0%,
    var(--vol-color) var(--vol-pct),
    rgba(255,255,255,0.18) var(--vol-pct),
    rgba(255,255,255,0.18) 100%
  );
}

.ap-vol-range::-webkit-slider-thumb{
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  border:3px solid rgba(0,0,0,0.35);
  margin-top:-5px;
}
.ap-vol-range::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  border:3px solid rgba(0,0,0,0.35);
}
/* ================== HIDE HEADER ON SCROLL ================== */
.top-bar{
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
}

.top-bar.header-hidden{
  transform: translateY(-110%);
  box-shadow: none;
}

/* ===================== MOBILE ===================== */
@media (max-width:768px){
  #audio-player{ padding:10px 10px; }

  .ap-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .ap-right{
    order:1;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
  }

  .ap-info{
    order:2;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "avatar text"
      "time time";
    row-gap:6px;
  }

  .ap-avatar-btn{ grid-area:avatar; width:52px; height:52px; }
  .ap-text{ grid-area:text; }
  .ap-time{ grid-area:time; text-align:left; opacity:.85; }

  .ap-wave{ order:3; height:48px; }
  #wave-canvas{ height:48px; }
  #progress-knob{ width:16px; height:16px; }

  .ap-cart,
  .ap-btn--control{
    height: 3.2rem;
    width:  3.2rem;
  }
}

main.container{ padding-bottom:180px; }

/* ================== MOBILE/TABLET: WRAP LONG TITLES (NO ELLIPSIS) ================== */
@media (max-width: 900px){

  /* yung Title/Genre column (3rd col sa table mo) */
  .tracks-table td:nth-child(3){
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* title text mismo */
  .track-title{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.2;
  }

  /* genre text */
  .track-genre{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.15;
  }

  /* para hindi sumikip masyado yung cell */
  .track-main{
    min-width: 0;
  }
}

/* extra: very small phones */
@media (max-width: 480px){
  .track-title{ font-size: 12px; }
  .track-genre{ font-size: 10.5px; }
}

/* === Bottom player "kabote" show/hide === */
#audio-player {
  transition: transform .22s ease, opacity .22s ease;
  padding-bottom: env(safe-area-inset-bottom);
}

#audio-player.ap-hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
/* temporary hide habang nag-s-scroll */
#audio-player.ap-scroll-hide {
  transform: translateY(70%);
  opacity: 0;
  pointer-events: none;
}