/* ── Premium Minimal — Design System ───────────────────────────────── */
:root {
  --bg:        #F7F5F1;
  --bg2:       #EDEAE4;
  --surface:   #FFFFFF;
  --border:    #E3DDD6;
  --text:      #141010;
  --text2:     #877870;
  --accent:    #B81818;
  --accent-l:  #FAF2F2;
  --ink:       #141010;
  --ink-l:     #2C2624;
  --price:     #7A6500;
  --green:     #1A6428;
  --green-d:   #14501E;
  --green-l:   #EDF5EE;
  --shadow:    0 1px 4px rgba(20,16,16,.07), 0 4px 16px rgba(20,16,16,.06);
  --shadow-sm: 0 1px 3px rgba(20,16,16,.08);
  --r:  8px;
  --rs: 5px;
  --t:  .16s ease;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0F0C0C;--bg2:#1A1414;--surface:#201818;--border:#2E2424;
  --text:#F0EAE4;--text2:#88706A;--accent-l:#2A1010;--green-l:#0D1E0F;
  --shadow:0 1px 4px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.3);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);--price:#C0A010;
}}
:root[data-theme="light"]{--bg:#F7F5F1;--bg2:#EDEAE4;--surface:#FFFFFF;--border:#E3DDD6;--text:#141010;--text2:#877870;--accent-l:#FAF2F2;--green-l:#EDF5EE;--shadow:0 1px 4px rgba(20,16,16,.07),0 4px 16px rgba(20,16,16,.06);--shadow-sm:0 1px 3px rgba(20,16,16,.08);--price:#7A6500;}
:root[data-theme="dark"]{--bg:#0F0C0C;--bg2:#1A1414;--surface:#201818;--border:#2E2424;--text:#F0EAE4;--text2:#88706A;--accent-l:#2A1010;--green-l:#0D1E0F;--shadow:0 1px 4px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.3);--shadow-sm:0 1px 3px rgba(0,0,0,.4);--price:#C0A010;}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:15px;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--bg);color:var(--text);min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;line-height:1.5;
}
.app{width:100%;max-width:460px;min-height:100dvh;display:flex;flex-direction:column;}

/* ── Screens ── */
.screen{display:none;flex-direction:column;flex:1;animation:up .2s ease both;}
.screen.active{display:flex;}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.screen{animation:none;}}
.scroll-area{flex:1;overflow-y:auto;}

/* ── Register page ── */
.reg-page{
  display:flex;flex-direction:column;justify-content:center;
  min-height:100dvh;padding:40px 28px 48px;gap:0;
}
.reg-logo-area{
  display:flex;justify-content:center;margin-bottom:28px;
  cursor:pointer;
}
.reg-logo-img{
  width:88px;height:88px;object-fit:cover;border-radius:50%;
  box-shadow:var(--shadow);
}
.reg-heading{text-align:center;margin-bottom:28px;}
.reg-heading h1{
  font-size:28px;font-weight:900;letter-spacing:-1px;line-height:1.1;
  text-wrap:balance;
}
.reg-heading p{font-size:14px;color:var(--text2);margin-top:6px;}
.reg-fields{display:flex;flex-direction:column;gap:12px;}
.reg-note{
  font-size:12px;color:var(--text2);text-align:center;
  margin-top:20px;line-height:1.5;
}

/* ── Topbar ── */
.topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 16px;height:56px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:20;
}
.topbar-logo{
  width:32px;height:32px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
}
.topbar-name{
  font-size:15px;font-weight:800;letter-spacing:-.3px;flex:1;
}
.topbar-sub{font-size:13px;color:var(--text2);}
.btn-back{
  background:none;border:none;cursor:pointer;
  color:var(--text2);font-size:20px;padding:0;line-height:1;
  flex-shrink:0;display:flex;align-items:center;
  transition:color var(--t);
}
.btn-back:hover{color:var(--text);}

/* ── Section label ── */
.sec-label{
  padding:20px 18px 10px;
  display:flex;align-items:center;justify-content:space-between;
}
.sec-label h2{
  font-size:12px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:1px;
}
.sec-label .tally{
  font-size:12px;font-weight:700;color:var(--accent);
}
.sec-rule{height:1px;background:var(--border);margin:0 18px 2px;}

