/* =============================================================
   LEARNLLM.NL — WOOCOMMERCE.CSS
   Wordt ALLEEN geladen op: WooCommerce pagina's en voor
   ingelogde gebruikers (Mijn Account, bestellingen).
   Laden via functions.php met is_woocommerce() || is_account_page()
   ============================================================= */


/* -----------------------------------------------------------------
   1. WOOCOMMERCE MIJN ACCOUNT — PAGINA LAYOUT
   Sidebar-navigatie links, content-paneel rechts.
----------------------------------------------------------------- */

/* Maximale breedte en centrering van het account-blok */
.woocommerce-account .woocommerce {
  max-width: 1100px;
  margin: 40px auto 80px;
  padding: 0 5%;
}

/* Navigatie zweeft links */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 260px;
  float: left;
}

/* Content-paneel zweeft rechts */
.woocommerce-account .woocommerce-MyAccount-content {
  width: calc(100% - 300px);
  float: right;
  background: #ffffff;
  padding: 28px 32px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 20px rgba(0,0,0,.03);
}


/* -----------------------------------------------------------------
   2. WOOCOMMERCE MIJN ACCOUNT — NAVIGATIE
   Pill-stijl menu-items; actief item coral-gevuld.
----------------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation li {
  margin-bottom: 8px;
}

/* Menu-link als pill */
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: var(--text-main);
  background: rgba(0,0,0,.03);
  transition: transform .12s ease, background .12s ease;
}

/* Hover: licht omhoog en coral-tint */
.woocommerce-MyAccount-navigation a:hover {
  transform: translateY(-1px);
  background: rgba(255,128,102,.12);
}

/* Actief menu-item: coral achtergrond */
.woocommerce-MyAccount-navigation .is-active a {
  background: var(--human-coral) !important;
  color: #ffffff !important;
}

/* Hover op actief item: wit blijven (niet oranje worden) */
.woocommerce-MyAccount-navigation .is-active a:hover {
  background: var(--human-coral) !important;
  color: #ffffff !important;
}

/* Niet-actieve items: zwarte tekst */
.woocommerce-MyAccount-navigation a {
  color: var(--text-main) !important;
}

.woocommerce-MyAccount-navigation a:hover {
  color: var(--text-main) !important;
}


/* -----------------------------------------------------------------
   3. WOOCOMMERCE MIJN ACCOUNT — CONTENT
   Dashboard-titel en welkomsttekst.
----------------------------------------------------------------- */

/* Dashboard-titel geen bovenmarge */
.woocommerce-MyAccount-content h2 {
  margin-top: 0;
  font-size: 1.6rem;
}

/* Welkomsttekst subtiele kleur */
.woocommerce-MyAccount-content p {
  margin-bottom: 16px;
  color: var(--text-soft);
}


/* -----------------------------------------------------------------
   4. WOOCOMMERCE BESTELLINGEN TABEL
   Afgeronde hoeken en subtiele header-achtergrond.
----------------------------------------------------------------- */
.woocommerce-orders-table {
  border-radius: 14px;
  overflow: hidden;
}

.woocommerce-orders-table th {
  background: rgba(0,0,0,.03);
}


/* -----------------------------------------------------------------
   5. RESPONSIVE — MIJN ACCOUNT
   Op mobiel: navigatie en content gestapeld (geen float).
----------------------------------------------------------------- */
@media (max-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
  }

  .woocommerce-MyAccount-navigation {
    margin-bottom: 20px;
  }
}


/* -----------------------------------------------------------------
   6. E-LEARNINGS PAGINA — TUTOR LMS KAARTEN (.kb-courses)
   Overschrijft Tutor LMS standaard-stijlen voor kaart, thumbnail,
   padding, titels, knop en tekst-overflow.
   Hier geplaatst omdat Tutor LMS onderdeel is van de betaalde flow.
----------------------------------------------------------------- */
.kb-courses .tutor-course-card,
.kb-courses .tutor-card {
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.03) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}
.kb-courses .tutor-course-card:hover,
.kb-courses .tutor-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0,0,0,0.14) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
}

/* Thumbnail vaste hoogte */
.kb-courses .tutor-course-thumbnail,
.kb-courses .tutor-course-thumbnail img {
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Padding in kaart-body */
.kb-courses .tutor-course-content,
.kb-courses .tutor-card-body {
  padding: 16px 16px 14px !important;
}

/* Cursustitel */
.kb-courses .tutor-course-loop-title h2,
.kb-courses .tutor-course-loop-title h2 a,
.kb-courses .tutor-course-title,
.kb-courses .tutor-course-title a {
  font-size: 1.1rem !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
  color: var(--text-main) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.kb-courses .tutor-course-title a:hover,
.kb-courses .tutor-course-loop-title h2 a:hover {
  color: var(--human-coral) !important;
}

/* Tutor LMS knoppen: coral pill-stijl */
.kb-courses a.tutor-btn,
.kb-courses button.tutor-btn,
.kb-courses .tutor-course-loop-footer a,
.kb-courses .tutor-course-loop-footer button {
  background: var(--human-coral) !important;
  color: #fff !important;
  border: 2px solid var(--human-coral) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  box-shadow: 0 6px 16px rgba(255,128,102,.18) !important;
}
.kb-courses a.tutor-btn:hover,
.kb-courses button.tutor-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(255,128,102,.22) !important;
}

/* -----------------------------------------------------------------
   7. ADRES OPSLAAN / WIJZIGINGEN OPSLAAN BUTTON
   Probleem: hover werd blauw door browser/theme override.
----------------------------------------------------------------- */
.woocommerce-address-fields button.button,
.woocommerce-address-fields input[type="submit"],
.woocommerce-EditAccountForm button.button,
.woocommerce-EditAccountForm input[type="submit"],
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input[type="submit"] {
  background-color: var(--human-coral) !important;
  color: #ffffff !important;
  border: 2px solid var(--human-coral) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
  box-shadow: none !important;
}

.woocommerce-address-fields button.button:hover,
.woocommerce-address-fields input[type="submit"]:hover,
.woocommerce-EditAccountForm button.button:hover,
.woocommerce-EditAccountForm input[type="submit"]:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input[type="submit"]:hover {
  background-color: #e06650 !important;
  border-color: #e06650 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(255,128,102,.25) !important;
}


/* -----------------------------------------------------------------
   8. ACCOUNTDETAILS: RADIO BUTTONS STIJL
   Probleem: nieuwsbrief-opties tonen bolletjes i.p.v. nette checkboxen.
   Nota: de plugin gebruikt input[type=radio] — volledig omzetten
   naar checkbox vereist JS/PHP. Dit geeft ze tenminste coral stijl.
----------------------------------------------------------------- */
.woocommerce-account .woocommerce-form-row input[type="radio"],
.woocommerce-account .woocommerce-form-row input[type="checkbox"] {
  accent-color: var(--human-coral) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

.woocommerce-account .woocommerce-form-row label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}


/* -----------------------------------------------------------------
   9. WINKELWAGEN BREEDTE
   Probleem: cart-blok is schermvullend.
----------------------------------------------------------------- */
.woocommerce-cart .woocommerce,
.wp-block-woocommerce-cart,
.wc-block-cart {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
  box-sizing: border-box !important;
}


/* -----------------------------------------------------------------
   10. WINKELWAGEN: QUANTITY KNOPPEN
   Probleem: + en - knoppen zijn 60x44px, veel te massief.
   Op mobiel minimaal 44px voor aanraakbaarheid (WCAG 2.5.5).
----------------------------------------------------------------- */
.wc-block-components-quantity-selector__button,
button.wc-block-components-quantity-selector__button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: var(--human-coral) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
  box-shadow: none !important;
}

.wc-block-components-quantity-selector__button:hover {
  background-color: #e06650 !important;
}

.wc-block-components-quantity-selector__input,
input.wc-block-components-quantity-selector__input {
  width: 44px !important;
  text-align: center !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  padding: 4px 6px !important;
  font-size: 0.95rem !important;
}


/* -----------------------------------------------------------------
   11. WINKELWAGEN: "DOORGAAN NAAR AFREKENEN" ALS BUTTON
   Probleem: link ziet eruit als kale tekst.
----------------------------------------------------------------- */
.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-components-checkout-place-order-button {
  display: block !important;
  width: 100% !important;
  background-color: var(--human-coral) !important;
  color: #ffffff !important;
  border: 2px solid var(--human-coral) !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
  box-shadow: 0 6px 16px rgba(255,128,102,.20) !important;
  margin-top: 12px !important;
}

.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(255,128,102,.28) !important;
  color: #ffffff !important;
}


/* -----------------------------------------------------------------
   12. WINKELWAGEN: BETAALLOGO'S GROTER
   Probleem: iDEAL/creditcard logo's zijn te klein.
----------------------------------------------------------------- */
.wc-block-components-payment-method-icon,
img.wc-block-components-payment-method-icon {
  height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
}

.wc-block-components-payment-method-icons,
.wp-block-woocommerce-cart-accepted-payment-methods-block {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
}


/* -----------------------------------------------------------------
   13. WINKELWAGEN: LEGE STAAT
   Probleem: emoji-gezicht en basic layout buiten merkstijl.
----------------------------------------------------------------- */
.wp-block-woocommerce-empty-cart-block {
  text-align: center !important;
  padding: 40px 20px !important;
}

.wc-empty-cart-message,
.wp-block-woocommerce-empty-cart-block p {
  font-size: 1.1rem !important;
  color: var(--text-soft) !important;
  margin-bottom: 24px !important;
}

.wp-block-woocommerce-empty-cart-block .woocommerce-info {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-top: 3px solid var(--human-coral) !important;
  border-radius: 14px !important;
  color: var(--text-main) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
  padding: 16px 20px !important;
}

.woocommerce-cart .return-to-shop a,
.wp-block-woocommerce-empty-cart-block a.wp-block-button__link {
  background-color: var(--human-coral) !important;
  color: #ffffff !important;
  border: 2px solid var(--human-coral) !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.woocommerce-cart .return-to-shop a:hover,
.wp-block-woocommerce-empty-cart-block a.wp-block-button__link:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(255,128,102,.25) !important;
  color: #ffffff !important;
}


/* -----------------------------------------------------------------
   14. CHECKOUT: ENGELSE TEKST MAILCHIMP
   Probleem: "I want to receive updates..." is Engels.
   Dit is een VERTAALPROBLEEM, geen CSS-probleem.
   Oplossing: Loco Translate → Mailchimp for WooCommerce plugin →
   zoek "I want to receive updates about products and promotions."
   en vertaal naar Nederlands.
----------------------------------------------------------------- */


/* Voorkom dat Tutor LMS titels en tekst worden afgekapt */
.kb-courses .tutor-course-title,
.kb-courses .tutor-course-title a,
.kb-courses .tutor-course-loop-title,
.kb-courses .tutor-course-loop-title h2,
.kb-courses .tutor-course-loop-title h2 a,
.kb-courses .tutor-course-excerpt,
.kb-courses .tutor-course-content p,
.kb-courses .tutor-course-content,
.kb-courses .tutor-card-body {
  -webkit-line-clamp: unset !important;
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
}
.kb-courses .tutor-course-content * { max-height: none !important; }