/* ============================================================
   Pakketten-prijssectie (herbruikbaar): WordPress-ladder met
   scroll-jack op desktop, swipe op mobiel. Gebruikt door
   nixo_render_wordpress_pakketten() op pillar + dorp/regio.
   ============================================================ */

/* Pakketten: peek-effect op mobiel */
@media (max-width: 1023px) {
	.pakketten-scrolljack .pakketten-slider {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 1.25rem;
		scrollbar-width: none;
	}
	.pakketten-scrolljack .pakketten-slider::-webkit-scrollbar { display: none; }
	.pakketten-scrolljack .pakketten-slider-inner {
		gap: 1rem !important;
		min-width: unset !important;
	}
	.pakketten-scrolljack .pakket-card-outer {
		flex: 0 0 88% !important;
		min-width: unset !important;
		scroll-snap-align: start;
	}
	.pakketten-reveal {
		opacity: 1 !important;
		transform: translateY(0) !important;
	}
}

/* Pakketten desktop: vier kaarten als horizontale slider; in actieve
   scroll-jack-modus verschuift JS de track en pinnt de sectie. */
@media (min-width: 1024px) {
	.pakketten-scrolljack .pakketten-slider {
		scroll-snap-type: x mandatory;
		scroll-padding-left: 28px;
		scrollbar-width: none;
	}
	.pakketten-scrolljack .pakketten-slider::-webkit-scrollbar { display: none; }
	.pakketten-scrolljack .pakketten-slider-inner { min-width: unset !important; }
	.pakketten-scrolljack .pakket-card-outer {
		flex: 0 0 340px !important;
		min-width: 340px !important;
		scroll-snap-align: start;
	}
}

/* Scroll-jack + pijltjes (.pjs-*) */
.pjs-baan { overflow-x: auto; overflow-y: visible; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pjs-baan::-webkit-scrollbar { display: none; }
.pjs-arrows { display: flex; justify-content: center; gap: 0.75rem; margin: 0 0 1rem; }
/* Pijltjes alleen op mobiel (bovenaan); op desktop stuurt de scroll-jack zelf. */
@media (min-width: 1024px) { .pjs-arrows { display: none; } }
.pjs-arrow { width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(41,52,196,0.1); color: #2934c4; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: background 0.2s ease, color 0.2s ease; }
.pjs-arrow:hover { background: #2934c4; color: #fff; }
.pjs-arrow:disabled { opacity: 0.3; cursor: default; }
.pjs-arrow:disabled:hover { background: rgba(41,52,196,0.1); color: #2934c4; }
.pjs-voortgang { display: none; }
.pakketten-scrolljack.pjs-actief .pjs-plak { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.pakketten-scrolljack.pjs-actief .pjs-baan { overflow-x: hidden; overflow-y: visible; }
.pakketten-scrolljack.pjs-actief .pjs-track { will-change: transform; }
.pakketten-scrolljack.pjs-actief .pjs-voortgang { display: block; width: 200px; height: 4px; margin: 0 auto 2rem; background: rgba(41,52,196,0.15); border-radius: 999px; overflow: hidden; }
.pakketten-scrolljack.pjs-actief .pjs-balk { width: 100%; height: 100%; background: #2934c4; border-radius: 999px; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }