/*
 * Stijlbrug: webshop ↔ leerportaal
 * ────────────────────────────────
 *
 * De waarden hieronder komen letterlijk uit het portaalthema
 * (themes/e-learning4u/theme.json in de MoodlePortal-repo). Verandert de
 * huisstijl daar, dan hoort dit bestand mee te veranderen.
 *
 * Bewust beperkt tot afronding, kleur en randen. Geen afmetingen, geen
 * posities, geen lettertype — dat zijn de dingen waarmee je een bestaande
 * WordPress-opmaak sloopt. Wat hier staat is omkeerbaar en raakt de indeling
 * van de pagina niet.
 */

:root {
  --e4u-accent: #0d7d82;
  --e4u-accent-hover: #0a6a6e;
  --e4u-text: #101828;
  --e4u-text-soft: #5b6778;
  --e4u-border: #e2e7ee;
  --e4u-surface: #ffffff;

  --e4u-radius: 12px;
  --e4u-radius-lg: 18px;
  --e4u-radius-sm: 9px;

  --e4u-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 1px 2px rgba(16, 24, 40, 0.03);
  --e4u-shadow-hover: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* ─── Afbeeldingen ────────────────────────────────────────────────────────
   Dit is wat opviel: in het portaal zijn de hoeken van de cursusafbeeldingen
   rond, in de shop scherp. */

.woocommerce ul.products li.product img,
.woocommerce div.product div.images img,
.woocommerce div.product div.images .flex-control-thumbs img,
.wp-block-post-featured-image img,
.ast-article-post .post-thumb img {
  border-radius: var(--e4u-radius);
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  border-radius: var(--e4u-radius-lg);
  overflow: hidden;
}

/* ─── Productkaarten in de catalogus ──────────────────────────────────────
   Dezelfde kaartvorm als op de homepage van het portaal: witte kaart, zachte
   rand, en bij hover iets meer schaduw. */

.woocommerce ul.products li.product {
  border-radius: var(--e4u-radius-lg);
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--e4u-shadow-hover);
  transform: translateY(-2px);
}

/* "Aanbieding"-label rond, zoals het "Nieuw"-label in het portaal. */
.woocommerce span.onsale,
.ast-onsale-card {
  border-radius: 999px;
  background: var(--e4u-accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ─── Knoppen ─────────────────────────────────────────────────────────────
   Accentkleur en afronding van het portaal. Ook "in winkelwagen". */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wp-block-button__link,
.ast-button,
.ast-custom-button,
.elementor-button {
  border-radius: var(--e4u-radius-sm);
  background-color: var(--e4u-accent);
  color: #fff;
  border-color: var(--e4u-accent);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wp-block-button__link:hover,
.ast-button:hover,
.ast-custom-button:hover,
.elementor-button:hover {
  background-color: var(--e4u-accent-hover);
  border-color: var(--e4u-accent-hover);
  color: #fff;
}

/* ─── Invoervelden ────────────────────────────────────────────────────────
   Zelfde afronding en focusring als de inlogvelden van het portaal. */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border-radius: var(--e4u-radius-sm);
  border-color: var(--e4u-border);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--e4u-accent);
  box-shadow: 0 0 0 3px rgba(13, 125, 130, 0.12);
  outline: none;
}

/* ─── Meldingen en tabellen ───────────────────────────────────────────────
   De blokken rond "product toegevoegd aan winkelwagen", de winkelwagen zelf
   en het afrekenoverzicht. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  border-radius: var(--e4u-radius);
  border-top-color: var(--e4u-accent);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--e4u-accent);
}

.woocommerce table.shop_table,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #payment {
  border-radius: var(--e4u-radius);
  overflow: hidden;
}

/* ─── Accentkleur voor links en prijzen ───────────────────────────────────
   Zodat de shop dezelfde teal aanhoudt als het portaal. */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--e4u-text);
  font-weight: 700;
}

.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--e4u-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCTPAGINA — zelfde opbouw als het leerportaal
   ═══════════════════════════════════════════════════════════════════════════

   De productpagina is met Elementor gebouwd: prijs, titel en "in winkelwagen"
   zijn losse widgets in één container. We kunnen die markup niet veranderen,
   dus we herkennen de container aan wát erin zit (`:has()`) in plaats van aan
   de Elementor-ID — die verandert zodra iemand het sjabloon bewerkt.

   Elementor schrijft per widget eigen regels met hoge specificiteit. Alleen
   hier, en alleen op de productpagina, gebruiken we daarom `!important`.
   Buiten `body.single-product` gebeurt dat nergens. */

/* ─── Titel ─────────────────────────────────────────────────────────────── */

body.single-product .elementor-widget-woocommerce-product-title h1,
body.single-product h1.product_title {
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--e4u-text);
}

/* ─── Koopblok ──────────────────────────────────────────────────────────────
   In het portaal staan prijs en knop samen in een blok met de accentkleur als
   zachte achtergrond. Hier doen we hetzelfde met de container waarin de
   "in winkelwagen"-widget zit. */

body.single-product .e-con:has(> .elementor-widget-woocommerce-product-add-to-cart) {
  background: rgba(13, 125, 130, 0.07);
  border: 1px solid var(--e4u-border);
  border-radius: var(--e4u-radius);
  padding: 20px 24px;
}

/* ─── Prijs ─────────────────────────────────────────────────────────────── */

body.single-product .elementor-widget-woocommerce-product-price .price,
body.single-product p.price {
  color: var(--e4u-text);
  font-weight: 780;
  letter-spacing: -0.02em;
}

body.single-product .price del {
  opacity: 0.5;
  font-weight: 500;
}

body.single-product .price ins {
  text-decoration: none;
}

/* ─── Knop "toevoegen aan winkelwagen" ──────────────────────────────────────
   Elementor zet hier een lichte teal (#61bbbe) met witte tekst; dat leest
   slecht. Het portaal gebruikt de diepere #0d7d82 voor knoppen, precies om die
   reden. Zelfde afronding als de knoppen in het portaal. */

