/*
 * GR_Radiostatus - Panel-Stylesheet (Neufassung fuer PHP 8.5).
 *
 * Ersetzt die frueher pro Theme-Datei hart codierten Tabellen-Layouts,
 * Inline-Styles und <marquee>-Tags durch ein einziges responsives,
 * BEM-aehnliches Komponenten-CSS. Die theme/*.php-Dateien liefern nur noch
 * Struktur + Modifikator-Klassen, die eigentliche Optik kommt von hier.
 */

.rs-panel {
	margin: 0 0 1em;
	text-align: center;
}

.rs-panel__name {
	margin: 0 0 0.5em;
	padding: 0;
	font-size: 1.1em;
	font-weight: 700;
}

.rs-panel__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75em 1.25em;
	text-align: left;
}

.rs-panel__avatar {
	width: 5rem;
	height: 5rem;
	flex: 0 0 auto;
	border-radius: 6px;
	object-fit: cover;
}

.rs-panel--compact .rs-panel__avatar {
	width: 3.5rem;
	height: 3.5rem;
}

.rs-panel--stacked .rs-panel__body {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.rs-panel--stacked .rs-panel__avatar {
	margin: 0 auto;
}

.rs-panel--boxed {
	padding: 0.75em 1em;
	border: 1px solid rgba(127, 127, 127, 0.3);
	border-radius: 8px;
}

.rs-panel--align-end .rs-panel__body {
	justify-content: flex-end;
	text-align: right;
}

.rs-panel--dark {
	padding: 0.75em 1em;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
}

.rs-panel--dark .rs-panel__label {
	color: #de7037;
}

.rs-panel__info {
	flex: 1 1 14rem;
	min-width: 0;
	/* overflow: hidden ist entscheidend: verhindert, dass die CSS-Marquee-
	   Animation (transform) visuell ueber die Grenzen des Flex-Items
	   hinaus in die Avatar- und Player-Spalten hineinlaeuft. */
	overflow: hidden;
	padding: 0 0.6em;
}

.rs-panel__label {
	font-weight: 700;
}

.rs-panel__onair,
.rs-panel__song {
	margin: 0 0 0.35em;
}

.rs-panel__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1em;
	margin: 0 0 0.35em;
	font-size: 0.92em;
	opacity: 0.85;
}

.rs-panel__side {
	flex: 0 0 auto;
	text-align: center;
}

.rs-panel__player {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	justify-content: center;
	margin: 0.25em 0;
}

.rs-panel__player a,
.rs-panel__player img {
	display: inline-block;
	vertical-align: middle;
}

.rs-panel__player img {
	border: 0;
}

.rs-panel__player-trigger {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: pointer;
	line-height: 0;
}

.rs-panel__gb {
	margin-top: 0.35em;
}

.rs-panel__gb-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.rs-panel__gb-button img {
	width: 1.6rem;
	height: auto;
}

/* "Marquee"-Ersatz: reines CSS, respektiert reduzierte Bewegung,
   pausiert bei Hover/Fokus (entspricht dem alten onmouseover-Verhalten). */
.rs-marquee {
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	max-width: 100%;
}

.rs-marquee__track {
	display: inline-block;
	padding-left: 0;
	will-change: transform;
}

.rs-marquee--scroll .rs-marquee__track {
	padding-left: 100%;
	animation: rs-marquee-scroll 16s linear infinite;
}

.rs-marquee--scroll:hover .rs-marquee__track,
.rs-marquee--scroll:focus-within .rs-marquee__track {
	animation-play-state: paused;
}

@keyframes rs-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
	.rs-marquee--scroll .rs-marquee__track {
		animation: none;
		padding-left: 0;
	}
	.rs-marquee {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* Lange Songtitel in schmalen Sidebar-Panels: abschneiden statt umbrechen,
   keine Animation noetig. */
.rs-panel--compact .rs-marquee {
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rs-panel--compact .rs-marquee--scroll .rs-marquee__track {
	padding-left: 0;
	animation: none;
}

.rs-panel--compact .rs-marquee--scroll {
	text-overflow: ellipsis;
}

.rs-offline {
	text-align: center;
}

.rs-offline img {
	max-width: 100%;
	height: auto;
}

.rs-offline__error {
	margin-top: 0.5em;
	color: #c0392b;
	font-size: 0.9em;
}

.rs-center {
	text-align: center;
}

.rs-footer {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid rgba(127, 127, 127, 0.3);
	text-align: center;
	font-size: 0.85em;
}

.rs-license-notice {
	padding: 0.6em 0.9em;
	border: 1px solid rgba(192, 57, 43, 0.4);
	border-radius: 6px;
	background: rgba(192, 57, 43, 0.08);
	color: #c0392b;
	font-size: 0.9em;
}

.rs-license-notice a {
	color: inherit;
	text-decoration: underline;
}

/* Gruss-/Wunschbox-Formular */
.rs-gb-form {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

.rs-gb-form p {
	margin: 0 0 0.6em;
	font-weight: 600;
}

.rs-gb-form__field {
	margin: 0 0 0.6em;
}

.rs-gb-form__field label {
	display: block;
	margin-bottom: 0.2em;
	font-weight: 600;
	font-size: 0.92em;
}

/* Felder erhalten einen leicht hervorgehobenen Hintergrund wie die
   PHP-Fusion tbl2-Klasse, damit das Formular auch in schmalen
   Sidebar-Panels gut lesbar bleibt. */
.rs-gb-form input[type="text"],
.rs-gb-form input[type="password"],
.rs-gb-form textarea {
	width: 100%;
	box-sizing: border-box;
	background-color: #f8f8f8;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0.25em 0.4em;
}

.rs-gb-form__required {
	color: #c0392b;
}

.rs-gb-form__captcha {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

@media (min-width: 40rem) {
	.rs-gb-form--wide .rs-gb-form__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 1.25em;
	}
}