/* Adviesgesprek-flow (SPEC-adviesgesprek.md B1/B2/B3, R3 2026-08-14).
   Maten/kleuren 1-op-1 uit Adviesgesprek Definitief.dc.html: 2 koloms 1.05fr/0.95fr met 36px gap,
   witte gegevenskaart radius 20, beige terugbelblok radius 16, magenta verzendknop. */

.amerikanu-advies {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 30px 24px 56px;
}

.amerikanu-advies__kolommen {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 36px;
	align-items: start;
}

/* Grid-items krijgen standaard min-width:auto: zonder deze reset rekt de horizontaal scrollende
   dagenrij (tot 15 dagen à 64px) de linkerkolom op tot zijn min-content-breedte en duwt de
   gegevenskaart buiten beeld. */
.amerikanu-advies__links,
.amerikanu-advies__gegevens {
	min-width: 0;
}

.amerikanu-advies__eyebrow {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--magenta);
}

.amerikanu-advies h1 {
	margin: 0 0 10px;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--navy);
}

.amerikanu-advies__lead {
	margin: 0 0 24px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--body);
	max-width: 460px;
}

.amerikanu-advies__fout {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #FDECF2;
	border: 1px solid rgba(230, 44, 107, 0.25);
	font-size: 14px;
	font-weight: 600;
	color: #A3164A;
}

.amerikanu-advies__vraag {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--body);
}

/* -- kanaalkeuze ------------------------------------------------------------------------------ */
.amerikanu-advies__kanalen {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 22px;
}

.amerikanu-advies__kanaal input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.amerikanu-advies__kanaal-kaart {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 16px;
	border: 1.5px solid var(--rand-input);
	border-radius: 16px;
	background: var(--card);
	cursor: pointer;
	transition: border-color var(--motion), box-shadow var(--motion);
}

.amerikanu-advies__kanaal-icoon {
	color: var(--muted);
}

.amerikanu-advies__kanaal-titel {
	font-size: 15px;
	font-weight: 800;
	color: var(--navy);
}

.amerikanu-advies__kanaal-sub {
	font-size: 12px;
	line-height: 1.4;
	color: var(--muted);
}

.amerikanu-advies__kanaal input:checked + .amerikanu-advies__kanaal-kaart {
	border-color: var(--magenta);
	box-shadow: 0 0 0 1px var(--magenta) inset;
}

.amerikanu-advies__kanaal input:checked + .amerikanu-advies__kanaal-kaart .amerikanu-advies__kanaal-icoon {
	color: var(--magenta);
}

.amerikanu-advies__kanaal input:focus-visible + .amerikanu-advies__kanaal-kaart {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

/* -- B1: wanneer schikt het? (alleen bij bellen) ------------------------------------------------ */
/* R3-bijstelling (David 2026-08-17): het oude terugbelblok bood alleen "z.s.m.". Wie liever aan het
   eind van de dag gebeld wordt, kan nu een moment doorgeven — dezelfde tijdkiezer als de andere
   kanalen. */
.amerikanu-advies__wanneer {
	margin-bottom: 22px;
}

.amerikanu-advies__wanneer-keuze {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.amerikanu-advies__wanneer-optie input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.amerikanu-advies__wanneer-optie > span {
	display: block;
	height: 100%;
	padding: 14px 16px;
	background: var(--beige);
	border: 1.5px solid transparent;
	border-radius: 16px;
	cursor: pointer;
	transition: border-color var(--motion);
}

.amerikanu-advies__wanneer-optie input:checked + span {
	border-color: var(--navy);
}

.amerikanu-advies__wanneer-optie input:focus-visible + span {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

.amerikanu-advies__wanneer-titel {
	display: block;
	font-size: 15px;
	font-weight: 800;
	margin-bottom: 2px;
	color: var(--navy);
}

.amerikanu-advies__wanneer-sub {
	display: block;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--body);
}

/* -- B2: agenda ------------------------------------------------------------------------------- */
.amerikanu-advies__agenda {
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: 18px;
	padding: 20px 22px;
}

.amerikanu-advies__agenda-kop {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
	color: var(--navy);
}

.amerikanu-advies__agenda-titel {
	font-size: 15px;
	font-weight: 800;
}

.amerikanu-advies__agenda-sub,
.amerikanu-advies__agenda-leeg {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--muted);
}

.amerikanu-advies__agenda-leeg {
	margin: 0;
}

/* Maandkeuze boven de dagenrij (David, voorstel 09-09). Het pil-uiterlijk zelf (reset, kleuren,
   actief/focus-status) komt nu uit het gedeelde .amerikanu-pillen/.amerikanu-pil-component
   (componenten.css, maandfix 10-09) — .amerikanu-advies__maand staat er in de markup alleen nog
   naast voor de data-advies-maand-haak in JS, geen eigen visuele regels meer nodig hier. */

.amerikanu-advies__dagen {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.amerikanu-advies__dag {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 64px;
	padding: 10px 0;
	border: 1.5px solid var(--rand-input);
	border-radius: 14px;
	background: var(--card);
	font-family: var(--font);
	cursor: pointer;
	transition: border-color var(--motion), background var(--motion);
}

/* Maandkeuze-fix 10-09: zonder deze regel wint "display: flex" hierboven het van de browser-eigen
   [hidden]{display:none} — zelfde specificiteit (één klasse tegen één attribuutselector), maar
   deze regel komt later in de cascade, dus bleven álle dagknoppen zichtbaar (de dagenrij scrolde
   nog steeds horizontaal door alle 90 dagen) ook al zette de maandfilter in JS/PHP het hidden-
   attribuut wél goed. */
.amerikanu-advies__dag[hidden] {
	display: none;
}

.amerikanu-advies__dag-weekdag,
.amerikanu-advies__dag-maand {
	font-size: 11px;
	font-weight: 700;
	color: var(--muted);
}

.amerikanu-advies__dag-nummer {
	font-size: 18px;
	font-weight: 800;
	color: var(--navy);
}

.amerikanu-advies__dag.is-actief {
	border-color: var(--navy);
	background: var(--beige);
}

.amerikanu-advies__slotkop {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--body);
}

.amerikanu-advies__slots {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.amerikanu-advies__slot input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.amerikanu-advies__slot span {
	display: block;
	padding: 10px 0;
	text-align: center;
	border: 1.5px solid var(--rand-input);
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	background: var(--card);
	cursor: pointer;
	transition: border-color var(--motion), background var(--motion), color var(--motion);
}

.amerikanu-advies__slot input:checked + span {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.amerikanu-advies__slot input:focus-visible + span {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

/* -- gegevenskaart ---------------------------------------------------------------------------- */
.amerikanu-advies__gegevens {
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: 20px;
	padding: 24px;
}

.amerikanu-advies__gegevens-kop {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 800;
	color: var(--navy);
}

.amerikanu-advies__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.amerikanu-advies__gegevens label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.amerikanu-advies__gegevens label > span {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--body);
}

.amerikanu-advies__gegevens input,
.amerikanu-advies__gegevens textarea {
	/* Zonder expliciete breedte houdt een <input> zijn eigen intrinsieke maat (±20 tekens) aan en
	   steekt hij op smalle schermen buiten de kaart uit — gemeten 15px op 390px. */
	width: 100%;
	font-family: var(--font);
	font-size: 15px;
	font-weight: 500;
	padding: 13px 16px;
	border: 1.5px solid var(--rand-input);
	background: var(--card);
	color: var(--navy);
	border-radius: 12px;
	box-sizing: border-box;
}

.amerikanu-advies__gegevens textarea {
	resize: vertical;
	min-height: 92px;
}

.amerikanu-advies__gegevens input:focus,
.amerikanu-advies__gegevens textarea:focus {
	outline: none;
	border-color: var(--navy);
}

.amerikanu-advies__droom {
	margin-top: 12px;
}

.amerikanu-advies__samenvatting {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--beige);
	border-radius: 12px;
	padding: 11px 14px;
	margin: 14px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--navy);
}

.amerikanu-advies__samenvatting-vink {
	color: #2E7D5B;
	display: inline-flex;
}

.amerikanu-advies__verzend {
	width: 100%;
	margin-top: 14px;
	padding: 15px 0;
	font-size: 15px;
}

.amerikanu-advies__verzend-sub {
	text-align: center;
	font-size: 12.5px;
	color: var(--muted);
	margin: 10px 0 0;
}

/* -- B3: bevestiging -------------------------------------------------------------------------- */
.amerikanu-advies__klaar {
	max-width: 580px;
	margin: 0 auto;
	text-align: center;
	padding: 22px 0 26px;
}

.amerikanu-advies__vink {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: var(--radius-pill);
	background: #E9F3EE;
	display: grid;
	place-items: center;
	color: #2E7D5B;
}

.amerikanu-advies__klaar .amerikanu-advies__lead {
	max-width: none;
	font-size: 16px;
	margin-bottom: 26px;
}

.amerikanu-advies__afspraak {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: 18px;
	padding: 18px 22px;
	text-align: left;
	margin-bottom: 26px;
	box-shadow: 0 12px 30px -20px rgba(30, 46, 90, 0.25);
}

.amerikanu-advies__afspraak-icoon {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 14px;
	background: var(--beige);
	display: grid;
	place-items: center;
	color: var(--navy);
}

.amerikanu-advies__afspraak-tekst {
	flex: 1;
}

.amerikanu-advies__afspraak-titel {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: var(--navy);
}

.amerikanu-advies__afspraak-sub {
	display: block;
	font-size: 13.5px;
	color: var(--muted);
}

.amerikanu-advies__agendaknop {
	flex: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--navy);
	border: 1.5px solid rgba(30, 46, 90, 0.2);
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	text-decoration: none;
}

