/* Global Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Outfit', sans-serif;
    color: white;
    overflow: hidden;
    
}

/* Icons */
.icon {
    width: 24px;
    height: 24px;
    display: block;
}

.hidden {
    display: none !important;
}

/* ===========================
   Bar Layout (57px height)
   =========================== */
.player-bar {
    height: 57px;
    width: 100%;
}

.player-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Background Blur */
.background-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.6);
    z-index: 1;
    transform: scale(1.1);
    /* Prevent blurred edges showing white */
    transition: background-image 0.5s ease;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    /* Slight tint */
    z-index: 2;
}

/* Content Container */
.player-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 15px;
    gap: 15px;
}

/* Album Art */
.album-art-container {
    width: 50px;
    /* Fixed requested size */
    height: 50px;
    /* Fixed requested size */
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    position: relative;
}

#album-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Play Button (Overlay on Bar mode? Or beside?
   User said: "izquierda imagen... centro titulo... derecha control volumen"
   I will put the play button OVER the album art for space efficiency in bar mode,
   or just next to it. Let's make it a nice overlay on the album art on hover, or always visible.
   Actually, let's put it next to the art or integrate it seamlessly.
   Given "110px" height and "100px" image, there's 5px padding top/bottom.
   The play button is defined in HTML. I'll place it absolutely over the image for the bar mode.
*/

/* Spinner */
.loading-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 10px;
  color: #ffffff; /* color del spinner, cambiar si hace falta */
}

.loading-spinner .spinner-icon {
  width: 28px;
  height: 28px;
  animation: spin 1s linear infinite;
  opacity: 0.95;
}

@keyframes spin {
  0% { transform: rotate(0deg); stroke-dasharray: 1,150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90,150; stroke-dashoffset: -35; }
  100% { transform: rotate(360deg); stroke-dasharray: 1,150; stroke-dashoffset: -124; }
}

/* Utilidad para ocultar */
.hidden { display: none !important; }

/* Texto solo para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}



/* Variables para colores */
:root {
  --btn-bg-default: #12c908;      /* color normal */
  --btn-bg-playing: #1f8ef1;   /* opcional: color cuando reproduce */
  --btn-bg-paused: #e74c3c;    /* color cuando está en pausa */
  --btn-color: #fff;           /* color del icono/texto */
  --btn-transition: 200ms ease;
}

/* Estilo base del botón */
.play-btn {
  background: var(--btn-bg-default);
  color: var(--btn-color);
  border: none;
  padding: 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--btn-transition), transform var(--btn-transition);
}

/* Estado reproducir (opcional) */
.play-btn.playing {
  background: var(--btn-bg-playing);
}

/* Estado pausa */
.play-btn.paused {
  background: var(--btn-bg-paused);
}

/* Pequeña animación al hacer click */
.play-btn:active {
  transform: scale(0.98);
}

/* Asegurar que los iconos hereden color */
.play-btn .icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}


.player-bar .album-art-container {
    position: relative;
    /* For the button */
}



/* Track Info (Marquee) */
.track-info {
    flex: 1;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #FFD700;
    /* Yellow */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    /* Strong contrast shadow */
    padding-left: 100%;
    /* Start off-screen */
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Volume Control */
.volume-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 150px;
}

.mute-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
}

#volume-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
    transition: transform 0.1s;
}

#volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}


/* ===========================
   Widget Layout (400x400)
   =========================== */
.player-widget {
    width: 100%;
    height: 100%;
    background: transparent;
}

.widget-mode .player-content-widget {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.widget-art-container {
    width: 100%;
    height: 300px;
    /* Top part */
    position: relative;
    overflow: hidden;
}

.widget-art-container #album-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-btn-widget {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FF0055;
    /* Accent color example */
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s, background 0.2s;
}

.play-btn-widget:hover {
    transform: scale(1.05);
    background: #e6004c;
}

.play-btn-widget .icon {
    width: 30px;
    height: 30px;
}

.widget-controls {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 25px;
}

/* Adjust marquee for widget */
.widget-mode .track-info {
    margin-bottom: 10px;
    justify-content: flex-start;
    /* Left align approx or center? Requirements said Center title. */
    text-align: center;
}

.widget-mode .marquee-content {
    font-size: 1.4rem;
}

.widget-mode .volume-container {
    width: 100%;
    justify-content: space-between;
}
.play-btn-widget.playing {
  background: #1f8ef1; /* color cuando reproduce */
}
.play-btn-widget.paused {
  background: #e74c3c; /* color cuando está en pausa */
}

@media (max-width: 480px) {
  .play-btn-widget {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }
  .play-btn-widget .icon {
    width: 24px;
    height: 24px;
  }
}
/* ===========================
   Responsive Tweaks
   =========================== */
@media (max-width: 600px) {

    /* Hide Volume on Mobile to prioritize Title visibility */
    .volume-container {
        display: none !important;
    }

    /* Adjust sizing for mobile */
    .player-bar .album-art-container {
        width: 50px;
        height: 50px;
    }

    .player-bar {
        height: 60px;
        /* Slightly compact */
    }

    /* Maximize text width since volume is gone */
    .track-info {
        flex: 1;
        padding: 0 10px;
    }

    .marquee-content {
        font-size: 1.1rem;
    }
}

/* ===========================
   Artist Bio Overlay
   =========================== */
.bio-trigger {
    position: absolute;
    bottom: 20px;
    left: 20px;
    /* Opposite to play button if any */
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
    z-index: 9999;
    /* Boosted z-index */
}

.bio-trigger:hover {
    background: rgba(255, 255, 255, 0.2);
}

.bio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80%;
    /* Don't cover full image */
    background: rgba(0, 0, 0, 0.85);
    /* Darker for readability */
    backdrop-filter: blur(15px);
    color: #eee;
    /* Padding removed here to allow header to stick to top */
    padding: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: translateY(110%);
    /* Hidden by default */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 20;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.bio-overlay.active {
    transform: translateY(0);
}

.bio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Sticky Header */
    position: sticky;
    top: 0;
    background: rgba(0, 0, 0, 0.95);
    /* Higher opacity to hide text strictly */
    z-index: 100;
    /* Internal spacing */
    padding: 15px 20px;
    margin: 0;
}

#bio-text {
    padding: 20px;
    line-height: 1.6;
    font-size: 0.95rem;
}



.bio-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
}

.close-bio {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.5rem;
    cursor: pointer;
}

.bio-content {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #ccc;
    white-space: pre-wrap;
    /* Preserve paragraphs */
}

/* Scrollbar for bio */
.bio-overlay::-webkit-scrollbar {
    width: 6px;
}

.bio-overlay::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}