/* Radio Terminal – Play History
   Tipografija in barve po spletni strani radioterminal.live:
   Poppins 800 verzalke z zbitim razmikom za naslove, JetBrains Mono za besedilo,
   zlata #CAA800, črni naslovni bloki s pikčasto črto. */

.rtph {
	--rtph-accent: #caa800;
	--rtph-ink: #111111;
	--rtph-ink-2: #212121;
	--rtph-muted: #6f6f6f;
	--rtph-line: #e3e3e3;
	--rtph-paper: #ffffff;

	--rtph-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--rtph-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	color: var(--rtph-ink);
	font-family: var(--rtph-mono);
	font-size: 14px;
	line-height: 1.5;
	max-width: 100%;
}

.rtph *,
.rtph *::before,
.rtph *::after { box-sizing: border-box; }

/* Tema strani postavlja svoj slog na vse gumbe (zaobljeni robovi, padding,
   verzalke …). Tu ga za naše gumbe razveljavimo, sicer ploščice dni postanejo
   okrogle, gumb za predvajanje pa se premakne iz sredine. */
.rtph button {
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: normal !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.rtph button::before,
.rtph button::after { content: none; }

/* ============ ZDAJ SE VRTI ============ */

.rtph-now {
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 20px;
	background: var(--rtph-ink);
	color: #fff;
	margin-bottom: 34px;
}

.rtph-now__art {
	position: relative;
	flex: 0 0 auto;
	width: 132px;
	height: 132px;
	overflow: hidden;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Gumb za poslušanje v živo – enak predvajalniku na dnu strani:
   temen krog z zlatim obročem, bel trikotnik, utripajoč obroč pred klikom,
   vrteč se obroč med povezovanjem, pavza med predvajanjem. */
.rtph-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	width: 52px;
	height: 52px;
	box-sizing: border-box;
	border: 2px solid var(--rtph-accent);
	border-radius: 50% !important;
	padding: 0;
	cursor: pointer;
	background: rgba(17, 17, 17, .82);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .45) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	transition: transform .14s, background .14s;
}

.rtph-play:hover {
	transform: translate(-50%, -50%) scale(1.08);
	background: rgba(17, 17, 17, .92);
}

.rtph-play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Ikone so pravi SVG elementi, ne ::before – teme prerade povozijo
   pseudo-elemente in ozadja na gumbih, SVG-ja pa jim ni treba. */
.rtph-play__ico {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	transform: translate(-50%, -50%);
	display: none;
	pointer-events: none;
}

.rtph-play__ico--play,
.rtph-play__ico--pause { fill: #fff; }
.rtph-play__ico--play { margin-left: 2px; }

.rtph-play__ico--load {
	top: 11%;
	left: 11%;
	width: 78%;
	height: 78%;
	/* Vrtenje pomeni transform, zato tega ne sme zasesti sredinjenje. */
	transform: none;
	fill: none;
	stroke: var(--rtph-accent);
	stroke-width: 3;
	stroke-linecap: round;
	/* dva nasprotna loka – enak spinner kot ga kaže predvajalnik na strani */
	stroke-dasharray: 30 17;
	transform-origin: 50% 50%;
	animation: rtph-spin .6s linear infinite;
}

/* Katera ikona je vidna, odloča stanje gumba. */
.rtph-play .rtph-play__ico--play { display: block; }
.rtph-play.is-playing .rtph-play__ico--play { display: none; }
.rtph-play.is-playing .rtph-play__ico--pause { display: block; }
.rtph-play.is-busy .rtph-play__ico--play,
.rtph-play.is-busy .rtph-play__ico--pause { display: none; }
.rtph-play.is-busy .rtph-play__ico--load { display: block; }

/* Obroč, ki utripa, dokler gumb ni pritisnjen – enaka vaba kot na predvajalniku. */
.rtph-play__halo {
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	border-radius: 50%;
	border: 1px solid var(--rtph-accent);
	pointer-events: none;
	animation: rtph-halo 3s ease-in-out infinite;
}

@keyframes rtph-halo {
	0%, 100% { opacity: .1; transform: scale(1); }
	50%      { opacity: .9; transform: scale(1.2); }
}

/* Med nalaganjem in predvajanjem obroč miruje. */
.rtph-play.is-playing .rtph-play__halo,
.rtph-play.is-busy .rtph-play__halo { display: none; }

@keyframes rtph-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.rtph-play__halo { animation: none; opacity: .35; }
	.rtph-play__ico--load { animation-duration: 2s; }
}

.rtph-now__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rtph-now__placeholder {
	font-family: var(--rtph-display);
	font-weight: 800;
	font-size: 40px;
	letter-spacing: -.04em;
	color: var(--rtph-accent);
}

.rtph-now__body { min-width: 0; flex: 1 1 auto; }

.rtph-now__label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	font-family: var(--rtph-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--rtph-accent);
	font-weight: 700;
	margin-bottom: 9px;
}

/* Drugi jezik v oznaki – enak videz, malo umaknjen. */
.rtph-now__label-alt { opacity: .6; }

.rtph-now__title {
	font-family: var(--rtph-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.035em;
	font-size: 27px;
	line-height: 1.08;
	color: #fff;
	overflow-wrap: anywhere;
}

.rtph-now__artist {
	font-family: var(--rtph-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.035em;
	font-size: 27px;
	line-height: 1.08;
	color: rgba(255, 255, 255, .55);
	margin-top: 2px;
	overflow-wrap: anywhere;
}

.rtph-now__meta {
	margin-top: 10px;
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

/* ekvilajzer */
.rtph-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.rtph-eq i {
	width: 3px;
	background: var(--rtph-accent);
	height: 40%;
	animation: rtph-eq .9s ease-in-out infinite;
}
.rtph-eq i:nth-child(2) { animation-delay: .25s; }
.rtph-eq i:nth-child(3) { animation-delay: .5s; }

@keyframes rtph-eq {
	0%, 100% { height: 30%; }
	50% { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.rtph-eq i { animation: none; height: 70%; }
}

/* gumbi povezav v temni kartici */
.rtph-links { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

.rtph-link {
	display: inline-block;
	padding: 7px 15px;
	font-family: var(--rtph-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
	transition: background .14s, border-color .14s, color .14s;
}

.rtph-link:hover,
.rtph-link:focus {
	background: var(--rtph-accent);
	border-color: var(--rtph-accent);
	color: var(--rtph-ink);
}

/* ============ DNEVI V KVADRATKIH ============ */

/* Ploščice se enakomerno raztegnejo čez širino strani in se same prelomijo. */
.rtph-days {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 5px;
	margin: 0 0 16px;
}

.rtph-day {
	min-width: 0;
	height: 72px !important;
	border-radius: 0 !important;
	background: var(--rtph-ink);
	border: 0;
	padding: 8px 4px;
	cursor: pointer;
	font: inherit;
	text-align: center;
	color: var(--rtph-accent);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	transition: background .12s, color .12s, transform .12s;
}

.rtph-day:hover { transform: translateY(-2px); }

.rtph-day.is-active {
	background: var(--rtph-accent);
	color: var(--rtph-ink);
}

.rtph-day__name {
	display: block;
	font-family: var(--rtph-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.02em;
	font-size: 15px;
	line-height: 1.1;
}

.rtph-day__date {
	display: block;
	font-family: var(--rtph-mono);
	font-size: 10.5px;
	opacity: .8;
	white-space: nowrap;
}

.rtph-day__count {
	display: block;
	font-family: var(--rtph-mono);
	font-size: 10px;
	opacity: .5;
	font-variant-numeric: tabular-nums;
}

.rtph-list { min-height: 60px; }
.rtph-list.is-loading { opacity: .4; transition: opacity .15s; }

/* ============ RAZDELKA: DANES / PREJŠNJI DNEVI ============ */

.rtph-section { margin: 0 0 26px; }
/* Vrstni red: zdaj se vrti -> arhiv z dnevi -> danes. */
.rtph-section--past { margin-top: 0; margin-bottom: 26px; }
.rtph-section--past .rtph-list:empty { display: none; }

.rtph-section__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	padding: 0;
	font-weight: 400;
}

.rtph-section__label {
	flex: 0 0 auto;
	background: var(--rtph-ink);
	color: #fff;
	font-family: var(--rtph-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.035em;
	font-size: 19px;
	line-height: 1.25;
	padding: 4px 13px 6px;
}

.rtph-section__date {
	flex: 0 0 auto;
	font-family: var(--rtph-mono);
	font-size: 12px;
	color: var(--rtph-muted);
	white-space: nowrap;
}

.rtph-section__rule {
	flex: 1 1 auto;
	height: 0;
	border-bottom: 3px dotted var(--rtph-ink);
	opacity: .3;
	min-width: 20px;
}

.rtph-section__count {
	flex: 0 0 auto;
	font-family: var(--rtph-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rtph-muted);
	white-space: nowrap;
}

.rtph-results { min-height: 60px; }
.rtph-results.is-loading { opacity: .4; transition: opacity .15s; }

/* ============ ISKANJE ============ */

.rtph-search { position: relative; margin: 14px 0 10px; }

.rtph-search__input {
	width: 100%;
	background: none !important;
	border: 0 !important;
	border-bottom: 2px solid var(--rtph-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 9px 0;
	font-family: var(--rtph-mono);
	font-size: 13px;
	color: var(--rtph-ink);
	appearance: none;
}

.rtph-search__input::placeholder { color: var(--rtph-muted); opacity: 1; }
.rtph-search__input:focus { outline: 0; border-bottom-color: var(--rtph-accent); }
.rtph-search__input::-webkit-search-cancel-button { display: none; }

.rtph-search__clear {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--rtph-muted);
	cursor: pointer;
	padding: 0 4px;
}

.rtph-search__clear:hover { color: var(--rtph-ink); }

/* ============ SKOK NA URO ============ */

.rtph-hours {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 8px;
}

.rtph-hour-jump {
	border-radius: 0 !important;
	background: none;
	border: 1px solid var(--rtph-line);
	color: var(--rtph-muted);
	font-family: var(--rtph-mono);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	padding: 3px 7px;
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}

.rtph-hour-jump:hover,
.rtph-hour-jump.is-active {
	background: var(--rtph-ink);
	border-color: var(--rtph-ink);
	color: #fff;
}

/* ============ URA KOT NASLOV ============ */

.rtph-hour { margin: 0 0 4px; }

.rtph-hour__head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 0 6px;
	background: var(--rtph-paper);
	font-weight: 400;
}

.rtph-hour__label {
	flex: 0 0 auto;
	font-family: var(--rtph-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.03em;
	font-size: 15px;
	color: var(--rtph-ink);
	font-variant-numeric: tabular-nums;
}

.rtph-hour__rule {
	flex: 1 1 auto;
	height: 0;
	border-bottom: 2px dotted var(--rtph-ink);
	opacity: .25;
}

.rtph-hour__count {
	flex: 0 0 auto;
	font-family: var(--rtph-mono);
	font-size: 10.5px;
	color: var(--rtph-muted);
	font-variant-numeric: tabular-nums;
}

/* datum ob uri pri zadetkih iskanja */
.rtph-track__day {
	display: block;
	font-size: 10px;
	font-weight: 400;
	color: var(--rtph-muted);
	margin-top: 1px;
}

/* ============ SKLADBE ============ */

.rtph-track {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 2px;
	border-bottom: 1px solid var(--rtph-line);
}

.rtph-track:first-child { border-top: 1px solid var(--rtph-line); }

.rtph-track__time {
	flex: 0 0 46px;
	font-family: var(--rtph-mono);
	font-variant-numeric: tabular-nums;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--rtph-accent);
}

.rtph-track__art {
	position: relative;
	flex: 0 0 auto;
	width: 78px;
	height: 78px;
	overflow: hidden;
	background: #ececec;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b4b4b4;
	font-size: 16px;
}

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

/* Ko slike ni: črna ploščica z začetnicama izvajalca – bolje kot prazen kvadrat. */
.rtph-track__art--mono {
	background: var(--rtph-ink);
	color: var(--rtph-accent);
	font-family: var(--rtph-display);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: -.03em;
}

.rtph-track__body { flex: 1 1 auto; min-width: 0; }

.rtph-track__title {
	font-family: var(--rtph-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--rtph-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rtph-track__artist {
	font-family: var(--rtph-mono);
	font-size: 13px;
	font-weight: 400;
	color: var(--rtph-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 1px;
}

.rtph-track__links { flex: 0 0 auto; display: flex; gap: 7px; }

/* Gumb za 30-sekundni odlomek – ob sliki skladbe, ne na njej. */
.rtph-preview {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	width: 30px;
	height: 30px;
	border-radius: 50% !important;
	border: 0;
	background: var(--rtph-accent);
	box-shadow: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .14s;
}

.rtph-preview:hover { transform: scale(1.12); }

/* Skladba brez odlomka: prazen prostor iste širine, da so naslovi poravnani. */
.rtph-preview--empty {
	background: none;
	box-shadow: none;
	cursor: default;
	pointer-events: none;
}

.rtph-preview__ico {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 13px;
	transform: translate(-50%, -50%);
	display: none;
	pointer-events: none;
}

.rtph-preview__ico--play,
.rtph-preview__ico--pause { fill: var(--rtph-ink); }
.rtph-preview__ico--play { margin-left: 1px; }

.rtph-preview__ico--load {
	top: 14%;
	left: 14%;
	width: 72%;
	height: 72%;
	transform: none;
	fill: none;
	stroke: var(--rtph-ink);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 30 17;
	transform-origin: 50% 50%;
	animation: rtph-spin .6s linear infinite;
}

.rtph-preview .rtph-preview__ico--play { display: block; }
.rtph-preview.is-playing .rtph-preview__ico--play { display: none; }
.rtph-preview.is-playing .rtph-preview__ico--pause { display: block; }
.rtph-preview.is-busy .rtph-preview__ico--play,
.rtph-preview.is-busy .rtph-preview__ico--pause { display: none; }
.rtph-preview.is-busy .rtph-preview__ico--load { display: block; }

.rtph-preview.is-playing { background: var(--rtph-accent); }

@media (prefers-reduced-motion: reduce) {
	.rtph-preview__ico--load { animation-duration: 2s; }
}

/* Značke storitev: uradna ikona, če je datoteka v assets/icons/, sicer črka v barvi znamke. */
.rtph-badge {
	width: 27px;
	height: 27px;
	border-radius: 50% !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rtph-line);
	text-decoration: none;
	font-family: var(--rtph-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0;
	overflow: hidden;
	transition: transform .12s, border-color .12s, background .12s, color .12s;
}

.rtph-badge:hover,
.rtph-badge:focus-visible { transform: scale(1.12); }

/* uradna ikona zapolni krogec */
.rtph-badge--img { border-color: transparent; padding: 0; }
.rtph-badge--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* brez ikone: črka je v barvi znamke, ob prehodu miške se barva zapolni */
.rtph-badge--spotify { color: #1ed760; }
.rtph-badge--apple   { color: #d60017; }
.rtph-badge--tidal   { color: #000000; }
.rtph-badge--qobuz   { color: #007bff; }
.rtph-badge--ytmusic { color: #ff0000; }

.rtph-badge--spotify:hover { background: #1ed760; border-color: #1ed760; color: #fff; }
.rtph-badge--apple:hover   { background: #d60017; border-color: #d60017; color: #fff; }
.rtph-badge--tidal:hover   { background: #000000; border-color: #000000; color: #fff; }
.rtph-badge--qobuz:hover   { background: #007bff; border-color: #007bff; color: #fff; }
.rtph-badge--ytmusic:hover { background: #ff0000; border-color: #ff0000; color: #fff; }

.rtph-badge--img:hover { background: none; }

.rtph-empty {
	color: var(--rtph-muted);
	padding: 16px 2px 20px;
	font-size: 12.5px;
	letter-spacing: .04em;
}


/* ============ MOBILNO ============ */

@media (max-width: 640px) {
	.rtph-now { gap: 14px; padding: 14px; }
	.rtph-now__art { width: 100px; height: 100px; }
	.rtph-play { width: 44px; height: 44px; }
	.rtph-play__ico { width: 19px; height: 19px; }
	.rtph-now__title,
	.rtph-now__artist { font-size: 19px; }

	.rtph-section__label { font-size: 15px; padding: 3px 9px 5px; }
	.rtph-section__date { font-size: 11px; }
	.rtph-section__count { display: none; }
	.rtph-days { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 4px; }
	.rtph-day { height: 64px; }
	.rtph-day__name { font-size: 13px; }
	.rtph-day__date { font-size: 9.5px; }
	.rtph-day__count { font-size: 9px; }

	.rtph-track { gap: 10px; }
	.rtph-track__time { flex-basis: 40px; font-size: 11.5px; }
	.rtph-track__art { width: 62px; height: 62px; }
	.rtph-preview { width: 28px; height: 28px; }
	.rtph-track__title,
	.rtph-track__artist { font-size: 12px; }
	.rtph-hour__label { font-size: 13px; }
	.rtph-hour-jump { font-size: 10px; padding: 3px 6px; }
	.rtph-search__input { font-size: 12.5px; }
	.rtph-badge { width: 24px; height: 24px; font-size: 9px; }
	.rtph-track__links .rtph-badge--tidal,
	.rtph-track__links .rtph-badge--qobuz { display: none; }
}

/* ============ TEMNA PODLAGA ============ */
/* Če je stran postavljena na temno sekcijo, dodaj razredu .rtph še .rtph--dark. */

.rtph--dark {
	--rtph-ink: #f4f4f4;
	--rtph-ink-2: #ffffff;
	--rtph-muted: #9a9a9a;
	--rtph-line: rgba(255, 255, 255, .13);
	--rtph-paper: #111111;
	color: var(--rtph-ink);
}

.rtph--dark .rtph-now { background: #1b1b1b; }
.rtph--dark .rtph-day { background: #000; }
.rtph--dark .rtph-hour__head { background: var(--rtph-paper); }
.rtph--dark .rtph-hour__rule { border-bottom-color: #fff; opacity: .22; }
.rtph--dark .rtph-search__input { color: #f4f4f4; border-bottom-color: #f4f4f4; }
.rtph--dark .rtph-hour-jump:hover,
.rtph--dark .rtph-hour-jump.is-active { background: var(--rtph-accent); border-color: var(--rtph-accent); color: #111; }
.rtph--dark .rtph-track__art { background: #262626; color: #666; }
.rtph--dark .rtph-track__art--mono { background: #000; color: var(--rtph-accent); }
.rtph--dark .rtph-badge--tidal { color: #f4f4f4; }
.rtph--dark .rtph-badge--tidal:hover { background: #fff; border-color: #fff; color: #111; }
.rtph--dark .rtph-preview__ico--play,
.rtph--dark .rtph-preview__ico--pause { fill: #111; }

/* ============ TRDNI POPRAVKI ============
   Nekatere teme (tudi ProRadio) postavljajo svoj slog z !important na vse
   gumbe, povezave in polja — in to prek ID selektorja (`#page button { … }`),
   ki premaga navadno pravilo z razredom, pa čeprav ima naše prav tako
   !important. Zato so pravila spodaj pisana s `:not(#_):not(#__)`: to ne
   izbere ničesar dodatnega, doda pa specifičnost dveh ID-jev, tako da imamo
   zadnjo besedo. Brez tega gumb za odlomek napihne na celotno sliko
   (`width: 100% !important`), ploščice dni pa postanejo okrogle. */
.rtph:not(#_):not(#__) .rtph-play,
.rtph:not(#_):not(#__) .rtph-preview,
.rtph:not(#_):not(#__) .rtph-badge {
	border-radius: 50% !important;
	padding: 0 !important;
}

/* Tema doda gumbom vodoravni padding – iz kroga nastane elipsa. */
.rtph:not(#_):not(#__) .rtph-play { width: 52px !important; height: 52px !important; }

/* Sličice ovitkov – tema jih ne sme krčiti ne raztegovati. */
.rtph:not(#_):not(#__) .rtph-now__art { width: 132px !important; height: 132px !important; flex: 0 0 auto !important; }
.rtph:not(#_):not(#__) .rtph-track__art { width: 78px !important; height: 78px !important; flex: 0 0 auto !important; }

@media (max-width: 640px) {
	.rtph:not(#_):not(#__) .rtph-now__art { width: 100px !important; height: 100px !important; }
	.rtph:not(#_):not(#__) .rtph-track__art { width: 62px !important; height: 62px !important; }
}
.rtph:not(#_):not(#__) .rtph-preview { width: 30px !important; height: 30px !important; }
.rtph:not(#_):not(#__) .rtph-badge { width: 27px !important; height: 27px !important; }

.rtph:not(#_):not(#__) .rtph-day,
.rtph:not(#_):not(#__) .rtph-hour-jump {
	border-radius: 0 !important;
}

.rtph:not(#_):not(#__) .rtph-day { padding: 8px 4px !important; }
.rtph:not(#_):not(#__) .rtph-hour-jump { padding: 3px 7px !important; min-height: 0 !important; }

/* Povezave v temni kartici: tema jih sicer spremeni v sive tablete. */
.rtph:not(#_):not(#__) .rtph-link {
	border-radius: 0 !important;
	background: none !important;
	padding: 7px 15px !important;
	min-height: 0 !important;
	line-height: normal !important;
	color: #fff !important;
}

.rtph:not(#_):not(#__) .rtph-link:hover,
.rtph:not(#_):not(#__) .rtph-link:focus {
	background: var(--rtph-accent) !important;
	border-color: var(--rtph-accent) !important;
	color: var(--rtph-ink) !important;
}

.rtph:not(#_):not(#__) .rtph-search__input {
	border: 0 !important;
	border-bottom: 2px solid var(--rtph-ink) !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 9px 0 !important;
	min-height: 0 !important;
	line-height: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.rtph:not(#_):not(#__) .rtph-badge,
.rtph:not(#_):not(#__) .rtph-link {
	margin: 0 !important;
	min-height: 0 !important;
	line-height: normal !important;
}

.rtph:not(#_):not(#__) .rtph-badge {
	padding: 0 !important;
	background: none;
}

/* Barve: tema vsiljuje svetlo ozadje vsem gumbom in povezavam. */
.rtph:not(#_):not(#__) .rtph-play,
.rtph:not(#_):not(#__) .rtph-play.is-busy {
	background: rgba(17, 17, 17, .82) !important;
	border: 2px solid var(--rtph-accent) !important;
	overflow: visible !important;
}

.rtph:not(#_):not(#__) .rtph-play:hover { background: rgba(17, 17, 17, .92) !important; }

.rtph:not(#_):not(#__) .rtph-preview {
	background: var(--rtph-accent) !important;
	border: 0 !important;
}

.rtph:not(#_):not(#__) .rtph-preview--empty { background: none !important; }

.rtph:not(#_):not(#__) .rtph-day {
	background: var(--rtph-ink) !important;
	border: 0 !important;
	color: var(--rtph-accent) !important;
}

.rtph:not(#_):not(#__) .rtph-day.is-active {
	background: var(--rtph-accent) !important;
	color: var(--rtph-ink) !important;
}

.rtph:not(#_):not(#__) .rtph-hour-jump {
	background: none !important;
	border: 1px solid var(--rtph-line) !important;
	color: var(--rtph-muted) !important;
}

.rtph:not(#_):not(#__) .rtph-hour-jump:hover,
.rtph:not(#_):not(#__) .rtph-hour-jump.is-active {
	background: var(--rtph-ink) !important;
	border-color: var(--rtph-ink) !important;
	color: #fff !important;
}

.rtph:not(#_):not(#__) .rtph-badge {
	background: none !important;
	border: 1px solid var(--rtph-line) !important;
}

.rtph:not(#_):not(#__) .rtph-badge--spotify:hover { background: #1ed760 !important; border-color: #1ed760 !important; color: #fff !important; }
.rtph:not(#_):not(#__) .rtph-badge--apple:hover   { background: #d60017 !important; border-color: #d60017 !important; color: #fff !important; }
.rtph:not(#_):not(#__) .rtph-badge--tidal:hover   { background: #000000 !important; border-color: #000000 !important; color: #fff !important; }
.rtph:not(#_):not(#__) .rtph-badge--qobuz:hover   { background: #007bff !important; border-color: #007bff !important; color: #fff !important; }
.rtph:not(#_):not(#__) .rtph-badge--ytmusic:hover { background: #ff0000 !important; border-color: #ff0000 !important; color: #fff !important; }
.rtph:not(#_):not(#__) .rtph-badge--img:hover { background: none !important; border-color: transparent !important; }

.rtph:not(#_):not(#__) .rtph-section__label,
.rtph:not(#_):not(#__) .rtph-now { background: var(--rtph-ink) !important; }

.rtph:not(#_):not(#__) .rtph-badge--spotify { color: #1ed760 !important; }
.rtph:not(#_):not(#__) .rtph-badge--apple   { color: #d60017 !important; }
.rtph:not(#_):not(#__) .rtph-badge--tidal   { color: #000000 !important; }
.rtph:not(#_):not(#__) .rtph-badge--qobuz   { color: #007bff !important; }
.rtph:not(#_):not(#__) .rtph-badge--ytmusic { color: #ff0000 !important; }

/* Tema postavi gumbom position: relative in jih pusti krčiti v flexu.
   Gumb za živo poslušanje je na sredini ovitka (ta ima overflow: hidden),
   zato bi brez tega odletel iz slike in izginil. */
.rtph:not(#_):not(#__) .rtph-play {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	z-index: 3 !important;
}

/* Gumb za odlomek stoji ob sliki – ne sme se krčiti ali raztegovati. */
.rtph:not(#_):not(#__) .rtph-preview {
	position: relative !important;
	transform: none !important;
	align-self: center !important;
}

.rtph:not(#_):not(#__) .rtph-play,
.rtph:not(#_):not(#__) .rtph-preview {
	flex: 0 0 auto !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	box-shadow: none !important;
	text-indent: 0 !important;
	line-height: 1 !important;
	font-size: 0 !important;
	overflow: visible !important;
	aspect-ratio: auto !important;
}

/* Ikone: tema jim rada nastavi display, barvo ali animacijo – tu jih pribijemo.
   Katera je vidna, odloča stanje gumba (mirovanje / nalaganje / predvajanje). */
.rtph:not(#_):not(#__) .rtph-play__ico,
.rtph:not(#_):not(#__) .rtph-preview__ico {
	position: absolute !important;
	display: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
}

.rtph:not(#_):not(#__) .rtph-play .rtph-play__ico--play,
.rtph:not(#_):not(#__) .rtph-play.is-playing .rtph-play__ico--pause,
.rtph:not(#_):not(#__) .rtph-play.is-busy .rtph-play__ico--load,
.rtph:not(#_):not(#__) .rtph-preview .rtph-preview__ico--play,
.rtph:not(#_):not(#__) .rtph-preview.is-playing .rtph-preview__ico--pause,
.rtph:not(#_):not(#__) .rtph-preview.is-busy .rtph-preview__ico--load { display: block !important; }

.rtph:not(#_):not(#__) .rtph-play.is-playing .rtph-play__ico--play,
.rtph:not(#_):not(#__) .rtph-play.is-busy .rtph-play__ico--play,
.rtph:not(#_):not(#__) .rtph-play.is-busy .rtph-play__ico--pause,
.rtph:not(#_):not(#__) .rtph-preview.is-playing .rtph-preview__ico--play,
.rtph:not(#_):not(#__) .rtph-preview.is-busy .rtph-preview__ico--play,
.rtph:not(#_):not(#__) .rtph-preview.is-busy .rtph-preview__ico--pause { display: none !important; }

.rtph:not(#_):not(#__) .rtph-play__ico--play path,
.rtph:not(#_):not(#__) .rtph-play__ico--pause path { fill: #fff !important; }

.rtph:not(#_):not(#__) .rtph-preview__ico--play path,
.rtph:not(#_):not(#__) .rtph-preview__ico--pause path { fill: var(--rtph-ink) !important; }

.rtph:not(#_):not(#__) .rtph-play__ico--load circle { stroke: var(--rtph-accent) !important; fill: none !important; }
.rtph:not(#_):not(#__) .rtph-preview__ico--load circle { stroke: var(--rtph-ink) !important; fill: none !important; }

.rtph:not(#_):not(#__) .rtph-play__ico--load,
.rtph:not(#_):not(#__) .rtph-preview__ico--load {
	animation: rtph-spin .6s linear infinite !important;
	transform-origin: 50% 50% !important;
	top: 11% !important;
	left: 11% !important;
}

.rtph:not(#_):not(#__) .rtph-preview__ico--load { top: 14% !important; left: 14% !important; }

.rtph:not(#_):not(#__) .rtph-play__halo {
	animation: rtph-halo 3s ease-in-out infinite !important;
	border: 1px solid var(--rtph-accent) !important;
	background: none !important;
}

.rtph:not(#_):not(#__) .rtph-play.is-playing .rtph-play__halo,
.rtph:not(#_):not(#__) .rtph-play.is-busy .rtph-play__halo { display: none !important; }

.rtph:not(#_):not(#__) .rtph-play:hover { transform: translate(-50%, -50%) scale(1.08) !important; }
.rtph:not(#_):not(#__) .rtph-preview:hover { transform: scale(1.12) !important; }

@media (max-width: 600px) {
	.rtph:not(#_):not(#__) .rtph-play { width: 44px !important; height: 44px !important; }
	.rtph:not(#_):not(#__) .rtph-preview { width: 28px !important; height: 28px !important; }
}

/* Tema lahko vsili tudi min-width/min-height in width:100%. Zgornja meja
   je zato obvezna: `max-*` velja poleg `width`, `min-*` pa jo mora sprostiti. */
.rtph:not(#_):not(#__) .rtph-play {
	max-width: 52px !important;
	max-height: 52px !important;
	min-width: 52px !important;
	min-height: 52px !important;
	box-sizing: border-box !important;
}

.rtph:not(#_):not(#__) .rtph-preview {
	max-width: 30px !important;
	max-height: 30px !important;
	min-width: 30px !important;
	min-height: 30px !important;
	box-sizing: border-box !important;
}

.rtph:not(#_):not(#__) .rtph-badge {
	max-width: 27px !important;
	max-height: 27px !important;
	min-width: 27px !important;
	min-height: 27px !important;
	box-sizing: border-box !important;
}

@media (max-width: 600px) {
	.rtph:not(#_):not(#__) .rtph-play {
		max-width: 44px !important;
		max-height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
	}

	.rtph:not(#_):not(#__) .rtph-preview {
		max-width: 28px !important;
		max-height: 28px !important;
		min-width: 28px !important;
		min-height: 28px !important;
	}
}