/**
 * TKF — Past TKF bij jou? — styling (standalone).
 * !important blijft op de interactieve knoppen, omdat het thema waarin de
 * shortcode geplaatst wordt vaak eigen button-styling oplegt.
 */

.tkf-match {
	--tkf-navy: #0c2842;
	--tkf-navy-hover: #163657;
	--tkf-orange: #f47625;
	--tkf-orange-hover: #d9631a;
	--tkf-text: #0c2842;
	--tkf-muted: #6b7280;
	--tkf-border: #d1d5db;
	--tkf-error-bg: #fde8e1;
	--tkf-error-accent: #f47625;
	--tkf-error-text: #c44e1a;
	--tkf-radius: 4px;
	--tkf-radio-size: 22px;
	--tkf-gap: 18px;

	position: relative;
	max-width: 560px;
	color: var(--tkf-text);
	font-family: inherit;
	box-sizing: border-box;
}

.tkf-match *,
.tkf-match *::before,
.tkf-match *::after {
	box-sizing: border-box;
}

/* Counter */
.tkf-match .tkf-match__counter {
	display: block !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	color: var(--tkf-orange) !important;
	text-transform: uppercase !important;
	margin: 0 0 12px 0 !important;
	line-height: 1.3 !important;
	background: transparent !important;
}

/* Statement */
.tkf-match .tkf-match__statement {
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin: 0 0 22px 0 !important;
	color: var(--tkf-text) !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Step container */
.tkf-match .tkf-match__step[hidden] {
	display: none !important;
}

/* Options row */
.tkf-match .tkf-match__options {
	display: flex !important;
	align-items: stretch !important;
	gap: var(--tkf-gap) !important;
	flex-wrap: nowrap !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	list-style: none !important;
}

/* Eens / Oneens knoppen */
.tkf-match button.tkf-match__option {
	flex: 1 1 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 14px 22px !important;
	border: 1.5px solid var(--tkf-border) !important;
	border-radius: var(--tkf-radius) !important;
	background: #ffffff !important;
	background-image: none !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: var(--tkf-text) !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
	min-width: 0 !important;
	text-align: left !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: auto !important;
	height: auto !important;
}

.tkf-match button.tkf-match__option:hover:not(.is-selected) {
	border-color: var(--tkf-navy) !important;
	background: #ffffff !important;
	color: var(--tkf-text) !important;
}

.tkf-match button.tkf-match__option:focus-visible {
	outline: 2px solid var(--tkf-orange) !important;
	outline-offset: 2px !important;
}

.tkf-match button.tkf-match__option.is-selected {
	background: var(--tkf-navy) !important;
	border-color: var(--tkf-navy) !important;
	color: #ffffff !important;
}

/* Radio dot */
.tkf-match .tkf-match__radio {
	flex: 0 0 var(--tkf-radio-size) !important;
	width: var(--tkf-radio-size) !important;
	height: var(--tkf-radio-size) !important;
	border: 2px solid var(--tkf-border) !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	position: relative !important;
	transition: border-color 0.2s ease, background 0.2s ease !important;
	display: inline-block !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.tkf-match .tkf-match__option.is-selected .tkf-match__radio {
	border-color: var(--tkf-orange) !important;
	background: var(--tkf-orange) !important;
}

.tkf-match .tkf-match__option.is-selected .tkf-match__radio::after {
	content: '' !important;
	position: absolute !important;
	inset: 4px !important;
	background: #ffffff !important;
	border-radius: 50% !important;
}

.tkf-match .tkf-match__option-label {
	white-space: nowrap !important;
	color: inherit !important;
	background: transparent !important;
	font-weight: inherit !important;
}

/* "of" separator */
.tkf-match .tkf-match__sep {
	display: flex !important;
	align-items: center !important;
	font-size: 0.95rem !important;
	color: var(--tkf-muted) !important;
	font-style: italic !important;
	background: transparent !important;
}

/* Error message */
.tkf-match .tkf-match__error {
	margin: 18px 0 0 !important;
	background: var(--tkf-error-bg) !important;
	border-left: 4px solid var(--tkf-error-accent) !important;
	padding: 14px 18px !important;
	border-radius: 2px !important;
}

.tkf-match .tkf-match__error-text {
	margin: 0 !important;
	color: var(--tkf-error-text) !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	background: transparent !important;
}

.tkf-match .tkf-match__error[hidden] {
	display: none !important;
}

/* Success + CTA — geen box-opmaak, succes-inhoud loopt mee in de pagina. */
.tkf-match .tkf-match__success[hidden] {
	display: none !important;
}

.tkf-match .tkf-match__success-lead {
	margin: 0 0 8px !important;
	color: var(--tkf-text) !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	background: transparent !important;
	outline: none !important;
}

/* Inline klikbare job alert-trigger binnen de toelichtingstekst. */
.tkf-match .tkf-match__textlink {
	display: inline !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	font: inherit !important;
	color: var(--tkf-orange) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

.tkf-match .tkf-match__textlink:hover,
.tkf-match .tkf-match__textlink:focus-visible {
	color: var(--tkf-orange-hover) !important;
}

.tkf-match .tkf-match__success-text {
	margin: 0 0 18px !important;
	color: var(--tkf-text) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	background: transparent !important;
}

/* CTA-knoppen (zowel links <a> als popover-triggers <button>) */
.tkf-match .tkf-match__cta {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin: 0 !important;
}

/* De CTA-knoppen gebruiken de theme-button-classes (button button--primary /
   button--secondary), dus hun styling komt uit het thema. Hier alleen layout. */

/* Shake animation */
.tkf-match .tkf-match__shake {
	will-change: transform;
}

.tkf-match .tkf-match__shake.is-shaking {
	animation: tkf-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes tkf-shake {
	10%, 90% { transform: translateX(-2px); }
	20%, 80% { transform: translateX(4px); }
	30%, 50%, 70% { transform: translateX(-8px); }
	40%, 60% { transform: translateX(8px); }
}

/* Noscript */
.tkf-match .tkf-match__noscript {
	background: var(--tkf-error-bg) !important;
	color: var(--tkf-error-text) !important;
	padding: 12px !important;
	border-radius: var(--tkf-radius) !important;
	margin-top: 12px !important;
}

/* Mobile */
@media (max-width: 520px) {
	.tkf-match .tkf-match__statement {
		font-size: 1.2rem !important;
	}
	.tkf-match .tkf-match__options {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.tkf-match .tkf-match__sep {
		justify-content: center !important;
		padding: 2px 0 !important;
	}
	.tkf-match button.tkf-match__option {
		padding: 12px 18px !important;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.tkf-match .tkf-match__shake,
	.tkf-match .tkf-match__option,
	.tkf-match .tkf-match__radio {
		transition-duration: 0.01ms !important;
		animation: none !important;
	}
}