/**
 * KRISTAL Media Library — Audio Player widget styles.
 *
 * Two scopes here:
 *   - .kml-ap*   : the per-instance card UI (Simple / Descriptive / Full)
 *   - .kmlga-*   : the singleton global mini player (injected once in footer)
 *
 * Gotchas observed (see KRISTAL_KUSTOMS_INSTRUCTIONS.md):
 *   - #6 Longhand font props only — every text style writes font-size /
 *        font-weight / line-height separately so Style → Typography wins.
 *   - #5 Explicit [hidden] override on any element with display: inline-flex
 *        / inline so toggling the attribute actually hides them.
 *
 * Note on root layout: .kml-ap is a flex column so a cache-hint <p> can sit
 * below the main row without breaking flow. The Alignment control drives
 * `align-items` (cross-axis = horizontal in a column container), so the
 * same flex-start / center / flex-end values still map to left / center /
 * right visually.
 */

/* =========================================================================
 * ROOT CONTAINER
 * ========================================================================= */
.kml-ap {
	--kml-ap-live-bg: #E52B51;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: 12px;
	box-sizing: border-box;
}

.kml-ap *,
.kml-ap *::before,
.kml-ap *::after {
	box-sizing: border-box;
}

/* Row layout shared by Simple + Descriptive. */
.kml-ap-row {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.kml-ap--simple .kml-ap-row { gap: 12px; }
.kml-ap--descriptive .kml-ap-row { gap: 20px; }

/* =========================================================================
 * PLAY BUTTON
 * Default state matches the design target: 64×64, no border, soft yellow
 * glow. Border controls remain available (thickness/color) for opt-in.
 * ========================================================================= */
.kml-ap-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	padding: 0;
	background-color: #FFC807;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-width: 0;
	border-style: solid;
	border-color: #000000;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 20px rgba(255, 200, 7, 0.35);
	line-height: 0;
	font: inherit;
	-webkit-tap-highlight-color: transparent;
}

/* Hover only nudges the scale; let the user's Box-Shadow group control own
   the shadow so customization stays consistent across hover/rest. */
.kml-ap-btn:hover,
.kml-ap-btn:focus-visible {
	transform: scale(1.06);
	outline: none;
}

.kml-ap-btn.kml-ap-no-audio {
	opacity: 0.6;
	cursor: not-allowed;
}

.kml-ap-btn.kml-ap-no-audio:hover {
	transform: none;
}

/* Thumbnail overlay sits between the bg image and the icon for contrast. */
.kml-ap-btn-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.35);
	pointer-events: none;
	border-radius: inherit;
}

.kml-ap-btn-icon-wrap {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 0;
}

/* Play icon (SVG triangle). 8% left margin optically centers the
   asymmetric triangle inside a perfect circle. */
.kml-ap-icon {
	width: 40%;
	height: 40%;
	color: #000000;
	display: block;
	margin-left: 8%;
}

/* Pause variant is symmetric — kill the optical-centering margin. */
.kml-ap-icon--pause {
	margin-left: 0;
}

/* =========================================================================
 * TEXT — TITLE + DESCRIPTION (base, used by Descriptive mode)
 * Full-mode-specific overrides are further down in the FULL MODE block.
 * ========================================================================= */
.kml-ap-body {
	flex: 1 1 auto;
	min-width: 0;
}

.kml-ap-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 6px;
}

.kml-ap-desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: #ffffff;
	margin: 0;
}

.kml-ap-desc > *:last-child  { margin-bottom: 0; }
.kml-ap-desc > *:first-child { margin-top: 0; }

/* =========================================================================
 * LIVE PILL (modern red with pulsing white dot)
 * ========================================================================= */
.kml-ap-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background-color: var(--kml-ap-live-bg);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.18em;
	padding: 5px 11px 5px 9px;
	border-radius: 100px;
	text-transform: uppercase;
	flex-shrink: 0;
	box-shadow: 0 2px 12px rgba(229, 43, 81, 0.35);
}

