/* ==========================================================================
   REKO Raalte — containerconfigurator, specificaties, postcodecheck en
   bezorgdatum.

   Vervangt de relevante delen van:
     - includes/postcode-shipping/assets/css/postcode-shipping.css (697 regels)
     - de inline <style>-blokken in ExtraFieldsProducts.php en
       checkout-delivery-date.php

   Twee dingen die BEWUST niet zijn meegekomen:
   1. De @import van Google Fonts op regel 2 van postcode-shipping.css. Die
      haalde DM Sans en Bebas Neue bij Google op — een AVG-risico én een
      render-blokkerende externe aanvraag. De fonts staan lokaal in
      assets/fonts/ (zie assets/css/fonts.css); hier staan alleen nog de
      tokens --reko-font-body en --reko-font-heading.
   2. Alle zes losse groenen (#007a4e, #008000, #3EB489, #1a5a3a, #00a651,
      #4CAF50) en de losse grijzen. Er is één merkkleur: var(--reko-green).
      Verder geen border-radius en geen box-shadow, conform de huisstijl.
   ========================================================================== */

/* Gedeeld hulpje: iets wegzetten zonder het uit de DOM te halen. */
.reko-config .is-hidden,
.reko-pc .is-hidden,
.reko-bezorg .is-hidden {
	display: none;
}

/* ==========================================================================
   1. Configurator op de productpagina
   ========================================================================== */

.reko-config {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	margin: 20px 0;
	font-family: var(--reko-font-body);
}

.reko-config__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.reko-config__label {
	font-size: 14px;
	font-weight: 500;
	color: var(--reko-black);
}

/* De keuzelijst: eigen pijl, want de systeempijl verschilt per platform. */
.reko-config__select-wrap {
	position: relative;
	display: block;
}

.reko-config__select,
.reko-bezorg__select {
	width: 100%;
	padding: 14px 45px 14px 20px;
	border: 0;
	border-radius: 0;
	background: var(--reko-field);
	color: var(--reko-black);
	font-family: var(--reko-font-body);
	font-size: 16px;
	line-height: 1.4;
	appearance: none;
	cursor: pointer;
}

.reko-config__select:focus-visible,
.reko-bezorg__select:focus-visible,
.reko-bezorg__input:focus-visible,
.reko-pc__input:focus-visible {
	outline: 2px solid var(--reko-green);
	outline-offset: 2px;
}