body.single-product .single_add_to_cart_button,
body.single-product .elementor-add-to-cart button.button,
body.single-product form.cart button[type="submit"] {
  background-color: var(--e4u-accent) !important;
  border-color: var(--e4u-accent) !important;
  color: #fff !important;
  border-radius: var(--e4u-radius-sm) !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 14px 28px !important;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.single-product .single_add_to_cart_button:hover,
body.single-product .elementor-add-to-cart button.button:hover,
body.single-product form.cart button[type="submit"]:hover {
  background-color: var(--e4u-accent-hover) !important;
  border-color: var(--e4u-accent-hover) !important;
}

/* Aantalveld ernaast, in dezelfde stijl als de invoervelden van het portaal. */
body.single-product .quantity .qty {
  border-radius: var(--e4u-radius-sm);
  border: 1px solid var(--e4u-border);
  padding: 12px 10px;
}

/* ─── Geruststelling onder de knop ─────────────────────────────────────────
   Zelfde regel als in het portaal stond: wat er ná het afrekenen gebeurt.
   De tekst wordt door de plugin toegevoegd (zie e4u-theme-bridge.php). */

/* form.cart staat bij Elementor op `flex-wrap: nowrap`. Zonder wrap kan de
   regel hieronder niet naar een nieuwe regel en wordt hij naast de knop
   geperst. */
body.single-product form.cart {
  /* Elementor zet dit per widget met hogere specificiteit, vandaar !important
     — net als bij de knop hieronder, en alleen op de productpagina. */
  flex-wrap: wrap !important;
  align-items: center;
}

body.single-product .e4u-after-cart-note {
  display: block;
  width: 100%;
  /* form.cart is bij Elementor een flexbox, dus `width: 100%` alleen is niet
     genoeg: zonder deze regel gaat de tekst naast de knop staan in plaats van
     eronder. flex-basis dwingt een nieuwe regel af. */
  flex: 0 0 100%;
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--e4u-text-soft);
}

/* ─── Beschrijving ──────────────────────────────────────────────────────────
   Rustiger regelafstand, zoals de leestekst in het portaal. */

body.single-product .woocommerce-product-details__short-description,
body.single-product .elementor-widget-woocommerce-product-content {
  line-height: 1.7;
}

body.single-product .woocommerce-product-details__short-description ol,
body.single-product .woocommerce-product-details__short-description ul,
body.single-product .elementor-widget-woocommerce-product-content ol,
body.single-product .elementor-widget-woocommerce-product-content ul {
  padding-left: 22px;
}

body.single-product .woocommerce-product-details__short-description li,
body.single-product .elementor-widget-woocommerce-product-content li {
  margin-bottom: 7px;
}

/* ─── Tabbladen onder het product ──────────────────────────────────────────── */

body.single-product .woocommerce-tabs ul.tabs li {
  border-radius: var(--e4u-radius-sm) var(--e4u-radius-sm) 0 0;
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--e4u-accent);
}

/* ─── De bovenbalk van het portaal (alleen met E4U_PORTAL_URL) ────────────
   Een kopie van components/layout/Topbar.tsx in Atrium: 56 px hoog, logo met
   merkteken en woordmerk, menuknopjes met een zachte achtergrond als ze
   actief zijn, rechts het mandje en Inloggen. De kop van het thema gaat weg,
   zodat er maar één balk is. */

body.e4u-portaalbalk .elementor-location-header,
body.e4u-portaalbalk #masthead {
  display: none !important;
}

.e4u-balk {
  position: sticky;
  top: 0;
  z-index: 999;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #f5f7f9;
  border-bottom: 1px solid var(--e4u-border);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.admin-bar .e4u-balk { top: 32px; }

.e4u-balk-links { display: flex; align-items: center; gap: 32px; }

.e4u-balk-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.e4u-balk-logo img { height: 26px; width: auto; display: block; }
.e4u-balk-woord {
  display: block;
  height: 22px;
  width: 141px;
  background: var(--e4u-text);
  -webkit-mask: var(--e4u-woord) no-repeat left center / contain;
  mask: var(--e4u-woord) no-repeat left center / contain;
}

.e4u-balk-nav { display: flex; gap: 2px; }
.e4u-balk-nav a,
.e4u-balk-mandje {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--e4u-text-soft);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  transition: background 0.15s ease, color 0.15s ease;
}
.e4u-balk-nav a:hover,
.e4u-balk-mandje:hover { color: var(--e4u-text); background: rgba(13, 125, 130, 0.05); }

.e4u-balk-rechts { display: flex; align-items: center; gap: 4px; }

.e4u-balk-mandje { position: relative; display: flex; align-items: center; padding: 8px 10px; }
.e4u-balk-mandje.is-actief { color: var(--e4u-text); background: rgba(13, 125, 130, 0.05); }
.e4u-balk-aantal {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--e4u-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.e4u-balk-knop {
  margin-left: 6px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--e4u-accent);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.e4u-balk-knop:hover { background: var(--e4u-accent-hover); }

@media (max-width: 640px) {
  .e4u-balk { padding: 0 14px; }
  .e4u-balk-links { gap: 12px; }
  .e4u-balk-woord { display: none; }
}

/* ─── Afrekenen in de stijl van het portaal (body.e4u-afrekenen) ──────────
   Het Elementor-sjabloon gaf reuzenkoppen, letters met spaties ertussen en
   scherpe vakken. Hier: twee kaarten (gegevens links, bestelling rechts) op
   de lichte achtergrond van het portaal, gewone koppen, invoervelden zoals in
   Atrium en één duidelijke betaalknop. Alles beperkt tot de afrekenpagina. */

body.e4u-afrekenen,
body.e4u-afrekenen .site-content,
body.e4u-afrekenen .elementor-section,
body.e4u-afrekenen .e-con {
  background: #f5f7f9 !important;
}

body.e4u-afrekenen .elementor-widget-heading .elementor-heading-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: var(--e4u-text) !important;
}

body.e4u-afrekenen .e-checkout__container,
body.e4u-afrekenen .e-checkout__container * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

body.e4u-afrekenen .e-checkout__container {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px !important;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}

body.e4u-afrekenen .e-checkout__column-start,
body.e4u-afrekenen .e-checkout__order_review,
body.e4u-afrekenen .e-checkout__order_review-2,
body.e4u-afrekenen .e-coupon-box {
  background: #fff !important;
  border: 1px solid var(--e4u-border) !important;
  border-radius: var(--e4u-radius-lg) !important;
  box-shadow: var(--e4u-shadow) !important;
  padding: 28px !important;
  margin-bottom: 16px !important;
}

body.e4u-afrekenen .e-checkout__column-start .col2-set,
body.e4u-afrekenen .e-checkout__column-start .col-1,
body.e4u-afrekenen .e-checkout__column-start .col-2 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

body.e4u-afrekenen .e-checkout__container h3 {
  font-size: 19px !important;
  font-weight: 650 !important;
  color: var(--e4u-text) !important;
  margin: 0 0 18px !important;
  line-height: 1.3 !important;
}

