/**
 * 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;
}

.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;
	}
}