/* Cakes a Laser - estilos do lado do cliente (catálogo de produtos).
   Inspirado no layout OlaClick original, com UX elevada. */

/* NÃO usar overflow-x:hidden em html/body - quebra position:sticky.
   O layout já cabe em 390px; se algo transbordar, clipar no elemento específico. */
body.cliente {
  background: var(--cal-creme);
  color: var(--cal-azul);
}

/* ── Navbar ─────────────────────────────────────────────── */
.cal-navbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.cal-logo { height: 44px; width: auto; border-radius: 10px; }
.cal-navbar .cal-nome { color: var(--cal-azul); letter-spacing: -.01em; }

/* Badge de status "Aberto/Fechado" com bolinha (como no original) */
.cal-status {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .85rem;
  padding: .35rem .7rem; border-radius: 999px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .08);
}
.cal-status .dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(46, 158, 91, .18);
}
.cal-status.aberto  { color: var(--cal-sucesso); }
.cal-status.aberto .dot  { background: var(--cal-sucesso); }
.cal-status.fechado { color: var(--cal-cinza); }
.cal-status.fechado .dot { background: var(--cal-cinza); box-shadow: 0 0 0 3px rgba(107,114,128,.15); }

.btn-pedir { font-weight: 700; box-shadow: 0 6px 16px rgba(242, 107, 33, .35); }

/* ── Hero com a capa da marca ───────────────────────────── */
.cal-hero {
  position: relative;
  /* Pinceladas laranja → creme → azul (identidade da logo) */
  background:
    linear-gradient(180deg, rgba(251,247,240,0) 55%, var(--cal-creme) 100%),
    linear-gradient(160deg, var(--cal-laranja) 0%, var(--cal-laranja-escuro) 30%, #fff 52%, var(--cal-azul-claro) 100%);
  min-height: 120px;
}
@media (min-width: 768px) { .cal-hero { min-height: 200px; } }

/* Cartão de apresentação que "monta" sobre o hero */
.cal-apresentacao {
  margin-top: -56px; position: relative; z-index: 2;
}
.cal-card {
  background: #fff; border: 1px solid rgba(0,0,0,.05);
  border-radius: 20px; box-shadow: 0 12px 40px rgba(30, 74, 90, .10);
}
.cal-logo-grande {
  width: 72px; height: 72px; border-radius: 16px; object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,.15); background: #fff;
}
.cal-saudacao { font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cal-descricao { color: var(--cal-cinza); max-width: 46ch; font-size: .95rem; }

/* Chips de tipo de serviço */
.cal-servicos { display: flex; flex-wrap: wrap; gap: .5rem; }
.cal-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .9rem; color: var(--cal-azul);
  background: rgba(242, 107, 33, .10); border: 1px solid rgba(242, 107, 33, .25);
  padding: .35rem .75rem; border-radius: 999px;
}
.cal-chip i { color: var(--cal-laranja); font-size: 1rem; }

/* Botões grandes de ação (coluna, como no original) */
.cal-acoes { display: grid; gap: .6rem; }
.cal-acao {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; font-weight: 700; font-size: 1rem;
  padding: .8rem 1.25rem; border-radius: 14px;
  border: 2px solid transparent; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cal-acao i { font-size: 1.15rem; }
.cal-acao:hover { transform: translateY(-2px); }
.cal-acao-primary {
  background: var(--cal-laranja); color: #fff;
  box-shadow: 0 8px 20px rgba(242, 107, 33, .30);
}
.cal-acao-primary:hover { background: var(--cal-laranja-escuro); color:#fff; }
.cal-acao-outline {
  background: #fff; color: var(--cal-azul); border-color: rgba(30,74,90,.15);
}
.cal-acao-outline:hover { border-color: var(--cal-azul); color: var(--cal-azul); }

/* Footer */
.cal-footer { color: var(--cal-cinza); }
.cal-footer a { color: var(--cal-azul); font-weight: 600; }

/* ── Meus pedidos ────────────────────────────────────────── */
.meus-item { color: var(--cal-azul); transition: box-shadow .12s, transform .12s; }
.meus-item:hover { box-shadow: 0 8px 22px rgba(30,74,90,.12); transform: translateY(-1px); color: var(--cal-azul); }
.meus-status-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* ── Página de informações ──────────────────────────────── */
.cal-servico-item { padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.cal-servico-item:last-child { border-bottom: none; }
.cal-servico-ico { color: var(--cal-azul-claro); font-size: 1.15rem; width: 1.4rem; text-align: center; }
.cal-servico-nota {
  margin-top: .5rem; font-size: .88rem; color: var(--cal-cinza);
  background: rgba(0,0,0,.03); border-radius: 10px; padding: .55rem .75rem;
}
.cal-info-item {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .65rem 0; border-bottom: 1px dashed rgba(0,0,0,.08);
}
.cal-info-item.hoje { background: rgba(242,107,33,.06); border-radius: 10px; padding: .65rem .75rem; border-bottom: none; }
.cal-info-item .dia { font-weight: 600; }
.cal-pill {
  display: inline-block; font-size: .8rem; font-weight: 600;
  padding: .15rem .55rem; border-radius: 999px;
  background: rgba(61,169,224,.15); color: var(--cal-azul);
}

/* ── Faixa de frete grátis (topbar estilo e-commerce) ── */
.cal-topbar-frete {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex-wrap: wrap;
  padding: .55rem 1rem;
  background: linear-gradient(90deg, var(--cal-laranja) 0%, var(--cal-laranja-escuro) 100%);
  color: #fff; font-size: .9rem; text-align: center;
}
.cal-topbar-frete-ico { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.cal-topbar-frete-txt strong { font-weight: 800; }
.cal-topbar-frete-sub { font-weight: 500; opacity: .92; }
.cal-topbar-frete-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  color: #fff; text-decoration: none; font-weight: 800; white-space: nowrap;
  padding: .18rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.18); transition: background .14s;
}
.cal-topbar-frete-cta:hover { background: rgba(255,255,255,.32); color: #fff; }
.cal-topbar-frete-cta i { font-size: .8rem; }
@media (max-width: 575.98px) {
  .cal-topbar-frete { font-size: .82rem; padding: .5rem .75rem; }
  .cal-topbar-frete-sub { display: none; } /* mobile: mantém só o essencial */
}