/* Pictogram tiles for the service choice in the Novax quote forms (assets/js/formulier-tegels.js) */

/* The question above the tiles: swapped through CSS (React keeps its own text node) */
[data-eba-formtegels] [data-vraag] { font-size: 0 !important; }
[data-eba-formtegels] [data-vraag]::before { content: attr(data-vraag); font-size: 0.9375rem; }
/* Several services possible (full form, or the compact form with "Meerdere keuzes in compact"): a hint under the question */
[data-eba-formtegels] [data-meer]::after {
	content: attr(data-meer); display: block; margin-top: 2px; font: 400 0.8125rem/1.4 var(--eba-font-tekst); color: var(--eba-gedempt);
}

.eba-ft__verborgen {
	position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important;
	margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important;
}
.eba-ft__gratis { font-weight: 600; color: var(--eba-tekst); }

/* Shared tile look: compact form (our buttons) and Novax toggle buttons */
.eba-ft__tegels,
[data-eba-formtegels] [data-eba-tegelgroep] {
	display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important;
}
.eba-ft__tegel,
[data-eba-formtegels] [data-eba-tegelgroep] > button {
	position: relative; display: grid !important; justify-items: center; align-content: center; gap: 8px; min-height: 96px; margin: 0; cursor: pointer;
	padding: 12px 4px 10px !important; border: 1.5px solid var(--nxb-input-border, #C9D0DC) !important; border-radius: 10px !important;
	background: #fff !important; color: var(--eba-donker) !important; box-shadow: none;
	font: 600 0.78125rem/1.2 var(--eba-font-tekst) !important; text-align: center; hyphens: manual; overflow-wrap: break-word;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
/* Pictogram: our span in the single-choice form, a ::before on Novax's buttons (CSS from inc/novax.php) */
.eba-ft__picto,
[data-eba-formtegels] [data-eba-tegelgroep] > button::before {
	content: ""; display: block; width: 40px; height: 40px; background: var(--eba-pic, none) center / contain no-repeat;
}
.eba-ft__naam { display: block; }

.eba-ft__tegel:hover,
[data-eba-formtegels] [data-eba-tegelgroep] > button:hover { border-color: var(--eba-primair) !important; }

/* Chosen: dark tile, white lines and name, blue check badge top right */
.eba-ft__tegel[aria-checked="true"],
[data-eba-formtegels] [data-eba-tegelgroep] > button[aria-pressed="true"] {
	background: var(--eba-donker) !important; border-color: var(--eba-donker) !important; color: #fff !important;
}
.eba-ft__tegel[aria-checked="true"] .eba-ft__picto,
[data-eba-formtegels] [data-eba-tegelgroep] > button[aria-pressed="true"]::before { background-image: var(--eba-pic-aan, var(--eba-pic, none)); }
.eba-ft__tegel[aria-checked="true"]::after,
[data-eba-formtegels] [data-eba-tegelgroep] > button[aria-pressed="true"]::after {
	content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--eba-primair) no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.eba-ft__tegel:focus-visible,
[data-eba-formtegels] [data-eba-tegelgroep] > button:focus-visible { outline: 3px solid var(--eba-primair); outline-offset: 2px; }

/* Narrow phones: smaller pictograms, still three per row */
@media (max-width: 22.499em) {
	.eba-ft__tegel,
	[data-eba-formtegels] [data-eba-tegelgroep] > button { min-height: 86px; font-size: 0.71875rem !important; }
	.eba-ft__picto,
	[data-eba-formtegels] [data-eba-tegelgroep] > button::before { width: 34px; height: 34px; }
}

/* Single-choice buttons (e.g. "Wanneer wil je starten?"): pills side by side, chosen = dark */
[data-eba-formtegels] div:has(> [role="radiogroup"][id$="-start"]) { grid-column: 1 / -1 !important; }
[data-eba-formtegels] [role="radiogroup"] { gap: 8px !important; }
[data-eba-formtegels] [role="radiogroup"] > button[role="radio"] {
	min-height: 40px; padding: 0 14px !important; border: 1.5px solid var(--nxb-input-border, #C9D0DC) !important; border-radius: 999px !important;
	background: #fff !important; color: var(--eba-donker) !important; font: 600 0.84375rem/1.2 var(--eba-font-tekst) !important; box-shadow: none !important;
}
[data-eba-formtegels] [role="radiogroup"] > button[role="radio"]:hover { border-color: var(--eba-primair) !important; }
[data-eba-formtegels] [role="radiogroup"] > button[role="radio"][aria-checked="true"] {
	background: var(--eba-donker) !important; border-color: var(--eba-donker) !important; color: #fff !important;
}

/* Postcode inside the service area: a blue line with a check (Novax sets data-nxb-gebied) */
[data-eba-formtegels] [data-nxb-gebied="binnen"] {
	position: relative; padding-left: 28px !important; color: var(--eba-link, #1f4fae) !important; font-weight: 500;
}
[data-eba-formtegels] [data-nxb-gebied="binnen"]::before {
	content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--eba-primair) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Back and next button stay on one row, also on phones (Novax gives the next button min-width: 12em) */
[data-eba-formtegels] form button[type="submit"] { min-width: 0 !important; }