/*
Theme Name:   Vervoerscollege (child)
Template:     landingspage
Description:  Child theme van landingspage voor vervoerscollege.nl. Eigen aanpassingen hier, zodat het parent-thema intact blijft.
Version:      1.0.0
Text Domain:  landingspage-child
*/

/* ==========================================================================
   Witruimte – overal dezelfde maten gebruiken
   ========================================================================== */
:root {
  --vc-space-xs: 8px;    /* klein: tussen label en veld */
  --vc-space-s:  14px;   /* celpadding boven/onder */
  --vc-space-m:  20px;   /* celpadding links/rechts, ruimte tussen elementen */
  --vc-space-l:  30px;   /* onder titels, tussen blokken */
  --vc-space-xl: 70px;   /* boven/onder een pagina-sectie */
}

/* ==========================================================================
   Kleuren
   Knop oranje ........ #EE961F   (hover #D9820F)
   Rand lichtgrijs .... #E2E2E2
   Veldrand ........... #CFCFCF
   Accent rood ........ #E3241B
   Tabelkop ........... #F7F7F7
   Grijze tekst ....... #888888
   ========================================================================== */


/* ==========================================================================
   0. Algemeen – ruimte en kader rond WooCommerce- en LearnDash-onderdelen
      Geldt automatisch voor elke pagina met zo'n shortcode
      (winkelwagen, afrekenen, mijn account, wachtwoord resetten,
      profiel, groepsdashboard, enz.).
   ========================================================================== */
.content-block:has(.woocommerce, .learndash-wrapper) {
  padding-top: var(--vc-space-xl) !important;
  padding-bottom: calc(var(--vc-space-xl) + var(--vc-space-m)) !important;
}

/* LearnDash-formulieren en -meldingen in een licht kader */
.content-block .learndash-wrapper {
  padding: var(--vc-space-l);
  border-radius: 8px;
  background: #F2F2F2;
  font-size: .95rem;
  line-height: 1.6;
}
.content-block .learndash-wrapper > *:first-child {
  margin-top: 0;
}
.content-block .learndash-wrapper > *:last-child {
  margin-bottom: 0;
}

/* Velden in LearnDash-formulieren zoals in WooCommerce */
.content-block .learndash-wrapper label {
  display: block;
  margin: 0 0 var(--vc-space-xs);
  font-size: .9rem;
  font-weight: 600;
}
.content-block .learndash-wrapper input[type="text"],
.content-block .learndash-wrapper input[type="email"],
.content-block .learndash-wrapper input[type="password"] {
  width: 100%;
  min-height: 46px;
  margin: 0 0 var(--vc-space-m);
  padding: 10px var(--vc-space-s);
  border: 1px solid #CFCFCF;
  border-radius: 6px;
  background: #FFFFFF;
}
.content-block .learndash-wrapper input:focus {
  border-color: #EE961F;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(238, 150, 31, .2);
}
.content-block .learndash-wrapper input[type="submit"],
.content-block .learndash-wrapper button[type="submit"] {
  padding: .7em 1.6em;
  border: 0;
  border-radius: 999px;
  background-color: #EE961F;
  color: #FFFFFF;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.content-block .learndash-wrapper input[type="submit"]:hover,
.content-block .learndash-wrapper button[type="submit"]:hover {
  background-color: #D9820F;
}


/* ==========================================================================
   1. Banner op halve hoogte – alleen WooCommerce-pagina's
      (winkel, categorieën, product, winkelwagen, afrekenen, mijn account)
   ========================================================================== */
.woocommerce-page .banner_image {
  position: relative;
  height: 45vh;
  min-height: 280px;
  max-height: 450px;
  overflow: hidden;
}
.woocommerce-page .banner_image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ==========================================================================
   2. Knoppen – overal in WooCommerce oranje (ook .alt)
      body .woocommerce = knop binnen een WooCommerce-blok (winkelwagen e.d.)
      body.woocommerce  = knop op shop-/productpagina's
   ========================================================================== */
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce input.button.alt,
body .woocommerce #respond input#submit,
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce button.button.alt {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .7em 1.6em;
  border: 0;
  border-radius: 999px;
  background-color: #EE961F;
  color: #FFFFFF;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .2s ease;
}
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .woocommerce input.button.alt:hover,
body .woocommerce a.button:focus,
body .woocommerce a.button.alt:focus,
body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body.woocommerce button.button.alt:hover {
  background-color: #D9820F;
  color: #FFFFFF;
}
body .woocommerce button.button:disabled,
body .woocommerce button.button:disabled[disabled],
body .woocommerce button.button.alt:disabled,
body .woocommerce button.button.alt:disabled[disabled] {
  background-color: #E2E2E2;
  color: #888888;
  opacity: 1;
}


/* ==========================================================================
   3. Shop – kop (titel + categorie-omschrijving)
   ========================================================================== */
.shop-header {
  margin: var(--vc-space-xs) 0 var(--vc-space-l);
}
.shop-header__title {
  margin: 0 0 var(--vc-space-xs);
}


/* ==========================================================================
   4. Shop – grid
   ========================================================================== */

/* WooCommerce-clearfix uit (neemt anders een gridplek in) */
.woocommerce ul.products.row::before,
.woocommerce ul.products.row::after {
  display: none;
}

.woocommerce ul.products.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  padding: 0;
}

