/**
 * Carta adviestool.
 *
 * De opmaak volgt de productkaarten op cartaonline.nl: witte kaart met ronde
 * hoeken en een zachte schaduw, de productnaam in een groene banner met een
 * punt eronder, kenmerken met groene vinkjes, en een knop over de volle breedte.
 *
 * De kleuren staan als variabelen bovenaan, met de merkkleuren van de site als
 * standaard. Een thema dat andere kleuren gebruikt hoeft alleen die variabelen
 * te overschrijven en niets van de rest.
 */

.cr-advisor {
	--cr-green: #53af31;
	--cr-green-dark: #47962a;
	--cr-purple: #4e1965;
	--cr-ink: #1e1e28;
	--cr-tint: #f9fff4;
	--cr-line: #e6e6ea;
	--cr-radius: 14px;
	--cr-gap: 1rem;

	display: grid;
	gap: calc( var( --cr-gap ) * 1.5 );
	max-width: 46rem;
	color: var( --cr-ink );
}

.cr-advisor__heading {
	margin: 0;
}

.cr-advisor__intro p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- vragen */

.cr-advisor__form {
	display: grid;
	gap: var( --cr-gap );
	margin: 0;
}

.cr-advisor__question {
	border: 1px solid var( --cr-line );
	border-radius: var( --cr-radius );
	padding: var( --cr-gap ) calc( var( --cr-gap ) * 1.25 );
	margin: 0;
	background: #fff;
}

.cr-advisor__legend {
	font-weight: 700;
	padding: 0 0.35rem;
}

.cr-advisor__hint {
	margin: 0 0 0.75rem;
	font-size: 0.9em;
	color: #5b5b66;
}

.cr-advisor__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Antwoorden als aanklikbare pillen: op een telefoon is een radiorondje van
   twaalf pixels geen doelwit, het hele label wel. */
.cr-advisor__option {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border: 1px solid var( --cr-line );
	border-radius: 999px;
	padding: 0.45rem 0.95rem;
	cursor: pointer;
	line-height: 1.2;
	background: #fff;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cr-advisor__option:hover {
	border-color: var( --cr-green );
	background: var( --cr-tint );
}

.cr-advisor__option:focus-within {
	outline: 2px solid var( --cr-green );
	outline-offset: 2px;
}

.cr-advisor__option:has( input:checked ) {
	border-color: var( --cr-green );
	background: var( --cr-tint );
	font-weight: 700;
}

/* --------------------------------------------------------------- de kaart */

.cr-card {
	position: relative;
	background: #fff;
	border: 1px solid var( --cr-line );
	border-radius: var( --cr-radius );
	box-shadow: 0 8px 24px rgba( 30, 30, 40, 0.08 );
	padding: calc( var( --cr-gap ) * 1.5 );
	max-width: 24rem;
}

/* "Meest gebruikt", zoals het label boven de middelste kaart op de site. */
.cr-card__badge {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var( --cr-purple );
	color: #fff;
	font-size: 0.75em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* De groene banner met de punt eronder. Nagebouwd met CSS in plaats van met de
   afbeelding van de site: scherp op elk scherm en meebuigend met de tekst. */
.cr-card__banner {
	position: relative;
	display: inline-block;
	margin: 0 0 calc( var( --cr-gap ) * 1.75 );
	padding: 0.6rem 1.6rem 0.6rem 1.1rem;
	background: var( --cr-green );
	color: #fff;
	font-size: 1.35em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.1;
}

.cr-card__banner::after {
	content: "";
	position: absolute;
	left: 1.1rem;
	top: 100%;
	width: 1.5rem;
	height: 0.9rem;
	background: var( --cr-green );
	opacity: 0.75;
	clip-path: polygon( 0 0, 100% 0, 0 100% );
}

.cr-card__body {
	margin: 0 0 var( --cr-gap );
}

.cr-card__body p:last-child {
	margin-bottom: 0;
}

.cr-card__features {
	list-style: none;
	margin: 0 0 calc( var( --cr-gap ) * 1.5 );
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.cr-card__features li {
	position: relative;
	padding-left: 2rem;
	line-height: 1.35;
}

/* Het vinkje: twee lijnen in de merkkleur, dus geen icoonfont of afbeelding
   nodig en niets dat kan ontbreken na een update. */
.cr-card__features li::before {
	content: "";
	position: absolute;
	left: 0.35rem;
	top: 0.15em;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 3px solid var( --cr-green );
	border-bottom: 3px solid var( --cr-green );
	transform: rotate( -45deg );
}

.cr-card__cta {
	display: block;
	background: var( --cr-green );
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	padding: 0.8rem 1rem;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

.cr-card__cta:hover,
.cr-card__cta:focus {
	background: var( --cr-green-dark );
	color: #fff;
	text-decoration: none;
}

.cr-advisor__error {
	margin: 0;
	font-size: 0.95em;
	color: #5b5b66;
}

/* De lege plek waar het advies komt. Zelfde vorm en breedte als de echte
   kaart, met een gestippelde rand: de bezoeker ziet dat daar iets verschijnt,
   en de pagina verspringt niet op het moment dat het advies er staat. */
.cr-card--placeholder {
	display: grid;
	place-items: center;
	min-height: 20rem;
	border: 2px dashed var( --cr-line );
	box-shadow: none;
	background: var( --cr-tint );
	text-align: center;
}

.cr-card--placeholder p {
	margin: 0;
	color: #7a7a86;
	font-size: 1.05em;
}

/* --------------------------------------------------------- advies mailen */

/* Het attribuut hidden moet het winnen van de display hieronder. De regel
   [hidden] { display: none } uit de browser is minder specifiek dan een
   klasseselector, dus zonder deze regel staat het e-mailformulier vanaf de
   eerste paginalading open: de bezoeker vult het dan in vóórdat er een advies
   is, en krijgt "Vul eerst de vragen in" terug. */
.cr-advisor__lead[hidden] {
	display: none;
}

.cr-advisor__lead {
	display: grid;
	gap: 0.6rem;
	background: var( --cr-tint );
	border: 1px solid var( --cr-line );
	border-radius: var( --cr-radius );
	padding: calc( var( --cr-gap ) * 1.25 );
	max-width: 24rem;
}

.cr-advisor__lead-intro {
	margin: 0;
	font-weight: 700;
}

.cr-advisor__field {
	display: grid;
	gap: 0.25rem;
}

.cr-advisor__field input {
	width: 100%;
}

.cr-advisor__consent {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-size: 0.95em;
}

.cr-advisor__submit {
	justify-self: start;
	background: var( --cr-green );
	border: 0;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	font-weight: 700;
	padding: 0.7rem 1.2rem;
}

.cr-advisor__submit:hover {
	background: var( --cr-green-dark );
}

.cr-advisor__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.cr-advisor__lead-feedback:empty {
	display: none;
}

.cr-advisor__lead-feedback {
	margin: 0;
	font-size: 0.95em;
}