/* Proweb Video Player – kontrollbar under videoen og knappestiler (tiles, round) */

.pwvp, .pwvp-playlist {
	--pwvp-bar-bg: #14161c;
	--pwvp-tile-bg: rgba(255, 255, 255, 0.07);
	--pwvp-tile-line: rgba(255, 255, 255, 0.16);
	--pwvp-tile-hover: rgba(255, 255, 255, 0.18);
	--pwvp-3d-top: #3d4047;
	--pwvp-3d-bottom: #1d1f24;
	--pwvp-3d-top-hover: #4b4f58;
	--pwvp-3d-bottom-hover: #272a30;
	--pwvp-3d-edge: #08090b;
	--pwvp-3d-hi: rgba(255, 255, 255, 0.16);
	--pwvp-3d-drop: rgba(0, 0, 0, 0.55);
	--pwvp-3d-groove: #000;
	--pwvp-3d-bar-top: #2b2d33;
	--pwvp-3d-bar-bottom: #1a1c21;
}
.pwvp--light, .pwvp-playlist.pwvp--light {
	--pwvp-bar-bg: #f1f3f7;
	--pwvp-tile-bg: rgba(17, 24, 39, 0.05);
	--pwvp-tile-line: rgba(17, 24, 39, 0.16);
	--pwvp-tile-hover: rgba(17, 24, 39, 0.12);
	--pwvp-3d-top: #ffffff;
	--pwvp-3d-bottom: #d6dae2;
	--pwvp-3d-top-hover: #ffffff;
	--pwvp-3d-bottom-hover: #e6e9ef;
	--pwvp-3d-edge: #aab0bc;
	--pwvp-3d-hi: rgba(255, 255, 255, 0.95);
	--pwvp-3d-drop: rgba(17, 24, 39, 0.28);
	--pwvp-3d-groove: #c9ced8;
	--pwvp-3d-bar-top: #f6f7fa;
	--pwvp-3d-bar-bottom: #dde1e8;
}

/* Smale spillere med alt på én rad: tidsvisningen vike, og fremdriftslinjen får bli smalere. */
@container (max-width: 420px) {
	.pwvp.pwvp--bar-inline .pwvp__time { display: none; }
	.pwvp.pwvp--bar-inline .pwvp__progress { min-width: 20px; }
}

/* --- Galleri og spilleliste med egen bredde, eventuelt utenfor innholdsbredden --- */
.pwvp-gallery.pwvp--sized, .pwvp-playlist.pwvp--sized { margin-left: auto !important; margin-right: auto !important; }
.pwvp-gallery.pwvp--breakout, .pwvp-playlist.pwvp--breakout { width: var(--pwvp-bw) !important; max-width: none !important; margin-left: calc(50% - var(--pwvp-bw) / 2) !important; margin-right: 0 !important; }

/* --- Kontrollbar over videoen som aldri skjules (valgfritt) --- */
.pwvp.pwvp--bar-pinned .pwvp__controls { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }

/* --- Kontrollbar under videoen (alltid synlig, dekker ikke bildet) --- */
.pwvp.pwvp--bar-below .pwvp__controls,
.pwvp.pwvp--bar-inline .pwvp__controls {
	position: relative;
	padding: 6px 10px;
	background: var(--pwvp-bar-bg);
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
}
.pwvp.pwvp--bar-below .pwvp__controls { min-height: var(--pwvp-bar-h, 70px); }

/* Alt på én rad: spillknapper, fremdriftslinje og verktøy ved siden av hverandre. */
.pwvp.pwvp--bar-inline .pwvp__controls { display: flex; align-items: center; gap: 10px; height: var(--pwvp-bar-h, 52px); }
.pwvp.pwvp--bar-inline .pwvp__bar { display: contents; }
.pwvp.pwvp--bar-inline .pwvp__left { order: 1; }
.pwvp.pwvp--bar-inline .pwvp__progress { order: 2; flex: 1 1 auto; min-width: 40px; margin: 0; }
.pwvp.pwvp--bar-inline .pwvp__right { order: 3; }
.pwvp.pwvp--bar-inline .pwvp__spacer { display: none; }
.pwvp.pwvp--bar-below.is-idle.is-playing .pwvp__stage, .pwvp.pwvp--bar-inline.is-idle.is-playing .pwvp__stage { cursor: none; }

