/* ====== Marco aanpassing Grammer Productopties ====== */

/* "Kies uw opties" kop */
.marco-opties-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.marco-lijn {
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}
.marco-koptekst {
  font-size: 16px;
  font-weight: 700;
  color: #555;
  white-space: nowrap;
}

/* Addon basisstijl */
.wc-pao-addon-container.marco-gratis,
.wc-pao-addon-container.marco-korting,
.wc-pao-addon-container.marco-gewoon {
  padding: 0 5px 0 10px;
  margin-bottom: 10px;
  border-left: 2px solid #ccc;
  transition: border-left-color 0.2s, background 0.2s;
  overflow: visible;
}
.wc-pao-addon-container.marco-gratis  { border-left-color: #4CAF50; }
.wc-pao-addon-container.marco-korting { border-left-color: #ee7b1f; }

/* Hover */
.wc-pao-addon-container.marco-gewoon:hover  { background: #f9f9f9; }
.wc-pao-addon-container.marco-gratis:hover  { background: #f4fbf4; border-left-color: #3a9b40; }
.wc-pao-addon-container.marco-korting:hover { background: #fffaf5; border-left-color: #cc6a18; }

/* Label rij met badge */
.marco-label-rij {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 3px;
}
.marco-label-rij label {
  flex: 1;
  margin-bottom: 0 !important;
}

/* Badges */
.marco-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.marco-badge-gratis  { background: #4CAF50; color: #fff; }
.marco-badge-korting { background: #ee7b1f; color: #fff; }

/* (verplicht) tekst */
.marco-verplicht {
  font-size: 11px;
  font-weight: 400;
  color: #c0392b;
  font-style: italic;
}

/* WooCommerce maakt required labels rood — wij overschrijven naar blauw */
.wc-pao-addon-container.marco-gratis label,
.wc-pao-addon-container.marco-korting label,
.wc-pao-addon-container.marco-gewoon label {
  color: #2b6f9f !important;
}

/* WooCommerce validatie foutmelding — stijl passend bij ons ontwerp */
.wc-pao-addon-container .wc-pao-addon-validation-message {
  display: inline-block;
  background: transparent;
  color: #c0392b;
  font-size: 12px;
  font-style: italic;
  padding: 0;
  border: none;
  margin-top: 3px;
}

/* ====== Einde Marco aanpassing Grammer Productopties ====== */