/* aluminium-configurator.css
   Versie: 2.0.0
   Styling voor de maat- en optiekiezer van de aluminium lijn. De kleuren komen
   uit de huisstijl die in product-styles.css als custom properties staat, zodat
   deze kiezer niet zijn eigen blauw en grijs meebrengt. */

.alu-cfg {
  --alu-accent: var(--primary-color, #1C2A4B);
  --alu-accent-vlak: #eef1f7;
  --alu-prijs: var(--secondary-color, #FF8C42);
  /* Oranje voor alles wat aan staat, gelijk aan de andere configurator. */
  --alu-gekozen-rand: var(--secondary-color, #FF8C42);
  --alu-gekozen-vlak: #fff6ef;
  --alu-gekozen-gloed: rgba(255, 140, 66, .3);
  --alu-rand: var(--v4-border, #e5e7eb);
  --alu-rand-sterk: var(--border, #dee2e6);
  --alu-grijs: var(--gray, #6c757d);
  --alu-tekst: var(--text-color, #333);

  display: flex; flex-direction: column; gap: 1.1rem;
}

.alu-veld { display: flex; flex-direction: column; gap: .45rem; }

.alu-label {
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--alu-grijs);
}

.alu-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; }

.alu-knop {
  border: 1.5px solid var(--alu-rand); background: #fff; border-radius: 9px;
  padding: .55rem .85rem; font-size: .92rem; font-weight: 600; color: var(--alu-tekst);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.alu-knop:hover { border-color: var(--alu-rand-sterk); }
.alu-knop.actief {
  border-color: var(--alu-gekozen-rand); background: var(--alu-gekozen-vlak);
  box-shadow: 0 0 0 3px var(--alu-gekozen-gloed); color: var(--alu-accent);
}

.alu-meerprijs { font-weight: 500; color: var(--alu-grijs); font-size: .85em; }

.alu-maten { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.alu-select {
  width: 100%; padding: .6rem .7rem; font-size: .95rem; font-weight: 600;
  color: var(--alu-tekst); background: #fff; border: 1.5px solid var(--alu-rand); border-radius: 9px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 1.05rem;
  padding-right: 2.1rem;
}
.alu-select:focus { outline: none; border-color: var(--alu-accent); box-shadow: 0 0 0 3px rgba(28, 42, 75, .12); }

.alu-kleuren { display: flex; flex-wrap: wrap; gap: .5rem; }

.alu-kleur {
  display: flex; align-items: center; gap: .45rem; cursor: pointer;
  border: 1.5px solid var(--alu-rand); background: #fff; border-radius: 9px;
  padding: .35rem .6rem .35rem .35rem; transition: border-color .15s;
}
.alu-kleur:hover { border-color: var(--alu-rand-sterk); }
.alu-kleur.actief {
  border-color: var(--alu-gekozen-rand); background: var(--alu-gekozen-vlak);
  box-shadow: 0 0 0 3px var(--alu-gekozen-gloed);
}
.alu-kleur-vlak {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(0,0,0,.16);
  display: inline-block;
}
.alu-kleur-naam { font-size: .85rem; font-weight: 600; color: var(--alu-tekst); }

.alu-opties { display: flex; flex-direction: column; gap: .4rem; }

.alu-optie {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem;
  border: 1.5px solid var(--alu-rand); border-radius: 9px; padding: .55rem .75rem;
  cursor: pointer; transition: border-color .15s;
}
.alu-optie:hover { border-color: var(--alu-rand-sterk); }
.alu-optie.op-aanvraag { cursor: default; opacity: .72; }
.alu-optie input { width: 17px; height: 17px; accent-color: var(--alu-gekozen-rand); }
.alu-optie-naam { font-size: .92rem; color: var(--alu-tekst); }
.alu-optie-prijs { font-size: .88rem; font-weight: 700; color: var(--alu-prijs); white-space: nowrap; }
.alu-optie.op-aanvraag .alu-optie-prijs { color: var(--alu-grijs); font-weight: 600; }

.alu-melding {
  margin: 0; font-size: .88rem; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .55rem .7rem;
}

@media (max-width: 480px) {
  .alu-maten { grid-template-columns: 1fr; }
}

/* Aantal bij een optie per stuk of per meter. m2-opties volgen het oppervlak
   en hebben dit veld niet. */
.alu-optie-aantal {
  width: 3.4rem;
  padding: .25rem .35rem;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  border: 1.5px solid var(--alu-rand);
  border-radius: 7px;
  color: var(--alu-tekst);
  background: #fff;
}
.alu-optie-aantal:disabled { opacity: .45; }
.alu-optie { grid-template-columns: auto 1fr auto auto; }