/* Rekentools eigen-bedrijf-starten.com. Standaardopmaak volgt de Blocksy-palette;
   alles is per widget te overschrijven via het Stijl-tabblad in Elementor. */

.ebs-calc {
	--ebs-ink: var(--theme-palette-color-4, #16202c);
	--ebs-soft: #5c6774;
	--ebs-line: var(--theme-palette-color-5, #e1e5ea);
	--ebs-accent: var(--theme-palette-color-1, #0f7a5c);
	--ebs-accent-dark: var(--theme-palette-color-2, #0b5d45);
	--ebs-tint: #e3f3ec;
	background: #fff;
	border: 1px solid var(--ebs-line);
	border-radius: 6px;
	padding: 28px;
	color: var(--ebs-ink);
}

.ebs-calc__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.ebs-calc__field {
	min-width: 0;
}

.ebs-calc__field--wide {
	grid-column: 1 / -1;
}

.ebs-calc__label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ebs-ink);
}

.ebs-calc__control {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--ebs-line);
	border-radius: 6px;
	padding: 0 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ebs-calc__control:focus-within {
	border-color: var(--ebs-accent);
	box-shadow: 0 0 0 1px var(--ebs-accent);
}

/* !important: Blocksy geeft formuliervelden een eigen rand/achtergrond; de
   rand zit hier op .ebs-calc__control (instelbaar in Elementor). */
.ebs-calc .ebs-calc__control input,
.ebs-calc .ebs-calc__control select {
	flex: 1;
	min-width: 0;
	width: auto !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: inherit;
	outline: none;
}

.ebs-calc .ebs-calc__control select {
	padding-right: 20px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316202c' stroke-width='1.6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 2px center !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.ebs-calc__unit {
	padding-left: 8px;
	color: var(--ebs-soft);
	font-size: 15px;
}

.ebs-calc__help {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ebs-soft);
}

/* Volle breedte voor de widget: anders rekent Chrome in een Elementor-kolom
   met flex-wrap de hoogte uit op een smallere breedte (witruimte eronder). */
.elementor-widget:has(.ebs-calc) {
	width: 100%;
}

.ebs-calc [hidden] {
	display: none !important;
}

.ebs-calc__prefix {
	padding-right: 8px;
	color: var(--ebs-soft);
	font-size: 16px;
}

.ebs-calc__results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-top: 24px;
}

.ebs-calc__result {
	background: var(--ebs-tint);
	border: 1px solid var(--ebs-accent);
	border-radius: 6px;
	padding: 16px 18px;
}

.ebs-calc__result-label {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	color: var(--ebs-soft);
}

.ebs-calc__result-value {
	margin: 6px 0 0;
	font-family: Outfit, sans-serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--ebs-accent-dark);
}

.ebs-calc__result--wide {
	grid-column: 1 / -1;
}

