/*----------------------------- CSS Default Theme -----------------------------*/
:root {
    --emga-color-body-text: #000;
    --emga-color-player-bg: hsl(271, 41%, 25%); /* dark purple */
    --emga-color-song-gradient-2: hsla(271, 41%, 25%, 0.2);
    --emga-color-accent: hsl(358, 82%, 52%);
    --emga-color-accent-dark-5: hsl(358, 82%, 47%);
    --emga-color-accent-dark-10: hsl(358, 82%, 42%);
    
    
    --emga-font-family-1: 'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;
    --emga-font-family-2: 'Oswald',Helvetica,Arial,Lucida,sans-serif;
    --emga-history-heading-font-family: var(--emga-font-family-2);
    --emga-history-heading-letter-spacing: 0.05em;
    --emga-history-heading-font-weight: 300;
    --emga-color-history-heading: var(--emga-color-player-bg);
}
    
    

/*----------------------------- Other Variables -----------------------------*/
:root {
    --emga-color-player-fg: white;
    --emga-color-player-fg-trans-5: hsla(0, 0%, 100%, 0.05);
    --emga-color-player-fg-trans-10: hsla(0, 0%, 100%, 0.10);
    --emga-color-player-fg-trans-20: hsla(0, 0%, 100%, 0.20);
    --emga-color-player-fg-trans-40: hsla(0, 0%, 100%, 0.40);
    --emga-color-player-fg-trans-50: hsla(0, 0%, 100%, 0.50);

    --emga-color-song-accent: var(--emga-color-player-bg);
    --emga-color-song-bg: white;
    --emga-color-song-gradient-1: transparent;
    
    --emga-sp-xs: 5px;
    --emga-sp-sm: 10px;
    --emga-sp-md: 15px;
    --emga-sp-lg: 20px;
    --emga-sp-xl: 30px;
    --emga-sp-xxl: 50px;

    --emga-footer-spacer-xs: 70px;
    --emga-footer-spacer-sm: 80px;
    --emga-wrap-width-sm: 85%;
    --emga-wrap-max-width-sm: 2560px;
    
    --emga-size-icon-default: 24px;
    --emga-icon-button-min-size-xs: 50px;
    --emga-icon-button-min-size-sm: 60px;
    
    --emga-icon-button-border-radius: 0px;

    --emga-song-art-size-xs: 46px;
    --emga-song-art-size: 56px;

    --emga-slider-track-border-radius: 0;
    --emga-slider-track-thickness: var(--emga-sp-sm);
    --emga-slider-track-color: var(--emga-color-player-fg-trans-20);
    --emga-slider-track-filled-color: var(--emga-color-player-fg-trans-40);
    --emga-slider-thumb-thickness: var(--emga-sp-lg);
    --emga-slider-thumb-shift: calc(((var(--emga-slider-thumb-thickness) - var(--emga-slider-track-thickness)) / 2) * -1.0);
    
    --emga-slider-thumb-focus-outline-color: transparent; /* disable */
    --emga-slider-thumb-focus-outline-thickness: 2px;
    --emga-slider-thumb-focus-outline-offset: 2px;
}


/*----------------------------- Utilities -----------------------------*/
[hidden] { 
    display: none !important;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.one-line-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
}

.emga-css [style*="--emga-size:"] {
    height: var(--emga-size);
    width: var(--emga-size);
}

/* ----------------------------------- Common Styles (Both Players) ----------------------------------- */

