/* FOTO-UPLOAD-20260930 — upload-component "Add photos". Gebruikt de tokens uit syoh.css.
   Geen opacity:0 / visibility:hidden op inhoud (ANIMATIE-VAL). */
.syoh-up{margin:0 0 18px;min-width:0}
.syoh-up-nojs{margin:0;padding:14px 16px;border-radius:14px;background:var(--cream,#F6F1E8);border:1.5px dashed var(--line-2,#D5CBBB);color:var(--ink,#1F2A33);font-size:.95rem}
.syoh-up-nojs a{color:var(--terra-ink,#A83B18);font-weight:600}
.su-drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 16px 18px;border-radius:16px;background:#FBF9F5;border:2px dashed #B9AE9C;color:var(--navy,#1B3A4B);transition:border-color .25s,background-color .25s}
.su-drop.su-over{border-color:var(--terra,#CC4A22);background:#FFF4EE}
.su-ic{display:inline-flex;color:var(--terra,#CC4A22)}
.su-drop-t{margin:0;font:600 1rem/1.35 var(--sans,system-ui);color:var(--navy,#1B3A4B)}
.su-of{margin:0;font-size:.85rem;color:var(--muted,#51606B)}
.su-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.su-btns .btn{margin:0}
.su-hint{margin:6px 0 0;max-width:44ch;font-size:.82rem;line-height:1.45;color:var(--muted,#51606B)}
.su-vol .su-drop{border-style:solid}
.su-vol .su-pick,.su-vol .su-cam{pointer-events:none;filter:grayscale(1);cursor:not-allowed}
.su-count{margin:10px 0 0;font:600 .86rem/1.3 var(--sans,system-ui);color:var(--navy,#1B3A4B)}
.su-count:empty{display:none}
.su-err{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:#FDF0EE;color:#8A1F1F;font-size:.9rem;font-weight:600;box-shadow:inset 0 0 0 1.5px currentColor}
.su-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.su-list:empty{display:none}
.su-item{position:relative;margin:0;background:#fff;border:1.5px solid var(--line,#E6DCCB);border-radius:14px;padding:6px 6px 8px;display:flex;flex-direction:column;gap:6px;min-width:0;cursor:grab}
.su-item.su-drag{outline:2px dashed var(--terra,#CC4A22);outline-offset:2px;cursor:grabbing}
.su-item.su-fout{border-color:#C9837B;background:#FDF6F5}
.su-thumb{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--sand,#EFE6D6)}
.su-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.su-num{position:absolute;left:6px;top:6px;min-width:24px;height:24px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(15,23,42,.8);color:#fff;font:600 .75rem/1 var(--sans,system-ui)}
.su-bar{height:4px;border-radius:4px;background:var(--line,#E6DCCB);overflow:hidden}
.su-bar span{display:block;height:100%;background:var(--navy,#1B3A4B);transform-origin:left center;transform:scaleX(0);transition:transform .2s linear}
.su-item[data-staat="klaar"] .su-bar span{background:#2E7D32}
.su-item[data-staat="fout"] .su-bar{display:none}
.su-st{margin:0;font-size:.78rem;line-height:1.35;color:var(--muted,#51606B);overflow-wrap:anywhere}
.su-item[data-staat="klaar"] .su-st{color:#1D5C1D;font-weight:600}
.su-item[data-staat="fout"] .su-st{color:#8A1F1F;font-weight:600}
.su-acts{display:flex;gap:4px;justify-content:space-between}
.su-b{flex:1 1 0;min-width:0;min-height:44px;border:1.5px solid var(--line-2,#D5CBBB);border-radius:10px;background:#FBF9F5;color:var(--navy,#1B3A4B);font:600 1.05rem/1 var(--sans,system-ui);cursor:pointer;padding:0}
.su-b:hover:not(:disabled){border-color:var(--navy,#1B3A4B);background:#fff}
.su-b:disabled{color:#A9A195;cursor:default}
.su-b.su-x{color:#8A1F1F}
.su-b:focus-visible,.su-drop .btn:focus-visible{outline:3px solid #CC4A22;outline-offset:3px}
.su-item[data-staat="fout"] .su-b:not(.su-x){display:none}
@media (max-width:420px){.su-list{grid-template-columns:repeat(2,minmax(0,1fr))}.su-item{padding:5px 4px 8px}.su-acts{gap:2px}} /* REVIEW-20260930: knoppen waren 43 px breed op 390 */
@media (prefers-reduced-motion:reduce){.su-drop,.su-bar span{transition:none}}