/* WooCommerce-breedtes/marges uit; Bootstrap-kolommen bepalen de breedte */
.woocommerce ul.products.row li.product {
  display: flex;
  float: none;
  width: auto;
  margin: 0 0 var(--vc-space-l);
  padding: 0 15px;               /* = Bootstrap-gutter, niet wijzigen */
  text-indent: 0;
  list-style: none;
}

/* Vinkje van het thema weg */
.woocommerce ul.products li.product::before {
  display: none;
  content: none;
}


/* ==========================================================================
   5. Shop – productkaartjes
   ========================================================================== */
.woocommerce .ffm_product {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--vc-space-m);
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.woocommerce .ffm_product:hover {
  border-color: #E3241B;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

/* Afbeelding tot aan de rand, vaste verhouding 6:4 */
.woocommerce ul.products li.product .ffm_product img {
  display: block;
  width: calc(100% + (2 * var(--vc-space-m)));
  max-width: none;
  margin: calc(-1 * var(--vc-space-m)) calc(-1 * var(--vc-space-m)) var(--vc-space-s);
  aspect-ratio: 6 / 4;
  object-fit: cover;
}

/* Titel */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0 0 var(--vc-space-xs);
  padding: 0;
}

/* Prijs */
.woocommerce ul.products li.product .price {
  font-size: .95rem;
  font-weight: 400;
}

/* Knop altijd onderaan het kaartje, met pijltje */
.woocommerce .ffm-product-bottom {
  margin-top: auto;
  padding-top: var(--vc-space-s);
}
.woocommerce ul.products li.product .button::after {
  content: "\2192";
}


/* ==========================================================================
   6. Productpagina
   ========================================================================== */

/* Floats afsluiten: de footer blijft onder het product */
.single-product div.product {
  display: flow-root;
  padding-top: var(--vc-space-l);
  padding-bottom: var(--vc-space-xl);
}

/* Afbeelding en info naast elkaar met vaste tussenruimte */
@media (min-width: 768px) {
  .single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--vc-space-xl);
    align-items: start;
  }
  .single-product div.product > * {
    grid-column: 1 / -1;            /* alles over de volle breedte... */
  }
  .single-product div.product > .woocommerce-product-gallery,
  .single-product div.product > .images {
    grid-column: 1;                 /* ...behalve afbeelding links */
  }
  .single-product div.product > .summary {
    grid-column: 2;                 /* ...en info rechts */
  }
}
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .images,
.single-product div.product .summary {
  float: none !important;
  width: 100% !important;
  margin: 0 0 var(--vc-space-l);
}
.single-product div.product .woocommerce-product-gallery img {
  border-radius: 8px;
}

/* Productinfo */
.single-product div.product .product_title {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 var(--vc-space-s);
}
.single-product div.product .summary .price {
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 var(--vc-space-m);
}

/* Aantal + knop */
.single-product div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vc-space-s);
  margin: 0 0 var(--vc-space-l);
}
.single-product div.product form.cart .qty {
  width: 80px;
  min-height: 46px;
  padding: var(--vc-space-xs);
  border: 1px solid #CFCFCF;
  border-radius: 6px;
}


/* ==========================================================================
   7. Winkelwagen
   ========================================================================== */
.woocommerce-cart .content-block {
  padding-top: var(--vc-space-xl) !important;
  padding-bottom: calc(var(--vc-space-xl) + var(--vc-space-m)) !important;
}

/* Titel "Winkelwagen" */
.woocommerce-cart .content-block h3 {
  margin-bottom: var(--vc-space-l);
}

/* Beide tabellen (producten én totalen) */
body.woocommerce-cart table.shop_table {
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  border-collapse: separate;
  overflow: hidden;
  font-size: .9rem;
}
body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td {
  padding: var(--vc-space-s) var(--vc-space-m) !important;
  vertical-align: middle;
}
body.woocommerce-cart table.shop_table thead th {
  font-size: .9rem;
  background: #F7F7F7;
}

