/**
 * Lagendijk Spin & Win — front-end styles.
 *
 * Scoped under .lsw-wrap so the plugin cannot leak styles into the theme.
 */

.lsw-wrap {
	/* Defaults volgen tankenbijlagendijk.nl; de admin kan ze overschrijven,
	   die waarden komen als inline custom properties binnen. */
	--lsw-green: #7cc67b;
	--lsw-green-dark: #4e9e4d;
	--lsw-green-light: #7cc67b;
	--lsw-red: #d32f2f;
	--lsw-black: #333;
	--lsw-surface: #fff;
	--lsw-grey: #f1f1f1;
	--lsw-border: #e0e0e0;
	--lsw-text-muted: #666;

	box-sizing: border-box;
	max-width: 520px;
	margin: 0 auto;
	padding: 0;

	/* Erft het lettertype van het thema — op de Lagendijk-site is dat Rubik
	   met cabrito-sans voor koppen. Een eigen font-stack hier zou de plugin
	   juist laten opvallen als een vreemd blok in de pagina. */
	font-family: inherit;
	color: var(--lsw-black);
	line-height: 1.6;
}

.lsw-wrap *,
.lsw-wrap *::before,
.lsw-wrap *::after {
	box-sizing: inherit;
}

.lsw-wrap--rules {
	max-width: 760px;
}

/* ---------------------------------------------------------------- panels */

.lsw-panel {
	background: var(--lsw-surface);
	border: 1px solid var(--lsw-border);
	border-radius: 14px;
	padding: 28px 24px;
	text-align: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.lsw-panel--rules {
	text-align: left;
}

.lsw-panel--success {
	border-color: var(--lsw-green);
	border-top: 4px solid var(--lsw-green);
}

.lsw-panel--error {
	border-top: 4px solid var(--lsw-red);
}

.lsw-panel--inactive,
.lsw-panel--info {
	border-top: 4px solid var(--lsw-green-dark);
}

.lsw-title {
	margin: 0 0 12px;
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--lsw-black);
}

.lsw-intro {
	margin: 0 0 20px;
	font-size: 1rem;
	color: #333;
}

.lsw-intro p:last-child {
	margin-bottom: 0;
}

.lsw-help {
	margin: 6px 0 0;
	font-size: 0.85rem;
	color: var(--lsw-text-muted);
}

.lsw-fineprint {
	margin: 16px 0 0;
	font-size: 0.8rem;
	color: var(--lsw-text-muted);
}

.lsw-fineprint a {
	color: var(--lsw-green-dark);
}

/* Spelregel-link staat op een eigen regel, los van de fineprint erboven. */
.lsw-fineprint--rules {
	margin-top: 8px;
}

.lsw-deadline {
	margin: 0 0 20px;
	padding: 10px 14px;
	background: var(--lsw-grey);
	border-radius: 8px;
	font-size: 0.9rem;
	color: #444;
}

.lsw-success-mark,
.lsw-notice-mark {
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 8px;
}

/* ----------------------------------------------------------------- forms */

.lsw-form {
	text-align: left;
}

.lsw-field {
	margin: 0 0 18px;
}

.lsw-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.lsw-field--third {
	flex: 1 1 130px;
}

.lsw-field--twothirds {
	flex: 2 1 200px;
}

.lsw-label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--lsw-black);
}

.lsw-req {
	color: var(--lsw-red);
}

/* ------------------------------------------------------------- testmodus */

.lsw-demo-banner {
	margin: 0 0 18px;
	padding: 12px 16px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #7a5b00;
	background: #fff8e1;
	border: 1px solid #ffe08a;
	border-radius: 10px;
}

.lsw-demo-banner strong {
	display: block;
	margin-bottom: 2px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.78rem;
}

.lsw-demo-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 6px;
}

.lsw-demo-buttons .lsw-btn {
	flex: 1 1 200px;
	margin: 0;
}

.lsw-demo-note {
	margin: 0 0 14px;
	font-size: 0.85rem;
	color: var(--lsw-text-muted);
}

.lsw-input {
	width: 100%;
	padding: 12px 14px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--lsw-black);
	background: var(--lsw-surface);
	border: 2px solid var(--lsw-border);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lsw-input:focus {
	outline: none;
	border-color: var(--lsw-green);
	box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.18);
}

.lsw-input[aria-invalid="true"] {
	border-color: var(--lsw-red);
}

#lsw-receipt,
#lsw-iban {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.lsw-field--checkbox {
	margin-bottom: 20px;
}

.lsw-checkbox {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 0.9rem;
	color: #333;
	cursor: pointer;
}

.lsw-checkbox input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--lsw-green);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.lsw-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.lsw-field--turnstile {
	display: flex;
	justify-content: center;
}

