/*
 * ============================================================
 *  GeeMansala — Custom Player Redesign  v1.2
 *  Child theme: waveme-player-custom.css
 * ============================================================
 */

/* ── 0. Design tokens ── */
/* Global tokens needed everywhere */
:root {
  --gm-accent:        #ff5500;
  --gm-accent-glow:   rgba(255, 85, 0, 0.55);
  --gm-text:          #f0f0f0;
  --gm-text-muted:    rgba(200, 200, 210, 0.55);

  /* Plyr variable overrides – apply everywhere */
  --plyr-color-main:                          var(--gm-accent);
  --plyr-range-fill-background:               var(--gm-accent);
  --plyr-audio-controls-background:           transparent;
  --plyr-audio-control-color:                 var(--gm-text);
  --plyr-range-track-height:                  3px;
  --plyr-range-thumb-height:                  12px;
  --plyr-range-thumb-background:              #fff;
  --plyr-audio-progress-buffered-background:  rgba(255,255,255,0.12);
  --plyr-tooltip-background:                  rgba(20,20,28,0.92);
  --plyr-tooltip-color:                       #fff;
  --plyr-tooltip-shadow:                      0 2px 8px rgba(0,0,0,0.5);
  --plyr-menu-background:                     rgba(20,20,28,0.96);
  --plyr-menu-color:                          #f0f0f0;
  --plyr-menu-back-border-color:              rgba(255,255,255,0.08);
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP ONLY — all visual redesign applies above 768px
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Player bar shell – shark gray 50% transparent ─────── */
/* Using body prefix to beat .dark .plyr-playlist specificity */
body #plyr-playlist.fixed-bottom,
.dark #plyr-playlist.fixed-bottom,
#plyr-playlist.fixed-bottom {
  background: rgba(50, 54, 60, 0.50) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.40);
  color: var(--gm-text) !important;
  min-height: 80px;
}

/* ── 2. Controls layout – padding for height ───────────────── */
#plyr-playlist .plyr__controls {
  padding: 12px 1.25rem !important;
  min-height: 80px;
  background: transparent !important;
  color: var(--gm-text) !important;
  align-items: center !important;
}

/* ── 3. Progress bar – inline, next to cover art ───────────── */
/* Remove the absolute top-strip positioning */
#plyr-playlist .plyr__progress__container,
#plyr-playlist .plyr-theme-2 .plyr__progress__container {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  min-width: 0;
  z-index: auto;
}

/* Progress track – let Plyr draw the filled portion via currentColor/--value */
#plyr-playlist .plyr--full-ui input[type=range] {
  color: var(--gm-accent);
}
/* DO NOT override -webkit-slider-runnable-track background here —
   Plyr injects the fill via background-image linear-gradient on the track.
   We only set the unfilled track colour via the buffered variable above. */

/* Seek thumb – always visible, small glowing dot */
#plyr-playlist .plyr__progress input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #fff;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 0 3px var(--gm-accent-glow), 0 0 6px var(--gm-accent);
  opacity: 1;
  margin-top: -4px;
}
#plyr-playlist .plyr__progress input[type=range]::-moz-range-thumb {
  background: #fff;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 0 3px var(--gm-accent-glow), 0 0 6px var(--gm-accent);
  opacity: 1;
}
/* Also keep Plyr's own thumb-opacity rules from hiding it */
#plyr-playlist .plyr__progress input[type=range]::-webkit-slider-thumb,
#plyr-playlist .plyr-playlist:not(.plyr-full-player) .plyr__progress__container input[type=range]::-webkit-slider-thumb {
  opacity: 1 !important;
}
#plyr-playlist .plyr__progress__buffer {
  color: rgba(255,255,255,0.12);
}

/* ── 4. Cover art – spins while playing ────────────────────── */
#plyr-playlist .plyr__cover {
  width: 54px !important;
  height: 54px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  flex-shrink: 0;
  transition: transform 0.3s ease, border-radius 0.3s ease;
  background-color: rgba(255,255,255,0.05) !important;
}
#plyr-playlist .plyr--playing .plyr__cover {
  animation: gm-spin 8s linear infinite;
  border-radius: 50% !important;
  box-shadow: 0 4px 24px var(--gm-accent-glow), 0 0 0 2px rgba(255,85,0,0.30);
}

/* ── 5. Song title & artist ────────────────────────────────── */
#plyr-playlist .plyr__title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--gm-text) !important;
  letter-spacing: 0.01em;
}
#plyr-playlist .plyr__author,
#plyr-playlist .plyr__author a {
  font-size: 12px !important;
  color: var(--gm-text-muted) !important;
}
#plyr-playlist .plyr__content {
  padding: 0 12px 0 10px;
}

/* ── 6. Time display ───────────────────────────────────────── */
#plyr-playlist .plyr__time {
  font-size: 11px !important;
  color: var(--gm-text-muted) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

/* ── 7. Generic control buttons ─────────────────────────────── */
#plyr-playlist .plyr__control {
  color: var(--gm-text) !important;
  opacity: 0.75;
  transition: opacity 0.18s, transform 0.18s, background 0.18s !important;
  border-radius: 8px !important;
}
#plyr-playlist .plyr__control:hover {
  opacity: 1 !important;
  color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
  transform: scale(1.08);
}
#plyr-playlist .plyr__control:active {
  transform: scale(0.94) !important;
}
#plyr-playlist .is--shuffle svg,
#plyr-playlist .is--repeat svg {
  fill: var(--gm-accent) !important;
  filter: drop-shadow(0 0 4px var(--gm-accent));
}

