/* KS Music Player – Frontend
   Alle gestaltbaren Werte laufen über CSS-Variablen, damit die
   Elementor-Einstellungen greifen, ohne von Theme-Styles überschrieben
   zu werden (deshalb die !important-Resets). */

.ksmp-wrap { width:100%; display:block; }

.ksmp-player, .ksmp-player * { box-sizing:border-box; }
.ksmp-player {
	/* Standardwerte – von Elementor überschreibbar */
	--ksmp-bg:#0b1f2b;
	--ksmp-block:#0e2733;
	--ksmp-accent:#067DAF;
	--ksmp-text:#ffffff;

	--ksmp-bar-height:6px;
	--ksmp-bar-track:rgba(255,255,255,.25);
	--ksmp-bar-fill:var(--ksmp-accent);
	--ksmp-thumb-size:14px;
	--ksmp-thumb-color:var(--ksmp-accent);

	--ksmp-play-size:44px;
	--ksmp-play-bg:var(--ksmp-accent);
	--ksmp-play-icon:var(--ksmp-text);
	--ksmp-play-icon-size:22px;

	--ksmp-nav-size:36px;
	--ksmp-nav-icon:var(--ksmp-text);
	--ksmp-nav-icon-size:20px;
	--ksmp-nav-bg:transparent;

	--ksmp-controls-gap:6px;
	--ksmp-controls-justify:flex-start;

	--ksmp-row-pad-y:12px;
	--ksmp-row-pad-x:16px;
	--ksmp-row-border:rgba(255,255,255,.08);
	--ksmp-row-active-bg:rgba(255,255,255,.14);
	--ksmp-row-hover-bg:rgba(255,255,255,.06);
	--ksmp-num-color:var(--ksmp-text);
	--ksmp-list-gap:6px;

	--ksmp-time-color:var(--ksmp-text);

	font-family: var(--ksmp-font, system-ui,-apple-system,Segoe UI,Roboto,sans-serif);
	display:block;
	width:100%;
	max-width:100%;
	margin:0;
}

