/* R90 Now Playing — estils de la franja */

.r90np-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 6px 14px;
	background: var(--r90np-bg, #111111);
	color: var(--r90np-color, #ffffff);
	font-size: var(--r90np-fs, 13px);
	line-height: 1.35;
	text-align: center;
}

.r90np-bar .r90np-icon {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: 0.15em;
	opacity: 0.85;
}

.r90np-bar .r90np-text {
	/* Mai es talla el text: si no cap en una línia, passa a la següent. */
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	max-width: 100%;
}

/* Franja col·locada automàticament pel JS al costat del reproductor.
   L'ordre visual (abans o després del reproductor) i, si el reproductor
   està fixat a la pantalla, la posició exacta de la franja, les calcula
   en temps real el JavaScript (r90np.js), segons si el reproductor està
   enganxat a dalt o a baix del viewport. */
#r90np-wrap {
	display: block;
	width: 100%;
}

/* Elimina qualsevol marge del reproductor o de la franja perquè quedin
   totalment enganxats l'un a l'altre, sense cap espai visible entremig. */
#r90np-wrap > * {
	margin: 0 !important;
}

#r90np-wrap .r90np-bar {
	position: relative;
	z-index: 1;
}


/* Franja de reserva si no es troba el reproductor: fixa a dalt de tot */
.r90np-bar.r90np-fallback-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
}