/* Thumbnail met ruimte naar de producttitel */
body.woocommerce-cart td.product-thumbnail {
  padding-right: var(--vc-space-m) !important;
}
body.woocommerce-cart td.product-thumbnail img {
  width: 64px;
  height: auto;
  border-radius: 4px;
}
body.woocommerce-cart td.product-name,
body.woocommerce-cart td.product-name a {
  color: inherit;
  line-height: 1.4;
}
body.woocommerce-cart .quantity .qty {
  width: 70px;
  padding: var(--vc-space-xs);
  font-size: .9rem;
}

/* Totalen */
body.woocommerce-cart .cart_totals h2 {
  font-size: 1.15rem;
  margin-bottom: var(--vc-space-m);
}
body.woocommerce-cart .cart_totals table.shop_table th {
  background: #F7F7F7;
}
body.woocommerce-cart .wc-proceed-to-checkout {
  padding-top: var(--vc-space-m);
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
}


/* ==========================================================================
   8. Afrekenen (klassiek)
   ========================================================================== */
.woocommerce-checkout .content-block {
  padding-top: var(--vc-space-xl) !important;
  padding-bottom: calc(var(--vc-space-xl) + var(--vc-space-m)) !important;
}

/* Titels: Factuurgegevens, Aanvullende informatie, Je bestelling */
body.woocommerce-checkout .content-block h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--vc-space-m);
}

/* --- Opbouw: blokken onder elkaar --- */
body.woocommerce-checkout .col2-set {
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-l);
  margin-bottom: var(--vc-space-l);
}
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 {
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
}
body.woocommerce-checkout .woocommerce-shipping-fields:empty {
  display: none;
}

/* Formulierblokken in een kader */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
  padding: var(--vc-space-l);
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  background: #FFFFFF;
}

/* --- Velden: raster met twee kolommen (voornaam | achternaam) --- */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--vc-space-m);
  row-gap: var(--vc-space-m);
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
  grid-column: 1 / -1;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first {
  grid-column: 1;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
  grid-column: 2;
}
/* "Appartement, suite" direct onder straat: minder ruimte erboven */
body.woocommerce-checkout #billing_address_2_field {
  margin-top: calc(var(--vc-space-xs) - var(--vc-space-m));
}

/* --- Labels: altijd boven het veld --- */
body.woocommerce-checkout .form-row label {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 0 var(--vc-space-xs);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
}
body.woocommerce-checkout .form-row .required {
  color: #E3241B;
  text-decoration: none;
}
body.woocommerce-checkout .form-row .optional {
  font-weight: 400;
  color: #888888;
}

/* --- Invoervelden: volle breedte, even hoog, ook landmenu (select2) --- */
body.woocommerce-checkout .form-row .woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
}
body.woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .select2-container {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}
body.woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .select2-container .select2-selection--single {
  min-height: 46px;
  padding: 10px var(--vc-space-s);
  border: 1px solid #CFCFCF;
  border-radius: 6px;
  background: #FFFFFF;
  font-size: .95rem;
  line-height: 1.4;
  box-shadow: none;
}
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout #order_comments {
  min-height: 110px;
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 24px;
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: var(--vc-space-xs);
  transform: translateY(-50%);
}
body.woocommerce-checkout .form-row .input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .select2-container--focus .select2-selection--single {
  border-color: #EE961F;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(238, 150, 31, .2);
}

/* Foutmelding bij verplicht veld */
body.woocommerce-checkout .form-row.woocommerce-invalid .input-text {
  border-color: #E3241B;
}

/* --- "Je bestelling" – zelfde stijl als de winkelwagen --- */
body.woocommerce-checkout #order_review_heading {
  margin-top: var(--vc-space-l);
}
body.woocommerce-checkout table.shop_table {
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  border-collapse: separate;
  overflow: hidden;
  font-size: .9rem;
}
body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td {
  padding: var(--vc-space-s) var(--vc-space-m) !important;
  vertical-align: middle;
}
body.woocommerce-checkout table.shop_table thead th,
body.woocommerce-checkout table.shop_table tfoot th {
  background: #F7F7F7;
}

/* --- Betaalmethodes --- */
body.woocommerce-checkout #payment {
  margin-top: var(--vc-space-l);
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  background: #F7F7F7;
}
body.woocommerce-checkout #payment ul.payment_methods {
  margin: 0;
  padding: var(--vc-space-m);
  border-bottom: 1px solid #E2E2E2;
}
body.woocommerce-checkout #payment ul.payment_methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vc-space-xs);
  margin: 0 0 var(--vc-space-xs);
  padding: var(--vc-space-s) var(--vc-space-m);
  border: 2px solid #EE961F;
  border-radius: 8px;
  background: #FFFFFF;
  list-style: none;
  text-indent: 0;
}
body.woocommerce-checkout #payment ul.payment_methods li:last-child {
  margin-bottom: 0;
}
body.woocommerce-checkout #payment ul.payment_methods li::before {
  display: none;
  content: none;
}
body.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  display: inline-block !important;
  width: 18px;
  height: 18px;
  margin: 0 var(--vc-space-xs) 0 0;
  accent-color: #EE961F;
}
body.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex !important;
  align-items: center;
  gap: var(--vc-space-xs);
  width: auto !important;
  margin: 0;
  font-weight: 600;
}
body.woocommerce-checkout #payment ul.payment_methods li img {
  max-height: 24px;
  width: auto;
}
body.woocommerce-checkout #payment div.payment_box {
  flex-basis: 100%;
  padding: var(--vc-space-s) var(--vc-space-m);
  margin: var(--vc-space-xs) 0 0;
  border-radius: 6px;
  background: #F7F7F7;
  font-size: .9rem;
}
body.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}
body.woocommerce-checkout #payment div.form-row.place-order {
  padding: var(--vc-space-m);
  margin: 0;
}

