/* =========================================================================
   Bedankt- / orderbevestigingspagina (WooCommerce order-received).
   1:1 op Figma-node 172:3497. Volledig gescoped op .mimoda-bedankt zodat deze
   stylesheet (auto-enqueued op elke pagina, §3) nergens anders lekt.
   Structuur: banner + kop → bedanktekst + knop → (stay-band + footer erbuiten).
   ========================================================================= */

.mimoda-bedankt {
	/* Knopkleur — door klant gekozen zacht roze #fec2dc (was ontwerp-roze #ffc0cb, node 172:3710). */
	--mimoda-bedankt-btn: #fec2dc;
}

/* --- Banner met kop (node 172:3700 / 172:3703) ------------------------ */
.mimoda-bedankt__banner {
	position: relative;
	width: 100%;
	min-height: clamp(280px, 20.83vw, 400px); /* 400px op 1920 */
	display: flex;
	align-items: center;      /* kop verticaal gecentreerd in de banner */
	justify-content: center;
	background-color: #d9c3c9; /* dekkleur zolang de foto laadt */
	/* Uitsnede 1:1 uit het ontwerp: foto op cover (1920×2560) met de zichtbare band
	   ~996px vanaf de top → 996/(2560-400) ≈ 46% (toont de bovenlijven/kleding, niet de deur). */
	background-position: center 46%;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}
.mimoda-bedankt__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2); /* donkere overlay uit het ontwerp */
	pointer-events: none;
}
.mimoda-bedankt__banner-inner {
	position: relative;
	z-index: 1;
	text-align: center;
}
.mimoda-bedankt__title {
	margin: 0;
	font-family: var(--mimoda-display);
	font-weight: 400;
	font-size: clamp(30px, 5vw, 48px); /* 48px op desktop */
	line-height: 1.15;
	color: #fff;
}

/* --- Body: bedanktekst + knop (node 172:3702 / 172:3710) -------------- */
.mimoda-bedankt__body {
	background: #fff;
	padding: clamp(36px, 3.8vw, 54px) 0 clamp(44px, 4.6vw, 60px);
}
.mimoda-bedankt__content { text-align: center; }

.mimoda-bedankt__message {
	max-width: 1140px;         /* tekstbreedte uit het ontwerp */
	margin: 0 auto;
	font-family: var(--mimoda-font);
	font-size: 16px;
	line-height: 26px;
	color: var(--mimoda-ink);
}
.mimoda-bedankt__message p { margin: 0 0 26px; }         /* lege regel tussen alinea's */
.mimoda-bedankt__message p:last-child { margin-bottom: 0; }
.mimoda-bedankt__message strong { font-weight: 700; }
/* Tel-/mailto-links: identiek aan de rest van de tekst (geen underline), accent op hover. */
.mimoda-bedankt__message a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}
.mimoda-bedankt__message a:hover { color: var(--mimoda-accent, #e598e5); }

/* Eventuele WooCommerce-hook-output (gateway-instructies/tracking). Meestal leeg. */
.mimoda-bedankt__wc:empty { display: none; }
.mimoda-bedankt__wc:not(:empty) { margin-top: 24px; }

/* Knop "Terug naar homepage" (node 172:3710/3711): 295×53, radius 5, uppercase. */
.mimoda-bedankt__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 295px;
	height: 53px;
	margin-top: 24px;
	padding: 0 32px;
	border-radius: var(--mimoda-radius, 5px);
	background: var(--mimoda-bedankt-btn);
	color: #fff;
	font-family: var(--mimoda-font);
	font-weight: 800; /* ExtraBold */
	font-size: 14px;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: filter .15s ease;
}
.mimoda-bedankt__btn:hover { filter: brightness(0.96); }

@media (max-width: 640px) {
	.mimoda-bedankt__btn { min-width: 0; width: 100%; }
}

/* --- "Stay up to date"-band: op de bedankt-pagina's de introtekst op één regel ---
   De gedeelde stay-component (template-parts/stay.php) begrenst .mimoda-stay__inner
   op 640px, waardoor de tekst op twee regels valt. Het ontwerp toont hem op één
   regel; alleen op de bedankt-pagina's (body.mimoda-bedankt-page — order-received,
   /bedankt-aankoop/ en /bedankt-contact/) verruimen we de breedte zodat de andere
   pagina's ongemoeid blijven. */
body.mimoda-bedankt-page .mimoda-stay__inner { max-width: 860px; }

/* =========================================================================
   MOBIEL (≤ 981px) — 1:1 op het responsive ontwerp (frame 417:1418, 402px breed).
   De banner is op mobiel een smalle beeldband (≈144px), niet de 280px-clamp-min;
   kop kleiner zodat hij op 2 regels past. Komt als laatste → wint (BOUWPLAN §2).
   ========================================================================= */
@media (max-width: 981px) {
	.mimoda-bedankt__banner { min-height: 180px; }
	.mimoda-bedankt__title { font-size: 28px; }
	.mimoda-bedankt__body { padding: 32px 0 40px; }
	.mimoda-bedankt__message { font-size: 15px; line-height: 24px; }
}
@media (max-width: 600px) {
	/* Ontwerp 402px: band ≈144px, kop ±24px op 2 regels, knop vol-breed. */
	.mimoda-bedankt__banner { min-height: 144px; }
	.mimoda-bedankt__title { font-size: 24px; }
	.mimoda-bedankt__btn { min-width: 0; width: 100%; }
}