/* Velden */
body.e4u-afrekenen .woocommerce-billing-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}
body.e4u-afrekenen .woocommerce-billing-fields__field-wrapper .form-row {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.e4u-afrekenen .woocommerce-billing-fields__field-wrapper .form-row-wide {
  grid-column: 1 / -1;
}
body.e4u-afrekenen .form-row label {
  display: block;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--e4u-text) !important;
  margin: 0 0 6px !important;
  line-height: 1.4 !important;
}
body.e4u-afrekenen .form-row .required { color: var(--e4u-accent) !important; text-decoration: none; }
body.e4u-afrekenen .form-row input.input-text,
body.e4u-afrekenen .form-row select,
body.e4u-afrekenen .form-row textarea,
body.e4u-afrekenen .e-coupon-box input.input-text {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  color: var(--e4u-text) !important;
  background: #f8fafc !important;
  border: 1px solid var(--e4u-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.e4u-afrekenen .form-row input.input-text:focus,
body.e4u-afrekenen .e-coupon-box input.input-text:focus {
  outline: none !important;
  border-color: var(--e4u-accent) !important;
  box-shadow: 0 0 0 3px rgba(13, 125, 130, 0.12) !important;
  background: #fff !important;
}
body.e4u-afrekenen .form-row .description {
  font-size: 12.5px !important;
  color: var(--e4u-text-soft) !important;
  margin-top: 6px !important;
  background: none !important;
  padding: 0 !important;
}

/* Deelnemers (WooMoodle Connect) */
body.e4u-afrekenen .wmc-participants {
  margin-top: 24px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--e4u-border) !important;
}

/* Bestelling */
body.e4u-afrekenen .woocommerce-checkout-review-order-table {
  border: none !important;
  margin: 0 !important;
}
body.e4u-afrekenen .woocommerce-checkout-review-order-table th,
body.e4u-afrekenen .woocommerce-checkout-review-order-table td {
  padding: 12px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--e4u-border) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--e4u-text) !important;
  background: none !important;
}
body.e4u-afrekenen .woocommerce-checkout-review-order-table thead th {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--e4u-text-soft) !important;
}
body.e4u-afrekenen .woocommerce-checkout-review-order-table td:last-child,
body.e4u-afrekenen .woocommerce-checkout-review-order-table th:last-child {
  text-align: right !important;
}
body.e4u-afrekenen .woocommerce-checkout-review-order-table .order-total th,
body.e4u-afrekenen .woocommerce-checkout-review-order-table .order-total td {
  border-bottom: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
body.e4u-afrekenen .woocommerce-checkout-review-order-table .includes_tax {
  display: block;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--e4u-text-soft) !important;
}

/* Kortingscode: klein, onder de bestelling */
body.e4u-afrekenen .e-coupon-box { padding: 18px 28px !important; font-size: 14px !important; }

/* Betalen */
body.e4u-afrekenen #payment,
body.e4u-afrekenen #payment ul.payment_methods,
body.e4u-afrekenen #payment div.payment_box {
  background: none !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.e4u-afrekenen #payment div.payment_box::before { display: none !important; }
body.e4u-afrekenen #payment ul.payment_methods li { font-size: 15px !important; }
body.e4u-afrekenen .woocommerce-privacy-policy-text,
body.e4u-afrekenen .woocommerce-terms-and-conditions-wrapper {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--e4u-text-soft) !important;
}
body.e4u-afrekenen #place_order {
  width: 100% !important;
  height: 52px !important;
  margin-top: 14px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--e4u-accent) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}
body.e4u-afrekenen #place_order:hover { background: var(--e4u-accent-hover) !important; }