.kml-ap-live[hidden] { display: none; }

.kml-ap-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #ffffff;
	animation: kml-ap-pulse 1.4s ease-in-out infinite;
}

@keyframes kml-ap-pulse {
	0%, 100% { opacity: 1;    transform: scale(1);   }
	50%      { opacity: 0.35; transform: scale(0.7); }
}

/* =========================================================================
 * CACHE-CLEARING TIP (shown when "Enable Cache Hint" content switch is on)
 * ========================================================================= */
.kml-ap-tip {
	text-align: center;
	font-family: 'Gotham', 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: #6B6B7B;
	margin: 0;
	/* Override align-items on the column root so the tip spans full width
	   regardless of the widget Alignment control. */
	align-self: stretch;
}

.kml-ap-tip a {
	color: #FFC807;
	text-decoration: none;
}

.kml-ap-tip a:hover,
.kml-ap-tip a:focus-visible {
	text-decoration: underline;
}

/* In Full mode the tip sits inside the .kml-ap-full card block, so it
   needs breathing room from the controls above. */
.kml-ap--full .kml-ap-tip {
	margin-top: 24px;
}

/* =========================================================================
 * FULL MODE — card layout
 * ========================================================================= */
.kml-ap--full {
	width: 100%;
}

.kml-ap-full {
	width: 100%;
	max-width: 680px;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 200, 7, 0.18);
	border-radius: 20px;
	padding: 40px 48px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
}

.kml-ap-full-header {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}

.kml-ap-full-body {
	display: flex;
	align-items: center;
	gap: 24px;
	min-width: 0;
}

.kml-ap-full-thumb {
	position: relative;
	width: 140px;
	height: 140px;
	flex: 0 0 140px;
	border-width: 0;
	border-style: solid;
	border-color: #FFC807;
	border-radius: 12px;
	overflow: hidden;
	background-color: #0a0a18;
}

.kml-ap-full-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Content column: title + desc are centered to match the design target.
   The controls inside use flex layout, so text-align doesn't affect them. */
.kml-ap-full-content {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

/* Full-mode title: nowrap + ellipsis per design spec. */
.kml-ap--full .kml-ap-title {
	font-family: 'Gotham', 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kml-ap--full .kml-ap-desc {
	font-family: 'Gotham', 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #ffffff;
	margin: 0 0 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kml-ap-full-controls {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
	/* Reset text-align so flex layout works cleanly with internal children. */
	text-align: left;
}

.kml-ap-full-playbtn {
	flex-shrink: 0;
}

/* Stacked play/pause icons inside the Full-mode button. JS flips [hidden]. */
.kml-ap-full-playbtn .kml-ap-icon-play,
.kml-ap-full-playbtn .kml-ap-icon-pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.kml-ap-full-playbtn .kml-ap-icon-play[hidden],
.kml-ap-full-playbtn .kml-ap-icon-pause[hidden] {
	display: none;
}

/* Waveform — animates only when this card is the active source. */
.kml-ap-waveform {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 36px;
	flex: 1;
	max-width: 200px;
}

.kml-ap-waveform span {
	display: block;
	width: 4px;
	height: 8px;
	background-color: #FFC807;
	border-radius: 2px;
	opacity: 0.35;
	transition: height 0.2s ease;
}

.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span {
	animation: kml-ap-wave 1.1s ease-in-out infinite;
	opacity: 1;
}

.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span:nth-child(1)  { animation-delay: 0.00s; }
.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span:nth-child(2)  { animation-delay: 0.10s; }
.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span:nth-child(3)  { animation-delay: 0.20s; }
.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span:nth-child(4)  { animation-delay: 0.15s; }
.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span:nth-child(5)  { animation-delay: 0.05s; }
.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span:nth-child(6)  { animation-delay: 0.25s; }
.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span:nth-child(7)  { animation-delay: 0.10s; }
.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span:nth-child(8)  { animation-delay: 0.20s; }
.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span:nth-child(9)  { animation-delay: 0.00s; }
.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span:nth-child(10) { animation-delay: 0.15s; }

@keyframes kml-ap-wave {
	0%, 100% { height: 8px;  }
	50%      { height: 32px; }
}

/* Volume control (drives the global player volume). */
.kml-ap-volwrap {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	color: #FFC807;
}

.kml-ap-vol-ico {
	flex-shrink: 0;
}

.kml-ap-vol {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 90px;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.2);
	outline: none;
	cursor: pointer;
}

.kml-ap-vol::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #FFC807;
	cursor: pointer;
	border: 0;
}

.kml-ap-vol::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #FFC807;
	cursor: pointer;
	border: 0;
}

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */
@media (max-width: 600px) {
	.kml-ap-full {
		padding: 22px 18px;
	}

	/* Mobile: stack thumbnail / content vertically and center everything. */
	.kml-ap-full-body {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 18px;
	}

	.kml-ap-full-thumb {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		flex: 0 0 auto !important;
		max-width: 240px;
	}

	.kml-ap-full-content {
		width: 100%;
	}

	.kml-ap-full-controls {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		text-align: center;
	}

	.kml-ap-volwrap {
		width: 100%;
		justify-content: center;
	}
}


/* =========================================================================
 * =========================================================================
 *
 *   GLOBAL MINI PLAYER  (.kmlga-*  —  injected once in wp_footer)
 *
 * =========================================================================
 * ========================================================================= */

.kmlga-root {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	pointer-events: none; /* children opt back in */
	font-family: inherit;
}

.kmlga-root * {
	box-sizing: border-box;
}

/* --- Floating launcher (visible while the mini player is hidden) --------- */
.kmlga-launcher {
	position: fixed;
	bottom: 24px;
	left: 24px;           /* LEFT side (per design spec) */
	right: auto;
	z-index: 99998;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: #12121f;
	border: 2px solid #43BC99;
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	opacity: 0;
	transform: scale(0.7) translateY(20px);
	pointer-events: none;
	transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
	font: inherit;
}

.kmlga-launcher.is-visible {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}

.kmlga-launcher:hover {
	background-color: rgba(67, 188, 153, 0.14);
}

.kmlga-launcher-text {
	font-size: 9px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	letter-spacing: 0.02em;
	display: block;
}

.kmlga-launcher-wave {
	display: none;
	align-items: flex-end;
	gap: 2px;
	height: 18px;
}

.kmlga-launcher-wave span {
	display: block;
	width: 3px;
	height: 4px;
	background-color: #43BC99;
	border-radius: 1px;
	animation: kmlga-wave 1s ease-in-out infinite;
}

.kmlga-launcher-wave span:nth-child(1) { animation-delay: 0.10s; }
.kmlga-launcher-wave span:nth-child(2) { animation-delay: 0.40s; }
.kmlga-launcher-wave span:nth-child(3) { animation-delay: 0.20s; }
.kmlga-launcher-wave span:nth-child(4) { animation-delay: 0.60s; }

.kmlga-launcher.is-playing .kmlga-launcher-text { display: none; }
.kmlga-launcher.is-playing .kmlga-launcher-wave { display: flex; }

/* --- Mini player tray --------------------------------------------------- */
.kmlga-mini {
	position: fixed;
	bottom: -120px;        /* hidden until is-visible */
	left: 0;
	right: 0;
	z-index: 99999;
	pointer-events: auto;
	background-color: rgba(18, 18, 31, 0.96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid rgba(67, 188, 153, 0.25);
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	transition: bottom 0.35s cubic-bezier(0.22, 0.68, 0, 1.2);
	box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
	color: #ffffff;
}

.kmlga-mini.is-visible { bottom: 0; }
.kmlga-mini.is-tray-hidden { bottom: -120px; }

.kmlga-left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
}

.kmlga-wave {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 28px;
	flex-shrink: 0;
}

.kmlga-wave span {
	display: block;
	width: 4px;
	background-color: #43BC99;
	border-radius: 2px;
	opacity: 0.3;
	animation: kmlga-wave 1.1s ease-in-out infinite;
}

.kmlga-wave span:nth-child(1) { height: 10px; animation-delay: 0.0s; }
.kmlga-wave span:nth-child(2) { height: 20px; animation-delay: 0.2s; }
.kmlga-wave span:nth-child(3) { height: 28px; animation-delay: 0.4s; }
.kmlga-wave span:nth-child(4) { height: 16px; animation-delay: 0.6s; }
.kmlga-wave span:nth-child(5) { height: 22px; animation-delay: 0.8s; }

.kmlga-mini.is-playing .kmlga-wave span { opacity: 1; }

@keyframes kmlga-wave {
	0%, 100% { transform: scaleY(0.35); }
	50%      { transform: scaleY(1.0);  }
}

.kmlga-info {
	min-width: 0;
}

.kmlga-eyebrow {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: #43BC99;
	text-transform: uppercase;
	margin: 0 0 3px;
}

.kmlga-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 260px;
}

.kmlga-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.kmlga-playbtn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #43BC99;
	border: 1px solid #43BC99;
	color: #0d0d1a;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.18s, transform 0.18s, box-shadow 0.18s;
	flex-shrink: 0;
	box-shadow: 0 4px 16px rgba(67, 188, 153, 0.4);
	padding: 0;
	font: inherit;
}

.kmlga-playbtn:hover {
	background-color: #55d4ae;
	box-shadow: 0 6px 24px rgba(67, 188, 153, 0.6);
	transform: scale(1.08);
}

.kmlga-right {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.kmlga-volwrap {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #6b6b8b;
}

.kmlga-vol {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 90px;
	height: 4px;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.12);
	outline: none;
	cursor: pointer;
}

.kmlga-vol::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #43BC99;
	cursor: pointer;
	border: 0;
}

.kmlga-vol::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #43BC99;
	cursor: pointer;
	border: 0;
}

.kmlga-close,
.kmlga-hide {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	font: inherit;
	transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
}

/* Prev / Next — same visual weight as close/hide, sit on either side of the
 * big round play button in .kmlga-controls. */
.kmlga-prev,
.kmlga-next {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	font: inherit;
	transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.12s, opacity 0.18s;
	flex-shrink: 0;
}

.kmlga-prev:hover:not([disabled]),
.kmlga-next:hover:not([disabled]) {
	background-color: rgba(67, 188, 153, 0.18);
	border-color: rgba(67, 188, 153, 0.4);
	color: #43BC99;
}

.kmlga-prev:active:not([disabled]),
.kmlga-next:active:not([disabled]) {
	transform: scale(0.94);
}

.kmlga-prev[disabled],
.kmlga-next[disabled] {
	opacity: 0.28;
	cursor: not-allowed;
}

.kmlga-close:hover {
	background-color: rgba(229, 43, 81, 0.22);
	border-color: rgba(229, 43, 81, 0.4);
	color: #E52B51;
}

.kmlga-hide:hover {
	background-color: rgba(67, 188, 153, 0.2);
	border-color: rgba(67, 188, 153, 0.4);
	color: #43BC99;
}

.kmlga-close:active,
.kmlga-hide:active {
	transform: scale(0.95);
}

@media (max-width: 768px) {
	.kmlga-volwrap { display: none; }
	.kmlga-title   { max-width: 140px; }
	.kmlga-mini    { padding: 12px 16px; gap: 10px; }
	.kmlga-launcher{ bottom: 16px; left: 16px; width: 56px; height: 56px; }
	.kmlga-launcher-text { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.kmlga-wave span,
	.kmlga-launcher-wave span,
	.kml-ap-live-dot,
	.kml-ap--full.kml-ap-is-playing .kml-ap-waveform span {
		animation: none !important;
	}
	.kmlga-mini,
	.kmlga-launcher,
	.kml-ap-btn {
		transition: none !important;
	}
}