.custom-loader {
    --this-size: 24px;
    --this-thickness: 4px;
    width:var(--this-size);
    height:var(--this-size);
    border-radius:50%;
    background:conic-gradient(#0000 10%,#ffffff);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--this-thickness)),#000 0);
    animation:s3 1s infinite linear;
}
@keyframes s3 {to{transform: rotate(1turn)}}

.emga-icon {
    display: block;
    position: relative;
    width: var(--emga-size-icon-default);
    height: var(--emga-size-icon-default);
}

.emga-icon-button {
    /* Reset default button styles */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    box-shadow: none;
    outline: none;
    /* Remove appearance for consistency */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Add custom styles */
    border-style: solid;
    border-width: 2px;
    border-color: var(--emga-color-player-fg-trans-10);
    border-radius: var(--emga-icon-button-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--emga-sp-xs);
    padding-bottom: var(--emga-sp-xs);
    padding-left: var(--emga-sp-xs);
    padding-right: var(--emga-sp-xs);
    gap: var(--emga-sp-sm);
    cursor: pointer;
    min-width: var(--emga-icon-button-min-size-xs);
    min-height: var(--emga-icon-button-min-size-xs);
    background-color: transparent;
}

.emga-icon-button .emga-icon {
    flex-shrink: 0;
}

.emga-icon-button .text {
    display: block;
    line-height: 1.1;
    text-align: left;
    text-wrap: balance;
}

.emga-icon-button:hover {
    background-color: var(--emga-color-player-fg-trans-5);
    border-color: var(--emga-color-player-fg-trans-5);
}

.emga-icon-button:focus-visible {
    border-color: var(--emga-color-player-fg);
}

.emga-icon-button.primary {
    background-color: var(--emga-color-accent);
    color: var(--emga-color-player-fg);
    border-color: transparent;
}

.emga-icon-button.primary:hover {
    background-color: var(--emga-color-accent-dark-5);
}

.emga-icon-button.primary:focus-visible {
    border-color: var(--emga-color-player-fg);
}

/* Play button (both players) */
.emga-play .icon-stopped,
.emga-play .icon-playing,
.emga-play .icon-loading {
    display: none;
    position: relative;
}

.emga-play[data-emga-state="stopped"] .icon-stopped {
    display: block;
}

.emga-play[data-emga-state="loading"] .icon-loading {
    display: block;
}

.emga-play[data-emga-state="playing"] .icon-playing {
    display: block;
}

/* Station Select (both players) */
.emga-station-wrap {
    position: relative;
}

.emga-fixed-player.single-station-mode .emga-station-wrap,
.emga-page-player.single-station-mode .emga-station-wrap {
    display: none;
}

.emga-station .emga-icon-button .emga-arrow-down {
    width: 13px;
    height: 13px;
    margin-left: auto;
    color: var(--emga-color-player-fg-trans-50);
}

.emga-css .emga-station-select {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 0;
    background-color: var(--emga-color-player-bg);
    padding-top: var(--emga-sp-sm);
    padding-bottom: var(--emga-sp-sm);
    border: 2px solid var(--emga-color-player-fg-trans-10);
    border-bottom: none;
    border-radius: var(--emga-icon-button-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 10;
    
    /* xs and sm defaults */
    width: max-content;
    max-width: calc(100vw - (2 * var(--emga-sp-sm)));
    right: auto;
    margin-bottom: calc(2 * var(--emga-sp-sm));
    border-bottom: 2px solid var(--emga-color-player-fg-trans-10);
    border-bottom-left-radius: var(--emga-icon-button-border-radius);
    border-bottom-right-radius: var(--emga-icon-button-border-radius);
}

.emga-css .emga-station-select ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.emga-css .emga-station-select li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.emga-station-select-button {
    /* Reset default button styles */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    box-shadow: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Add custom styles */
    display: block;
    width: 100%;
    text-align: left;
    padding-top: var(--emga-sp-sm);
    padding-bottom: var(--emga-sp-sm);
    padding-left: var(--emga-sp-md);
    padding-right: var(--emga-sp-md);
    cursor: pointer;
    color: var(--emga-color-player-fg-trans-50);
    font-family: var(--emga-font-family-1);
    line-height: 1.2;
    transition: background-color 0.2s, color 0.2s;
    /* Note: text-wrap: balance is not widely supported, may omit or substitute */
}

.emga-station-select-button:hover {
    background-color: var(--emga-color-player-fg-trans-5);
}

.emga-station-select-button:focus-visible {
    background-color: var(--emga-color-player-fg-trans-5);
    outline: 2px solid var(--emga-color-player-fg);
    outline-offset: -2px;
}

.emga-station-select-button[aria-selected="true"] {
    color: var(--emga-color-player-fg);
}

/* Station Select Bubble (both players) */
.emga-bubble[hidden] {
	display: none !important;
}

.emga-bubble {
	/* Position above the station button area */
	position: absolute;
	bottom: calc(100% + var(--emga-sp-md));
	left: 50%;
	transform-origin: center bottom;
	transform: translateX(-50%) scale(0.8);
	opacity: 0;
	animation: emga-bubble-pop-scale 0.4s ease forwards,
	           emga-bubble-pop-opacity 0.2s ease-out forwards;
	z-index: 20; /* above station select (z-index: 10) */

	/* Bubble appearance */
	background-color: var(--emga-color-player-fg);
	color: var(--emga-color-player-bg);
	border-radius: 8px;
	padding: var(--emga-sp-lg);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

	/* Sizing */
	width: max-content;
	max-width: 100%;
}

.emga-bubble::after {
	content: "";
	position: absolute;
	bottom: -7px;
	left: 50%;
	width: 14px;
	height: 14px;
	background-color: var(--emga-color-player-fg);
	transform: translateX(-50%) rotate(45deg);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.12);
}

@keyframes emga-bubble-pop-scale {
	0% {
		transform: translateX(-50%) scale(0.8);
	}
	50% {
		transform: translateX(-50%) scale(1.1);
	}
	100% {
		transform: translateX(-50%) scale(1);
	}
}

@keyframes emga-bubble-pop-opacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* small screen bubble adjustments */
@keyframes emga-bubble-pop-scale-no-translate {
	0% {
		transform: translateX(0) scale(0.8);
	}
	50% {
		transform: translateX(0) scale(1.1);
	}
	100% {
		transform: translateX(0) scale(1);
	}
}

@media (max-width: 980px) {
	.emga-fixed-player .emga-bubble {
		left: 0;
		right: auto;
		max-width: calc(100vw - 30px);
		transform: translateX(0) scale(0.8);
		animation: emga-bubble-pop-scale-no-translate 0.4s ease forwards,
		           emga-bubble-pop-opacity 0.2s ease-out forwards;
	}
	.emga-fixed-player .emga-bubble::after {
		left: 23px;
		right: auto;
		transform: rotate(45deg);
	}
}

@media (max-width: 600px) {
	.emga-page-player .emga-bubble {
		left: auto;
		right: 0;
		max-width: 90vw;
		transform: translateX(0) scale(0.8);
		animation: emga-bubble-pop-scale-no-translate 0.4s ease forwards,
		           emga-bubble-pop-opacity 0.2s ease-out forwards;
	}
	.emga-page-player .emga-bubble::after {
		left: auto;
		right: 18px;
		transform: rotate(45deg);
	}

    .emga-fixed-player .emga-bubble::after {
		left: 18px;
	}
}



.emga-bubble-text {
	margin: 0;
	font-family: var(--emga-font-family-1);
	font-size: 18px;
    font-weight: 400;
	line-height: 1.3;
    text-wrap: balance;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.emga-bubble-close {
    --this-icon-size: 12px;
    --this-padding: 10px;
    cursor: pointer;
    border: 0;
    background: transparent;
	position: absolute;
    padding: var(--this-padding);
	top: 0;
	right: 0;
	width: calc(var(--this-icon-size) + (var(--this-padding) * 2));
	height: calc(var(--this-icon-size) + (var(--this-padding) * 2));
}

.emga-bubble-close .emga-icon {
	color: var(--emga-color-player-bg);
	width: var(--this-icon-size);
	height: var(--this-icon-size);
	opacity: 0.5;
}

.emga-bubble-close:hover .emga-icon,
.emga-bubble-close:focus-visible .emga-icon {
	opacity: 1;
}

/* Volume Control (both players) */
.emga-volume-wrap {
    position: relative;
}

.emga-volume .emga-icon-button .icon-volume,
.emga-volume .emga-icon-button .icon-close {
    display: none;
}

/* Show volume icon based on data-emga-volume-level when not expanded */
.emga-volume-wrap[data-emga-volume-level="full"] .emga-icon-button[aria-expanded="false"] .icon-volume-full {
    display: block;
}

.emga-volume-wrap[data-emga-volume-level="medium"] .emga-icon-button[aria-expanded="false"] .icon-volume-medium {
    display: block;
}

.emga-volume-wrap[data-emga-volume-level="low"] .emga-icon-button[aria-expanded="false"] .icon-volume-low {
    display: block;
}

.emga-volume-wrap[data-emga-volume-level="off"] .emga-icon-button[aria-expanded="false"] .icon-volume-off {
    display: block;
}

.emga-volume .emga-icon-button[aria-expanded="true"] .icon-close {
    display: block;
}

.emga-volume-select {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 0;
    background-color: var(--emga-color-player-bg);
    padding-top: var(--emga-sp-lg);
    padding-bottom: var(--emga-sp-lg);
    padding-left: var(--emga-sp-md);
    padding-right: var(--emga-sp-md);
    border: 2px solid var(--emga-color-player-fg-trans-10);
    border-bottom: none;
    border-radius: var(--emga-icon-button-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Show volume icon in volume select based on data-emga-volume-level */
.emga-volume-select .emga-volume-icon-full,
.emga-volume-select .emga-volume-icon-medium,
.emga-volume-select .emga-volume-icon-low,
.emga-volume-select .emga-volume-icon-off {
    display: none;
}

.emga-volume-wrap[data-emga-volume-level="full"] .emga-volume-select .emga-volume-icon-full {
    display: block;
}

.emga-volume-wrap[data-emga-volume-level="medium"] .emga-volume-select .emga-volume-icon-medium {
    display: block;
}

.emga-volume-wrap[data-emga-volume-level="low"] .emga-volume-select .emga-volume-icon-low {
    display: block;
}

.emga-volume-wrap[data-emga-volume-level="off"] .emga-volume-select .emga-volume-icon-off {
    display: block;
}

/* volume slider */
.emga-volume-slider-parent {
    position: relative;
    height: calc(120px + var(--emga-sp-md));
    padding-top: var(--emga-sp-md);
    
}
.emga-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    display: block;
    width: 120px;
    height: var(--emga-slider-track-thickness);
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    position: absolute;
    top: calc(118px + var(--emga-sp-md));
    left: 6px;
    
}

.emga-volume-slider:focus {
    outline: none;
}

/* Webkit */
.emga-volume-slider::-webkit-slider-runnable-track {
    background: linear-gradient(to left, var(--emga-slider-track-color) 0%, var(--emga-slider-track-color) calc(100% - var(--emga-slider-fill-percent, 0%)), var(--emga-slider-track-filled-color) calc(100% - var(--emga-slider-fill-percent, 0%)), var(--emga-slider-track-filled-color) 100%);
    border-radius: var(--emga-slider-track-border-radius);
    height: var(--emga-slider-track-thickness);
    width: 100%;
}

.emga-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    /*custom styles*/
    background-color: var(--emga-color-accent);
    height: var(--emga-slider-thumb-thickness);
    width: var(--emga-slider-thumb-thickness);
    margin-top: var(--emga-slider-thumb-shift);
    border-radius: 0;
}

.emga-volume-slider:focus::-webkit-slider-thumb {
    background-color: var(--emga-color-accent-dark-10);
    outline: var(--emga-slider-thumb-focus-outline-thickness) solid var(--emga-slider-thumb-focus-outline-color);
    outline-offset: var(--emga-slider-thumb-focus-outline-offset);
}

/* Firefox */
.emga-volume-slider::-moz-range-track {
    background: linear-gradient(to left, var(--emga-slider-track-color) 0%, var(--emga-slider-track-color) calc(100% - var(--emga-slider-fill-percent, 0%)), var(--emga-slider-track-filled-color) calc(100% - var(--emga-slider-fill-percent, 0%)), var(--emga-slider-track-filled-color) 100%);
    border-radius: var(--emga-slider-track-border-radius);
    height: var(--emga-slider-track-thickness);
    width: 100%;
}

.emga-volume-slider::-moz-range-thumb {
    border: none;
    border-radius: 0;
    background-color: var(--emga-color-accent);
    height: var(--emga-slider-thumb-thickness);
    width: var(--emga-slider-thumb-thickness);
}

.emga-volume-slider:focus::-moz-range-thumb {
    background-color: var(--emga-color-accent-dark-10);
    outline: var(--emga-slider-thumb-focus-outline-thickness) solid var(--emga-slider-thumb-focus-outline-color);
    outline-offset: var(--emga-slider-thumb-focus-outline-offset);
}

/* common styles - sm and up */
@media (min-width: 601px) {

    .emga-icon-button {
        min-inline-size: var(--emga-icon-button-min-size-sm);
        min-block-size: var(--emga-icon-button-min-size-sm);
    }
    
}

/* common styles - md and up */
@media (min-width: 981px) {
    /* At md and above: restore full width, no gap, no bottom border */
    .emga-css .emga-station-select {
        width: auto;
        right: 0;
        margin-bottom: 0;
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
}

/*----------------------------- Page Player -----------------------------*/
.emga-page-player {
    color: var(--emga-color-body-text);
}

.emga-page-player .emga-controls {
    background-color: var(--emga-color-player-bg);
    color: var(--emga-color-player-fg);
    display: grid;
    padding: var(--emga-sp-md);
    gap: var(--emga-sp-md);
    grid-template-columns: auto 1fr auto auto;
}

.emga-page-player.single-station-mode .emga-controls {
    grid-template-columns: auto 1fr auto;
}

.emga-page-player .emga-song {
    background-color: var(--emga-color-song-bg);
    background-image: linear-gradient(135deg, var(--emga-color-song-gradient-1) 30%, var(--emga-color-song-gradient-2) 80%);
    color: var(--emga-color-body-text);
    border-style: solid;
    border-width: 1px;
    border-color: var(--emga-color-song-accent);
    border-radius: var(--emga-icon-button-border-radius);
    padding: var(--emga-sp-lg);
    display: grid;
    gap: var(--emga-sp-lg);
}

.emga-page-player .emga-song-art {
    border: 1px solid #ddd;
}

.emga-page-player .emga-song-text {
    line-height: 1.1;
    font-size: 16px;
    font-family: var(--emga-font-family-1);
    min-width: 0;
    overflow: hidden;
}

.emga-page-player .emga-song-text > * {
    width: 100%;
    min-width: 0;
}

.emga-page-player .emga-song-text .small-title {
    font-family: var(--emga-font-family-2);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--emga-color-song-accent);
    opacity: 0.6;
    font-size: 16px;
    line-height: 0.9;
}

.emga-page-player .emga-song-text .emga-small-title-default {
    display: none;
}

.emga-page-player .emga-song-text .emga-small-title-station {
    display: block;
}

.emga-page-player .emga-song-text .large-text {
    font-size: 22px;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 2px;
    color: var(--emga-color-song-accent);
}

.emga-page-player .emga-song-text .small-text {
    line-height: 1.1;
    min-height: 1.1em;
}

.emga-page-player .emga-station .emga-icon-button .text {
    display: none;
}

.emga-page-player .emga-station .emga-icon-button .emga-arrow-down {
    display: none;
}

.emga-page-player .emga-station-select {
    bottom: 100%;
    margin-bottom: 0;
    width: max-content;
    max-width: calc(100vw - (2 * 3.3rem));
    left: auto;
    right: 0;
    margin-bottom: calc(2 * var(--emga-sp-lg));
}

.emga-page-player .emga-history-wrapper {
    position: relative;
}

.emga-page-player .emga-history-anchor {
    position: absolute;
    top: -20px;
    left: 0;
    width: 1px;
    height: 1px;
    visibility: hidden;
    pointer-events: none;
}

.emga-page-player .emga-history {
    margin-top: var(--emga-sp-xxl);
}

.emga-page-player .emga-history-heading {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--emga-history-heading-font-family);
    font-size: 30px;
    font-weight: var(--emga-history-heading-font-weight);
    letter-spacing: var(--emga-history-heading-letter-spacing);
    color: var(--emga-color-history-heading);
    line-height: 1.1;
}

.emga-page-player .emga-history-songs {
    display: grid;
    gap: var(--emga-sp-xl);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: var(--emga-sp-xl);
}

.emga-page-player .emga-history-songs li {
    display: grid;
    gap: var(--emga-sp-lg);
    grid-template-columns: auto 1fr;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.emga-page-player .emga-history-song-art {
    --this-size: 84px;
    height: var(--this-size);
    width: var(--this-size);
}

.emga-page-player .emga-history-song-text {
    font-family: var(--emga-font-family-1);
    line-height: 1.1;
    font-size: 16px;
    display: grid;
    gap: var(--emga-sp-xs);
}

.emga-page-player .emga-history-song-time {
    font-family: var(--emga-font-family-1);
    font-size: 14px;
    text-transform: uppercase;
    opacity: 0.5;
    font-weight: 600;
}

.emga-page-player .emga-history-song-name {
    font-weight: 700;
    font-size: 19px;
}

.emga-page-player .emga-history-song-artist {
    min-height: 1.1em;
}

@media (min-width: 601px) {
    .emga-page-player .emga-controls {
        grid-template-columns: auto 1fr auto;
        padding: var(--emga-sp-lg);
        gap: var(--emga-sp-lg);
    }

    .emga-page-player .emga-play {
        grid-column: 1;
        grid-row: 1;
    }

    .emga-page-player .emga-station-wrap {
        grid-column: 2;
        grid-row: 1;
    }

    .emga-page-player .emga-volume-wrap {
        grid-column: 3;
        grid-row: 1;
    }

    .emga-page-player .emga-spacer {
        display: none;
    }

    .emga-page-player .emga-song {
        grid-template-columns: minmax(200px, 2fr) 5fr;
        column-gap: var(--emga-sp-xl);
        align-items: center;
    }

    .emga-page-player .emga-song-text {
        font-size: 20px;
    }

    .emga-page-player .emga-song-text .small-title {
        font-size: 18px;
    }

    .emga-page-player .emga-song-text .large-text {
        font-size: 28px;
        margin-top: 7px;
        margin-bottom: 3px;
    }

    .emga-page-player .emga-song-text .small-text {
        min-height: auto;
    }

    .emga-page-player .emga-song-text .emga-small-title-default {
        display: block;
    }

    .emga-page-player .emga-song-text .emga-small-title-station {
        display: none;
    }

    .emga-page-player .emga-station .emga-icon-button {
        width: 100%;
        justify-content: start;
        padding-left: var(--emga-sp-md);
        padding-right: var(--emga-sp-md);
    }

    .emga-page-player .emga-station .emga-icon-button .text {
        display: block;
    }

    .emga-page-player .emga-station .emga-icon-button .emga-arrow-down {
        display: block;
    }

    .emga-page-player .emga-station-select {
        width: auto;
        right: 0;
        left: 0;
        margin-bottom: 0;
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .emga-page-player .emga-history-heading {
        font-size: 40px;
    }

    .emga-page-player .emga-history-anchor {
        top: -100px;
    }
}


/* ----------------------------------- Fixed Player Only Styles ----------------------------------- */
html:has(.emga-fixed-player) footer.et-l--footer {
    padding-bottom: var(--emga-footer-spacer-xs) !important;
}

.emga-fixed-player .emga-wrap {
    padding-left: var(--emga-sp-sm);
    padding-right: var(--emga-sp-sm);
}

.emga-fixed-player {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: var(--emga-color-player-bg);
    border-top-color: var(--emga-color-player-fg-trans-10);
    border-top-width: 2px;
    border-top-style: solid;
    color: var(--emga-color-body-text);
}

.emga-fixed-player .emga-content {
    padding-top: var(--emga-sp-sm);
    padding-bottom: var(--emga-sp-sm);
    padding-left: 0;
    padding-right: 0;
    color: var(--emga-color-player-fg);
    border-radius: 0;
    font-family: var(--emga-font-family-1);
    font-weight: 400;
    display: grid;
    gap: var(--emga-sp-sm);
    grid-template-columns: auto 1fr auto;
}

.emga-fixed-player.single-station-mode .emga-content {
    grid-template-columns: 1fr auto;
}

.emga-fixed-player.single-station-mode .emga-song-text .emga-small-title-default {
    display: block;
}

.emga-fixed-player.single-station-mode .emga-song-text .emga-small-title-station {
    display: none;
}

.emga-fixed-player .emga-expand {
    display: none;
}

.emga-fixed-player .emga-song {
    height: var(--emga-icon-button-min-size-xs);
    display: grid;
    gap: var(--emga-sp-sm);
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: start;
}

.emga-fixed-player .emga-song-art {
    display: block;
    height: var(--emga-song-art-size-xs);
    width: var(--emga-song-art-size-xs);
}

.emga-fixed-player .emga-song-text {
    line-height: 1.1;
    font-size: 12px;
    font-family: var(--emga-font-family-1);
    min-width: 0;
    overflow: hidden;
}

.emga-fixed-player .emga-song-text > * {
    width: 100%;
    min-width: 0;
}

.emga-fixed-player .emga-song-text .small-title {
    font-family: var(--emga-font-family-1);
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-size: 12px;
    line-height: 0.9;
}

.emga-fixed-player .emga-song-text .emga-small-title-default {
    display: none;
}

.emga-fixed-player .emga-song-text .emga-small-title-station {
    display: block;
}

.emga-fixed-player .emga-song-text .large-text {
    font-size: 16px;
    font-weight: 700;
    margin-top: 2px;
    margin-bottom: 2px;
}

.emga-fixed-player .emga-station .emga-icon-button .text {
    display: none;
}

.emga-fixed-player .emga-station .emga-icon-button .emga-arrow-down {
    display: none;
}

.emga-fixed-player .emga-volume-wrap {
    display: none;
}


/* fixed player styles - sm and up */
@media (min-width: 601px) {
    .emga-fixed-player .emga-wrap {
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        width: var(--emga-wrap-width-sm);
        max-width: var(--emga-wrap-max-width-sm);
    }

    html:has(.emga-fixed-player) footer.et-l--footer {
        padding-bottom: var(--emga-footer-spacer-sm) !important;
    }

    .emga-fixed-player .emga-content {
        gap: var(--emga-sp-md);
        grid-template-columns: auto 1fr auto auto;
    }

    .emga-fixed-player.single-station-mode .emga-content {
        grid-template-columns: 1fr auto auto;
    }

    .emga-fixed-player .emga-song {
        height: var(--emga-icon-button-min-size-sm);
        grid-template-columns: auto 1fr;
    }

    .emga-fixed-player .emga-song-art {
        display: block;
        height: var(--emga-song-art-size);
        width: var(--emga-song-art-size);
    }

    .emga-fixed-player .emga-song-text {
        font-size: 14px;
    }

    .emga-fixed-player .emga-song-text .small-title {
        font-size: 12px;
    }

    .emga-fixed-player .emga-song-text .large-text {
        font-size: 20px;
        margin-top: 2px;
        margin-bottom: 4px;
    }

    .emga-fixed-player .emga-volume-wrap {
        display: block;
    }
}

/* fixed player styles - md and up */
@media (min-width: 981px) {
    .emga-fixed-player .emga-content {
        grid-template-columns: 2fr 3fr auto auto auto;
    }

    .emga-fixed-player.single-station-mode .emga-content {
        grid-template-columns: 1fr auto auto auto;
    }

    .emga-fixed-player .emga-station .emga-icon-button {
        width: 100%;
        justify-content: start;
        padding-left: var(--emga-sp-md);
        padding-right: var(--emga-sp-md);
    }

    .emga-fixed-player .emga-station .emga-icon-button .text {
        display: block;
    }

    .emga-fixed-player .emga-station .emga-icon-button .emga-arrow-down {
        display: block;
    }

    .emga-fixed-player .emga-song-text .emga-small-title-default {
        display: block;
    }

    .emga-fixed-player .emga-song-text .emga-small-title-station {
        display: none;
    }

    .emga-fixed-player .emga-expand {
        display: block;
    }
}