/* --- Voorwaarden + privacytekst --- */
body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: .85rem;
  margin-bottom: var(--vc-space-m);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label {
  display: flex !important;
  align-items: flex-start;
  gap: var(--vc-space-xs);
  font-weight: 400;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #EE961F;
}

/* --- Knop "Bestelling plaatsen" --- */
body.woocommerce-checkout #place_order {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  padding: var(--vc-space-s) var(--vc-space-m);
}

/* --- Mobiel: alles onder elkaar, iets minder binnenruimte --- */
@media (max-width: 575px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
    grid-column: 1 / -1;
  }
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-additional-fields {
    padding: var(--vc-space-m);
  }
}

/* ==========================================================================
   9. Mijn account
   ========================================================================== */
.woocommerce-account .content-block {
  padding-top: var(--vc-space-xl) !important;
  padding-bottom: calc(var(--vc-space-xl) + var(--vc-space-m)) !important;
}

/* --- Opbouw: menu links, inhoud rechts (flex: losse elementen storen niet) --- */
.woocommerce-account .woocommerce {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vc-space-l);
}
.woocommerce-account .woocommerce > * {
  flex: 0 0 100%;                 /* meldingen e.d. over de volle breedte */
}
.woocommerce-account .woocommerce > p:empty,
.woocommerce-account .woocommerce > br {
  display: none;                  /* lege restjes van de teksteditor weg */
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
  flex: 0 0 240px;
  float: none;
  width: auto;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
  flex: 1 1 0;
  min-width: 0;
  float: none;
  width: auto;
}

/* --- Menu als kaart --- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: var(--vc-space-xs);
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  background: #FFFFFF;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  text-indent: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li::before {
  display: none;                  /* vinkje van het thema weg */
  content: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--vc-space-s) var(--vc-space-m);
  border-radius: 6px;
  color: inherit;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: #F7F7F7;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: #EE961F;
  color: #FFFFFF;
  font-weight: 600;
}

/* --- Inhoud als kaart --- */
.woocommerce-account .woocommerce-MyAccount-content {
  padding: var(--vc-space-l);
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: .95rem;
  line-height: 1.6;
}
.woocommerce-account .woocommerce-MyAccount-content > *:first-child {
  margin-top: 0;
}
.woocommerce-account .woocommerce-MyAccount-content p {
  margin: 0 0 var(--vc-space-m);
}
.woocommerce-account .woocommerce-MyAccount-content p a {
  display: inline;                /* links gewoon in de zin laten staan */
}

/* --- Formulieren (Accountgegevens, Adressen) --- */
.woocommerce-account .woocommerce-MyAccount-content .form-row {
  margin: 0 0 var(--vc-space-m);
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row label {
  display: block;
  margin: 0 0 var(--vc-space-xs);
  font-size: .9rem;
  font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content .input-text {
  width: 100%;
  min-height: 46px;
  padding: 10px var(--vc-space-s);
  border: 1px solid #CFCFCF;
  border-radius: 6px;
}
.woocommerce-account .woocommerce-MyAccount-content .input-text:focus {
  border-color: #EE961F;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(238, 150, 31, .2);
}
.woocommerce-account .woocommerce-MyAccount-content fieldset {
  margin: var(--vc-space-l) 0 var(--vc-space-m);
  padding: var(--vc-space-m);
  border: 1px solid #E2E2E2;
  border-radius: 8px;
}

/* --- Tabellen (bestellingen) zoals de winkelwagen --- */
.woocommerce-account table.shop_table {
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  border-collapse: separate;
  overflow: hidden;
  font-size: .9rem;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
  padding: var(--vc-space-s) var(--vc-space-m) !important;
  vertical-align: middle;
}
.woocommerce-account table.shop_table thead th {
  background: #F7F7F7;
}

/* --- Mobiel: menu boven de inhoud --- */
@media (max-width: 767px) {
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
    flex: 0 0 100%;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: var(--vc-space-m);
  }
}
/* --- Bredere bladspiegel op Mijn account --- */
@media (min-width: 992px) {
  .woocommerce-account .content-block .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- Adressen: Bootstrap-classes col-1/col-2 neutraliseren --- */
.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--vc-space-m);
  margin: var(--vc-space-m) 0 0;
}
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
  display: none;                  /* clearfix neemt anders een gridplek in */
}
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
  flex: none;
  float: none;
  width: auto;
  max-width: none;
  padding: var(--vc-space-m);
  border: 1px solid #E2E2E2;
  border-radius: 8px;
}
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vc-space-s);
  margin: 0 0 var(--vc-space-s);
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  margin: 0;
  font-size: 1.05rem;
}
.woocommerce-account .woocommerce-Address address {
  margin: 0;
  font-style: normal;
  line-height: 1.6;
}

