/*
 * Taxatie Opdracht – styled after goedkopetaxatiesflevoland.nl.
 * Colours are CSS variables; the values set under Instellingen are printed inline and override these defaults.
 */
.tto {
	--tto-primary: #EC904A;
	--tto-primary-hover: #D9782F;
	--tto-heading: #2F2F2F;
	--tto-text: #66717A;
	--tto-soft: #F9F7F5;
	--tto-border: #D7D5D5;
	--tto-bg: #FFFFFF;
	--tto-ok: #3E8E5A;
	--tto-no: #C8442F;

	--tto-primary-tint: color-mix(in srgb, var(--tto-primary) 12%, transparent);
	--tto-ok-tint: color-mix(in srgb, var(--tto-ok) 10%, var(--tto-bg));
	--tto-no-tint: color-mix(in srgb, var(--tto-no) 9%, var(--tto-bg));
	--tto-sans: 'Roboto', Helvetica, Arial, sans-serif;
	--tto-condensed: 'Roboto Condensed', 'Roboto', Helvetica, Arial, sans-serif;

	max-width: 780px;
	margin: 0 auto;
	padding: 44px 48px 48px;
	background: var(--tto-bg);
	border-radius: 18px;
	box-shadow: 0 24px 60px -30px rgba(47, 47, 47, .35);
	font-family: var(--tto-sans);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--tto-text);
	box-sizing: border-box;
	text-align: left;
}
/* [taxatie_opdracht_form width="full"]: fill the parent container. */
.tto.tto--full {
	width: 100%;
	max-width: none;
}
.tto *, .tto *::before, .tto *::after { box-sizing: border-box; }
.tto [hidden] { display: none !important; }
.tto strong { font-weight: 500; }

/* Progress -------------------------------------------------------------- */
.tto .tto-progress {
	display: flex;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}
.tto .tto-progress li {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-family: var(--tto-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--tto-text) 55%, var(--tto-bg));
}
.tto .tto-progress li::before {
	content: '';
	position: absolute;
	top: 19px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--tto-border);
}
.tto .tto-progress li:first-child::before { display: none; }
.tto .tto-progress li span {
	position: relative;
	z-index: 1;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--tto-border);
	border-radius: 50%;
	background: var(--tto-bg);
	font-family: var(--tto-condensed);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0;
	transition: all .25s ease;
}
.tto .tto-progress li em { font-style: normal; }
.tto .tto-progress li.is-active { color: var(--tto-heading); }
.tto .tto-progress li.is-active span { background: var(--tto-primary); border-color: var(--tto-primary); color: #fff; box-shadow: 0 0 0 6px var(--tto-primary-tint); }
.tto .tto-progress li.is-done { color: var(--tto-primary); }
.tto .tto-progress li.is-done span { border-color: var(--tto-primary); color: var(--tto-primary); }
.tto .tto-progress li.is-done::before,
.tto .tto-progress li.is-active::before { background: var(--tto-primary); }

/* Steps ----------------------------------------------------------------- */
.tto .tto-step { display: none; animation: tto-fade .35s ease; }
.tto .tto-step.is-active { display: block; }
@keyframes tto-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tto .tto-title {
	margin: 0 0 6px;
	font-family: var(--tto-condensed);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tto-heading);
}
.tto .tto-title::before {
	content: '';
	display: block;
	width: 42px;
	height: 3px;
	margin-bottom: 16px;
	border-radius: 3px;
	background: var(--tto-primary);
}
.tto .tto-intro { margin: 14px 0 28px; color: var(--tto-text); }