@media (max-width: 860px) {
  body.e4u-afrekenen .e-checkout__container { grid-template-columns: 1fr; }
  body.e4u-afrekenen .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* Bestelling: productnaam breed, bedrag smal */
body.e4u-afrekenen .woocommerce-checkout-review-order-table { table-layout: fixed; width: 100% !important; }
body.e4u-afrekenen .woocommerce-checkout-review-order-table .product-name,
body.e4u-afrekenen .woocommerce-checkout-review-order-table thead th:first-child,
body.e4u-afrekenen .woocommerce-checkout-review-order-table tfoot th { width: 68% !important; }
body.e4u-afrekenen .woocommerce-checkout-review-order-table .product-quantity { color: var(--e4u-text-soft); font-weight: 500; }

/* De zwevende taalkeuze van TranslatePress hoort niet over het formulier */
body.e4u-afrekenen #trp-floater-ls,
body.e4u-afrekenen .trp-floater-ls-names { display: none !important; }

/* Betaalblok: rustiger, geen cursief */
body.e4u-afrekenen #payment div.payment_box p,
body.e4u-afrekenen .woocommerce-privacy-policy-text p { font-style: normal !important; }
body.e4u-afrekenen #payment .form-row label.checkbox { font-size: 14px !important; font-weight: 500 !important; }

/* ─── Winkelmandje in de stijl van het portaal (body.e4u-mandje) ─────────
   Zelfde kaarten als bij afrekenen: links de cursussen, rechts het overzicht
   met één knop. Geen letters met spaties, geen hoofdletterknoppen, en geen
   "Update Cart": een cursus koop je per stuk, er valt niets bij te werken. */

body.e4u-mandje,
body.e4u-mandje .site-content,
body.e4u-mandje .elementor-section,
body.e4u-mandje .e-con { background: #f5f7f9 !important; }

body.e4u-mandje .e-cart__container,
body.e4u-mandje .e-cart__container * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

body.e4u-mandje .e-cart__container {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px !important;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}

body.e4u-mandje .e-cart__column-start,
body.e4u-mandje .e-cart__column-end .cart_totals {
  background: #fff !important;
  border: 1px solid var(--e4u-border) !important;
  border-radius: var(--e4u-radius-lg) !important;
  box-shadow: var(--e4u-shadow) !important;
  padding: 28px !important;
}
body.e4u-mandje .e-cart__column-end { width: auto !important; }

body.e4u-mandje .cart_totals h2 {
  font-size: 19px !important;
  font-weight: 650 !important;
  color: var(--e4u-text) !important;
  margin: 0 0 14px !important;
  line-height: 1.3 !important;
}

/* Tabel met cursussen */
body.e4u-mandje table.shop_table { border: none !important; margin: 0 !important; width: 100% !important; }
body.e4u-mandje table.shop_table th,
body.e4u-mandje table.shop_table td {
  padding: 14px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--e4u-border) !important;
  background: none !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--e4u-text) !important;
  vertical-align: middle !important;
}
body.e4u-mandje table.cart thead th {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--e4u-text-soft) !important;
}
body.e4u-mandje table.cart .product-thumbnail img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  border-radius: 10px !important;
}
body.e4u-mandje table.cart .product-name a {
  color: var(--e4u-text) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
body.e4u-mandje table.cart .product-quantity,
body.e4u-mandje table.cart th.product-quantity { display: none !important; }
body.e4u-mandje table.cart .product-remove a.remove {
  color: var(--e4u-text-soft) !important;
  border: 1px solid var(--e4u-border) !important;
  border-radius: 999px !important;
}
body.e4u-mandje table.cart .product-remove a.remove:hover { color: #b42318 !important; background: #fef3f2 !important; }

/* "Update Cart" weg; kortingscode klein en rustig */
body.e4u-mandje button[name="update_cart"] { display: none !important; }
body.e4u-mandje .coupon {
  display: flex !important;
  gap: 10px;
  align-items: center;
  margin-top: 18px !important;
}
body.e4u-mandje .coupon input.input-text {
  flex: 1;
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 14.5px !important;
  background: #f8fafc !important;
  border: 1px solid var(--e4u-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.e4u-mandje .coupon button.button {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  border: 1px solid var(--e4u-border) !important;
  background: #fff !important;
  color: var(--e4u-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* Overzicht rechts */
body.e4u-mandje .cart_totals table.shop_table th { width: 50%; font-weight: 500 !important; }
body.e4u-mandje .cart_totals table.shop_table td { text-align: right !important; }
body.e4u-mandje .cart_totals .order-total th,
body.e4u-mandje .cart_totals .order-total td {
  border-bottom: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
body.e4u-mandje .cart_totals .includes_tax {
  display: block;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--e4u-text-soft) !important;
}
body.e4u-mandje .wc-proceed-to-checkout { padding: 16px 0 0 !important; }
body.e4u-mandje .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: var(--e4u-accent) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}
body.e4u-mandje .wc-proceed-to-checkout a.checkout-button:hover { background: var(--e4u-accent-hover) !important; }

/* Meldingen (bijv. "toegevoegd aan je winkelwagen") als rustige kaart */
body.e4u-mandje .woocommerce-message,
body.e4u-mandje .woocommerce-info,
body.e4u-mandje .woocommerce-error,
body.e4u-afrekenen .woocommerce-error,
body.e4u-afrekenen .woocommerce-info {
  max-width: 1080px;
  margin: 0 auto 20px !important;
  border: 1px solid var(--e4u-border) !important;
  border-left: 3px solid var(--e4u-accent) !important;
  border-radius: var(--e4u-radius) !important;
  background: #fff !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14.5px !important;
  color: var(--e4u-text) !important;
}
body.e4u-mandje .woocommerce-error,
body.e4u-afrekenen .woocommerce-error { border-left-color: #b42318 !important; }

/* "Toegevoegd aan je winkelwagen": een groene succesbalk met witte letters. */
body.e4u-portaalbalk .woocommerce-message {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 18px 12px 52px !important;
  border: none !important;
  background: linear-gradient(120deg, #0d7d82 0%, #12958f 55%, #1fae8f 100%) !important;
  color: #fff !important;
  font-weight: 550;
  box-shadow: 0 6px 20px rgba(13, 125, 130, .22);
}
body.e4u-portaalbalk .woocommerce-message::before {
  color: #fff !important;
  top: 50% !important;
  transform: translateY(-50%);
  left: 18px !important;
}
body.e4u-portaalbalk .woocommerce-message a.button {
  order: 2;
  margin-left: auto !important;
  float: none !important;
  padding: 8px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .95) !important;
  color: var(--e4u-accent) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}
body.e4u-portaalbalk .woocommerce-message a.button:hover { background: #fff !important; }
/* In het mandje zelf ben je er al: dan geen "Bekijk winkelwagen". */
body.e4u-mandje .woocommerce-message a.button.wc-forward { display: none !important; }

@media (max-width: 860px) {
  body.e4u-mandje .e-cart__container { grid-template-columns: 1fr; }
}

/* Elementor zet het label in het overzicht als ::before op de bedragcel,
   met 10px tussen de letters. Gewoon tekst, zoals de rest. */
body.e4u-mandje .cart_totals td::before,
body.e4u-mandje table.shop_table td::before {
  letter-spacing: normal !important;
  text-transform: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--e4u-text) !important;
}

/* Sterker dan de regel van het sjabloon */
body.e4u-mandje.woocommerce-cart .woocommerce-cart-form button[name="update_cart"] { display: none !important; }
body.e4u-mandje.woocommerce-cart .woocommerce-cart-form td.actions { border-bottom: none !important; padding-top: 4px !important; }

/* Ook in het mandje geen zwevende taalkeuze */
body.e4u-mandje #trp-floater-ls,
body.e4u-mandje .trp-floater-ls-names { display: none !important; }

/* Rij in het mandje: verwijderknopje, plaatje en naam met wat lucht */
body.e4u-mandje table.cart td.product-remove { width: 36px !important; }
body.e4u-mandje table.cart td.product-thumbnail { width: 80px !important; padding-right: 14px !important; }
body.e4u-mandje table.cart td.product-price,
body.e4u-mandje table.cart td.product-subtotal { white-space: nowrap; text-align: right !important; padding-left: 16px !important; }
body.e4u-mandje table.cart td.product-price { color: var(--e4u-text-soft) !important; }

/* Afrekenen: productnaam over de volle breedte van de kolom */
body.e4u-afrekenen .woocommerce-checkout-review-order-table td.product-name,
body.e4u-afrekenen .woocommerce-checkout-review-order-table th.product-name { width: 72% !important; max-width: none !important; }
body.e4u-afrekenen .woocommerce-checkout-review-order-table td.product-total,
body.e4u-afrekenen .woocommerce-checkout-review-order-table th.product-total { width: 28% !important; }

/* ─── Bedankpagina (body.e4u-bedankt) ───────────────────────────────────── */
body.e4u-bedankt { background: #f5f7f9 !important; }
/* De kaart vertelt het al: de losse kop en de technische samenvatting van
   het sjabloon (Order Number, Order Date …) mogen weg. */
body.e4u-bedankt .elementor-widget-woocommerce-purchase-summary,
body.e4u-bedankt .woocommerce-thankyou-order-received { display: none !important; }
body.e4u-bedankt .site-content .elementor-widget-heading .elementor-heading-title { display: none !important; }
/* Wat er van het sjabloon overblijft is leeg; geen halve pagina wit onder de kaart. */
body.e4u-bedankt .site-content { display: none !important; }
body.e4u-bedankt .hfeed { min-height: 0 !important; }
body.e4u-bedankt .e4u-bedankt-kaart { margin-bottom: 48px; }

.e4u-bedankt-kaart {
  max-width: 560px;
  margin: 56px auto 40px;
  padding: 36px 36px 32px;
  background: #fff;
  border: 1px solid var(--e4u-border);
  border-radius: var(--e4u-radius-lg);
  box-shadow: var(--e4u-shadow);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--e4u-text);
  text-align: center;
}
.e4u-bedankt-vink {
  width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(13, 125, 130, 0.1);
  color: var(--e4u-accent);
  display: flex; align-items: center; justify-content: center;
}
.e4u-bedankt-kaart h1 {
  margin: 0 0 12px;
  font-family: inherit !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--e4u-text) !important;
}
.e4u-bedankt-intro { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--e4u-text-soft); }
.e4u-bedankt-intro strong { color: var(--e4u-text); }
.e4u-bedankt-lijst { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; }
.e4u-bedankt-lijst li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--e4u-border);
  font-size: 15px;
}
.e4u-bedankt-lijst li.e4u-bedankt-totaal { border-bottom: none; font-weight: 700; }
.e4u-bedankt-nummer { margin: 0 0 22px; font-size: 13px; color: var(--e4u-text-soft); }
.e4u-bedankt-knop {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px;
  border-radius: 999px;
  background: var(--e4u-accent);
  color: #fff !important;
  font-size: 15px; font-weight: 650;
  text-decoration: none !important;
}
.e4u-bedankt-knop:hover { background: var(--e4u-accent-hover); }

/* ─── Verwijderknopje in het mandje ───────────────────────────────────────
   Was een scheef ovaaltje met een kruisje ernaast. Nu een rond knopje van
   32 px met het kruisje precies in het midden, rood bij hover. */
body.e4u-mandje table.cart td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--e4u-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--e4u-text-soft) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.e4u-mandje table.cart td.product-remove a.remove::before,
body.e4u-mandje table.cart td.product-remove a.remove::after { display: none !important; content: none !important; }
body.e4u-mandje table.cart td.product-remove a.remove > * { display: none !important; }
body.e4u-mandje table.cart td.product-remove a.remove {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6778' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
body.e4u-mandje table.cart td.product-remove a.remove:hover {
  border-color: #fecdca !important;
  background-color: #fef3f2 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
}
body.e4u-mandje table.cart td.product-remove { width: 48px !important; text-align: center !important; }
/* Waardebon-knop op één regel */
body.e4u-mandje .coupon button.button { white-space: nowrap !important; }

/* ─── Afrekenen: indeling ─────────────────────────────────────────────────
   Rij 1: links "Jouw gegevens", rechts "Je bestelling", bovenkant gelijk en
   even hoog. Rij 2: de waardebon over de volle breedte. Rij 3: betalen over
   de volle breedte. De rechterkolom van het sjabloon (sticky) lossen we op
   in het raster, zodat de drie blokken los geplaatst kunnen worden. */
body.e4u-afrekenen .e-checkout__container {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "gegevens bestelling"
    "bon bon"
    "betaal betaal";
  align-items: stretch !important;
  row-gap: 20px !important;
}
body.e4u-afrekenen .e-checkout__column-end,
body.e4u-afrekenen .e-checkout__column-inner {
  display: contents !important;
}
body.e4u-afrekenen .e-checkout__column-start { grid-area: gegevens; margin: 0 !important; }
body.e4u-afrekenen .e-checkout__order_review { grid-area: bestelling; margin: 0 !important; }
body.e4u-afrekenen .e-coupon-box { grid-area: bon; margin: 0 !important; }
body.e4u-afrekenen .e-checkout__order_review-2 { grid-area: betaal; margin: 0 !important; }
body.e4u-afrekenen .e-checkout__column-start,
body.e4u-afrekenen .e-checkout__order_review { height: 100%; box-sizing: border-box; }

/* Betaalblok breed: links de betaalwijze en de vinkjes, rechts de knop */
body.e4u-afrekenen .e-checkout__order_review-2 #payment {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  column-gap: 36px;
  align-items: end;
}
body.e4u-afrekenen .e-checkout__order_review-2 #payment ul.payment_methods { grid-column: 1 / -1; margin: 0 0 6px !important; }
body.e4u-afrekenen .e-checkout__order_review-2 #payment .place-order {
  display: contents !important;
}
body.e4u-afrekenen .e-checkout__order_review-2 #payment .place-order > * { grid-column: 1; margin: 6px 0 !important; }
body.e4u-afrekenen .e-checkout__order_review-2 #payment .place-order > #place_order {
  grid-column: 2;
  grid-row: 2 / span 4;
  align-self: end;
  margin: 0 !important;
}
body.e4u-afrekenen .e-checkout__order_review-2 #payment .place-order > noscript { display: none !important; }

