/**
 * Slek Club front-end styles (sign-up form and stamp card).
 *
 * Everything is scoped to .slek-root and every element has its own .slek-*
 * class, so rules win over typical theme selectors (e.g. ".entry-content p")
 * without !important, and the theme itself is never restyled.
 */

.slek-root {
	--slek-green: #1e5a3c;
	--slek-green-deep: #143f2a;
	--slek-pink: #f49ac1;
	--slek-pink-soft: #fbd3e5;
	--slek-pink-deep: #b02f6b;
	--slek-cream: #fdf6e4;
	--slek-paper: #fffbf1;
	--slek-sand: #f2c98f;
	--slek-ink: #141414;
	--slek-muted: #5e5a50;
	--slek-line: #e3d8bf;
	--slek-slot: #968a6b;      /* empty stamp ring: 3.17:1 on paper */
	--slek-slot-text: #7a6e52; /* empty stamp number: 4.86:1 on paper */
	--slek-display: "Bagel Fat One", "Arial Black", "Helvetica Neue", Arial, sans-serif;
	--slek-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--slek-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--slek-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--slek-radius: 24px;
	--slek-shadow: 0 6px 0 var(--slek-ink);

	box-sizing: border-box;
	width: 100%;
	max-width: 620px;
	margin: 0 auto 32px;
	color: var(--slek-ink);
	font-family: var(--slek-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.slek-root *,
.slek-root *::before,
.slek-root *::after {
	box-sizing: border-box;
}

/* ---------- Building blocks ---------- */

.slek-root .slek-card {
	position: relative;
	margin: 0 0 24px;
	padding: clamp(22px, 5.5vw, 34px);
	background: var(--slek-cream);
	border: 2px solid var(--slek-ink);
	border-radius: var(--slek-radius);
	box-shadow: var(--slek-shadow);
	color: var(--slek-ink);
}

.slek-root .slek-kicker {
	margin: 0 0 10px;
	font-family: var(--slek-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--slek-pink-deep);
}

.slek-root .slek-h {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--slek-display);
	font-size: clamp(32px, 8vw, 44px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.02;
	letter-spacing: 0;
	text-transform: none;
	color: var(--slek-green);
	overflow-wrap: anywhere;
}

.slek-root .slek-h3 {
	margin: 0 0 6px;
	font-family: var(--slek-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--slek-ink);
}

.slek-root .slek-lead {
	margin: 0 0 22px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--slek-ink);
	text-wrap: pretty;
}

.slek-root .slek-lead--short {
	font-family: var(--slek-serif);
	font-style: italic;
	font-size: 22px;
	line-height: 1.2;
	color: var(--slek-green);
}

.slek-root .slek-p {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.5;
}

.slek-root .slek-small {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--slek-muted);
}

.slek-root .slek-center {
	text-align: center;
}

.slek-root .slek-tagline {
	margin: 22px 0 0;
	font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-style: italic;
	line-height: 1.2;
	color: var(--slek-green);
}

.slek-root .slek-sr,
.slek-root .slek-hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.slek-root .slek-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.slek-root a:not(.slek-btn) {
	color: var(--slek-pink-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1.5px;
}

.slek-root a:not(.slek-btn):hover {
	color: var(--slek-ink);
}

.slek-root a:focus-visible,
.slek-root summary:focus-visible {
	outline: 3px solid var(--slek-pink-deep);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Programmatically focused messages: keep some air above them (sticky headers). */
.slek-root [data-slek-focus] {
	scroll-margin-top: var(--slek-focus-offset, 24px);
}

/* ---------- Buttons ---------- */

.slek-root .slek-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	margin: 0;
	padding: 12px 26px;
	font-family: var(--slek-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	color: var(--slek-ink);
	background: var(--slek-pink);
	border: 2px solid var(--slek-ink);
	border-radius: 999px;
	box-shadow: 0 4px 0 var(--slek-ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}

.slek-root .slek-btn:hover {
	background: #f7aecd;
	color: var(--slek-ink);
}

.slek-root .slek-btn:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--slek-ink);
}

.slek-root .slek-btn:focus-visible {
	outline: 3px solid var(--slek-pink-deep);
	outline-offset: 3px;
}

.slek-root .slek-btn[disabled] {
	cursor: progress;
	opacity: 0.75;
}

.slek-root .slek-btn--block {
	display: flex;
	width: 100%;
	margin-top: 8px;
}

.slek-root .slek-btn--ink {
	color: var(--slek-cream);
	background: var(--slek-ink);
	box-shadow: 0 4px 0 var(--slek-pink-deep);
}

.slek-root .slek-btn--ink:hover {
	color: var(--slek-cream);
	background: #2a2a2a;
}

.slek-root .slek-btn--ghost {
	background: var(--slek-paper);
}

.slek-root .slek-btn--ghost:hover {
	background: #fff;
}

.slek-root .slek-btn__icon {
	flex: none;
}

.slek-root .slek-actions {
	margin: 18px 0 0;
}

.slek-root .slek-actions--tight {
	margin: -6px 0 22px;
}

.slek-root .slek-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 6px 0 4px;
}

