/**
 * MH Magazine Lite — аудиоплеер в стиле темы
 * Цвета: #8e3433 (акцент), #e34a47 (hover)
 */

.mh-audio-player {
	--mh-player-accent: var(--diyradio-accent, #8e3433);
	--mh-player-accent-hover: var(--diyradio-accent-hover, #e34a47);
	--mh-player-bg: #ebebeb;
	--mh-player-border: #d5d5d5;
	--mh-player-text: #1f1e1e;
	--mh-player-text-muted: #666;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	max-width: 100%;
	margin: 0 0 1.5rem;
}

.mh-audio-player audio {
	display: none;
}

.mh-audio-player__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	background: var(--mh-player-bg);
	border: 1px solid var(--mh-player-border);
	border-radius: 10px;
	padding: 1rem 1.25rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mh-audio-player__main {
	flex: 1;
	min-width: 0;
}

.mh-audio-player__progress-wrap {
	margin-bottom: 0.5rem;
}

.mh-audio-player__progress {
	position: relative;
	height: 6px;
	background: var(--mh-player-border);
	border-radius: 3px;
	cursor: pointer;
	touch-action: none;
}

.mh-audio-player__progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	background: var(--mh-player-accent);
	border-radius: 3px;
	transition: width 0.1s linear;
}

.mh-audio-player__progress-handle {
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	background: var(--mh-player-accent);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.15s, background 0.15s;
	pointer-events: none;
}

.mh-audio-player__progress:hover .mh-audio-player__progress-handle,
.mh-audio-player__progress:focus .mh-audio-player__progress-handle {
	opacity: 1;
}

.mh-audio-player__progress-handle:hover {
	background: var(--mh-player-accent-hover);
}

.mh-audio-player__time {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--mh-player-text-muted);
	margin-bottom: 0.75rem;
}

.mh-audio-player__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.mh-audio-player__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--mh-player-accent);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.mh-audio-player__btn:hover {
	background: var(--mh-player-accent-hover);
}

.mh-audio-player__btn:active {
	transform: scale(0.96);
}

.mh-audio-player__btn--play {
	width: 48px;
	height: 48px;
}

.mh-audio-player__btn--play svg {
	width: 28px;
	height: 28px;
}

.mh-audio-player__btn svg {
	display: block;
}

.mh-audio-player__btn svg[hidden] {
	display: none;
}

.mh-audio-player__volume-wrap {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: 0.25rem;
}

.mh-audio-player__volume {
	width: 80px;
}

.mh-audio-player__volume-input {
	width: 100%;
	height: 6px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--mh-player-border);
	border-radius: 3px;
	outline: none;
}

.mh-audio-player__volume-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	background: var(--mh-player-accent);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s;
}

.mh-audio-player__volume-input::-webkit-slider-thumb:hover {
	background: var(--mh-player-accent-hover);
}

.mh-audio-player__volume-input::-moz-range-thumb {
	width: 14px;
	height: 14px;
	background: var(--mh-player-accent);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

/* Тёмная тема */
html.theme-dark .mh-audio-player {
	--mh-player-bg: #3a3a3a;
	--mh-player-border: #555;
	--mh-player-text: #e8e8e8;
	--mh-player-text-muted: #a0a0a0;
}

html.theme-dark .mh-audio-player__inner {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 480px) {
	.mh-audio-player__inner {
		padding: 0.875rem 1rem;
	}
	.mh-audio-player__btn {
		width: 36px;
		height: 36px;
	}
	.mh-audio-player__btn--play {
		width: 44px;
		height: 44px;
	}
	.mh-audio-player__volume {
		width: 60px;
	}
}