/* Additions for the live app (on top of styles.css from the prototype) */
[hidden] { display: none !important; }
body { margin: 0; }
img { max-width: 100%; }
html, body { min-height: 100%; }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.login form { gap: 14px; }
.login h1 { color: var(--fg); }
.login .row2 .link { padding: 4px 0; }
.cell[readonly] { background: transparent; border-color: transparent; box-shadow: none; }

/* print only the bill that is open */
@media print {
  body * { visibility: hidden !important; }
  .printable, .printable * { visibility: visible !important; }
  .printable { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 0; }
  .veil { position: static; background: none; backdrop-filter: none; }
  .sheet { box-shadow: none; max-height: none; overflow: visible; }
  .coform table { min-width: 0; font-size: 11px; }
}

/* payment channel */
.payqr{width:132px;height:132px;flex:none;object-fit:contain;border-radius:12px;background:#fff;border:1px solid var(--sep)}
.payno{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.05rem;font-variant-numeric:tabular-nums}
.qrset{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.qrbox{width:160px;height:160px;flex:none;display:flex;align-items:center;justify-content:center;border:1.5px dashed #B9CFEA;border-radius:14px;background:#F7FAFE;color:var(--accent);cursor:pointer;text-align:center;padding:8px;overflow:hidden}
.qrbox img{max-width:100%;max-height:100%;object-fit:contain}
.qrfields{flex:1;min-width:220px;display:flex;flex-direction:column;gap:12px}
.qrfields .pf .inp{text-align:left}
@media (max-width:520px){.paybox{flex-direction:column;align-items:flex-start}}
.locbox{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--fill);border-radius:12px;padding:12px}
.locbox b{font-variant-numeric:tabular-nums}
.locinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
.locinfo .maplink{align-self:flex-start}
.locbox .spin{width:24px;height:24px;margin-right:8px}
.alist .lrow:first-child{border-top:0;padding-top:0}
.alist{display:flex;flex-direction:column;gap:10px}

/* price rows with their own QR */
.prow2{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-top:1px solid var(--sep);padding-top:14px}
.group .gh+.prow2{border-top:0;padding-top:0}
.ptxt{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.ptxt .pin{margin-top:4px}
.qrbox.sm{width:112px;height:112px;font-size:.85rem}
.qrbox.stale{border-color:#FF9500;opacity:.6}
.warnline{font-size:.8rem;color:#A85B00;background:#FFF4E0;border-radius:8px;padding:6px 8px}
.qrfields.two{flex-direction:row;flex-wrap:wrap;border-top:1px solid var(--sep);padding-top:14px}
.qrfields.two .pf{flex:1;min-width:200px}

/* plan comparison */
.plancmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plancmp .pc{border:1px solid var(--sep);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;background:var(--card)}
.plancmp .pc.best{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.plancmp .k{font-size:.8rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.plancmp .pv{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.plancmp .pv small{font-size:.8rem;color:var(--muted);font-weight:500}
.savebdg{background:#E8F7EE;color:#1E7B3C;border-radius:980px;padding:1px 8px;font-size:.72rem}
.cmpwrap{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--sep);padding-top:14px}
.cmpwrap>.k{font-size:.8rem;color:var(--muted);font-weight:500}
@media (max-width:420px){.plancmp{grid-template-columns:1fr}}

/* trial switch */
.trialrow{display:flex;align-items:center;gap:14px;border-top:1px solid var(--sep);padding-top:14px}
.switch{position:relative;width:51px;height:31px;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .sl{position:absolute;inset:0;background:#E9E9EB;border-radius:999px;transition:background .2s}
.switch .sl::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked+.sl{background:#34C759}
.switch input:checked+.sl::after{transform:translateX(20px)}
.switch input:focus-visible+.sl{outline:3px solid rgba(0,113,227,.4);outline-offset:2px}
.trialrow .pin .inp{width:80px}
.trialrow .inp:disabled{opacity:.4}
.pill.del{background:#EDEDF0;color:#8E8E93;text-decoration:line-through}
.purgelink{display:flex;align-items:center;gap:8px;border-top:1px solid var(--sep);padding-top:10px}

.plancmp.pick .pc{cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.plancmp.pick .pc:hover{border-color:#B9CFEA}
.plancmp.pick .pc.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;background:var(--accent-soft)}
.plancmp .chk{color:var(--accent);font-size:.75rem}

.bspin{display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp .8s linear infinite}
.btn.solid:disabled{opacity:.85}
@media (prefers-reduced-motion:reduce){.bspin{animation:none}}

/* sent / done states */
.donebox{display:flex;gap:12px;align-items:center;background:#E8F7EE;border-radius:14px;padding:14px}
.okmark{width:26px;height:26px;flex:none;border-radius:50%;background:#34C759;position:relative;animation:okpop .35s ease-out}
.okmark::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.sentok{display:flex;gap:10px;align-items:center;justify-content:center;background:#E8F7EE;color:#1E7B3C;border-radius:980px;padding:12px}
@keyframes okpop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.okmark{animation:none}}

/* fullscreen corner */
.fszone{position:fixed;right:0;bottom:0;width:120px;height:120px;z-index:60;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 16px 16px 0;box-sizing:border-box;pointer-events:auto}
.fsbtn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(29,29,31,.72);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s}
.fszone:hover .fsbtn,.fsbtn:focus-visible{opacity:1;transform:scale(1)}
.fsbtn:focus-visible{outline:3px solid rgba(0,113,227,.5);outline-offset:2px}
@media (hover:none){.fszone{display:none}}
@media print{.fszone{display:none}}