/* ===== Bonpresta Bontab – front styles (PS 1.7/8) ===== */

.bon-product-popup {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-bottom: 30px;
  overflow: hidden;
}

/* Titel-Links (beliebig viele, nicht nur -1/-2) */
.bon-product-popup [class^="title-popup-"],
.bon-product-popup [class*=" title-popup-"] {
  cursor: pointer;
  font-size: 13px;
  color: #3a3a3a;
  line-height: 1.2;
  text-decoration: none;
  transition: color .3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Icon-Vorspann optional über bonicon / Material Icons – nur wenn Fonts geladen sind */
.bon-product-popup [class^="title-popup-"]::before,
.bon-product-popup [class*=" title-popup-"]::before {
  font-size: 14px;
  color: #3a3a3a;
  transition: color .3s ease;
}

/* Wenn du unterschiedliche Icons möchtest, kannst du gezielt pro Index stylen: */
.product-quantity .bon-product-popup .title-popup-1::before { content: '\e023'; font-family: 'bonicon'; }
.product-quantity .bon-product-popup .title-popup-2::before { content: '\e001'; font-family: 'bonicon'; }

/* Hover */
.product-quantity .bon-product-popup [class^="title-popup-"]:hover,
.product-quantity .bon-product-popup [class*=" title-popup-"]:hover {
  color: #262626;
}
.product-quantity .bon-product-popup [class^="title-popup-"]:hover::before,
.product-quantity .bon-product-popup [class*=" title-popup-"]:hover::before {
  color: #262626;
}

/* Modal – generisch, unabhängig von der Nummer */
.bon-product-popup [class^="desc-popup-"] .modal-dialog,
.bon-product-popup [class*=" desc-popup-"] .modal-dialog {
  max-width: 900px;
}

.bon-product-popup [class^="desc-popup-"] .modal-content,
.bon-product-popup [class*=" desc-popup-"] .modal-content {
  border-radius: 0;
}

.bon-product-popup [class^="desc-popup-"] .modal-header,
.bon-product-popup [class*=" desc-popup-"] .modal-header {
  padding: 10px 25px 15px;
  position: relative;
  text-align: center;
  border-bottom: none;
}

.bon-product-popup [class^="desc-popup-"] .modal-title,
.bon-product-popup [class*=" desc-popup-"] .modal-title {
  margin: 0 0 8px;
}

.bon-product-popup [class^="desc-popup-"] .modal-body,
.bon-product-popup [class*=" desc-popup-"] .modal-body {
  padding: 0 25px 25px;
}

/* Close-Button */
.popup-close {
  position: absolute;
  right: -40px;
  top: -26px;
  z-index: 100;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.popup-close::after {
  content: '\e5cd';
  font-family: "Material Icons";
  font-size: 25px;
  color: #fff;
  transition: color .3s ease, opacity .3s ease;
}

.popup-close:focus { outline: none; }
.popup-close:hover::after { color: #fff; }

/* Size Guide Tabelle (Popup 1 Inhalt) */
.bon-product-popup .size-tab-description {
  text-align: center;
  overflow-x: auto;
}
.bon-product-popup .size-tab-description p { margin-bottom: 10px; }
.bon-product-popup .size-tab-description .bon-table-first thead th {
  width: 14%;
  text-align: center;
  font-size: 13px;
}
.bon-product-popup .size-tab-description .bon-table-first tbody tr:nth-child(2n+2) {
  background-color: #f5f5f5;
}
.bon-product-popup .size-tab-description .bon-table-first tbody td {
  padding: 3px 10px 3px 0;
  width: 14%;
  text-align: center;
  color: #3a3a3a;
  font-size: 12px;
}

/* Shipping-Listen (Popup 2 Inhalt) */
.bon-product-popup .delivery-information-popup { }
.bon-product-popup .delivery-information-popup .delivery-title {
  margin-bottom: 15px;
  font-size: 16px;
}
.bon-product-popup .delivery-information-popup ul {
  list-style: inherit;
  padding-left: 30px;
  margin-bottom: 30px;
}
.bon-product-popup .delivery-information-popup ul:last-child { margin-bottom: 0; }
.bon-product-popup .delivery-information-popup li {
  color: #7a7a7a;
  font-size: 13px;
  margin-bottom: 5px;
}

/* Responsive */
@media (max-width: 1024px) {
  .bon-product-popup .modal-dialog { margin: 30px auto; }
  .popup-close {
    right: 0;
    top: 7px;
  }
  .popup-close::after {
    color: #3a3a3a;
    opacity: .75;
  }
  .popup-close:hover::after {
    color: #3a3a3a;
    opacity: 1;
  }
}