.reko-config__select-wrap::after,
.reko-bezorg__select-wrap::after {
	position: absolute;
	top: 50%;
	right: 18px;
	width: 12px;
	height: 8px;
	background: var(--reko-black);
	content: '';
	transform: translateY(-50%);
	pointer-events: none;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Groep die pas verschijnt na "Ja" (zand/grond, matrassen). */
.reko-config__group {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Melding "meer kuub zand dan er in de container past". */
.reko-config__notice {
	margin: 0;
	padding: 12px 15px;
	border-left: 3px solid var(--reko-green);
	background: var(--reko-surface-2);
	font-size: 14px;
	font-style: italic;
	color: var(--reko-black);
}

/* Prijsregel van de configurator. Op containerpagina's blijft die verborgen
   zolang het prijselement van het thema gevuld kan worden. */
.reko-config__price {
	margin: 0;
	font-family: var(--reko-font-heading);
	font-size: 30px;
	line-height: 1;
	color: var(--reko-black);
}

.reko-config__hint {
	display: block;
	font-family: var(--reko-font-body);
	font-size: 16px;
	font-style: italic;
	line-height: 1.5;
	color: var(--reko-black);
}

/* Bestelknop uit zolang bij omruilen nog geen combinatie is gekozen.
   WooCommerce geeft `button.alt:disabled` zijn eigen paars (#7f54b3) mee; die
   regel is specifieker dan de knopstijl in main.css, dus de merkkleur staat
   hier expliciet — anders wordt de knop paars in plaats van groen. */
.woocommerce button.button.alt.is-disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.single_add_to_cart_button.is-disabled,
.single_add_to_cart_button:disabled {
	background: var(--reko-green);
	color: var(--reko-white);
	opacity: 0.4;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Beeldwissel bij het omruilproduct: een crossfade.

   Wat er stond: `.woocommerce-product-gallery { transition: opacity 250ms
   ease-in-out }` met `.is-swapping { opacity: 0.3 }`. Dat dimde de HELE
   galerij, miniaturen inbegrepen, en de JS zette de class aan het begin van de
   wissel op en haalde hem in de load-handler weer weg. Gemeten op
   /product/container-omruilen/ bij 1512px: de AJAX-lookup duurt 1,5-1,8s en
   daarna staat de nieuwe foto binnen één frame uit de browsercache klaar. De
   class stond er dus nooit lang genoeg op om iets van te zien -- het beeld
   knipte om.

   Nu blijft de uitgaande foto als losse laag boven de galerij staan en vloeit
   die weg terwijl de nieuwe eronder al klaarstaat. 460ms
   (--reko-anim-duur) met --reko-anim-ease: dezelfde duur en curve als de
   vervolgvelden van de configurator (motion.css, punt 7b).
   -------------------------------------------------------------------------- */

/* Anker voor de laag hieronder; het omhulsel stond op position: static. */
.woocommerce-product-gallery__image {
	position: relative;
}

.reko-galerij__vorige {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: auto;
	pointer-events: none;
}

/* De overgang hangt aan .reko-motion, zoals alle beweging in dit thema. Staat
   die class er niet (JS-fout of prefers-reduced-motion), dan vuurt
   transitionend nooit en haalt de JS de laag na 700ms weg -- de wissel is dan
   weer een knip, precies zoals hij was. */
.reko-motion .reko-galerij__vorige {
	transition: opacity var(--reko-anim-duur) var(--reko-anim-ease);
}

.reko-galerij__vorige.is-weg {
	opacity: 0;
}

/* ==========================================================================
   2. Specificatieblok

   Vervangt de vier Divi-tekstmodules .et_pb_text_4_tb_body, _6, _8 en _10.
   ========================================================================== */

.reko-spec {
	padding-block: var(--reko-section-y);
}

.reko-spec__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

@media (min-width: 981px) {
	.reko-spec__inner {
		grid-template-columns: 3fr 2fr;
	}
}

.reko-spec__heading {
	margin-bottom: 20px;
	text-transform: uppercase;
}

.reko-spec__list {
	margin: 0;
}

.reko-spec__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 15px 0;
	border-bottom: 1px solid var(--reko-line);
}

@media (min-width: 768px) {
	.reko-spec__row {
		grid-template-columns: 220px 1fr;
		gap: 20px;
	}
}

.reko-spec__label {
	font-family: var(--reko-font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--reko-black);
}

.reko-spec__value {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--reko-black);
}

/*
 * De twee lijsten hebben een vinkje en een kruisje in plaats van een bolletje.
 * Precies zoals live het doet, nagemeten op /product/bouw-en-sloopafval-3m³-
 * container/: de ul heeft geen linkerpadding maar de li 20px, en het teken is
 * een ::before van 14x14 die absoluut op left:0 / top:0 staat met
 * background-size: cover.
 *
 * De twee bestanden staan nu in assets/img en niet in /wp-content/uploads. In
 * een eerdere ronde bleven deze regels leeg staan omdat die uploads hier niet
 * bereikbaar waren; checkmark-square.webp is byte-identiek aan het bestand van
 * live en crossmark.webp komt er ook vandaan.
 */
.reko-spec__value ul {
	margin: 0;
	/* 1em onderruimte: de lijstregel van Divi (blocks/_base.css doet hetzelfde). */
	padding: 0 0 1em;
	list-style: none;
}

.reko-spec__value li {
	position: relative;
	padding: 0 0 0 20px;
}

.reko-spec__mag-wel li::before,
.reko-spec__mag-niet li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: cover;
	/*
	 * Het teken hangt op `top: 0` aan de bovenkant van de regel en staat daarmee
	 * te hoog; deze 40% (5,6px van de 14px) zet hem midden op een regel van
	 * 26px. Zo doet live het ook, met exact deze waarde:
	 *
	 *   .single-product :is(.CheckmarkMarker, .CrossmarkMarker) li::before {
	 *       transform: translateY(40%) !important;
	 *   }
	 *
	 * Een percentage en geen 6px: het rekent tegen de hoogte van het teken, dus
	 * schaalt het mee als dat ooit een andere maat krijgt. De rekenkundige
	 * middenpositie is (26 - 14) / 2 = 6px; live komt op 5,6 uit en dat is de
	 * waarde die hier telt.
	 */
	transform: translateY(40%);
}

