/* ============================================================
   KIT BRINDE — Widget de gamificação (progresso até R$100)
   Onze Story · paleta preto/dourado/branco · glassmorphism
   Sem dependências. Performance-first. Mobile-first.
   ============================================================ */
:root{
  --ozk-gold:#F5C400;
  --ozk-gold-2:#FFD879;
  --ozk-gold-deep:#C9A100;
  --ozk-ink:#0A0E1A;
  --ozk-glass:rgba(12,17,30,.78);
  --ozk-stroke:rgba(255,255,255,.12);
  --ozk-text:#F4F7FF;
  --ozk-muted:rgba(244,247,255,.62);
  --ozk-radius:20px;
  --ozk-shadow:0 18px 50px -12px rgba(0,0,0,.65),0 6px 18px -8px rgba(0,0,0,.5);
}

/* ---------- container fixo ---------- */
.ozk{
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:9500;
  width:340px;max-width:calc(100vw - 32px);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ozk-text);
  -webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(24px) scale(.96);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform,opacity;
}
.ozk.is-visible{opacity:1;transform:translateY(0) scale(1)}
.ozk.is-hidden{display:none}

/* card de vidro */
.ozk-card{
  position:relative;
  background:var(--ozk-glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--ozk-stroke);
  border-radius:var(--ozk-radius);
  box-shadow:var(--ozk-shadow);
  padding:16px 16px 18px;
  overflow:hidden;
  animation:ozkFloat 6s ease-in-out infinite;
}
/* halo dourado sutil no topo do card */
.ozk-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 80% -10%,rgba(245,196,0,.16),transparent 60%);
}
@keyframes ozkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------- topo: imagem + texto ---------- */
.ozk-head{display:flex;gap:13px;align-items:center;position:relative;z-index:1}
.ozk-img{
  flex:0 0 auto;width:68px;height:68px;border-radius:15px;
  background:linear-gradient(180deg,#ffffff,#eef1f7);
  border:1px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px -6px rgba(245,196,0,.55),0 2px 8px rgba(0,0,0,.35);
  position:relative;
}
/* glow pulsante atrás da imagem */
.ozk-img::after{
  content:"";position:absolute;inset:-30%;border-radius:50%;
  background:radial-gradient(circle,rgba(245,196,0,.5),transparent 65%);
  opacity:.55;filter:blur(8px);z-index:0;animation:ozkGlow 3.2s ease-in-out infinite;
}
@keyframes ozkGlow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.7;transform:scale(1.05)}}
.ozk-img-el{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  padding:4px;box-sizing:border-box;border-radius:13px;animation:ozkBob 4.5s ease-in-out infinite}
.ozk-img-fallback{position:relative;z-index:1}
@keyframes ozkBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}

.ozk-copy{min-width:0;flex:1}
.ozk-kicker{font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ozk-gold);margin-bottom:3px;display:flex;align-items:center;gap:5px}
.ozk-kicker svg{width:11px;height:11px;display:block}
.ozk-title{font-size:14.5px;font-weight:800;line-height:1.18;letter-spacing:-.01em;margin:0}
.ozk-sub{font-size:11.5px;color:var(--ozk-muted);margin-top:4px;line-height:1.3}
.ozk-amount{color:var(--ozk-gold);font-weight:800}

/* ---------- barra de progresso ---------- */
.ozk-bar{position:relative;margin-top:14px;z-index:1}
.ozk-track{position:relative;height:10px;border-radius:99px;
  background:rgba(255,255,255,.08);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.ozk-fill{position:absolute;inset:0 auto 0 0;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--ozk-gold-deep),var(--ozk-gold) 55%,var(--ozk-gold-2));
  box-shadow:0 0 12px rgba(245,196,0,.6);
  transition:width 1s cubic-bezier(.22,.61,.36,1)}
/* brilho que percorre a barra (estilo Stripe) */
.ozk-fill::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-120%);animation:ozkSheen 2.4s ease-in-out infinite}
@keyframes ozkSheen{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}}

.ozk-scale{display:flex;justify-content:space-between;margin-top:7px;
  font-size:9.5px;font-weight:700;color:var(--ozk-muted);letter-spacing:.02em}

/* ---------- cadeado na ponta da barra ---------- */
.ozk-lock{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,#222a3d,#10141f);
  border:1.5px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;z-index:2;
  transition:left 1s cubic-bezier(.22,.61,.36,1),
             background .5s ease,border-color .5s ease,box-shadow .5s ease;
  animation:ozkLockPulse 1.9s ease-in-out infinite}
.ozk-lock svg{width:13px;height:13px;display:block;stroke:#fff;fill:none}
.ozk-lock .ozk-shackle{transition:transform .5s cubic-bezier(.34,1.56,.64,1);transform-origin:12px 11px}
@keyframes ozkLockPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,196,0,0)}
  50%{box-shadow:0 0 0 6px rgba(245,196,0,.12),0 0 14px rgba(245,196,0,.35)}}

