/* =====================================================================
   Tema "Liquid Glass" (linguagem visual da Apple, iOS 26 / 2026)
   Camada aplicada por cima de style.css e loja.css.
   Rollback: remover o <link href="/css/glass.css"> das páginas
   (ou restaurar backups/visual-antes-liquid-glass/).
   ===================================================================== */

:root {
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(0, 0, 0, 0.06);
  --glass-blur: blur(28px) saturate(180%);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 12px 40px rgba(31, 20, 12, 0.10);
  --glass-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 20px 60px rgba(31, 20, 12, 0.16);
  --fill: rgba(118, 118, 128, 0.12);        /* preenchimento de campos (iOS "tertiarySystemFill") */
  --fill-hover: rgba(118, 118, 128, 0.18);
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --line: rgba(60, 60, 67, 0.12);
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}

/* Fundo com cor para o vidro ter o que refratar — tingido pela cor da marca */
body {
  background:
    radial-gradient(1200px 700px at -10% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at 110% 0%, rgba(255, 179, 102, 0.28), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(120, 140, 255, 0.16), transparent 60%),
    #F5F5F7;
  background-attachment: fixed;
  letter-spacing: -0.01em;
}
h1, h2, h3 { letter-spacing: -0.025em; font-weight: 700; }
h1 { font-size: 1.85rem; }

/* ---------- superfícies de vidro ---------- */
.card, .modal, .sup-panel, .store-card, .login-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}
.card { padding: 20px; }
.store-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--glass-shadow-lift); }
.store-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }

/* ---------- botões: cápsulas ---------- */
.btn {
  border-radius: 999px;
  padding: 9px 18px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .08);
  color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn:hover { border-color: var(--glass-border); background: rgba(255, 255, 255, .92); }
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, #fff), var(--brand));
  border-color: color-mix(in srgb, var(--brand) 70%, #000);
  color: var(--brand-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent);
}
.btn.primary:hover { filter: brightness(1.06); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, #fff), var(--brand)); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.ghost:hover { background: var(--fill); }
.btn.danger { color: #D70015; }
.btn.sm { padding: 5px 12px; border-radius: 999px; }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset: 2px; }

/* ---------- campos ---------- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=time],
input[type=search], select, textarea {
  background: var(--fill);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  transition: background .2s, box-shadow .2s;
}
input:hover, select:hover, textarea:hover { background: var(--fill-hover); }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, .9);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}
input:disabled { opacity: .55; }
input[type=color] { background: var(--fill); border: 0; border-radius: 12px; }
label { color: var(--ink); font-weight: 600; }

/* ---------- chips e selos ---------- */
.chip {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: 6px 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: background .2s, transform .2s var(--ease);
}
.chip:active { transform: scale(.96); }
.chip.on { background: var(--brand); border-color: transparent; color: var(--brand-ink); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent); }
.chip.static { background: var(--fill); border-color: transparent; }
.badge { background: var(--fill); color: var(--muted); padding: 3px 9px; }
.badge.ok { background: rgba(52, 199, 89, .16); color: #1E7A34; }
.badge.warn { background: rgba(255, 159, 10, .18); color: #9A5B00; }
.badge.danger { background: rgba(255, 59, 48, .14); color: #C4170C; }

/* ---------- tabelas ---------- */
th { color: var(--muted); font-size: .72rem; }
th, td { border-bottom: 1px solid var(--line); }
tbody tr { transition: background .15s; }
tbody tr:hover td { background: rgba(255, 255, 255, .35); }
.thumb { border-radius: 12px; }

/* ---------- painel/admin: barra lateral flutuante de vidro ---------- */
.app { grid-template-columns: 264px 1fr; }
.side {
  margin: 14px 0 14px 14px;
  height: calc(100vh - 28px);
  top: 14px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
}
.side .logo { color: var(--ink); }
.side nav a { color: #3A3A3C; border-radius: 12px; transition: background .2s, color .2s; }
.side nav a:hover { background: var(--fill); color: var(--ink); }
.side nav a.active {
  background: color-mix(in srgb, var(--brand) 14%, rgba(255, 255, 255, .6));
  color: color-mix(in srgb, var(--brand) 85%, #000);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}
.side .foot { color: var(--muted); }
.side .foot button { color: var(--ink); }
.main { padding: 30px 34px 70px; }
.stat .v { font-size: 1.75rem; letter-spacing: -0.03em; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  /* Celular: menu compacto numa linha com rolagem lateral, que rola junto com a página (não cobre o conteúdo) */
  .side { margin: 10px; height: auto; position: static; border-radius: 22px; display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 10px 12px; }
  .side .logo { grid-column: 1; padding: 2px 4px; font-size: 1rem; }
  .side .foot { grid-column: 2; grid-row: 1; margin: 0; padding: 0; display: flex; gap: 10px; align-items: center; }
  .side nav { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav a { white-space: nowrap; padding: 8px 12px; margin: 0; flex: none; }
}

/* ---------- modal: folha de vidro ---------- */
.modal-bg { background: rgba(20, 16, 12, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: glass-fade .25s var(--ease); }
.modal { background: var(--glass-bg-strong); border-radius: 28px; animation: glass-pop .35s var(--ease); }
.modal > header, .modal > footer { border-color: var(--line); }
/* .x: área de toque 44 px; o círculo visual fica no ::before (style.css) */
@media (max-width: 640px) { .modal { border-radius: 28px 28px 0 0; } }
@keyframes glass-fade { from { opacity: 0; } }
@keyframes glass-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------- toast: cápsula de vidro escura ---------- */
#toast div {
  background: rgba(29, 29, 31, .72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 10px 20px;
  animation: glass-pop .3s var(--ease);
}
#toast div.err { background: rgba(215, 0, 21, .8); }

/* ---------- landing e login ---------- */
.hero { background: transparent; color: var(--ink); padding: 80px 20px 90px; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.04em; }
.hero p { color: var(--muted); }
.store-card .logo { border-radius: 16px; }

/* ---------- upload ---------- */
.upload img, .upload .ph { border-radius: 16px; background: var(--fill); }

/* ---------- widget de suporte ---------- */
.sup-fab {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, #fff), var(--brand));
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 30px color-mix(in srgb, var(--brand) 40%, transparent);
}
.sup-panel { border-radius: 26px; }
.sup-msg.assistant { background: rgba(255, 255, 255, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.sup-msg { border-radius: 18px; }
.sup-ticket { border-color: var(--line); background: rgba(255, 255, 255, .4); border-radius: 14px; }

/* =====================================================================
   VITRINE (loja.css)
   ===================================================================== */
.shop { padding-bottom: 120px; }
.cover { height: 230px; border-radius: 0 0 32px 32px; }
.shop-logo { border-radius: 28px; border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.shop-info .facts { color: var(--muted); }

.sticky {
  top: 10px;
  margin: 14px 12px 0;
  padding: 10px 12px 2px;
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.search input { background: var(--fill); border-radius: 999px; }
.tabs a { border-bottom: 0; border-radius: 999px; padding: 7px 14px; margin-bottom: 8px; transition: background .2s, color .2s; }
.tabs a.on { background: var(--brand); color: var(--brand-ink); }

.hl, .pcard {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hl { border-radius: 22px; }
.pcard { border-radius: 22px; padding: 14px; }
.hl:hover, .pcard:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-lift); border-color: var(--glass-border); }
.hl img, .hl .ph { border-radius: 0; }
.pcard img, .pcard .ph { border-radius: 16px; }
.promo { color: #1E8E3E; }

.pm-img, .pm-ph { border-radius: 20px; }
.opt { border: 1px solid var(--line); background: rgba(255, 255, 255, .45); border-radius: 14px; transition: background .2s, border-color .2s; }
.opt:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 9%, rgba(255, 255, 255, .7)); }
.stepper { border: 0; background: var(--fill); padding: 4px; gap: 4px; }
.stepper button { border-radius: 50%; width: 44px; height: 44px; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.cartbar { background: none; }
.cartbar button { border-radius: 999px; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 40px color-mix(in srgb, var(--brand) 45%, transparent); }
.cart-line { border-color: var(--line); }
.totals .grand { border-color: var(--line); }

.closed-banner {
  margin: 10px 12px 0; border-radius: 16px;
  background: rgba(255, 204, 0, .22); color: #7A5200;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .6);
}

.loyal-card {
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, rgba(255, 255, 255, .7)), rgba(255, 255, 255, .55));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.loyal-box { border-radius: 18px; border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); background: color-mix(in srgb, var(--brand) 5%, rgba(255, 255, 255, .55)); }
.nudge { border-radius: 12px; background: rgba(255, 159, 10, .16); color: #7A4600; }
.loyal-status { background: var(--fill); border-radius: 16px; }
.reward { border-color: var(--line); }

/* ---------- acessibilidade e compatibilidade ---------- */
@media (prefers-reduced-transparency: reduce) {
  .card, .modal, .sup-panel, .store-card, .login-card, .side, .sticky, .hl, .pcard, .btn, .chip, #toast div, .loyal-card {
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .modal, .sup-panel, .store-card, .login-card, .side, .sticky, .hl, .pcard, .loyal-card { background: rgba(255, 255, 255, .94); }
}

/* ---------- ajustes finos ---------- */
/* Mais cor no fundo: é o que o vidro refrata */
body {
  background:
    radial-gradient(900px 620px at -5% -5%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 62%),
    radial-gradient(760px 560px at 105% 8%, rgba(255, 159, 67, 0.34), transparent 60%),
    radial-gradient(820px 640px at 85% 105%, rgba(110, 130, 255, 0.22), transparent 62%),
    radial-gradient(700px 520px at 10% 100%, rgba(255, 99, 132, 0.16), transparent 60%),
    #F2F2F7;
  background-attachment: fixed;
}
/* Reflexo especular na borda superior das superfícies */
.card, .store-card, .login-card, .side, .sticky, .hl, .pcard, .sup-panel {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, 0) 70%);
  background-color: rgba(255, 255, 255, .5);
}
/* Folhas com muito conteúdo ficam mais opacas para leitura */
.modal { background: rgba(250, 250, 252, .86); }
/* Controles nativos com a cor da marca */
input[type=checkbox], input[type=radio] { accent-color: var(--brand); width: 18px; height: 18px; }
/* Busca: espaço para a lupa */
.search input { padding-left: 40px; }
/* Carrossel de destaques: não cortar sombra/borda dos cards */
.carousel { padding: 6px 6px 18px; margin: -6px -6px 0; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }