/*
 * 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);
}