.schijtjerijk-field {
	margin: 1.5em 0;
}

.schijtjerijk-field--message {
	padding: 1em;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #f9f9f9;
}

.schijtjerijk-description {
	margin-bottom: 1em;
}

.schijtjerijk-countdown {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 1em;
	padding: 0.6em 1em;
	background: #fef6e7;
	border: 1px solid #f5deb3;
	border-radius: 6px;
}

.schijtjerijk-countdown-label {
	margin: 0;
	font-size: 0.9em;
	color: #7a5c1e;
}

.schijtjerijk-countdown-value {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #7a5c1e;
}

.schijtjerijk-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 1em;
	font-size: 0.9em;
}

.schijtjerijk-legend-item {
	position: relative;
	padding-left: 20px;
}

.schijtjerijk-sound-toggle {
	margin-left: auto;
	padding: 2px 8px;
	background: transparent;
	border: 1px solid #d5d8dc;
	border-radius: 999px;
	font-size: 1em;
	line-height: 1.5;
	cursor: pointer;
}

.schijtjerijk-sound-toggle:hover,
.schijtjerijk-sound-toggle:focus-visible {
	border-color: #2e7d32;
	background: #f2f7f2;
}

.schijtjerijk-legend-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: #ccc;
}

.schijtjerijk-legend-item.schijtjerijk-status-available::before { background: #46b450; }
.schijtjerijk-legend-item.schijtjerijk-status-selected::before  { background: #2271b1; }
.schijtjerijk-legend-item.schijtjerijk-status-reserved::before  { background: #f0ad4e; }
.schijtjerijk-legend-item.schijtjerijk-status-sold::before      { background: #dc3232; }
.schijtjerijk-legend-item.schijtjerijk-status-blocked::before   { background: #8c8f94; }

.schijtjerijk-progress {
	margin-bottom: 1em;
}

.schijtjerijk-progress-bar {
	height: 22px;
	background: #e5e7eb;
	border-radius: 11px;
	overflow: hidden;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.schijtjerijk-progress-fill {
	height: 100%;
	background-color: #2271b1;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.28) 0,
		rgba(255, 255, 255, 0.28) 14px,
		transparent 14px,
		transparent 28px
	);
	background-size: 40px 40px;
	border-radius: 11px;
	transition: width 0.4s ease, background-color 0.4s ease;
	animation: schijtjerijk-progress-stripes 1.4s linear infinite;
}

.schijtjerijk-progress--warning .schijtjerijk-progress-fill {
	background-color: #f0ad4e;
}

.schijtjerijk-progress--critical .schijtjerijk-progress-fill {
	background-color: #dc3232;
}

.schijtjerijk-progress--critical .schijtjerijk-progress-bar {
	animation: schijtjerijk-progress-pulse 1.6s ease-in-out infinite;
}

@keyframes schijtjerijk-progress-stripes {
	from { background-position: 0 0; }
	to   { background-position: 40px 0; }
}

@keyframes schijtjerijk-progress-pulse {
	0%, 100% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(220, 50, 50, 0.45); }
	50%      { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 5px rgba(220, 50, 50, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.schijtjerijk-progress-fill {
		animation: none;
	}

	.schijtjerijk-progress--critical .schijtjerijk-progress-bar {
		animation: none;
	}
}

.schijtjerijk-progress-label {
	margin: 8px 0 0;
	color: #50575e;
	font-size: 0.95em;
	font-weight: 600;
}

.schijtjerijk-instructions {
	margin: 0 0 1em;
	color: #50575e;
	font-size: 0.92em;
}

.schijtjerijk-limit-rule {
	margin: -0.6em 0 1em;
	padding: 0.6em 0.9em;
	background: #eef4fb;
	border-left: 4px solid #2271b1;
	border-radius: 4px;
	color: #1d3f5e;
	font-size: 0.92em;
}

.schijtjerijk-limit-notice {
	margin: -0.4em 0 1.1em;
	padding: 0.7em 0.9em;
	background: #fff8e5;
	border: 1px solid #f0d68a;
	border-left: 4px solid #dba617;
	border-radius: 8px;
	color: #6b4e05;
	font-size: 0.92em;
}

.schijtjerijk-grid {
	display: grid;
	gap: 3px;
	max-width: 100%;
	overflow-x: auto;
	padding-bottom: 4px;
}

.schijtjerijk-cell {
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 3px;
	color: #fff;
	font-size: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.schijtjerijk-cell.schijtjerijk-status-available { background: #46b450; }
.schijtjerijk-cell.schijtjerijk-status-selected  { background: #2271b1; }
.schijtjerijk-cell.schijtjerijk-status-reserved  { background: #f0ad4e; }
.schijtjerijk-cell.schijtjerijk-status-sold      { background: #dc3232; }
.schijtjerijk-cell.schijtjerijk-status-blocked   { background: #8c8f94; }

.schijtjerijk-cell:disabled {
	cursor: not-allowed;
	opacity: 0.85;
}

/* Kleurwissel geeft meteen zichtbare bevestiging bij het (de)selecteren,
   in plaats van een instant kleursprong die op een snelle tik makkelijk
   gemist wordt. */
.schijtjerijk-cell {
	transition: background-color 0.15s ease;
}

/* (hover: hover) en (pointer: fine) sluiten touch-apparaten uit: zonder
   deze guard interpreteert een mobiele browser een tik ook als :hover, en
   die pseudo-class blijft "vastzitten" tot er ergens anders getikt wordt
   (er is geen mouseleave-event bij touch). Een net gedeselecteerd vak
   (weer schijtjerijk-status-available) bleef daardoor de hover-stijl
   tonen — visueel bijna niet te onderscheiden van een geselecteerd vak,
   zie de pitch-thema-variant hieronder. Alleen echte muizen krijgen deze
   stijl nog. */
@media (hover: hover) and (pointer: fine) {
	.schijtjerijk-cell.schijtjerijk-status-available:hover {
		outline: 2px solid #1d2327;
		outline-offset: 1px;
	}
}

.schijtjerijk-notice {
	margin: 1em 0;
	padding: 0.75em 1em;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	border-radius: 4px;
}

/* Was tot nu toe helemaal ongestyled (platte tekst) en daardoor nauwelijks
   op te vallen. Zelfde rode "hard blokkerend"-palet als .schijtjerijk-form-
   error, want deze melding houdt de submit-knop net zo hard tegen. */
.schijtjerijk-adjacency-notice {
	margin: 1em 0;
	padding: 0.75em 1em;
	background: #fef3f2;
	border: 1px solid #fda29b;
	border-left: 4px solid #d92d20;
	border-radius: 4px;
	color: #7a1f1f;
	font-weight: 600;
}

.schijtjerijk-selection {
	margin-top: 1em;
	font-weight: 600;
}

.schijtjerijk-reset {
	margin-top: 0.5em;
	padding: 6px 14px;
	font-weight: normal;
	font-size: 0.88em;
	color: #475467;
	background: transparent;
	border: 1px solid #d0d5dd;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.schijtjerijk-reset:hover:not(:disabled) {
	background: #f2f4f7;
}

.schijtjerijk-reset:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.schijtjerijk-checkout {
	--sr-accent: #2271b1;
	--sr-accent-hover: #195a8d;
	--sr-border: #dcdfe4;
	margin-top: 1.75em;
	padding: 1.5em 1.75em;
	background: #fff;
	border: 1px solid var(--sr-border);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
	max-width: 480px;
	box-sizing: border-box;
}

.schijtjerijk-checkout h3 {
	margin: 0 0 1.25em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid var(--sr-border);
	font-size: 1.15em;
	letter-spacing: 0.01em;
}

.schijtjerijk-checkout p {
	margin: 0 0 1.1em;
}

.schijtjerijk-checkout label {
	display: block;
	font-weight: 600;
	font-size: 0.92em;
	color: #344054;
	margin-bottom: 1.1em;
}

.schijtjerijk-checkout input[type="text"],
.schijtjerijk-checkout input[type="email"],
.schijtjerijk-checkout input[type="tel"],
.schijtjerijk-checkout input[type="number"],
.schijtjerijk-checkout textarea {
	display: block;
	width: 100%;
	font-weight: normal;
	font-size: 0.95em;
	color: #1d2327;
	margin-top: 6px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.schijtjerijk-checkout textarea {
	resize: vertical;
}

.schijtjerijk-checkout input[type="text"]:focus,
.schijtjerijk-checkout input[type="email"]:focus,
.schijtjerijk-checkout input[type="tel"]:focus,
.schijtjerijk-checkout input[type="number"]:focus,
.schijtjerijk-checkout textarea:focus {
	outline: none;
	border-color: var(--sr-accent);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}

.schijtjerijk-checkout p:has(input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.schijtjerijk-checkout label:has(input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: normal;
	font-size: 0.9em;
	color: #475467;
	margin-bottom: 0;
	cursor: pointer;
}

.schijtjerijk-checkout label input[type="checkbox"] {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	margin-top: 1px;
	accent-color: var(--sr-accent);
	cursor: pointer;
}

.schijtjerijk-checkout label a {
	color: var(--sr-accent);
}

.schijtjerijk-submit {
	display: block;
	width: 100%;
	margin-top: 0.5em;
	padding: 12px 16px;
	font-size: 1em;
	font-weight: 600;
	color: #fff;
	background: var(--sr-accent);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.schijtjerijk-submit:hover:not(:disabled) {
	background: var(--sr-accent-hover);
}

.schijtjerijk-submit:active:not(:disabled) {
	transform: translateY(1px);
}

.schijtjerijk-submit:disabled {
	background: #98a2b3;
	opacity: 0.7;
	cursor: not-allowed;
}

.schijtjerijk-form-error {
	margin-bottom: 1.1em;
	padding: 0.85em 1em;
	background: #fef3f2;
	border: 1px solid #fda29b;
	border-left: 4px solid #d92d20;
	border-radius: 8px;
	color: #7a1f1f;
	font-size: 0.92em;
}

.schijtjerijk-confirmation {
	margin-top: 1.75em;
	padding: 1.25em 1.5em;
	background: #ecfdf3;
	border: 1px solid #abefc6;
	border-left: 4px solid #17b26a;
	border-radius: 8px;
}

.schijtjerijk-payment-result {
	max-width: 480px;
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	border-radius: 4px;
	border: 1px solid #ddd;
	background: #f9f9f9;
}

.schijtjerijk-payment-result-order {
	font-weight: 700;
	margin-top: 0;
}

.schijtjerijk-payment-result--paid {
	background: #eaf7ec;
	border-color: #a8dab5;
}

.schijtjerijk-payment-result--failed,
.schijtjerijk-payment-result--canceled,
.schijtjerijk-payment-result--expired {
	background: #fbeaea;
	border-color: #e6a5a5;
}

.schijtjerijk-payment-result-summary {
	list-style: none;
	margin: 1em 0 0.5em;
	padding: 0;
}

.schijtjerijk-payment-result-summary li {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	border-bottom: 1px solid #e2e2e2;
}

.schijtjerijk-payment-result-subtotal,
.schijtjerijk-payment-result-donation,
.schijtjerijk-payment-result-total {
	display: flex;
	justify-content: space-between;
	margin: 4px 0;
}

.schijtjerijk-payment-result-total {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid #ccc;
}

@media (max-width: 480px) {
	.schijtjerijk-cell {
		width: 28px;
		height: 28px;
		font-size: 8px;
	}
}

/* Thema: half voetbalveld */

.schijtjerijk-pitch {
	position: relative;
	display: inline-grid;
	/*
	 * box-sizing: border-box so that max-width: 100% below constrains the
	 * full rendered box (incl. padding + border), not just the content/grid
	 * area — otherwise the 18px padding + 3px border get added on top of
	 * the max-width-clamped content, making the box wider than its
	 * container.
	 */
	box-sizing: border-box;
	/*
	 * Without explicit max-content tracks, a grid container with
	 * max-width + overflow:auto shrinks its implicit auto track to fit
	 * the available width instead of the stacked items' true content
	 * size, so columns beyond what fits in one screen-width become
	 * unreachable (no scrollable overflow is generated at all). Forcing
	 * max-content tracks makes the container's scrollable area match
	 * the actual field size, so every column/row can be scrolled to.
	 */
	grid-template-columns: max-content;
	grid-template-rows: max-content;
	padding: 18px;
	border: 3px solid #fff;
	border-radius: 8px;
	background-color: #2f9e44;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.06) 0,
		rgba(255, 255, 255, 0.06) 36px,
		transparent 36px,
		transparent 72px
	);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	max-width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	/*
	 * Without this, the browser's scroll-anchoring can silently readjust
	 * scrollLeft after a late layout shift inside this box (e.g. the
	 * corner-flag/goat emoji font finishing its load) — discovered while
	 * testing the center-on-load behavior, where scrollLeft drifted away
	 * from the value field-map.js had just set. Disabling anchoring here
	 * keeps our own intentional scroll position (initial centering, or a
	 * visitor's manual scroll) from being overridden by the browser.
	 */
	overflow-anchor: none;
}

.schijtjerijk-pitch-field,
.schijtjerijk-grid--pitch {
	grid-area: 1 / 1;
}

.schijtjerijk-pitch-field {
	position: relative;
	z-index: 1;
	pointer-events: none;
	border-left: 3px solid rgba(255, 255, 255, 0.9);
	border-right: 3px solid rgba(255, 255, 255, 0.9);
	border-bottom: 3px solid rgba(255, 255, 255, 0.9);
	box-sizing: border-box;
}

.schijtjerijk-pitch-line--halfway {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border-top: 2px dashed rgba(255, 255, 255, 0.8);
}

.schijtjerijk-pitch-circle {
	position: absolute;
	left: 50%;
	top: 0;
	width: var(--sr-circle-diameter, 22%);
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: transparent;
}

.schijtjerijk-pitch-center-spot {
	position: absolute;
	left: 50%;
	top: 0;
	width: 6px;
	height: 6px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
}

.schijtjerijk-pitch-penalty-area {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: var(--sr-penalty-width, 62%);
	height: var(--sr-penalty-depth, 26%);
	transform: translateX(-50%);
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-bottom: none;
	box-sizing: border-box;
}

.schijtjerijk-pitch-goal-area {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: var(--sr-six-yard-width, 30%);
	height: var(--sr-six-yard-depth, 11%);
	transform: translateX(-50%);
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-bottom: none;
	box-sizing: border-box;
}

.schijtjerijk-pitch-penalty-spot {
	position: absolute;
	left: 50%;
	bottom: var(--sr-penalty-spot, 18%);
	width: 6px;
	height: 6px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
}

.schijtjerijk-pitch-penalty-arc {
	position: absolute;
	left: 50%;
	bottom: var(--sr-penalty-spot, 18%);
	width: var(--sr-arc-diameter, 22%);
	aspect-ratio: 1 / 1;
	transform: translate(-50%, 50%);
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: transparent;
	box-sizing: border-box;
	/*
	 * Hides the part of the circle that falls inside the 16m box — real
	 * pitches only draw the "D" bulge beyond it, not the full circle.
	 */
	clip-path: inset(0 0 var(--sr-arc-clip, 77.32%) 0);
}

.schijtjerijk-pitch-goal {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: var(--sr-goal-width, 12%);
	height: 8px;
	transform: translateX(-50%);
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-bottom: none;
	background: rgba(255, 255, 255, 0.15);
	box-sizing: border-box;
}

.schijtjerijk-pitch-corner {
	position: absolute;
	bottom: -1px;
	width: 24px;
	height: 24px;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-top: none;
	box-sizing: border-box;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/*
 * The box's own corner that sits AT the field's actual corner point gets
 * the border-radius (so the arc curves right at the corner, tangent to
 * the touchline and goal line) — for the left corner that's the box's
 * own bottom-left corner (left:-1px + bottom:-1px anchors it there), so
 * the visible border sides are left+bottom (the two sides meeting at
 * that corner), not right+bottom.
 */
.schijtjerijk-pitch-corner--left {
	left: -1px;
	border-right: none;
	border-radius: 0 0 0 100%;
	transform: rotate(180deg);
}

.schijtjerijk-pitch-corner--right {
	right: -1px;
	border-left: none;
	border-radius: 0 0 100% 0;
	transform: rotate(180deg);
}

.schijtjerijk-pitch-corner-flag {
	position: absolute;
	bottom: -2px;
	z-index: 2;
	font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
	font-size: 34px;
	line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.schijtjerijk-pitch-corner-flag--left {
	left: -27px;
	transform: scaleX(-1);
}

.schijtjerijk-pitch-corner-flag--right {
	right: -20px;
}

.schijtjerijk-pitch-goat {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 3;
	font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
	font-size: 26px;
	line-height: 1;
	transform: translate(-50%, -50%);
	transition: left 0.6s ease, top 0.6s ease;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.schijtjerijk-grid--pitch {
	position: relative;
	gap: 2px;
}

.schijtjerijk-grid--pitch .schijtjerijk-cell {
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.schijtjerijk-grid--pitch .schijtjerijk-cell.schijtjerijk-status-available {
	background: rgba(70, 180, 80, 0.55);
}

/* Blijft in dezelfde groene kleurfamilie als "beschikbaar" (alleen
   dekkender) in plaats van de vorige rgba(34, 113, 177, ...) — dat blauw
   was vrijwel gelijk aan schijtjerijk-status-selected (#2271b1) en het
   enige verschil was de witte rand. Zie ook de (hover: hover)-guard
   hierboven, die dit sowieso van touch-apparaten weghoudt; deze kleur
   blijft zo ook voor muisgebruikers ondubbelzinnig "nog beschikbaar". */
@media (hover: hover) and (pointer: fine) {
	.schijtjerijk-grid--pitch .schijtjerijk-cell.schijtjerijk-status-available:hover {
		background: rgba(70, 180, 80, 0.85);
		outline: 2px solid #fff;
		outline-offset: 1px;
	}
}

.schijtjerijk-field--theme-pitch .schijtjerijk-checkout {
	border-color: #2f9e44;
}