.amerikanu-advies__agendaknop:hover,
.amerikanu-advies__agendaknop:focus-visible {
	background: var(--beige);
}

.amerikanu-advies__wijzigen {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font-size: 13.5px;
	color: var(--muted);
}

.amerikanu-advies__wijzigen a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.amerikanu-advies__wijzigen a svg {
	color: var(--magenta);
}

/* -- mobiel (design-frame 390px) -------------------------------------------------------------- */
@media (max-width: 899px) {
	.amerikanu-advies {
		padding: 18px 16px 28px;
	}

	.amerikanu-advies__kolommen {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.amerikanu-advies h1 {
		font-size: 23px;
	}

	.amerikanu-advies__lead {
		font-size: 14px;
		margin-bottom: 18px;
	}

	/* Design-frame B1/B2 mobiel: de drie kanalen staan onder elkaar als rijen, niet als kaarten. */
	.amerikanu-advies__kanalen {
		grid-template-columns: 1fr;
		gap: 8px;
		margin-bottom: 18px;
	}

	.amerikanu-advies__kanaal-kaart {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		padding: 13px 14px;
	}

	.amerikanu-advies__kanaal-titel {
		font-size: 14.5px;
	}

	.amerikanu-advies__kanaal-sub {
		margin-left: auto;
		text-align: right;
	}

	.amerikanu-advies__wanneer-keuze {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.amerikanu-advies__agenda,
	.amerikanu-advies__gegevens {
		padding: 16px;
		border-radius: 16px;
	}

	.amerikanu-advies__slots {
		grid-template-columns: repeat(3, 1fr);
		gap: 7px;
	}

	.amerikanu-advies__afspraak {
		flex-wrap: wrap;
	}

	.amerikanu-advies__agendaknop {
		width: 100%;
		text-align: center;
	}
}

/* -- overlay-context (?overlay=1, de pop-up uit componenten.js) ----------------------------------
   Geen sitewide header/footer maar de afgeschermde topbar uit het frame: wit, logo 32px hoog
   (Adviesgesprek Definitief.dc.html, topbar) op de #FAFAF7-kaart (SPEC "logo only"). */
body.amerikanu-advies-overlay-body {
	margin: 0;
	background: #FAFAF7;
}
.amerikanu-advies-topbar {
	display: flex;
	align-items: center;
	min-height: 64px;
	padding: 16px 40px;
	background: #fff;
	border-bottom: 1px solid rgba(30, 46, 90, 0.08);
}
.amerikanu-advies-topbar__logo {
	display: block;
	height: 32px;
	width: auto;
}
.amerikanu-advies-topbar__naam {
	font-weight: 800;
	color: var(--navy);
}
@media (max-width: 700px) {
	.amerikanu-advies-topbar {
		min-height: 56px;
		padding: 12px 20px 12px 20px;
		padding-right: 64px; /* ruimte voor de sluitknop van de pop-up */
	}
	.amerikanu-advies-topbar__logo {
		height: 26px;
	}
}