.reko-spec__mag-wel li::before { background-image: url("../img/checkmark-square.webp"); }

.reko-spec__mag-niet li::before { background-image: url("../img/crossmark.webp"); }

.reko-spec__value p:first-child {
	margin-top: 0;
}

.reko-spec__value p:last-child {
	margin-bottom: 0;
}

.reko-spec__let-op {
	margin-top: 30px;
	padding: 20px;
	border-left: 3px solid var(--reko-green);
	background: var(--reko-surface-2);
}

.reko-spec__let-op-kop {
	padding-bottom: 6px;
	font-size: 24px;
}

.reko-spec__let-op-tekst {
	font-size: 14px;
	line-height: 1.7;
}

.reko-spec__let-op-tekst p:first-child { margin-top: 0; }
.reko-spec__let-op-tekst p:last-child { margin-bottom: 0; }

.reko-spec__afbeelding {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   3. Postcodecheck
   ========================================================================== */

.reko-pc {
	margin: 20px 0;
	font-family: var(--reko-font-body);
}

.reko-pc__title {
	font-size: 30px;
	text-transform: uppercase;
}

/*
 * De HELAAS-titel hoort bij dezelfde kleine vette tussenkop als het formulier
 * en niet bij de 30px hierboven. Live heeft daar een EIGEN class met exact
 * dezelfde waarden als .postcode-check-title, en die regel is niet aan een
 * pagina gebonden — dus geldt hij op elke plek waar de check staat:
 *
 *   .helaas-title {
 *     font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700;
 *     color: #000; text-transform: uppercase; letter-spacing: 0.5px;
 *   }
 *
 * Uitgelezen uit document.styleSheets op live
 * /zand-bestellen-bezorgen-postcode-check/ en nagemeten met het cookie gezet
 * (node pcfail.mjs): h2 "HELAAS!" op 14px, blok op x=789 en 572 breed — de
 * tekstkolom. Lokaal stond die kop op de 30px van .reko-pc__title en dat was
 * ruim twee keer zo groot.
 *
 * De 30px hierboven blijft staan voor .reko-pc--result: dat is het JA!/HELAAS!
 * -resultaatblok van de modusstand, een andere weergave met een eigen kop.
 */
.reko-pc--form .reko-pc__title,
.reko-pc--fail .reko-pc__title {
	font-family: var(--reko-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/*
 * De SEO-variant ([postcode_check style="seo"], alleen op de
 * SEO-landingspagina's), naast de tekst "Check of bezorging ... mogelijk is".
 *
 * Gemeten in Divi (.postcode-check-style-seo, max-width 600px): de tussenkop
 * "CHECK OF WIJ BIJ U IN DE BUURT LEVEREN" is geen Bebas-kop van 40px maar
 * DM Sans 18px/18 vet in kapitalen met 0,5px letterspatiëring en een zwart
 * pijltje van 28px, 20px erboven van het veld. Daaronder veld en knop onder
 * elkaar over de volle breedte, 15px ertussen: veld 51px hoog, knop 61px met
 * padding 15px 20px. Op 480px en smaller kop 16px en pijltje 24px.
 */
.reko-pc--seo {
	max-width: 600px;
}

.reko-pc--seo .reko-pc__title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-family: var(--reko-font-body);
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.reko-pc--seo .reko-pc__arrow {
	margin-left: 0;
	font-size: 28px;
	line-height: 1;
	color: var(--reko-black);
}

.reko-pc--seo .reko-pc__row {
	flex-direction: column;
	gap: 15px;
}

.reko-pc--seo .reko-pc__input {
	flex: 0 0 auto;
}

.reko-pc--seo .reko-pc__submit {
	padding: 15px 20px;
}

@media (max-width: 480px) {
	.reko-pc--seo .reko-pc__title { font-size: 16px; }
	.reko-pc--seo .reko-pc__arrow { font-size: 24px; }
}

.reko-pc__arrow {
	display: inline-block;
	margin-left: 8px;
	color: var(--reko-green);
}

.reko-pc__intro,
.reko-pc__text {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--reko-black);
}

.reko-pc__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.reko-pc__input {
	flex: 1 1 180px;
	min-width: 0;
	padding: 15px 20px;
	border: 0;
	border-radius: 0;
	background: var(--reko-field);
	color: var(--reko-black);
	font-family: var(--reko-font-body);
	font-size: 16px;
	text-transform: uppercase;
}

.reko-pc__input::placeholder {
	color: var(--reko-black);
	opacity: 0.7;
	text-transform: none;
}

/* Gemeten op live (button.postcode-submit-inline), identiek op 1512, 980 en 767:
   233x61 met padding 15px 80px, regelhoogte normal en 1px letterspatiëring.
   De knopbasis in main.css geeft 3px 50px 0 met regelhoogte 40.8px, en dat kwam
   op 166x51 uit. Geen breekpuntkwestie dus — één vaste correctie. */
.reko-pc__submit {
	flex: 0 0 auto;
	padding: 15px 80px;
	line-height: normal;
	letter-spacing: 1px;
}

/*
 * Onder 769px zet live veld en knop onder elkaar op de volle breedte, met een
 * smallere knoppadding — postcode-shipping.css regels 212-231, ongescoopt.
 * Gemeten op live bij 390/600/768: veld en knop allebei 312/480/614; vanaf 769
 * staan ze naast elkaar met de knop op 233. Die regel ontbrak hier, en daardoor
 * bleef de knop op een productpagina op 233px staan terwijl het veld de volle
 * kolom pakte. De zandpagina had zijn eigen regel op 1180 (text_image.css) en
 * viel dus niet door de mand; live scoopt die 1180-regel ook op de pagina zelf.
 *
 * `flex: 0 0 auto` op het veld is nodig omdat `flex: 1 1 180px` op de HOOFDAS
 * geldt: die staat hier verticaal, dus zonder deze regel wordt het veld 180px
 * hoog. De volle breedte komt van de standaard `align-items: stretch`.
 */
@media (max-width: 768px) {
	.reko-pc__row {
		flex-direction: column;
	}

	.reko-pc__input {
		flex: 0 0 auto;
	}

	.reko-pc__submit {
		padding: 15px 20px;
	}
}

.reko-pc__message {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
}

.reko-pc__message.is-error {
	padding-left: 12px;
	border-left: 3px solid var(--reko-black);
	font-weight: 700;
}

/* Resultaatblok (JA!) van de modusstand: die houdt zijn grijze vlak. */
.reko-pc--result {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	padding: 30px;
	background: var(--reko-surface-2);
}

/*
 * De HELAAS-staat heeft GEEN kader en geen eigen vlak. Hij stond hier op hetzelfde
 * grijze blok met 30px padding als het resultaatblok, en dat is niet wat de bron
 * doet. Gemeten op live @1512 in de tekstkolom van 572px:
 *
 *                        live                lokaal-voor
 *   blok                 572 x 140           572 x 253
 *   achtergrond          transparant         #ebebeb
 *   padding              0                   30px
 *
 * De marge van 20px boven en onder blijft: die zit op live op de wrapper
 * (`.postcode-not-deliverable-wrapper { margin: 20px 0 }`).
 *
 * `gap: 0` en dat is geen slordigheid: live zet de afstanden BINNEN dit blok
 * volledig met de eigen padding en marge van de elementen, en die staan hier al
 * gelijk. Nagemeten op live @1512:
 *
 *   titel   padding 0 0 10px, marge 0        -> gat titel-tekst  0px
 *   tekst   marge 0 0 20px                   -> gat tekst-knop  20px
 *
 * Met een gap van 30px (zoals hier stond) of 20px komt die afstand er dubbel bij
 * en werd het blok 210 respectievelijk 180px hoog, tegen de gemeten 140px op live.
 */
.reko-pc--fail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	padding: 0;
	background: none;
}

@media (min-width: 768px) {
	.reko-pc--result:has(.reko-pc__image) {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

.reko-pc__image img {
	display: block;
	width: 100%;
	height: auto;
}

.reko-pc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * In de HELAAS-staat VULLEN de knoppen samen de kolom, met 15px ertussen. Dat is
 * niet gegokt maar narekenbaar: gemeten op live @1512 zijn de dozen 271 en 286px
 * breed in een kolom van 572, en 271 + 15 + 286 = 572 precies. De tekst is 152 en
 * 167px breed, plus 2x15px padding geeft 182 en 197; de overruimte van
 * 572 - 15 - 182 - 197 = 178 wordt gelijk verdeeld, 89px elk -> 271 en 286.
 * Dat is exact `flex: 1 1 auto` met gelijke groei.
 *
 * De knopmaat zelf wijkt af van de sitebrede .reko-btn, en die drie waarden zijn
 * alle drie gemeten:
 *
 *                    live              .reko-btn (was)
 *   padding          10px 15px         3px 35px 0
 *   line-height      normal            40.8px (1.7 x 24)
 *   letter-spacing   1px               normal
 *   hoogte           51px              44px
 *
 * De letterspatiëring van 1px verklaart de tekstbreedte: dezelfde string in
 * dezelfde Bebas van 24px meet 152px op live tegen 136px hier -- 16 tekens, 16px
 * verschil.
 *
 * Alleen binnen .reko-pc--fail, zodat de knop van het formulier (Checken) en elke
 * andere knop op de site hun eigen maat houden.
 */
.reko-pc--fail .reko-pc__actions {
	flex-wrap: nowrap;
	gap: 15px;
}

.reko-pc--fail .reko-pc__actions > .reko-btn {
	flex: 1 1 auto;
	padding: 10px 15px;
	line-height: normal;
	letter-spacing: 1px;
}

/* Op een smalle kolom passen twee knoppen van minstens 182px niet naast elkaar;
   dan mogen ze wel wikkelen en elk de volle breedte pakken. */
/*
 * 768 en niet 767: live stapelt de HELAAS-knoppen vanaf max-width 768px
 * (postcode-shipping.css regel 212, dezelfde query als het formulier). Op
 * precies 768 stonden ze hier nog naast elkaar terwijl live ze al stapelde.
 */
@media (max-width: 768px) {
	.reko-pc--fail .reko-pc__actions { flex-wrap: wrap; }
	.reko-pc--fail .reko-pc__actions > .reko-btn { flex: 1 1 100%; }
}

/* Pop-up in de modusstand van de shortcode */
.reko-pc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* Verduistering achter de pop-up, uit het zwart-token in plaats van een
	   losse rgba-waarde. */
	background: color-mix(in srgb, var(--reko-black) 60%, transparent);
	opacity: 0;
	transition: opacity 250ms ease;
}

.reko-pc-modal.is-visible {
	opacity: 1;
}

.reko-pc-modal__box {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	width: 100%;
	max-width: 900px;
	max-height: 90vh;
	overflow: auto;
	background: var(--reko-white);
}

@media (min-width: 768px) {
	.reko-pc-modal__box:has(.reko-pc-modal__image) {
		grid-template-columns: 1fr 1fr;
	}
}

.reko-pc-modal__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reko-pc-modal__body {
	padding: 40px;
}

.reko-pc-modal__title {
	font-size: 60px;
}

.reko-pc-modal__text {
	margin: 0 0 25px;
	font-size: 16px;
	line-height: 1.6;
}

.reko-pc-modal__close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: var(--reko-black);
	color: var(--reko-white);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.reko-pc-modal__close:hover {
	background: var(--reko-green);
}

/* Inline-block zodat het kruisje kan draaien (motion.css), en rond zijn eigen
   midden: line-height 1 houdt het vak even hoog als het teken. */
.reko-pc-modal__close-icon {
	display: inline-block;
	line-height: 1;
}

body.reko-pc-modal-open {
	overflow: hidden;
}

/*
 * De bevestiging bij "Andere postcode?": zelfde pop-up als de Ja!/Helaas!-
 * melding, maar een vraag in plaats van een uitslag. Dus smaller, zonder foto
 * en met een kleinere kop dan de 60px van "Ja!", anders staat "Postcode
 * wijzigen?" op telefoon over drie regels.
 */
.reko-pc-modal.is-confirm .reko-pc-modal__box {
	max-width: 560px;
}

.reko-pc-modal.is-confirm .reko-pc-modal__title {
	/* Ruimte rechts voor de sluitknop van 44px. */
	padding-right: 30px;
	font-size: 40px;
}

.reko-pc-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

@media (max-width: 767px) {
	.reko-pc-modal.is-confirm .reko-pc-modal__body {
		padding: 30px 20px;
	}

	.reko-pc-modal.is-confirm .reko-pc-modal__title {
		font-size: 32px;
	}

	.reko-pc-modal__actions > .reko-btn {
		flex: 1 1 100%;
	}
}

/*
 * Resultaat-pop-up JA! / HELAAS! (Figma "Pop-up wel" 378:10156 en "Pop-up niet"
 * 376:11386, frame 1920 breed). Alleen .is-success en .is-fail: de vraag
 * "Andere postcode?" (.is-confirm) houdt de opmaak hierboven.
 *
 *   achtergrond   zwart 28% met 4,5px vervaging van de pagina
 *   kader         wit, 1199 x 497, midden in beeld
 *   foto          505 x 301, 47px van links, verticaal in het midden
 *   titel         Bebas 35px, 61px rechts van de foto
 *   tekst         DM Sans 16px, 442 breed, 7px onder de titel
 *   knop          284 x 56, Bebas 24px, 18px onder de tekst
 *   sluitkruis    26px zwart, 30px van boven en 31px van rechts
 *
 * 47 + 505 + 61 + 442 + 144 = 1199: de 144px rechts is de rest van het kader.
 */
.reko-pc-modal.is-success,
.reko-pc-modal.is-fail {
	background: color-mix(in srgb, var(--reko-black) 28%, transparent);
	-webkit-backdrop-filter: blur(4.5px);
	backdrop-filter: blur(4.5px);
}

.reko-pc-modal.is-success .reko-pc-modal__box,
.reko-pc-modal.is-fail .reko-pc-modal__box {
	max-width: 1199px;
	min-height: 497px;
	padding: 60px 144px 60px 47px;
	align-content: center;
	align-items: center;
	column-gap: 61px;
}

@media (min-width: 768px) {
	.reko-pc-modal.is-success .reko-pc-modal__box:has(.reko-pc-modal__image),
	.reko-pc-modal.is-fail .reko-pc-modal__box:has(.reko-pc-modal__image) {
		grid-template-columns: minmax(0, 505fr) minmax(0, 442fr);
	}
}

.reko-pc-modal.is-success .reko-pc-modal__image img,
.reko-pc-modal.is-fail .reko-pc-modal__image img {
	height: auto;
	aspect-ratio: 505 / 301;
	object-fit: cover;
}

.reko-pc-modal.is-success .reko-pc-modal__body,
.reko-pc-modal.is-fail .reko-pc-modal__body {
	padding: 0;
}

.reko-pc-modal.is-success .reko-pc-modal__title,
.reko-pc-modal.is-fail .reko-pc-modal__title {
	margin: 0 0 7px;
	padding: 0;
	font-family: var(--reko-font-heading);
	font-size: 35px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--reko-black);
}

.reko-pc-modal.is-success .reko-pc-modal__text,
.reko-pc-modal.is-fail .reko-pc-modal__text {
	margin: 0 0 18px;
	padding: 0;
	font-family: var(--reko-font-body);
	font-size: 16px;
	line-height: 1.3;
	color: var(--reko-black);
}

.reko-pc-modal.is-success .reko-pc-modal__body > .reko-btn,
.reko-pc-modal.is-fail .reko-pc-modal__body > .reko-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 284px;
	min-height: 56px;
	padding: 3px 20px 0;
	line-height: 1;
}