@media (max-width: 860px) {
  body.e4u-afrekenen .e-checkout__container {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "gegevens" "bestelling" "bon" "betaal";
  }
  body.e4u-afrekenen .e-checkout__order_review-2 #payment { display: block !important; }
}

/* ─── Voettekst van de winkel: nieuwsbrief als kaart, rustige onderbalk ─── */
body.e4u-portaalbalk .elementor-location-footer,
body.e4u-portaalbalk .elementor-location-footer .e-con { background: #f5f7f9 !important; }
body.e4u-portaalbalk .elementor-location-footer,
body.e4u-portaalbalk .elementor-location-footer * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
body.e4u-portaalbalk .elementor-location-footer > .e-con:first-child {
  max-width: 1080px !important;
  margin: 48px auto 0 !important;
  padding: 32px 36px !important;
  background: #fff !important;
  border: 1px solid var(--e4u-border) !important;
  border-radius: var(--e4u-radius-lg) !important;
  box-shadow: var(--e4u-shadow) !important;
  gap: 8px !important;
}
body.e4u-portaalbalk .elementor-location-footer > .e-con:first-child .elementor-widget-heading .elementor-heading-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--e4u-text) !important;
  margin: 0 !important;
}
body.e4u-portaalbalk .elementor-location-footer > .e-con:first-child .elementor-widget-text-editor,
body.e4u-portaalbalk .elementor-location-footer > .e-con:first-child .elementor-widget-text-editor p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--e4u-text-soft) !important;
  max-width: 640px;
  margin: 0 0 6px !important;
}
body.e4u-portaalbalk .elementor-location-footer .elementor-form .elementor-field-group { margin-bottom: 0 !important; }
body.e4u-portaalbalk .elementor-location-footer .elementor-form .elementor-form-fields-wrapper { gap: 10px; flex-wrap: nowrap; }
body.e4u-portaalbalk .elementor-location-footer .elementor-form input.elementor-field {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  color: var(--e4u-text) !important;
  background: #f8fafc !important;
  border: 1px solid var(--e4u-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.e4u-portaalbalk .elementor-location-footer .elementor-form input.elementor-field::placeholder {
  letter-spacing: normal !important;
  color: #94a3b8 !important;
}
body.e4u-portaalbalk .elementor-location-footer .elementor-form input.elementor-field:focus {
  border-color: var(--e4u-accent) !important;
  box-shadow: 0 0 0 3px rgba(13, 125, 130, 0.12) !important;
  background: #fff !important;
  outline: none !important;
}
body.e4u-portaalbalk .elementor-location-footer .elementor-form button[type="submit"] {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 22px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--e4u-accent) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
body.e4u-portaalbalk .elementor-location-footer .elementor-form button[type="submit"]:hover { background: var(--e4u-accent-hover) !important; }
body.e4u-portaalbalk .elementor-location-footer .elementor-social-icons-wrapper { margin-top: 18px; }
body.e4u-portaalbalk .elementor-location-footer > .e-con:first-child > .elementor-widget-form { margin-bottom: 0 !important; }
body.e4u-portaalbalk .elementor-location-footer .elementor-social-icon {
  background: var(--e4u-bg-subtle, #eceff3) !important;
  border-radius: 8px !important;
}
body.e4u-portaalbalk .elementor-location-footer .elementor-social-icon i,
body.e4u-portaalbalk .elementor-location-footer .elementor-social-icon svg { color: var(--e4u-text-soft) !important; fill: var(--e4u-text-soft) !important; }

/* Onderbalk: klein en rustig, zoals onderaan het portaal */
body.e4u-portaalbalk .elementor-location-footer > .e-con:last-child {
  max-width: 1080px !important;
  margin: 24px auto 0 !important;
  padding: 18px 0 28px !important;
  border-top: 1px solid var(--e4u-border) !important;
}
body.e4u-portaalbalk .elementor-location-footer > .e-con:last-child .elementor-heading-title,
body.e4u-portaalbalk .elementor-location-footer > .e-con:last-child .elementor-icon-list-text {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--e4u-text-soft) !important;
}

/* Knoptekst op één regel. */
body.e4u-afrekenen #place_order { white-space: nowrap; padding-inline: 28px !important; }

/* ─── Tekstpagina's: Help & info, Voorwaarden & privacy ─────────────────────
   De inhoud zijn gewone WordPress-blokken in een groep .e4u-tekst
   (zie paginas/). Hier alleen de vorm, zodat ze te bewerken blijven. */
body:has(.e4u-tekst) { background: #f5f7f9 !important; }
.e4u-tekst {
  max-width: 820px !important;
  margin: 48px auto 64px !important;
  padding: 0 24px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px;
  line-height: 1.7;
  color: var(--e4u-text-soft);
}
.e4u-tekst > * { max-width: none !important; }
.e4u-tekst a { color: var(--e4u-accent); font-weight: 550; text-decoration: none; }
.e4u-tekst a:hover { text-decoration: underline; }
.e4u-tekst .e4u-tekst-label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(13, 125, 130, .1);
  color: var(--e4u-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.e4u-tekst h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--e4u-text);
}
.e4u-tekst .e4u-tekst-intro { margin: 0 0 36px; font-size: 18px; line-height: 1.65; color: var(--e4u-text); }
.e4u-tekst h2 {
  margin: 44px 0 14px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 650;
  color: var(--e4u-text);
  scroll-margin-top: 80px;
}
.e4u-tekst h3 {
  margin: 28px 0 8px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 650;
  color: var(--e4u-text);
  scroll-margin-top: 80px;
}
.e4u-tekst p { margin: 0 0 14px; }
.e4u-tekst ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.e4u-tekst ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.e4u-tekst ul li::before {
  content: ""; position: absolute; left: 4px; top: .7em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--e4u-accent);
}
.e4u-tekst mark { background: #fff3c4; color: inherit; padding: 0 4px; border-radius: 4px; }

/* Vragen als uitklapkaarten */
.e4u-tekst details {
  margin: 0 0 10px;
  background: #fff;
  border: 1px solid var(--e4u-border);
  border-radius: 14px;
  transition: box-shadow .15s;
}
.e4u-tekst details[open] { box-shadow: 0 6px 20px rgba(16, 24, 40, .06); }
.e4u-tekst summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--e4u-text);
}
.e4u-tekst summary::-webkit-details-marker { display: none; }
.e4u-tekst summary::after {
  content: "";
  flex: 0 0 22px; height: 22px;
  border-radius: 50%;
  background: rgba(13, 125, 130, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230d7d82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: transform .2s;
}
.e4u-tekst details[open] summary::after { transform: rotate(180deg); }
.e4u-tekst details > p { margin: 0; padding: 0 20px 18px; }

/* Inhoudsopgave en contactblok */
.e4u-tekst .e4u-tekst-inhoud {
  margin: 0 0 12px;
  padding: 18px 22px 8px;
  background: #fff;
  border: 1px solid var(--e4u-border);
  border-radius: 14px;
}
.e4u-tekst .e4u-tekst-inhoud p { margin-bottom: 8px; color: var(--e4u-text); }
.e4u-tekst .e4u-tekst-contact {
  margin-top: 40px;
  padding: 26px 28px;
  border-radius: 18px;
  background: linear-gradient(120deg, #0d7d82 0%, #12958f 55%, #1fae8f 100%);
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 20px rgba(13, 125, 130, .22);
}
.e4u-tekst .e4u-tekst-contact h3 { margin: 0 0 6px; color: #fff; font-size: 20px; }
.e4u-tekst .e4u-tekst-contact p { margin: 0; }
.e4u-tekst .e4u-tekst-contact a { color: #fff; text-decoration: underline; }
/* De site is alleen Nederlands; de taalkiezer van TranslatePress zit hier in de weg. */
body:has(.e4u-tekst) #trp-floater-ls { display: none !important; }
body.e4u-portaalbalk .elementor-location-footer .elementor-icon-list-item a { text-decoration: none; }
body.e4u-portaalbalk .elementor-location-footer .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--e4u-accent) !important; }
/* WooCommerce zet de focus op de melding (voor schermlezers); de blauwe
   focusrand van de browser hoort niet bij een melding die je niet aanklikt. */
body.e4u-portaalbalk .woocommerce-message:focus,
body.e4u-portaalbalk .woocommerce-info:focus,
body.e4u-portaalbalk .woocommerce-error:focus,
body.e4u-portaalbalk .woocommerce-notices-wrapper:focus { outline: none !important; }

/* Nieuwsbrief en onderbalk even breed als de kaarten erboven (mandje,
   afrekenen: 1080 px min 2 × 36 px rand). Op smalle schermen 16 px rand. */
body.e4u-portaalbalk .elementor-location-footer > .e-con:first-child,
body.e4u-portaalbalk .elementor-location-footer > .e-con:last-child {
  width: calc(100% - 72px) !important;
  max-width: 1008px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 767px) {
  body.e4u-portaalbalk .elementor-location-footer > .e-con:first-child,
  body.e4u-portaalbalk .elementor-location-footer > .e-con:last-child { width: calc(100% - 32px) !important; }
}

/* ─── Afrekenen: kop met stappen, plaatjes, zekerheden (1.9.0) ─────────── */
/* De losse Elementor-kop "Betalen" en de lege ruimte erboven maken plaats
   voor een eigen kop met de drie stappen. */
body.e4u-afrekenen:not(.e4u-bedankt) .site-content .elementor-widget-heading { display: none !important; }
body.e4u-afrekenen:not(.e4u-bedankt) .site-content [data-elementor-type="wp-page"] > .e-con {
  padding-top: 36px !important;
  margin-top: 0 !important;
}
.e4u-afreken-kop {
  max-width: 1080px;
  margin: 0 auto 28px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.e4u-afreken-kop h1 {
  margin: 22px 0 6px !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--e4u-text) !important;
}
.e4u-afreken-kop p { margin: 0 !important; font-size: 16px; line-height: 1.6; color: var(--e4u-text-soft); }
.e4u-stappen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.e4u-stappen li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  font-size: 14px;
  font-weight: 550;
  color: var(--e4u-text-soft);
}
.e4u-stappen li:not(:last-child)::after {
  content: "";
  width: 44px;
  height: 2px;
  margin: 0 14px 0 5px;
  border-radius: 2px;
  background: var(--e4u-border);
}
.e4u-stappen li.klaar:not(:last-child)::after { background: var(--e4u-accent); }
.e4u-stappen a { color: inherit !important; text-decoration: none !important; }
.e4u-stappen a:hover { color: var(--e4u-accent) !important; }
.e4u-stap-bol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--e4u-border);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--e4u-text-soft);
  box-sizing: border-box;
}
.e4u-stap-bol svg { width: 15px; height: 15px; stroke-width: 3; }
.e4u-stappen li.klaar .e4u-stap-bol,
.e4u-stappen li.nu .e4u-stap-bol { border-color: var(--e4u-accent); background: var(--e4u-accent); color: #fff; }
.e4u-stappen li.nu { color: var(--e4u-text); font-weight: 650; }
.e4u-stappen li.nu .e4u-stap-bol { box-shadow: 0 0 0 4px rgba(13, 125, 130, .15); }

/* Kaartkoppen met een icoontje */
body.e4u-afrekenen .woocommerce-billing-fields > h3,
body.e4u-afrekenen .e-checkout__order_review > h3 {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
body.e4u-afrekenen .woocommerce-billing-fields > h3::before,
body.e4u-afrekenen .e-checkout__order_review > h3::before {
  content: "";
  flex: 0 0 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(13, 125, 130, .1) center / 18px no-repeat;
}
body.e4u-afrekenen .woocommerce-billing-fields > h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d7d82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}
body.e4u-afrekenen .e-checkout__order_review > h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d7d82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
}

