/*
 * Radio Directory WP – station player card and bottom mini player.
 * Loaded only on single station pages and where [rdw_station] is used.
 * Colours are set explicitly so contrast does not depend on the theme.
 */

.rdw-player,
.rdw-mini {
	--rdw-accent: #4338ca;
	--rdw-accent-hover: #3730a3;
	--rdw-live: #b91c1c;
	--rdw-text: #1f2937;
	--rdw-muted: #4b5563;
	--rdw-surface: #ffffff;
	--rdw-border: #e5e7eb;
	--rdw-focus: #2563eb;
}

.rdw-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rdw-icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	fill: currentColor;
}

/* ---------------------------------------------------------------- */
/* Station card                                                      */
/* ---------------------------------------------------------------- */

.rdw-player {
	container-type: inline-size;
	margin: 0 0 1.5em;
	color: var(--rdw-text);
	background: var(--rdw-surface);
	border: 1px solid var(--rdw-border);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 16px rgba(17, 24, 39, 0.06);
	font-size: 1rem;
	line-height: 1.4;
}

.rdw-player__inner {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr) auto;
	grid-template-areas:
		"art info controls"
		"art status status";
	gap: 0.5rem 1.25rem;
	align-items: center;
	padding: 1.25rem;
}

.rdw-player__art {
	grid-area: art;
	align-self: start;
	width: 112px;
	height: 112px;
	border-radius: 10px;
	overflow: hidden;
	background: #f3f4f6;
}

.rdw-player__logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rdw-player__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #9ca3af;
	font-size: 2.25rem;
}

.rdw-player__info {
	grid-area: info;
	min-width: 0;
}

.rdw-player__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.35rem;
}

