/*----------------------------- CSS Default Theme -----------------------------*/
:root {
    --emga-clr-dark-blue: #0d232d;
    --emga-clr-dark-purple: hsl(271, 41%, 25%);
    --emga-clr-red: #ed1d24;
    
    --emga-clr-white: #fff;
    --emga-color-body-text: #000;
    
    --emga-color-player-bg: var(--emga-clr-dark-blue);
    --emga-color-neutral: white;
    --emga-color-accent: var(--emga-clr-red);
    --emga-color-accent-icon: var(--emga-color-neutral);

    --emga-color-song-accent: var(--emga-color-player-bg);
    --emga-color-song-bg: var(--emga-clr-white);
    --emga-color-song-gradient-1: color-mix(in srgb, var(--emga-color-accent) 00%, transparent);
    --emga-color-song-gradient-2: color-mix(in srgb, var(--emga-color-player-bg) 20%, transparent);

    --emga-color-history-heading: var(--emga-color-player-bg);
    --emga-history-heading-font-family: var(--emga-font-family-2);
    --emga-history-heading-letter-spacing: 0.05em;
    --emga-history-heading-font-weight: 300;
    
    
    --emga-font-family-1: 'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;
    --emga-font-family-2: 'Oswald',Helvetica,Arial,Lucida,sans-serif;
}

