/* Sugo Spin & Win v1.1 — customer wheel + prize cards.
   Scoped under .sugo-spin-widget so nothing leaks into the Flatsome theme.
   Brand: sugotoys.com.au (Josefin Sans + ink/red/gold/cream). */
.sugo-spin-widget{
  --ssw-ink:#141414; --ssw-red:#f04948; --ssw-red-hot:#ff253a; --ssw-red-dark:#b3101f;
  --ssw-gold:#f5c518; --ssw-cream:#f7f4ed; --ssw-cream-2:#efe9dc; --ssw-green:#7a9c59;
  font-family:"Josefin Sans", system-ui, -apple-system, sans-serif;
  color:var(--ssw-ink); max-width:560px; margin:0 auto; text-align:center;
  background:radial-gradient(120% 80% at 50% -10%, #fff8ec 0%, var(--ssw-cream) 45%, var(--ssw-cream-2) 100%);
  border-radius:22px; padding:26px 20px 34px; -webkit-font-smoothing:antialiased;
  position:relative; /* anchor for sticky child observers + image fallback bg */
}
.sugo-spin-widget *{box-sizing:border-box}

/* Desktop scale-up: the widget reads as a "focused stage" instead of a narrow phone column. */
@media (min-width:960px){
  .sugo-spin-widget{
    max-width:1120px; padding:48px 56px 56px;
    box-shadow: inset 0 0 220px rgba(20,20,20,.04);
  }
}

.sugo-spin-widget .ssw-loading{padding:60px 0;color:#8a8478;font-weight:600;letter-spacing:.04em}
.sugo-spin-widget .ssw-kicker{font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-size:13px;color:var(--ssw-red);margin:0 0 2px}
.sugo-spin-widget h2.ssw-title{font-weight:700;font-size:clamp(34px,8vw,52px);line-height:.95;margin:.1em 0 .12em;letter-spacing:-.01em}
.sugo-spin-widget h2.ssw-title .pop{color:var(--ssw-red-hot)}
.sugo-spin-widget .ssw-sub{font-size:15.5px;color:#5a554c;margin:0 auto 16px;max-width:34ch;font-weight:500}

.sugo-spin-widget .ssw-wheel-wrap{position:relative;width:320px;height:320px;max-width:86vw;margin:6px auto 4px;aspect-ratio:1/1}
@media (min-width:960px){
  .sugo-spin-widget .ssw-wheel-wrap{width:420px;height:420px;margin:14px auto 12px}
}
.sugo-spin-widget .ssw-pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:17px solid transparent;border-right:17px solid transparent;border-top:28px solid var(--ssw-ink);z-index:5;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.18))}
.sugo-spin-widget .ssw-pointer::after{content:"";position:absolute;top:-28px;left:-7px;width:13px;height:13px;border-radius:50%;background:var(--ssw-gold);border:3px solid var(--ssw-ink)}
.sugo-spin-widget .ssw-wheel{width:100%;height:100%;border-radius:50%;border:10px solid var(--ssw-ink);background:var(--ssw-ink);
  box-shadow:0 14px 0 rgba(20,20,20,.12), 0 22px 40px rgba(20,20,20,.22);
  transition:transform 5s cubic-bezier(.16,.84,.30,1)}
.sugo-spin-widget .ssw-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;
  background:#fff;border:6px solid var(--ssw-ink);z-index:4;display:grid;place-items:center;font-weight:700;color:var(--ssw-red-hot);font-size:12px;letter-spacing:.05em;box-shadow:0 4px 0 rgba(0,0,0,.15)}
@media (min-width:960px){
  .sugo-spin-widget .ssw-hub{width:88px;height:88px;font-size:14px;border-width:7px}
}

.sugo-spin-widget .ssw-panel{margin-top:24px}
.sugo-spin-widget .ssw-label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#8a8478;font-weight:600;margin-bottom:8px}
.sugo-spin-widget .ssw-pinrow{display:flex;gap:9px;justify-content:center;margin-bottom:15px}
.sugo-spin-widget .ssw-pin{width:50px;height:60px;border-radius:13px;border:3px solid var(--ssw-ink);background:#fff;text-align:center;
  font-family:inherit;font-size:28px;font-weight:700;color:var(--ssw-ink);outline:none;box-shadow:0 4px 0 rgba(20,20,20,.12)}
