/* v6 - Configurator voor de aluminium lijn op maat (pricing_source = variant).
   De kleuren komen uit de huisstijl die in product-styles.css als custom
   properties staat. Alleen de tinten die daar niet in staan zijn hier
   afgeleid, zodat er geen tweede palet ontstaat. */

.vc {
    --vc-accent: var(--primary-color, #1C2A4B);
    --vc-accent-vlak: #eef1f7;
    --vc-prijs: var(--secondary-color, #FF8C42);
    --vc-rand: var(--v4-border, #e5e7eb);
    --vc-rand-sterk: var(--border, #dee2e6);
    --vc-grijs: var(--gray, #6c757d);
    --vc-vlak: var(--light-bg, #f8f9fa);
    --vc-groen: var(--v4-green, #16a34a);
    --vc-groen-vlak: var(--v4-green-bg, #f0fdf4);
    /* Oranje is op deze site de kleur waarmee je iets doet. Alles wat de klant
       aanklikt en aan staat krijgt daarom dezelfde oranje omlijning, zodat er
       maar een taal is voor "dit heb ik gekozen". */
    --vc-gekozen-rand: var(--secondary-color, #FF8C42);
    --vc-gekozen-vlak: #fff6ef;
    --vc-gekozen-gloed: rgba(255, 140, 66, .3);

    margin: 24px 0;
    color: var(--text-color, #333);
}

.vc-kop { font-size: 1.25rem; color: var(--vc-accent); margin: 0 0 16px; }
.vc-label { display: block; font-weight: 600; margin-bottom: 8px; }

.vc-maat { display: flex; gap: 16px; flex-wrap: wrap; }
.vc-veld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; }
.vc-veld > span { font-weight: 600; }
.vc-veld input {
    padding: 10px 12px; border: 1px solid var(--vc-rand-sterk); border-radius: 8px;
    font: inherit; font-size: 1rem; width: 100%;
}
.vc-veld input:focus {
    outline: none; border-color: var(--vc-accent);
    box-shadow: 0 0 0 3px rgba(28, 42, 75, .12);
}
.vc-veld small { color: var(--vc-grijs); }

.vc-hint { color: var(--vc-grijs); font-size: .9rem; margin: 8px 0 0; }
.vc-fout { color: #b91c1c; font-weight: 600; margin: 0; }
.vc-waarschuwing {
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    padding: 12px 14px; margin: 16px 0; border-radius: 10px; font-size: .92rem;
}

.vc-kleuren { margin-top: 20px; }
.vc-kleurrij { display: flex; gap: 10px; flex-wrap: wrap; }
.vc-kleur {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 12px; border: 2px solid var(--vc-rand); border-radius: 9px;
    background: #fff; font: inherit; font-size: .9rem;
}
.vc-kleur:hover { border-color: var(--vc-rand-sterk); }
.vc-kleur.actief {
    border-color: var(--vc-gekozen-rand); background: var(--vc-gekozen-vlak);
    box-shadow: 0 0 0 3px var(--vc-gekozen-gloed);
    color: var(--vc-accent); font-weight: 700;
}
.vc-swatch {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--vc-rand-sterk);
}

.vc-prijsblok {
    margin: 20px 0; padding: 16px; border: 1px solid var(--vc-rand);
    border-radius: 12px; background: var(--vc-vlak);
}
.vc-bedrag { display: flex; align-items: baseline; gap: 8px; }
.vc-bedrag strong {
    font-size: 1.9rem; line-height: 1.1; font-weight: 800; color: var(--vc-prijs);
}
.vc-bedrag span { color: var(--vc-grijs); }
.vc-bedrag-incl {
    display: flex; align-items: baseline; gap: 8px;
    color: var(--vc-grijs); margin-top: 2px;
}
.vc-bedrag-incl span:first-child {
    font-size: 1.15rem; font-weight: 700; color: var(--vc-accent);
}

.vc-secties { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.vc-sectie {
    border: 1px solid var(--vc-rand);
    border-radius: 14px;
    padding: 18px;
    background: #fff;
}

/* De kop is de klikbare regel van een inklapbare sectie. Ingeklapt zie je
   stapnummer, titel en wat er gekozen is; de uitleg en de tegels komen pas in
   beeld als je hem opent. */
.vc-sectie-kop {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
}
.vc-sectie-kop::-webkit-details-marker { display: none; }
.vc-sectie[open] .vc-sectie-kop {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--vc-rand);
}
.vc-sectie-kop:hover .vc-sectie-tekst h4 { color: var(--vc-gekozen-rand); }
.vc-sectie-kop:focus-visible {
    outline: 2px solid var(--vc-gekozen-rand);
    outline-offset: 4px;
    border-radius: 8px;
}

.vc-sectie-pijl {
    display: grid; place-items: center;
    color: var(--vc-grijs);
    transition: transform .2s ease;
}
.vc-sectie[open] .vc-sectie-pijl { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .vc-sectie-pijl { transition: none; }
}

/* De uitleg hoort bij het kiezen en staat daarom binnen het opengeklapte deel. */
.vc-sectie-uitleg {
    margin: 0 0 16px;
    font-size: .88rem;
    color: var(--vc-grijs);
    line-height: 1.45;
}
.vc-stap {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--vc-prijs); color: #fff;
    font-weight: 700; font-size: .95rem;
}
.vc-sectie-tekst h4 { margin: 0; font-size: 1.1rem; color: var(--vc-accent); transition: color .15s; }

/* Rechtsboven staat wat er nu in deze sectie gekozen is, zodat de klant dat
   ziet zonder de hele rij tegels langs te gaan. Groen is op deze site de
   kleur van een bevestiging, dus die gebruiken we ook hier. */
.vc-sectie-stand {
    padding: 5px 12px; border-radius: 999px;
    font-size: .82rem; white-space: nowrap;
    background: var(--vc-vlak); color: var(--vc-grijs);
    border: 1px solid var(--vc-rand);
}
.vc-sectie-stand.gekozen {
    background: var(--vc-groen-vlak); border-color: #bbf7d0;
    color: #15803d; font-weight: 600;
    white-space: normal; max-width: 240px; text-align: right;
}

/* De tegel waarmee je een sectie leeg laat. Geen afbeelding, want er valt
   niets te tonen; wel dezelfde vorm als de andere tegels. */
.vc-geen {
    display: flex; flex-direction: column; gap: 6px; text-align: left;
    padding: 14px; border: 2px dashed var(--vc-rand-sterk); border-radius: 12px;
    background: var(--vc-vlak); cursor: pointer; font: inherit;
    color: var(--text-color, #333);
    /* Deze tegel heeft geen afbeelding, dus hij hoeft niet mee te rekken met
       de hoogte van de tegels ernaast. Compact leest hier beter. */
    align-self: start;
}
.vc-geen:hover { border-color: var(--vc-rand-sterk); }
.vc-geen.actief {
    border-style: solid; border-color: var(--vc-gekozen-rand);
    background: var(--vc-gekozen-vlak);
    box-shadow: 0 0 0 3px var(--vc-gekozen-gloed);
}
.vc-geen-titel { font-weight: 700; color: var(--vc-accent); }
.vc-geen-oms { font-size: .85rem; color: var(--vc-grijs); }
.vc-geen-prijs { font-weight: 600; color: var(--vc-grijs); }

.vc-optierij {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.vc-optie {
    display: flex; flex-direction: column; gap: 6px; text-align: left;
    padding: 0 0 12px; border: 2px solid var(--vc-rand); border-radius: 12px;
    background: #fff; cursor: pointer; overflow: hidden; font: inherit;
    color: var(--text-color, #333);
    transition: var(--transition, all .3s ease);
}
.vc-optie:hover:not(.onbeschikbaar) { border-color: var(--vc-rand-sterk); }
.vc-optie.actief {
    border-color: var(--vc-gekozen-rand);
    box-shadow: 0 0 0 3px var(--vc-gekozen-gloed);
    background: var(--vc-gekozen-vlak);
}
.vc-optie img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.vc-optie-titel { font-weight: 700; color: var(--vc-accent); padding: 0 12px; }
.vc-optie-oms { font-size: .85rem; color: var(--vc-grijs); padding: 0 12px; }
.vc-optie-prijs { font-weight: 700; color: var(--vc-prijs); padding: 0 12px; margin-top: auto; }
.vc-optie.onbeschikbaar { opacity: .55; cursor: not-allowed; }
.vc-aanvraag { font-weight: 600; color: #92400e; }

.vc-samenvatting {
    margin-top: 28px; padding: 16px; border: 1px solid var(--vc-rand);
    border-radius: 12px; background: var(--vc-vlak);
}
.vc-samenvatting h4 { margin: 0 0 10px; color: var(--vc-accent); }
.vc-samenvatting ul { list-style: none; margin: 0; padding: 0; }
.vc-samenvatting li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 6px 0; border-bottom: 1px solid var(--vc-rand);
}
.vc-samenvatting li:last-child { border-bottom: 0; }
.vc-samenvatting li span:last-child { font-weight: 700; color: var(--vc-accent); }

@media (max-width: 600px) {
    .vc-optierij { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .vc-bedrag strong { font-size: 1.5rem; }
    .vc-sectie-kop { grid-template-columns: auto 1fr; }
    .vc-sectie-stand { grid-column: 2; justify-self: start; text-align: left; }
    .vc-sectie-stand.gekozen { text-align: left; }
}

/* Posten met een vast bedrag die niet in de configurator te kiezen zijn, zoals
   opmaat glas of een handzender. Ingeklapt, want ze gelden niet voor iedereen. */
.vc-meerprijzen {
    margin-top: 28px; padding: 14px 18px;
    border: 1px solid var(--vc-rand); border-radius: 12px; background: var(--vc-vlak);
}
.vc-meerprijzen summary {
    cursor: pointer; font-weight: 700; color: var(--vc-accent);
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.vc-meerprijzen summary span { font-weight: 500; font-size: .85rem; color: var(--vc-grijs); }
.vc-meerprijzen ul { list-style: none; margin: 12px 0 0; padding: 0; }
.vc-meerprijzen li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 7px 0; border-bottom: 1px solid var(--vc-rand); font-size: .9rem;
}
.vc-meerprijzen li:last-child { border-bottom: 0; }
.vc-meerprijzen li span:last-child { font-weight: 700; color: var(--vc-accent); white-space: nowrap; }

/* Een optie waarvan de inkoopprijs nog niet bevestigd is. Het bedrag staat er
   gewoon bij, met erbij dat wij het in de offerte vastleggen. */
.vc-indicatie {
    display: block;
    margin-top: 2px;
    font-size: .72rem;
    font-weight: 500;
    color: #92400e;
    line-height: 1.3;
}

/* Montage zit niet in de prijs van deze lijn en is ook niet aan te vinken. */
.vc-montage-regel {
    margin: 10px 0 0;
    font-size: .82rem;
    color: var(--gray, #6c757d);
    text-align: center;
    line-height: 1.4;
}