/* Proweb Video Player – knappestørrelse og flere knappestiler (flate, 3D og andre) */

/* --- Egen knappestørrelse (--pwvp-btn) og ikonstørrelse (--pwvp-ico) --- */
.pwvp.pwvp--btn-sized .pwvp__btn { height: var(--pwvp-btn); min-width: var(--pwvp-btn); }
.pwvp.pwvp--btn-sized .pwvp__btn:not(.pwvp__btn--text) { width: var(--pwvp-btn); padding: 0; }
.pwvp.pwvp--btn-sized .pwvp__btn--text { min-width: calc(var(--pwvp-btn) * 1.25); padding: 0 calc(var(--pwvp-btn) * 0.28); }
.pwvp.pwvp--btn-sized .pwvp__btn .pwvp__icon, .pwvp.pwvp--btn-sized .pwvp__btn .pwvp__icon svg { width: var(--pwvp-ico); height: var(--pwvp-ico); }
.pwvp-playlist.pwvp--btn-sized .pwvp-playlist__tools .pwvp-playlist__btn { width: var(--pwvp-btn); height: var(--pwvp-btn); }
.pwvp-playlist.pwvp--btn-sized .pwvp-playlist__tools .pwvp-playlist__btn .pwvp__icon, .pwvp-playlist.pwvp--btn-sized .pwvp-playlist__tools .pwvp-playlist__btn svg { width: calc(var(--pwvp-ico) * 0.9); height: calc(var(--pwvp-ico) * 0.9); }
.pwvp-playlist.pwvp--btn-sized .pwvp-playlist__tools .pwvp-playlist__searchbox { height: var(--pwvp-btn); }

/* --- Felles regler for stilene som styres av variabler (--b-*) --- */
.pwvp.pwvp--btn-v .pwvp__btn {
	min-width: var(--pwvp-btn, 36px);
	height: var(--pwvp-btn, 36px);
	margin: 0 2px;
	border: 1px solid var(--b-line, transparent);
	border-radius: var(--b-r, 8px);
	background: var(--b-bg, transparent);
	box-shadow: var(--b-sh, none);
	color: var(--b-fg, inherit);
	-webkit-backdrop-filter: var(--b-blur, none);
	backdrop-filter: var(--b-blur, none);
	transition: background 0.15s, border-color 0.15s, box-shadow 0.12s, transform 0.08s;
}
.pwvp.pwvp--btn-v .pwvp__btn:not(.pwvp__btn--text) { width: var(--pwvp-btn, 36px); padding: 0; }
.pwvp.pwvp--btn-v .pwvp__btn--text { padding: 0 10px; }
.pwvp.pwvp--btn-v .pwvp__left, .pwvp.pwvp--btn-v .pwvp__right { gap: 2px; }
.pwvp.pwvp--btn-v .pwvp__btn:hover, .pwvp.pwvp--btn-v .pwvp__btn:hover:focus:not(:focus-visible) {
	border: 1px solid var(--b-line-h, var(--b-line, transparent));
	background: var(--b-bg-h, var(--b-bg, rgba(127, 127, 127, 0.25)));
	box-shadow: var(--b-sh-h, var(--b-sh, none));
	color: var(--b-fg, inherit);
}
.pwvp.pwvp--btn-v .pwvp__btn:focus:not(:focus-visible):not(:hover) { border: 1px solid var(--b-line, transparent); background: var(--b-bg, transparent); box-shadow: var(--b-sh, none); color: var(--b-fg, inherit); }
.pwvp.pwvp--btn-v .pwvp__btn:active, .pwvp.pwvp--btn-v .pwvp__btn:hover:active {
	border: 1px solid var(--b-line-h, var(--b-line, transparent));
	background: var(--b-bg-a, var(--b-bg-h, var(--b-bg, transparent)));
	box-shadow: var(--b-sh-a, none);
	transform: translateY(1px);
}
.pwvp.pwvp--btn-v .pwvp__btn.is-on, .pwvp.pwvp--btn-v .pwvp__btn.is-on:hover { border-color: var(--b-ring, var(--pwvp-accent)); color: var(--b-fg-on, var(--pwvp-accent)); }