/* --- Knappestiler: firkantede fliser og runde knapper --- */
.pwvp.pwvp--btn-tiles .pwvp__btn,
.pwvp.pwvp--btn-round .pwvp__btn {
	min-width: 36px;
	height: 36px;
	margin: 0 2px;
	border: 1px solid var(--pwvp-tile-line);
	background: var(--pwvp-tile-bg);
	transition: background 0.15s, border-color 0.15s;
}
/* Kvadratiske/runde knapper; knappen med tekst (hastighet) får bare litt luft på sidene. */
.pwvp.pwvp--btn-tiles .pwvp__btn:not(.pwvp__btn--text), .pwvp.pwvp--btn-round .pwvp__btn:not(.pwvp__btn--text) { width: 36px; padding: 0; }
.pwvp.pwvp--btn-tiles .pwvp__btn--text, .pwvp.pwvp--btn-round .pwvp__btn--text { padding: 0 10px; }
.pwvp.pwvp--btn-tiles .pwvp__btn { border-radius: 6px; }
.pwvp.pwvp--btn-round .pwvp__btn { border-radius: 999px; }
.pwvp.pwvp--btn-tiles .pwvp__btn:hover, .pwvp.pwvp--btn-round .pwvp__btn:hover,
.pwvp.pwvp--btn-tiles .pwvp__btn:focus, .pwvp.pwvp--btn-round .pwvp__btn:focus { border: 1px solid var(--pwvp-accent); background: var(--pwvp-tile-hover); }
.pwvp.pwvp--btn-tiles .pwvp__btn.is-on, .pwvp.pwvp--btn-round .pwvp__btn.is-on { border-color: var(--pwvp-accent); }
.pwvp.pwvp--btn-tiles .pwvp__btn:focus:not(:focus-visible), .pwvp.pwvp--btn-round .pwvp__btn:focus:not(:focus-visible) { border-color: var(--pwvp-tile-line); background: var(--pwvp-tile-bg); }
.pwvp.pwvp--btn-tiles .pwvp__btn:hover:focus:not(:focus-visible), .pwvp.pwvp--btn-round .pwvp__btn:hover:focus:not(:focus-visible) { border-color: var(--pwvp-accent); background: var(--pwvp-tile-hover); }
.pwvp.pwvp--btn-tiles .pwvp__left, .pwvp.pwvp--btn-tiles .pwvp__right,
.pwvp.pwvp--btn-round .pwvp__left, .pwvp.pwvp--btn-round .pwvp__right { gap: 2px; }

@container (max-width: 560px) {
	.pwvp.pwvp--btn-tiles .pwvp__btn, .pwvp.pwvp--btn-round .pwvp__btn { min-width: 32px; height: 32px; margin: 0 1px; }
	.pwvp.pwvp--btn-tiles .pwvp__btn:not(.pwvp__btn--text), .pwvp.pwvp--btn-round .pwvp__btn:not(.pwvp__btn--text) { width: 32px; }
	.pwvp.pwvp--bar-inline .pwvp__controls { gap: 6px; padding: 6px; }
}

/* --- Knappestil «3D»: opphøyde knapper med lys kant øverst og skygge under, som trykkes inn --- */
.pwvp.pwvp--btn-3d .pwvp__btn {
	min-width: 36px;
	height: 36px;
	margin: 0 3px;
	border: 1px solid var(--pwvp-3d-edge);
	border-radius: 10px;
	background: linear-gradient(to bottom, var(--pwvp-3d-top), var(--pwvp-3d-bottom));
	box-shadow: inset 0 1px 0 var(--pwvp-3d-hi), 0 2px 3px var(--pwvp-3d-drop);
	transition: background 0.15s, box-shadow 0.08s, transform 0.08s;
}
.pwvp.pwvp--btn-3d .pwvp__btn:not(.pwvp__btn--text) { width: 36px; padding: 0; }
.pwvp.pwvp--btn-3d .pwvp__btn--text { padding: 0 10px; }
.pwvp.pwvp--btn-3d .pwvp__play, .pwvp.pwvp--btn-3d .pwvp__rewind { border-radius: 50%; }
.pwvp.pwvp--btn-3d .pwvp__btn:hover, .pwvp.pwvp--btn-3d .pwvp__btn:focus,
.pwvp.pwvp--btn-3d .pwvp__btn:hover:focus:not(:focus-visible) {
	border: 1px solid var(--pwvp-3d-edge);
	background: linear-gradient(to bottom, var(--pwvp-3d-top-hover), var(--pwvp-3d-bottom-hover));
	box-shadow: inset 0 1px 0 var(--pwvp-3d-hi), 0 2px 3px var(--pwvp-3d-drop);
}
.pwvp.pwvp--btn-3d .pwvp__btn:focus:not(:focus-visible):not(:hover) {
	background: linear-gradient(to bottom, var(--pwvp-3d-top), var(--pwvp-3d-bottom));
}
.pwvp.pwvp--btn-3d .pwvp__btn:active, .pwvp.pwvp--btn-3d .pwvp__btn:hover:active {
	border: 1px solid var(--pwvp-3d-edge);
	background: linear-gradient(to top, var(--pwvp-3d-top), var(--pwvp-3d-bottom));
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
	transform: translateY(1px);
}
.pwvp.pwvp--btn-3d .pwvp__btn.is-on, .pwvp.pwvp--btn-3d .pwvp__btn.is-on:hover { box-shadow: inset 0 1px 0 var(--pwvp-3d-hi), 0 0 0 1px var(--pwvp-accent), 0 2px 3px var(--pwvp-3d-drop); }

