/* style.css */

/* Standaardstijlen voor de add-on weergave op de productpagina */
.wc-product-addons {
  margin: 20px 0;
}

.addon-block {
  border: 3px solid #ff815b;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column; /* Nu items onder elkaar in het hoofdblok */
  gap: 10px; /* Ruimte tussen elementen in het hoofdblok */
  background-color: #fff;
}

/* Container voor afbeelding, titel en beschrijving */
.addon-header {
  display: flex; /* Afbeelding, titel en beschrijving naast elkaar */
  align-items: flex-start; /* Lijn bovenkant uit */
  gap: 15px; /* Ruimte tussen afbeelding en tekst */
  width: 100%; /* Zorg dat het de volledige breedte inneemt in het addon-block */
}

.addon-img {
  max-width: 65px;
  max-height: 65px;
  border: 1px solid #ddd;
  padding: 3px;
  background: white;
  flex-shrink: 0;
}

/* Container voor titel en beschrijving */
.addon-text-wrap {
  flex-grow: 1; /* Laat de tekst de resterende ruimte innemen */
}

.addon-block label {
  font-weight: bold;
  margin-right: 10px; /* Ruimte na de titel */
  display: block; /* Zorgt dat de label op een eigen regel staat */
  position: relative; /* Voor de asterisk */
}

/* Styling voor de omschrijving onder de titel */
.addon-description {
  font-size: 0.9em;
  color: #666;
  margin-top: 5px; /* Ruimte onder de label */
  margin-bottom: 0; /* Geen extra marge onder de beschrijving */
}

/* Styling voor de asterisk van verplichte velden */
.addon-block label .required {
  color: #dc3232; /* Rode kleur voor de asterisk */
  font-weight: bold;
  position: absolute;
  top: 0;
  right: -10px; /* Plaats de asterisk iets rechts van de label */
}

.addon-block select {
  width: 100%; /* De dropdown neemt nu de volledige breedte van het blok in */
  max-width: 400px; /* Optionele max-breedte voor de dropdown */
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Stijl voor de totale prijs weergave op de productpagina */
.addon-total-price {
  margin-top: 20px;
  padding: 15px;
  border: 3px solid #6f30ff;
  border-radius: 15px;
  background-color: #ffffff;
  font-weight: bold;
  text-align: center;
  font-size: 1em;
  color: #000000;
}

/* --- SPECIFIEKE STIJLEN VOOR ADD-ON PRIJZEN IN WINKELWAGEN & AFREKENPAGINA --- */

/* Deze regels targeten het valuta-bedrag (span.woocommerce-Price-amount.amount)
   binnen de add-on weergave in de winkelwagen en afrekenoverzicht. */

/* Regels voor de prijs (het bedrag met valutasymbool) van de add-on opties */
/* Voor de Winkelwagen pagina (.shop_table.cart) */
.shop_table.cart tr.cart_item td.product-name dl.variation dd .woocommerce-Price-amount.amount,
.shop_table.cart tr.cart_item td.product-name dl.wc-item-meta dd .woocommerce-Price-amount.amount {
    font-size: 1em !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* Voor de Afreken pagina (.woocommerce-checkout-review-order-table) */
.woocommerce-checkout-review-order-table tr.cart_item td.product-name dl.variation dd .woocommerce-Price-amount.amount,
.woocommerce-checkout-review-order-table tr.cart_item td.product-name dl.wc-item-meta dd .woocommerce-Price-amount.amount {
    font-size: 1em !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* Optionele stijlen voor de 'dd' (definition description) elementen zelf. */
.shop_table.cart tr.cart_item td.product-name dl.variation dd,
.shop_table.cart tr.cart_item td.product-name dl.wc-item-meta dd,
.woocommerce-checkout-review-order-table tr.cart_item td.product-name dl.variation dd,
.woocommerce-checkout-review-order-table tr.cart_item td.product-name dl.wc-item-meta dd {
    display: inline !important;
    margin-left: 0 !important;
    padding-left: 5px !important;
}

/* Optionele stijlen voor de 'dt' (definition term) elementen zelf. */
.shop_table.cart tr.cart_item td.product-name dl.variation dt,
.shop_table.cart tr.cart_item td.product-name dl.wc-item-meta dt,
.woocommerce-checkout-review-order-table tr.cart_item td.product-name dl.variation dt,
.woocommerce-checkout-review-order-table tr.cart_item td.product-name dl.wc-item-meta dt {
    font-weight: normal !important;
    display: inline !important;
}

/* --- ALGEMENE STIJLEN VOOR ADD-ONS IN EMAILS / ADMIN / WEBTOFFEE PDF --- */
ul.wc-addons-order-item,
ul.wc-addons-item-meta {
    list-style: none;
    margin: 5px 0 0 15px;
    padding: 0;
    font-size: 0.75em;
}

ul.wc-addons-order-item li,
ul.wc-addons-item-meta li {
    margin-bottom: 2px;
}

/* Voor de admin order details weergave */
.wc-addons-admin-order-meta {
    font-size: 0.9em;
    margin-top: 5px;
    padding-left: 10px;
    border-left: 2px solid #eee;
}

/* Specifieke styling voor de WebToffee PDF uitvoer. */
ul.wt-ps-addon-meta {
    list-style: none;
    margin: 0 0 0 10px;
    padding: 0;
    font-size: 10px;
    line-height: 1.4;
    color: #333;
}
ul.wt-ps-addon-meta li {
    margin-bottom: 2px;
}