/* Modulo di preordine (js/preorder.js). I pulsanti .po-btn compaiono solo quando il backend è attivo. */
.po-btn{display:none}
.po-on .po-btn{display:inline-flex}
.po-btn[hidden],.po-on .po-btn[hidden]{display:none}
.po-stock{display:none;align-self:flex-start;padding:5px 10px;border-radius:999px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.po-on .po-stock:not(:empty){display:inline-block}
.po-stock.ok{background:rgba(37,211,102,.14);color:#4be38b}
.po-stock.low{background:rgba(255,90,31,.16);color:var(--ember-2)}
.po-stock.sold_out{background:rgba(255,255,255,.08);color:var(--smoke)}

.po{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:rgba(5,6,5,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.po.open{display:flex}
.po-box{position:relative;width:min(560px,100%);max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--night-2);color:var(--chalk);border:1px solid var(--ash);border-radius:16px;padding:clamp(20px,4vw,32px);box-shadow:0 40px 80px rgba(0,0,0,.6)}
.po-x{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--chalk);font-size:22px;cursor:pointer}
.po h2{margin:0 44px 6px 0;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,5vw,42px);line-height:1;text-transform:uppercase}
.po .po-sub{margin:0 0 20px;color:var(--chalk-2);font-size:16px}
.po .po-sub b{color:#25D366}
.po fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
.po legend{padding:0;margin:0 0 10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.po-games{display:flex;flex-direction:column;gap:10px}
.po-game{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ash);border-radius:12px}
.po-game.sel{border-color:#25D366;background:rgba(37,211,102,.06)}
.po-game.off{opacity:.5}
.po-game b{display:block;font-size:17px}
.po-game small{color:var(--smoke);font-size:14px}
.po-qty{display:flex;align-items:center;gap:6px}
.po-qty button{width:44px;height:44px;border-radius:50%;border:1px solid var(--ash);background:transparent;color:var(--chalk);font-size:20px;cursor:pointer}
.po-qty button:disabled{opacity:.35;cursor:default}
.po-qty output{min-width:22px;text-align:center;font-weight:700;font-size:18px}
.po-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.po-grid label{grid-column:span 6;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--chalk-2)}
.po-grid .half{grid-column:span 3}
.po-grid .third{grid-column:span 2}
.po-grid .two3{grid-column:span 4}
/* 16px: su iPhone sotto i 16px Safari fa lo zoom quando tocchi il campo */
.po input,.po textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--ash);border-radius:10px;background:var(--night);color:var(--chalk);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.po textarea{min-height:80px;resize:vertical}
.po input:focus,.po textarea:focus{outline:2px solid #25D366;outline-offset:1px;border-color:transparent}
.po .bad input,.po .bad textarea,.po input.bad{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember)}
.po-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.po-consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px;font-size:15px;color:var(--chalk-2);cursor:pointer}
.po-consent input{flex:none;width:24px;height:24px;min-height:0;margin:2px 0 0;padding:0;border-radius:6px;-webkit-appearance:checkbox;appearance:auto;accent-color:#25D366}
.po-consent a{color:var(--chalk)}
.po-consent.bad{color:var(--ember-2)}
.po-total{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px;margin:0 0 18px;border-radius:12px;background:var(--night);font-size:15px;color:var(--chalk-2)}
.po-total strong{font-size:20px;color:var(--chalk)}
.po-total .note{grid-column:1/-1;margin-top:6px;font-size:13px;color:#4be38b}
.po-err{margin:0 0 14px;padding:12px 14px;border-radius:10px;background:rgba(255,90,31,.12);color:var(--ember-2);font-size:15px}
.po-err[hidden]{display:none}
.po-send{width:100%}
.po-alt{margin:14px 0 0;text-align:center;font-size:14px;color:var(--smoke)}
.po-alt a{color:var(--chalk)}
.po-done{text-align:center;padding:10px 0}
.po-done .code{display:inline-block;margin:14px 0;padding:10px 18px;border-radius:12px;background:var(--night);font-family:var(--font-mono);font-size:22px;letter-spacing:.08em;color:#4be38b}
.po-done p{color:var(--chalk-2)}
.po-done .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
body.po-lock{overflow:hidden}
@media (max-width:560px){
  .po{padding:0;align-items:flex-end}
  .po-box{width:100%;max-height:94vh;max-height:94svh;border-radius:18px 18px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .po-grid .half,.po-grid .two3{grid-column:span 6}
  .po-grid .third{grid-column:span 3}
}