/* Cards, fields, validation, the custom dropdown, chips, product cards, buttons. */
/* ---- status-chips: kleur = betekenis (LAT §7) ---- */
/* ---- werkvlak ---- */
.wrap{max-width:1100px;width:100%;margin:0 auto;padding:0 24px 56px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-top:4px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:16px}
label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
label .req{color:var(--red)}
input,textarea,select{width:100%;border:1px solid var(--line2);border-radius:var(--r-sm);padding:11px 13px;font:inherit;font-size:15px;outline:none;background:var(--surface);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--light)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;cursor:pointer}
select option{background:var(--panel);color:var(--text)}
.other-inp{margin-top:10px;max-width:300px}
input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
textarea{min-height:78px;resize:vertical}
/* formulier: blokken in denkvolgorde met genummerde kicker (LAT §4) */
.sep{display:flex;align-items:center;gap:10px;font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:26px 0 14px;color:var(--blue-ink)}
.sep::after{content:"";flex:1;height:1px;background:var(--line2)}
.sep .no{width:22px;height:22px;border-radius:50%;background:var(--sig);color:#fff;display:grid;place-items:center;font-size:11px;letter-spacing:0;flex:none}
.sep:first-child{margin-top:0}
.sep small{font-weight:700;letter-spacing:0;text-transform:none;color:var(--muted);font-size:12.5px}
.ldsum{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border-radius:var(--r-sm);padding:13px 16px;margin-bottom:22px;font-size:14.5px;line-height:1.45;color:var(--text)}
.ldsum svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--blue-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ldsum b{color:var(--blue-ink)}
.fld .hint{display:none;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--err);text-transform:none;letter-spacing:0}
form.was-validated .fld:has(:invalid) .hint{display:block}
form.was-validated :is(input,select,textarea):invalid{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 20%,transparent)}
form.was-validated .fld:has(:invalid) label{color:var(--err)}
.fld .unit{position:relative}
.fld .unit input{padding-right:52px}
.fld .unit span{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--light);pointer-events:none}
/* eigen keuzelijst — de <select> blijft bron van waarheid (layout-dropdowns) */
.kies{position:relative}
.kies select{position:absolute;inset:0;opacity:0;pointer-events:none;width:100%;height:100%}
.kies-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line2);border-radius:var(--r-sm);padding:11px 13px;font:inherit;font-size:15px;background:var(--surface);color:var(--text);cursor:pointer;text-align:left;min-height:46px}
.kies-btn.ph{color:var(--light)}
.kies-btn svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.kies.open .kies-btn,.kies-btn:focus-visible{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent);outline:none}
.kies.open .kies-btn svg{transform:rotate(180deg)}
.kies-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:6px;z-index:40;max-height:280px;overflow:auto;list-style:none}
.kies.open .kies-list{display:block}
.kies-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:7px;cursor:pointer;font-size:14.5px;color:var(--text)}
.kies-list li:hover,.kies-list li.act{background:var(--surface)}
.kies-list li[aria-selected=true]{color:var(--blue-ink);font-weight:700}
.kies-list li svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;visibility:hidden;flex:none}
.kies-list li[aria-selected=true] svg{visibility:visible}
form.was-validated .kies:has(select:invalid) .kies-btn{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 20%,transparent)}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:7px;text-transform:none;letter-spacing:0;font-weight:700;font-size:13.5px;color:var(--text);background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-sm);padding:7px 13px;cursor:pointer;margin:0;transition:border-color .15s,background .15s}
.checks label:hover{border-color:var(--blue)}
.checks label:has(input:checked){background:color-mix(in srgb,var(--blue) 12%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 50%,transparent);border-color:transparent;color:var(--blue-ink)}
.checks input{width:auto;accent-color:var(--blue)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.pcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:var(--r);padding:0;overflow:hidden;cursor:pointer;background:var(--surface);transition:border-color .15s;margin:0;font-weight:400;text-transform:none;letter-spacing:0;min-width:0}
.pcard:hover{border-color:var(--blue)}
.pcard .ph{width:100%;height:128px;display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--muted)}
.pcard .qty{display:none;margin:0 14px 14px;width:84px;text-align:center;border:1px solid var(--line2);border-radius:7px;padding:7px;font-size:12.5px;color:var(--text);background:var(--panel)}
.pcard:has(input:checked) .qty{display:block}
.pcard input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;margin:0}
.pcard img{width:100%;height:128px;object-fit:contain;padding:18px;background:#fff;margin:0;display:block}
.pcard .pn{font-weight:800;font-size:14px;color:var(--text);line-height:1.2;padding:13px 14px 0}
.pcard .ps{font-size:12px;color:var(--muted);margin-top:3px;padding:0 14px 14px;letter-spacing:.02em}
.pcard:has(input:checked){border-color:transparent;box-shadow:inset 0 0 0 2px var(--blue)}
.pcard::after{content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line2);background:var(--panel);z-index:1}
.pcard:has(input:checked)::after{border-color:var(--blue);background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
button.btn{background:var(--btn);color:var(--btn-ink);border:none;border-radius:var(--r-sm);padding:13px 22px;font-weight:800;font-size:15px;font-family:inherit;cursor:pointer;transition:filter .15s}
button.btn:hover{filter:brightness(.9)}button.btn:disabled{opacity:.55}
button.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.pcard .pn{min-height:0}
.formfoot{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.formfoot .muted{flex:1;min-width:200px}
button.full{width:100%}
/* product datasheet link */
.pds{display:block;padding:0 14px 13px;margin-top:-7px;font-size:12px;font-weight:700;color:var(--blue-ink);text-decoration:none}
.pds:hover{text-decoration:underline}