/* Fields ---------------------------------------------------------------- */
.tto .tto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.tto .tto-grid--address { grid-template-columns: 2fr 1.3fr 1.3fr; }
.tto .tto-field--full { grid-column: 1 / -1; }
.tto .tto-grid--address .tto-field--wide { grid-column: 1 / 2; }
.tto .tto-grid--address .tto-field--rest { grid-column: 2 / -1; }
.tto .tto-field { display: flex; flex-direction: column; }
.tto .tto-field label {
	margin: 0 0 8px;
	font-family: var(--tto-sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tto-heading);
}
.tto .tto-optional { font-weight: 300; text-transform: none; letter-spacing: 0; color: var(--tto-text); }
.tto .tto-field input:not([type="checkbox"]):not([type="radio"]),
.tto .tto-field select,
.tto .tto-field textarea {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 13px 18px;
	border: 1px solid var(--tto-border);
	border-radius: 10px;
	background-color: var(--tto-soft);
	font-family: var(--tto-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--tto-heading);
	box-shadow: none;
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.tto .tto-field textarea { min-height: 120px; resize: vertical; }
.tto .tto-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2366717A' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}
.tto .tto-field select:disabled { opacity: .55; cursor: not-allowed; }
.tto .tto-field input:focus,
.tto .tto-field select:focus,
.tto .tto-field textarea:focus {
	outline: none;
	border-color: var(--tto-primary);
	background-color: var(--tto-bg);
	box-shadow: 0 0 0 4px var(--tto-primary-tint);
}
.tto .tto-field input::placeholder, .tto .tto-field textarea::placeholder { color: color-mix(in srgb, var(--tto-text) 60%, var(--tto-bg)); font-weight: 300; }
.tto .tto-field.has-error input,
.tto .tto-field.has-error select,
.tto .tto-field.has-error textarea { border-color: var(--tto-no); }
.tto .tto-error { margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--tto-no); }
.tto .tto-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Address card ---------------------------------------------------------- */
.tto .tto-address {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 22px;
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--tto-soft);
	border: 1px solid var(--tto-border);
	color: var(--tto-heading);
}
.tto .tto-address strong { display: block; font-weight: 500; }
.tto .tto-address small { display: block; color: var(--tto-text); font-size: 14px; }
.tto .tto-address.is-error { border-color: var(--tto-no); background: var(--tto-no-tint); color: var(--tto-no); }
.tto .tto-address--static { margin: 20px 0 24px; }
.tto .tto-address__icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tto-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3 2 12h3v8h6v-6h2v6h6v-8h3z'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Checks ---------------------------------------------------------------- */
.tto .tto-checks { list-style: none; margin: 0 0 24px; padding: 0; }
.tto .tto-checks li {
	position: relative;
	margin: 0;
	padding: 14px 0 14px 40px;
	border-bottom: 1px solid var(--tto-border);
	color: var(--tto-heading);
	font-weight: 400;
}
.tto .tto-checks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 13px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px;
}
.tto .tto-checks li.is-ok::before { background-color: var(--tto-ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }
.tto .tto-checks li.is-no::before { background-color: var(--tto-no); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E"); }

/* Debug ----------------------------------------------------------------- */
.tto .tto-debug {
	margin: 0 0 24px;
	padding: 20px;
	border: 2px dashed var(--tto-primary);
	border-radius: 12px;
	background: var(--tto-primary-tint);
}
.tto .tto-debug__label { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tto-heading); }
.tto .tto-debug__options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tto button.tto-choice {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	padding: 16px 18px;
	border: 2px solid var(--tto-border);
	border-radius: 12px;
	background: var(--tto-bg);
	color: var(--tto-heading);
	font-family: var(--tto-sans);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.tto button.tto-choice strong { font-family: var(--tto-condensed); font-size: 17px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.tto button.tto-choice small { color: var(--tto-text); font-size: 13px; font-weight: 300; }
.tto button.tto-choice:hover,
.tto button.tto-choice:focus { border-color: var(--tto-primary); background: var(--tto-bg); color: var(--tto-heading); }
.tto button.tto-choice.is-selected { border-color: var(--tto-primary); background: var(--tto-soft); }

/* Result boxes ---------------------------------------------------------- */
.tto .tto-result { padding: 22px 24px; margin: 0 0 8px; border-radius: 12px; }
.tto .tto-result h4 { margin: 0 0 6px; font-family: var(--tto-condensed); font-weight: 500; font-size: 21px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tto-heading); }
.tto .tto-result p { margin: 0; }
.tto .tto-result--ok { background: var(--tto-ok-tint); border: 1px solid color-mix(in srgb, var(--tto-ok) 35%, transparent); }
.tto .tto-result--no { background: var(--tto-no-tint); border: 1px solid color-mix(in srgb, var(--tto-no) 35%, transparent); }
.tto .tto-contact { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px !important; }
.tto .tto-contact a { color: var(--tto-primary); font-weight: 500; text-decoration: none; }

/* Summary --------------------------------------------------------------- */
.tto .tto-summary {
	display: grid;
	grid-template-columns: minmax(140px, 34%) 1fr;
	margin: 0 0 24px;
	border-top: 1px solid var(--tto-border);
}
.tto .tto-summary dt, .tto .tto-summary dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--tto-border); }
.tto .tto-summary dt { padding-right: 12px; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--tto-text); align-self: center; }
.tto .tto-summary dd { color: var(--tto-heading); font-weight: 400; overflow-wrap: anywhere; }
.tto .tto-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 26px;
	padding: 20px 24px;
	border-radius: 12px;
	background: var(--tto-heading);
	color: #fff;
}
.tto .tto-total span { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.tto .tto-total strong { font-family: var(--tto-condensed); font-weight: 500; font-size: 30px; letter-spacing: 1px; color: var(--tto-primary); }

.tto .tto-check { position: relative; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin: 0; cursor: pointer; font-size: 15px; color: var(--tto-text); letter-spacing: 0; text-transform: none; }
.tto .tto-check > span { flex: 1; }
.tto .tto-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tto-primary); }
.tto .tto-check .tto-error { flex-basis: 100%; margin-left: 32px; }
.tto .tto-check a { color: var(--tto-primary); font-size: inherit; font-weight: 400; }