/* Het kruis uit Figma als masker, zodat het de tekstkleur volgt en bij hover
   groen wordt. Het teken x in de knop blijft staan voor de toegankelijke naam. */
.reko-pc-modal.is-success .reko-pc-modal__close,
.reko-pc-modal.is-fail .reko-pc-modal__close {
	top: 30px;
	right: 31px;
	width: 26px;
	height: 26px;
	background: transparent;
	color: var(--reko-black);
}

.reko-pc-modal.is-success .reko-pc-modal__close:hover,
.reko-pc-modal.is-fail .reko-pc-modal__close:hover,
.reko-pc-modal.is-success .reko-pc-modal__close:focus-visible,
.reko-pc-modal.is-fail .reko-pc-modal__close:focus-visible {
	background: transparent;
	color: var(--reko-green);
}

.reko-pc-modal.is-success .reko-pc-modal__close-icon,
.reko-pc-modal.is-fail .reko-pc-modal__close-icon {
	display: block;
	width: 26px;
	height: 26px;
	font-size: 0;
	background: currentColor;
	-webkit-mask: url("../img/icons/popup-x.svg") center / contain no-repeat;
	mask: url("../img/icons/popup-x.svg") center / contain no-repeat;
}

/* Niet draaien bij hover (motion.css draait het kruisje van de pop-up 90
   graden). Hier alleen de kleurwissel naar groen. */
.reko-motion .reko-pc-modal.is-success .reko-pc-modal__close:hover .reko-pc-modal__close-icon,
.reko-motion .reko-pc-modal.is-fail .reko-pc-modal__close:hover .reko-pc-modal__close-icon {
	transform: none;
}

/* Smaller dan het ontwerp: dezelfde verhouding, minder lucht. */
@media (max-width: 1240px) {
	.reko-pc-modal.is-success .reko-pc-modal__box,
	.reko-pc-modal.is-fail .reko-pc-modal__box {
		min-height: 0;
		padding: 70px 50px 50px 40px;
		column-gap: 40px;
	}
}

/* Telefoon: foto boven de tekst, knop over de volle breedte. */
@media (max-width: 767px) {
	.reko-pc-modal.is-success .reko-pc-modal__box,
	.reko-pc-modal.is-fail .reko-pc-modal__box {
		padding: 60px 20px 30px;
		row-gap: 20px;
	}

	.reko-pc-modal.is-success .reko-pc-modal__close,
	.reko-pc-modal.is-fail .reko-pc-modal__close {
		top: 20px;
		right: 20px;
	}

	.reko-pc-modal.is-success .reko-pc-modal__body > .reko-btn,
	.reko-pc-modal.is-fail .reko-pc-modal__body > .reko-btn {
		display: flex;
		width: 100%;
		min-width: 0;
	}
}

/*
 * Vastgezette velden op de afrekenpagina: de postcode (.reko-pc-locked, gezet
 * door reko-configurator.js) en Straatnaam en Plaats (.sellabees-co-locked,
 * gezet door de adrescheck van de core). Die laatste twee waren al read-only en
 * kregen van de core al tabindex -1, maar ze hadden nergens opmaak en zagen er
 * dus uit als gewone, bewerkbare velden.
 *
 * Eén regel voor alle drie, want het is dezelfde toestand. Het grijs is
 * --reko-field, hetzelfde als de keuzelijsten in de configurator, en dus een
 * tint donkerder dan het --reko-surface-2 dat de postcode eerst had.
 *
 * De opmaak volgt de toestand vanzelf: vindt de adrescheck de postcode niet,
 * dan haalt de core de klasse weg en zijn de velden weer wit en bewerkbaar.
 */
.reko-pc-locked,
.sellabees-co-locked {
	background: var(--reko-field) !important;
	cursor: not-allowed;
}

.reko-pc-tooltip {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--reko-black);
}

.reko-pc-tooltip a {
	color: var(--reko-green);
	font-weight: 700;
}

/*
 * De melding op een eigen regel, met het postcodeveld op de volle breedte.
 *
 * In de Blocks-checkout wordt .reko-pc-tooltip door reko-configurator.js
 * ingevoegd als flex-kind van .wc-block-components-address-form, en dan kruipt
 * hij naast het postcodeveld zodra hij past. Gemeten bij een formulierkolom van
 * 786px: postcode 404 breed met de melding ernaast op x=706 — precies de plek
 * die Straatnaam hoort te krijgen, waardoor Straatnaam naar een eigen regel
 * zakte. Bij 731px deed het formulier het al goed, want daar paste de melding
 * er niet naast (353 + 12 + 370 > 731) en groeide het postcodeveld uit.
 *
 * Het postcodeveld heeft van WooCommerce `flex: 1 0 calc(50% - 12px)`. Zodra de
 * melding zijn eigen rij pakt, is het veld alleen in die rij en doet de
 * flex-grow de rest. Daarom hoeft hier alleen de melding geregeld te worden.
 */
