/* ==========================================================================
   Marca Local — Cupons de desconto.
   1) Presente animado no cabeçalho da Home (CSS puro, só transform/opacity)
   2) Pop-up (bottom-sheet no celular, diálogo centralizado em tela larga)
   3) Cartão do cupom (pop-up e página da empresa)
   Usa só as variáveis do tema (--primary, --accent, --surface, --line...).
   Carregado em todas as páginas (é pequeno): a navegação Ajax do tema não
   recarrega o <head>, e o pop-up precisa estar disponível em qualquer uma.
   ========================================================================== */

/* ---------- 1. Presente animado ---------- */
.ml-presente{
  --ml-pr-caixa:#d8343c; --ml-pr-caixa-2:#e84a50; --ml-pr-escuro:#b52730; --ml-pr-fita:#ffffff; --ml-pr-laco:#f6f6f6; --ml-pr-brilho:#ffd25e;
  position:relative; z-index:2; flex:none; align-self:center;
  width:66px; height:66px; margin:10px 0 0 auto; padding:0;
  border:0; border-radius:18px; background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:transform .15s ease;
}
.ml-presente::before{ /* halo suave atrás do presente */
  content:''; position:absolute; inset:6px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,163,61,.55) 0%, rgba(232,163,61,0) 68%);
  animation:ml-pr-halo 2.4s ease-in-out infinite;
}
.ml-presente:active{ transform:scale(.94); }
.ml-presente:focus-visible{ outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px var(--primary); }
.ml-presente__svg{ position:relative; display:block; width:100%; height:100%; overflow:visible; }

/* partes do SVG (também usadas no ícone do pop-up) */
.ml-pr-sombra{ fill:rgba(9,47,47,.22); transform-box:fill-box; transform-origin:center; animation:ml-pr-sombra 4.8s ease-in-out infinite; }
.ml-pr-corpo{ transform-origin:60px 108px; animation:ml-pr-pulo 4.8s ease-in-out infinite; }
.ml-pr-cor{ fill:var(--ml-pr-caixa, #d8343c); }
.ml-pr-cor2{ fill:var(--ml-pr-caixa-2, #e84a50); }
.ml-pr-escuro{ fill:var(--ml-pr-escuro, #b52730); opacity:.55; }
.ml-pr-fita{ fill:var(--ml-pr-fita, #fff); }
.ml-pr-laco{ fill:var(--ml-pr-laco, #f6f6f6); stroke:#dcdcdc; stroke-width:1.2; stroke-linejoin:round; }
.ml-pr-no{ fill:var(--ml-pr-fita, #fff); stroke:#dcdcdc; stroke-width:1.2; }
.ml-pr-tampa{ transform-box:fill-box; transform-origin:50% 100%; animation:ml-pr-tampa 4.8s ease-in-out infinite; }
.ml-pr-brilho{ fill:var(--ml-pr-brilho, #ffd25e); opacity:0; transform-box:fill-box; transform-origin:center; animation:ml-pr-brilho 4.8s ease-out infinite; }
.ml-pr-b1{ --bx:-9px; --by:-8px; }
.ml-pr-b2{ --bx:9px;  --by:-10px; animation-delay:.04s; }
.ml-pr-b3{ --bx:0px;  --by:-12px; animation-delay:.08s; }
.ml-pr-b4{ --bx:-7px; --by:-12px; animation-delay:.02s; }
.ml-pr-b5{ --bx:8px;  --by:-12px; animation-delay:.06s; }

@keyframes ml-pr-halo{ 0%,100%{ opacity:.55; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.08); } }
@keyframes ml-pr-pulo{
  0%,52%,86%,100%{ transform:translateY(0) rotate(0); }
  56%{ transform:translateY(-8px) rotate(0); }
  60%{ transform:translateY(0) rotate(-7deg); }
  64%{ transform:rotate(7deg); }
  68%{ transform:rotate(-5deg); }
  72%{ transform:rotate(4deg); }
  76%{ transform:rotate(-2deg); }
  80%{ transform:rotate(0); }
}
@keyframes ml-pr-tampa{
  0%,70%,100%{ transform:translateY(0) rotate(0); }
  78%{ transform:translateY(-11px) rotate(-7deg); }
  88%{ transform:translateY(-4px) rotate(2deg); }
  94%{ transform:translateY(0) rotate(0); }
}
@keyframes ml-pr-brilho{
  0%,74%{ opacity:0; transform:translate(0,0) scale(.2); }
  80%{ opacity:1; transform:translate(var(--bx,0),var(--by,-10px)) scale(1.15); }
  93%{ opacity:0; transform:translate(calc(var(--bx,0) * 1.6),calc(var(--by,-10px) * 1.7)) scale(.5); }
  100%{ opacity:0; }
}
@keyframes ml-pr-sombra{ 0%,52%,100%{ transform:scaleX(1); opacity:1; } 56%{ transform:scaleX(.78); opacity:.6; } 60%{ transform:scaleX(1); opacity:1; } }

/* com o pop-up aberto, o presente do cabeçalho "descansa" */
.ml-cupons-travado .ml-presente *, .ml-cupons-travado .ml-presente::before{ animation-play-state:paused; }

/* ---------- 2. Pop-up ---------- */
.ml-cupons-travado, .ml-cupons-travado body{ overflow:hidden; }
.ml-cupons-modal[hidden]{ display:none; }
.ml-cupons-modal{ position:fixed; inset:0; z-index:125; display:flex; align-items:flex-end; justify-content:center; }
.ml-cupons-modal__fundo{ position:absolute; inset:0; background:rgba(9,47,47,.55); opacity:0; transition:opacity .22s ease; }
.ml-cupons-modal__caixa{
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:480px; max-height:88vh; max-height:88dvh;
  background:var(--bg); border-radius:22px 22px 0 0; overflow:hidden;
  box-shadow:0 -12px 40px -12px rgba(0,0,0,.45);
  transform:translateY(24px); opacity:0; transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.ml-cupons-modal__caixa:focus{ outline:none; }
.ml-cupons-modal.is-aberto .ml-cupons-modal__fundo{ opacity:1; }
.ml-cupons-modal.is-aberto .ml-cupons-modal__caixa{ transform:none; opacity:1; }
@media (min-width:700px){
  .ml-cupons-modal{ align-items:center; }
  .ml-cupons-modal__caixa{ border-radius:22px; max-height:82vh; }
}

.ml-cupons-modal__topo{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:14px 14px 12px 16px; background:var(--surface); border-bottom:1px solid var(--line);
}
.ml-cupons-modal__ico{ flex:none; width:44px; height:44px; overflow:visible; }
.ml-cupons-modal__titulos{ flex:1; min-width:0; }
.ml-cupons-modal__titulos h2{ margin:0; font-size:19px; line-height:1.2; }
.ml-cupons-modal__cidade{ margin:2px 0 0; font:600 12.5px/1.3 'Manrope', sans-serif; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ml-cupons-modal__x{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; border-radius:50%; background:var(--bg); color:var(--ink); font-size:17px; cursor:pointer;
}
.ml-cupons-modal__x:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }

.ml-cupons-modal__corpo{
  --ml-cupom-fundo:var(--bg);
  flex:1; min-height:120px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:14px 14px 6px; display:flex; flex-direction:column; gap:12px;
}
.ml-cupons-modal__rodape{ flex:none; padding:10px 16px 14px; text-align:center; background:var(--bg); }
.ml-cupons-modal__rodape a{ font:700 13px/1.3 'Manrope', sans-serif; color:var(--primary); text-decoration:underline; text-underline-offset:3px; }

.ml-cupons-modal__toast{
  position:absolute; left:50%; bottom:64px; transform:translateX(-50%);
  max-width:86%; padding:9px 16px; border-radius:999px; background:var(--primary-dark); color:#fff;
  font:700 13px/1.3 'Manrope', sans-serif; text-align:center; pointer-events:none; box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
.ml-cupons-modal__toast[hidden]{ display:none; }

/* estados do pop-up */
.ml-cupons-vazio, .ml-cupons-erro{ text-align:center; padding:26px 12px 18px; }
.ml-cupons-vazio svg{ width:84px; height:84px; margin:0 auto 6px; display:block; overflow:visible; }
.ml-cupons-vazio svg *{ animation:none !important; }
.ml-cupons-vazio strong, .ml-cupons-erro strong{ display:block; font:800 16px/1.3 'Manrope', sans-serif; color:var(--ink); }
.ml-cupons-vazio p, .ml-cupons-erro p{ margin:6px 0 0; font:500 13.5px/1.5 'Manrope', sans-serif; color:var(--muted); }
.ml-cupons-modal__mais, .ml-cupons-erro button{
  align-self:center; min-height:44px; padding:10px 22px; border-radius:999px; cursor:pointer;
  border:2px solid var(--primary); background:transparent; color:var(--primary); font:800 14px/1.2 'Manrope', sans-serif;
}
.ml-cupons-erro button{ margin-top:12px; }
.ml-cupons-modal__mais:hover, .ml-cupons-erro button:hover{ background:var(--primary); color:#fff; }
.ml-cupons-modal__mais[disabled]{ opacity:.6; cursor:progress; }

/* esqueleto de carregamento */
.ml-cupom-esq{ height:118px; border-radius:14px; background:linear-gradient(100deg, #e9eeec 30%, #f6f8f7 50%, #e9eeec 70%); background-size:220% 100%; animation:ml-cupom-esq 1.2s linear infinite; }
@keyframes ml-cupom-esq{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

/* ---------- 3. Cartão do cupom ---------- */
.ml-cupons-lista{ display:flex; flex-direction:column; gap:12px; }
.ml-cupom{
  position:relative; display:flex; align-items:stretch; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 6px 16px -12px rgba(9,47,47,.5);
}
.ml-cupom__selo{
  position:relative; flex:none; width:96px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:12px 8px; color:#fff; background:linear-gradient(160deg, var(--primary) 0%, var(--primary-light) 100%);
  border-right:2px dashed rgba(255,255,255,.5);
  font:800 21px/1.1 'Manrope', sans-serif; letter-spacing:-.01em; overflow-wrap:anywhere;
}
.ml-cupom__selo--m{ font-size:16px; }
.ml-cupom__selo--l{ font-size:13px; line-height:1.2; letter-spacing:0; }
/* "picotes" do ingresso */
.ml-cupom__selo::before, .ml-cupom__selo::after{
  content:''; position:absolute; right:-9px; width:16px; height:16px; border-radius:50%;
  background:var(--ml-cupom-fundo, var(--bg)); box-shadow:inset 0 0 0 1px var(--line); z-index:1;
}
.ml-cupom__selo::before{ top:-9px; }
.ml-cupom__selo::after{ bottom:-9px; }

.ml-cupom__corpo{ flex:1; min-width:0; padding:11px 12px 12px 16px; display:flex; flex-direction:column; gap:5px; }
.ml-cupom__empresa{ margin:0; display:flex; align-items:center; gap:7px; min-width:0; font:700 12px/1.2 'Manrope', sans-serif; color:var(--muted); }
.ml-cupom__empresa img{ flex:none; width:22px; height:22px; border-radius:50%; object-fit:cover; background:var(--bg); border:1px solid var(--line); }
.ml-cupom__empresa a, .ml-cupom__empresa span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--primary); text-decoration:none; }
.ml-cupom__empresa a:hover{ text-decoration:underline; }
.ml-cupom__titulo{ margin:0; font:800 15.5px/1.25 'Manrope', sans-serif; color:var(--ink); overflow-wrap:anywhere; }
.ml-cupom__cond{ margin:0; font:500 12.5px/1.45 'Manrope', sans-serif; color:var(--muted); overflow-wrap:anywhere; }
.ml-cupom__validade{ margin:0; font:700 11.5px/1.3 'Manrope', sans-serif; color:var(--muted); }
.ml-cupom--urgente .ml-cupom__validade{ color:#b3261e; }

.ml-cupom__acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px; }
.ml-cupom__copiar{
  display:inline-flex; align-items:center; gap:10px; min-height:40px; max-width:100%; padding:4px 4px 4px 12px; cursor:pointer;
  border:2px dashed var(--accent-dark); border-radius:10px; background:#fff8ea; color:var(--primary-dark);
}
.ml-cupom__codigo{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 14px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing:.06em; }
.ml-cupom__copiar-txt{ flex:none; display:inline-flex; align-items:center; gap:5px; padding:7px 10px; border-radius:7px; background:var(--accent); color:var(--primary-dark); font:800 12px/1 'Manrope', sans-serif; }
.ml-cupom__copiar:hover .ml-cupom__copiar-txt{ background:#f0b34f; }
.ml-cupom__copiar:focus-visible, .ml-cupom__wpp:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.ml-cupom__copiar.is-copiado{ border-color:var(--primary); background:#e9f4f1; }
.ml-cupom__copiar.is-copiado .ml-cupom__copiar-txt{ background:var(--primary); color:#fff; }
.ml-cupom__sem-codigo{ display:inline-flex; align-items:center; gap:7px; font:700 12px/1.3 'Manrope', sans-serif; color:var(--primary-dark); }
.ml-cupom__wpp{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 12px; border-radius:10px;
  background:#1f9d55; color:#fff; font:800 12.5px/1.1 'Manrope', sans-serif; text-decoration:none;
}
.ml-cupom__wpp:hover{ background:#198247; color:#fff; }

/* na página da empresa */
.ml-cupons-lista--empresa{ --ml-cupom-fundo:var(--bg); }

@media (max-width:360px){
  .ml-cupom__selo{ width:80px; font-size:18px; }
  .ml-cupom__selo--m{ font-size:14px; }
  .ml-cupom__selo--l{ font-size:11.5px; }
  .ml-cupom__corpo{ padding-left:13px; }
}

/* ---------- Movimento reduzido: tudo parado, o presente fica "aberto" de leve ---------- */
@media (prefers-reduced-motion:reduce){
  .ml-presente::before, .ml-presente *, .ml-cupons-modal__ico *, .ml-cupom-esq{ animation:none !important; }
  .ml-pr-tampa{ transform:translateY(-3px) rotate(-3deg); }
  .ml-cupons-modal__fundo, .ml-cupons-modal__caixa{ transition:none; }
}