/* Efeito "vidro líquido": superfícies translúcidas com desfoque, brilho nas bordas e luz de fundo.
   Carregado por último para valer sobre os demais estilos. Sem suporte a backdrop-filter, fica o visual sólido. */
:root {
  --glass: rgba(255, 255, 255, 0.52);
  --glass-soft: rgba(255, 255, 255, 0.34);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-shade: rgba(0, 15, 42, 0.10);
  --glass-shadow: 0 10px 30px -12px rgba(0, 15, 42, 0.28), 0 2px 6px rgba(0, 15, 42, 0.06);
  --glass-hi: inset 1px 1px 0 rgba(255, 255, 255, 0.85), inset -1px -1px 0 rgba(255, 255, 255, 0.25), inset 0 0 14px rgba(255, 255, 255, 0.35);
  --gl-a: rgba(0, 15, 42, 0.90); --gl-b: rgba(18, 52, 120, 0.62); --gl-lo: rgba(120, 160, 255, 0.55); --gl-sh: rgba(0, 15, 42, 0.20);
  --orb1: rgba(224, 162, 31, 0.40);
  --orb2: rgba(196, 51, 29, 0.28);
  --orb3: rgba(62, 138, 85, 0.30);
  --orb4: rgba(60, 100, 190, 0.34);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(20, 44, 92, 0.46);
    --glass-soft: rgba(30, 58, 112, 0.32);
    --glass-edge: rgba(190, 210, 255, 0.28);
    --glass-shade: rgba(0, 0, 0, 0.3);
    --glass-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.3);
    --glass-hi: inset 1px 1px 0 rgba(200, 220, 255, 0.34), inset -1px -1px 0 rgba(200, 220, 255, 0.08), inset 0 0 16px rgba(120, 160, 255, 0.10);
    --gl-a: rgba(255, 255, 255, 0.62); --gl-b: rgba(160, 195, 255, 0.24); --gl-lo: rgba(150, 190, 255, 0.55); --gl-sh: rgba(0, 0, 0, 0.55);
    --orb1: rgba(224, 162, 31, 0.20);
    --orb2: rgba(238, 91, 68, 0.18);
    --orb3: rgba(95, 176, 120, 0.16);
    --orb4: rgba(70, 120, 255, 0.34);
  }
}
:root[data-theme="dark"] {
  --glass: rgba(20, 44, 92, 0.46);
  --glass-soft: rgba(30, 58, 112, 0.32);
  --glass-edge: rgba(190, 210, 255, 0.28);
  --glass-shade: rgba(0, 0, 0, 0.3);
  --glass-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.3);
  --glass-hi: inset 1px 1px 0 rgba(200, 220, 255, 0.34), inset -1px -1px 0 rgba(200, 220, 255, 0.08), inset 0 0 16px rgba(120, 160, 255, 0.10);
    --gl-a: rgba(255, 255, 255, 0.62); --gl-b: rgba(160, 195, 255, 0.24); --gl-lo: rgba(150, 190, 255, 0.55); --gl-sh: rgba(0, 0, 0, 0.55);
  --orb1: rgba(224, 162, 31, 0.20);
  --orb2: rgba(238, 91, 68, 0.18);
  --orb3: rgba(95, 176, 120, 0.16);
  --orb4: rgba(70, 120, 255, 0.34);
}

/* luz de fundo que o vidro desfoca e refrata */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vmax 42vmax at 8% 6%, var(--orb1), transparent 62%),
    radial-gradient(38vmax 38vmax at 96% 22%, var(--orb4), transparent 62%),
    radial-gradient(40vmax 40vmax at 14% 78%, var(--orb3), transparent 62%),
    radial-gradient(34vmax 34vmax at 88% 92%, var(--orb2), transparent 62%);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* vidro com desfoque: superfícies grandes e poucas */
  .card, aside.panel > .card, .order, .modal-card, .bottombar, .acct-btn, .sx-btn, .login, .toast:not(.err),
  .tab, .search, .tabs.main, .copybox {
    -webkit-backdrop-filter: blur(18px) saturate(1.7);
    backdrop-filter: blur(18px) saturate(1.7);
  }
  .card, .order, .modal-card, .login {
    background: var(--glass); border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-hi), var(--glass-shadow);
  }
  .modal { background: rgba(0, 15, 42, 0.30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .modal-card { background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); }
  .bottombar { background: var(--glass); border-top: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-edge), 0 -10px 28px -16px var(--glass-shade); }
  .acct-btn, .tab, .search { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), 0 4px 14px -8px var(--glass-shade); }
  .tab[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .sx-btn { background: var(--glass-soft); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi); opacity: .55; }
  .toast:not(.err) { background: var(--glass); color: var(--fg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); }
  .copybox { background: var(--glass-soft); border: 1px solid var(--glass-edge); }
}