/* ---------- Form ---------- */

.slek-root .slek-form {
	margin: 0;
}

.slek-root .slek-field {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.slek-root .slek-label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--slek-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--slek-ink);
}

.slek-root .slek-legend {
	float: left;
	width: 100%;
}

.slek-root .slek-legend + * {
	clear: both;
}

.slek-root .slek-hint {
	margin: 0 0 8px;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--slek-muted);
}

.slek-root .slek-callout {
	margin: 0 0 12px;
	padding: 12px 14px;
	color: var(--slek-ink);
	background: var(--slek-paper);
	border: 2px dashed var(--slek-line);
	border-radius: 14px;
}

.slek-root .slek-callout__title {
	margin: 0 0 2px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--slek-green);
}

.slek-root .slek-callout__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.45;
	text-wrap: pretty;
}

.slek-root .slek-input {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 14px;
	font-family: var(--slek-body);
	font-size: 17px; /* 16px+ prevents iOS zoom on focus */
	line-height: 1.3;
	color: var(--slek-ink);
	background: #fff;
	border: 2px solid var(--slek-ink);
	border-radius: 14px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.slek-root .slek-input:focus {
	outline: 3px solid var(--slek-pink-deep);
	outline-offset: 2px;
	border-color: var(--slek-ink);
	box-shadow: none;
}

.slek-root .slek-input[aria-invalid="true"] {
	border-color: var(--slek-pink-deep);
	background: #fff5f9;
}

.slek-root .slek-field-error {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--slek-pink-deep);
}

.slek-root .slek-field-error::before {
	content: "✺";
	flex: none;
	line-height: 1.3;
}

.slek-root .slek-errors {
	margin: 0 0 24px;
	padding: 16px 18px;
	background: var(--slek-pink-soft);
	border: 2px solid var(--slek-ink);
	border-radius: 16px;
}

.slek-root .slek-errors:focus {
	/* Focused programmatically (not interactive): no focus ring needed. */
	outline: none;
}

.slek-root .slek-errors__title {
	margin: 0 0 6px;
	font-weight: 700;
}

.slek-root .slek-errors__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.slek-root .slek-errors__list li {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.2;
}

.slek-root .slek-errors__list li::marker {
	content: "";
}

.slek-root .slek-errors__list a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 12px;
	color: var(--slek-ink);
	font-weight: 700;
	text-decoration: none;
	background: #fff;
	border: 2px solid var(--slek-ink);
	border-radius: 999px;
}

.slek-root .slek-errors__list a:hover {
	color: var(--slek-ink);
	background: var(--slek-paper);
}

/* System messages (limit, session, save): not a form mistake, so no list. */
.slek-root .slek-alert {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 24px;
	padding: 14px 16px;
	background: var(--slek-sand);
	border: 2px solid var(--slek-ink);
	border-radius: 16px;
}

.slek-root .slek-alert:focus {
	outline: none;
}

.slek-root .slek-alert--sessie,
.slek-root .slek-alert--opslaan {
	background: var(--slek-pink-soft);
}

.slek-root .slek-alert__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--slek-ink);
	background: #fff;
	border: 2px solid var(--slek-ink);
	border-radius: 50%;
}

