/* 1. Layout Containers en Grid Structuur */

/* Hoofdcontainer voor meerdere kleurselectievelden naast elkaar */
.kleurselectie-container-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  justify-content: space-between;
}

/* Kleurselectieblok per veld (bijv. kleur 1, 2, 3, 4) */
.wc-pao-addon-container .kleurselectie-container {
  flex: 1 1 calc(25% - 15px); /* 4 per rij met marge */
  min-width: 200px;
  box-sizing: border-box;
  margin-bottom: 2rem;
  font-family: inherit;
}

/* WooCommerce composite style fix */
.composite_form:not(.paged) .component .component_inner {
  padding-bottom: 0 !important;
}

/* Zorgt dat container binnen componenten 100% benut */
.wc-pao-addons-container {
  width: 100%;
}

.kleurselectie-hidden {
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2. Kleurselectie dropdowns en interactie */

/* De dropdown zelf */
.kleurselectie-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Voorbeeldweergave van geselecteerde kleur */
.kleurselectie-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  font-weight: 500;
  cursor: pointer;
  min-height: 55px;
  max-width: 60px;
  transition: border-color 0.2s ease-in-out;
}

/* Highlight preview als dropdown open is */
.kleurselectie-wrapper.open .kleurselectie-preview {
  border-color: #333;
}

/* Afbeelding in preview */
.kleurselectie-preview img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 5px;
}

/* 3. Dropdown inhoud (opties per groep) */

/* Dropdown container */
.kleurselectie-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 99;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

/* Toon dropdown als open */
.kleurselectie-wrapper.open .kleurselectie-dropdown {
  display: block;
  min-width: 350px;
  max-width: 350px;
  min-height: 330px;
}

/* 4. Opties (kleurvakken) */

/* Optie-vakje */
.kleurselectie-optie {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  background-color: #f9f9f9;
  transition: all 0.2s;
}

/* Hover effect */
.kleurselectie-optie:hover {
  background: #f0f0f0;
  border-color: #999;
}

/* Afbeelding in optie */
.kleurselectie-optie img {
  width: 60px !important;
  height: 60px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
}

/* Speciaal formaat voor hart-ballonnen */
.kleurselectie-optie.groep-hart img {
  width: 120px !important;
}

/* Label onder de afbeelding */
.kleurselectie-optie span {
  font-size: 12px;
  line-height: 1.2;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Verberg labels voor cijfers */
.kleurselectie-optie.groep-Cijfers span {
  display: none;
}

/* 5. Scrollbar stijl */

.kleurselectie-dropdown::-webkit-scrollbar {
  width: 6px;
}
.kleurselectie-dropdown::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}

/* 6. Groepslayout & visuele accenten */

/* Titels van groepen (Pastel, Metallic, etc.) */
.kleurselectie-groep-label {
  margin: 0.5rem 0 0.25rem;
  font-weight: bold;
  font-size: 14px;
  grid-column: 1 / -1;
}

/* Layout voor groep containers */
.kleurselectie-groep {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 per rij */
  gap: 8px;
  margin-bottom: 1rem;
}

/* Groep-kleuren borders */
.groep-pastel img { border: 1px solid #eec; }
.groep-metallic img { border: 1px solid #ccc; }
.groep-chrome img { border: 1px solid #999; }

/* 7. Prijs en verborgen select dropdown */

/* Prijs onder opties */
.kleurselectie-prijs {
  display: block;
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

/* Visueel verberg WooCommerce select */
.kleurselectie-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 8. Totale prijs styling */

/* Container voor addon-totals */
.product-addon-totals {
  clear: both;
  margin: 20px 0 40px 0;
  padding: 20px 0 0 0;
  border-top: none !important;
  border-bottom: none !important;
  overflow: none !important;
}

.product-addon-totals li{
  list-style: none;
}

/* Verberg alles behalve subtotaal */
.product-addon-totals li:not(.wc-pao-subtotal-line) {
  display: none !important;
}

.product-addon-totals .wc-pao-subtotal-line {
  border: none !important;
  float: left;
  margin-top: -25px !important;
}

.product-addon-totals .wc-pao-subtotal-line .price {
  font-size: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.product-addon-totals .wc-pao-subtotal-line .amount {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Verberg eerste child van prijs */
.product-addon-totals .wc-pao-subtotal-line .price::first-child {
  display: none;
}

.wc-pao-subtotal-line .price {
  font-size: 0 !important;
}

/* 9. Specifieke fix voor bepaalde addon */

/* Specifiek addon fix: layout reset */
.wc-pao-addon-id-1751108782 {
  clear: both;
}
.wc-pao-addon-id-1750009530, .wc-pao-addon-id-1750009531, .wc-pao-addon-id-1750009532, .wc-pao-addon-id-1750009533, 
.wc-pao-addon-id-1750240114, .wc-pao-addon-id-1750240115, .wc-pao-addon-id-1750240116, .wc-pao-addon-id-1750240117 {
  max-width: 80px;
  float: left;
}
.wc-pao-addon-id-1751791657, .wc-pao-addon-id-1751972633 {
    max-width: 20%;
    float: left;
}
.wc-pao-addon-id-1750240114 {
    clear: both;
}

/* 10. Tafel/grond trosjes */
.wc-pao-addon-id-1752057034, .wc-pao-addon-id-1752057035, .wc-pao-addon-id-1752057036, .wc-pao-addon-id-1752057037, .wc-pao-addon-id-1752057165, 
.wc-pao-addon-id-1752057166, .wc-pao-addon-id-1752057168, .wc-pao-addon-id-1752057167, .wc-pao-addon-id-1752057261 {
    max-width: 110px;
    float: left;
}
.wc-pao-addon-id-1752053278, .wc-pao-addon-id-1752053279 {
    max-width: 100px;
    float: left;
}

#product-21267 li.wc-pao-subtotal-line {
    display: none;
}