.pwvp-playlist.pwvp--btn-v .pwvp-playlist__tools .pwvp-playlist__btn {
	width: var(--pwvp-btn, 36px);
	height: var(--pwvp-btn, 36px);
	border: 1px solid var(--b-line, transparent);
	border-radius: var(--b-r, 8px);
	background: var(--b-bg, transparent);
	box-shadow: var(--b-sh, none);
	color: var(--b-fg, var(--pwvp-muted));
	-webkit-backdrop-filter: var(--b-blur, none);
	backdrop-filter: var(--b-blur, none);
	transition: background 0.15s, border-color 0.15s, box-shadow 0.12s, transform 0.08s;
}
.pwvp-playlist.pwvp--btn-v .pwvp-playlist__tools .pwvp-playlist__btn:hover { border-color: var(--b-line-h, var(--b-line, transparent)); background: var(--b-bg-h, var(--b-bg, var(--pwvp-bg-hover))); box-shadow: var(--b-sh-h, var(--b-sh, none)); color: var(--b-fg, var(--pwvp-text)); }
.pwvp-playlist.pwvp--btn-v .pwvp-playlist__tools .pwvp-playlist__btn:active { background: var(--b-bg-a, var(--b-bg-h, var(--b-bg, transparent))); box-shadow: var(--b-sh-a, none); transform: translateY(1px); }
.pwvp-playlist.pwvp--btn-v .pwvp-playlist__tools .pwvp-playlist__btn.is-on { border-color: var(--b-ring, var(--pwvp-accent)); color: var(--b-fg-on, var(--pwvp-accent)); }
.pwvp-playlist.pwvp--btn-v .pwvp-playlist__tools .pwvp-playlist__searchbox { border: 1px solid var(--b-line-h, var(--b-line, transparent)); border-radius: var(--b-r, 8px); }

/* --- Omriss: gjennomsiktig med ramme, fylles ved hover --- */
.pwvp--btn-outline {
	--b-r: 8px;
	--b-line: color-mix(in srgb, currentColor 45%, transparent);
	--b-line-h: var(--pwvp-accent);
	--b-bg-h: color-mix(in srgb, var(--pwvp-accent) 16%, transparent);
	--b-bg-a: color-mix(in srgb, var(--pwvp-accent) 30%, transparent);
}