/* --------------------------------------------------------------- buttons */

.lsw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 15px 22px;
	font-size: 1.05rem;
	font-family: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: none;

	/* Pill-vorm, gelijk aan de "Naar de actie"-knop op de Lagendijk-site: dat
	   is de campagne-CTA die deze actie vervangt. */
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.lsw-btn--primary {
	background: var(--lsw-green);
	color: #fff;
}

.lsw-btn--primary:hover:not(:disabled) {
	background: var(--lsw-green-dark);
	color: #fff;
}

.lsw-btn--primary:active:not(:disabled) {
	transform: translateY(1px);
}

.lsw-btn--secondary {
	background: var(--lsw-grey);
	color: var(--lsw-black);
	border: 2px solid var(--lsw-border);
}

.lsw-btn--secondary:hover {
	background: #ebebeb;
	color: var(--lsw-black);
}

.lsw-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------- errors */

.lsw-error {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #fdecea;
	border-left: 4px solid var(--lsw-red);
	border-radius: 6px;
	font-size: 0.92rem;
	color: #8a1c1c;
	text-align: left;
}

.lsw-error[hidden] {
	display: none;
}

/* Eén keer oplichten zodra er een nieuwe melding in staat: een melding die al
   in beeld stond verandert anders geluidloos van tekst. */
.lsw-error.is-new {
	animation: lsw-error-flash 900ms ease-out 1;
}

@keyframes lsw-error-flash {
	0% {
		background: #f8c9c4;
		transform: scale(1.015);
	}

	100% {
		background: #fdecea;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lsw-wrap:not(.lsw-force-motion) .lsw-error.is-new {
		animation: none;
	}
}

.lsw-field-error {
	display: block;
	margin-top: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--lsw-red);
}

/* ----------------------------------------------------------------- wheel */

.lsw-wheel-stage {
	position: relative;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
}

.lsw-wheel-canvas {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	transform: translateZ(0) rotate(0deg);

	/*
	 * Geen `will-change` als vaste eigenschap: dan houdt de browser de hele
	 * paginaduur een aparte laag in het geheugen, wat op oudere telefoons juist
	 * schaadt. De JS zet .is-spinning aan zolang het wiel draait.
	 */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.lsw-wheel-canvas.is-spinning {
	will-change: transform;

	/* Een zachte gloed terwijl het draait. Geen animatie op de gloed zelf: dat
	   zou een tweede laag per frame opleveren, en juist de compositielaag van
	   het canvas moet vrij blijven. */
	box-shadow:
		0 6px 24px rgba(0, 0, 0, 0.22),
		0 0 0 6px rgba(255, 255, 255, 0.55);
}

.lsw-wheel-pointer {
	position: absolute;
	top: -6px;
	left: 50%;

	/* Het draaipunt zit bovenaan, zodat de punt uitzwaait en niet de hele
	   wijzer verschuift. */
	transform-origin: 50% 0;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-top: 28px solid var(--lsw-black);
	z-index: 3;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* Elke keer dat een segment de wijzer passeert wipt hij even opzij, alsof een
   pin hem wegduwt. Dat is het verschil tussen een plaatje dat ronddraait en
   een wiel dat langs iets schuurt. */
.lsw-wheel-pointer.is-ticking {
	animation: lsw-pointer-tick 120ms ease-out;
}

@keyframes lsw-pointer-tick {
	0% {
		transform: translateX(-50%) rotate(0deg);
	}

	40% {
		transform: translateX(-50%) rotate(11deg);
	}

	100% {
		transform: translateX(-50%) rotate(0deg);
	}
}

.lsw-wheel-hub {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16%;
	height: 16%;
	transform: translate(-50%, -50%);
	background: #fff;
	border: 5px solid var(--lsw-black);
	border-radius: 50%;
	z-index: 2;
}

/*
 * Alleen voor schermlezers. De klassieke clip-techniek en geen `display: none`:
 * dat laatste haalt het element uit de toegankelijkheidsboom, en dan wordt er
 * juist niets meer voorgelezen.
 */
.lsw-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- result */

.lsw-result h3 {
	margin: 0 0 12px;
	font-size: 1.5rem;
	line-height: 1.25;
}

.lsw-result--win h3 {
	color: var(--lsw-green-dark);
}

.lsw-result--lose h3 {
	color: var(--lsw-black);
}

.lsw-result p {
	margin: 0 0 18px;
	font-size: 1rem;
	color: #333;
}

.lsw-result .lsw-btn {
	margin-top: 4px;
}

.lsw-result-emoji {
	font-size: 3.4rem;
	line-height: 1;
	display: block;
	margin-bottom: 10px;
}

/* -------------------------------------------------------------- steps */

.lsw-step[hidden] {
	display: none;
}

.lsw-step {
	animation: lsw-fade-in 0.4s ease both;
}

@keyframes lsw-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------- akkoord */

.lsw-wrap .lsw-consents {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	background: var(--lsw-grey);
	border-radius: 10px;
}

.lsw-wrap .lsw-consents .lsw-checkbox {
	font-size: 0.88rem;
}

.lsw-wrap .lsw-consents a {
	color: var(--lsw-green-dark);
}

/* ---------------------------------------------------- keuze vestiging */

/*
 * Een select erft in veel thema's niet de opmaak van .lsw-input. De pijl wordt
 * daarom zelf getekend en de eigen weergave van de browser uitgezet, zodat het
 * keuzemenu even hoog en even breed is als het bonnummerveld eronder.
 */
.lsw-wrap .lsw-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	padding-right: 44px;
	cursor: pointer;
}

/* -------------------------------------------------- opsomming in artikel */

.lsw-wrap .lsw-rules-sublist {
	margin: 6px 0 0 18px;
	padding: 0;
	list-style: disc;
}

.lsw-wrap .lsw-rules-sublist li {
	margin: 2px 0;
}

.lsw-wrap .lsw-rules-list--numbered {
	list-style: decimal;
	padding-left: 22px;
}

.lsw-wrap .lsw-fineprint--free {
	margin-top: 10px;
	color: var(--lsw-text-muted);
}

/* --------------------------------------------------- versie voorwaarden */

.lsw-wrap .lsw-terms-version {
	margin-top: 26px;
	padding-top: 14px;
	border-top: 1px solid var(--lsw-border);
	font-size: 0.8rem;
	color: var(--lsw-text-muted);
}

/* --------------------------------------------------- claimlink mailen */

.lsw-wrap .lsw-maillink {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--lsw-border);
	text-align: left;
}

