/**
 * Podcast RSS Sync — Frontend Player Styles (V3: Inline within card)
 *
 * No fixed/floating bar. When a card starts playing it grows to reveal an
 * inline progress row. All controls live inside the loop item card.
 */

/* ── Reset helpers ────────────────────────────────────────────────────────── */

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

/* ── Keyframes ────────────────────────────────────────────────────────────── */

@keyframes prs-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. INLINE EPISODE PLAYER
   ═══════════════════════════════════════════════════════════════════════════ */

.prs-player {
	display: flex;
	flex-wrap: wrap;       /* lets the inline controls wrap below the main row */
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: #ffffff;
	border-radius: 8px;
	width: 100%;
	transition: box-shadow 0.2s ease;
}

/* Active card gets a subtle highlight */
.prs-player--active {
	box-shadow: 0 0 0 2px #f26522;
}

/* ── Play / Pause button ────────────────────────────────────────────────── */

.prs-play-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background-color: #f26522;
	color: #ffffff;
	cursor: pointer;
	padding: 0;
	outline-offset: 3px;
	transition: opacity 0.15s ease, transform 0.1s ease;
}

.prs-play-btn:hover:not(:disabled) {
	opacity: 0.85;
	transform: scale(1.06);
}

.prs-play-btn:focus-visible {
	outline: 2px solid #f26522;
}

.prs-play-btn--disabled {
	background-color: #c3c4c7;
	cursor: default;
}

/* ── Icons inside play button ──────────────────────────────────────────── */

.prs-play-btn .prs-icon {
	width: 48%;
	height: 48%;
	display: none;
	pointer-events: none;
}

.prs-play-btn[data-state="play"]    .prs-icon--play    { display: block; }
.prs-play-btn[data-state="play"]    .prs-icon--pause   { display: none;  }
.prs-play-btn[data-state="play"]    .prs-icon--spinner { display: none;  }

.prs-play-btn[data-state="pause"]   .prs-icon--play    { display: none;  }
.prs-play-btn[data-state="pause"]   .prs-icon--pause   { display: block; }
.prs-play-btn[data-state="pause"]   .prs-icon--spinner { display: none;  }

.prs-play-btn[data-state="loading"] .prs-icon--play    { display: none;  }
.prs-play-btn[data-state="loading"] .prs-icon--pause   { display: none;  }
.prs-play-btn[data-state="loading"] .prs-icon--spinner {
	display: block;
	animation: prs-spin 0.75s linear infinite;
}

/* ── Episode info ───────────────────────────────────────────────────────── */

.prs-player-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.prs-player-title {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.prs-player-duration {
	font-size: 0.78rem;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* ── Inline progress controls (shown only on the active card) ───────────── */

.prs-inline-controls {
	display: none;
	width: 100%;
	align-items: center;
	gap: 8px;
	padding-top: 4px;
}

.prs-player--active .prs-inline-controls {
	display: flex;
}

.prs-inline-progress-track {
	flex: 1;
	height: 4px;
	background: rgba(0, 0, 0, 0.12);
	border-radius: 2px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: height 0.15s;
}

.prs-inline-progress-track:hover {
	height: 6px;
}

.prs-inline-progress-fill {
	height: 100%;
	width: 0%;
	background: #f26522;
	border-radius: 2px;
	pointer-events: none;
	transition: width 0.25s linear;
}

.prs-inline-time {
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	flex-shrink: 0;
	opacity: 0.55;
}

/* ── Placeholder (editor / no audio) ───────────────────────────────────── */

.prs-player--placeholder {
	background: #f6f7f7;
	border: 1px dashed #c3c4c7;
}

.prs-placeholder-text {
	color: #8c8f94;
	font-size: 0.8rem;
	white-space: normal;
}

/* ── Hidden audio element (lives in footer) ──────────────────────────────── */
#prs-audio { display: none; }