.slek-root .slek-alert__title {
	margin: 2px 0 2px;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
}

.slek-root .slek-alert__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.45;
}

/* Pace options */
.slek-root .slek-fieldset {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.slek-root .slek-options {
	display: grid;
	gap: 10px;
	margin: 0;
}

.slek-root .slek-option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	margin: 0;
	padding: 12px 14px;
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--slek-ink);
	background: #fff;
	border: 2px solid var(--slek-ink);
	border-radius: 14px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.slek-root .slek-option:hover {
	background: var(--slek-paper);
}

.slek-root .slek-option:has(input:checked) {
	background: var(--slek-pink-soft);
	box-shadow: 0 3px 0 var(--slek-ink);
}

.slek-root .slek-option:has(input:focus-visible) {
	outline: 3px solid var(--slek-pink-deep);
	outline-offset: 2px;
}

/* Custom radio and checkbox: 24px, 2px ink outline, green when checked. */
.slek-root .slek-option input,
.slek-root .slek-consent input {
	flex: none;
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	background: #fff;
	border: 2px solid var(--slek-ink);
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.slek-root .slek-consent input {
	border-radius: 6px;
}

.slek-root .slek-option input:checked {
	background: var(--slek-green);
	box-shadow: inset 0 0 0 4px #fff;
}

.slek-root .slek-consent input:checked {
	background: var(--slek-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8' fill='none' stroke='%23FDF6E4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.slek-root .slek-option input:focus {
	outline: none;
}

.slek-root .slek-consent input:focus {
	outline: none;
}

.slek-root .slek-consent input:focus-visible {
	outline: 3px solid var(--slek-pink-deep);
	outline-offset: 2px;
}

.slek-root .slek-option input::before,
.slek-root .slek-consent input::before,
.slek-root .slek-option input::after,
.slek-root .slek-consent input::after {
	/* Some themes draw their own check marks on pseudo-elements: switch them off. */
	content: none;
	display: none;
}

.slek-root .slek-option__text {
	flex: 1 1 auto;
	min-width: 0;
}

.slek-root .slek-option__tag {
	flex: none;
	margin-left: auto;
	padding: 4px 9px;
	font-family: var(--slek-mono);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--slek-green);
	background: var(--slek-cream);
	border: 1.5px solid var(--slek-green);
	border-radius: 999px;
}

/* Consent */
.slek-root .slek-consent {
	margin: 0 0 22px;
}

.slek-root .slek-consent__label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

.slek-root .slek-consent__label input {
	margin-top: 0;
}

.slek-root .slek-consent.slek-is-invalid .slek-consent__label {
	padding: 10px 12px;
	background: #fff5f9;
	border: 2px solid var(--slek-pink-deep);
	border-radius: 14px;
}

/* ---------- Thank-you ---------- */

.slek-root .slek-thanks:focus {
	outline: none;
}

.slek-root .slek-group {
	margin: 0 0 22px;
	padding: 18px 20px;
	border: 2px solid var(--slek-ink);
	border-radius: 18px;
}

/* Same colours as the group cards on the site and in the mail:
   Turbo Slek pink (ink text, green name), Cruise green (cream text, pink name). */
.slek-root .slek-group--turbo {
	color: var(--slek-ink);
	background: var(--slek-pink);
}

.slek-root .slek-group--cruise {
	color: var(--slek-cream);
	background: var(--slek-green);
}

.slek-root .slek-group__label {
	margin: 0 0 4px;
	font-family: var(--slek-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.slek-root .slek-group__name {
	margin: 0 0 6px;
	font-family: var(--slek-display);
	font-size: clamp(30px, 7.5vw, 38px);
	line-height: 1.05;
}

.slek-root .slek-group--turbo .slek-group__name {
	color: var(--slek-green-deep);
}

.slek-root .slek-group--cruise .slek-group__name {
	color: var(--slek-pink);
}

.slek-root .slek-group__info {
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 1.45;
	text-wrap: pretty;
}

.slek-root .slek-next {
	padding: 16px 0 0;
	border-top: 2px dashed var(--slek-line);
}

/* ---------- Stamp card ---------- */

.slek-root .slek-progress {
	margin: 0 0 4px;
	font-size: 17px;
	line-height: 1.45;
}

.slek-root .slek-stamps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(8px, 2.6vw, 14px);
	max-width: 440px;
	margin: 22px auto 10px;
	padding: 0;
	list-style: none;
}

.slek-root .slek-stamp {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	background: var(--slek-paper);
	border: 2px dashed var(--slek-slot);
	border-radius: 50%;
	list-style: none;
}

.slek-root .slek-stamp::marker {
	content: "";
}

.slek-root .slek-stamp__num {
	font-family: var(--slek-display);
	font-size: clamp(16px, 4.6vw, 22px);
	line-height: 1;
	color: var(--slek-slot-text);
}

.slek-root .slek-stamp.slek-is-reward {
	background: var(--slek-pink-soft);
	border-color: var(--slek-pink-deep);
}

.slek-root .slek-stamp.slek-is-reward .slek-stamp__num {
	color: var(--slek-pink-deep);
}

.slek-root .slek-stamp__tag {
	margin-top: 2px;
	font-family: var(--slek-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slek-pink-deep);
}

.slek-root .slek-stamp.slek-is-filled {
	background: transparent;
	border: 0;
}

.slek-root .slek-stamp__icon {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 0 3px 0 var(--slek-ink);
	transform: rotate(-9deg);
}

.slek-root .slek-stamp.slek-is-filled:nth-child(even) .slek-stamp__icon {
	transform: rotate(7deg);
}

.slek-root .slek-stamp.slek-is-filled:nth-child(3n) .slek-stamp__icon {
	transform: rotate(-3deg);
}

/* The stamp that was just added lands with a small thud. */
.slek-root .slek-stamp.slek-is-new .slek-stamp__icon {
	animation: slek-stamp-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.15s both;
}

@keyframes slek-stamp-in {
	from {
		opacity: 0;
		transform: scale(1.35) rotate(-20deg);
	}
}

.slek-root .slek-stamps-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px 16px;
	max-width: 440px;
	margin: 0 auto 22px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	color: var(--slek-pink-deep);
}

.slek-root .slek-stamps-legend span {
	white-space: nowrap;
}

.slek-root .slek-stamps-legend span::before {
	content: "✺ ";
}

/* Small phones: the reward word does not fit in the circle; the legend says it. */
@media (max-width: 479px) {
	.slek-root .slek-stamp__tag {
		display: none;
	}
}

/* Notices */
.slek-root .slek-notice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 12px 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--slek-ink);
	border: 2px solid var(--slek-ink);
	border-radius: 14px;
}