/* ── 8. THE PLAY BUTTON – 3-D gray sphere ──────────────────── */
#plyr-playlist [data-plyr="play"] {
  position: relative !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 8px !important;
  opacity: 1 !important;
  flex-shrink: 0;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.50) 0%, transparent 50%),
    radial-gradient(circle at 35% 32%, #9a9faa, #5a5f6a 52%, #2e3038 100%) !important;
  box-shadow:
    inset  2px  3px  6px rgba(255,255,255,0.20),
    inset -2px -3px  8px rgba(0,0,0,0.65),
    0 0 14px rgba(160,170,190,0.30),
    0 4px 20px rgba(0,0,0,0.6) !important;
  transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}

/* Pulse ring while playing */
#plyr-playlist [data-plyr="play"]::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid rgba(255,85,0,0.70);
  opacity: 0;
  pointer-events: none;
}
#plyr-playlist .plyr--playing [data-plyr="play"]::before {
  animation: gm-pulse 2s ease-out infinite;
}

/* Hover */
#plyr-playlist [data-plyr="play"]:hover {
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.60) 0%, transparent 50%),
    radial-gradient(circle at 35% 32%, #b0b5c0, #6a6f7a 52%, #3a3d48 100%) !important;
  box-shadow:
    inset 2px  3px  6px rgba(255,255,255,0.25),
    inset -2px -3px 8px rgba(0,0,0,0.65),
    0 0 22px rgba(180,190,210,0.40),
    0 6px 24px rgba(0,0,0,0.65) !important;
  transform: scale(1.07) translateY(-1px) !important;
}

/* Press */
#plyr-playlist [data-plyr="play"]:active {
  transform: scale(0.95) translateY(1px) !important;
  box-shadow:
    inset 3px  4px 10px rgba(0,0,0,0.55),
    inset -2px -3px 6px rgba(0,0,0,0.45),
    0 0 8px rgba(160,170,190,0.20),
    0 2px  8px rgba(0,0,0,0.6) !important;
}

/* Icon inside button */
#plyr-playlist [data-plyr="play"] svg {
  width: 20px !important;
  height: 20px !important;
  fill: #fff !important;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* ── 9. Like button active ──────────────────────────────────── */
#plyr-playlist [data-plyr="like"].active svg,
#plyr-playlist .btn-like.active svg {
  fill: #ff3d6e !important;
  stroke: #ff3d6e !important;
  filter: drop-shadow(0 0 4px rgba(255,61,110,0.6));
}

/* ── 10. Volume popup ───────────────────────────────────────── */
#plyr-playlist.fixed-bottom .plyr__volume input {
  background: rgba(20, 22, 28, 0.95) !important;
  color: var(--gm-accent) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}

/* ── 11. Queue list panel ───────────────────────────────────── */
#plyr-playlist .plyr-list {
  background: rgba(28, 30, 38, 0.97) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px 14px 0 0 !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.6) !important;
  color: var(--gm-text) !important;
}
#plyr-playlist .plyr-list-header {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
#plyr-playlist .plyr-item:hover,
#plyr-playlist .plyr-item.active {
  background: rgba(255,85,0,0.10) !important;
  border-radius: 6px;
}
#plyr-playlist .plyr-item.active .plyr-item-title {
  color: var(--gm-accent) !important;
}
#plyr-playlist .plyr-item-cover {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#plyr-playlist.open [data-plyr="list"] svg {
  color: var(--gm-accent) !important;
}

/* ── 12. Tooltip ────────────────────────────────────────────── */
#plyr-playlist .plyr__tooltip {
  background: rgba(14,14,22,0.95) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

/* ── 13. Settings menu ──────────────────────────────────────── */
#plyr-playlist .plyr__menu__container {
  background: rgba(14,14,22,0.97) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  border-radius: 10px !important;
}
#plyr-playlist .plyr__menu__container .plyr__control {
  color: #e0e0e0 !important;
}
#plyr-playlist .plyr__menu__container .plyr__control:hover {
  background: rgba(255,85,0,0.15) !important;
  color: #fff !important;
}

/* ── 14. Body padding ───────────────────────────────────────── */
html.open-player body {
  padding-bottom: calc(80px + 8px) !important;
}


/* ── Animations (outside media query – needed by both) ──────── */
@keyframes gm-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes gm-pulse {
  0%   { inset: -4px;  opacity: 0.7; }
  100% { inset: -18px; opacity: 0;   }
}

/* ── Share dropdown — hidden by default ── */
.gm-share-dropdown {
  display: none !important;
}
.gm-share-dropdown.open {
  display: block !important;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 182px;
  background: rgba(16, 18, 26, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  z-index: 9999;
  overflow: hidden;
  animation: gmDropUp 0.15s ease;
}
@keyframes gmDropUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gm-share-wrap {
  position: relative;
  display: inline-flex;
}
.gm-share-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(210,212,225,0.85);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.gm-share-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.gm-share-item + .gm-share-item { border-top: 1px solid rgba(255,255,255,0.05); }
.gm-share-item svg { flex-shrink: 0; width: 18px; height: 18px; }
.gm-share-wa:hover    { color: #25D366 !important; }
.gm-share-fb:hover    { color: #4267B2 !important; }
.gm-share-email:hover { color: #aaa    !important; }
.gm-share-copy:hover  { color: #ff5500 !important; }
/* Mobile: dropdown opens downward */
@media (max-width: 600px) {
  .gm-share-dropdown.open {
    bottom: auto !important;
    top: calc(100% + 8px) !important;
  }
}