/*
 * KIKO MELT — the first-box offer, and the scratch card.
 *
 * Two mechanics doing opposite jobs, deliberately placed at opposite ends of
 * the order.
 *
 * The offer is acquisition. It arrives before anything has been bought, so it
 * has to earn its interruption: a real deadline, a real discount, and the box
 * built inside the modal rather than a coupon code to remember.
 *
 * The scratch card is retention. It lands after the money is taken, so it
 * costs nothing in conversion and gives a reason to come back. Nothing that
 * pays out is ever shown before payment — that would be a bribe to buy, and
 * it would make the reward feel bought rather than won.
 */

/* ============================================================= the offer == */

.ov {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(30, 12, 7, .55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .28s var(--ease);
}
.ov.on { opacity: 1; pointer-events: auto; }

.offer {
  position: relative; width: min(620px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--paper); border-radius: var(--r-l); padding: clamp(24px, 3.4vw, 40px);
  box-shadow: var(--shadow-l);
  transform: translateY(22px) scale(.97);
  transition: transform .34s var(--ease);
}
.ov.on .offer { transform: none; }

.offer__x {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px;
  border-radius: 999px; display: grid; place-items: center;
  background: rgba(67,37,27,.07); transition: background .2s;
}
.offer__x:hover { background: rgba(67,37,27,.14); }

.offer__tag {
  display: inline-block; background: var(--yellow); color: var(--ink);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.offer h2 { font-size: clamp(30px, 4vw, 44px); }
.offer h2 s { color: var(--muted); text-decoration-thickness: 3px; font-size: .62em; margin-left: 10px; }
.offer .ar { display: block; font-family: "Readex Pro", sans-serif; font-weight: 400; font-size: 16px; color: var(--muted); margin-top: 8px; }

/* the clock counts to the actual end of today, not a per-visitor timer that
   resets — a countdown that lies is the one thing that would make this a dark
   pattern rather than an offer */
.clock { display: flex; gap: 10px; margin: 22px 0 6px; }
.clock div {
  background: var(--cream); border-radius: var(--r-s); padding: 10px 0; flex: 1; text-align: center;
}
.clock b { display: block; font-family: "Fredoka", sans-serif; font-size: 28px; line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.clock span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.clock + .until { margin: 0 0 22px; font-size: 12.5px; color: var(--muted); }

/* the same six-slot idea as the builder, compressed to fit a modal */
.offer .slots6 { grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 18px; }
.offer .slots6 i { border-radius: 11px; }

.opicks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 22px; }
.opick { position: relative; border-radius: var(--r-s); overflow: hidden; aspect-ratio: 1; background: var(--cream); }
.opick img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.opick:hover img { transform: scale(1.07); }
.opick[disabled] { opacity: .45; cursor: not-allowed; }
.opick b {
  position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 999px;
  background: var(--red); color: var(--paper); display: grid; place-items: center;
  font-family: "Fredoka", sans-serif; font-size: 12px;
  opacity: 0; transform: scale(.5); transition: opacity .2s, transform .24s var(--ease);
}
.opick.has b { opacity: 1; transform: none; }

.offer__foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.offer__foot .btn { flex: 1; min-width: 220px; }
.offer__foot .btn[disabled] { opacity: .45; pointer-events: none; }
.offer__no { font-size: 13.5px; color: var(--muted); text-decoration: underline; }
.offer__no:hover { color: var(--red); }
.offer__small { margin: 16px 0 0; font-size: 11.5px; color: var(--muted); }

@media (max-width: 560px) {
  .opicks { grid-template-columns: repeat(3, 1fr); }
  .offer .slots6 { grid-template-columns: repeat(3, 1fr); }
}

/* ======================================================= the scratch card == */

.scratch { margin: 26px 0 0; }
.scratch__frame {
  position: relative; width: min(420px, 100%); margin-inline: auto;
  border-radius: var(--r-m); overflow: hidden; background: var(--red); color: var(--cream);
  box-shadow: var(--shadow-m);
}
.scratch__prize {
  padding: 30px 24px; text-align: center; display: grid; gap: 6px; place-items: center;
}
.scratch__prize .lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .72; }
.scratch__prize b { font-family: "Fredoka", sans-serif; font-size: clamp(22px, 3.6vw, 30px); line-height: 1.12; }
.scratch__prize span { font-size: 13.5px; opacity: .85; }

/* the cream panel you rub off — a canvas, because erasing pixels is the only
   way this reads as scratching rather than as a button */
.scratch__foil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: grab; touch-action: none;
}
.scratch__foil:active { cursor: grabbing; }
/* NOT `.done` - that class is the confirmation overlay in checkout.css */
.scratch__frame.revealed .scratch__foil { animation: foilOff .5s var(--ease) both; pointer-events: none; }
@keyframes foilOff { to { opacity: 0; transform: scale(1.04); } }

.scratch__hint {
  margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center;
  transition: opacity .3s;
}
.scratch__frame.revealed + .scratch__hint { opacity: 0; }
.scratch__claim { margin-top: 14px; text-align: center; }
.scratch__claim .code {
  display: inline-block; background: var(--cream); color: var(--ink);
  padding: 9px 18px; border-radius: 999px; font-family: "Fredoka", sans-serif;
  font-size: 15px; letter-spacing: .1em;
}