.wc-block-components-address-form > .reko-pc-tooltip {
	flex: 0 0 100%;
}

/* --------------------------------------------------------------------------
   Prijsafscherming — de extra laag

   De echte afscherming staat server-side in inc/postcode-tarieven.php
   (woocommerce_get_price_html, woocommerce_is_purchasable en het weghalen van
   de prijs- en bestelblokken). Dit is de tweede laag, tegen de eigen classes
   in plaats van tegen Divi's .et_pb_wc_price en .et_pb_wc_add_to_cart.
   -------------------------------------------------------------------------- */

.reko-pc-price-hidden {
	display: inline-block;
	font-family: var(--reko-font-body);
	font-size: 14px;
	font-style: italic;
	color: var(--reko-black);
}

/* Zolang er geen geldige postcode bekend is, krijgt ELKE productpagina
 * .reko-pc-product-gated: prijs en bestelblok gaan eraf en de check komt op die
 * plek. Dat geldt ook voor de afvalcontainers, die geen tariefregel hebben --
 * anders kon je die wel in de winkelwagen leggen maar niet afrekenen. Zodra de
 * postcode bekend is staat er .reko-pc-product-free en doet deze laag niets.
 * Zie reko_pc_postcode_first() in inc/postcode-tarieven.php. */
body.reko-pc-product-gated.reko-pc-none .reko-config,
body.reko-pc-product-gated.reko-pc-invalid .reko-config,
body.reko-pc-product-gated.reko-pc-none form.cart,
body.reko-pc-product-gated.reko-pc-invalid form.cart,
body.reko-pc-product-gated.reko-pc-none .single_add_to_cart_button,
body.reko-pc-product-gated.reko-pc-invalid .single_add_to_cart_button {
	display: none !important;
}