.slek-root .slek-notice__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: -1px;
	font-family: var(--slek-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	font-variant-emoji: text;
	color: var(--slek-ink);
	background: #fff;
	border: 2px solid var(--slek-ink);
	border-radius: 50%;
}

.slek-root .slek-notice__text {
	flex: 1 1 auto;
	min-width: 0;
}

.slek-root .slek-notice--inline {
	margin: 12px 0 0;
}

.slek-root .slek-notice--voucher {
	margin: 12px 0 0;
}

.slek-root .slek-notice:focus {
	/* Focused programmatically (not interactive): no focus ring needed. */
	outline: none;
}

.slek-root .slek-notice--ok {
	color: var(--slek-cream);
	background: var(--slek-green);
}

.slek-root .slek-notice--info .slek-notice__icon {
	font-size: 17px;
}

.slek-root .slek-notice--ok .slek-notice__icon {
	color: var(--slek-green);
	background: var(--slek-cream);
}

.slek-root .slek-notice--info {
	background: var(--slek-sand);
}

.slek-root .slek-notice--error {
	background: var(--slek-pink-soft);
}

/* Code form */
.slek-root .slek-code-form,
.slek-root .slek-runstatus,
.slek-root .slek-link-form {
	margin: 0;
	padding: 18px 0 0;
	border-top: 2px dashed var(--slek-line);
}

.slek-root .slek-runstatus .slek-p {
	margin: 0;
}