/* ---------- Kopfbereich ---------- */
.ksmp-player .ksmp-top {
	display:flex;
	gap:16px;
	align-items:center;
	background:var(--ksmp-bg);
	color:var(--ksmp-text);
	padding:16px;
	border-radius:14px;
}
.ksmp-player .ksmp-art {
	flex:0 0 72px; width:72px; height:72px;
	border-radius:10px; overflow:hidden;
	background:linear-gradient(135deg,var(--ksmp-accent),var(--ksmp-block));
}
.ksmp-player .ksmp-cover { width:100%; height:100%; object-fit:cover; display:block; margin:0; padding:0; border-radius:0; max-width:none; }
.ksmp-player .ksmp-main { flex:1 1 auto; min-width:0; }
.ksmp-player .ksmp-title { font-weight:700; font-size:15px; line-height:1.3; margin:0; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ksmp-player .ksmp-artist { font-size:13px; line-height:1.3; margin:0 0 6px; color:inherit; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Fortschritt ---------- */
.ksmp-player .ksmp-progress { display:flex; align-items:center; gap:8px; margin-bottom:8px; width:100%; }
.ksmp-player .ksmp-time { font-size:11px; opacity:.7; width:38px; flex:0 0 38px; text-align:center; color:var(--ksmp-time-color); }

.ksmp-player input[type="range"] {
	-webkit-appearance:none !important;
	-moz-appearance:none !important;
	appearance:none !important;
	display:block !important;
	flex:1 1 auto !important;
	width:100% !important;
	min-width:0 !important;
	height:var(--ksmp-bar-height) !important;
	margin:0 !important;
	padding:0 !important;
	border:none !important;
	border-radius:999px !important;
	background:var(--ksmp-bar-track) !important;
	box-shadow:none !important;
	outline:none !important;
	cursor:pointer;
	vertical-align:middle;
}
.ksmp-player input[type="range"]:focus { outline:none !important; box-shadow:none !important; }
.ksmp-player input[type="range"]::-webkit-slider-runnable-track { height:var(--ksmp-bar-height); border-radius:999px; background:transparent; border:none; }
.ksmp-player input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance:none !important; appearance:none !important;
	width:var(--ksmp-thumb-size) !important; height:var(--ksmp-thumb-size) !important;
	margin-top:calc((var(--ksmp-bar-height) - var(--ksmp-thumb-size)) / 2);
	border:none !important; border-radius:50% !important;
	background:var(--ksmp-thumb-color) !important;
	cursor:pointer;
}
.ksmp-player input[type="range"]::-moz-range-track { height:var(--ksmp-bar-height); border-radius:999px; background:var(--ksmp-bar-track); border:none; }
.ksmp-player input[type="range"]::-moz-range-thumb {
	width:var(--ksmp-thumb-size); height:var(--ksmp-thumb-size);
	border:none; border-radius:50%;
	background:var(--ksmp-thumb-color);
	cursor:pointer;
}

/* ---------- Steuerung ---------- */
.ksmp-player .ksmp-controls {
	display:flex; align-items:center;
	gap:var(--ksmp-controls-gap);
	justify-content:var(--ksmp-controls-justify);
	width:100%;
}
.ksmp-player .ksmp-btn {
	background:var(--ksmp-nav-bg) !important;
	border:none !important;
	color:var(--ksmp-nav-icon) !important;
	width:var(--ksmp-nav-size) !important; height:var(--ksmp-nav-size) !important;
	min-width:0 !important; min-height:0 !important;
	display:flex !important; align-items:center; justify-content:center;
	border-radius:50% !important;
	padding:0 !important; margin:0 !important;
	box-shadow:none !important;
	cursor:pointer;
	flex:0 0 auto;
	-webkit-tap-highlight-color:transparent;
	transition:background .15s ease, filter .15s ease;
}
.ksmp-player .ksmp-btn:hover,
.ksmp-player .ksmp-btn:focus { filter:brightness(1.2); outline:none; }
.ksmp-player .ksmp-btn svg { width:var(--ksmp-nav-icon-size); height:var(--ksmp-nav-icon-size); fill:currentColor; display:block; }

.ksmp-player .ksmp-play {
	background:var(--ksmp-play-bg) !important;
	color:var(--ksmp-play-icon) !important;
	width:var(--ksmp-play-size) !important; height:var(--ksmp-play-size) !important;
}
.ksmp-player .ksmp-play svg { width:var(--ksmp-play-icon-size); height:var(--ksmp-play-icon-size); }

.ksmp-player .ksmp-volume { display:flex; align-items:center; gap:6px; margin-left:auto; flex:0 1 auto; max-width:110px; color:var(--ksmp-nav-icon); }
.ksmp-player .ksmp-volume svg { fill:currentColor; opacity:.7; flex:0 0 auto; }
.ksmp-player .ksmp-volume input[type="range"] { width:70px !important; flex:0 0 70px !important; }

/* ---------- Titelliste ---------- */
.ksmp-player .ksmp-playlist {
	list-style:none !important;
	margin:var(--ksmp-list-gap) 0 0 !important; padding:0 !important;
	width:100%;
	border-radius:14px; overflow:hidden;
	background:var(--ksmp-block);
	color:var(--ksmp-text);
}
.ksmp-player .ksmp-playlist li {
	display:flex; align-items:center; gap:10px;
	padding:var(--ksmp-row-pad-y) var(--ksmp-row-pad-x); margin:0;
	font-size:14px; line-height:1.35;
	list-style:none !important;
	cursor:pointer;
	border-bottom:1px solid var(--ksmp-row-border);
	transition:background .15s ease;
}
.ksmp-player .ksmp-playlist li:before { content:none !important; }
.ksmp-player .ksmp-playlist li:last-child { border-bottom:none; }
.ksmp-player .ksmp-playlist:last-child { margin-bottom:0 !important; }
.ksmp-player .ksmp-playlist li:hover { background:var(--ksmp-row-hover-bg); }
.ksmp-player .ksmp-playlist li.active { background:var(--ksmp-row-active-bg); font-weight:600; }
.ksmp-player .ksmp-num { width:20px; flex:0 0 20px; font-size:12px; opacity:.6; color:var(--ksmp-num-color); }
.ksmp-player .ksmp-track-artist { opacity:.6; font-weight:400; margin-left:4px; }

/* ---------- Responsive Grundverhalten ----------
   (Schriftgrößen bewusst NICHT überschrieben – das regelt die
   responsive Typografie in Elementor pro Gerät.) */
@media (max-width:768px){
	.ksmp-player .ksmp-top { gap:12px; }
	.ksmp-player .ksmp-art { flex-basis:64px; width:64px; height:64px; }
}
@media (max-width:600px){
	.ksmp-player .ksmp-art { flex-basis:56px; width:56px; height:56px; }
	.ksmp-player .ksmp-volume { display:none; }
}
@media (max-width:420px){
	.ksmp-player .ksmp-top { flex-wrap:wrap; }
	.ksmp-player .ksmp-art { flex-basis:48px; width:48px; height:48px; }
	.ksmp-player .ksmp-main { flex-basis:100%; }
}