/**
 * EpisodePress audio player styles.
 *
 * Uses CSS custom properties so themes can override the accent colour
 * without touching this file, e.g.:
 *   .ep-player { --ep-color-accent: #e05a00; }
 */

.ep-player {
	--ep-color-accent:       #0073aa;
	--ep-color-primary:      #1a1a1a;
	--ep-color-bg:           #f8f8f8;
	--ep-color-border:       #ddd;
	--ep-color-progress-bg:  #ddd;
	--ep-radius:             4px;

	background:    var(--ep-color-bg);
	border:        1px solid var(--ep-color-border);
	border-radius: var(--ep-radius);
	padding:       12px 16px;
	margin:        1.5em 0;
	box-sizing:    border-box;
	font-size:     inherit;
}

/* ── Controls row ── */

.ep-player__controls {
	display:     flex;
	align-items: center;
	gap:         12px;
}

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

.ep-player__play-btn {
	flex-shrink:     0;
	width:           40px;
	height:          40px;
	border-radius:   50%;
	border:          2px solid var(--ep-color-accent);
	background:      var(--ep-color-accent);
	color:           #fff;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0;
	transition:      opacity 0.15s ease;
}

.ep-player__play-btn:hover,
.ep-player__play-btn:focus-visible {
	opacity: 0.85;
	outline: 2px solid var(--ep-color-accent);
	outline-offset: 2px;
}

.ep-player__icon {
	width:   20px;
	height:  20px;
	fill:    currentColor;
	display: block;
}

/* Toggle play / pause icons based on state class */

.ep-player__icon--pause           { display: none; }
.ep-player--playing .ep-player__icon--play  { display: none; }
.ep-player--playing .ep-player__icon--pause { display: block; }

/* ── Progress area ── */

.ep-player__progress-wrap {
	flex:        1;
	display:     flex;
	align-items: center;
	gap:         8px;
	min-width:   0;
}

.ep-player__current-time,
.ep-player__duration {
	font-size:             0.8em;
	color:                 var(--ep-color-primary);
	white-space:           nowrap;
	flex-shrink:           0;
	font-variant-numeric:  tabular-nums;
	opacity:               0.65;
}

.ep-player__progress-bar {
	flex:          1;
	height:        4px;
	background:    var(--ep-color-progress-bg);
	border-radius: 2px;
	cursor:        pointer;
	position:      relative;
	min-width:     0;
}

.ep-player__progress-bar:focus-visible {
	outline:        2px solid var(--ep-color-accent);
	outline-offset: 3px;
}

.ep-player__progress-fill {
	height:           100%;
	background:       var(--ep-color-accent);
	border-radius:    2px;
	width:            0%;
	pointer-events:   none;
	transition:       width 0.1s linear;
}

/* ── Download link ── */

.ep-player__download {
	flex-shrink: 0;
	color:       var(--ep-color-primary);
	opacity:     0.45;
	transition:  opacity 0.15s ease;
	display:     flex;
	align-items: center;
	line-height: 1;
	text-decoration: none;
}

.ep-player__download:hover,
.ep-player__download:focus-visible {
	opacity: 1;
}

.ep-player__download svg {
	width:   18px;
	height:  18px;
	fill:    currentColor;
	display: block;
}

/* ── Hidden native audio element ── */

.ep-player__audio {
	display: none;
}

/* ── Subscribe buttons ── */

.ep-subscribe {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	margin:    1.5em 0;
}

.ep-subscribe__link {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         7px 14px;
	border-radius:   4px;
	font-size:       0.85em;
	font-weight:     600;
	text-decoration: none;
	color:           #fff;
	transition:      opacity 0.15s ease;
	white-space:     nowrap;
}

.ep-subscribe__link:hover,
.ep-subscribe__link:focus-visible {
	opacity:         0.85;
	text-decoration: none;
	color:           #fff;
}

.ep-subscribe__icon {
	width:       18px;
	height:      18px;
	fill:        currentColor;
	flex-shrink: 0;
	display:     block;
}

/* Platform colours */
.ep-subscribe__link--apple        { background: #872ec4; }
.ep-subscribe__link--spotify      { background: #1DB954; }
.ep-subscribe__link--amazon       { background: #00A8E1; }
.ep-subscribe__link--youtube      { background: #FF0000; }
.ep-subscribe__link--pocket-casts { background: #F43E37; }
.ep-subscribe__link--overcast     { background: #FC7E0F; }
.ep-subscribe__link--rss          { background: #F26522; }

/* ── Timestamp links (in show notes) ── */

.ep-timestamp {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	color:           var(--ep-color-accent, #0073aa);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	white-space:     nowrap;
}

.ep-timestamp:hover,
.ep-timestamp:focus-visible {
	text-decoration: underline;
}

.ep-timestamp__icon {
	width:       0.85em;
	height:      0.85em;
	fill:        currentColor;
	flex-shrink: 0;
	display:     block;
}

/* ── Gutenberg block editor placeholder ── */

.ep-player-block-preview {
	background:    #f8f8f8;
	border:        1px dashed #bbb;
	border-radius: 4px;
	padding:       12px 16px;
	color:         #777;
	font-size:     0.9em;
	display:       flex;
	align-items:   center;
	gap:           8px;
}