/* ── Flavor list ── */
.flavor-list{display:flex;flex-direction:column;padding:0 16px 8px;gap:8px;}
.fi{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 14px 14px 12px;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
  position:relative;user-select:none;
}
.fi:hover{border-color:var(--text2);box-shadow:var(--shadow-sm);}
.fi.on{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),var(--shadow-sm);
}
.fi-emoji{
  width:40px;height:40px;border-radius:var(--rs);
  background:var(--bg2);display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  transition:background var(--t);
}
.fi.on .fi-emoji{background:var(--accent-l);}
.fi-info{flex:1;min-width:0;}
.fi-name{font-size:14px;font-weight:700;letter-spacing:-.1px;}
.fi-desc{font-size:12px;color:var(--text2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fi-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.fi-price{
  font-size:14px;font-weight:700;color:var(--price);
  font-variant-numeric:tabular-nums;
}
.fi-check{
  width:20px;height:20px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5);
  transition:opacity var(--t),transform var(--t);
}
.fi.on .fi-check{opacity:1;transform:scale(1);}
.fi-check svg{width:10px;height:10px;stroke:#fff;stroke-width:2.5;fill:none;}
.fi-qty{
  display:flex;align-items:center;gap:8px;
  max-height:0;overflow:hidden;opacity:0;margin-top:0;
  transition:max-height .25s ease,opacity .2s ease,margin-top .2s ease;
}
.fi.on .fi-qty{max-height:40px;opacity:1;margin-top:8px;}
.qty-btn{
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg2);
  color:var(--text);font-size:15px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
}
.qty-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.qty-num{font-size:14px;font-weight:800;min-width:18px;text-align:center;font-variant-numeric:tabular-nums;}

/* ── Extras ── */
.extras-sec{padding:4px 16px 12px;}
.extras-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;}
.xchip{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:100px;
  border:1px solid var(--border);background:var(--surface);
  font-size:13px;font-weight:600;cursor:pointer;
  transition:all var(--t);color:var(--text);
}
.xchip:hover{border-color:var(--text2);}
.xchip.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.xchip-price{font-size:11px;opacity:.65;}
.xchip.on .xchip-price{opacity:.75;}

/* ── Obs field ── */
.obs-wrap{padding:8px 16px 72px;}