.rdw-player__live {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15em 0.55em;
	color: #ffffff;
	background: var(--rdw-live);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rdw-player__live-dot {
	width: 0.5em;
	height: 0.5em;
	background: currentColor;
	border-radius: 50%;
}

.rdw-player[data-rdw-state="playing"] .rdw-player__live-dot {
	animation: rdw-pulse 1.4s ease-in-out infinite;
}

.rdw-player__frequency {
	color: var(--rdw-player-text-color, var(--rdw-muted));
	font-size: 0.85rem;
	font-weight: 600;
}

.rdw-player .rdw-player__name {
	margin: 0;
	color: var(--rdw-player-text-color, var(--rdw-text));
	font-size: 1.35rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rdw-player__name a {
	color: inherit;
	text-decoration: none;
}

.rdw-player__name a:hover {
	text-decoration: underline;
}

/* With a custom text color, the name link must follow it even if the theme styles links. */
.rdw-player--custom-text .rdw-player__name a {
	color: inherit;
}

.rdw-player__callsign {
	color: var(--rdw-player-text-color, var(--rdw-muted));
	font-size: 0.85rem;
	font-weight: 600;
}

.rdw-player .rdw-player__links {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
}

.rdw-player a.rdw-player__website {
	color: var(--rdw-player-text-color, var(--rdw-accent));
	text-decoration: underline;
}

.rdw-player .rdw-player__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin: 0.35rem 0 0;
	padding: 0;
	color: var(--rdw-player-text-color, var(--rdw-muted));
	font-size: 0.9rem;
	list-style: none;
}

.rdw-player .rdw-player__tags li {
	margin: 0;
}

.rdw-player .rdw-player__tags li + li::before {
	content: "·";
	margin-right: 0.75rem;
}

.rdw-player .rdw-player__now {
	margin: 0.6rem 0 0;
	color: var(--rdw-player-text-color, var(--rdw-muted));
	font-size: 0.875rem;
}

.rdw-player__now-label {
	font-weight: 600;
}

.rdw-player__controls {
	grid-area: controls;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.rdw-player__controls[hidden] {
	display: none;
}

.rdw-player .rdw-player__toggle,
.rdw-mini .rdw-mini__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	color: #ffffff;
	background: var(--rdw-accent);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.rdw-player .rdw-player__toggle {
	width: 64px;
	height: 64px;
	font-size: 1.4rem;
}

.rdw-player .rdw-player__toggle:hover,
.rdw-mini .rdw-mini__toggle:hover {
	background: var(--rdw-accent-hover);
}

.rdw-player .rdw-player__toggle:active,
.rdw-mini .rdw-mini__toggle:active {
	transform: scale(0.96);
}

.rdw-player__toggle .rdw-icon--pause,
.rdw-player__toggle.is-active .rdw-icon--play,
.rdw-mini__toggle .rdw-icon--pause,
.rdw-mini__toggle.is-active .rdw-icon--play {
	display: none;
}

.rdw-player__toggle.is-active .rdw-icon--pause,
.rdw-mini__toggle.is-active .rdw-icon--pause {
	display: block;
}

.rdw-player[data-rdw-state="connecting"] .rdw-player__toggle,
.rdw-mini[data-rdw-state="connecting"] .rdw-mini__toggle {
	animation: rdw-connecting 1.2s ease-in-out infinite;
}

.rdw-player__volume,
.rdw-mini__volume {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--rdw-muted);
}

.rdw-player__volume input[type="range"],
.rdw-mini__volume input[type="range"] {
	width: 110px;
	margin: 0;
	accent-color: var(--rdw-accent);
	cursor: pointer;
}

.rdw-player .rdw-player__status {
	grid-area: status;
	min-height: 1.4em;
	margin: 0;
	color: var(--rdw-player-text-color, var(--rdw-muted));
	font-size: 0.875rem;
}

.rdw-player .rdw-player__status--notice {
	padding: 0.5rem 0.75rem;
	color: #92400e;
	background: #fffbeb;
	border-radius: 8px;
}

.rdw-player[data-rdw-state="error"] .rdw-player__status {
	color: var(--rdw-player-text-color, var(--rdw-live));
	font-weight: 600;
}

.rdw-player[data-rdw-state="playing"] .rdw-player__status {
	color: var(--rdw-player-text-color, #047857);
	font-weight: 600;
}

/* Cards without a playable stream: no status row reserved when empty. */
.rdw-player--none .rdw-player__inner {
	grid-template-areas: "art info controls";
}

.rdw-player__fallback {
	display: block;
	width: calc(100% - 2.5rem);
	margin: 0 1.25rem 1.25rem;
}

.rdw-player :focus-visible,
.rdw-mini :focus-visible {
	outline: 3px solid var(--rdw-focus);
	outline-offset: 2px;
}

@container (max-width: 560px) {
	.rdw-player__inner {
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"art info"
			"controls controls"
			"status status";
		gap: 0.75rem 1rem;
		padding: 1rem;
	}

	.rdw-player--none .rdw-player__inner {
		grid-template-areas: "art info";
	}

	.rdw-player__art {
		width: 72px;
		height: 72px;
	}

	.rdw-player .rdw-player__name {
		font-size: 1.15rem;
	}

	.rdw-player__controls {
		justify-content: space-between;
	}

	.rdw-player__volume {
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	.rdw-player__volume input[type="range"] {
		width: 100%;
		max-width: 180px;
	}
}

/* ---------------------------------------------------------------- */
/* Bottom mini player                                                */
/* ---------------------------------------------------------------- */

.rdw-mini {
	--rdw-text: #f9fafb;
	--rdw-muted: #d1d5db;
	--rdw-focus: #93c5fd;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9990;
	color: var(--rdw-text);
	background: #111827;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
	font-size: 0.95rem;
	line-height: 1.35;
}

.rdw-mini[hidden] {
	display: none;
}

.rdw-mini__inner {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto auto auto;
	gap: 0.85rem;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
}

.rdw-mini__art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	color: #9ca3af;
	background: #1f2937;
	border-radius: 8px;
}

.rdw-mini__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rdw-mini__info {
	min-width: 0;
}

.rdw-mini .rdw-mini__name,
.rdw-mini .rdw-mini__sub,
.rdw-mini .rdw-mini__now {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rdw-mini .rdw-mini__name {
	color: var(--rdw-text);
	font-weight: 700;
}

.rdw-mini .rdw-mini__sub,
.rdw-mini .rdw-mini__now {
	color: var(--rdw-muted);
	font-size: 0.8rem;
}

.rdw-mini__frequency:not(:empty)::after {
	content: " · ";
}

.rdw-mini__now-label {
	font-weight: 600;
}

.rdw-mini .rdw-mini__toggle {
	width: 44px;
	height: 44px;
	font-size: 1rem;
}

.rdw-mini .rdw-mini__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	color: var(--rdw-muted);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 0.85rem;
}

.rdw-mini .rdw-mini__close:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
}

.rdw-mini__volume input[type="range"] {
	accent-color: #a5b4fc;
}

@media (max-width: 600px) {
	.rdw-mini__inner {
		grid-template-columns: 40px minmax(0, 1fr) auto auto;
		gap: 0.6rem;
		padding-right: 0.5rem;
		padding-left: 0.75rem;
	}

	.rdw-mini__art {
		width: 40px;
		height: 40px;
	}

	.rdw-mini__volume {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.rdw-mini__volume input[type="range"] {
		width: 100%;
	}
}

@keyframes rdw-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

@keyframes rdw-connecting {
	0%, 100% { box-shadow: 0 0 0 0 rgba(67, 56, 202, 0.45); }
	50% { box-shadow: 0 0 0 8px rgba(67, 56, 202, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.rdw-player *,
	.rdw-mini * {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------------------------------------------------------------- */
/* Mini player: decorative animated wave (visual only)               */
/* ---------------------------------------------------------------- */

/*
 * Two wave layers drawn behind the mini player controls. Purely decorative:
 * they follow the data-rdw-state attribute that player.js already sets on the
 * mini player and never read the audio. They move only while "playing", stay
 * still otherwise, ignore the pointer and disappear with the mini player.
 */
.rdw-mini__inner {
	position: relative;
	z-index: 1;
}

.rdw-mini::before,
.rdw-mini::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: repeat-x;
	background-position: 0 50%;
	background-size: 240px 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
	animation: rdw-mini-wave 3.2s linear infinite;
	animation-play-state: paused;
}

.rdw-mini::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 30 Q30 2 60 30 T120 30 T180 30 T240 30%22 fill=%22none%22 stroke=%22%23a5b4fc%22 stroke-width=%222%22 stroke-opacity=%220.55%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cpath d=%22M0 30 Q30 16 60 30 T120 30 T180 30 T240 30%22 fill=%22none%22 stroke=%22%23a5b4fc%22 stroke-width=%221.5%22 stroke-opacity=%220.35%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
}

.rdw-mini::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 30 Q15 12 30 30 T60 30 T90 30 T120 30 T150 30 T180 30 T210 30 T240 30%22 fill=%22none%22 stroke=%22%23818cf8%22 stroke-width=%221.5%22 stroke-opacity=%220.45%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
	animation-duration: 4.6s;
	animation-direction: reverse;
}

.rdw-mini[data-rdw-state="playing"]::before,
.rdw-mini[data-rdw-state="playing"]::after {
	animation-play-state: running;
}

@keyframes rdw-mini-wave {
	from { background-position: 0 50%; }
	to { background-position: -240px 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.rdw-mini::before,
	.rdw-mini::after {
		animation: none;
	}
}

/* ---------------------------------------------------------------- */
/* Main player: decorative animated wave behind the controls         */
/* ---------------------------------------------------------------- */

/*
 * Same two wave layers as the mini player, drawn only behind the Play/Pause
 * and volume block. Visual only: they follow the data-rdw-state attribute that
 * player.js already sets on the card. The controls become a stacking context
 * so the layers (z-index -1) sit behind the buttons but above the card
 * background; they ignore the pointer and are hidden with the controls.
 */
.rdw-player__controls {
	position: relative;
	z-index: 0;
}

.rdw-player__controls::before,
.rdw-player__controls::after {
	content: "";
	position: absolute;
	inset: -0.75rem -0.5rem;
	z-index: -1;
	pointer-events: none;
	background-repeat: repeat-x;
	background-position: 0 50%;
	background-size: 240px 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
	animation: rdw-mini-wave 3.2s linear infinite;
	animation-play-state: paused;
}

.rdw-player__controls::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 30 Q30 2 60 30 T120 30 T180 30 T240 30%22 fill=%22none%22 stroke=%22%23a5b4fc%22 stroke-width=%222%22 stroke-opacity=%220.55%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cpath d=%22M0 30 Q30 16 60 30 T120 30 T180 30 T240 30%22 fill=%22none%22 stroke=%22%23a5b4fc%22 stroke-width=%221.5%22 stroke-opacity=%220.35%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
}

.rdw-player__controls::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 30 Q15 12 30 30 T60 30 T90 30 T120 30 T150 30 T180 30 T210 30 T240 30%22 fill=%22none%22 stroke=%22%23818cf8%22 stroke-width=%221.5%22 stroke-opacity=%220.45%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
	animation-duration: 4.6s;
	animation-direction: reverse;
}

.rdw-player[data-rdw-state="playing"] .rdw-player__controls::before,
.rdw-player[data-rdw-state="playing"] .rdw-player__controls::after {
	animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
	.rdw-player__controls::before,
	.rdw-player__controls::after {
		animation: none;
	}
}