.slek-root .slek-full-line {
	margin: 0;
	font-family: var(--slek-serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	color: var(--slek-green);
}

.slek-root .slek-link-form {
	margin: 20px 0 0;
}

.slek-root .slek-link-form + .slek-next {
	margin-top: 26px;
}

.slek-root .slek-label--light {
	font-weight: 400;
	font-size: 15.5px;
}

.slek-root .slek-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.slek-root .slek-inline .slek-input {
	flex: 1 1 120px;
	width: auto;
	min-width: 0;
}

.slek-root .slek-inline .slek-btn {
	flex: 0 0 auto;
}

.slek-root .slek-input--code {
	font-family: var(--slek-mono);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.slek-root .slek-input--code::placeholder {
	letter-spacing: normal;
	text-transform: none;
}

.slek-root .slek-input--pin {
	flex-basis: 120px;
	letter-spacing: 0.3em;
}

/* Vouchers */
.slek-root .slek-voucher {
	position: relative;
	margin: 0 0 24px;
	padding: 22px clamp(22px, 5.5vw, 30px);
	background: var(--slek-pink);
	border: 2px solid var(--slek-ink);
	border-radius: var(--slek-radius);
	box-shadow: var(--slek-shadow);
	overflow: hidden;
}

/* Ticket notches */
.slek-root .slek-voucher::before,
.slek-root .slek-voucher::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	/* Same colour as the page behind the card: themes can set --slek-page-bg. */
	background: var(--slek-page-bg, var(--wp--preset--color--base, #fff));
	border: 2px solid var(--slek-ink);
	border-radius: 50%;
}

.slek-root .slek-voucher :focus-visible {
	outline-color: var(--slek-ink);
}

.slek-root .slek-voucher::before {
	left: -13px;
}

.slek-root .slek-voucher::after {
	right: -13px;
}

.slek-root .slek-voucher .slek-kicker {
	color: var(--slek-ink);
}

.slek-root .slek-voucher__title {
	margin: 0 0 8px;
	font-family: var(--slek-display);
	font-size: clamp(26px, 6.5vw, 34px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: none;
	color: var(--slek-ink);
}

.slek-root .slek-voucher.slek-is-used {
	background: var(--slek-paper);
	box-shadow: none;
	color: var(--slek-muted);
}

.slek-root .slek-voucher.slek-is-used .slek-voucher__title {
	color: var(--slek-muted);
	text-decoration: line-through;
	text-decoration-thickness: 3px;
}

.slek-root .slek-voucher__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
	font-size: 15px;
}

.slek-root .slek-voucher__stamp {
	display: inline-block;
	padding: 4px 10px;
	font-family: var(--slek-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--slek-pink-deep);
	border: 2px solid var(--slek-pink-deep);
	border-radius: 6px;
	transform: rotate(-4deg);
}

.slek-root .slek-crew {
	margin: 14px 0 0;
	padding: 2px 0 0;
	border-top: 2px dashed rgba(20, 20, 20, 0.35);
}

.slek-root .slek-crew summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--slek-mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.slek-root .slek-crew summary::-webkit-details-marker {
	display: none;
}

.slek-root .slek-crew summary::before {
	content: "+ ";
}

.slek-root .slek-crew[open] summary::before {
	content: "– ";
}

.slek-root .slek-crew__form {
	margin: 4px 0 6px;
}

.slek-root .slek-crew__form .slek-input {
	background: var(--slek-paper);
}

/* Early access (Core Black: ink + pink) */
.slek-root .slek-early {
	color: var(--slek-cream);
	background: var(--slek-ink);
	box-shadow: 0 6px 0 var(--slek-pink);
}

.slek-root .slek-early .slek-kicker {
	color: var(--slek-pink);
}

.slek-root .slek-early__code {
	margin: 0 0 10px;
	font-family: var(--slek-mono);
	font-size: clamp(22px, 6.4vw, 30px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.1em;
	color: var(--slek-pink);
	overflow-wrap: anywhere;
	-webkit-user-select: all;
	user-select: all;
}

.slek-root .slek-early__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--slek-cream);
	text-wrap: pretty;
}

/* Used rewards: one line each, below the active content. */
.slek-root .slek-used {
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--slek-paper);
	border: 2px solid var(--slek-line);
	border-radius: 18px;
}

.slek-root .slek-used__title {
	margin: 0 0 6px;
	font-family: var(--slek-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--slek-muted);
}

.slek-root .slek-used__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.slek-root .slek-used__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: 4px 0 0;
	font-size: 15.5px;
	line-height: 1.45;
	color: var(--slek-muted);
}