/* ── Forms ── */
.field{display:flex;flex-direction:column;gap:5px;}
.field label{
  font-size:11px;font-weight:700;color:var(--text2);
  letter-spacing:.8px;text-transform:uppercase;
}
.field input,.field textarea,.field select{
  padding:11px 13px;border-radius:var(--rs);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-size:15px;font-family:inherit;outline:none;
  transition:border-color var(--t),box-shadow var(--t);
}
.field input:focus,.field textarea:focus{
  border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,16,16,.1);
}
.field textarea{resize:vertical;min-height:72px;}
.field-hint{font-size:11px;color:var(--text2);margin-top:2px;}
.err{font-size:13px;color:var(--accent);font-weight:700;display:none;}
.err.show{display:block;}
.ok{font-size:13px;color:var(--green);font-weight:700;display:none;}
.ok.show{display:block;}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:var(--r);border:none;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background var(--t),transform var(--t),opacity var(--t);
  letter-spacing:.05px;text-decoration:none;
}
.btn:active{transform:scale(.97);}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ink:hover{background:var(--ink-l);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:#9E1414;}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{background:var(--green-d);}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border);}
.btn-outline:hover{background:var(--bg2);}
.btn-ghost{background:none;border:none;color:var(--text2);font-size:13px;font-weight:600;padding:8px 0;}
.btn-whatsapp{background:#25D366;color:#fff;}
.btn-whatsapp:hover{background:#1DAA56;}
.btn-danger{background:#B81818;color:#fff;}
.btn-full{width:100%;}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:var(--rs);}
.btn-icon{padding:8px;border-radius:var(--rs);}

/* ── Cart bar ── */
.cart-bar{
  position:sticky;bottom:0;
  background:var(--ink);
  padding:12px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 -1px 0 rgba(255,255,255,.06),0 -8px 24px rgba(20,16,16,.25);
  z-index:20;
}
.cart-bar-info{flex:1;}
.cart-bar-count{font-size:11px;color:rgba(255,255,255,.55);font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.cart-bar-total{font-size:20px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.cart-bar .cbtn{
  flex-shrink:0;background:#fff;color:var(--ink);
  font-size:13px;font-weight:800;padding:11px 18px;
  border-radius:var(--rs);border:none;cursor:pointer;
  transition:opacity var(--t),transform var(--t);letter-spacing:.05px;font-family:inherit;
}
.cart-bar .cbtn:hover{opacity:.9;}
.cart-bar .cbtn:active{transform:scale(.97);}

/* ── Review ── */
.rev-list{padding:0 16px;display:flex;flex-direction:column;gap:1px;}
.rev-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--border);
}
.rev-item:last-child{border-bottom:none;}
.rev-emoji{font-size:20px;flex-shrink:0;width:28px;text-align:center;}
.rev-info{flex:1;min-width:0;}
.rev-name{font-size:14px;font-weight:700;}
.rev-qty{font-size:12px;color:var(--text2);margin-top:1px;}
.rev-sub{font-size:14px;font-weight:700;color:var(--price);flex-shrink:0;font-variant-numeric:tabular-nums;}
.rev-obs{
  margin:12px 16px 0;padding:12px 14px;
  background:var(--bg2);border-radius:var(--rs);
  font-size:13px;color:var(--text2);
}
.total-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 16px;border-top:1px solid var(--border);margin-top:8px;
}
.total-label{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;}
.total-val{font-size:26px;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-1px;}
.cust-chip{
  margin:12px 16px 0;padding:12px 14px;
  display:flex;align-items:center;gap:10px;
  background:var(--bg2);border-radius:var(--rs);
}
.cust-chip-name{font-size:13px;font-weight:700;}
.cust-chip-phone{font-size:12px;color:var(--text2);}
.confirm-actions{padding:12px 16px 28px;display:flex;flex-direction:column;gap:8px;}

/* ── PIX ── */
.pix-amount-hero{
  padding:28px 20px 24px;text-align:center;
  border-bottom:1px solid var(--border);
}
.pix-order-label{
  font-size:11px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;
}
.pix-amount-val{
  font-size:42px;font-weight:900;letter-spacing:-2px;
  font-variant-numeric:tabular-nums;line-height:1;
}
.pix-body{padding:16px;display:flex;flex-direction:column;gap:10px;}
.pix-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;
}
.pix-card-head{
  padding:10px 14px;border-bottom:1px solid var(--border);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);
}
.pix-card-body{padding:12px 14px;}
.pix-key{font-size:16px;font-weight:800;letter-spacing:.3px;}
.pix-key-name{font-size:12px;color:var(--text2);margin-top:2px;}
.pix-code-wrap{
  background:var(--bg2);border-radius:var(--rs);padding:10px 12px;
  font-size:10px;font-family:monospace;color:var(--text2);
  word-break:break-all;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.pix-steps-list{display:flex;flex-direction:column;gap:10px;}
.pix-step{display:flex;gap:10px;align-items:flex-start;}
.pix-step-n{
  width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:#fff;
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}
.pix-step-t{font-size:13px;color:var(--text2);line-height:1.4;}
.pix-step-t b{color:var(--text);font-weight:700;}
.pix-footer{padding:8px 16px 28px;display:flex;flex-direction:column;gap:8px;}
.btn-copy-pix{background:var(--ink);color:#fff;}
.btn-copy-pix:hover{background:var(--ink-l);}
.btn-copy-pix.copied{background:var(--green);}

/* ── Success ── */
.success-wrap{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:48px 32px;text-align:center;gap:14px;
}
.success-icon{
  width:72px;height:72px;border-radius:50%;
  background:var(--green-l);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;margin-bottom:4px;
}
.success-title{font-size:24px;font-weight:900;letter-spacing:-.8px;}
.success-sub{font-size:14px;color:var(--text2);max-width:260px;text-wrap:balance;line-height:1.5;}
.order-tag{
  font-size:12px;font-weight:700;color:var(--text2);
  padding:8px 16px;border:1px solid var(--border);border-radius:100px;
  letter-spacing:.3px;
}
.order-tag span{color:var(--accent);}
.success-actions{display:flex;flex-direction:column;gap:8px;width:100%;max-width:300px;margin-top:4px;}

/* ── Admin stats ── */
.admin-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;padding:14px 14px 4px;
}
.stat-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rs);padding:12px;
}
.stat-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);}
.stat-val{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;margin-top:4px;}
.stat-val.r{color:var(--accent);}
.stat-val.g{color:var(--green);}
.stat-val.p{color:var(--price);font-size:16px;}

