.launra-player,
.launra-player * {
	box-sizing: border-box;
}

.launra-player {
	--launra: #333333;
	--launra-muted: #707070;
	--launra-line: rgba(51, 51, 51, 0.2);
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
	background: transparent !important;
	color: var(--launra);
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.3;
}

.launra-player__card {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	width: 100%;
	min-height: 246px;
	padding: 18px;
	background: #ffffff;
	border: 1px solid rgba(51, 51, 51, 0.7);
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(51, 51, 51, 0.1), 0 0 0 4px rgba(51, 51, 51, 0.025);
	overflow: hidden;
}

.launra-player__art-link {
	position: relative;
	display: block;
	width: 210px;
	height: 210px;
	border: 1px solid rgba(51, 51, 51, 0.55);
	border-radius: 17px;
	overflow: hidden;
	background: #f4f4f4;
	text-decoration: none !important;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.launra-player__art-link:not(.is-disabled):hover,
.launra-player__art-link:not(.is-disabled):focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(51, 51, 51, 0.16);
}

.launra-player__art-link.is-disabled {
	cursor: default;
}

.launra-player__art {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: cover;
}

.launra-player__art-loading {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, #eeeeee 20%, #f8f8f8 40%, #eeeeee 60%);
	background-size: 200% 100%;
	animation: launra-shimmer 1.35s linear infinite;
}

@keyframes launra-shimmer {
	to { background-position: -200% 0; }
}

.launra-player__content {
	min-width: 0;
	padding: 4px 12px 4px 0;
}

.launra-player__topline {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.launra-player__brand {
	margin-left: auto;
	font-size: 13px;
	letter-spacing: 0.14em;
	white-space: nowrap;
}

.launra-player__separator { opacity: 0.45; }
.launra-player__live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--launra);
}
.launra-player__live { animation: launra-live 1.4s ease-in-out infinite; }
@keyframes launra-live { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.launra-player__title {
	margin: 19px 0 5px !important;
	padding: 0 !important;
	color: var(--launra) !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: clamp(24px, 3.3vw, 44px) !important;
	font-style: normal !important;
	font-weight: 800 !important;
	letter-spacing: -0.035em !important;
	line-height: 1.02 !important;
	text-transform: none !important;
	overflow-wrap: anywhere;
}

.launra-player__artist {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--launra) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}