.sugo-spin-widget .ssw-pin:focus{border-color:var(--ssw-red)}
.sugo-spin-widget .ssw-spin{font-family:inherit;font-weight:700;font-size:22px;letter-spacing:.05em;color:#fff;background:var(--ssw-red-hot);
  border:none;border-radius:16px;padding:15px 52px;cursor:pointer;text-transform:uppercase;box-shadow:0 6px 0 var(--ssw-red-dark);transition:transform .06s,box-shadow .06s,opacity .15s}
.sugo-spin-widget .ssw-spin:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ssw-red-dark)}
.sugo-spin-widget .ssw-spin:disabled{background:#c9c2b4;box-shadow:0 6px 0 #a79f8f;cursor:not-allowed}
.sugo-spin-widget .ssw-err{margin-top:12px;color:var(--ssw-red-hot);font-weight:600;font-size:14.5px;min-height:1em}
.sugo-spin-widget .ssw-foot{margin-top:18px;font-size:12.5px;color:#9a9384;letter-spacing:.03em}
/* Prominent "Try a free demo" CTA. Lives above the wheel so customers without
   a PIN can spin without ever realising the page asks for one. Gold pill on
   ink, slight wobble every few seconds to attract attention without becoming
   the loudest thing on the page (the real Spin button stays the hero). */
.sugo-spin-widget .ssw-demo-link{
  display:inline-flex;align-items:center;gap:8px;
  margin:6px auto 14px;padding:10px 22px 11px;
  font-family:inherit;font-weight:700;font-size:15px;
  color:var(--ssw-ink);background:var(--ssw-gold);
  border:3px solid var(--ssw-ink);border-radius:999px;cursor:pointer;
  letter-spacing:.02em;line-height:1;
  box-shadow:0 5px 0 var(--ssw-ink), 0 0 24px rgba(245,197,24,.45);
  text-decoration:none;
  animation:ssw-demo-wobble 4s ease-in-out infinite;
  transform-origin:center bottom;
}
.sugo-spin-widget .ssw-demo-link:hover{
  background:#ffea7e;transform:translateY(-1px) rotate(0deg);
  box-shadow:0 6px 0 var(--ssw-ink), 0 0 30px rgba(245,197,24,.6);
  animation-play-state:paused;
}
.sugo-spin-widget .ssw-demo-link:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 var(--ssw-ink), 0 0 12px rgba(245,197,24,.45);
}
.sugo-spin-widget .ssw-demo-link:disabled{
  opacity:.55;cursor:not-allowed;animation:none;
}
.sugo-spin-widget .ssw-demo-link .ssw-demo-icon{
  font-size:17px;line-height:1;
}
@keyframes ssw-demo-wobble{
  0%, 88%, 100%{transform:rotate(0deg)}
  91%{transform:rotate(-3deg)}
  94%{transform:rotate(3deg)}
  97%{transform:rotate(-2deg)}
}
/* Demo modal variant: ink badge instead of red "Congratulations", muted prize
   chip, and an in-store CTA at the bottom. Reuses the overlay structure. */
.ssw-win.demo .ssw-crown{color:var(--ssw-ink)}
.ssw-win.demo .ssw-prize{background:var(--ssw-cream);color:var(--ssw-ink)}
.ssw-win.demo .ssw-cta{
  margin:14px 0 20px;background:var(--ssw-ink);color:#fff;
  padding:12px 16px;border-radius:12px;font-size:13.5px;font-weight:500;
  letter-spacing:.02em;line-height:1.4;
}
.ssw-win.demo .ssw-cta b{color:var(--ssw-gold)}

/* Rare-win modal variant: red kicker, "RARE WIN ·" h3 prefix, gold-shimmer
   prize chip. JS toggles .rare on the win card when the won prize is rare. */
.ssw-win.rare .ssw-crown{color:var(--ssw-red);font-size:14px}
.ssw-win.rare h3::before{content:"RARE WIN \00b7 ";color:var(--ssw-red)}
.ssw-win.rare .ssw-prize{
  background:linear-gradient(115deg, var(--ssw-gold) 0%, #ffea7e 50%, var(--ssw-gold) 100%);
  background-size:200% 100%;
  animation:ssw-goldshift 3s linear infinite;
  box-shadow:0 4px 0 rgba(0,0,0,.15), 0 0 22px rgba(245,197,24,.55);
}
@keyframes ssw-goldshift{
  0%{background-position:0% 0%}
  100%{background-position:200% 0%}
}
.sugo-spin-widget .ssw-status-note{margin:10px auto 4px;font-weight:600;color:#8a6d00;background:#fff3cd;display:inline-block;padding:6px 14px;border-radius:999px;font-size:13px}

/* -------- Friendlier empty state -------- */
/* Shown when the WMS returns WHEEL_NOT_FOUND or status != active. Visually
   "intentional pause" rather than "broken". Replaces the wheel + PIN UI. */
.sugo-spin-widget .ssw-empty{padding:36px 18px 28px;text-align:center}
.sugo-spin-widget .ssw-empty .ssw-empty-icon{
  width:84px;height:84px;border-radius:50%;background:var(--ssw-ink);color:var(--ssw-gold);
  display:grid;place-items:center;font-weight:700;font-size:30px;letter-spacing:.04em;
  margin:0 auto 14px;border:5px solid var(--ssw-ink);box-shadow:0 6px 0 rgba(20,20,20,.18);
}
.sugo-spin-widget .ssw-empty h3{font-size:24px;font-weight:700;margin:0 0 8px;color:var(--ssw-ink)}
.sugo-spin-widget .ssw-empty p{color:#5a554c;font-size:15px;max-width:36ch;margin:0 auto;font-weight:500}

/* -------- Prize cards section: Design A (compact name tile) -------- */
/* Goals (v1.2):
   - 8 per row on PC (>=1100px), graceful down to 2-3 per row on phones.
   - NO images on cards (many prizes won't have any; hiding by default keeps
     the row a consistent height and avoids tall thumbnails dominating screen).
   - Brand-coloured cap stripe rotates ink / red / gold / green by index so the
     row reads as an intentional, branded set even with no photos.
   - Two-line name clamp keeps every tile the same height regardless of name
     length. Stock + odds badges below.
   - Sold-out: 65% opacity + diagonal red "SOLD OUT" sash in the corner. */
.sugo-spin-widget .ssw-prizes{margin-top:30px}
.sugo-spin-widget .ssw-prizes-head{
  display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:14px;
}
.sugo-spin-widget .ssw-prizes-head .ssw-prizes-title{
  font-weight:700;font-size:22px;margin:0;letter-spacing:.01em;
}
.sugo-spin-widget .ssw-prizes-head .ssw-prizes-sub{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#8a8478;font-weight:600;
}
.sugo-spin-widget .ssw-prize-grid{
  list-style:none;padding:0;margin:0;
  display:grid;gap:8px;
  /* Fixed-width tracks + auto-fit + justify-content:center so a row of 3 prizes
     centers under the heading, while 10 prizes still fill the row and wrap. */
  grid-template-columns:repeat(auto-fit, 120px);
  justify-content:center;
}
@media (min-width:720px){
  .sugo-spin-widget .ssw-prize-grid{gap:10px;grid-template-columns:repeat(auto-fit, 135px);}
}
@media (min-width:1100px){
  /* On desktop, cards are 140px wide. 8 of them fit edge-to-edge in the 1120px
     stage; fewer items wrap to a centered row. */
  .sugo-spin-widget .ssw-prize-grid{gap:10px;grid-template-columns:repeat(auto-fit, 140px);}
}
.sugo-spin-widget .ssw-prize-card{
  background:#fff;border:2px solid var(--ssw-ink);border-radius:10px;
  padding:10px 10px 12px;text-align:center;
  display:flex;flex-direction:column;gap:6px;justify-content:flex-start;
  box-shadow:0 4px 0 rgba(20,20,20,.10);
  position:relative;overflow:hidden;min-height:84px;
}
.sugo-spin-widget .ssw-prize-card[data-color="0"]{border-top:6px solid var(--ssw-ink)}
.sugo-spin-widget .ssw-prize-card[data-color="1"]{border-top:6px solid var(--ssw-red)}
.sugo-spin-widget .ssw-prize-card[data-color="2"]{border-top:6px solid var(--ssw-gold)}
.sugo-spin-widget .ssw-prize-card[data-color="3"]{border-top:6px solid var(--ssw-green)}
.sugo-spin-widget .ssw-prize-name{
  font-weight:700;font-size:14px;line-height:1.15;color:var(--ssw-ink);margin:0;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.sugo-spin-widget .ssw-badges{
  display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:auto;
}
.sugo-spin-widget .ssw-badge{
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
  padding:2px 7px;border-radius:999px;
  background:#fff3cd;color:#8a6d00;border:1px solid rgba(0,0,0,.05);
}
.sugo-spin-widget .ssw-prize-card[data-stock-state="low"] .ssw-badge-stock{background:#ffe2e0;color:var(--ssw-red-dark)}
.sugo-spin-widget .ssw-prize-card[data-stock-state="out"] .ssw-badge-stock{background:#eee;color:#777}
.sugo-spin-widget .ssw-badge-odds{background:var(--ssw-ink);color:#fff;border-color:transparent}
/* -------- Rare tier (Variant B) -------- */
/* Applied when API says is_rare=true (win chance ≤ 5%). Gold double-stroke
   border + RARE ribbon + slow shimmer + ✦ prefix. */
.sugo-spin-widget .ssw-prize-card[data-rare="1"]{
  border:3px solid var(--ssw-ink);
  box-shadow:0 0 0 2px var(--ssw-gold) inset, 0 4px 0 rgba(20,20,20,.14);
  background:linear-gradient(180deg, #fffbea 0%, #fff 60%);
}
/* Lock the cap stripe to gold for rare, regardless of data-color rotation. */
.sugo-spin-widget .ssw-prize-card[data-color][data-rare="1"]{
  border-top:6px solid var(--ssw-gold);
}
.sugo-spin-widget .ssw-prize-card[data-rare="1"]::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:8px;
  background:linear-gradient(115deg,
    transparent 0%, transparent 40%,
    rgba(255,255,255,.85) 50%, transparent 60%, transparent 100%);
  background-size:220% 100%;background-position:0% 0%;
  animation:ssw-shimmer 4.2s linear infinite;mix-blend-mode:overlay;
}
@keyframes ssw-shimmer{
  0%{background-position:120% 0%}
  55%{background-position:-20% 0%}
  100%{background-position:-20% 0%}
}
/* Full-width "RARE" top strip. Replaces the gold cap-stripe on rare cards so
   the tag can never overlap centered prize names — the previous corner-tag
   approach blocked the first character of "Q posket figures" etc. Card top
   padding is increased on rare cards so content clears the strip; common
   cards keep their original 6px coloured cap-stripe. */
.sugo-spin-widget .ssw-rare-ribbon{
  position:absolute;top:0;left:0;right:0;
  background:var(--ssw-red-hot);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.22em;
  text-align:center;height:15px;line-height:15px;
  z-index:2;pointer-events:none;
}
.sugo-spin-widget .ssw-prize-card[data-rare="1"]{
  /* push the name + badges below the 15px RARE strip */
  padding-top:21px;
}
/* The RARE strip replaces the cap-stripe colour, so drop the rotating
   data-color border-top for rare cards. */
.sugo-spin-widget .ssw-prize-card[data-color][data-rare="1"]{
  border-top:3px solid var(--ssw-ink);
}
.sugo-spin-widget .ssw-prize-card[data-rare="1"] .ssw-prize-name::before{
  content:"\2726 "; color:#c79d0a;
}

.sugo-spin-widget .ssw-prize-card[data-stock-state="out"]{
  opacity:.6;background:#f3f0e9;
}
.sugo-spin-widget .ssw-prize-card[data-stock-state="out"] .ssw-prize-name{
  text-decoration:line-through;color:#5a554c;
}
/* Tiny "OUT" tag in the top-right corner — small enough not to crowd the
   2-line name, but clear enough to read as a sold-out marker. */
.sugo-spin-widget .ssw-prize-card[data-stock-state="out"]::after{
  content:"OUT";position:absolute;top:0;right:0;
  background:var(--ssw-red-hot);color:#fff;font-size:9px;font-weight:700;
  letter-spacing:.12em;padding:2px 6px;border-bottom-left-radius:6px;
  pointer-events:none;
}

/* -------- Mobile sticky PIN bar (appended to body; rules NOT scoped) -------- */
/* Toggled via .ssw-sticky.show when the inline PIN row scrolls off-screen.
   Phones only (≤720px) so desktop never gets a sticky footer. */
.ssw-sticky{
  --ssw-ink:#141414; --ssw-red:#f04948; --ssw-red-hot:#ff253a; --ssw-gold:#f5c518;
  position:fixed;left:0;right:0;bottom:0;background:var(--ssw-ink);color:#fff;
  display:none;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px env(safe-area-inset-bottom) 12px;z-index:9990;
  border-top:3px solid var(--ssw-red);
  font-family:"Josefin Sans", system-ui, sans-serif;
}
.ssw-sticky.show{display:flex}
.ssw-sticky-pinrow{display:flex;gap:5px}
.ssw-sticky-pin{
  width:36px;height:42px;border-radius:8px;border:2px solid var(--ssw-gold);
  background:#fff;color:var(--ssw-ink);text-align:center;
  font:700 20px/1 "Josefin Sans", system-ui, sans-serif;
  outline:none;box-sizing:border-box;
}
.ssw-sticky-pin:focus{border-color:#fff}
.ssw-sticky-spin{
  font-family:"Josefin Sans", system-ui, sans-serif;
  font-weight:700;font-size:14px;letter-spacing:.08em;color:#fff;
  background:var(--ssw-red-hot);border:none;border-radius:10px;padding:10px 18px;
  cursor:pointer;text-transform:uppercase;
}
.ssw-sticky-spin:disabled{background:#5a554c;cursor:not-allowed}
@media (min-width:721px){
  .ssw-sticky.show{display:none !important}
}

/* -------- Win modal (appended to body; rules NOT scoped under .sugo-spin-widget) -------- */
.ssw-overlay{
  --ssw-ink:#141414; --ssw-red:#f04948; --ssw-gold:#f5c518; --ssw-cream:#f7f4ed; --ssw-green:#7a9c59;
  font-family:"Josefin Sans", system-ui, -apple-system, sans-serif;
  position:fixed;inset:0;background:rgba(20,20,20,.55);display:none;
  align-items:center;justify-content:center;z-index:99999;backdrop-filter:blur(2px)}
.ssw-overlay.show{display:flex}
.ssw-overlay *{box-sizing:border-box}
.ssw-win{background:var(--ssw-cream);border:5px solid var(--ssw-ink);border-radius:24px;padding:34px 30px;max-width:400px;width:90%;text-align:center;position:relative;box-shadow:0 20px 0 rgba(20,20,20,.18);animation:sswpop .45s cubic-bezier(.18,.9,.3,1.2);color:var(--ssw-ink)}
@keyframes sswpop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.ssw-crown{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ssw-red);font-weight:600}
.ssw-win h3{font-size:34px;margin:6px 0 4px;font-weight:700;letter-spacing:-.01em}
.ssw-prize{font-size:27px;font-weight:700;color:var(--ssw-ink);background:var(--ssw-gold);display:inline-block;padding:8px 20px;border-radius:12px;border:3px solid var(--ssw-ink);margin:10px 0 6px;transform:rotate(-2deg);box-shadow:0 4px 0 rgba(0,0,0,.15)}
.ssw-prize-img{max-width:200px;max-height:200px;margin:14px auto 4px;display:block;border-radius:14px;border:3px solid var(--ssw-ink);box-shadow:0 4px 0 rgba(0,0,0,.12)}
.ssw-win p{color:#5a554c;font-size:14px;margin:14px 0 18px;font-weight:500}
.ssw-win .ssw-code{font-weight:700;color:var(--ssw-ink);font-size:18px;background:#fff;padding:2px 10px;border-radius:8px;border:2px solid var(--ssw-ink)}
.ssw-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ssw-close{background:var(--ssw-ink);color:#fff;border:none;border-radius:12px;font-family:inherit;font-weight:700;font-size:15px;padding:12px 28px;cursor:pointer;letter-spacing:.03em;box-shadow:0 4px 0 #000}
.ssw-close:active{transform:translateY(2px);box-shadow:0 2px 0 #000}
.ssw-respin{background:#fff;color:var(--ssw-ink);border:3px solid var(--ssw-ink);border-radius:12px;font-family:inherit;font-weight:700;font-size:14px;padding:10px 18px;cursor:pointer;box-shadow:0 4px 0 rgba(20,20,20,.12)}
.ssw-confetti{position:absolute;top:0;width:9px;height:14px;opacity:0;pointer-events:none}