/* ==========================================================================
   10. Cursuslijst (LearnDash Course Grid v1) – o.a. /online-trainingen/
   ========================================================================== */

/* Ruimte boven/onder en volle breedte voor een tekstblok met een cursuslijst */
.content-block:has(.ld-course-list-content) {
  padding-top: var(--vc-space-xl) !important;
  padding-bottom: calc(var(--vc-space-xl) + var(--vc-space-m)) !important;
}
@media (min-width: 992px) {
  .content-block:has(.ld-course-list-content) .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Grid: drie kolommen met gelijke hoogte */
.ld-course-list-items.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--vc-space-m);
}
.ld-course-list-items .ld_course_grid {
  display: flex;
  margin-bottom: var(--vc-space-l);
}

/* Kaartje */
.ld_course_grid article.thumbnail.course {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.ld_course_grid article.thumbnail.course:hover {
  border-color: #E3241B;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

/* Afbeelding over de volle breedte, vaste verhouding 6:4 */
.ld_course_grid article.thumbnail.course > a {
  display: block;
}
.ld_course_grid article.thumbnail.course img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 4;
  object-fit: cover;
}

/* Label (prijs / "Ingeschreven") op de afbeelding */
.ld_course_grid .ribbon {
  position: absolute;
  top: var(--vc-space-s);
  left: var(--vc-space-s);
  z-index: 2;
  padding: 4px var(--vc-space-s);
  border-radius: 4px;
  background: #E3241B;
  color: #FFFFFF;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
}
.ld_course_grid .ribbon.enrolled {
  background: #2E7D32;
}

/* Tekstdeel */
.ld_course_grid .caption {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--vc-space-m);
  text-align: center;
}
.ld_course_grid .caption .entry-title {
  margin: 0 0 var(--vc-space-xs);
  font-size: 1.1rem;
  line-height: 1.35;
}
.ld_course_grid .caption .entry-content {
  margin: 0 0 var(--vc-space-m);
  font-size: .9rem;
  line-height: 1.5;
  color: #555555;
}

/* Knop over de volle breedte, altijd onderaan het kaartje */
.ld_course_grid .ld_course_grid_button {
  margin-top: auto;
  padding-top: var(--vc-space-s);
}
.ld_course_grid .ld_course_grid_button .btn,
.ld_course_grid .ld_course_grid_button .btn-primary {
  display: block;
  width: 100%;
  padding: .7em 1.6em;
  border: 0;
  border-radius: 999px;
  background-color: #EE961F;
  color: #FFFFFF;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease;
}
.ld_course_grid .ld_course_grid_button .btn:hover,
.ld_course_grid .ld_course_grid_button .btn:focus {
  background-color: #D9820F;
  color: #FFFFFF;
}

/* Voortgangsbalk: geen grijs kader van blok 0 binnen het kaartje */
.ld_course_grid .learndash-wrapper {
  margin: var(--vc-space-s) 0 0;
  padding: 0;
  background: none;
}
.ld_course_grid .ld-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: #E2E2E2;
}
.ld_course_grid .ld-progress-bar-percentage {
  border-radius: 999px;
  background: #EE961F;
}
.ld_course_grid .ld-progress-stats {
  font-size: .8rem;
}


/* ==========================================================================
   11. Groepsdashboard (/groups-dashboard/) – voor de contactpersoon
       Hangt aan .vc-groepsdashboard (body-class, zie functions.php §9).
       Selectors komen uit de echte HTML van de plugin (LDGR: #wdm_…, .ldgr-…).
   ========================================================================== */

/* --- 11a. Breedte: dezelfde container als een gewone tekstpagina ---
       De container zelf blijft zoals het thema hem maakt (dus met witruimte
       links en rechts). Alleen de smalle kolom (col-lg-8) van de plugin loopt
       nu over de volle breedte van die container. --- */