/*----------------------------- Other Variables -----------------------------*/
:root {
    --emga-color-accent-dark-5: color-mix(in srgb, black 5%, var(--emga-color-accent));
    --emga-color-accent-dark-10: color-mix(in srgb, black 10%, var(--emga-color-accent));
    --emga-color-neutral-trans-5: color-mix(in srgb, var(--emga-color-neutral) 5%, transparent);
    --emga-color-neutral-trans-10: color-mix(in srgb, var(--emga-color-neutral) 10%, transparent);
    --emga-color-neutral-trans-20: color-mix(in srgb, var(--emga-color-neutral) 20%, transparent);
    --emga-color-neutral-trans-30: color-mix(in srgb, var(--emga-color-neutral) 30%, transparent);
    --emga-color-neutral-trans-40: color-mix(in srgb, var(--emga-color-neutral) 40%, transparent);
    --emga-color-neutral-trans-50: color-mix(in srgb, var(--emga-color-neutral) 50%, transparent);
    --emga-color-neutral-trans-60: color-mix(in srgb, var(--emga-color-neutral) 60%, transparent);
    --emga-color-neutral-trans-70: color-mix(in srgb, var(--emga-color-neutral) 70%, transparent);
    --emga-color-neutral-trans-80: color-mix(in srgb, var(--emga-color-neutral) 80%, transparent);
    --emga-color-neutral-trans-90: color-mix(in srgb, var(--emga-color-neutral) 90%, 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-neutral-trans-20);
    --emga-slider-track-filled-color: var(--emga-color-neutral-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-color: var(--emga-color-accent);
    --emga-slider-thumb-focus-color: var(--emga-color-accent-dark-10);
    --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;
    inline-size: 1px !important;
    block-size: 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-inline-size: 0;
}

.emga-css {
    [style*="--emga-size:"] {
        block-size: var(--emga-size);
        inline-size: 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;
    inline-size: var(--emga-size-icon-default);
    block-size: 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-neutral-trans-10);
    border-radius: var(--emga-icon-button-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--emga-sp-xs);
    padding-inline: var(--emga-sp-xs);
    gap: var(--emga-sp-sm);
    cursor: pointer;
    min-inline-size: var(--emga-icon-button-min-size-xs);
    min-block-size: var(--emga-icon-button-min-size-xs);
    background-color: transparent;

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

    .text {
        display: block;
        line-height: 1.1;
        text-align: start;
        text-wrap: balance;
        
    }

    &:hover { 
        background-color: var(--emga-color-neutral-trans-5);
        border-color: var(--emga-color-neutral-trans-5);
    }

    &:focus-visible {
        border-color: var(--emga-color-neutral);
    }

    &.primary {
        background-color: var(--emga-color-accent);
        color: var(--emga-color-accent-icon);
        border-color: transparent;

        &:hover {
            background-color: var(--emga-color-accent-dark-5);
        }

        &:focus-visible {
            border-color: var(--emga-color-neutral);
        }
    }
}

/* 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 {
            inline-size: 13px;
            block-size: 13px;
            margin-inline-start: auto;
            color: var(--emga-color-neutral-trans-50);
        }
    }
}

.emga-css .emga-station-select {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    margin-block-end: 0;
    background-color: var(--emga-color-player-bg);
    padding-block: var(--emga-sp-sm);
    border: 2px solid var(--emga-color-neutral-trans-10);
    border-block-end: none;
    border-radius: var(--emga-icon-button-border-radius);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    z-index: 10;
    
    /* xs and sm defaults */
    inline-size: max-content;
    max-inline-size: calc(100vw - (2 * var(--emga-sp-sm)));
    inset-inline-end: auto;
    margin-block-end: calc(2 * var(--emga-sp-sm));
    border-block-end: 2px solid var(--emga-color-neutral-trans-10);
    border-end-start-radius: var(--emga-icon-button-border-radius);
    border-end-end-radius: var(--emga-icon-button-border-radius);

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    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;
    inline-size: 100%;
    text-align: start;
    padding-block: var(--emga-sp-sm);
    padding-inline: var(--emga-sp-md);
    cursor: pointer;
    color: var(--emga-color-neutral-trans-50);
    font-family: var(--emga-font-family-1);
    line-height: 1.2;
    transition: background-color 0.2s, color 0.2s;
    text-wrap: balance;

    &:hover {
        background-color: var(--emga-color-neutral-trans-5);
    }

    &:focus-visible {
        background-color: var(--emga-color-neutral-trans-5);
        outline: 2px solid var(--emga-color-neutral);
        outline-offset: -2px;
    }

	&[aria-selected="true"] {
		color: var(--emga-color-neutral);
	}
}

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

	/* Position above the station button area */
	position: absolute;
	inset-block-end: calc(100% + var(--emga-sp-md));
	inset-inline-start: 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-neutral);
	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 */
	inline-size: max-content;
	max-inline-size: 100%;

	/* Arrow */
	&::after {
		content: "";
		position: absolute;
		inset-block-end: -7px;
		inset-inline-start: 50%;
		inline-size: 14px;
		block-size: 14px;
		background-color: var(--emga-color-neutral);
		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 {
		inset-inline-start: 0;
		inset-inline-end: auto;
		max-inline-size: 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 {
		inset-inline-start: 23px;
		inset-inline-end: auto;
		transform: rotate(45deg);
	}
}

@media (max-width: 600px) {
	.emga-page-player .emga-bubble {
		inset-inline-start: auto;
		inset-inline-end: 0;
		max-inline-size: 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 {
		inset-inline-start: auto;
		inset-inline-end: 18px;
		transform: rotate(45deg);
	}

    .emga-fixed-player .emga-bubble::after {
		inset-inline-start: 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-inline: 10px;
}

.emga-bubble-close {
    --this-icon-size: 12px;
    --this-padding: 10px;
    cursor: pointer;
    border: 0;
    background: transparent;
	position: absolute;
    padding: var(--this-padding);
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: calc(var(--this-icon-size) + (var(--this-padding) * 2));
	block-size: calc(var(--this-icon-size) + (var(--this-padding) * 2));
	

	/* Icon color */
	.emga-icon {
		color: var(--emga-color-player-bg);
        inline-size: var(--this-icon-size);
        block-size: var(--this-icon-size);
        opacity: 0.5;
	}

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


}

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

.emga-volume .emga-icon-button {
    .icon-volume,
    .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;
    inset-block-end: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    margin-block-end: 0;
    background-color: var(--emga-color-player-bg);
    padding-block: var(--emga-sp-lg);
    padding-inline-start: 17px;
    padding-inline-end: var(--emga-sp-sm);
    border: 2px solid var(--emga-color-neutral-trans-10);
    border-block-end: none;
    border-radius: var(--emga-icon-button-border-radius);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    z-index: 10;
    flex-direction: column;
    gap: var(--emga-sp-md);
    align-items: start;
    justify-content: start;
    display: none;
}
.emga-volume-wrap:has(.emga-icon-button[aria-expanded="true"]) {
    .emga-volume-select {
        display: flex;
    }
}

/* 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 {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    writing-mode: vertical-rl;
    transform: scaleY(-1);
    display: block;
}

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

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

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

    /*custom styles*/
    background-color: var(--emga-color-accent);
    block-size: var(--emga-slider-thumb-thickness);
    inline-size: var(--emga-slider-thumb-thickness);
    margin-block-start: var(--emga-slider-thumb-shift);
}

.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 */
@supports (-moz-appearance:none) {
    .emga-volume-slider {
        position: relative;
        inset-block-start: 4px;
    }
}
.emga-volume-slider::-moz-range-track {
    background: linear-gradient(to bottom, var(--emga-slider-track-filled-color) 0%, var(--emga-slider-track-filled-color) var(--emga-slider-fill-percent, 0%), var(--emga-slider-track-color) var(--emga-slider-fill-percent, 0%), var(--emga-slider-track-color) 100%);
    border-radius: var(--emga-slider-track-border-radius);
    block-size: var(--emga-slider-track-thickness);
}

.emga-volume-slider::-moz-range-thumb {
    border: none;
    border-radius: 0;
    background-color: var(--emga-color-accent);
    block-size: var(--emga-slider-thumb-thickness);
    inline-size: 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);
    }

    .emga-volume-select {
        padding-inline-start: 21px;
    }
    
}

