/**
 * MN Audio Player Stylesheet
 * 
 * Standalone styling for the MN Audio Player plugin.
 * Provides luxury gold/neutral aesthetics, animated equalizers, and responsive controls.
 *
 * @package MN_Audio_Player
 * @version 1.0.0
 */

/* ==========================================================================
   Material Symbols & Typography Setup
   ========================================================================== */
.mn-audio-player .material-symbols-outlined,
.crystal-audio-player .material-symbols-outlined {
	font-family: 'Material Symbols Outlined' !important;
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga';
}

/* ==========================================================================
   Player Container Base & Resets
   ========================================================================== */
.mn-audio-player,
.crystal-audio-player {
	--gold-accent: #775a19;
	--gold-light: #fed488;
	--border-color: #e9e8e7;
	--text-dark: #1b1c1c;
	--text-muted: #747878;
	--bg-main: #fbf9f8;
	box-sizing: border-box;
	background-color: var(--bg-main);
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	padding: 1.25rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--text-dark);
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
	position: relative;
	transition: all 0.2s ease;
	width: 100%;
	clear: both;
}

@media (min-width: 768px) {
	.mn-audio-player,
	.crystal-audio-player {
		padding: 1.5rem;
	}
}

.mn-audio-player *,
.crystal-audio-player * {
	box-sizing: border-box;
}

/* ==========================================================================
   Range Slider Custom Styles
   ========================================================================== */
.mn-audio-player input[type="range"].crystal-range,
.crystal-audio-player input[type="range"].crystal-range {
	-webkit-appearance: none;
	appearance: none;
	height: 5px;
	border-radius: 9999px;
	background-color: #e9e8e7;
	background-image: linear-gradient(var(--gold-accent), var(--gold-accent));
	background-size: 0% 100%;
	background-repeat: no-repeat;
	outline: none;
	cursor: pointer;
	border: none;
	padding: 0;
	margin: 0;
	vertical-align: middle;
}

.mn-audio-player input[type="range"].crystal-range::-webkit-slider-thumb,
.crystal-audio-player input[type="range"].crystal-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 14px;
	width: 14px;
	border-radius: 50%;
	background: var(--gold-accent);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, background-color 0.15s ease;
	border: 2px solid #ffffff;
}

.mn-audio-player input[type="range"].crystal-range::-webkit-slider-thumb:hover,
.crystal-audio-player input[type="range"].crystal-range::-webkit-slider-thumb:hover {
	transform: scale(1.25);
}

.mn-audio-player input[type="range"].crystal-range::-moz-range-thumb,
.crystal-audio-player input[type="range"].crystal-range::-moz-range-thumb {
	height: 14px;
	width: 14px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: var(--gold-accent);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.mn-audio-player input[type="range"].crystal-range::-moz-range-track,
.crystal-audio-player input[type="range"].crystal-range::-moz-range-track {
	background: transparent;
	border: none;
}

/* ==========================================================================
   Equalizer Bars Styling
   ========================================================================== */
.mn-audio-player .eq-bar,
.crystal-audio-player .eq-bar {
	width: 3px;
	background-color: var(--gold-accent);
	border-radius: 3px;
	display: inline-block;
	transition: height 0.2s ease;
}

.mn-audio-player .mini-eq-bar,
.crystal-audio-player .mini-eq-bar {
	width: 2px;
	background-color: var(--gold-accent);
	border-radius: 2px;
	display: inline-block;
}

/* ==========================================================================
   Button Resets
   ========================================================================== */
.mn-audio-player button,
.crystal-audio-player button {
	font-family: inherit;
	line-height: 1;
	outline: none;
}

.mn-audio-player button:focus-visible,
.crystal-audio-player button:focus-visible {
	outline: 2px solid var(--gold-accent);
	outline-offset: 2px;
}