/* "Je bestelling" groeit niet mee met het formulier. Niet meeschuiven:
   het betaalblok eronder loopt over de volle breedte, dan schuift hij erover. */
body.e4u-afrekenen .e-checkout__order_review {
  height: auto !important;
  align-self: start;
  position: static !important;
}
body.e4u-afrekenen .e-checkout__column-start { height: auto !important; }

/* Plaatje bij elke cursus */
.e4u-bestel-regel { display: flex; align-items: center; gap: 14px; }
.e4u-bestel-beeld {
  flex: 0 0 56px;
  width: 56px !important;
  height: 56px !important;
  object-fit: cover;
  border-radius: 12px !important;
  border: 1px solid var(--e4u-border);
}
.e4u-bestel-naam { font-weight: 600; color: var(--e4u-text); line-height: 1.4; }
body.e4u-afrekenen .woocommerce-checkout-review-order-table .cart_item .product-quantity {
  display: block;
  margin: 2px 0 0 70px;
  font-size: 13px;
}
body.e4u-afrekenen .woocommerce-checkout-review-order-table .cart_item td { vertical-align: middle !important; }

/* Wat je mag verwachten */
body.e4u-afrekenen tr.e4u-zeker td {
  padding: 20px 0 0 !important;
  border: none !important;
}
tr.e4u-zeker ul {
  margin: 0 !important;
  padding: 18px 0 0 !important;
  list-style: none !important;
  border-top: 1px dashed var(--e4u-border);
}
tr.e4u-zeker li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px !important;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.45;
  color: var(--e4u-text-soft);
  text-align: left;
}
tr.e4u-zeker li svg {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(13, 125, 130, .1);
  color: var(--e4u-accent);
}
tr.e4u-zeker a { color: var(--e4u-accent) !important; font-weight: 600; text-decoration: none; }