/* Fremdriftslinjen som et innfelt spor, og fremdriften som en blank «væske» */
.pwvp.pwvp--btn-3d .pwvp__progress::before,
.pwvp.pwvp--btn-3d .pwvp__progress:hover::before, .pwvp.is-scrubbing.pwvp--btn-3d .pwvp__progress::before { top: 5px; height: 8px; border-radius: 4px; background: var(--pwvp-3d-groove); opacity: 1; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), 0 1px 0 var(--pwvp-3d-hi); }
.pwvp.pwvp--btn-3d .pwvp__buffer, .pwvp.pwvp--btn-3d .pwvp__played,
.pwvp.pwvp--btn-3d .pwvp__progress:hover .pwvp__buffer, .pwvp.pwvp--btn-3d .pwvp__progress:hover .pwvp__played,
.pwvp.is-scrubbing.pwvp--btn-3d .pwvp__buffer, .pwvp.is-scrubbing.pwvp--btn-3d .pwvp__played { top: 5px; height: 8px; border-radius: 4px; }
.pwvp.pwvp--btn-3d .pwvp__buffer { background: rgba(255, 255, 255, 0.2); opacity: 1; }
.pwvp.pwvp--btn-3d .pwvp__played { background: linear-gradient(to bottom, color-mix(in srgb, var(--pwvp-accent) 65%, #fff), var(--pwvp-accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.pwvp.pwvp--btn-3d .pwvp__handle { top: 2px; width: 14px; height: 14px; margin-left: -7px; border: 1px solid var(--pwvp-3d-edge); background: linear-gradient(to bottom, #ffffff, #aeb4bf); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* Linjen under videoen får samme lysglans som knappene */
.pwvp.pwvp--btn-3d.pwvp--bar-below .pwvp__controls, .pwvp.pwvp--btn-3d.pwvp--bar-inline .pwvp__controls { background: linear-gradient(to bottom, var(--pwvp-3d-bar-top), var(--pwvp-3d-bar-bottom)); box-shadow: inset 0 1px 0 var(--pwvp-3d-hi); }

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

/* --- Minispiller («sticky»): spilleren følger med i et hjørne mens videoen spiller --- */
.pwvp__slot { display: block; }
.pwvp.is-sticky { position: fixed !important; z-index: 99990; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
.pwvp--sticky-bottom-right { right: 16px !important; bottom: 16px !important; top: auto !important; left: auto !important; }
.pwvp--sticky-bottom-left { left: 16px !important; bottom: 16px !important; top: auto !important; right: auto !important; }
.pwvp--sticky-top-right { right: 16px !important; top: calc(16px + var(--wp-admin--admin-bar--height, 0px)) !important; bottom: auto !important; left: auto !important; }
.pwvp--sticky-top-left { left: 16px !important; top: calc(16px + var(--wp-admin--admin-bar--height, 0px)) !important; bottom: auto !important; right: auto !important; }
.pwvp__mini-tools { display: none; }
.pwvp.is-sticky .pwvp__mini-tools { position: absolute; top: 6px; right: 6px; z-index: 7; display: flex; gap: 6px; }
.pwvp .pwvp__mini-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.62); box-shadow: none; color: #fff; line-height: 1; cursor: pointer; }
.pwvp .pwvp__mini-btn:hover, .pwvp .pwvp__mini-btn:focus { background: rgba(0, 0, 0, 0.85); color: #fff; box-shadow: none; }
.pwvp .pwvp__mini-btn:focus-visible { outline: 2px solid var(--pwvp-accent); outline-offset: 1px; }
.pwvp .pwvp__mini-btn .pwvp__icon, .pwvp .pwvp__mini-btn svg { width: 16px; height: 16px; margin: 0; max-width: none; }
@media (max-width: 480px) {
	.pwvp--sticky-bottom-right, .pwvp--sticky-top-right { right: 12px !important; }
	.pwvp--sticky-bottom-left, .pwvp--sticky-top-left { left: 12px !important; }
}
@media (prefers-reduced-motion: no-preference) { .pwvp.is-sticky { animation: pwvp-mini-in 0.22s ease-out; } }
@keyframes pwvp-mini-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }