/* ============================================================
   AP — Checkout (pixel-perfect herbouw naar checkout-referentie.html).
   Zelf-bevattend: alle klassen zijn geprefixt met .apc- en staan onder
   .apc-checkout, zodat thema/Woo-CSS er niet meer op ingrijpt.
   Kleuren = referentie (design). LET OP: als je toch dashboard-kleuren wilt,
   pas de --apc-blauw / --apc-navy hieronder aan.
   ============================================================ */

.apc-wrap{
	/* Dashboard-kleuren (user-keuze). Referentie gebruikt #2563eb/#152c5b/#f4f7fd —
	   wil je toch exact de referentie? Zet die dan hier terug. */
	--apc-blauw:#1B4DE4; --apc-blauw-hover:#143BB0; --apc-navy:#0B2447;
	--apc-tekst:#13233f; --apc-tekst-2:#31415f; --apc-tekst-3:#4a5a78; --apc-muted:#8194b5; --apc-muted-2:#8ea0bd;
	--apc-rand:#e5ebf5; --apc-rand-veld:#d6deec; --apc-rand-licht:#e7ecf5;
	--apc-bg:#f4f7fd; --apc-bg-selectie:#f4f8ff; --apc-navy-sub:#a9bbdd; --apc-navy-vink:#7ea4f5;
	--apc-groen:#4ade80; --apc-fout:#c2453a; --apc-cta-disabled:#9db4e8;
	font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
	color:var(--apc-tekst);
	-webkit-font-smoothing:antialiased;
}
.apc-wrap *{ box-sizing:border-box; }
.apc-wrap a{ color:var(--apc-blauw);text-decoration:none; }
.apc-wrap a:hover{ color:#173e9e; }

/* ── VOLLE BREEDTE: thema-container losmaken op de checkout ── */
body.woocommerce-checkout .ap-public-page,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout main,
body.woocommerce-checkout .woocommerce{
	max-width:none !important;width:auto !important;margin:0 !important;padding:0 !important;background:var(--apc-bg) !important;
}
body.woocommerce-checkout{ background:var(--apc-bg) !important; }

/* ── TOPBAR ── */
.apc-topbar{ background:#fff;border-bottom:1px solid var(--apc-rand-licht); }
.apc-topbar-in{ max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:8px 32px; }
.apc-topbar-logo{ display:flex;align-items:center;flex-shrink:0; }
.apc-topbar-in img{ width:auto !important;max-height:none !important;margin:0; }
.apc-topbar-in .apc-logo-full{ height:104px !important;display:block; }
.apc-topbar-in .apc-logo-icon{ height:56px !important;display:none; }
@media (max-width:560px){ .apc-topbar-in{ padding:6px 16px; } .apc-topbar-in img{ height:72px !important;margin:-6px 0; } }
.apc-topbar-status{ display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--apc-tekst-3); }
.apc-topbar-status i{ width:8px;height:8px;border-radius:50%;background:var(--apc-groen); }

/* ── LAYOUT ── */
.apc-checkout{ max-width:1160px;margin:0 auto;padding:44px 32px 80px;display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:start; }
@media (max-width:900px){ .apc-checkout{ grid-template-columns:1fr;gap:24px;padding:24px 16px 60px; } }

/* ── STEPPER ── */
.apc-stepper{ display:flex;gap:10px;align-items:center;margin-bottom:34px;font-size:13px;font-weight:700; }
.apc-stepper .apc-stap{ display:flex;align-items:center;gap:8px;color:var(--apc-muted-2); }
.apc-stepper .apc-stap.actief{ color:var(--apc-blauw); }
.apc-stepper .apc-stap i{ width:24px;height:24px;border-radius:50%;background:var(--apc-rand-licht);color:var(--apc-muted-2);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px; }
.apc-stepper .apc-stap.actief i{ background:var(--apc-blauw);color:#fff; }
.apc-stepper .apc-lijn{ width:36px;height:1.5px;background:var(--apc-rand-veld); }

/* ── KAART ── */
.apc-card{ background:#fff;border:1px solid var(--apc-rand);border-radius:16px;padding:30px 34px;margin-bottom:20px; }
.apc-card h2{ font-size:19px !important;font-weight:900 !important;letter-spacing:-0.01em;margin:0 0 20px !important;color:var(--apc-tekst);line-height:1.2; }
.apc-card-kop{ display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px; }
.apc-card-kop h2{ margin:0 !important; }
.apc-card-kop span{ font-size:13.5px;font-weight:600;color:var(--apc-tekst-3); }
.apc-card-kop a{ font-weight:700; }

/* ── VELDEN ── */
.apc-fields{ display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.apc-fields .apc-full{ grid-column:1/-1; }
@media (max-width:520px){ .apc-fields{ grid-template-columns:1fr; } }
.apc-field label{ display:block;font-size:13px;font-weight:700;color:var(--apc-tekst-2);margin-bottom:6px; }
.apc-field label em{ font-style:normal;font-weight:400;color:var(--apc-muted); }
.apc-field input,.apc-field select,
.apc-fields input:not([type=checkbox]):not([type=radio]),.apc-fields select,.apc-fields textarea{
	display:block !important;width:100% !important;height:48px !important;min-height:48px !important;
	border:1.5px solid var(--apc-rand-veld) !important;border-radius:10px !important;padding:0 15px !important;
	font:15px 'Inter',sans-serif !important;color:var(--apc-tekst) !important;outline:none !important;background:#fff !important;
	margin:0 !important;-webkit-appearance:none;appearance:none;box-shadow:none !important;line-height:normal;
}
.apc-field input:focus,.apc-field select:focus,.apc-fields input:focus,.apc-fields select:focus{ border-color:var(--apc-blauw) !important; }
.apc-field input::placeholder,.apc-fields input::placeholder{ color:var(--apc-muted-2); }
.apc-field .required,.apc-field abbr.required,
.apc-wrap label .required,.apc-wrap abbr.required{ display:none !important; }
/* WooCommerce-velden binnen .apc-fields → exact de referentie-look. */
.apc-fields .form-row{ margin:0 !important;padding:0 !important;float:none !important;width:auto !important;min-width:0 !important; }
.apc-fields .form-row-wide,.apc-fields .form-row.form-row-wide,.apc-fields .apc-full{ grid-column:1/-1; }
.apc-fields .form-row-first{ grid-column:1; }
.apc-fields .form-row-last{ grid-column:2; }
.apc-fields .form-row > label{ display:block;font-size:13px;font-weight:700;color:var(--apc-tekst-2);margin-bottom:6px; }
.apc-fields .woocommerce-input-wrapper{ display:block;width:100%; }
.apc-veld-link{ margin-top:12px;font-size:13.5px; }
.apc-info-blok{ display:flex;gap:9px;align-items:flex-start;background:#eef4ff;border:1px solid #d8e4fa;border-radius:10px;padding:11px 14px;margin-bottom:18px; }
.apc-info-blok b{ color:var(--apc-blauw);font-weight:900;font-size:13px;margin-top:1px;flex-shrink:0; }
.apc-info-blok span{ font-size:13.5px;line-height:1.5;color:var(--apc-tekst-2); }

/* ── BETALING (WooCommerce #payment omgevormd naar .pay-rij-look) ── */
.apc-pay #payment,.apc-pay #payment .woocommerce-checkout-payment{ background:transparent !important;border:0 !important;padding:0 !important;margin:0 !important; }
.apc-pay ul.payment_methods{ display:grid;gap:10px;border:0 !important;margin:0 !important;padding:0 !important;list-style:none !important; }
.apc-pay ul.payment_methods li{
	display:flex !important;align-items:center;gap:14px;flex-wrap:wrap;
	border:1.5px solid var(--apc-rand) !important;background:#fff !important;border-radius:12px !important;padding:16px 18px !important;margin:0 !important;cursor:pointer;line-height:1.2;
}
.apc-pay ul.payment_methods li.apc-pay-actief{ border-color:var(--apc-blauw) !important;background:var(--apc-bg-selectie) !important; }
.apc-pay ul.payment_methods li input[type=radio]{ width:20px;height:20px;accent-color:var(--apc-blauw);margin:0;flex-shrink:0; }
.apc-pay ul.payment_methods li label{ display:inline !important;font-size:15px !important;font-weight:700 !important;color:var(--apc-tekst) !important;margin:0 !important;padding:0 !important;cursor:pointer; }
.apc-pay ul.payment_methods li img{ margin-left:auto;max-height:26px;width:auto;float:none; }
.apc-pay .payment_box{ flex:0 0 100%;background:var(--apc-bg);border-radius:10px;font-size:13px;color:var(--apc-tekst-3);margin:8px 0 0;padding:12px 14px; }
.apc-pay .payment_box::before{ display:none !important; }

/* ── AKKOORD ── */
.apc-privacy{ font-size:14px;color:var(--apc-tekst-2);margin-bottom:18px; }
.apc-privacy a b{ color:var(--apc-blauw);font-weight:700; }
.apc-check-rij{ display:flex;gap:12px;align-items:flex-start;cursor:pointer; }
.apc-check-rij + .apc-check-rij{ margin-top:16px; }
.apc-check-rij input{ position:absolute;opacity:0;width:22px;height:22px;margin:0;cursor:pointer; }
.apc-checkbox{ width:22px;height:22px;border-radius:6px;border:2px solid #c3cede;background:#fff;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:13px;flex-shrink:0;transition:all .12s ease; }
.apc-check-rij.aan .apc-checkbox{ border-color:var(--apc-blauw);background:var(--apc-blauw); }
.apc-check-rij span.apc-check-tekst{ font-size:14px;line-height:1.55;color:var(--apc-tekst-2); }
.apc-check-rij span.apc-check-tekst a b{ color:var(--apc-blauw);font-weight:700; }
.apc-toelichting{ display:none;margin:14px 0 0 34px;background:var(--apc-bg);border:1px solid var(--apc-rand);border-radius:10px;padding:14px 16px;font-size:13px;line-height:1.6;color:var(--apc-tekst-3); }
.apc-toelichting.open{ display:block; }

/* ── CTA ── */
.apc-cta button,.apc-cta #place_order{
	display:block !important;width:100% !important;text-align:center;background:var(--apc-cta-disabled) !important;color:#fff !important;
	font:800 17px 'Inter',sans-serif !important;padding:18px !important;border:0 !important;border-radius:12px !important;cursor:pointer;
	box-shadow:0 10px 28px rgba(37,99,235,0.3);height:auto !important;
}
.apc-cta.enabled button,.apc-cta.enabled #place_order{ background:var(--apc-blauw) !important; }
.apc-cta.enabled button:hover,.apc-cta.enabled #place_order:hover{ background:var(--apc-blauw-hover) !important; }
.apc-cta-fout{ display:none;margin-top:12px;text-align:center;font-size:13.5px;color:var(--apc-fout);font-weight:600; }
.apc-cta-fout.tonen{ display:block; }
.apc-cta-sub{ margin-top:14px;text-align:center;font-size:13px;color:var(--apc-muted); }

/* ── BESTELOVERZICHT ── */
.apc-summary-kolom{ position:sticky;top:24px;align-self:start; }
@media (max-width:900px){ .apc-summary-kolom{ position:static; } }
/* #order_review (thema-wrapper) volledig neutraliseren → geen witte omkadering. */
.apc-wrap #order_review{ background:transparent !important;border:0 !important;padding:0 !important;margin:0 !important;box-shadow:none !important;border-radius:0 !important; }
.apc-summary{ background:var(--apc-navy) !important;color:#fff;border-radius:20px;padding:32px;box-shadow:0 24px 60px -18px rgba(21,44,91,0.45); }
.apc-summary h2{ font-size:19px !important;font-weight:900 !important;margin:0 0 22px !important;color:#fff !important; }
/* Bedragen nooit afbreken tussen € en getal. */
.apc-summary .woocommerce-Price-amount,.apc-summary bdi{ white-space:nowrap !important; }
/* WooCommerce Subscriptions "Terugkerende totalen" verbergen — de slotzin dekt dit. */
.apc-summary [class*="recurring"],.apc-wrap #order_review [class*="recurring"]{ display:none !important; }
.apc-summary .apc-lijn{ border:0;border-top:1px solid rgba(255,255,255,0.14);margin:0; }
.apc-product{ display:flex;gap:14px;align-items:flex-start;padding-bottom:20px; }
.apc-product-logo{ width:46px;height:46px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:4px; }
.apc-product-logo img{ width:100%;height:100%;object-fit:contain; }
.apc-product-naam{ flex:1;min-width:0; }
.apc-product-naam b{ display:block;font-size:15px;font-weight:800;line-height:1.4;color:#fff; }
.apc-product-naam span{ display:block;font-size:13px;color:var(--apc-navy-sub);margin-top:2px; }
.apc-product-prijs{ text-align:right;white-space:nowrap;flex-shrink:0; }
.apc-product-prijs b{ display:block;font-size:16px;font-weight:900;color:#fff; }
.apc-product-prijs span{ display:block;font-size:11.5px;color:var(--apc-navy-sub); }
.apc-vinkjes{ display:grid;gap:9px;padding:18px 0; }
.apc-vinkjes div{ display:flex;gap:9px;font-size:13.5px;color:#fff; }
.apc-vinkjes b{ color:var(--apc-navy-vink);font-weight:900; }
.apc-voucher{ display:flex;justify-content:space-between;align-items:center;padding:16px 0;cursor:pointer;font-size:14px;font-weight:700;color:#fff; }
.apc-voucher b{ color:var(--apc-navy-vink);font-weight:600; }
.apc-voucher-veld{ display:none;gap:10px;padding:4px 0 14px; }
.apc-voucher-veld.open{ display:flex; }
.apc-voucher-veld input{ flex:1;height:44px;border:1.5px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);border-radius:9px;padding:0 13px;font-size:14px;color:#fff;outline:none; }
.apc-voucher-veld input::placeholder{ color:rgba(255,255,255,0.55); }
.apc-voucher-veld button{ background:rgba(255,255,255,0.14);border:0;color:#fff;border-radius:9px;padding:0 18px;font-size:14px;font-weight:700;cursor:pointer; }
.apc-bedragen{ display:grid;gap:10px;padding:18px 0;font-size:14px; }
.apc-bedragen div{ display:flex;justify-content:space-between; }
.apc-bedragen span:first-child{ color:var(--apc-navy-sub); }
.apc-bedragen span:last-child{ font-weight:700;white-space:nowrap;color:#fff; }
.apc-totaal{ display:flex;justify-content:space-between;align-items:baseline;padding:20px 0 6px; }
.apc-totaal span:first-child{ font-size:16px;font-weight:800;color:#fff; }
.apc-totaal span:last-child{ font-size:28px;font-weight:900;letter-spacing:-0.02em;white-space:nowrap;color:#fff; }
.apc-slotzin{ font-size:12.5px;color:var(--apc-navy-sub);line-height:1.6;margin-top:10px;text-align:left; }
.apc-reassure{ background:#fff;border:1px solid var(--apc-rand);border-radius:14px;padding:18px 22px;margin-top:16px;display:flex;gap:12px;align-items:center; }
.apc-reassure b.apc-icon{ width:36px;height:36px;border-radius:9px;background:#eef4ff;color:var(--apc-blauw);display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0; }
.apc-reassure p{ margin:0;font-size:13px;line-height:1.55;color:var(--apc-tekst-2); }

/* ── KvK-autocomplete suggestielijst ── */
.apc-kvk-suggest{ position:absolute;z-index:60;left:0;right:0;background:#fff;border:1px solid var(--apc-rand);border-radius:10px;box-shadow:0 10px 30px -12px rgba(19,35,63,.18);margin-top:4px;overflow:hidden;max-height:280px;overflow-y:auto; }
.apc-kvk-suggest__item{ padding:11px 14px;cursor:pointer;font-size:14px;color:var(--apc-tekst);border-bottom:1px solid #f0f3f8; }
.apc-kvk-suggest__item:last-child{ border-bottom:0; }
.apc-kvk-suggest__item:hover{ background:#eef4ff; }
.apc-kvk-suggest__melding{ padding:12px 14px;font-size:13px;color:var(--apc-muted-2); }

/* ── WooCommerce-restjes verbergen ── */
.apc-wrap .woocommerce-additional-fields,
.apc-wrap #order_comments_field,
.apc-wrap .woocommerce-form-login-toggle,
.apc-wrap .woocommerce-form-coupon-toggle{ display:none !important; }
.apc-wrap .woocommerce-error,.apc-wrap .woocommerce-info,.apc-wrap .woocommerce-message{
	border-radius:10px;border:1px solid var(--apc-rand);border-left:4px solid var(--apc-blauw);background:#fff;font-size:14px;list-style:none;padding:14px 16px;margin:0 0 16px;
}

/* ============================================================
   MOBIEL — forceer 1 kolom, nette topbar, geen overflow
   ============================================================ */
/* Geen horizontaal schuiven op de checkout (mobiel "vast"). overscroll-behavior-x
   zet ook de elastische "bounce" van iOS Safari uit, waardoor je de pagina niet
   meer naar rechts kunt slepen als er niets buiten beeld valt. */
/* GEEN overflow-x op html: dat dwingt iOS Safari om schuifbalk-ruimte te
   reserveren, waardoor de pagina smaller wordt en naar links schuift (witruimte
   rechts). De horizontale vergrendeling zetten we alleen op body — dat houdt de
   pagina "vast" zonder die ruimte te reserveren, dus alles blijft gecentreerd. */
html{ overscroll-behavior-x:none; }
body.woocommerce-checkout{ overscroll-behavior-x:none !important; }
/* overflow-x staat NIET op html/body (dat reserveert schuifbalk-ruimte op iOS ->
   witruimte rechts). We klippen eventuele uitschieters op de binnen-container;
   clip reserveert nooit ruimte, dus alles blijft volle breedte + gecentreerd. */
.apc-wrap{ overflow-x:clip;width:100%;max-width:100%; }
/* ECHTE OORZAAK van het horizontaal schuiven: WooCommerce/selectWoo zet het
   land-keuzeveld op .select2-hidden-accessible en positioneert de originele
   <select> absoluut op 100% breed. Normaal klikt de select2-CSS dat veld weg,
   maar die hebben we bewust uitgezet (native selects). Zonder die CSS blijft de
   360px-brede select 'hangen' en steekt ~35px buiten beeld -> pagina sleepbaar.
   Hier klikken we 'm alsnog weg (standaard visually-hidden). Hoge specificiteit
   + max-width nodig omdat het thema control-breedtes met !important forceert. */
/* Land/regio: gebruik de NATIVE <select> i.p.v. de select2-widget.
   select2 rendert een eigen widget + dropdown (met zoekvakje) die niet netjes
   uitlijnt en op mobiel buiten beeld valt. We verbergen die widget volledig en
   tonen de originele <select> als normaal veld → nette OS-dropdown die perfect
   uitlijnt en op mobiel binnen het scherm blijft. Hoge specificiteit + max-width
   nodig omdat het thema control-breedtes met !important forceert. */
body.woocommerce-checkout .apc-wrap .select2-container{ display:none !important; }
body.woocommerce-checkout .apc-wrap select#billing_country{
	position:static !important; left:auto !important; margin:0 !important;
	width:100% !important; max-width:100% !important; min-width:0 !important;
	height:48px !important; min-height:48px !important;
	clip:auto !important; clip-path:none !important; overflow:visible !important;
	white-space:normal !important; display:block !important;
	border:1.5px solid var(--apc-rand-veld) !important; border-radius:10px !important;
	padding:0 15px !important; font:15px 'Inter',sans-serif !important;
	color:var(--apc-tekst) !important; background:#fff !important; box-shadow:none !important;
}
/* WooCommerce wachtwoord-sterkte/hint mag nooit breder worden dan zijn veld. */
.woocommerce-password-strength,.woocommerce-password-hint{ max-width:100%;box-sizing:border-box;word-break:break-word; }

/* ============================================================
   WOOCOMMERCE-MELDINGEN (fout/succes/info) — eigen nette opmaak.
   Het thema zet een icoon (::before, WooCommerce-font) op left:24px terwijl de
   tekst daar deels onderdoor loopt (overlap). We vervangen dat door een eigen
   rond badge-icoon met genoeg padding-links, centreren de melding op de
   contentbreedte, en maken de tekstkleur uniform.
   ============================================================ */
body.woocommerce-checkout .woocommerce-notices-wrapper{
	max-width:1160px !important; margin:16px auto 0 !important; padding:0 32px !important; box-sizing:border-box;
}
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info{
	list-style:none !important; margin:0 0 20px !important; padding:14px 18px 14px 46px !important;
	border-radius:12px !important; border:1px solid transparent !important; position:relative !important;
	box-shadow:none !important; outline:none !important; font-size:14px !important; line-height:1.5 !important; font-family:'Inter',sans-serif !important;
}
/* WooCommerce zet focus op de melding (scroll-naar) → browser tekent een blauw
   focuskader. Dat blauwe kader zetten we uit; de gekleurde kaart is al duidelijk. */
body.woocommerce-checkout .woocommerce-error:focus,
body.woocommerce-checkout .woocommerce-message:focus,
body.woocommerce-checkout .woocommerce-info:focus,
body.woocommerce-checkout .woocommerce-notices-wrapper:focus,
body.woocommerce-checkout .woocommerce-NoticeGroup:focus{ outline:none !important; box-shadow:none !important; }
body.woocommerce-checkout .woocommerce-error li,
body.woocommerce-checkout .woocommerce-message li,
body.woocommerce-checkout .woocommerce-info li{
	list-style:none !important; margin:0 !important; padding:2px 0 !important; font-weight:500 !important;
}
/* eigen rond icoon (vervangt het thema-glyph dat overlapte) */
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before{
	position:absolute !important; left:16px !important; top:14px !important;
	width:20px !important; height:20px !important; border-radius:50% !important;
	display:flex !important; align-items:center !important; justify-content:center !important;
	font-family:'Inter',sans-serif !important; font-size:12px !important; font-weight:900 !important;
	line-height:1 !important; color:#fff !important; margin:0 !important; text-indent:0 !important;
}
/* FOUT (rood) */
body.woocommerce-checkout .woocommerce-error{ background:#fdf3f2 !important; border-color:#f1c8c3 !important; border-left:4px solid #c2453a !important; color:#8a2b23 !important; }
body.woocommerce-checkout .woocommerce-error li{ color:#8a2b23 !important; }
body.woocommerce-checkout .woocommerce-error a{ color:#8a2b23 !important; text-decoration:underline !important; }
body.woocommerce-checkout .woocommerce-error::before{ content:"!" !important; background:#c2453a !important; }
/* SUCCES (groen) */
body.woocommerce-checkout .woocommerce-message{ background:#e6f6ec !important; border-color:#bde8cd !important; border-left:4px solid #1f9d55 !important; color:#136b3a !important; }
body.woocommerce-checkout .woocommerce-message li{ color:#136b3a !important; }
body.woocommerce-checkout .woocommerce-message::before{ content:"\2713" !important; background:#1f9d55 !important; }
/* INFO (blauw) */
body.woocommerce-checkout .woocommerce-info{ background:var(--apc-bg-selectie) !important; border-color:#cfe0fb !important; border-left:4px solid var(--apc-blauw) !important; color:#183a8c !important; }
body.woocommerce-checkout .woocommerce-info li{ color:#183a8c !important; }
body.woocommerce-checkout .woocommerce-info::before{ content:"i" !important; background:var(--apc-blauw) !important; font-style:normal !important; }
@media (max-width:768px){
	body.woocommerce-checkout .woocommerce-notices-wrapper{ padding:0 16px !important; margin-top:12px !important; }
}

/* ============================================================
   ORDER-RECEIVED ACHTER LOGIN — als de bedanklink op een ander toestel/zonder
   sessie wordt geopend, beschermt WooCommerce de bestelling en toont een
   login-formulier. Dat stylen we hier tot een nette gecentreerde kaart.
   (Op de normale bedankpagina bestaat dit formulier niet, dus geen effect daar.)
   ============================================================ */
body.woocommerce-order-received .woocommerce:has(form.woocommerce-form-login),
body.woocommerce-order-received .woocommerce:has(form.login){
	max-width:520px !important; margin:48px auto !important; padding:0 16px !important;
}
body.woocommerce-order-received .woocommerce-thankyou-order-received{
	text-align:center; font-size:20px; font-weight:900; color:var(--apc-tekst); margin:0 0 18px;
}
body.woocommerce-order-received form.woocommerce-form-login,
body.woocommerce-order-received form.login{
	background:#fff; border:1px solid var(--apc-rand); border-radius:16px; padding:28px 26px;
	box-sizing:border-box; max-width:520px; margin:16px auto 0; text-align:left;
}
body.woocommerce-order-received form.woocommerce-form-login p,
body.woocommerce-order-received form.login p{ margin:0 0 16px; }
body.woocommerce-order-received form.woocommerce-form-login label,
body.woocommerce-order-received form.login label:not(.woocommerce-form-login__rememberme){
	display:block; font-size:13px; font-weight:700; color:var(--apc-tekst); margin:0 0 6px;
}
body.woocommerce-order-received form.woocommerce-form-login label .required,
body.woocommerce-order-received form.login label .required{ display:none !important; }
body.woocommerce-order-received form.woocommerce-form-login .woocommerce-Input,
body.woocommerce-order-received form.woocommerce-form-login input.input-text,
body.woocommerce-order-received form.login input.input-text,
body.woocommerce-order-received form.login input[type="text"],
body.woocommerce-order-received form.login input[type="password"]{
	width:100% !important; box-sizing:border-box !important; height:48px !important;
	border:1.5px solid var(--apc-rand-veld) !important; border-radius:10px !important;
	padding:0 15px !important; font-size:16px !important; background:#fff !important; color:var(--apc-tekst) !important;
	line-height:normal !important;
}
body.woocommerce-order-received form.login .password-input,
body.woocommerce-order-received form.woocommerce-form-login .password-input{ display:block; position:relative; }
body.woocommerce-order-received form.login .password-input input{ padding-right:46px !important; }
body.woocommerce-order-received form.login .show-password-input,
body.woocommerce-order-received form.woocommerce-form-login .show-password-input{
	position:absolute !important; right:15px !important; top:50%; transform:translateY(-50%); margin:0 !important; color:var(--apc-muted-2);
}
body.woocommerce-order-received form.login button.button,
body.woocommerce-order-received form.login .woocommerce-form-login__submit,
body.woocommerce-order-received form.woocommerce-form-login button.button{
	background:var(--apc-blauw) !important; color:#fff !important; border:0 !important;
	border-radius:10px !important; padding:13px 28px !important; font-size:15px !important; font-weight:800 !important;
	cursor:pointer; box-shadow:none !important;
}
body.woocommerce-order-received form.login button.button:hover,
body.woocommerce-order-received form.woocommerce-form-login button.button:hover{ background:var(--apc-blauw-hover) !important; }
body.woocommerce-order-received form.login .woocommerce-form-login__rememberme,
body.woocommerce-order-received form.woocommerce-form-login .woocommerce-form-login__rememberme{
	display:inline-flex !important; align-items:center; gap:8px; font-weight:500; font-size:14px; margin:0 0 0 14px;
}
body.woocommerce-order-received .woocommerce-LostPassword a{ color:var(--apc-blauw); font-weight:700; }

/* De cards/summary vullen hun kolom; .apc-checkout en .apc-topbar-in houden
   hun eigen max-width van 1160px (design-breedte, gecentreerd). */
.apc-card,.apc-summary{ max-width:100%; box-sizing:border-box; }
.apc-checkout>*{ min-width:0; }
@media (max-width:900px){
	.apc-checkout{ grid-template-columns:1fr !important;gap:20px;padding:20px 16px 60px;width:100% !important;max-width:100% !important;margin:0 !important; }
	.apc-summary-kolom{ position:static !important; }
	.apc-wrap,.apc-topbar,.apc-topbar-in,.apc-col-main,.apc-summary-kolom,.apc-card,.apc-summary{ width:100% !important;max-width:100% !important;box-sizing:border-box; }
	.apc-topbar-in{ margin:0 auto; }
}
@media (max-width:768px){
	.apc-fields,
	.apc-wrap .woocommerce-billing-fields__field-wrapper,
	.apc-wrap .woocommerce-account-fields{ grid-template-columns:1fr !important; }
	.apc-fields .form-row-first,.apc-fields .form-row-last,
	.apc-fields .apc-full,.apc-fields .form-row-wide{ grid-column:1 / -1 !important; }
}
@media (max-width:600px){
	.apc-topbar-in{ padding:10px 16px !important;gap:10px;align-items:center; }
	.apc-topbar-in .apc-logo-full{ display:none !important; }
	.apc-topbar-in .apc-logo-icon{ display:block !important;height:56px !important;margin:0 !important; }
	.apc-status-tail{ display:none; }
	.apc-topbar-status{ font-size:13px !important;line-height:1.25;text-align:right;white-space:nowrap;min-width:0; }
	.apc-card{ padding:22px 18px; }
	.apc-summary{ padding:24px 20px; }
	.apc-card h2,.apc-summary h2{ font-size:18px !important; }
	.apc-stepper{ flex-wrap:wrap; }
}

/* ============================================================
   BESTELOVERZICHT — inklapbaar op mobiel (desktop altijd open)
   ============================================================ */
.apc-summary-toggle{ display:none; }
@media (max-width:900px){
	.apc-summary-kolom{ order:-1; }              /* samenvatting bovenaan op mobiel */
	.apc-reassure{ display:none; }               /* geruststelling niet dubbel bovenaan */
	.apc-summary{ padding:20px 22px; }
	.apc-summary-toggle{
		display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;
		background:transparent !important;border:0;padding:0;margin:0;color:#fff;cursor:pointer;
		font-family:'Inter',sans-serif;font-weight:900;font-size:18px;line-height:1.2;text-align:left;
		-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;
	}
	.apc-summary-toggle:focus,.apc-summary-toggle:active{ background:transparent !important;outline:none; }
	.apc-summary-toggle__meta{ display:flex;align-items:center;gap:10px;font-size:18px;white-space:nowrap; }
	.apc-summary-chevron{ color:var(--apc-navy-vink);font-size:12px;transition:transform .2s ease; }
	.apc-summary.open .apc-summary-chevron{ transform:rotate(180deg); }
	.apc-summary-body{ display:none;margin-top:22px; }
	.apc-summary.open .apc-summary-body{ display:block; }
	.apc-summary-body h2{ display:none; }        /* titel staat al in de toggle */
}

/* ============================================================
   MOBIEL — geen iOS-inzoom bij het aantikken van een veld.
   iOS-Safari zoomt automatisch in op velden met font-size < 16px.
   Op mobiel zetten we alle invoervelden (incl. het select2-zoekveld)
   op 16px → het scherm zoomt niet meer in bij focus.
   ============================================================ */
@media (max-width:768px){
	.apc-wrap input:not([type=checkbox]):not([type=radio]),
	.apc-wrap select,
	.apc-wrap textarea,
	.apc-field input,.apc-field select,.apc-field textarea,
	body.woocommerce-checkout .apc-wrap select#billing_country,
	.select2-search__field{ font-size:16px !important; }
}