/* onScreen Elementen Blox — OS Prijspanels
 * Kolommen via --osb-pp-cols, ruimte via --osb-pp-gap (per breakpoint gezet door het widget).
 * Modus per breakpoint via prefix-class osb-pp-mode[-tablet|-mobile]-{grid|slider}.
 * Kleuren via CSS-variabelen; hover-variabelen (…-h) worden actief op :hover en op .is-highlight.
 */

.osb-pp {
	--osb-pp-cols: 4;
	--osb-pp-gap: 32px;
	--osb-pp-peek: 0px;
	--osb-pp-t: 250ms;
	--osb-pp-lift: 0px;

	--osb-pp-bg: #fff;
	--osb-pp-bg-h: #132c61;
	--osb-pp-title: #132c61;
	--osb-pp-title2: initial;
	--osb-pp-title-h: initial;
	--osb-pp-text: #555;
	--osb-pp-text-h: #fff;
	--osb-pp-price: #132c61;
	--osb-pp-price-h: #fff;
	--osb-pp-foot: #0c71c3;
	--osb-pp-foot-h: #8ec5ff;
	--osb-pp-line: #d9dde3;
	--osb-pp-line-h: rgba(255, 255, 255, 0.35);

	position: relative;
}

/* --- track: raster --- */
.osb-pp__track {
	display: grid;
	grid-template-columns: repeat(var(--osb-pp-cols), minmax(0, 1fr));
	gap: var(--osb-pp-gap);
	align-items: stretch;
}

/* --- panel --- */
.osb-pp__panel {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	background: var(--osb-pp-bg);
	color: var(--osb-pp-text);
	border-radius: 28px;
	padding: 36px 32px 32px;
	text-decoration: none;
	transition:
		background-color var(--osb-pp-t) ease,
		color var(--osb-pp-t) ease,
		box-shadow var(--osb-pp-t) ease,
		transform var(--osb-pp-t) ease;
}
a.osb-pp__panel,
a.osb-pp__panel:hover,
a.osb-pp__panel:focus {
	color: var(--osb-pp-text);
	text-decoration: none;
}

.osb-pp__panel:hover,
.osb-pp__panel.is-highlight {
	background: var(--osb-pp-bg-h);
	color: var(--osb-pp-text-h);
	transform: translateY(calc(-1 * var(--osb-pp-lift)));
}
a.osb-pp__panel:hover,
a.osb-pp__panel.is-highlight {
	color: var(--osb-pp-text-h);
}

