.section-radio{
	background-color:yellow;
	background-color:#f7f0e4;
}

.radio-cover{
	background-image: url("./radio-cover.jpg");
	background-size: cover;       /* cobre todo o elemento, preservando proporção */
	background-position: center;  /* centraliza a imagem */
	background-repeat: no-repeat; /* evita repetição */
}
		
.radio-bg-img {
	background-image: url('./radio-bg.jpg');
	background-size: cover; /* Isso garante que a imagem cubra todo o elemento sem perder sua proporção */
	background-position: center; /* Centraliza a imagem */
	width: 100vw; /* Largura da viewport */
	margin: 0; /* Remove margens */
	padding: 0; /* Remove espaçamentos */
	filter: grayscale(100%);
}
		.bg-radio-overlay{

		}
		.sticky-player {

		}
        .player-container {
			border-radius: 10px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(0, 0, 0, 0.2);
            
            max-width: 250px;
            margin: 0 auto;
            padding: 8px 15px;

            align-items: center;
            gap: 12px;
        }

        .station-name {
			font-family: "Libre Caslon Text", serif;
			text-align: center; /* Centraliza o texto */
            font-size: 0.95rem;
            text-transform: uppercase;
            font-weight: 600;
            color: white;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .now-playing {
			text-align: center; /* Centraliza o texto */
            font-size: 0.8rem;
            color: #fff;
        }

        .player-controls {
            align-items: center;
            gap: 15px;
            padding: 10px;
        }

        .play-btn {
			margin: auto; /* Centraliza horizontalmente */
			padding: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(209, 21, 21, 0.45);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            position: relative;
        }

        #playBtn.connected {
  background: green; /* cyan -> teal */
  color: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 4px 12px rgba(3, 105, 161, 0.15);
  animation: pulse 1s infinite;
}
        .play-btn:hover {
            transform: scale(1.2);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
            box-shadow: 
                0 12px 35px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        .play-btn:active {
            transform: scale(0.98);
        }

        .volume-control {
            display: flex;
            margin-top:20px;
            align-items: center;
            gap: 10px;
        }

        .volume-icon {
            color: white;
            font-size: 1rem;
        }

        .volume-slider {
			padding-top: 3px;
        	margin: auto; /* Centraliza horizontalmente */
            width: 80%;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            outline: none;
            cursor: pointer;
            -webkit-appearance: none;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            background: rgba 255, 255, 255, 0.9;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 
                0 2px 8px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.2s ease;
        }

        .volume-slider::-moz-range-thumb {
            width: 14px;
            height: 14px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            box-shadow: 
                0 2px 8px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .status-indicator {
			margin: auto;
			margin-top: 20px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4ecdc4, #44a08d);
            animation: pulse 2s infinite;
            box-shadow: 
                0 0 6px rgba(78, 205, 196, 0.5),
                0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .status-indicator.disconnected {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            animation: none;
            box-shadow: 
                0 0 6px rgba(255, 107, 107, 0.5),
                0 1px 2px rgba(0, 0, 0, 0.2);
        }

        @keyframes pulse {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            90% {
                opacity: 1;
                transform: scale(1);
            }
            99% {
                opacity: 0.7;
                transform: scale(1.5);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @media (max-width: 768px) {
            
        }

        @media (max-width: 480px) {
           
        }

        .equalizer {
            display: flex;
            align-items: flex-end;
            gap: 1px;
            height: 12px;
            margin-left: 8px;
        }

        .bar {
            width: 3px;
            background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
            border-radius: 2px;
            animation: equalizer 1.5s ease-in-out infinite alternate;
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
        }

        .bar:nth-child(1) { animation-delay: 0s; }
        .bar:nth-child(2) { animation-delay: 0.1s; }
        .bar:nth-child(3) { animation-delay: 0.2s; }
        .bar:nth-child(4) { animation-delay: 0.3s; }
        .bar:nth-child(5) { animation-delay: 0.4s; }

        @keyframes equalizer {
            0% { height: 4px; }
            100% { height: 16px; }
        }