/* ui.css - Compito 1/2/3: layout sticky, carrello, richieste speciali */
.stickywrap{box-shadow:0 2px 10px rgba(0,0,0,.35)}
.card .b .addc{margin-top:6px;background:#262935;border:1px solid #343a49;color:var(--txt);border-radius:9px;padding:7px 8px;font-size:12.5px;cursor:pointer}
.card .b .addc:active{background:#323848}
#nav button.ext{border-style:dashed;color:var(--gold);border-color:rgba(231,196,106,.5)}
#nav button.ext.actGold{background:var(--gold);color:#1a1405;font-weight:600}

/* FAB carrello */
#fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:var(--acc);color:#04120a;border:none;border-radius:14px;padding:9px 14px;font-size:14px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.45);cursor:pointer}
#fab .cmain{display:flex;align-items:center;gap:8px;white-space:nowrap}
#fab .csub{font-size:10.5px;font-weight:600;opacity:.85;white-space:nowrap;line-height:1.2}
#fab .cn{background:#04120a;color:var(--acc);border-radius:999px;min-width:22px;text-align:center;padding:1px 6px;font-size:12.5px}

/* Overlay + pannello */
#cov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;display:none}
#cov.open{display:block}
#cart{position:fixed;z-index:80;background:var(--card);color:var(--txt);display:flex;flex-direction:column;visibility:hidden;transition:transform .25s ease;right:0;top:0;bottom:0;width:min(430px,100%);transform:translateX(102%);border-left:1px solid #2c2f38}
#cart.open{visibility:visible;transform:none}
@media(max-width:640px){
 #cart{left:0;right:0;top:auto;width:auto;max-height:85dvh;height:85dvh;border-radius:16px 16px 0 0;border-left:none;border-top:1px solid #2c2f38;transform:translateY(102%);overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
}
#cart h3{margin:0;font-size:16px;display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;border-bottom:1px solid #2c2f38}
#cart .x{background:#2c3340;border:none;color:#fff;border-radius:9px;width:30px;height:30px;font-size:16px;cursor:pointer}
#clist{flex:1;overflow:auto;padding:10px 12px}
.shint{background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.3);color:#cfd3da;font-size:12px;line-height:1.45;border-radius:9px;padding:8px 10px;margin-bottom:8px}
.ci{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #262932}
.ci img{width:56px;height:56px;object-fit:contain;border-radius:9px;background:#111;flex:none}
.ci .m{flex:1;min-width:0}
.ci .nm{font-size:13px;line-height:1.3;word-break:break-word}
.ci .fl{display:flex;gap:6px;margin-top:6px}
.ci .fl input{flex:1;min-width:0;background:#22252d;border:1px solid #343a49;color:var(--txt);border-radius:8px;padding:7px 8px;font-size:13px}
.ci .fl input.bad{border-color:var(--red);background:rgba(255,90,90,.08)}
.ci .rm{background:none;border:none;color:#8b929e;font-size:18px;cursor:pointer;padding:0 2px;align-self:flex-start}
.cfoot{padding:12px 12px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #2c2f38;display:flex;flex-direction:column;gap:8px}
.cfoot .row2{display:flex;gap:8px}
.cfoot button{border-radius:11px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid #343a49;background:#262935;color:var(--txt)}
.cfoot button.pri{background:var(--acc);color:#04120a;border-color:var(--acc)}
.cfoot button.ghost{flex:1;font-weight:500;font-size:13px}
#cerr{color:var(--red);font-size:12.5px;display:none}
#toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#2c3340;color:#fff;border:1px solid #3a4152;padding:9px 14px;border-radius:999px;font-size:13px;z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
#richieste{background:var(--card2);border-top:1px solid #2c2f38;padding:18px 16px}
#richieste p{color:#cfd3da;font-size:13px;line-height:1.55;margin:6px 0 10px}
#richieste textarea{width:100%;min-height:96px;background:var(--card);border:1px solid #2c2f38;color:var(--txt);border-radius:12px;padding:11px 12px;font-size:14px;font-family:inherit}
#richieste textarea.bad{border-color:var(--red)}
.btnwa{display:block;text-align:center;background:var(--acc);color:#04120a;text-decoration:none;font-weight:700;padding:14px;border-radius:12px;border:none;width:100%;font-size:15px;cursor:pointer;margin-top:10px}
.waerr{color:var(--red);font-size:13px;display:none;margin-top:8px}
.waerr.on{display:block}
#info .num{font-size:15px;font-weight:700;color:#fff;letter-spacing:.5px}
#info .pnote{font-size:11.5px;line-height:1.45;color:var(--mut);margin:8px 0 0}