/* 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 {
        inline-size: auto;
        inset-inline-end: 0;
        margin-block-end: 0;
        border-block-end: none;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }
    
}

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

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

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

    .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-song-art {
        border: 1px solid #ddd;
    }

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

        > * {
            inline-size: 100%;
            min-inline-size: 0;
        }

        .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-small-title-default {
            display: none;
        }
        
        .emga-small-title-station {
            display: block;
        }

        .large-text {
            font-size: 22px;
            font-weight: 700;
            margin-block-start: 5px;
            margin-block-end: 2px;
            color: var(--emga-color-song-accent);
        }
        .small-text {
            line-height: 1.1;
            min-block-size: 1.1em;
        }
    }

    .emga-station {
        .emga-icon-button {
            .text {
                display: none;
            }
            
            .emga-arrow-down {
                display: none;
            }
        }  
    }
    
    .emga-station-select {
        inset-block-end: 100%;
        margin-block-end: 0;
        
        /* xs and sm defaults */
        inline-size: max-content;
        max-inline-size: calc(100vw - (2 * 3.3rem));
        inset-inline-start: auto;
        inset-inline-end: 0;
        margin-block-end: calc(2 * var(--emga-sp-lg));
    }

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

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

    .emga-history {
        margin-block-start: var(--emga-sp-xxl);
    }

    .emga-history-heading {
        padding: 0;
        margin-block: 0 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-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-block-start: var(--emga-sp-xl);
        
        li {
            display: grid;
            gap: var(--emga-sp-lg);
            grid-template-columns: auto 1fr;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
        }
    }

    .emga-history-song-art {
        --this-size: 84px;
        block-size: var(--this-size);
        inline-size: var(--this-size);
    }

    .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-history-song-time {
        font-family: var(--emga-font-family-1);
        font-size: 14px;
        text-transform: uppercase;
        opacity: 0.5;
        font-weight: 600;
    }

    .emga-history-song-name {
        font-weight: 700;
        font-size: 19px;
    }
    .emga-history-song-artist {
        min-block-size: 1.1em;
    }

    

} /* .emga-page-player */