/* 40px extra ruimte boven en onder het dashboard */
.vc-groepsdashboard .container:has(#wdm_groups_tab) {
  padding-top: 40px;
  padding-bottom: 40px;
}
.vc-groepsdashboard .container:has(#wdm_groups_tab) > .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* --- 11b. Kleuren en knoppen: alles in het oranje van de site --- */
.vc-groepsdashboard .ldgr-bg-color {
  background-color: #EE961F !important;
}
.vc-groepsdashboard .ldgr-btn {
  padding: .7em 1.6em;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
}
.vc-groepsdashboard .ldgr-btn.ldgr-bg-color {
  color: #FFFFFF;
}
.vc-groepsdashboard .ldgr-btn.ldgr-bg-color:hover {
  background-color: #D9820F !important;
}

/* --- 11c. Kop: groepsnaam, plekken, trainingen ---
       De plugin gebruikt lange selectors (.ldgr-group-single …). Onze regels
       beginnen met dezelfde keten plus .vc-groepsdashboard, anders winnen die
       van de plugin. De standaardafbeelding (no_image.png) is weggehaald. --- */
.vc-groepsdashboard img[src*="no_image"] {
  display: none;
}
.vc-groepsdashboard .ldgr-group-single .ldgr-top-banner {
  margin: 0 0 var(--vc-space-l);
}
.vc-groepsdashboard .ldgr-group-single .ldgr-top-banner .ldgrs-title-wrap h1 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.3;
}
.vc-groepsdashboard .ldgr-group-single .ldgr-top-banner .ldgrs-title-wrap .ldgr-u-left {
  margin: var(--vc-space-xs) 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #555555;
}
.vc-groepsdashboard .ldgr-edit-group {
  font-size: 14px;
  line-height: 1.5;
}

/* Trainingen in deze groep: titel en namen op één regel.
   De plugin zet het blokje van een training op max-width: 300px; dat breekt
   de naam af en is hier weggehaald. Op mobiel mag het weer afbreken. */
.vc-groepsdashboard .ldgr-group-single .ldgr-group-courses {
  margin: var(--vc-space-l) 0;
}
.vc-groepsdashboard .ldgr-group-single .ldgr-group-courses h3 {
  margin: 0 0 var(--vc-space-m);
  padding-bottom: var(--vc-space-s);
  font-size: 1.1rem;
  line-height: 1.4;
  white-space: nowrap;
}
.vc-groepsdashboard .ldgr-group-single .ldgr-group-courses .ldgr-group-courses-items {
  gap: var(--vc-space-m) var(--vc-space-l);
}
.vc-groepsdashboard .ldgr-group-single .ldgr-group-courses .ldgr-group-courses-items .ldgr-group-courses-item {
  max-width: none;
  margin: 0;
}
.vc-groepsdashboard .ldgr-group-single .ldgr-group-courses .ldgr-group-courses-items .ldgr-group-courses-item span {
  margin-left: 0;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .vc-groepsdashboard .ldgr-group-single .ldgr-group-courses h3,
  .vc-groepsdashboard .ldgr-group-single .ldgr-group-courses .ldgr-group-courses-items .ldgr-group-courses-item span {
    white-space: normal;
  }
}

/* --- 11d. Tabbladen (Deelnemers | Voortgang | Groepscode) ---
       Minder lucht boven de tabs (plugin: 70px) en oranje accent i.p.v. blauw. --- */
.vc-groepsdashboard .wdm-tabs-wrapper {
  margin-top: var(--vc-space-l);
}
.vc-groepsdashboard .wdm-tabs-wrapper ul.tabs li a {
  font-size: 14px;
  line-height: 1.4;
}
.vc-groepsdashboard ul.tabs li.current a,
.vc-groepsdashboard .ldgr-tabs li.current {
  color: #333333 !important;
}
.vc-groepsdashboard #wdm_groups_tab .tabs .current a {
  border-bottom-color: #EE961F;
}
.vc-groepsdashboard .ldgr-tabs li.current {
  border-bottom-color: #EE961F;
}
.vc-groepsdashboard .ldgr-color {
  color: #D9820F !important;
}

/* --- 11e. Groepscode: tabblad en inhoud verbergen
       Noodoplossing. Bestaande codes blijven werken zolang ze bestaan: de
       echte oplossing is de instelling uitzetten (LearnDash LMS →
       Group Registration Settings → Group Code) en de codes verwijderen. --- */
.vc-groepsdashboard li.tab-link[data-tab="tab-3"],
.vc-groepsdashboard #tab-3,
.vc-groepsdashboard .ldgr-group-code-tab {
  display: none !important;
}

