/* ==========================================================================
   Mammacita Media Player
   ========================================================================== */

/* CSS Custom Properties — über die globale CSS-Variable greifbar, falls
   die Brand-Farbe später einmal von außen gesetzt werden soll. */
:root {
	--mc-mint: #80cbb7;
	--mc-mint-soft: #d6eae7;
	--mc-audio-bg: #f8e8ec;          /* Pinker Pill-Hintergrund */
	--mc-audio-bar: #2a2a2a;         /* Waveform-Balken */
	--mc-audio-bar-played: #80cbb7;  /* Bereits abgespielt */
	--mc-audio-text: #2a2a2a;
	--mc-audio-button-bg: #1a1a1a;
	--mc-audio-button-fg: #ffffff;
	--mc-audio-radius: 999px;
	--mc-audio-height: 40px;
}

/* ==========================================================================
   Video-Player (Plyr-Brand-Overrides)
   ========================================================================== */
.plyr-wrapper,
.mc-video-wrapper {
	margin: 2em 0;
	overflow: hidden;
	border-radius: 16px;
	--plyr-color-main: var(--mc-mint, #80cbb7);
	/* Stabile Aspect-Ratio (auch bei Lazy-Load, bevor Plyr initialisiert hat). */
	aspect-ratio: 16 / 9;
	background-color: #000;
	/* Cover-Bild kommt als CSS-Custom-Property vom Renderer (`--mc-cover`). */
	background-image: var(--mc-cover, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Plyr-Inner-Wrapper transparent, damit unser outer Cover-Bild durchscheint —
   auf iOS WebKit greift Plyrs eigenes `.plyr__poster`-Overlay nicht zuverlässig,
   und Plyrs Default-Background `#000` würde unser Cover sonst überdecken. */
.mc-video-wrapper .plyr,
.plyr-wrapper .plyr,
.mc-video-wrapper .plyr--video,
.plyr-wrapper .plyr--video {
	border-radius: 16px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: transparent !important;
}

/* Sobald das Video läuft, schwarzen Background für Letterboxing zurückbringen. */
.mc-video-wrapper .plyr--playing.plyr--video,
.plyr-wrapper .plyr--playing.plyr--video {
	background: #000 !important;
}

/* Plyrs internes Poster-Overlay nicht ausschalten — wenn es greift, ist das
   das schönere Bild (richtige Skalierung). Wenn nicht (iOS), bleibt das outer
   Cover sichtbar. Wir setzen nur background-color transparent, damit ein
   ungeloadetes Poster nicht schwarz davor liegt. */
.mc-video-wrapper .plyr__poster,
.plyr-wrapper .plyr__poster {
	background-color: transparent !important;
}

/* Generic-Hover: leichter Mint-Schimmer für alle Controls */
.mc-video-wrapper .plyr__control:hover,
.plyr-wrapper .plyr__control:hover,
.mc-video-wrapper .plyr__control[aria-expanded="true"],
.plyr-wrapper .plyr__control[aria-expanded="true"] {
	background: var(--mc-mint-soft, #d6eae7) !important;
}

/* Zentraler Play-Overlay (vor dem ersten Klick) */
.mc-video-wrapper .plyr__control--overlaid,
.plyr-wrapper .plyr__control--overlaid,
.mc-video-wrapper .plyr--paused .plyr__control--overlaid,
.plyr-wrapper .plyr--paused .plyr__control--overlaid,
.mc-video-wrapper .plyr--stopped .plyr__control--overlaid,
.plyr-wrapper .plyr--stopped .plyr__control--overlaid,
.mc-video-wrapper .plyr--playing .plyr__control--overlaid,
.plyr-wrapper .plyr--playing .plyr__control--overlaid {
	background-color: var(--mc-mint, #80cbb7) !important;
	color: #ffffff !important;
}

.mc-video-wrapper .plyr__control--overlaid:hover,
.plyr-wrapper .plyr__control--overlaid:hover {
	background-color: var(--mc-mint, #80cbb7) !important;
	opacity: 0.9 !important;
}

/* Alle Bedienleisten-Controls (Play/Pause, Rewind, FastForward, Mute,
   Captions, Settings, PiP, Airplay, Fullscreen) in Mint einfärben */
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="play"],
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="pause"],
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="rewind"],
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="fast-forward"],
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="mute"],
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="volume"],
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="captions"],
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="settings"],
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="pip"],
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="airplay"],
.mc-video-wrapper .plyr__controls .plyr__control[data-plyr="fullscreen"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="play"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="pause"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="rewind"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="fast-forward"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="mute"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="volume"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="captions"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="settings"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="pip"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="airplay"],
.plyr-wrapper .plyr__controls .plyr__control[data-plyr="fullscreen"] {
	background-color: var(--mc-mint, #80cbb7) !important;
	color: #ffffff !important;
}

/* Fokus-Ring (Tastatur-Navigation) */
.mc-video-wrapper .plyr__controls .plyr__control:focus-visible,
.plyr-wrapper .plyr__controls .plyr__control:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 2px var(--mc-mint-soft, #d6eae7) !important;
}

/* ==========================================================================
   Plyr-Settings-Popover (Geschwindigkeit, Qualität, Untertitel)
   --------------------------------------------------------------------------
   Plyr's Default-Hover ist halbtransparentes Schwarz – in Kombi mit einem
   globalen Theme-Style `button:hover { background: <farbe> }` schlägt
   gerne die Theme-Farbe durch. Wir killen das mit hoher Spezifität.
   ========================================================================== */

/* Menu-Items im Popover (Geschwindigkeit-Optionen etc.) – alle States */
.mc-video-wrapper .plyr__menu__container .plyr__control,
.mc-video-wrapper .plyr__menu__container .plyr__control:hover,
.mc-video-wrapper .plyr__menu__container .plyr__control:focus,
.mc-video-wrapper .plyr__menu__container .plyr__control:focus-visible,
.mc-video-wrapper .plyr__menu__container .plyr__control:active,
.mc-video-wrapper .plyr__menu__container .plyr__control[aria-checked="true"],
.mc-video-wrapper .plyr__menu__container .plyr__control[aria-checked="false"],
.mc-video-wrapper .plyr__menu__container .plyr__control[aria-haspopup="true"],
.plyr-wrapper .plyr__menu__container .plyr__control,
.plyr-wrapper .plyr__menu__container .plyr__control:hover,
.plyr-wrapper .plyr__menu__container .plyr__control:focus,
.plyr-wrapper .plyr__menu__container .plyr__control:focus-visible,
.plyr-wrapper .plyr__menu__container .plyr__control:active,
.plyr-wrapper .plyr__menu__container .plyr__control[aria-checked="true"],
.plyr-wrapper .plyr__menu__container .plyr__control[aria-checked="false"],
.plyr-wrapper .plyr__menu__container .plyr__control[aria-haspopup="true"] {
	background: var(--mc-mint, #80cbb7) !important;
	background-color: var(--mc-mint, #80cbb7) !important;
	background-image: none !important;
	color: #ffffff !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Hover/Focus = etwas weicher, damit Interaktion sichtbar bleibt */
.mc-video-wrapper .plyr__menu__container .plyr__control:hover,
.mc-video-wrapper .plyr__menu__container .plyr__control:focus,
.mc-video-wrapper .plyr__menu__container .plyr__control:focus-visible,
.plyr-wrapper .plyr__menu__container .plyr__control:hover,
.plyr-wrapper .plyr__menu__container .plyr__control:focus,
.plyr-wrapper .plyr__menu__container .plyr__control:focus-visible {
	opacity: 0.9 !important;
}

/* Popover-Container selbst (weißer Rahmen mit Pfeil) */
.mc-video-wrapper .plyr__menu__container,
.plyr-wrapper .plyr__menu__container {
	background: #ffffff !important;
	color: var(--mc-audio-text, #2a2a2a) !important;
	border-radius: 12px !important;
}

/* "Aktueller Wert" rechts neben dem Menüpunkt (z.B. "Normal" bei Geschwindigkeit) */
.mc-video-wrapper .plyr__menu__value,
.plyr-wrapper .plyr__menu__value {
	color: rgba(255, 255, 255, 0.9) !important;
	background: transparent !important;
}

/* ==========================================================================
   Audio-Player (WhatsApp-Voice-Stil)
   ========================================================================== */
/* Das figure-Element ist inline-block, damit text-align: center auf dem
   Elternelement (z.B. via Elementor-Alignment) den Player zentriert.
   width:100% + max-width:560px sorgt dafür, dass er auf engem Container
   100% einnimmt und auf breitem Container bei 560px gekappt wird. */
.mc-audio {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	max-width: 560px;
	margin: 1em 0;
}

.mc-audio .mc-audio__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px;
	background: var(--mc-audio-bg, #f8e8ec);
	border-radius: var(--mc-audio-radius, 999px);
	height: var(--mc-audio-height, 40px);
	box-sizing: border-box;
}

/* Avatar (rund, links) */
.mc-audio__avatar {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

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

/* Waveform — feste Balkenbreite, gleichmäßig verteilt */
.mc-audio .mc-audio__waveform {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between; /* verteilt die festen Balken gleichmäßig */
	gap: 0;
	height: 22px;
	cursor: pointer;
	outline: none;
	padding: 0 2px;
	min-width: 0; /* damit Flex schrumpft */
}

.mc-audio .mc-audio__waveform:focus-visible {
	box-shadow: 0 0 0 2px var(--mc-mint);
	border-radius: 6px;
}

.mc-audio .mc-audio__bar {
	flex: 0 0 3px;          /* feste 3px-Balken statt proportionalem Stretch */
	width: 3px;
	min-width: 0;
	max-width: 3px;
	height: var(--h, 60%);
	background: var(--mc-audio-bar, #2a2a2a);
	border-radius: 2px;
	transition: background-color 0.15s ease;
}

.mc-audio .mc-audio__bar.is-played {
	background: var(--mc-audio-bar-played, #80cbb7);
}

/* Zeit-Anzeige */
.mc-audio__time {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--mc-audio-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
	line-height: 1;
}

.mc-audio__sep {
	margin: 0 3px;
	opacity: 0.5;
}

/* Play / Pause Button — höhere Spezifität + harte Resets,
   damit Theme-Buttons (.elementor-button, button{...} etc.) nicht durchschlagen */
.mc-audio button.mc-audio__play,
.mc-audio button.mc-audio__play[type="button"] {
	/* Reset (überschreibt typische Theme-Styles auf button-Elementen) */
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	outline: 0;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 0;
	font-weight: normal;
	line-height: 1;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	box-shadow: none;
	min-width: 0;
	min-height: 0;
	/* Layout */
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
	/* Farben aus Settings (CSS-Variablen) */
	background: var(--mc-audio-button-bg, #1a1a1a);
	background-image: none;
	color: var(--mc-audio-button-fg, #ffffff);
	/* Transition */
	transition: transform 0.1s ease, background-color 0.2s ease, opacity 0.15s ease;
}

.mc-audio button.mc-audio__play:hover {
	background: var(--mc-audio-button-bg, #1a1a1a);
	opacity: 0.9;
}

.mc-audio button.mc-audio__play:active {
	transform: scale(0.95);
}

.mc-audio button.mc-audio__play:focus-visible {
	outline: 2px solid var(--mc-mint, #80cbb7);
	outline-offset: 2px;
}

.mc-audio .mc-audio__icon {
	width: 14px;
	height: 14px;
	display: block;
	fill: currentColor;
}

/* Play/Pause-Icon-Wechsel */
.mc-audio .mc-audio__icon--pause { display: none; }
.mc-audio.is-playing .mc-audio__icon--play { display: none; }
.mc-audio.is-playing .mc-audio__icon--pause { display: block; }

/* Verstecktes <audio>-Element (Plyr-Default-UI brauchen wir nicht) */
.mc-audio__el {
	display: none !important;
}

/* Mobile-Anpassung – Größen bleiben gleich, nur Gaps werden enger */
@media (max-width: 480px) {
	.mc-audio .mc-audio__inner { gap: 8px; }
	.mc-audio .mc-audio__bar { flex: 0 0 2px; width: 2px; max-width: 2px; }
}