.slek-root .slek-used__name {
	font-weight: 700;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

/* Confirm changed details. */
.slek-root .slek-confirm {
	background: var(--slek-pink-soft);
}

.slek-root .slek-confirm:focus {
	outline: none;
}

.slek-root .slek-h--sm {
	font-size: clamp(26px, 6.5vw, 34px);
}

.slek-root .slek-dl {
	margin: 0 0 18px;
	padding: 4px 16px;
	background: #fff;
	border: 2px solid var(--slek-ink);
	border-radius: 14px;
}

.slek-root .slek-dl__row {
	padding: 8px 0;
}

.slek-root .slek-dl__row + .slek-dl__row {
	border-top: 1px solid var(--slek-line);
}

.slek-root .slek-dl dt {
	margin: 0;
	font-family: var(--slek-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--slek-muted);
}

.slek-root .slek-dl dd {
	margin: 2px 0 0;
	font-size: 16.5px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Card header: snail badge next to the kicker. */
.slek-root .slek-kaart__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}

.slek-root .slek-kaart__head .slek-kicker {
	margin: 0;
}

.slek-root .slek-kaart__icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: 0 2px 0 var(--slek-ink);
}

/* Sign-up: mascot sticker and perks. */
.slek-root .slek-card--signup {
	margin-top: 34px;
}

.slek-root .slek-sticker {
	position: absolute;
	top: -40px;
	right: 14px;
	width: 84px;
	height: auto;
	margin: 0;
	transform: rotate(8deg);
	pointer-events: none;
}

.slek-root .slek-perks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: -8px 0 24px;
	padding: 0;
	list-style: none;
}

.slek-root .slek-perks li {
	margin: 0;
	padding: 0;
	font-family: var(--slek-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--slek-green);
}

.slek-root .slek-perks li::marker {
	content: "";
}

.slek-root .slek-perks li::before {
	content: "✺ ";
	color: var(--slek-pink-deep);
}

@media (min-width: 600px) {
	.slek-root .slek-sticker {
		top: -48px;
		right: 22px;
		width: 104px;
	}
}

/* Pace options on small phones: the group tag goes below the label, so the label
   gets the full width (and stays on one line where the theme leaves enough room). */
@media (max-width: 419px) {
	.slek-root .slek-option {
		flex-wrap: wrap;
		gap: 6px 10px;
		padding: 12px;
		font-size: 16px;
	}

	.slek-root .slek-option__text {
		flex-basis: calc(100% - 34px);
	}

	.slek-root .slek-option__tag {
		margin-left: 34px;
	}
}

/* Home screen guide */
.slek-root .slek-homescreen {
	padding-top: 18px;
	padding-bottom: 18px;
	background: var(--slek-paper);
	box-shadow: 0 4px 0 var(--slek-ink);
}

.slek-root .slek-homescreen__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-weight: 700;
	font-size: 17px;
	cursor: pointer;
	list-style: none;
}

.slek-root .slek-homescreen__summary::-webkit-details-marker {
	display: none;
}

.slek-root .slek-homescreen__summary::after {
	content: "+";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 1;
	background: var(--slek-pink);
	border: 2px solid var(--slek-ink);
	border-radius: 50%;
}

.slek-root .slek-homescreen[open] .slek-homescreen__summary::after {
	content: "–";
}

.slek-root .slek-homescreen__body {
	margin-top: 14px;
}

.slek-root .slek-homescreen__os {
	margin: 0 0 14px;
}

.slek-root .slek-homescreen__os[hidden] {
	display: none;
}

.slek-root .slek-steps {
	margin: 0;
	padding: 0 0 0 22px;
	list-style: decimal;
}

.slek-root .slek-steps li {
	margin: 4px 0;
	font-size: 16px;
	line-height: 1.45;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.slek-root *,
	.slek-root *::before,
	.slek-root *::after {
		transition: none !important;
		animation: none !important;
	}
}