/* --- 11f. Tabellen: ruimte en tekstgrootte --- */
.vc-groepsdashboard table.dataTable {
  width: 100%;
  table-layout: auto;
}
.vc-groepsdashboard table.dataTable th,
.vc-groepsdashboard table.dataTable td {
  height: auto;
  padding: var(--vc-space-s) var(--vc-space-m);
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.vc-groepsdashboard table.dataTable th {
  background: #F7F7F7;
  font-weight: 600;
}
.vc-groepsdashboard .dataTables_length,
.vc-groepsdashboard .dataTables_info,
.vc-groepsdashboard .dataTables_paginate {
  font-size: 14px;
}
.vc-groepsdashboard .dataTables_length select {
  display: inline-block;
  width: auto;
  min-height: 38px;
  margin: 0 var(--vc-space-xs);
  padding: 6px var(--vc-space-s);
  font-size: 14px;
}
.vc-groepsdashboard .dataTables_paginate .paginate_button {
  padding: var(--vc-space-xs) var(--vc-space-s);
}

/* --- 11g. Deelnemers: melding over vaste plekken ---
       Eén tekstgrootte, over de volle breedte. De tweede alinea herhaalt de
       eerste en is verborgen. --- */
.vc-groepsdashboard .ldgr-fix-group-limit {
  display: flex;
  align-items: flex-start;
  gap: var(--vc-space-m);
  width: 100%;
  margin: 0 0 var(--vc-space-l);
  padding: var(--vc-space-s) var(--vc-space-m);
}
.vc-groepsdashboard .ldgr-fix-group-limit p,
.vc-groepsdashboard .ldgr-fix-group-limit p * {
  margin: 0;
  font-size: 14px !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}
.vc-groepsdashboard .ldgr-fix-group-limit p + p {
  display: none;
}

/* --- 11h. Deelnemers: zoeken | aantal | selectie verwijderen, dan de tabel --- */
.vc-groepsdashboard #wdm_group_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vc-space-m);
}
.vc-groepsdashboard #wdm_group_filter {
  order: 1;
  flex: 1 1 320px;
  margin: 0;
}
.vc-groepsdashboard #wdm_group_filter input[type="search"] {
  min-height: 46px;
  font-size: 14px;
}
.vc-groepsdashboard #wdm_group_length {
  order: 2;
  margin: 0;
}
.vc-groepsdashboard #bulk_remove {
  order: 3;
  margin: 0 0 0 auto;
  padding: .6em 1.4em;
  border: 1px solid #CFCFCF;
  border-radius: 999px;
  background: #FFFFFF;
  color: #333333;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}
.vc-groepsdashboard #wdm_group {
  order: 4;
  flex: 0 0 100%;
}
.vc-groepsdashboard #wdm_group_info {
  order: 5;
  margin: 0;
}
.vc-groepsdashboard #wdm_group_paginate {
  order: 6;
  margin: 0 0 0 auto;
}
.vc-groepsdashboard #wdm_group td p {
  margin: 0;
}

/* Acties per deelnemer: twee kleine knoppen, rood alleen bij verwijderen */
.vc-groepsdashboard #wdm_group td.ldgr-actions {
  text-align: right;
  white-space: nowrap;
}
.vc-groepsdashboard #wdm_group td.ldgr-actions a.button {
  display: inline-block;
  margin: 0 0 0 var(--vc-space-xs);
  padding: .45em 1.1em;
  border: 1px solid #CFCFCF;
  border-radius: 999px;
  background: #FFFFFF;
  color: #333333;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.vc-groepsdashboard #wdm_group td.ldgr-actions a.wdm-reinvite:hover {
  background: #F7F7F7;
}
.vc-groepsdashboard #wdm_group td.ldgr-actions a.wdm_remove {
  border-color: #E3241B;
  color: #E3241B;
}
.vc-groepsdashboard #wdm_group td.ldgr-actions a.wdm_remove:hover {
  background: #E3241B;
  color: #FFFFFF;
}
/* Prullenbak-icoon weg: het woord "Verwijderen" staat er al */
.vc-groepsdashboard #wdm_group td.ldgr-actions a.button {
  background-image: none;
}
.vc-groepsdashboard #wdm_group td.ldgr-actions a.button::before,
.vc-groepsdashboard #wdm_group td.ldgr-actions a.button::after {
  content: none;
}
@media (max-width: 767px) {
  .vc-groepsdashboard #wdm_group td.ldgr-actions {
    white-space: normal;
  }
}

/* --- 11i. Voortgang: bovenste rij en tabel ---
       De plugin gebruikt #tab-2 en #wdm_ldgr_… met float en table-layout: fixed
       (daardoor lag het e-mailadres onder de voortgangsbalk). Onze regels
       gebruiken dezelfde id's, anders winnen die van de plugin. --- */
