/* Path: 12/css/panels.css */
/* Stil for paneler som kan festes/løses */

.panel {
	display: block;
	transform: translateX(100%);
	pointer-events: none; /* 👈 default: ikke interaktiv */
	z-index: 100000 !important;
	opacity: 0.35;
	transition: opacity 2.6s ease-out;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	width: 25vw !important;
}
.panel.open,
.panel.pinned {
	pointer-events: auto;
}

.panel.pinned {
	position: fixed !important;
	box-shadow: 0 0 0 2px rgba(44, 123, 229, 0.15);
}

.panel-pin {
	opacity: 0.4;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.2s, color 0.2s;
}

.panel-pin:hover {
	opacity: 0.8;
}

.panel.pinned .panel-pin {
	opacity: 1;
	color: #2c7be5; /* blå = aktiv tilstand */
	transform: rotate(-20deg);
}

/* Stil for dynamisk opacity på paneler */
.panel {
	opacity: 0.35;
	transition: opacity 2.6s ease-out;
}

/* Full oppmerksomhet */
.panel.open,
.panel.attention,
.panel:hover {
	opacity: 1;
}

/* Litt raskere inn enn ut */
.panel.open,
.panel.attention,
.panel:hover {
	transition: opacity 2.25s ease-in;
}

/* Filterpanel – venstre */
.panel--filter {
	left: 0;
	right: auto;
}
-panel--hamburger {
	right: 0;
	left: auto;
}

/* DESKTOP */
.panel--filter,
.panel--hamburger {
	position: fixed;
	top: var(--header-height);
	width: 25vw;
	height: calc(100vh - var(--header-height));
	background: var(--bg-filter);
	min-width: 350px;
}

/* MOBIL */
@media (max-width: 800px) {
	.panel--filter,
	.panel--hamburger {
		width: 100vw;
		min-width: 100vw;
		max-width: 100vw;
	}
}

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.25rem 0.5rem;
}

.panel-close {
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: #000;
	opacity: 0.7;
	padding: 0.25rem 0.5rem;
}

.panel-close:hover,
.panel-close:focus {
	opacity: 1;
}
@media (hover: hover) {
	.panel-close {
		display: none;
	}
}