@media (max-width: 767px) {
  .e4u-stappen li:not(:last-child)::after { width: 18px; margin: 0 8px 0 4px; }
  .e4u-stappen li span:not(.e4u-stap-bol), .e4u-stappen li a { font-size: 12.5px; }
  .e4u-afreken-kop h1 { font-size: 28px !important; }
  body.e4u-afrekenen .e-checkout__order_review { position: static; }
}

/* Telefoon: kaarten binnen het scherm, stappen op één regel (alleen de
   huidige stap met tekst). */
body.e4u-afrekenen .e-checkout__column-start,
body.e4u-afrekenen .e-checkout__order_review,
body.e4u-afrekenen .e-checkout__order_review-2,
body.e4u-afrekenen .e-coupon-box { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; }
@media (max-width: 600px) {
  .e4u-stappen { flex-wrap: nowrap; }
  .e4u-stappen li:not(.nu) > a,
  .e4u-stappen li:not(.nu) > span:not(.e4u-stap-bol) { display: none; }
  .e4u-stappen li:not(:last-child)::after { width: 22px; margin: 0 8px; }
  body.e4u-afrekenen .e-checkout__column-start,
  body.e4u-afrekenen .e-checkout__order_review { padding: 22px 18px !important; }
}
.e4u-bestel-naam { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 600px) {
  .e4u-bestel-beeld { flex-basis: 44px; width: 44px !important; height: 44px !important; border-radius: 10px !important; }
  .e4u-bestel-regel { gap: 10px; }
  body.e4u-afrekenen .woocommerce-checkout-review-order-table .cart_item .product-quantity { margin-left: 54px; }
}