/* Buttons (pill, uppercase – like the site's buttons) ------------------- */
.tto .tto-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; }
.tto .tto-actions .tto-btn:only-child { margin-left: auto; }
.tto .tto-actions--center { justify-content: center; }
.tto .tto-actions--center .tto-btn:only-child { margin: 0; }
.tto button.tto-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	margin: 0;
	padding: 16px 34px;
	border: 2px solid var(--tto-primary);
	border-radius: 30px;
	background: var(--tto-primary);
	color: #fff;
	font-family: var(--tto-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s, opacity .2s, transform .2s;
}
.tto button.tto-btn:hover,
.tto button.tto-btn:focus-visible { background: var(--tto-primary-hover); border-color: var(--tto-primary-hover); color: #fff; }
.tto button.tto-btn:disabled { opacity: .45; cursor: not-allowed; }
.tto button.tto-btn--ghost { background: transparent; color: var(--tto-heading); border-color: var(--tto-border); }
.tto button.tto-btn--ghost:hover,
.tto button.tto-btn--ghost:focus-visible { background: transparent; color: var(--tto-primary); border-color: var(--tto-primary); }
.tto .tto-ideal { width: 24px; height: 24px; flex: 0 0 24px; }
.tto button.is-loading { color: transparent !important; pointer-events: none; }
.tto button.is-loading > * { visibility: hidden; }
.tto button.is-loading::after,
.tto .tto-spinner {
	content: '';
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: tto-spin .7s linear infinite;
}
.tto button.is-loading::after { position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -9px; }
.tto button.tto-btn--ghost.is-loading::after,
.tto button.tto-choice.is-loading::after,
.tto .tto-spinner { border-color: var(--tto-border); border-top-color: var(--tto-primary); }
.tto .tto-spinner { display: inline-block; flex: 0 0 18px; }
@keyframes tto-spin { to { transform: rotate(360deg); } }

.tto .tto-alert {
	margin: 0 0 24px;
	padding: 14px 20px;
	border-radius: 10px;
	background: var(--tto-no-tint);
	border: 1px solid color-mix(in srgb, var(--tto-no) 35%, transparent);
	color: var(--tto-no);
	font-weight: 400;
}
.tto .tto-note { margin: 14px 0 0; font-size: 13px; color: var(--tto-text); text-align: right; }

/* Return page ----------------------------------------------------------- */
.tto .tto-done { text-align: center; }
.tto .tto-done .tto-title::before { margin-left: auto; margin-right: auto; }
.tto .tto-done .tto-summary { text-align: left; margin-top: 30px; }
.tto .tto-done .tto-note { text-align: center; }
.tto .tto-done__icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: var(--tto-primary);
	box-shadow: 0 0 0 10px var(--tto-primary-tint);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tto .tto-done__icon svg { width: 34px; height: 34px; fill: #fff; }

/* Mobile ---------------------------------------------------------------- */
@media (max-width: 640px) {
	.tto { padding: 30px 18px 32px; border-radius: 14px; }
	.tto .tto-title { font-size: 25px; letter-spacing: 1.5px; }
	.tto .tto-progress li { font-size: 10px; letter-spacing: 1px; }
	.tto .tto-progress li em { display: none; }
	.tto .tto-progress li.is-active em { display: block; }
	.tto .tto-grid { grid-template-columns: 1fr; }
	.tto .tto-grid--address { grid-template-columns: 1fr 1fr; }
	.tto .tto-grid--address .tto-field:first-child,
	.tto .tto-grid--address .tto-field--wide,
	.tto .tto-grid--address .tto-field--rest { grid-column: 1 / -1; }
	.tto .tto-debug__options { grid-template-columns: 1fr; }
	.tto .tto-actions { flex-direction: column-reverse; align-items: stretch; }
	.tto .tto-actions .tto-btn { width: 100%; }
	.tto .tto-summary { grid-template-columns: 1fr; }
	.tto .tto-summary dt { padding-bottom: 0; border-bottom: 0; }
	.tto .tto-summary dd { padding-top: 4px; }
	.tto .tto-total strong { font-size: 24px; }
}