:root {
	--od-pannel-width: 480px;
	--od-pannel-show-width: 60px;

	--brand: #ee612f;
	--brand-alt: #2face2;
	--company: #2face2;
	--private: #ee612f;
	--bg: #ee612f;
	--white: #fff;
	--muted: #767676;
	--card-bg: #fff;
	--card-radius: 15px;
}

.fusion-column-wrapper:has(.od-panel) {
	position: relative;
}

.od-panel {
	width: var(--od-pannel-width);
	height: 100%;
	position: absolute;
	padding: 20px var(--od-pannel-show-width) 50px 20px;
	top: 0;
	left: calc(var(--od-pannel-width) * -1 + var(--od-pannel-show-width));
	transition: left 0.3s ease-in-out;
	z-index: 2;

	&.open {
		left: 0 !important;
	}

	.od-arrow {
		position: absolute;
		top: 40px;
		right: -320px;
		color: #ffffff;
		font-size: 48px;
		transform: rotate(-5deg);

		&::after {
			content: '';
			display: block;
			width: 200px;
			height: 72px;
			position: absolute;
			top: 60px;
			left: -120px;
			background-image: url("https://opendoors.danspot.dk/wp-content/uploads/2025/09/arrow.png");
		}
	}
}

.od-panel p {
	margin: 0 !important;
}

.od-panel p:empty {
	display: none;
}

.od-overlay {
	z-index: 3;
	opacity: 0.2;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("https://opendoors.danspot.dk/wp-content/uploads/2025/09/ODDK_Kurver_Hvid.png") center center / cover no-repeat;
}

.od-panel__company {
	background-color: var(--company);
}

.od-panel__private {
	background-color: var(--private);
}

.od-panel__curve {
	position: absolute;
	top: 55px;
	left: 100%;
	content: '';
	display: block;
	width: 50px;
	height: 250px;
}

.od-panel__company .od-panel__curve {
	fill: var(--company);
}

.od-panel__private .od-panel__curve {
	fill: var(--private);
}

.od-panel-button {
	position: absolute;
	top: 140px;
	right: -35px;
	background: none;
	border: none;
	outline: none;
	z-index: 3;
	cursor: pointer;
	transition: scale 0.3s ease-in-out;

	&:hover {
		scale: 1.1;
	}

	&:focus {
		outline: none;
	}
}

.od-panel .page-container {
	padding-right: 30px;
}

.od-panel-content {
	height: 100%;
	overflow-y: auto;
}

.od-panel .stack {
	display: grid;
	gap: 15px;
}

.od-panel .card {
	background: var(--card-bg);
	border-radius: var(--card-radius);
	padding: 20px;
	min-height: 0 !important;
	height: unset;
}

.od-panel .muted {
	color: var(--muted);
}

.od-panel .donor-toggle {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.od-panel .donor-btn {
	border: none;
	padding: 12px 16px;
	border-radius: 12px;
	color: var(--white);
	cursor: pointer;
	transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
	outline: none;
}

.od-panel .donor-btn[data-type="private"] {
	background: var(--brand);
}

.od-panel .donor-btn[data-type="company"] {
	background: var(--brand-alt);
}

.od-panel .donor-btn[aria-pressed="true"] {
	transform: scale(1.045);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.od-panel .donor-btn[aria-pressed="false"] {
	opacity: 0.85;
}

.od-panel .chooser {
	display: grid;
	gap: 8px;
	justify-items: center;
}

.od-panel .chooser select {
	appearance: none;
	font-size: 1rem;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid #e5e5e5;
	width: min(540px, 100%);
	background: #fafafa;
	color: #222;
}

.od-panel .cp-donationsform {
	width: 100%;
	border: none;
}

.od-panel iframe {
	width: 100%;
	border: 0;
	display: block;
	background: #fff;
	border-radius: 12px;
}

.od-panel__company iframe {
	clip-path: inset(20px 0 5px 0 round 15px 15px 15px 15px);
}

@media (max-width: 900px) {
	.od-panel {
		.od-arrow {
			display: none;
		}
	}
}