/* cartões de sabor e tamanho: vidro sem desfoque (são dezenas, o desfoque pesaria no celular) */
.size, .flavor, .bchip {
  background: linear-gradient(155deg, var(--glass), var(--glass-soft));
  border: 1px solid var(--glass-edge); border-width: 1px;
  box-shadow: var(--glass-hi), 0 8px 20px -14px var(--glass-shade);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.size:hover, .bchip:hover, .flavor:hover:not(:disabled) { transform: translateY(-1px); }
.size[aria-pressed="true"], .bchip[aria-pressed="true"] {
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 22%, transparent), var(--glass));
  border-color: var(--accent); box-shadow: var(--glass-hi), 0 0 0 1px var(--accent), 0 10px 24px -12px var(--glass-shade);
}
.flavor[aria-pressed="true"] {
  background: linear-gradient(155deg, color-mix(in srgb, var(--green) 28%, transparent), var(--glass));
  border-color: var(--green); box-shadow: var(--glass-hi), 0 0 0 1px var(--green), 0 10px 24px -12px var(--glass-shade);
}
.flavor:disabled { opacity: .55; }

/* campos de texto: vidro leve */
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  background: var(--glass-soft); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 3px var(--glass-shade);
}
.btn:not(.ghost):not(.danger) { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.28), inset -1px -1px 0 rgba(0, 0, 0, 0.18), 0 8px 18px -10px var(--glass-shade); }
.btn.ghost { background: var(--glass-soft); border-color: var(--glass-edge); box-shadow: var(--glass-hi); }
header.top { background: transparent; }

@media (prefers-reduced-motion: reduce) { .size, .flavor { transition: none; } .size:hover, .flavor:hover { transform: none; } }

/* logo em vidro: letras recortadas (sem fundo) que desfocam e refratam o que está atrás */
.logo .gl { display: block; position: relative; width: min(calc(100vw - 40px), 400px); aspect-ratio: 760 / 206; margin: 0 auto; }
.gl i { position: absolute; inset: 0; display: block; -webkit-mask: url("logo-mask.png") center / 100% 100% no-repeat; mask: url("logo-mask.png") center / 100% 100% no-repeat; }
.gl-sh { background: var(--gl-sh); filter: blur(5px); transform: translateY(3px); }
.gl-body {
  background: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.40), transparent 55%), linear-gradient(165deg, var(--gl-a), var(--gl-b));
  -webkit-backdrop-filter: blur(5px) saturate(1.8); backdrop-filter: blur(5px) saturate(1.8);
}
.gl i.gl-hi { -webkit-mask-image: url("logo-hi.png"); mask-image: url("logo-hi.png"); background: #fff; opacity: 0.95; }
.gl i.gl-lo { -webkit-mask-image: url("logo-lo.png"); mask-image: url("logo-lo.png"); background: var(--gl-lo); }

/* mouse: realce ao passar o cursor */
@media (hover: hover) {
  .btn:not(:disabled):hover { filter: brightness(1.12); }
  .btn.ghost:not(:disabled):hover, .tab:not([aria-pressed="true"]):hover, .acct-btn:hover { background: var(--glass-edge); }
  .order:hover, .card:hover { box-shadow: var(--glass-hi), 0 14px 34px -14px var(--glass-shade); }
  .flavor:hover:not(:disabled), .size:hover, .bchip:hover { box-shadow: var(--glass-hi), 0 12px 26px -12px var(--glass-shade); }
}