/* ─── Deelnemers (WooMoodle Connect 2.4) ─────────────────────────────────── */
body.e4u-afrekenen .wmc-participants > h3 { font-size: 19px !important; margin-bottom: 6px !important; }
body.e4u-afrekenen .wmc-participants .wmc-uitleg { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--e4u-text-soft); }
body.e4u-afrekenen .wmc-cursus {
  margin: 0 0 14px;
  padding: 16px 18px;
  border: none;
  border-radius: 14px;
  background: #f8fafc;
  transition: opacity .15s;
}
body.e4u-afrekenen .wmc-cursus.wmc-bezig { opacity: .55; pointer-events: none; }
body.e4u-afrekenen .wmc-cursus-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 14.5px;
  color: var(--e4u-text);
}
body.e4u-afrekenen .wmc-cursus-meta { white-space: nowrap; font-size: 13.5px; color: var(--e4u-text-soft); }
body.e4u-afrekenen .wmc-cursus-meta .wmc-aantal { font-weight: 700; color: var(--e4u-accent); }
body.e4u-afrekenen .wmc-participant-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 10px;
}
body.e4u-afrekenen .wmc-nummer {
  flex: 0 0 28px;
  height: 28px;
  margin-top: 7px;
  border-radius: 50%;
  background: rgba(13, 125, 130, .12);
  color: var(--e4u-accent);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.e4u-afrekenen .wmc-zelf-tekst {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-height: 42px;
  font-size: 14.5px;
  color: var(--e4u-text);
}
body.e4u-afrekenen .wmc-zelf-tekst > span { color: var(--e4u-text-soft); }
body.e4u-afrekenen .wmc-velden { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
body.e4u-afrekenen .wmc-velden[hidden], body.e4u-afrekenen .wmc-zelf-tekst[hidden] { display: none !important; }
body.e4u-afrekenen .wmc-velden input {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 12px !important;
  font-size: 14.5px !important;
  background: #fff !important;
  border: 1px solid var(--e4u-border) !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
body.e4u-afrekenen .wmc-velden input:focus { border-color: var(--e4u-accent) !important; box-shadow: 0 0 0 3px rgba(13, 125, 130, .15) !important; outline: none !important; }
body.e4u-afrekenen .wmc-velden input[type="email"] { grid-column: 1 / -1; }
body.e4u-afrekenen .wmc-participants button.wmc-ander,
body.e4u-afrekenen .wmc-participants button.wmc-zelf-terug {
  margin-left: auto;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: var(--e4u-accent) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
body.e4u-afrekenen .wmc-participants button.wmc-zelf-terug { grid-column: 1 / -1; justify-self: start; margin: 0; }
body.e4u-afrekenen .wmc-participants button.wmc-ander:hover,
body.e4u-afrekenen .wmc-participants button.wmc-zelf-terug:hover { text-decoration: underline !important; }
body.e4u-afrekenen .wmc-participants button.wmc-verwijder {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-top: 5px;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--e4u-border) !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6778' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 14px no-repeat !important;
  font-size: 0 !important;
  color: transparent !important;
  transition: background-color .15s, border-color .15s;
}
body.e4u-afrekenen .wmc-participants button.wmc-verwijder:hover {
  border-color: #fda29b !important;
  background-color: #fef3f2 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") !important;
}
body.e4u-afrekenen .wmc-participants button.wmc-toevoegen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0 40px;
  padding: 9px 16px !important;
  border: 1.5px dashed rgba(13, 125, 130, .45) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--e4u-accent) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  transition: background-color .15s, border-color .15s;
}
body.e4u-afrekenen .wmc-participants button.wmc-toevoegen span { font-size: 18px; line-height: 1; }
body.e4u-afrekenen .wmc-participants button.wmc-toevoegen:hover { border-style: solid !important; border-color: var(--e4u-accent) !important; background: rgba(13, 125, 130, .06) !important; }
body.e4u-afrekenen .wmc-bevestig { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 0; font-size: 14px; color: var(--e4u-text); }
body.e4u-afrekenen .wmc-bevestig[hidden] { display: none !important; }

/* ─── Vinkjes in Atrium-stijl ───────────────────────────────────────────── */
body.e4u-afrekenen input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 20px;
  width: 20px !important;
  height: 20px !important;
  margin: 1px 10px 0 0 !important;
  border: 1.5px solid #c3cbd6 !important;
  border-radius: 6px !important;
  background: #fff center / 13px no-repeat !important;
  vertical-align: -4px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
body.e4u-afrekenen input[type="checkbox"]:hover { border-color: var(--e4u-accent) !important; }
body.e4u-afrekenen input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13, 125, 130, .2); }
body.e4u-afrekenen input[type="checkbox"]:checked {
  border-color: var(--e4u-accent) !important;
  background-color: var(--e4u-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") !important;
}
body.e4u-afrekenen .woocommerce-form__label-for-checkbox,
body.e4u-afrekenen label.checkbox { display: inline-flex !important; align-items: flex-start; }

@media (max-width: 600px) {
  body.e4u-afrekenen .wmc-velden { grid-template-columns: 1fr; }
  body.e4u-afrekenen .wmc-participants button.wmc-toevoegen { margin-left: 0; }
}

/* ─── Waardebon op de afrekenpagina: groene balk, net als de succesmelding ── */
body.e4u-afrekenen .e-coupon-box {
  border: none !important;
  background: linear-gradient(120deg, #0d7d82 0%, #12958f 55%, #1fae8f 100%) !important;
  box-shadow: 0 6px 20px rgba(13, 125, 130, .22) !important;
  color: #fff !important;
}
body.e4u-afrekenen .e-coupon-box .e-woocommerce-coupon-nudge {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 !important;
  color: #fff !important;
  font-weight: 600 !important;
}
body.e4u-afrekenen .e-coupon-box .e-woocommerce-coupon-nudge::before {
  content: "";
  flex: 0 0 34px;
  height: 34px;
  margin-right: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4z'/%3E%3Cpath d='M14 6v12' stroke-dasharray='2 2'/%3E%3C/svg%3E") center / 19px no-repeat;
}
body.e4u-afrekenen .e-coupon-box a.e-show-coupon-form {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95) !important;
  color: var(--e4u-accent) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  transition: background-color .15s;
}
body.e4u-afrekenen .e-coupon-box a.e-show-coupon-form:hover { background: #fff !important; }
/* Uitgeklapt: wit invoerveld en witte knop op de groene balk */
body.e4u-afrekenen .e-coupon-box form,
body.e4u-afrekenen .e-coupon-box .e-coupon-anchor { margin-top: 14px !important; }
body.e4u-afrekenen .e-coupon-box input[type="text"] {
  background: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--e4u-text) !important;
}
body.e4u-afrekenen .e-coupon-box button {
  background: #0a5f63 !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 650 !important;
}
body.e4u-afrekenen .e-coupon-box button:hover { background: #084c4f !important; }
body.e4u-afrekenen .e-coupon-box p:not(.e-woocommerce-coupon-nudge),
body.e4u-afrekenen .e-coupon-box label { color: rgba(255, 255, 255, .9) !important; }