/* Keuzehulpen: advies + toelichting */
.ebs-calc--rechtsvorm .ebs-calc__result,
.ebs-calc--rekening .ebs-calc__result {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ebs-calc__advies {
	padding: 4px 18px 18px;
	background: var(--ebs-tint);
	border: 1px solid var(--ebs-accent);
	border-top: 0;
	border-radius: 0 0 6px 6px;
	color: var(--ebs-accent-dark);
	font-size: 16px;
	line-height: 1.55;
}

.ebs-calc__advies p {
	margin: 0 0 10px;
}

.ebs-calc__advies ul {
	margin: 0;
	padding-left: 20px;
}

.ebs-calc__advies li {
	margin: 4px 0;
}

.ebs-calc__melding {
	margin: 16px 0 0;
	padding: 14px 16px;
	background: var(--theme-palette-color-6, #f6f7f9);
	border-radius: 6px;
	font-size: 15px;
	color: var(--ebs-soft);
}

.ebs-calc__result-unit {
	font-size: .5em;
	font-weight: 500;
	color: var(--ebs-soft);
}

.ebs-calc__table-wrap {
	margin-top: 24px;
	overflow-x: auto;
}

.ebs-calc__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.ebs-calc__table th,
.ebs-calc__table td {
	padding: 9px 12px 9px 0;
	border: 0;
	border-bottom: 1px solid var(--ebs-line);
	text-align: left;
	white-space: nowrap;
	background: transparent;
}

.ebs-calc__table th {
	font-size: 13px;
	font-weight: 500;
	color: var(--ebs-soft);
}

.ebs-calc__table td:first-child {
	font-weight: 600;
}

.ebs-calc__table tbody tr:last-child td {
	border-bottom: 0;
}

.ebs-calc__note {
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--ebs-soft);
}

@media (max-width: 640px) {
	.ebs-calc {
		padding: 20px;
	}

	.ebs-calc__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.ebs-calc__result-value {
		font-size: 26px;
	}
}

/* Tabellen in tekstwidgets met CSS-klasse "ebs-tabel" (bijv. lengtetabel framemaat) */
div.ebs-tabel,
.ebs-tabel .elementor-widget-container,
.ebs-tabel.elementor-widget-text-editor {
	overflow-x: auto;
}

.ebs-tabel table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

.ebs-tabel th,
.ebs-tabel td {
	padding: 10px 14px 10px 0;
	border: 0;
	border-bottom: 1px solid var(--theme-palette-color-5, #e1e5ea);
	text-align: left;
	white-space: nowrap;
	background: transparent;
}

.ebs-tabel th {
	font-size: 14px;
	font-weight: 600;
	color: #5c6774;
	white-space: normal;
	vertical-align: bottom;
	border-bottom-color: var(--theme-palette-color-4, #16202c);
}

@media (max-width: 640px) {
	.ebs-tabel table {
		font-size: 14px;
	}

	.ebs-tabel th,
	.ebs-tabel td {
		padding-right: 10px;
	}
}

/* Box "Bereken het zelf" onder gekoppelde artikelen */
.ebs-tool-tip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin: 40px 0 0;
	padding: 20px 22px;
	background: #e3f3ec;
	border: 1px solid var(--theme-palette-color-5, #e1e5ea);
	border-radius: 6px;
}

.ebs-tool-tip p {
	margin: 0;
}

.ebs-tool-tip__title {
	font-family: Outfit, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.ebs-tool-tip .ebs-tool-tip__button {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 6px;
	background: var(--theme-palette-color-1, #0f7a5c);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.ebs-tool-tip .ebs-tool-tip__button:hover {
	background: var(--theme-palette-color-2, #0b5d45);
	color: #fff;
}

/* Kleine toelichting/disclaimer in tekstwidgets */
.ebs-klein {
	font-size: 14px;
	color: #5c6774;
}

/* Tabellen in artikelen: tekst mag afbreken; rijkoppen (tbody th) als gewone rij */
.ebs-tabel td {
	white-space: normal;
	vertical-align: top;
}

.ebs-tabel tbody th {
	width: 38%;
	vertical-align: top;
	border-bottom-color: var(--theme-palette-color-5, #e1e5ea);
	color: #16202c;
}

.ebs-tabel tbody tr:last-child th,
.ebs-tabel tbody tr:last-child td {
	border-bottom: 0;
}

/* ---- Quiz "Welk bedrijf past bij mij?" ------------------------------------ */

.ebs-quiz {
	--ebs-ink: var(--theme-palette-color-4, #16202c);
	--ebs-soft: #5c6774;
	--ebs-line: var(--theme-palette-color-5, #e1e5ea);
	--ebs-accent: var(--theme-palette-color-1, #0f7a5c);
	--ebs-accent-dark: var(--theme-palette-color-2, #0b5d45);
	--ebs-tint: #e3f3ec;
	background: #fff;
	border: 1px solid var(--ebs-line);
	border-radius: 6px;
	padding: 28px;
	color: var(--ebs-ink);
}

.elementor-widget:has(.ebs-quiz) {
	width: 100%;
}

.ebs-quiz__vraag {
	margin: 0 0 26px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ebs-quiz__vraag legend {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.ebs-quiz__nr {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ebs-tint);
	color: var(--ebs-accent-dark);
	font-size: 14px;
}

.ebs-quiz__opties {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ebs-quiz__optie {
	position: relative;
	cursor: pointer;
	margin: 0;
}

.ebs-quiz__optie input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ebs-quiz__optie span {
	display: inline-block;
	padding: 9px 14px;
	border: 1px solid var(--ebs-line);
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
	line-height: 1.3;
	transition: border-color .15s ease, background-color .15s ease;
}

.ebs-quiz__optie:hover span {
	border-color: var(--ebs-accent);
}

.ebs-quiz__optie input:checked + span {
	background: var(--ebs-tint);
	border-color: var(--ebs-accent);
	color: var(--ebs-accent-dark);
	font-weight: 600;
}

.ebs-quiz__optie input:focus-visible + span {
	outline: 2px solid var(--ebs-accent);
	outline-offset: 2px;
}

.ebs-quiz__fout {
	margin: 0 0 12px;
	color: #b42318;
	font-weight: 600;
}

.ebs-quiz__knop,
.ebs-quiz__opnieuw {
	display: inline-block;
	padding: 13px 22px;
	border: 1px solid var(--ebs-accent);
	border-radius: 6px;
	background: var(--ebs-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.ebs-quiz__knop:hover {
	background: var(--ebs-accent-dark);
	border-color: var(--ebs-accent-dark);
}

.ebs-quiz__opnieuw {
	background: #fff;
	color: var(--ebs-accent-dark);
}

.ebs-quiz__titel {
	margin: 0 0 16px;
	font-size: 24px;
}

.ebs-quiz__lijst {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	counter-reset: idee;
	display: grid;
	gap: 12px;
}

.ebs-quiz__idee {
	counter-increment: idee;
	position: relative;
	margin: 0;
	padding: 16px 18px 16px 58px;
	border: 1px solid var(--ebs-line);
	border-radius: 6px;
}

.ebs-quiz__idee::before {
	content: counter(idee);
	position: absolute;
	left: 18px;
	top: 16px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ebs-accent);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
}

.ebs-quiz__naam {
	font-size: 19px;
	font-weight: 600;
	color: var(--ebs-ink);
	text-decoration: none;
}

.ebs-quiz__naam:hover {
	color: var(--ebs-accent);
}

.ebs-quiz__waarom,
.ebs-quiz__meta {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--ebs-soft);
}

.ebs-quiz__lees {
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
	color: var(--ebs-accent);
}

.ebs-quiz__opmerking {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--ebs-soft);
}

@media (max-width: 767px) {
	.ebs-quiz {
		padding: 20px 16px;
	}
	.ebs-quiz__idee {
		padding-left: 52px;
	}
	.ebs-quiz__idee::before {
		left: 14px;
	}
}

.ebs-quiz__letop {
	margin: 6px 0 0;
	font-size: 14px;
	color: #9a6700;
}

/* Vinkjes (factuur-checker) */
.ebs-calc__field--check + .ebs-calc__field--check {
	margin-top: -8px;
}

.ebs-calc__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
}

.ebs-calc .ebs-calc__check input {
	flex: none;
	width: 20px !important;
	height: 20px !important;
	margin: 1px 0 0 !important;
	accent-color: var(--ebs-accent);
}

/* ---- Ideeëntabel (/ideeen/): op mobiel elke rij als kaartje ---------------- */
.ebs-tabel--ideeen .ebs-tabel__naam a {
	font-weight: 600;
}

@media (max-width: 767px) {
	div.ebs-tabel--ideeen {
		overflow: visible;
	}

	.ebs-tabel--ideeen table,
	.ebs-tabel--ideeen tbody,
	.ebs-tabel--ideeen tr,
	.ebs-tabel--ideeen td {
		display: block;
		width: 100%;
	}

	.ebs-tabel--ideeen thead {
		display: none;
	}

	.ebs-tabel--ideeen tbody {
		display: grid;
		gap: 10px;
	}

	.ebs-tabel--ideeen tr {
		padding: 14px 16px;
		background: #fff;
		border: 1px solid var(--theme-palette-color-5, #e1e5ea);
		border-radius: 6px;
	}

	.ebs-tabel--ideeen td,
	.ebs-tabel--ideeen tbody tr:last-child td {
		display: flex;
		gap: 12px;
		padding: 5px 0;
		border: 0;
		font-size: 15px;
		line-height: 1.4;
	}

	.ebs-tabel--ideeen td::before {
		content: attr(data-label);
		flex: 0 0 40%;
		color: #5c6774;
		font-size: 14px;
	}

	.ebs-tabel--ideeen td.ebs-tabel__naam {
		padding: 0 0 8px;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--theme-palette-color-5, #e1e5ea);
		font-size: 18px;
	}

	.ebs-tabel--ideeen td.ebs-tabel__naam::before {
		content: none;
	}
}