.lsw-maillink__intro {
	margin: 0 0 10px;
	font-size: 0.92rem;
	color: #444;
}

.lsw-maillink__row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.lsw-maillink__row .lsw-input {
	flex: 1 1 180px;
	min-width: 0;
}

.lsw-wrap .lsw-maillink__btn {
	width: auto;
	flex: 0 0 auto;
	padding: 12px 20px;
	font-size: 0.95rem;
}

.lsw-maillink__status {
	margin: 8px 0 0;
	font-size: 0.88rem;
	font-weight: 600;
	min-height: 1.2em;
}

.lsw-maillink__status.is-ok {
	color: var(--lsw-green-dark);
}

.lsw-maillink__status.is-error {
	color: var(--lsw-red);
}

.lsw-maillink__note {
	margin: 8px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--lsw-text-muted);
}

/* ------------------------------------------------------ bestandsupload */

.lsw-wrap .lsw-input--file {
	padding: 10px 12px;
	font-size: 0.92rem;
	cursor: pointer;
}

.lsw-input--file::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--lsw-black);
	background: var(--lsw-grey);
	border: 1px solid var(--lsw-border);
	border-radius: 999px;
	cursor: pointer;
}

.lsw-input--file::file-selector-button:hover {
	background: #e6e6e6;
}

/* -------------------------------------------------------------- confetti */

.lsw-confetti {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 9999;
}

.lsw-confetti-piece {
	position: absolute;
	top: -12px;
	width: 10px;
	height: 16px;
	opacity: 0;
	animation: lsw-confetti-fall linear forwards;
}

.lsw-confetti-piece--round {
	border-radius: 50%;
}

@keyframes lsw-confetti-fall {
	0% {
		opacity: 1;
		transform: translate3d(0, -20px, 0) rotate(0deg);
	}

	85% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate3d(var(--lsw-drift, 0), 100vh, 0) rotate(var(--lsw-tumble, 720deg));
	}
}

/* ----------------------------------------------------------------- rules */

.lsw-panel--rules h3 {
	margin: 26px 0 10px;
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--lsw-green-dark);
}

.lsw-rules-list {
	margin: 0;
	padding-left: 22px;
}

