:root, .kv-audiobook {
    --plyr-color-main: #ee972b;
}

.kv-audiobook {
	margin: 1rem auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.kv-audiobook-cover {
    width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 400px;
  margin: 0 auto;
    margin-bottom: 0px;
  border-radius: 8px;
  margin-bottom: 2rem;
  box-shadow: 0 0 5px #999;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 1 / 1;
}

/* Current track info */
.kv-audiobook__now {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	justify-content: center;
	margin-bottom: 1rem;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    text-align: center;
}

.kv-audiobook__now.is-scrolling {
	justify-content: flex-start;
	text-align: left;
}

.kv-audiobook__now-title {
	font-weight: 600;
	font-size: 1.1em;
	white-space: nowrap;
	display: inline-block;
	will-change: transform;
}

.kv-audiobook__now-remaining {
	color: #666;
	font-size: 0.9em;
    display: block;
}

/* Custom player controls */
.kv-audiobook__player {
	background: none;
	border: none;
	border-radius: 8px;
	border: 1px solid #ccc;
	padding: 10px;
	position: relative;
	max-width: 400px;
	margin: 0 auto 20px;
}

.kv-audiobook__controls {
	display: flex;
	align-items: center;
    justify-content: center;
	gap: 1rem;
	margin-bottom: 0.75rem;
    margin-top: 0.75rem;
}

.kv-audiobook__play-pause,
.kv-audiobook__rewind,
.kv-audiobook__forward {
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
    padding: 0;
    background: none;

}

.kv-audiobook__play-pause {
	width: 48px;
	height: 48px;
	background: url('/wp-content/themes/kinder-verstehen/images/ricepaper_gelber.jpg');
}

.kv-audiobook__play-pause svg {
	width: 24px;
	height: 24px;
	fill: white;
}

.kv-audiobook__rewind svg,
.kv-audiobook__forward svg {
	width: 36px;
	height: 36px;
	fill: var(--plyr-color-main);
}


/* Progress bar */

.kv-audiobook__progress-container-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.kv-audiobook__progress-container {
	flex: 1;
	display: flex;
	align-items: center;
    justify-content: space-between;
	gap: 0.5rem;
}

.kv-audiobook__progress {
	flex: 1;
	height: 6px;
	background: #dee2e6;
	border-radius: 3px;
	cursor: pointer;
	position: relative;
}

.kv-audiobook__progress-fill {
	height: 100%;
	background: var(--plyr-color-main);
	border-radius: 3px;
	transition: width 0.1s;
}

.kv-audiobook__time {
	font-size: 0.85em;
	color: #666;
	font-variant-numeric: tabular-nums;
	min-width: 40px;
	text-align: center;
    display: block;
}

/* Controls row */
.kv-audiobook__controls-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 0.5rem;
}

/* Speed control */

.kv-audiobook__progress-container-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.kv-audiobook__speed-control {
	position: absolute;
	display: flex;
	align-items: center;
	left: 10px;
}

.kv-audiobook__download-control {
	position: absolute;
	display: flex;
	align-items: center;
	right: 10px;
}

.kv-audiobook__speed-btn {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background: #95a0aa;
	border: none;
	border-radius: 9px;
	padding: 0.4rem 0.6rem;
	color: white;
	cursor: pointer;
	font-size: 0.85em;
	transition: background-color 0.2s;
}

.kv-audiobook__download-btn {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background: #28a745;
	border: none;
	border-radius: 9px;
	padding: 0.4rem 0.6rem;
	color: white;
	cursor: pointer;
	font-size: 0.85em;
	transition: background-color 0.2s;
}

.kv-audiobook__speed-btn:hover {
	background: #5a6268;
}

.kv-audiobook__download-btn:hover {
	background: #5a6268;
}

.kv-audiobook__download-btn svg {
	fill: white;
	width: 16px;
	height: 16px;
}

.kv-audiobook__speed-btn svg {
	fill: white;
	width: 16px;
	height: 16px;
}

.kv-audiobook__speed-display {
	font-variant-numeric: tabular-nums;
}

.kv-audiobook__speed-panel {
	background: #eee;
	border-radius: 8px;
	display: none;
	padding: 1rem;
	margin-top: 0.5rem;
}

.kv-audiobook__speed-panel.is-open {
	display: block;
}

.kv-audiobook__download-panel {
	background: #eee;
	border-radius: 8px;
	display: none;
	padding: 1rem;
	margin-top: 0.5rem;
}

.kv-audiobook__download-panel.is-open {
	display: block;
}

.kv-audiobook__download-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kv-audiobook__download-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.kv-audiobook__download-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	text-decoration: none;
	color: #333;
	transition: all 0.2s;
}

.kv-audiobook__download-link:hover {
	border-color: #28a745;
	background: #f8fff9;
	color: #28a745;
}

.kv-audiobook__download-link svg {
	fill: currentColor;
	flex-shrink: 0;
}

.kv-audiobook__download-filename {
	font-weight: 500;
	flex: 1;
}

.kv-audiobook__download-description {
	margin: 0;
	font-size: 0.85em;
	color: #666;
	font-style: italic;
}

.kv-audiobook__download-empty {
	margin: 0;
	padding: 1rem;
	text-align: center;
	color: #666;
	font-style: italic;
}

.kv-audiobook__speed-slider-container {
	margin-bottom: 1rem;
}

.kv-audiobook__speed-slider {
	width: 100%;
	height: 6px;
	background: #888;
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.kv-audiobook__speed-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: var(--plyr-color-main);
	border-radius: 50%;
	cursor: pointer;
}

.kv-audiobook__speed-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: var(--plyr-color-main);
	border-radius: 50%;
	cursor: pointer;
	border: none;
}

.kv-audiobook__speed-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.8em;
	color: #666;
}

.kv-audiobook__speed-label {
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	border-radius: 8px;
	transition: all 0.2s;
	user-select: none;
}

.kv-audiobook__speed-label:hover {
	background: #f8f9fa;
	color: var(--plyr-color-main);
}

.kv-audiobook__speed-label.is-active {
	background: #e3f2fd;
	color: var(--plyr-color-main);
	font-weight: 600;
}

.kv-audiobook__speed-presets {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
}

.kv-audiobook__speed-preset {
	padding: 0.5rem 0.75rem;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	font-size: 0.85em;
	transition: all 0.2s;
	text-align: center;
	flex: 1;
}

.kv-audiobook__speed-preset:hover {
	border-color: var(--plyr-color-main);
	background: #f8f9ff;
}

.kv-audiobook__speed-preset.is-active {
	border-color: var(--plyr-color-main);
	background: #e3f2fd;
	color: var(--plyr-color-main);
	font-weight: 600;
}

/* Chapter list */

.kv-audiobook__chapters-container {
	margin-top: 2rem;
}

.kv-audiobook__chapters-container h2 {
    margin-bottom: 0;
    text-align: center;
    color: #048f26;
}

.kv-audiobook__chapters-container h2 i {
    margin-right: 0.5rem;
    /* flip the icon */
    transform: scaleX(-1);
}

.kv-audiobook__chapters-title {
	font-size: 1.1em;
	font-weight: 600;
}

.kv-audiobook__chapters {
	list-style: none;
	padding: 0 !important;
	margin: 0;
}

.kv-audiobook__chapter {
	margin: 0;
}

.kv-audiobook__chapter-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0.75rem;
    border: none;
	cursor: pointer;
	text-align: left;
	background: none;
}


.kv-audiobook__chapter.is-active .kv-audiobook__chapter-btn {
	border: 1px solid #ccc;
	border-radius: 8px;
}

.kv-audiobook__chapter-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 1rem;
	font-weight: 500;
	color: #666;
}

.kv-audiobook__chapter-duration {
	color: #666;
	font-variant-numeric: tabular-nums;
	font-size: 0.9em;
	white-space: nowrap;
}

.kv-audiobook__notice {
	margin-top: 1rem;
	padding: 0.75rem;
	background: #fff3cd55;
	border: 1px solid #ffeaa7;
	border-radius: 4px;
	color: #856404;
	font-size: 0.9em;
}

/* Disabled state for controls during seeking */
.kv-audiobook__play-pause.is-disabled,
.kv-audiobook__rewind.is-disabled,
.kv-audiobook__forward.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.kv-audiobook__progress.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.kv-audiobook__chapter-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Hide default Plyr controls */
.plyr--audio .plyr__controls {
	display: none !important;
}

@keyframes kv-audiobook-marquee-right {
	0% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(var(--scroll-distance, -100%));
	}
}

/* Hide specific elements when hörbuch single page is opened */
/* This targets only the hörbuch single page (when .hoerbuch-detail is present) */
.woocommerce-account .hoerbuch-detail ~ .woocommerce-MyAccount-navigation,
.woocommerce-account .hoerbuch-detail ~ * .woocommerce-MyAccount-navigation,
.woocommerce-account:has(.hoerbuch-detail) .woocommerce-MyAccount-navigation,
.woocommerce-account:has(.hoerbuch-detail) .main-content > .mobile:first-child,
.woocommerce-account:has(.hoerbuch-detail) article > header:first-child,
.woocommerce-account:has(.hoerbuch-detail) .share-group {
	display: none !important;
}