.launra-player__profile {
	display: inline-block;
	margin-top: 7px;
	color: var(--launra) !important;
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.launra-player__profile[hidden] { display: none !important; }

.launra-player__tagline {
	margin: 16px 0 0 !important;
	padding: 13px 0 0 !important;
	border-top: 1px solid var(--launra-line);
	color: var(--launra-muted) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
}

.launra-player__controls {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 18px;
}

.launra-player__play,
.launra-player__play:hover,
.launra-player__play:focus,
.launra-player__play:focus-visible,
.launra-player__play:active {
	all: unset !important;
	box-sizing: border-box !important;
	display: grid !important;
	place-items: center !important;
	width: 58px !important;
	height: 58px !important;
	min-width: 58px !important;
	border: 2px solid var(--launra) !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: var(--launra) !important;
	cursor: pointer !important;
	transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease !important;
}

.launra-player__play:hover,
.launra-player__play:focus-visible {
	background: var(--launra) !important;
	color: #ffffff !important;
	box-shadow: 0 7px 18px rgba(51, 51, 51, 0.18) !important;
}

.launra-player__play-icon {
	position: relative;
	display: block;
	width: 0;
	height: 0;
	margin-left: 4px;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 14px solid currentColor;
}

.launra-player.is-playing .launra-player__play-icon {
	width: 6px;
	height: 18px;
	margin-left: -8px;
	border: 0;
	background: currentColor;
	box-shadow: 10px 0 0 currentColor;
}

.launra-player__volume-wrap {
	display: block;
	flex: 1 1 auto;
	max-width: 390px;
	margin: 0;
}
.launra-player__volume {
	width: 100%;
	margin: 0;
	accent-color: var(--launra);
	cursor: pointer;
}
.launra-player__status {
	min-width: 84px;
	color: var(--launra-muted);
	font-size: 11px;
	white-space: nowrap;
}
.launra-player__audio { display: none !important; }

@media (max-width: 720px) {
	.launra-player__card { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; min-height: 184px; padding: 14px; border-radius: 20px; }
	.launra-player__art-link { width: 150px; height: 150px; border-radius: 14px; }
	.launra-player__content { padding-right: 4px; }
	.launra-player__title { margin-top: 12px !important; font-size: clamp(20px, 5vw, 30px) !important; }
	.launra-player__brand { display: none; }
	.launra-player__tagline { margin-top: 10px !important; padding-top: 9px !important; font-size: 11px !important; }
	.launra-player__controls { margin-top: 12px; gap: 14px; }
	.launra-player__play, .launra-player__play:hover, .launra-player__play:focus, .launra-player__play:focus-visible, .launra-player__play:active { width: 48px !important; height: 48px !important; min-width: 48px !important; }
}

@media (max-width: 520px) {
	.launra-player__card { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; min-height: 124px; padding: 11px; border-radius: 17px; }
	.launra-player__art-link { width: 92px; height: 92px; border-radius: 11px; }
	.launra-player__topline { font-size: 9px; gap: 5px; }
	.launra-player__title { margin: 8px 0 3px !important; font-size: clamp(16px, 5.8vw, 23px) !important; }
	.launra-player__artist { font-size: 9px !important; }
	.launra-player__profile { margin-top: 4px; font-size: 9px; }
	.launra-player__tagline { display: none; }
	.launra-player__controls { margin-top: 8px; gap: 10px; }
	.launra-player__play, .launra-player__play:hover, .launra-player__play:focus, .launra-player__play:focus-visible, .launra-player__play:active { width: 38px !important; height: 38px !important; min-width: 38px !important; border-width: 1.5px !important; }
	.launra-player__play-icon { border-top-width: 7px; border-bottom-width: 7px; border-left-width: 11px; }
	.launra-player.is-playing .launra-player__play-icon { width: 5px; height: 14px; margin-left: -7px; box-shadow: 8px 0 0 currentColor; }
	.launra-player__status { display: none; }
}


/* Version 2.2: optional top label and built-in profile CTA. */
.launra-player__brand:empty {
	display: none !important;
}

.launra-player__profile {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin-top: 8px;
	padding: 7px 12px;
	border: 1px solid #333333;
	border-radius: 999px;
	background: #ffffff;
	color: #333333 !important;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.launra-player__profile:hover,
.launra-player__profile:focus-visible {
	background: #333333 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

.launra-player__profile[hidden] {
	display: none !important;
}

/* Version 2.3: user-uploaded background image layer. */
.launra-player__card {
	position: relative;
	isolation: isolate;
}

.launra-player__background-image,
.launra-player__background-overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	display: block !important;
	pointer-events: none !important;
}

.launra-player__background-image {
	background-image: var(--launra-bg-image) !important;
	background-repeat: no-repeat !important;
	background-position: var(--launra-bg-position, center center) !important;
	background-size: var(--launra-bg-size, cover) !important;
	opacity: var(--launra-bg-opacity, 1) !important;
}

.launra-player__background-overlay {
	background: var(--launra-bg-overlay, #ffffff) !important;
	opacity: var(--launra-bg-overlay-opacity, 0.35) !important;
}

/* Keep every player element above the background layers, including when
   Additional CSS changes .launra-player__content to display: contents on mobile. */
.launra-player__card > .launra-player__art-column,
.launra-player__card > .launra-player__content,
.launra-player__content > * {
	position: relative !important;
	z-index: 2 !important;
}


/* Approved July 2026 LAUNRA responsive design, now built into the plugin. */
/* =========================================================
   1. DESKTOP: ARTWORK COLUMN
   Groups the artwork and artist-profile button together.
   ========================================================= */

body [id^="launra-player-"] .launra-player__art-column {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	flex: 0 0 auto !important;
	gap: 8px !important;
}


/* =========================================================
   2. DESKTOP: ARTWORK
   Keeps the artwork centered in its column.
   ========================================================= */

body [id^="launra-player-"] .launra-player__art-link {
	display: block !important;
	margin: 0 auto !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
}


/* =========================================================
   3. ARTIST-PROFILE BUTTON
   Creates a compact centered button beneath the artwork.
   The button border pulses very lightly in red.
   ========================================================= */

body [id^="launra-player-"]
.launra-player__art-column
a.launra-player__profile:not([hidden]) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;

	width: max-content !important;
	max-width: 100% !important;

	margin: 0 auto !important;
	padding: 5px 11px !important;

	border-width: 1px !important;
	border-style: solid !important;
	border-color: #333333;
	border-radius: 999px !important;

	background-color: #ffffff !important;
	color: #333333 !important;

	font-family: inherit !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.2 !important;

	text-align: center !important;
	text-decoration: none !important;
	white-space: nowrap !important;

	box-sizing: border-box !important;
	cursor: pointer !important;

	animation: launra-profile-red-border-pulse 1.6s ease-in-out infinite !important;
	will-change: border-color;

	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease,
		box-shadow 0.18s ease !important;
}


/* =========================================================
   4. ARTIST-PROFILE BUTTON: SOFT RED BORDER PULSE
   Animates the actual button border color from dark gray to #FF0000 and back.
   ========================================================= */

@keyframes launra-profile-red-border-pulse {
	0%,
	100% {
		border-color: #333333;
	}

	50% {
		border-color: #FF0000;
	}
}


/* =========================================================
   5. ARTIST-PROFILE BUTTON: HOVER
   Inverts the button colors and pauses the pulse.
   ========================================================= */

body [id^="launra-player-"]
.launra-player__art-column
a.launra-player__profile:not([hidden]):hover {
	background-color: #333333 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	animation-play-state: paused !important;
	box-shadow: none !important;
	border-color: #FF0000 !important;
}


/* =========================================================
   6. HIDDEN ARTIST-PROFILE BUTTON
   Prevents the button from appearing when no profile exists.
   ========================================================= */

body [id^="launra-player-"] a.launra-player__profile[hidden] {
	display: none !important;
}


/* =========================================================
   7. DESKTOP: SONG TITLE
   Reduces oversized song titles.
   ========================================================= */

body [id^="launra-player-"] h2.launra-player__title {
	font-size: 26px !important;
	line-height: 1.12 !important;
}


/* =========================================================
   8. LIVE INDICATOR
   Displays a smaller static red dot with minimal spacing.
   ========================================================= */

body [id^="launra-player-"] .launra-player__live-dot {
	display: inline-block !important;
	flex: 0 0 auto !important;

	width: 5px !important;
	height: 5px !important;

	margin: 0 1px 0 0 !important;

	border-radius: 50% !important;
	background: var(--launra-live-color, #d60000) !important;
	box-shadow: none !important;

	animation: none !important;
}

body [id^="launra-player-"] .launra-player__live {
	color: var(--launra-live-color, #d60000) !important;
	animation: none !important;
}


/* =========================================================
   9. MOBILE PLAYER LAYOUT
   Mobile order:
   1. NOW PLAYING | red dot | LIVE
   2. Artwork
   3. Artist-profile button
   4. Song title
   5. Artist
   6. Tagline
   7. Play and volume controls
   ========================================================= */

@media (max-width: 720px) {

	/* Main vertical player structure */
	body [id^="launra-player-"] .launra-player__card {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: 100% !important;
		gap: 14px !important;
		text-align: center !important;
	}


	/* Allows song-information elements to be reordered */
	body [id^="launra-player-"] .launra-player__content {
		display: contents !important;
	}


	/* Places NOW PLAYING and LIVE at the very top */
	body [id^="launra-player-"] .launra-player__topline {
		order: 1 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		margin: 0 0 2px !important;
	}


	/* Smaller red dot with reduced spacing on mobile */
	body [id^="launra-player-"] .launra-player__live-dot {
		width: 4px !important;
		height: 4px !important;
		margin: 0 1px 0 0 !important;
	}


	/* Enlarges artwork to 85% of the player width */
	body [id^="launra-player-"] .launra-player__art-column {
		order: 2 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 85% !important;
		max-width: 420px !important;
		gap: 9px !important;
	}


	/* Creates a large square artwork area */
	body [id^="launra-player-"] .launra-player__art-link {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		margin: 0 auto !important;
		border: none !important;
		box-shadow: none !important;
		outline: none !important;
		background: transparent !important;
	}


	/* Makes the image fill the artwork area */
	body [id^="launra-player-"] .launra-player__art {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}


	/* Artist-profile button: larger and pulsating on mobile */
	body [id^="launra-player-"]
	.launra-player__art-column
	a.launra-player__profile:not([hidden]) {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		align-self: center !important;

		width: max-content !important;
		max-width: 100% !important;

		margin: 0 auto !important;
		padding: 8px 17px !important;

		font-size: 13px !important;
		letter-spacing: 0.025em !important;
		text-align: center !important;

		animation: launra-profile-red-border-pulse 1.6s ease-in-out infinite !important;
	}


	/* Song title: 10% larger on mobile */
	body [id^="launra-player-"] h2.launra-player__title {
		order: 3 !important;
		width: 90% !important;
		max-width: 420px !important;

		margin: 3px auto 0 !important;

		font-size: 24px !important;
		line-height: 1.12 !important;
		text-align: center !important;
	}


	/* Artist name reduced by 5% from the previous size */
	body [id^="launra-player-"] .launra-player__artist {
		order: 4 !important;
		width: 90% !important;
		margin: -5px auto 0 !important;

		font-size: 105% !important;
		line-height: 1.2 !important;
		text-align: center !important;
	}


	/* Player tagline */
	body [id^="launra-player-"] .launra-player__tagline {
		order: 5 !important;
		width: 90% !important;
		margin: 2px auto 0 !important;
		text-align: center !important;
	}


	/* Play button and volume-control section */
	body [id^="launra-player-"] .launra-player__controls {
		order: 6 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;

		width: 100% !important;
		gap: 14px !important;
		margin: 2px auto 0 !important;
	}


	/* Play button: 15% larger on mobile */
	body [id^="launra-player-"] .launra-player__play {
		flex: 0 0 auto !important;
		width: 67px !important;
		height: 67px !important;
	}


	/* Centers the volume-slider container */
	body [id^="launra-player-"] .launra-player__volume-wrap {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		width: 72% !important;
		max-width: 290px !important;
		margin: 0 auto !important;
	}


	/* Makes the slider fill its container */
	body [id^="launra-player-"] .launra-player__volume {
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* =========================================================
   10. SMALL MOBILE SCREENS
   Preserves the mobile layout on narrow phones.
   ========================================================= */

@media (max-width: 420px) {

	/* Artwork remains 85% of the available player width */
	body [id^="launra-player-"] .launra-player__art-column {
		width: 85% !important;
		max-width: 360px !important;
	}


	/* Profile button remains larger and animated */
	body [id^="launra-player-"]
	.launra-player__art-column
	a.launra-player__profile:not([hidden]) {
		padding: 7px 13px !important;
		font-size: 12px !important;
		letter-spacing: 0.02em !important;

		animation: launra-profile-red-border-pulse 1.6s ease-in-out infinite !important;
	}


	/* Song title remains 10% larger on narrow screens */
	body [id^="launra-player-"] h2.launra-player__title {
		font-size: 22px !important;
	}


	/* Artist name reduced by 5% from the previous size */
	body [id^="launra-player-"] .launra-player__artist {
		font-size: 105% !important;
	}


	/* Play button remains approximately 15% larger */
	body [id^="launra-player-"] .launra-player__play {
		width: 62px !important;
		height: 62px !important;
	}


	/* Practical volume width for narrow screens */
	body [id^="launra-player-"] .launra-player__volume-wrap {
		width: 76% !important;
		max-width: 260px !important;
	}
}

/* =========================================================
   VERSION 2.4: OUTER DIY CONTAINER AND COLOR CONTROLS
   ========================================================= */

.launra-player__shell {
	position: relative;
	isolation: isolate;
	width: 100%;
}

.launra-player.has-outer-background {
	max-width: var(--launra-outer-max-width, 1040px);
}

.launra-player__shell.has-outer-background {
	padding: var(--launra-outer-padding, 30px);
	border-radius: var(--launra-outer-radius, 32px);
	overflow: hidden;
}

.launra-player__outer-background-image,
.launra-player__outer-background-overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	display: block !important;
	pointer-events: none !important;
	border-radius: inherit !important;
}

.launra-player__outer-background-image {
	background-image: var(--launra-outer-bg-image) !important;
	background-repeat: no-repeat !important;
	background-position: var(--launra-outer-bg-position, center center) !important;
	background-size: var(--launra-outer-bg-size, cover) !important;
	opacity: var(--launra-outer-bg-opacity, 1) !important;
}

.launra-player__outer-background-overlay {
	background: var(--launra-outer-overlay, #ffffff) !important;
	opacity: var(--launra-outer-overlay-opacity, 0) !important;
}

.launra-player__shell > .launra-player__card {
	position: relative;
	z-index: 2;
}

/* Keep every visible player element above the inside-player image layers. */
.launra-player__art-column,
.launra-player__topline,
.launra-player__title,
.launra-player__artist,
.launra-player__tagline,
.launra-player__controls {
	position: relative;
	z-index: 2;
}

/* Customizable player text colors. */
.launra-player__topline,
.launra-player__brand {
	color: var(--launra-topline-color, #333333) !important;
}

.launra-player__title {
	color: var(--launra-title-color, #333333) !important;
}

.launra-player__artist {
	color: var(--launra-artist-color, #333333) !important;
}

.launra-player__tagline {
	color: var(--launra-tagline-color, #707070) !important;
}

.launra-player__status {
	color: var(--launra-status-color, #707070) !important;
}

.launra-player__live-dot {
	background: var(--launra-live-color, #d60000) !important;
}

.launra-player__live {
	color: var(--launra-live-color, #d60000) !important;
}

/* Customizable play button. */
.launra-player__play,
.launra-player__play:focus,
.launra-player__play:active {
	border-color: var(--launra-play-border-color, #333333) !important;
	background: var(--launra-play-bg-color, #ffffff) !important;
	color: var(--launra-play-icon-color, #333333) !important;
}

.launra-player__play:hover,
.launra-player__play:focus-visible {
	border-color: var(--launra-play-border-color, #333333) !important;
	background: var(--launra-play-hover-bg-color, #333333) !important;
	color: var(--launra-play-hover-icon-color, #ffffff) !important;
}

.launra-player__volume {
	accent-color: var(--launra-volume-color, #333333) !important;
}

@media (max-width: 720px) {
	.launra-player.has-outer-background {
		max-width: 100%;
	}

	.launra-player__shell.has-outer-background {
		padding: var(--launra-outer-mobile-padding, 14px);
	}
}