.lsw-rules-list li {
	margin-bottom: 8px;
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 600px) {
	.lsw-panel {
		padding: 22px 16px;
		border-radius: 12px;
	}

	.lsw-title {
		font-size: 1.3rem;
	}

	.lsw-wheel-stage {
		max-width: 280px;
	}

	.lsw-row {
		gap: 0;
	}

	.lsw-field--third,
	.lsw-field--twothirds {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------- reduced motion */

/*
 * Standaard volgt de plugin de voorkeur "minder animatie" van de bezoeker.
 *
 * Zet de beheerder die instelling uit, dan krijgt het blok de klasse
 * `lsw-force-motion` en slaan deze regels over — anders zou het wiel wél
 * draaien maar de confetti wegblijven, en dat is een halve keuze.
 */
@media (prefers-reduced-motion: reduce) {
	.lsw-wrap:not(.lsw-force-motion) .lsw-step {
		animation: none;
	}

	.lsw-wrap:not(.lsw-force-motion) .lsw-confetti {
		display: none;
	}

	.lsw-wrap:not(.lsw-force-motion) .lsw-wheel-pointer.is-ticking {
		animation: none;
	}
}

/* ------------------------------------------------------------ voorbeeldbon */

/*
 * Het blokje met de voorbeeldbon staat tussen het invoerveld en de uitleg.
 * De bon zelf is smal en hoog — een kassabon nu eenmaal — dus hij staat naast
 * de uitleg in plaats van erboven, anders duwt hij de knop van het scherm af.
 * De hoogte is begrensd: groot genoeg om het omcirkelde nummer te lezen, klein
 * genoeg om niet het formulier te worden.
 */
.lsw-example {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 12px 0 0;
	padding: 12px;
	text-align: left;
	background: var(--lsw-grey);
	border: 1px solid var(--lsw-border);
	border-radius: 12px;
}

.lsw-example[hidden] {
	display: none;
}

.lsw-example__media {
	position: relative;
	flex: 0 0 auto;
	width: 190px;
	max-width: 48%;
}

.lsw-example__media img,
.lsw-example__svg svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
	object-fit: contain;
	border-radius: 6px;
}

.lsw-example__svg {
	display: block;
}

/* Zodat niemand een verzonnen bon voor een echte aanziet. */
.lsw-example__badge {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	padding: 2px 8px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--lsw-black);
	border-radius: 999px;
	opacity: 0.85;
}

.lsw-example__caption {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--lsw-text-muted);
}

.lsw-example__zoom {
	padding: 8px 14px;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--lsw-green-dark);
	cursor: pointer;
	background: var(--lsw-surface);
	border: 1px solid var(--lsw-border);
	border-radius: 999px;
}

.lsw-example__zoom:hover,
.lsw-example__zoom:focus-visible {
	color: #fff;
	background: var(--lsw-green-dark);
	border-color: var(--lsw-green-dark);
}

/* ---------------------------------------------------------------- vergroten */

.lsw-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	background: rgba(0, 0, 0, 0.75);
}

.lsw-lightbox__inner {
	position: relative;
	width: min(400px, 86vw);
	max-height: 78vh;
	overflow: auto;
	background: #fff;
	border-radius: 10px;
	padding: 10px;
}

/* In de vergroting is het blokje zelf de maat; de bon vult hem helemaal. */
.lsw-lightbox__inner .lsw-example__svg {
	display: block;
	width: 100%;
}

.lsw-lightbox__inner img,
.lsw-lightbox__inner svg {
	display: block;
	width: 100%;
	max-width: 100%;
	max-height: none;
	height: auto;
}

/* De "voorbeeld"-tekst hoort bij het kleine plaatje, niet bij de vergroting. */
.lsw-lightbox__inner .lsw-example__badge {
	display: none;
}

.lsw-lightbox__close {
	padding: 10px 22px;
	font: inherit;
	font-weight: 700;
	color: var(--lsw-black);
	cursor: pointer;
	background: #fff;
	border: 0;
	border-radius: 999px;
}

@media (max-width: 420px) {
	.lsw-example {
		gap: 10px;
		padding: 10px;
	}

	.lsw-example__media {
		width: 132px;
		max-width: 42%;
	}

	.lsw-example__caption {
		font-size: 0.8rem;
	}

	.lsw-example__zoom {
		padding: 6px 12px;
		font-size: 0.8rem;
	}
}

/* ------------------------------------------- "je bent er bijna"-melding */

.lsw-error__intro {
	display: block;
	margin-bottom: 6px;
}

.lsw-error__list {
	margin: 0;
	padding-left: 20px;
	list-style: disc;
}

.lsw-error__list li {
	margin: 3px 0;
}

/* Het eerste veld dat nog niet in orde is, krijgt een rand mee. */
.lsw-input--missing,
.lsw-wrap input[type="checkbox"].lsw-input--missing {
	border-color: var(--lsw-red);
	outline: 2px solid var(--lsw-red);
	outline-offset: 2px;
}

/* De tweede regel onder een vinkje: "(exclusief eventuele shopaankopen)". */
.lsw-checkbox__note {
	display: block;
	margin-top: 2px;
	font-size: 0.8rem;
	color: var(--lsw-text-muted);
}

/* Waar je met een vraag terechtkunt, onder aan het formulier. */
.lsw-fineprint--contact {
	margin-top: 10px;
}