/* estado desbloqueado */
.ozk.is-unlocked .ozk-lock{
  background:linear-gradient(180deg,var(--ozk-gold-2),var(--ozk-gold));
  border-color:#fff6d6;animation:none;
  box-shadow:0 0 0 4px rgba(245,196,0,.25),0 0 22px rgba(245,196,0,.8)}
.ozk.is-unlocked .ozk-lock svg{stroke:#1a1300}
.ozk.is-unlocked .ozk-shackle{transform:translateY(-3px) rotate(14deg)}
.ozk.is-unlocked .ozk-fill{background:linear-gradient(90deg,var(--ozk-gold),var(--ozk-gold-2));
  box-shadow:0 0 18px rgba(245,196,0,.85)}
.ozk.is-unlocked .ozk-card{border-color:rgba(245,196,0,.45)}

/* ---------- botão fechar ---------- */
.ozk-x{position:absolute;top:9px;right:9px;width:24px;height:24px;border:none;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.07);color:var(--ozk-muted);z-index:3;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.ozk-x:hover{background:rgba(255,255,255,.15);color:#fff}
.ozk-x svg{width:12px;height:12px;display:block}

/* ---------- confete (só no unlock) ---------- */
.ozk-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:var(--ozk-radius);z-index:4}
.ozk-cf{position:absolute;top:42%;width:8px;height:8px;border-radius:1.5px;opacity:0;
  animation:ozkConfetti var(--d,1.1s) cubic-bezier(.2,.6,.3,1) forwards}
@keyframes ozkConfetti{
  0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
  100%{opacity:0;transform:translate(var(--x,0),var(--y,-90px)) rotate(var(--r,360deg)) scale(.4)}}

/* ============================================================
   MOBILE — modo compacto (chip) que expande ao tocar
   ============================================================ */
@media (max-width:600px){
  /* barra compacta — mesmo gabarito do card de oferta (#fo-card) */
  .ozk{
    left:1rem;right:1rem;width:auto;max-width:none;
    bottom:calc(1rem + env(safe-area-inset-bottom,0px)); /* JS empilha acima do copo */
  }
  .ozk-chip{display:none!important}

  .ozk-card{
    padding:.62rem .8rem;border-radius:14px;animation:none;
    display:flex;align-items:center;
  }
  .ozk-head{margin:0;gap:.65rem;flex:1;min-width:0;align-items:center}
  .ozk-img{width:50px;height:50px;border-radius:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px -4px rgba(245,196,0,.55)}
  /* zoom forte só no mobile: foca o pacote da frente (taça + "26") preenchendo o tile */
  .ozk-img-el{padding:0;animation:none;object-fit:cover;transform:scale(2.3);transform-origin:56% 50%}
  .ozk-kicker{font-size:8px;margin-bottom:1px}
  .ozk-title{font-size:12px;line-height:1.16;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ozk-sub{font-size:10.5px;margin-top:2px;line-height:1.2}
  .ozk-sub br{display:none}

  /* progresso vira uma linha fina na base da barra */
  .ozk-bar{position:absolute;left:0;right:0;bottom:0;margin:0;z-index:2}
  .ozk-track{height:3px;border-radius:0 0 14px 14px;box-shadow:none;background:rgba(255,255,255,.12)}
  .ozk-fill{border-radius:0 0 0 14px}
  .ozk-scale{display:none}
  .ozk-lock{display:none}

  /* botão fechar discreto, no canto */
  .ozk-x{display:flex;top:6px;right:6px;width:18px;height:18px}
  .ozk-x svg{width:9px;height:9px}
}
/* chip (oculto no desktop) */
.ozk-chip{display:none;align-items:center;gap:9px;padding:9px 15px 9px 10px}
.ozk-chip-lock{flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(180deg,#222a3d,#10141f);border:1.5px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;animation:ozkLockPulse 1.9s ease-in-out infinite}
.ozk-chip-lock svg{width:14px;height:14px;stroke:#fff;fill:none}
.ozk.is-unlocked .ozk-chip-lock{background:linear-gradient(180deg,var(--ozk-gold-2),var(--ozk-gold));
  border-color:#fff6d6;animation:none;box-shadow:0 0 16px rgba(245,196,0,.7)}
.ozk.is-unlocked .ozk-chip-lock svg{stroke:#1a1300}
.ozk-chip-txt{font-size:12px;font-weight:800;white-space:nowrap}
.ozk-chip-txt b{color:var(--ozk-gold)}
.ozk-chip-ring{flex:0 0 auto;width:34px;height:34px}

/* ============================================================
   Acessibilidade — reduz animações
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ozk,.ozk-card,.ozk-img::after,.ozk-img-el,.ozk-fill::after,.ozk-lock,.ozk-chip-lock{
    animation:none!important}
  .ozk-fill,.ozk-lock{transition:width .4s ease,left .4s ease!important}
}