/* Proweb Video Player – panel for info, deling og innbygging */

.pwvp .pwvp__panel {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: rgba(0, 0, 0, 0.55);
	color: var(--pwvp-menu-fg);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.pwvp .pwvp__panel[hidden] { display: none; }

.pwvp .pwvp__panel-box {
	display: flex;
	flex-direction: column;
	width: min(480px, 100%);
	max-height: 100%;
	overflow: hidden;
	border-radius: calc(var(--pwvp-radius) * 0.8);
	background: var(--pwvp-menu-bg);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.pwvp .pwvp__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 0 12px; }
.pwvp .pwvp__tabs { display: flex; gap: 2px; min-width: 0; }

.pwvp .pwvp__tab {
	appearance: none;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--pwvp-fg-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.pwvp .pwvp__tab:hover, .pwvp .pwvp__tab:focus { background: transparent; color: var(--pwvp-menu-fg); box-shadow: none; }
.pwvp .pwvp__tab.is-active, .pwvp .pwvp__tab.is-active:hover { border-bottom-color: var(--pwvp-accent); color: var(--pwvp-menu-fg); }
.pwvp .pwvp__tab:focus-visible { outline: 2px solid var(--pwvp-accent); outline-offset: -2px; }

.pwvp .pwvp__panel-close {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
}
.pwvp .pwvp__panel-close:hover, .pwvp .pwvp__panel-close:focus { background: rgba(127, 127, 127, 0.25); color: inherit; box-shadow: none; }
.pwvp .pwvp__panel-close:focus-visible { outline: 2px solid var(--pwvp-accent); }
.pwvp .pwvp__panel-close .pwvp__icon { display: grid; place-items: center; width: 20px; height: 20px; }
.pwvp .pwvp__panel-close svg { width: 18px; height: 18px; }

.pwvp .pwvp__panel-body { padding: 14px 16px 18px; overflow: auto; line-height: 1.55; }
.pwvp .pwvp__panel-body p, .pwvp .pwvp__panel-body h3 { margin: 0 0 10px; padding: 0; color: inherit; }
.pwvp .pwvp__info-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.pwvp .pwvp__info-lead { color: var(--pwvp-menu-fg); font-weight: 600; }
.pwvp .pwvp__info-text { color: var(--pwvp-fg-muted); white-space: pre-line; }
.pwvp .pwvp__panel-label { margin-top: 4px; color: var(--pwvp-fg-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.pwvp .pwvp__copyrow { display: flex; align-items: stretch; gap: 8px; margin: 0 0 14px; }
.pwvp .pwvp__copyrow.is-multi { flex-direction: column; }
.pwvp .pwvp__field {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 38px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 8px;
	background: rgba(127, 127, 127, 0.14);
	box-shadow: none;
	color: inherit;
	font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace;
	resize: none;
}
.pwvp .pwvp__field:focus { border-color: var(--pwvp-accent); outline: none; box-shadow: none; }

.pwvp .pwvp__social { display: flex; flex-wrap: wrap; gap: 8px; }
.pwvp .pwvp__panel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.pwvp .pwvp__panel-btn:hover, .pwvp .pwvp__panel-btn:focus { border-color: var(--pwvp-accent); background: rgba(127, 127, 127, 0.2); color: inherit; text-decoration: none; box-shadow: none; }
.pwvp .pwvp__panel-btn:focus-visible { outline: 2px solid var(--pwvp-accent); outline-offset: 1px; }
.pwvp .pwvp__panel-btn.is-done, .pwvp .pwvp__panel-btn.is-done:hover { border-color: #22c55e; color: #22c55e; }

.pwvp.has-panel .pwvp__controls, .pwvp.has-panel .pwvp__bigplay { display: none; }

@media (max-width: 480px) {
	.pwvp .pwvp__panel { padding: 8px; }
	.pwvp .pwvp__copyrow:not(.is-multi) { flex-direction: column; }
}