/* Miklens Sticky Spotify Podcast Player */
:root {
	--miklens-spotify-blue: #21598c;
	--miklens-spotify-blue-dark: #104567;
	--miklens-spotify-blue-soft: #eef5fb;
	--miklens-spotify-border: #d4e0ea;
	--miklens-spotify-muted: #617080;
	--miklens-spotify-dock-height: 220px;
}

.miklens-spotify-player {
	font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.45;
}

.miklens-spotify-player [hidden] {
	display: none !important;
}

/* Some themes reset hidden elements; the open state is authoritative and mutually exclusive. */
.miklens-spotify-player.is-open .miklens-spotify-player__launcher,
.miklens-spotify-player .miklens-spotify-player__launcher[hidden] {
	display: none !important;
}

.miklens-spotify-player.is-open .miklens-spotify-player__dock {
	display: block !important;
}

.miklens-spotify-player button,
.miklens-spotify-player a {
	font-family: inherit;
}

.miklens-spotify-player__launcher {
	position: fixed;
	left: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 9988;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 48px;
	padding: 11px 18px 11px 14px;
	border: 1px solid var(--miklens-spotify-blue);
	border-radius: 999px;
	background: var(--miklens-spotify-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 7px 22px rgba(16, 69, 103, .2);
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.miklens-spotify-player__launcher:hover,
.miklens-spotify-player__launcher:focus-visible {
	background: var(--miklens-spotify-blue-dark);
	box-shadow: 0 9px 26px rgba(16, 69, 103, .28);
}

.miklens-spotify-player__launcher:focus-visible,
.miklens-spotify-player__control:focus-visible,
.miklens-spotify-player__retry:focus-visible,
.miklens-spotify-player__spotify-link:focus-visible {
	outline: 3px solid #f5b700;
	outline-offset: 3px;
}

.miklens-spotify-player__launcher:disabled {
	opacity: .72;
	cursor: wait;
}

.miklens-spotify-player__launcher-icon {
	display: inline-grid;
	place-items: center;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: #fff;
	color: var(--miklens-spotify-blue);
	font-size: 11px;
	line-height: 1;
}

.miklens-spotify-player__dock {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: max(12px, env(safe-area-inset-bottom));
	width: min(860px, calc(100% - 24px));
	transform: translateX(-50%);
	z-index: 9987;
	padding: 8px 10px 10px;
	background: rgba(255, 255, 255, .98);
	border: 1px solid var(--miklens-spotify-border);
	border-radius: 14px;
	box-shadow: 0 8px 26px rgba(15, 52, 79, .16);
	color: #182735;
}

.miklens-spotify-player__dock-inner {
	width: 100%;
	margin: 0 auto;
}

.miklens-spotify-player__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 44px;
	margin-bottom: 6px;
}

.miklens-spotify-player__identity {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 11px;
}

.miklens-spotify-player__artwork {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 7px;
	object-fit: cover;
	box-shadow: 0 2px 8px rgba(15, 52, 79, .15);
}

.miklens-spotify-player__identity-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.miklens-spotify-player__kicker {
	color: var(--miklens-spotify-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.miklens-spotify-player__title {
	display: block;
	overflow: hidden;
	max-width: min(70vw, 680px);
	color: #18374f;
	font-size: 13px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.miklens-spotify-player__progress {
	color: var(--miklens-spotify-muted);
	font-size: 12px;
}

.miklens-spotify-player__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.miklens-spotify-player__control,
.miklens-spotify-player__retry {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #b9cbd9;
	border-radius: 6px;
	background: #fff;
	color: var(--miklens-spotify-blue-dark);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.miklens-spotify-player__control:hover,
.miklens-spotify-player__control:focus-visible,
.miklens-spotify-player__retry:hover,
.miklens-spotify-player__retry:focus-visible {
	background: var(--miklens-spotify-blue-soft);
	border-color: var(--miklens-spotify-blue);
	color: var(--miklens-spotify-blue-dark);
}

.miklens-spotify-player__toggle {
	width: 36px;
	border-radius: 50%;
	background: var(--miklens-spotify-blue);
	border-color: var(--miklens-spotify-blue);
	color: #fff;
}

.miklens-spotify-player__toggle:hover,
.miklens-spotify-player__toggle:focus-visible {
	background: var(--miklens-spotify-blue-dark);
	color: #fff;
}

.miklens-spotify-player__embed-wrap {
	width: 100%;
	height: 152px;
	overflow: hidden;
	border-radius: 11px;
	background: #f4f7f9;
}

.miklens-spotify-player__embed-host,
.miklens-spotify-player__embed-host iframe {
	display: block;
	width: 100%;
	height: 152px;
	border: 0;
	border-radius: 11px;
}

.miklens-spotify-player__fallback {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0 0;
	color: var(--miklens-spotify-muted);
	font-size: 13px;
}

.miklens-spotify-player__fallback[hidden] {
	display: none !important;
}

.miklens-spotify-player__fallback p {
	margin: 0 auto 0 0;
}

.miklens-spotify-player__spotify-link {
	color: var(--miklens-spotify-blue);
	font-weight: 700;
	text-decoration: underline;
}

.miklens-spotify-player__noscript {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9988;
	padding: 10px 14px;
	border-radius: 6px;
	background: var(--miklens-spotify-blue);
	color: #fff;
}

/* The minimized state keeps the controller mounted so Spotify can retain its position. */
.miklens-spotify-player.is-minimized .miklens-spotify-player__dock {
	padding-top: 6px;
	padding-bottom: 6px;
}

.miklens-spotify-player.is-minimized .miklens-spotify-player__header {
	min-height: 42px;
	margin-bottom: 0;
}

.miklens-spotify-player.is-minimized .miklens-spotify-player__artwork {
	width: 36px;
	height: 36px;
	flex-basis: 36px;
}

.miklens-spotify-player.is-minimized .miklens-spotify-player__embed-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.miklens-spotify-player.is-minimized .miklens-spotify-player__kicker {
	display: none;
}

.miklens-spotify-player.is-minimized .miklens-spotify-player__title {
	max-width: min(60vw, 560px);
}

	body.miklens-spotify-dock-open {
	padding-bottom: calc(var(--miklens-spotify-dock-height) + 24px + env(safe-area-inset-bottom));
}

body.miklens-spotify-dock-minimized {
	padding-bottom: calc(72px + 24px + env(safe-area-inset-bottom));
}

body.miklens-spotify-dock-open #scroll-to-top,
body.miklens-spotify-dock-minimized #scroll-to-top {
	bottom: calc(var(--miklens-spotify-dock-height) + 16px) !important;
}

	body.miklens-spotify-dock-minimized #scroll-to-top {
	bottom: calc(72px + 16px) !important;
}

@media (max-width: 620px) {
	.miklens-spotify-player__launcher {
		left: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom));
		max-width: calc(100vw - 24px);
		font-size: 13px;
	}

	.miklens-spotify-player__dock {
		bottom: max(8px, env(safe-area-inset-bottom));
		width: calc(100% - 16px);
		padding-right: 8px;
		padding-left: 8px;
		border-radius: 12px;
	}

	.miklens-spotify-player__header {
		gap: 8px;
	}

	.miklens-spotify-player__title {
		max-width: 48vw;
		font-size: 13px;
	}

	.miklens-spotify-player__actions {
		gap: 4px;
	}

	.miklens-spotify-player__control {
		min-width: 32px;
		width: 32px;
		height: 32px;
		padding: 0;
		font-size: 14px;
	}

	.miklens-spotify-player__fallback {
		flex-wrap: wrap;
	}

	.miklens-spotify-player__fallback p {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.miklens-spotify-player__launcher,
	.miklens-spotify-player__control,
	.miklens-spotify-player__retry {
		transition: none;
	}
}