/* --- Myk: flate knapper med en lett tonet flate i aksentfargen --- */
.pwvp--btn-soft {
	--b-r: 10px;
	--b-bg: color-mix(in srgb, var(--pwvp-accent) 20%, transparent);
	--b-bg-h: color-mix(in srgb, var(--pwvp-accent) 34%, transparent);
	--b-bg-a: color-mix(in srgb, var(--pwvp-accent) 46%, transparent);
	--b-fg: color-mix(in srgb, var(--pwvp-accent) 55%, #fff);
}
.pwvp--light.pwvp--btn-soft { --b-fg: color-mix(in srgb, var(--pwvp-accent) 88%, #000); }

/* --- Solid: fylt med aksentfargen --- */
.pwvp--btn-solid {
	--b-r: 10px;
	--b-bg: var(--pwvp-accent);
	--b-bg-h: color-mix(in srgb, var(--pwvp-accent) 86%, #fff);
	--b-bg-a: color-mix(in srgb, var(--pwvp-accent) 86%, #000);
	--b-line: color-mix(in srgb, var(--pwvp-accent) 74%, #000);
	--b-fg: #fff;
	--b-fg-on: #fff;
	--b-ring: #fff;
	--b-sh: 0 1px 2px rgba(0, 0, 0, 0.35);
	--b-sh-a: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* --- Glass: frostet glass med lys kant --- */
.pwvp--btn-glass {
	--b-r: 999px;
	--b-bg: rgba(255, 255, 255, 0.12);
	--b-bg-h: rgba(255, 255, 255, 0.24);
	--b-line: rgba(255, 255, 255, 0.28);
	--b-blur: blur(10px) saturate(1.4);
	--b-sh: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 2px 8px rgba(0, 0, 0, 0.25);
	--b-sh-a: inset 0 2px 5px rgba(0, 0, 0, 0.35);
}
.pwvp--light.pwvp--btn-glass {
	--b-bg: rgba(255, 255, 255, 0.62);
	--b-bg-h: rgba(255, 255, 255, 0.9);
	--b-line: rgba(17, 24, 39, 0.14);
	--b-sh: inset 0 1px 0 #fff, 0 2px 6px rgba(17, 24, 39, 0.12);
}

/* --- Neon: lysende kant og glød i aksentfargen --- */
.pwvp--btn-neon {
	--b-r: 8px;
	--b-bg: color-mix(in srgb, var(--pwvp-accent) 8%, transparent);
	--b-bg-h: color-mix(in srgb, var(--pwvp-accent) 20%, transparent);
	--b-line: var(--pwvp-accent);
	--b-fg: color-mix(in srgb, var(--pwvp-accent) 55%, #fff);
	--b-sh: 0 0 6px color-mix(in srgb, var(--pwvp-accent) 70%, transparent), inset 0 0 6px color-mix(in srgb, var(--pwvp-accent) 35%, transparent);
	--b-sh-h: 0 0 14px var(--pwvp-accent), inset 0 0 10px color-mix(in srgb, var(--pwvp-accent) 55%, transparent);
	--b-sh-a: 0 0 4px var(--pwvp-accent), inset 0 0 12px color-mix(in srgb, var(--pwvp-accent) 60%, transparent);
}
.pwvp--light.pwvp--btn-neon { --b-fg: color-mix(in srgb, var(--pwvp-accent) 90%, #000); }
.pwvp.pwvp--btn-neon .pwvp__played { box-shadow: 0 0 8px var(--pwvp-accent); }

/* --- Gloss: runde, blanke «gelé»-knapper i 3D --- */
.pwvp--btn-gloss {
	--b-r: 999px;
	--b-bg: linear-gradient(to bottom, color-mix(in srgb, var(--pwvp-accent) 50%, #fff) 0%, var(--pwvp-accent) 50%, color-mix(in srgb, var(--pwvp-accent) 78%, #000) 100%);
	--b-bg-h: linear-gradient(to bottom, color-mix(in srgb, var(--pwvp-accent) 38%, #fff) 0%, color-mix(in srgb, var(--pwvp-accent) 90%, #fff) 50%, var(--pwvp-accent) 100%);
	--b-bg-a: linear-gradient(to top, color-mix(in srgb, var(--pwvp-accent) 60%, #fff) 0%, var(--pwvp-accent) 50%, color-mix(in srgb, var(--pwvp-accent) 78%, #000) 100%);
	--b-line: color-mix(in srgb, var(--pwvp-accent) 55%, #000);
	--b-fg: #fff;
	--b-fg-on: #fff;
	--b-ring: #fff;
	--b-sh: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 4px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.45);
	--b-sh-a: inset 0 3px 6px rgba(0, 0, 0, 0.45);
}

/* --- Neu: mykt opphøyd «papir»-3D som trykkes inn --- */
.pwvp--btn-neu {
	--neu-bg: #2a2e3a;
	--b-r: 12px;
	--b-bg: var(--neu-bg);
	--b-sh: 5px 5px 10px rgba(0, 0, 0, 0.55), -4px -4px 9px rgba(255, 255, 255, 0.08);
	--b-sh-a: inset 3px 3px 7px rgba(0, 0, 0, 0.6), inset -3px -3px 7px rgba(255, 255, 255, 0.07);
}
.pwvp--light.pwvp--btn-neu {
	--neu-bg: #e8ebf2;
	--b-sh: 5px 5px 10px rgba(120, 130, 150, 0.5), -5px -5px 10px #fff;
	--b-sh-a: inset 3px 3px 7px rgba(120, 130, 150, 0.5), inset -3px -3px 7px #fff;
}
.pwvp.pwvp--btn-neu.pwvp--bar-below .pwvp__controls, .pwvp.pwvp--btn-neu.pwvp--bar-inline .pwvp__controls, .pwvp-playlist.pwvp--btn-neu.pwvp-playlist--span .pwvp-playlist__tools--bottom { background: var(--neu-bg); }

@container (max-width: 560px) {
	.pwvp.pwvp--btn-v:not(.pwvp--btn-sized) .pwvp__btn { min-width: 32px; height: 32px; margin: 0 1px; }
	.pwvp.pwvp--btn-v:not(.pwvp--btn-sized) .pwvp__btn:not(.pwvp__btn--text) { width: 32px; }
}

/* Smale spillere (under 420 px): egne størrelser gir seg, så alt får plass. Ellers følges størrelsen som er satt. */
@container (max-width: 420px) {
	.pwvp.pwvp--btn-sized .pwvp__btn { height: min(var(--pwvp-btn-s), 32px); min-width: min(var(--pwvp-btn-s), 32px); }
	.pwvp.pwvp--btn-sized .pwvp__btn:not(.pwvp__btn--text) { width: min(var(--pwvp-btn-s), 32px); }
	.pwvp.pwvp--btn-sized .pwvp__btn .pwvp__icon, .pwvp.pwvp--btn-sized .pwvp__btn .pwvp__icon svg { width: min(calc(var(--pwvp-ico) * 0.88), 20px); height: min(calc(var(--pwvp-ico) * 0.88), 20px); }
}

/* Store knapper (44 px og over) tar mer plass: det minst viktige skjules tidligere. */
@container (max-width: 640px) {
	.pwvp.pwvp--btn-lg .pwvp__btn.pwvp__pip, .pwvp.pwvp--btn-lg .pwvp__btn.pwvp__info { display: none; }
}
@container (max-width: 520px) {
	.pwvp.pwvp--btn-lg .pwvp__btn.pwvp__share, .pwvp.pwvp--btn-lg .pwvp__time { display: none; }
}