/* ==========================================================================
   4. Bezorgdatum en tijdvak op de afrekenpagina
   ========================================================================== */

.reko-bezorg {
	margin: 25px 0;
	font-family: var(--reko-font-body);
}

.reko-bezorg__heading {
	font-size: 24px;
	text-transform: uppercase;
}

.reko-bezorg__field {
	margin-bottom: 18px;
}

.reko-bezorg__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--reko-black);
}

.reko-bezorg__select-wrap {
	position: relative;
	display: block;
}

.reko-bezorg__input {
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 0;
	background: var(--reko-field);
	color: var(--reko-black);
	font-family: var(--reko-font-body);
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
}

/* Het kalendericoon van de browser in de huisstijlkleur. */
.reko-bezorg__input::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.7;
}

.reko-bezorg__message {
	margin: 0;
	padding-left: 12px;
	border-left: 3px solid var(--reko-black);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--reko-black);
}

/* De verzendmethode van WooCommerce is hier niet relevant: de bezorgkosten
   komen uit de postcoderegels. (Stond eerder in een inline <style>.) */
#shipping-option.wc-block-checkout__shipping-option {
	display: none;
}

/* Overzicht van de afleveropties op de bedankpagina en in Mijn account. */
.reko-bezorg-overzicht {
	margin-top: 30px;
}

.reko-bezorg-overzicht__table th {
	width: 35%;
	text-align: left;
}