@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-play {
            grid-column: 1;
            grid-row: 1;
        }

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

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

        .emga-spacer {
            display: none;
        }

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

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

            .small-title {
                font-size: 18px;
            }
            .large-text {
                font-size: 28px;
                margin-block-start: 7px;
                margin-block-end: 3px;
            }
            .small-text {
                min-block-size: auto;
            }
            .emga-small-title-default {
                display: block;
            }
            
            .emga-small-title-station {
                display: none;
            }
        }
        
        .emga-station {
            .emga-icon-button {
                inline-size: 100%;
                justify-content: start;
                padding-inline: var(--emga-sp-md);

                .text {
                    display: block;
                }
                
                .emga-arrow-down {
                    display: block;
                }
            }  
        } 

        .emga-station-select {
            inline-size: auto;
            inset-inline-end: 0;
            inset-inline-start: 0;
            margin-block-end: 0;
            border-block-end: none;
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }

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

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




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

    .emga-wrap {
        padding-inline: var(--emga-sp-sm);
    }
}

.emga-fixed-player {
    position: fixed;
    inline-size: 100%;
    inset-block-end: 0;
    inset-inline-start: 0;
    z-index: 2;
    background-color: var(--emga-color-player-bg);
    border-block-start-color: var(--emga-color-neutral-trans-10);
    border-block-start-width: 2px;
    border-block-start-style: solid;
    color: var(--emga-color-body-text);
    
    .emga-content {
        padding-block: var(--emga-sp-sm);
        padding-inline: 0;
        color: var(--emga-color-neutral);
        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;
    
    }
    
    /* single station mode */
    &.single-station-mode .emga-content {
        grid-template-columns: 1fr auto;
    }
    
    &.single-station-mode .emga-song-text {
        .emga-small-title-default {
            display: block;
        }
        
        .emga-small-title-station {
            display: none;
        }
    }

    /* popout player button */
    .emga-expand {
        display: none;
    }

    /* now playing song info */
    .emga-song {
        block-size: 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-song-art {
        display: block;
        block-size: var(--emga-song-art-size-xs);
        inline-size: var(--emga-song-art-size-xs);
    }

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

        > * {
            inline-size: 100%;
            min-inline-size: 0;
        }

        .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-small-title-default {
            display: none;
        }
        
        .emga-small-title-station {
            display: block;
        }

        .large-text {
            font-size: 16px;
            font-weight: 700;
            margin-block-start: 2px;
            margin-block-end: 2px;
        }
    }

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

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

} /* end .emga-fixed-player */


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

        footer.et-l--footer {
            padding-block-end: var(--emga-footer-spacer-sm) !important;
        }
    }

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

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

        .emga-song {
            block-size: var(--emga-icon-button-min-size-sm);
            grid-template-columns: auto 1fr;
        }
    
        .emga-song-art {
            display: block;
            block-size: var(--emga-song-art-size);
            inline-size: var(--emga-song-art-size);
        }
    
        .emga-song-text {
            font-size: 14px;
        
            .small-title {
                font-size: 12px;
            }
        
            .large-text {
                font-size: 20px;
                margin-block-start: 2px;
                margin-block-end: 4px;
            }
        }

        .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;
        }

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

        .emga-station {
            .emga-icon-button {
                inline-size: 100%;
                justify-content: start;
                padding-inline: var(--emga-sp-md);

                .text {
                    display: block;
                }
                
                .emga-arrow-down {
                    display: block;
                }
            }  
        }

        

        .emga-song-text {
            .emga-small-title-default {
                display: block;
            }
            
            .emga-small-title-station {
                display: none;
            }
        }
        
        .emga-expand {
            display: block;
        }
    }
}