/* Player Rádio PT - card preto */
.radiopt-card {
	background-color: #202020;
	color: #fff;
	border-radius: 1.5rem;
	padding: 0.9rem 1.75rem;
	box-shadow: none;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto; /* permite esticar dentro do contêiner */
	min-height: 0; /* evita overflow em layouts flex */
}


.radiopt-header, 
.radiopt-main {
	border-bottom: 1px solid #414042;
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
}

.radiopt-logo {
	width: 143px;
	height: 50px;
	display: block;
}

.radiopt-header-link {
	text-decoration: none;
	color: inherit !important;
	display: inline-flex;
	align-items: center;
	gap: var(--pt2026-secondary-btn-gap);
	border-bottom: var(--pt2026-secondary-btn-line-width) solid var(--pt2026-secondary-btn-line);
	padding-bottom: var(--pt2026-secondary-btn-pad-underline);
	transition: border-bottom-color var(--pt2026-transition-hover);
}

.radiopt-header-link-label {
	font-family: var(--pt2026-font-body);
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -1%;
	line-height: normal;
	transition: color var(--pt2026-transition-hover);
}

.radiopt-header-link-arrow {
	font-size: 0.95rem;
	color: #fff;
	transition: color var(--pt2026-transition-hover);
}

.radiopt-header-link:hover,
.radiopt-header-link:focus-visible {
	border-bottom-color: transparent;
}

.radiopt-header-link:hover .radiopt-header-link-label,
.radiopt-header-link:focus-visible .radiopt-header-link-label,
.radiopt-header-link:hover .radiopt-header-link-arrow,
.radiopt-header-link:focus-visible .radiopt-header-link-arrow {
	color: var(--pt2026-red);
}

.radiopt-track-title {
	font-size: 0.85rem;
	color: #f5f5f5;
}

.radiopt-live-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #ff1744;
	box-shadow: 0 0 0 4px rgba(255, 23, 68, 0.35);
}

.radiopt-play-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: none;
	border: none;
	color: #ffffff;
	cursor: pointer;
	padding: 0;
}

.radiopt-play-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 3px solid #ff1744;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.radiopt-play-icon::before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #ff1744;
	margin-left: 3px;
}

.radiopt-play-btn.is-playing .radiopt-play-icon::before {
	content: '';
	width: 14px;
	height: 14px;
	border: none;
	background-image: linear-gradient(to right, #ff1744 0, #ff1744 40%, transparent 40%, transparent 60%, #ff1744 60%, #ff1744 100%);
	background-size: 6px 14px;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 0;
}

.radiopt-play-label {
	font-weight: 700;
	font-size: 1rem;
}

.radiopt-volume-icon {
	color: #ffffff;
	font-size: 1rem;
}

.radiopt-volume-slider {
	width: 140px;
	accent-color: #ff1744;
}

.radiopt-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #ff1744;
}

.radiopt-waveform {
	border-bottom: 1px solid #414042;
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
	/* Waveform decorativo via SVG repetido (sem esticar) */
	flex: 1 1 auto;
	width: 100%;
	min-height: 70px;
	background-image: url('../images/waveform.svg');
	background-repeat: repeat-x;
	background-size: auto;
}

@media (max-width: 575.98px) {
	.radiopt-card {
		padding: 1.25rem 1.25rem;
	}

	.radiopt-volume-slider {
		width: 110px;
	}
}