/* ── Admin tabs ── */
.admin-tabs{
  display:flex;border-bottom:1px solid var(--border);
  padding:0 14px;overflow-x:auto;scrollbar-width:none;
}
.admin-tabs::-webkit-scrollbar{display:none;}
.atab{
  flex-shrink:0;padding:11px 14px;font-size:13px;font-weight:700;
  border:none;background:none;cursor:pointer;color:var(--text2);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t),border-color var(--t);font-family:inherit;
}
.atab.active{color:var(--text);border-bottom-color:var(--ink);}

/* ── Admin list ── */
.admin-list{padding:10px 14px;display:flex;flex-direction:column;gap:1px;}
.admin-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.admin-item:last-child{border-bottom:none;}
.admin-item-info{flex:1;min-width:0;}
.admin-item-name{
  font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:6px;
}
.admin-item-price{font-size:13px;font-weight:700;color:var(--price);margin-top:1px;}
.admin-item-desc{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-item-actions{display:flex;gap:6px;flex-shrink:0;}
.unavail-badge{
  font-size:10px;font-weight:700;background:var(--accent-l);color:var(--accent);
  padding:2px 7px;border-radius:100px;
}

/* ── Admin orders ── */
.orders-list{padding:8px 14px 24px;display:flex;flex-direction:column;gap:10px;}
.order-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;
}
.oc-head{padding:13px 14px 8px;display:flex;align-items:flex-start;gap:8px;}
.oc-meta{flex:1;}
.oc-num{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;}
.oc-customer{font-size:16px;font-weight:900;letter-spacing:-.3px;margin-top:1px;}
.oc-phone{font-size:12px;color:var(--text2);}
.oc-time{font-size:11px;color:var(--text2);white-space:nowrap;}
.oc-items{padding:0 14px 8px;display:flex;flex-wrap:wrap;gap:5px;}
.oc-chip{
  background:var(--bg2);border-radius:100px;
  padding:3px 9px;font-size:12px;font-weight:600;color:var(--text2);
}
.oc-obs{padding:0 14px 8px;font-size:12px;color:var(--text2);}
.oc-foot{
  border-top:1px solid var(--border);padding:10px 14px;
  display:flex;align-items:center;gap:8px;
}
.oc-total{font-size:16px;font-weight:900;color:var(--text);flex:1;font-variant-numeric:tabular-nums;}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:100px;font-size:11px;font-weight:700;white-space:nowrap;}
.badge-p{background:#FEF3E2;color:#9A5E08;}
.badge-d{background:var(--green-l);color:var(--green);}
.badge-c{background:var(--accent-l);color:var(--accent);}

/* ── Filter chips ── */
.filter-row{display:flex;gap:6px;padding:10px 14px 4px;overflow-x:auto;scrollbar-width:none;}
.filter-row::-webkit-scrollbar{display:none;}
.fchip{
  flex-shrink:0;padding:6px 13px;border-radius:100px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;
  transition:all var(--t);font-family:inherit;
}
.fchip.on{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ── Settings ── */
.settings-wrap{padding:14px 14px;display:flex;flex-direction:column;gap:12px;}

/* ── Inline form (admin add/edit) ── */
.inline-form{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:14px;
  display:flex;flex-direction:column;gap:10px;
  margin:4px 14px 0;
}
.inline-form h3{font-size:13px;font-weight:800;letter-spacing:-.1px;}

/* ── Toggle ── */
.toggle{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
.toggle input{position:absolute;opacity:0;width:0;height:0;}
.toggle-track{
  width:36px;height:20px;background:var(--border);border-radius:100px;
  position:relative;flex-shrink:0;transition:background var(--t);
}
.toggle input:checked~.toggle-track{background:var(--green);}
.toggle-thumb{
  position:absolute;top:3px;left:3px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;transition:left var(--t);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle input:checked~.toggle-track .toggle-thumb{left:19px;}

/* ── Admin login ── */
.login-wrap{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 24px;
}
.login-icon{font-size:36px;margin-bottom:16px;}
.login-title{font-size:20px;font-weight:900;letter-spacing:-.4px;text-align:center;}
.login-sub{font-size:13px;color:var(--text2);text-align:center;margin-top:4px;margin-bottom:24px;}
.login-fields{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px;}

/* ── Empty state ── */
.empty-state{text-align:center;padding:48px 24px;color:var(--text2);display:flex;flex-direction:column;align-items:center;gap:8px;}
.empty-icon{font-size:36px;margin-bottom:4px;opacity:.5;}

/* ── Theme button ── */
.theme-btn{
  position:fixed;bottom:16px;right:14px;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  font-size:16px;cursor:pointer;z-index:100;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);transition:all var(--t);
}
.theme-btn:hover{background:var(--bg2);}

/* ── Form section ── */
.form-sec{padding:12px 16px;display:flex;flex-direction:column;gap:12px;}

/* ══════════════════════════════════════════════
   ANIMAÇÕES PREMIUM — v2 (sem opacity:0 em propriedades, só em keyframes)
   ══════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes up        {from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)}}
@keyframes down      {from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideLeft {from{opacity:0;transform:translateX(48px)} to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleUp   {from{opacity:0;transform:scale(.88)}       to{opacity:1;transform:scale(1)}}
@keyframes fadeIn    {from{opacity:0}                            to{opacity:1}}
@keyframes pop       {0%{transform:scale(.5)}60%{transform:scale(1.15)}80%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes popBig    {0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.18)}75%{transform:scale(.93)}100%{transform:scale(1)}}
@keyframes float     {0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ring      {0%{transform:scale(1);opacity:.6}100%{transform:scale(2.2);opacity:0}}
@keyframes cartSlide {from{opacity:0;transform:translateY(100%)} to{opacity:1;transform:translateY(0)}}
@keyframes bounce    {0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}70%{transform:translateY(-2px)}}
@keyframes confetti  {0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(80px) rotate(720deg);opacity:0}}
@keyframes ripple    {0%{transform:scale(0);opacity:.35}100%{transform:scale(4);opacity:0}}
@keyframes countUp   {from{opacity:0;transform:translateY(5px)}  to{opacity:1;transform:translateY(0)}}
@keyframes shake     {0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes fi-in     {from{opacity:0;transform:translateY(11px)} to{opacity:1;transform:translateY(0)}}

/* ── Transições de tela (controladas por JS via anim-*) ── */
.screen { animation: none; }
.screen.anim-up    { animation: up         .38s cubic-bezier(.22,.68,0,1.15) both; }
.screen.anim-down  { animation: down       .32s cubic-bezier(.22,.68,0,1.15) both; }
.screen.anim-left  { animation: slideLeft  .38s cubic-bezier(.22,.68,0,1.15) both; }
.screen.anim-right { animation: slideRight .38s cubic-bezier(.22,.68,0,1.15) both; }

/* ── Topbar desliza ao entrar ── */
.topbar { animation: down .28s ease both; }

/* ── Logo flutua na tela de cadastro ── */
.reg-logo-img {
  animation: float 3.6s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .2s ease;
}
.reg-logo-img:hover  { transform: scale(1.06) translateY(-3px); box-shadow: 0 12px 32px rgba(20,16,16,.18); }
.reg-logo-img:active { transform: scale(.95); }
.topbar-logo { transition: transform .2s ease; }
.topbar-logo:hover   { transform: rotate(-5deg) scale(1.08); }

/* ── Cards de sabor ── */
.fi {
  animation: fi-in .3s ease both;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease,
              transform .18s cubic-bezier(.22,.68,0,1.3);
}
/* Delay escalonado (até 12 itens) */
.fi:nth-child(1)  { animation-delay:.06s } .fi:nth-child(2)  { animation-delay:.10s }
.fi:nth-child(3)  { animation-delay:.14s } .fi:nth-child(4)  { animation-delay:.18s }
.fi:nth-child(5)  { animation-delay:.22s } .fi:nth-child(6)  { animation-delay:.26s }
.fi:nth-child(7)  { animation-delay:.30s } .fi:nth-child(8)  { animation-delay:.34s }
.fi:nth-child(9)  { animation-delay:.38s } .fi:nth-child(10) { animation-delay:.42s }
.fi:nth-child(11) { animation-delay:.46s } .fi:nth-child(12) { animation-delay:.50s }
.fi:hover  { transform: translateY(-1px); }
.fi:active { transform: scale(.985); }
/* Selecionado: garante visível mesmo se animação não disparou */
.fi.on { opacity: 1; animation: none; transform: none; }

/* Emoji quica ao selecionar */
.fi.on .fi-emoji { animation: bounce .4s cubic-bezier(.22,.68,0,1.3); }

/* Check animado */
.fi-check {
  opacity: 0; transform: scale(.4);
  transition: opacity .2s ease, transform .25s cubic-bezier(.22,.68,0,1.5);
}
.fi.on .fi-check { opacity: 1; transform: scale(1); }
.fi-check svg polyline {
  stroke-dasharray: 20; stroke-dashoffset: 20;
  transition: stroke-dashoffset .22s .1s ease;
}
.fi.on .fi-check svg polyline { stroke-dashoffset: 0; }

/* .fi-qty já definido no bloco base com max-height */
.qty-btn { transition: background .15s ease, color .15s ease, transform .12s ease; }
.qty-btn:active { transform: scale(.85); }

/* ── Extras chips ── */
.xchip { transition: all .18s ease; }
.xchip:hover  { transform: translateY(-1px); }
.xchip:active { transform: scale(.93); }

/* ── Barra do carrinho ── */
#cart-bar { animation: cartSlide .3s cubic-bezier(.22,.68,0,1.2) both; }
.cart-bar-total { display: inline-block; transition: all .2s ease; }
.cart-bar-total.bump { animation: countUp .2s ease both; }

/* ── Tela de revisão — animadas via JS ao gerar conteúdo ── */
.rev-item-anim { animation: slideLeft .25s ease both; }
.rev-item-anim:nth-child(1) { animation-delay:.04s }
.rev-item-anim:nth-child(2) { animation-delay:.09s }
.rev-item-anim:nth-child(3) { animation-delay:.13s }
.rev-item-anim:nth-child(4) { animation-delay:.17s }
.rev-item-anim:nth-child(5) { animation-delay:.21s }
.rev-item-anim:nth-child(6) { animation-delay:.25s }

/* ── PIX ── */
.pix-amount-val  { animation: scaleUp .38s .1s ease both; }
.pix-card        { animation: up .28s ease both; }
.pix-card:nth-child(1) { animation-delay:.08s }
.pix-card:nth-child(2) { animation-delay:.16s }
.pix-card:nth-child(3) { animation-delay:.24s }
.btn-copy-pix { transition: background .25s ease, transform .15s ease; }
.btn-copy-pix.copied { animation: pop .3s cubic-bezier(.22,.68,0,1.4); }

/* ── Sucesso ── */
.success-icon   { animation: popBig .5s cubic-bezier(.22,.68,0,1.2) both; position: relative; }
.success-title  { animation: up .35s .16s ease both; }
.success-sub    { animation: up .35s .24s ease both; }
.order-tag      { animation: fadeIn .4s .32s ease both; }
.success-actions{ animation: up .35s .40s ease both; }
.success-icon::after {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid var(--green);
  animation: ring 1.2s ease-out .5s both;
  pointer-events:none;
}

/* Confetes */
.confetti-piece {
  position:absolute; width:7px; height:7px; border-radius:2px;
  animation: confetti .9s ease-in both; pointer-events:none;
}

/* ── Admin ── */
.stat-box  { animation: scaleUp .28s ease both; transition: transform .18s ease; }
.stat-box:nth-child(1){ animation-delay:.04s }
.stat-box:nth-child(2){ animation-delay:.10s }
.stat-box:nth-child(3){ animation-delay:.16s }
.stat-box:hover { transform: translateY(-2px); }

.order-card {
  animation: up .25s ease both;
  transition: transform .18s ease, box-shadow .18s ease;
}
.order-card:nth-child(1){ animation-delay:.03s } .order-card:nth-child(2){ animation-delay:.07s }
.order-card:nth-child(3){ animation-delay:.11s } .order-card:nth-child(4){ animation-delay:.15s }
.order-card:nth-child(5){ animation-delay:.19s } .order-card:nth-child(6){ animation-delay:.23s }
.order-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.inline-form { animation: scaleUp .22s cubic-bezier(.22,.68,0,1.2) both; }

/* ── Botões ── */
.btn, .cart-bar .cbtn { position: relative; overflow: hidden; }
.ripple-wave {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.28); transform:scale(0);
  animation: ripple .55s linear; pointer-events:none;
  width:80px; height:80px; margin-left:-40px; margin-top:-40px;
}
.btn-outline .ripple-wave { background: rgba(20,16,16,.08); }
.theme-btn { transition: all .2s ease; }
.theme-btn:hover  { transform: rotate(20deg) scale(1.1); }
.theme-btn:active { transform: scale(.88); }

/* ── Inputs ── */
.field input, .field textarea {
  transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.field input:focus, .field textarea:focus { transform: translateY(-1px); }

/* ── Brilho deslizante no botão principal ── */
@keyframes shine {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}
.btn-ink::before, .cart-bar .cbtn::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.btn-ink:hover::before, .cart-bar .cbtn:hover::before {
  animation: shine .7s ease;
}
.cart-bar .cbtn::before {
  background: linear-gradient(105deg, transparent, rgba(20,16,16,.10), transparent);
}

/* ── Pulso sutil no botão do carrinho ── */
@keyframes cbtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}
.cart-bar .cbtn { animation: cbtnPulse 2.2s ease-in-out infinite; }

/* ── Título da tela de cadastro: entrada letra a letra (leve) ── */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   filter: blur(0); }
}
.reg-heading h1 { animation: heroIn .55s .12s cubic-bezier(.22,.68,0,1.1) both; }
.reg-heading p  { animation: up .45s .3s ease both; }
.reg-fields .field:nth-child(1) { animation: up .4s .38s ease both; }
.reg-fields .field:nth-child(2) { animation: up .4s .46s ease both; }
.reg-fields .btn                { animation: up .4s .54s ease both; }
.reg-note                       { animation: fadeIn .5s .68s ease both; }

/* ── Logo entra com pop na primeira carga ── */
.reg-logo-area { animation: popBig .6s cubic-bezier(.22,.68,0,1.2) both; }

/* ── Extras: entrada escalonada dos chips ── */
.xchip { animation: scaleUp .3s ease both; }
.xchip:nth-child(1) { animation-delay:.05s } .xchip:nth-child(2) { animation-delay:.09s }
.xchip:nth-child(3) { animation-delay:.13s } .xchip:nth-child(4) { animation-delay:.17s }
.xchip:nth-child(5) { animation-delay:.21s } .xchip:nth-child(6) { animation-delay:.25s }
.xchip:nth-child(7) { animation-delay:.29s } .xchip:nth-child(8) { animation-delay:.33s }

/* ── Total da revisão: zoom de destaque ── */
@keyframes totalIn {
  0%   { opacity: 0; transform: scale(.7); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}
.total-val { animation: totalIn .5s .3s cubic-bezier(.22,.68,0,1.2) both; display:inline-block; }

/* ── Valor do PIX pulsa levemente para chamar atenção ── */
@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
.pix-amount-val { animation: scaleUp .38s .1s ease both, gentlePulse 2.8s 1.2s ease-in-out infinite; }

/* ── Sem movimento (acessibilidade) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}