/* --- beeld --- */
.osb-pp__img {
	height: 100px;
	margin-bottom: 20px;
	line-height: 0;
}
.osb-pp__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* --- titel --- */
.osb-pp__title {
	margin: 0 0 18px;
	padding: 0;
	color: var(--osb-pp-title);
	text-align: center;
	line-height: 1.1;
	transition: color var(--osb-pp-t) ease;
}
.osb-pp__title span {
	display: inline-block;
}
/* verloop (metaal-effect) alleen als titelkleur 2 per panel is gezet */
.osb-pp__title.has-gradient span {
	background-image: linear-gradient(180deg, var(--osb-pp-title) 0%, var(--osb-pp-title2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
/* hover-kleur voor titels zonder verloop (leeg = kleur blijft) */
.osb-pp__panel:hover .osb-pp__title:not(.has-gradient),
.osb-pp__panel.is-highlight .osb-pp__title:not(.has-gradient) {
	color: var(--osb-pp-title-h, var(--osb-pp-title));
}

/* --- lijn --- */
.osb-pp__divider {
	height: 1px;
	margin: 0 0 24px;
	background: var(--osb-pp-line);
	transition: background-color var(--osb-pp-t) ease;
}
.elementor-widget-osb_prijspanels:not(.osb-pp-divider-yes) .osb-pp__divider {
	display: none;
}
.osb-pp__panel:hover .osb-pp__divider,
.osb-pp__panel.is-highlight .osb-pp__divider {
	background: var(--osb-pp-line-h);
}

/* --- omschrijving (vult de resthoogte, zodat prijs onderaan staat) --- */
.osb-pp__features {
	flex: 1 0 auto;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	color: inherit;
}
.osb-pp__features li {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}
.osb-pp__features li + li {
	margin-top: 8px;
}
.osb-pp-bullet-dot .osb-pp__features li::before   { content: "\2022\00a0\00a0"; }
.osb-pp-bullet-check .osb-pp__features li::before { content: "\2713\00a0\00a0"; }
.osb-pp-bullet-dash .osb-pp__features li::before  { content: "\2013\00a0\00a0"; }

/* --- prijs + voetnoot --- */
.osb-pp__bottom {
	margin-top: auto;
}
.osb-pp__price {
	color: var(--osb-pp-price);
	font-weight: 700;
	line-height: 1.2;
	transition: color var(--osb-pp-t) ease;
}
.osb-pp__footnote {
	margin-top: 4px;
	color: var(--osb-pp-foot);
	font-weight: 600;
	transition: color var(--osb-pp-t) ease;
}
.osb-pp__panel:hover .osb-pp__price,
.osb-pp__panel.is-highlight .osb-pp__price { color: var(--osb-pp-price-h); }
.osb-pp__panel:hover .osb-pp__footnote,
.osb-pp__panel.is-highlight .osb-pp__footnote { color: var(--osb-pp-foot-h); }

/* --- dots --- */
.osb-pp__dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}
.osb-pp__dot {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d0d5dc;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.osb-pp__dot.is-active {
	background: #0c71c3;
	transform: scale(1.25);
}
.osb-pp__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- slider-modus --------------------------------------------------- */
/* Horizontale rij met scroll-snap; breedte per panel volgt uit kolommen,
 * minus het "doorschemer"-deel (peek) van het volgende panel. */
.osb-pp-mode-slider .osb-pp__track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* ruimte voor schaduw en lift */
	padding: 12px 0 16px;
	margin: -12px 0 -16px;
}
.osb-pp-mode-slider .osb-pp__track::-webkit-scrollbar { display: none; }
.osb-pp-mode-slider .osb-pp__panel {
	flex: 0 0 calc((100% - var(--osb-pp-peek) - var(--osb-pp-gap) * (var(--osb-pp-cols) - 1)) / var(--osb-pp-cols));
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.osb-pp-mode-slider .osb-pp__dots { display: flex; }

@media (max-width: 1024px) {
	.osb-pp-mode-tablet-grid .osb-pp__track {
		display: grid;
		overflow: visible;
		scroll-snap-type: none;
		padding: 0;
		margin: 0;
	}
	.osb-pp-mode-tablet-grid .osb-pp__panel { flex: initial; }
	.osb-pp-mode-tablet-grid .osb-pp__dots { display: none; }

	.osb-pp-mode-tablet-slider .osb-pp__track {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: 12px 0 16px;
		margin: -12px 0 -16px;
	}
	.osb-pp-mode-tablet-slider .osb-pp__track::-webkit-scrollbar { display: none; }
	.osb-pp-mode-tablet-slider .osb-pp__panel {
		flex: 0 0 calc((100% - var(--osb-pp-peek) - var(--osb-pp-gap) * (var(--osb-pp-cols) - 1)) / var(--osb-pp-cols));
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	.osb-pp-mode-tablet-slider .osb-pp__dots { display: flex; }
}

@media (max-width: 767px) {
	.osb-pp-mode-mobile-grid .osb-pp__track {
		display: grid;
		overflow: visible;
		scroll-snap-type: none;
		padding: 0;
		margin: 0;
	}
	.osb-pp-mode-mobile-grid .osb-pp__panel { flex: initial; }
	.osb-pp-mode-mobile-grid .osb-pp__dots { display: none; }

	.osb-pp-mode-mobile-slider .osb-pp__track {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: 12px 0 16px;
		margin: -12px 0 -16px;
	}
	.osb-pp-mode-mobile-slider .osb-pp__track::-webkit-scrollbar { display: none; }
	.osb-pp-mode-mobile-slider .osb-pp__panel {
		flex: 0 0 calc((100% - var(--osb-pp-peek) - var(--osb-pp-gap) * (var(--osb-pp-cols) - 1)) / var(--osb-pp-cols));
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	.osb-pp-mode-mobile-slider .osb-pp__dots { display: flex; }

	/* op touch geen hover-effect vasthouden na tikken */
	@media (hover: none) {
		.osb-pp__panel:hover:not(.is-highlight) {
			background: var(--osb-pp-bg);
			color: var(--osb-pp-text);
			transform: none;
		}
		.osb-pp__panel:hover:not(.is-highlight) .osb-pp__price { color: var(--osb-pp-price); }
		.osb-pp__panel:hover:not(.is-highlight) .osb-pp__footnote { color: var(--osb-pp-foot); }
		.osb-pp__panel:hover:not(.is-highlight) .osb-pp__divider { background: var(--osb-pp-line); }
		.osb-pp__panel:hover:not(.is-highlight) .osb-pp__title:not(.has-gradient) { color: var(--osb-pp-title); }
	}
}

/* --- editor / leeg --- */
.osb-pp-empty {
	padding: 40px;
	text-align: center;
	background: #f1f3f5;
	color: #555;
}

@media (prefers-reduced-motion: reduce) {
	.osb-pp__panel,
	.osb-pp__title,
	.osb-pp__divider,
	.osb-pp__price,
	.osb-pp__footnote {
		transition: none;
	}
	.osb-pp-mode-slider .osb-pp__track,
	.osb-pp-mode-tablet-slider .osb-pp__track,
	.osb-pp-mode-mobile-slider .osb-pp__track {
		scroll-behavior: auto;
	}
}