/* =====================================================================
   VARIANTKEUZE-VERF (TEST) — hoort bij snippets/variantkeuze-verf.rain + assets/variantkeuze-verf.js
   Alleen actief als de JS de klasse .vk-actief op het productformulier zet (testvlag ?variantkeuze=1).
   Kleuren/fonts volgen de theme-instellingen (CSS-variabelen van het thema, met de huisstijl als terugval).
   ===================================================================== */

/* ---------- huidige keuze verbergen zolang de test aan staat ---------- */
#product_configure_form.vk-actief .variant-selection,
#product_configure_form.vk-actief .product-calculator-wrapper,
#product_configure_form.vk-actief .open-calculator-wrap,
#product_configure_form.vk-actief .product-configure-chosen,
#product_configure_form.vk-actief .price-label-wrap,
#product_configure_form.vk-actief .selected-details-top,
#product_configure_form.vk-actief .selected-details,
#product_configure_form.vk-actief .dark-price-info,
#product_configure_form.vk-actief .free-product-wrap,
#product_configure_form.vk-actief .submit { display: none; }

/* ---------- component ---------- */
.vk {
  clear: both;
  margin: 0 0 16px;
  color: var(--text, #666666);
  font-size: var(--fontDefaultSize, 14px);
  line-height: 1.45;
}
.vk[hidden] { display: none; }
.vk [hidden] { display: none; }
.vk *, .vk *::before, .vk *::after { box-sizing: border-box; }

.vk__label {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  color: var(--black, #29384B);
  font-size: var(--fontDefaultSize, 14px); font-weight: var(--fontBold, 700);
}

/* link naar de verf-calculator */
/* stapnummer in een bolletje: 1 Kies je kleur, 2 Kies je inhoudsmaat; groen als die stap klaar is */
.vk__stap {
  flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--black, #29384B); color: #FFFFFF;
  font-size: 12px; font-weight: var(--fontBold, 700); line-height: 1;
  transition: background-color var(--transition, 0.2s);
}
.vk__stap.is-klaar { background: var(--accent, #70C067); }

.vk__calc {
  display: inline-flex; align-items: center; gap: 8px;
  margin: -2px 0 10px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--black, #29384B);
  font-family: inherit; font-size: var(--fontDefaultSize, 14px); font-weight: var(--fontNormal, 400);
  text-align: left;
}
.vk__calc i { color: var(--accent_blue, #0099E5); font-size: 20px; }
.vk__calc strong { color: var(--accent_blue, #0099E5); font-weight: var(--fontMedium, 600); }
.vk__calc:hover strong { text-decoration: underline; }

/* ---------- regel (= één kleur) ---------- */
/* meer dan één kleur: elke regel in een eigen vak */
.vk--meer .vk__regel {
  padding: 14px;
  background: var(--light, #FAFAFA);
  border: 1px solid var(--lines, #ECECEC);
  border-radius: var(--borderRadius2, 4px);
}
.vk--meer .vk__regel + .vk__regel { margin-top: 12px; }
.vk__regel-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.vk__regel-titel {
  color: var(--black, #29384B);
  font-family: var(--fontHeading), sans-serif;
  font-size: var(--h4size, 16px); font-weight: 800;
}
.vk__weg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--grey, #898D93); font-size: 16px;
}
.vk__weg:hover { color: var(--black, #29384B); }

/* keuzeknoppen (Wit / Op kleur gemengd / …) — zelfde als in de verf-calculator */
.vk__uitvoeringen { display: flex; flex-wrap: wrap; gap: 8px; }
.vk__optie {
  height: 44px; padding: 0 18px;
  background: #FFFFFF; cursor: pointer;
  border: 1px solid #8D8D8D; border-radius: var(--borderRadius3, 4px);
  color: var(--black, #29384B);
  font-family: inherit; font-size: var(--fontDefaultSize, 14px); font-weight: var(--fontMedium, 600);
  transition: background-color var(--transition, 0.2s), border-color var(--transition, 0.2s), color var(--transition, 0.2s);
}
.vk__optie:hover { border-color: var(--accent, #70C067); }
/* gekozen: lichtblauw vlak met blauwe rand, tekst blijft donker leesbaar */
.vk__optie.is-actief { background: #E6F5FC; border-color: var(--accent_blue, #0099E5); color: var(--black, #29384B); box-shadow: inset 0 0 0 1px var(--accent_blue, #0099E5); }
.vk__optie.is-actief:hover { border-color: var(--accent, #70C067); box-shadow: inset 0 0 0 1px var(--accent, #70C067); }
.vk__uitvoeringen.is-invalid .vk__optie { border-color: #D0342C; }
.vk__uitvoeringen.is-invalid::after {
  content: "Kies eerst je kleur"; flex: 1 0 100%;
  color: #D0342C; font-size: var(--fontSmall, 12px); font-weight: var(--fontMedium, 600);
}

/* ---------- kleur ---------- */
.vk__kleur { margin-top: 14px; }
.vk .vk__veld {
  display: block; margin: 0;
  color: var(--black, #29384B);
  font-size: var(--fontSmall, 12px); font-weight: var(--fontMedium, 600);
}
.vk input[type="text"] {
  display: block; width: 100%; height: 44px; margin: 4px 0 0; padding: 0 12px;
  background: #FFFFFF; color: var(--black, #29384B);
  border: 1px solid #8D8D8D; border-radius: var(--borderRadius3, 4px);
  box-shadow: none;
  font-family: inherit; font-size: 16px; /* 16px voorkomt inzoomen op iOS */
  font-weight: var(--fontNormal, 400);
}
.vk input[type="text"]:focus { outline: none; border-color: var(--accent_blue, #0099E5); box-shadow: 0 0 0 3px rgba(0, 153, 229, 0.15); }
.vk input.is-invalid,
.vk input.is-invalid:focus { border-color: #D0342C; box-shadow: 0 0 0 3px rgba(208, 52, 44, 0.12); }

.vk__let-op { margin: 6px 0 0; color: var(--grey, #898D93); font-size: var(--fontSmall, 12px); }
.vk__let-op strong { color: var(--black, #29384B); }

.vk__kleur-gekozen {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  background: #FFFFFF;
  border: 1px solid var(--accent, #70C067);
  border-radius: var(--borderRadius3, 4px);
}
.vk__swatch {
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: var(--borderRadius3, 4px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.vk__swatch--klein { flex-basis: 22px; width: 22px; height: 22px; margin-top: 1px; }
.vk__swatch--wit { background: #FFFFFF; }
/* kleur zonder kleurcode (handmatig of uit de kleurentool zonder hex): geblokt patroon */
.vk__swatch--onbekend { background: repeating-linear-gradient(45deg, #FFFFFF 0 4px, var(--lines, #ECECEC) 4px 8px); }
.vk__kleur-tekst { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.vk__kleur-tekst strong { display: block; color: var(--black, #29384B); font-weight: var(--fontMedium, 600); }
.vk__kleur-tekst span { display: block; color: var(--grey, #898D93); font-size: var(--fontSmall, 12px); }

.vk__kleur-resultaten {
  margin-top: 6px;
  background: #FFFFFF;
  border: 1px solid var(--lines, #ECECEC);
  border-radius: var(--borderRadius3, 4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.vk__kleur-resultaten ul { margin: 0; padding: 4px 0; list-style: none; max-height: 260px; overflow-y: auto; }
.vk__kleur-resultaten li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 12px; cursor: pointer; }
.vk__kleur-resultaten li .vk__swatch { flex-basis: 32px; width: 32px; height: 32px; }
.vk__kleur-resultaten li:hover,
.vk__kleur-resultaten li.is-actief { background: var(--light, #FAFAFA); }
.vk__kleur-resultaten li:hover strong,
.vk__kleur-resultaten li.is-actief strong { color: var(--accent_blue, #0099E5); }
.vk__kleur-status { padding: 10px 12px; color: var(--grey, #898D93); font-size: var(--fontSmall, 12px); }
.vk .vk__kleur-status .vk__link { display: inline; padding: 0; font-size: inherit; }

.vk__kleur-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; }
.vk__link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--accent_blue, #0099E5);
  font-family: inherit; font-size: var(--fontDefaultSize, 14px); font-weight: var(--fontMedium, 600);
  text-align: left;
}
.vk__link:hover { text-decoration: underline; }
.vk__link--grijs { color: var(--grey, #898D93); font-weight: var(--fontNormal, 400); }
.vk__link--grijs span { color: var(--accent_blue, #0099E5); font-weight: var(--fontMedium, 600); }
.vk__kleur-gekozen .vk__link { flex: 0 0 auto; font-size: var(--fontSmall, 12px); }

.vk__handmatig { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 10px; }

/* ---------- inhoudsmaat ---------- */
.vk__maten { margin-top: 16px; }
.vk__maat {
  display: grid; align-items: center; gap: 4px 12px;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  grid-template-areas: "foto tekst prijs stepper";
  padding: 8px 8px 8px 8px;
  background: #FFFFFF;
  border: 1px solid var(--lines, #ECECEC);
  border-radius: var(--borderRadius3, 4px);
  transition: border-color var(--transition, 0.2s);
}
.vk__maat-foto {
  grid-area: foto;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: #FFFFFF;
  border: 1px solid var(--lines, #ECECEC); border-radius: var(--borderRadius3, 4px);
  overflow: hidden;
}
.vk__maat-foto img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.vk__maat-tekst { grid-area: tekst; }
.vk__maat .vk__maat-prijs { grid-area: prijs; text-align: right; line-height: 1.25; }
.vk__maat .vk__stepper { grid-area: stepper; }
.vk__maat + .vk__maat { margin-top: 6px; }
.vk__maat.is-gekozen { border-color: var(--accent, #70C067); }
.vk__maat.is-uit { opacity: .6; }
.vk__maat-tekst { min-width: 0; line-height: 1.35; }
.vk__maat-tekst strong { display: block; color: var(--black, #29384B); font-weight: var(--fontMedium, 600); }
.vk__maat-prijs { color: var(--black, #29384B); }
.vk__maat-prijs strong { display: block; font-size: 15px; font-weight: var(--fontBold, 700); white-space: nowrap; }
.vk__maat-prijs s { display: block; color: var(--grey, #898D93); font-size: var(--fontSmall, 12px); }
.vk__maat-per { display: block; color: var(--grey, #898D93); font-size: var(--fontSmall, 12px); }
.vk__maat-voorraad { display: block; color: var(--grey, #898D93); font-size: var(--fontSmall, 12px); }
.vk [data-deel="maten"].is-invalid .vk__maat { border-color: #D0342C; }
.vk__hint { margin: 0; color: var(--grey, #898D93); font-size: var(--fontSmall, 12px); }
.vk__maat-noot { display: block; color: var(--accent_blue, #0099E5); font-size: var(--fontSmall, 12px); }

/* stap 2 wacht op stap 1: het hele vak (titel, calculator-link en maten) grijs en niet klikbaar.
   Een doorzichtige knop ligt over het vak: klik → de kleurkeuze licht op. */
.vk__maten { position: relative; }
.vk__maten.is-wacht .vk__maten-inhoud {
  filter: grayscale(1); opacity: .45;
  user-select: none;
  transition: filter var(--transition, 0.2s), opacity var(--transition, 0.2s);
}
.vk__wacht {
  position: absolute; inset: 0; z-index: 2;
  display: block; width: 100%; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit;
}
.vk__wacht span {
  position: absolute; top: -3px; right: 0;
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  background: #FFFFFF;
  border: 1px solid var(--black, #29384B); border-radius: 14px;
  color: var(--black, #29384B);
  font-size: var(--fontSmall, 12px); font-weight: var(--fontMedium, 600);
  white-space: nowrap;
}
.vk__wacht:hover span { background: var(--black, #29384B); color: #FFFFFF; }

/* kleurkeuze laten oplichten */
@keyframes vk-oplicht {
  0%, 100% { box-shadow: 0 0 0 0 rgba(112, 192, 103, 0); }
  30%, 70% { box-shadow: 0 0 0 4px rgba(112, 192, 103, .35); }
}
.vk__uitvoeringen.is-oplicht .vk__optie,
.vk input.is-oplicht { border-color: var(--accent, #70C067); animation: vk-oplicht .8s ease-in-out 2; }

/* stepper (− 2 +) — zelfde als in de verf-calculator */
.vk__stepper {
  flex: 0 0 auto;
  display: inline-flex; align-items: stretch;
  height: 40px;
  border: 1px solid #8D8D8D; border-radius: var(--borderRadius3, 4px);
  background: #FFFFFF; overflow: hidden;
}
.vk__stepper button {
  width: 38px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--black, #29384B); font-size: 20px; line-height: 1;
}
.vk__stepper button:hover { background: var(--light, #FAFAFA); }
.vk__stepper button:disabled { color: var(--lines, #ECECEC); cursor: default; background: none; }
.vk .vk__stepper input[type="text"] {
  width: 42px; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0; text-align: center;
  font-weight: var(--fontMedium, 600);
}
.vk .vk__stepper input[type="text"]:focus { box-shadow: inset 0 0 0 2px rgba(0, 153, 229, 0.35); }

/* totaal per regel: 22,5 liter · genoeg voor ca. 202 m² per laag */
.vk__regel-som {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  margin-top: 8px; padding: 0 2px;
  font-size: var(--fontSmall, 12px);
}
.vk__regel-som strong { color: var(--black, #29384B); font-size: var(--fontDefaultSize, 14px); font-weight: var(--fontMedium, 600); }
.vk__regel-som span { color: var(--grey, #898D93); }

/* ---------- nog een kleur ---------- */
.vk__toevoegen-kleur {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin: 12px 0 0; padding: 12px 14px;
  background: #FFFFFF; cursor: pointer;
  border: 1px dashed #8D8D8D; border-radius: var(--borderRadius2, 4px);
  color: var(--text, #666666);
  font-family: inherit; font-size: var(--fontDefaultSize, 14px); text-align: left;
  transition: border-color var(--transition, 0.2s);
}
.vk__toevoegen-kleur strong { display: block; color: var(--black, #29384B); font-weight: var(--fontMedium, 600); }
.vk__toevoegen-kleur:hover { border-color: var(--accent_blue, #0099E5); }
.vk__plus {
  flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent_blue, #0099E5); color: #FFFFFF;
  font-size: 18px; font-weight: 700; line-height: 1;
}

/* ---------- overzicht ---------- */
.vk__overzicht {
  margin-top: 16px; padding: 14px;
  background: var(--light, #FAFAFA);
  border: 1px solid var(--lines, #ECECEC);
  border-radius: var(--borderRadius2, 4px);
}
.vk__overzicht ul { margin: 0; padding: 0; list-style: none; }
.vk__overzicht li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 8px 0; }
.vk__overzicht li + li { border-top: 1px solid var(--lines, #ECECEC); }
.vk__overzicht-tekst { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.vk__overzicht-tekst strong { display: block; color: var(--black, #29384B); font-weight: var(--fontMedium, 600); }
.vk__overzicht-tekst span { display: block; font-size: var(--fontSmall, 12px); }
.vk__overzicht-dekking { color: var(--accent_blue, #0099E5); }
.vk__overzicht-prijs { flex: 0 0 auto; color: var(--black, #29384B); font-weight: var(--fontMedium, 600); white-space: nowrap; }
.vk__totaal {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid #8D8D8D;
  color: var(--black, #29384B);
}
.vk__totaal span { font-weight: var(--fontMedium, 600); }
.vk__totaal strong { font-size: 18px; font-weight: 800; }

/* ---------- melding + knop ---------- */
.vk__melding {
  margin-top: 12px; padding: 10px 12px;
  background: #FDF1F0;
  border: 1px solid #D0342C; border-radius: var(--borderRadius3, 4px);
  color: #D0342C; font-weight: var(--fontMedium, 600);
}
.vk__melding p { margin: 0; }
.vk__melding p + p { margin-top: 4px; }

.vk__actie { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.vk__actie-totaal { display: none; }
.vk .vk__knop {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--btnHeight, 49px);
  border: 0; cursor: pointer;
  font-family: inherit; font-size: inherit;
}
.vk .vk__knop:disabled { opacity: .7; cursor: wait; }

/* mobiel: totaal + knop blijven onderin beeld zolang je in de keuze bezig bent */
@media (max-width: 767px) {
  .vk__optie { flex: 1 1 auto; padding: 0 12px; }
  .vk__maat {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "foto tekst stepper" "foto prijs stepper";
    gap: 2px 10px;
  }
  .vk__maat-foto { width: 44px; height: 44px; }
  .vk__maat .vk__maat-prijs { text-align: left; display: flex; align-items: baseline; gap: 6px; }
  .vk__maat-prijs s { display: inline; }
  .vk__handmatig { grid-template-columns: 1fr; }
  .vk__actie {
    position: sticky; bottom: 0; z-index: 2;
    margin: 16px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
  .vk__actie-totaal { display: flex; flex-direction: column; flex: 0 0 auto; line-height: 1.2; }
  .vk__actie-totaal[hidden] { display: none; }
  .vk__actie-totaal span { color: var(--grey, #898D93); font-size: var(--fontSmall, 12px); }
  .vk__actie-totaal strong { color: var(--black, #29384B); font-size: 16px; font-weight: 800; }
}

/* ---------- knoppen van het thema neutraliseren ----------
   shopmonkey.css geeft alle knoppen in het productformulier o.a. height: 55px, flex-grow: 3,
   padding: 0 10px, z-index: 3 en (via een ander thema-bestand) float: left.
   Met #product_configure_form #variantkeuze wegen deze regels zwaarder, zonder !important. */
#product_configure_form #variantkeuze button { float: none; flex-grow: 0; z-index: auto; width: auto; height: auto; }
#product_configure_form #variantkeuze .vk__calc { display: inline-flex; padding: 0; }
#product_configure_form #variantkeuze .vk__optie { height: 44px; padding: 0 18px; background: #FFFFFF; color: var(--black, #29384B); border-color: #8D8D8D; }
#product_configure_form #variantkeuze .vk__optie:hover { background: #FFFFFF; color: var(--black, #29384B); border-color: var(--accent, #70C067); }
#product_configure_form #variantkeuze .vk__optie.is-actief { background: #E6F5FC; color: var(--black, #29384B); border-color: var(--accent_blue, #0099E5); }
#product_configure_form #variantkeuze .vk__optie.is-actief:hover { background: #E6F5FC; color: var(--black, #29384B); border-color: var(--accent, #70C067); }
#product_configure_form #variantkeuze .vk__uitvoeringen.is-invalid .vk__optie { border-color: #D0342C; }
#product_configure_form #variantkeuze .vk__link { display: inline-flex; padding: 0; }
#product_configure_form #variantkeuze .vk__kleur-status .vk__link { display: inline; }
#product_configure_form #variantkeuze .vk__weg { display: inline-flex; width: 32px; height: 32px; padding: 0; }
#product_configure_form #variantkeuze .vk__stepper button { width: 38px; padding: 0; }
#product_configure_form #variantkeuze .vk__toevoegen-kleur { display: flex; width: 100%; padding: 12px 14px; }
#product_configure_form #variantkeuze .vk__wacht { position: absolute; z-index: 2; display: block; width: 100%; height: auto; padding: 0; background: transparent; }
#product_configure_form #variantkeuze .vk__knop { position: relative; z-index: 0; display: inline-flex; flex: 1 1 auto; width: 100%; height: var(--btnHeight, 49px); padding: 0 var(--btnSetting, 30px); }
@media (max-width: 767px) {
  #product_configure_form #variantkeuze .vk__optie { flex: 1 1 auto; padding: 0 12px; }
}
/* moet als laatste: verborgen onderdelen blijven verborgen */
#product_configure_form #variantkeuze [hidden] { display: none; }