/* ============================================================================
   Wandblok en kleurknop — opmaak, gedeeld door OptiForm en OptiQuote
   ============================================================================
   Aangemaakt 07-09-2026, hoort bij wandblok.js.

   Deze opmaak leunt op een handvol kleurvariabelen uit de huisstijl. Staan ze
   niet in de pagina, dan vallen ze hieronder terug op de vaste waarde, zodat
   het blok er in beide apps hetzelfde uitziet.
   ============================================================================ */

:root {
    --wb-petrol: var(--petrol, #2A4A5E);
    --wb-koper:  var(--copper, #D47A3A);
    --wb-roest:  var(--rust, #B5541E);
    --wb-beton:  var(--concrete, #8B8B83);
    --wb-steen:  var(--stone, #B8B2A6);
}

/* ── Kleurknop (pilknop) — 07-09-2026 ───────────────────────────────
   Eén vorm voor alle kleurkeuzes in OptiForm: twee pillen naast
   elkaar, "Kleur kiezen" en "Nu niet belangrijk". De stalen komen pas
   in beeld als de klant de eerste pil opent — bij de wandpanelen
   scheelt dat achtenveertig vakjes in het formulier. */
.kleurknop-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.kleurpil {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 9px 16px;
    border: 2px solid var(--petrol);
    border-radius: 24px;
    background: transparent;
    color: var(--petrol);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kleurpil:hover { background: var(--petrol-zacht); }
.kleurpil:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.kleurpil.aan { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.kleurpil .kleurpil-staal {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid currentColor; flex: none;
}
.kleurpil .kleurpil-icoon { width: 20px; height: 20px; flex: none; }
.kleurpil .kleurpil-open { font-weight: 400; font-size: 0.78rem; opacity: 0.75; }
.kleurpil-nvt { border-color: var(--stone); color: var(--concrete); }
.kleurpil-nvt:hover { background: var(--chalk); }
.kleurpil-nvt.aan { background: var(--concrete); border-color: var(--concrete); color: #fff; }

/* Het stalenpaneel loopt over de volle breedte van het menu en is
   compacter dan de losse kleurkiezers elders: lagere vakjes, kleinere
   namen, geen kader eromheen. */
.kleurpaneel { margin-top: 10px; }
.kleurpaneel[hidden] { display: none; }
.kleurpaneel .color-selector {
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 7px;
    margin-bottom: 0;
    width: 100%;
}
.kleurpaneel .color-box { height: 32px; }
.kleurpaneel .color-name { font-size: 0.62rem; }

/* ── Wandblok — 07-09-2026 ──────────────────────────────────────────
   Eén blok voor het plaatsen van sectionaaldeuren, loopdeuren en
   raamkozijnen. De klant sleept het item over een getekende gevel; de
   items die al op diezelfde wand staan, staan er grijs bij. Zo is
   meteen te zien waar nog ruimte is. */
/* 07-09-2026 — geen tekstselectie en geen browser-sleepactie binnen het
   wandblok; die zorgden voor een stippellijn en meegesleepte tekst. */
.wandblok { margin-bottom: 12px; user-select: none; -webkit-user-select: none; }
.wandblok img, .wb-item { -webkit-user-drag: none; user-drag: none; }
.wb-kop { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:7px; }
.wb-kop .wb-naam { font-size:0.9rem; font-weight:600; color: var(--petrol); }
/* 08-09-2026 — het maatlabel in de kopregel moet een gewoon stukje tekst zijn.
   Het droeg dezelfde klasse als de maatband in de wandbalk hieronder, en die is
   position:absolute met top:0, bottom:0 en stippellijnen aan weerszijden. Omdat .wb-kop
   geen eigen positionering heeft, hing het label aan de <body> en rekte het uit over de
   hele pagina: gemeten 1234 px hoog. Dat waren de verticale stippellijnen door OptiQuote
   heen, met de tekst "5550 mm vanaf links" dwars door het menu.
   Alle geërfde eigenschappen worden hier expliciet teruggezet, zodat het ook goed blijft
   gaan als de band hieronder ooit verandert. */
.wb-kop .wb-maat { position:static; top:auto; bottom:auto; display:inline;
    border-left:0; border-right:0; place-items:normal;
    font-size:0.82rem; font-weight:600; color: var(--rust); font-variant-numeric: tabular-nums; }

.wb-zijderij { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
.wb-zkaart { display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 6px;
    border:2px solid #e0e0e0; border-radius:8px; background:#fff; cursor:pointer;
    transition:border-color .15s, background .15s; }
.wb-zkaart:hover { border-color: var(--petrol); background:#f0f7fa; }
.wb-zkaart.selected { border-color: var(--petrol); background:#e0f2f1; box-shadow:0 0 0 2px var(--petrol); }
.wb-zkaart img { width:34px; height:auto; opacity:.5; flex:none; }
.wb-zkaart.selected img { opacity:1; }
.wb-zkaart span { font-size:0.68rem; font-weight:600; color: var(--petrol); line-height:1.15; }

/* 07-09-2026 — het gevelaanzicht staat op ware schaal: de verhouding komt
   uit aspect-ratio (in de opmaak per wand meegegeven), zodat een
   millimeter horizontaal en verticaal even groot is. Daardoor verspringt
   er niets meer als een raam omhoog gaat. */
.wb-gevel { position:relative; height:auto; min-height:60px; border:1px solid #d8d4c8;
    border-bottom:0; border-radius:8px 8px 0 0; overflow:hidden; touch-action:none;
    user-select:none; -webkit-user-select:none;
    background: repeating-linear-gradient(90deg, #FBF9F5 0 11px, #E5DDD0 11px 12px); }
/* De daklijn eroverheen; het vlak boven het dak wordt dichtgeschilderd. */
.wb-dak { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; }
.wb-dak polygon { fill:#fff; }
.wb-dak polyline { fill:none; stroke:#8B8B83; stroke-width:20; vector-effect:non-scaling-stroke;
    stroke-linejoin:round; }

/* ── Plaatsingsbalk — 07-09-2026 ────────────────────────────────────
   Direct onder de gevel: donkergroen waar het item mag staan, grijs
   gearceerd waar niet, met de vaste 500 mm als getal bij elke hoek en
   naast elk bestaand item. Het blauwe kader toont de plek van nu. */
.wb-balk { position:relative; height:20px; border:1px solid #d8d4c8; border-radius:0 0 8px 8px;
    overflow:hidden; background:#E0DDD5; }
.wb-streep { position:absolute; top:0; right:0; bottom:0; left:0;
    background:repeating-linear-gradient(135deg, transparent 0 5px, #C2BCB0 5px 6px); }
.wb-zone { position:absolute; top:0; bottom:0; background:#2E7D32; }
.wb-maat { position:absolute; top:0; bottom:0; display:grid; place-items:center;
    font-size:0.55rem; font-weight:700; color:#6E6A61; font-variant-numeric:tabular-nums;
    border-left:1px dashed #C2BCB0; border-right:1px dashed #C2BCB0; }
.wb-hier { position:absolute; top:-2px; bottom:-2px; border:2px solid var(--petrol);
    border-radius:4px; pointer-events:none; z-index:2; }
.wb-legenda .g { background:#2E7D32; }
.wb-legenda .n { background:#E0DDD5; border:1px solid #C2BCB0; }
.wb-vloer { position:absolute; left:0; right:0; bottom:0; height:5px; background: var(--stone); }
.wb-item { position:absolute; border-radius:3px 3px 0 0; display:grid; place-items:center;
    font-size:0.6rem; font-weight:600; line-height:1.05; text-align:center; overflow:hidden; padding:1px; }
.wb-item.passief { background:#B3AFA6; border:1px solid #948F85; color:#fff; opacity:.85; }
.wb-item.actief { background: var(--petrol); border:2px solid #fff; color:#fff; cursor:grab; z-index:2;
    box-shadow:0 2px 7px rgba(27,42,52,.4); }
.wb-item.actief:active { cursor:grabbing; }
.wb-item.actief:focus-visible { outline:3px solid var(--copper); outline-offset:2px; }
.wb-item.actief.botst { background: var(--rust) !important; }
.wb-greep { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:16px; height:3px;
    background:#fff; border-radius:2px; opacity:.85;
    box-shadow:0 5px 0 rgba(255,255,255,.85), 0 -5px 0 rgba(255,255,255,.85); }

.wb-uiteinden { display:flex; justify-content:space-between; font-size:0.65rem; color: var(--concrete);
    font-variant-numeric:tabular-nums; margin-top:3px; }
.wb-legenda { display:flex; flex-wrap:wrap; gap:12px; margin-top:5px; font-size:0.68rem; color: var(--concrete); }
.wb-legenda i { display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:4px; vertical-align:-1px; }
.wb-legenda .a { background: var(--petrol); }
.wb-legenda .p { background:#B3AFA6; border:1px solid #948F85; }
/* 07-09-2026 — het was niet duidelijk genoeg dat je het item kunt slepen. */
.wb-sleep { display:flex; align-items:center; gap:7px; margin-top:7px; padding:7px 10px;
    background:#e0f2f1; border:1px solid #B7D9DC; border-radius:7px;
    font-size:0.78rem; color: var(--petrol); line-height:1.35; }
.wb-sleep svg { flex:none; }
.wb-sleep b { font-weight:700; }
.wb-bots { margin-top:6px; font-size:0.76rem; color: var(--rust); font-weight:600; }
.wb-bots[hidden] { display:none; }

.wb-voetrij { display:grid; gap:12px; margin-top:12px; }
@media (min-width: 640px) { .wb-voetrij { grid-template-columns:1fr 1fr; align-items:end; } }
.wb-mm { display:flex; align-items:center; }
.wb-mm button { font:inherit; font-size:1.05rem; line-height:1; width:36px; height:36px; flex:none;
    border:1px solid #ccc; background:#FBF9F5; color: var(--petrol); cursor:pointer;
    display:grid; place-items:center; }
.wb-mm button:first-child { border-radius:8px 0 0 8px; }
.wb-mm button:last-child { border-radius:0 8px 8px 0; }
.wb-mm button:hover { border-color: var(--petrol); background:#e0f2f1; }
.wb-mm input { font:inherit; font-size:0.85rem; min-width:0; flex:1; height:36px; text-align:center;
    border:1px solid #ccc; border-left:0; border-right:0; background:#fff;
    font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.wb-mm input::-webkit-outer-spin-button,
.wb-mm input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.wb-bij { font-size:0.65rem; color: var(--concrete); display:block; margin-top:3px; line-height:1.25; }

.wb-overgenomen { font-size:0.78rem; color: var(--concrete); background:#FBF9F5;
    border-left:3px solid var(--stone); padding:7px 10px; border-radius:0 6px 6px 0; }
.wb-hint { font-size:0.78rem; color: var(--concrete); background:#FAF8F4;
    border-left:3px solid var(--copper); padding:8px 10px; border-radius:0 4px 4px 0; }