.vc-groepsdashboard #wdm_ldgr_group_report_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vc-space-m);
}
.vc-groepsdashboard #wdm_ldgr_group_report_wrapper .wdm-select-wrapper {
  order: 1;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vc-space-xs) var(--vc-space-m);
  margin: 0;
}
.vc-groepsdashboard #wdm_ldgr_group_report_wrapper .wdm-select-wrapper h6 {
  flex: 0 0 100%;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .04em;
  color: #888888;
}
.vc-groepsdashboard .wdm-select-wrapper #wdm_ldgr_course_id {
  flex: 1 1 320px;
  width: 100%;
  max-width: 520px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.vc-groepsdashboard #tab-2 #wdm_ldgr_show_report {
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 var(--vc-space-m) !important;
  border: 0;
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.vc-groepsdashboard #tab-2 #wdm_ldgr_show_report:hover {
  background-color: #D9820F !important;
}
.vc-groepsdashboard #wdm_ldgr_group_report_wrapper #wdm_ldgr_group_report_length {
  order: 2;
  margin: 0 0 0 auto;
  font-size: 14px;
}
.vc-groepsdashboard #wdm_ldgr_group_report_wrapper #wdm_ldgr_group_report_length select {
  height: 38px;
  padding: 6px var(--vc-space-s);
  font-size: 14px;
}
.vc-groepsdashboard #wdm_ldgr_group_report_wrapper .wdm-table-container {
  order: 3;
  flex: 0 0 100%;
  overflow-x: auto;
}
.vc-groepsdashboard #tab-2 #wdm_ldgr_group_report {
  width: 100%;
  table-layout: auto;
}
.vc-groepsdashboard #tab-2 #wdm_ldgr_group_report th {
  padding: var(--vc-space-s) var(--vc-space-m);
  font-size: 13px;
}
.vc-groepsdashboard #tab-2 #wdm_ldgr_group_report td {
  padding: var(--vc-space-s) var(--vc-space-m);
  font-size: 14px;
  line-height: 1.5;
}
.vc-groepsdashboard #wdm_ldgr_group_report_info {
  order: 4;
  margin: 0;
  font-size: 13px;
}
.vc-groepsdashboard #wdm_ldgr_group_report_paginate {
  order: 5;
  margin: 0 0 0 auto;
  font-size: 13px;
}

/* --- 11j. Voortgang: balk en tekst onder elkaar --- */
.vc-groepsdashboard #wdm_ldgr_group_report td.course-progress {
  min-width: 200px;
}
.vc-groepsdashboard .ldgr-group-report-item {
  position: relative;
  display: block;
  width: 100%;
  max-width: 260px;
  height: 6px;
  margin: 0 0 var(--vc-space-xs);
  border-radius: 999px;
  background: #E2E2E2;
  overflow: hidden;
}
.vc-groepsdashboard .ldgr-course-progress-bar {
  position: static;
  height: 100%;
  border-radius: 999px;
}
.vc-groepsdashboard .ldgr-course-lesson-progress {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #555555;
}

/* --- 11k. Voortgang: tekst overal 14px ---
       Kolomkoppen en cellen met de klasse .email waren groter dan de rest
       (de plugin/het thema zet daar een eigen lettergrootte op). --- */
.vc-groepsdashboard #tab-2 #wdm_ldgr_group_report th,
.vc-groepsdashboard #tab-2 #wdm_ldgr_group_report td,
.vc-groepsdashboard #tab-2 #wdm_ldgr_group_report td span,
.vc-groepsdashboard #tab-2 #wdm_ldgr_group_report .name,
.vc-groepsdashboard #tab-2 #wdm_ldgr_group_report .email {
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.vc-groepsdashboard #tab-2 #wdm_ldgr_group_report td .ldgr-course-lesson-progress {
  font-size: 13px !important;
}


/* ==========================================================================
   12. Profielpagina (LearnDash [ld_profile]) – geen avatar en geen punten
       Punten: selector uit de LearnDash-documentatie.
       Avatar: .ld-profile-avatar is de gebruikelijke klasse in het LearnDash
       30-sjabloon; niet gecontroleerd op deze site (controleer met Inspecteren).
   ========================================================================== */
.learndash-wrapper .ld-profile-summary .ld-profile-stat-points,
.learndash-wrapper .ld-profile-summary .ld-profile-avatar,
.ld-profile-summary .ld-profile-stat-points,
.ld-profile-summary .ld-profile-avatar {
  display: none !important;
}


/* Winkelwagen-icoon in menu (label is gewone tekst, alleen het icoon is zichtbaar; desktop en mobiel) */
.menu-cart > a,
.menu-cart > .nav-link,
a.nav-link[href$="/winkelwagen/"] {
  font-size: 0 !important;
}
.menu-cart > a::before,
.menu-cart > .nav-link::before,
a.nav-link[href$="/winkelwagen/"]::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f07a";
  font-size: 18px !important;
  line-height: 1;
}