/* =========================================================================
   FitaFlow - Roleta - PAGINA PUBLICA (standalone) - REDESIGN PREMIUM (v14)
   Carregado somente na pagina /roleta/{slug}. Todo o bloco e escopado em
   .roleta-standalone / .storefront-roleta, portanto NAO afeta o modal da home.
   ========================================================================= */
.roleta-standalone{
  --rlt-cyan:#28d6ff; --rlt-pink:#ff4fb7; --rlt-violet:#7b6bff; --rlt-gold:#ffd36e;
}

/* imersao total: remove o padding padrao do main da store */
.storefront-roleta .storefront__main{ padding:0; }

/* ---- fundo imersivo (aplicado na propria secao: full-bleed e sem rolagem) */
.roleta-standalone{ position:relative; z-index:1; }
.storefront-roleta .roleta-page{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:calc(100dvh - 66px);
  display:flex; align-items:center;
  padding:clamp(22px,4vw,56px) 0 clamp(40px,6vw,84px);
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(40,214,255,.16), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(255,79,183,.14), transparent 55%),
    radial-gradient(80% 80% at 0% 106%, rgba(40,214,255,.10), transparent 60%),
    linear-gradient(180deg,#060e1b 0%,#071120 58%,#050b16 100%);
}
.storefront-roleta .roleta-page::before{
  content:""; position:absolute; inset:-12% -6%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 12% 6%, rgba(30,200,255,.5), transparent 60%),
    radial-gradient(34vmax 34vmax at 92% 2%, rgba(255,79,183,.42), transparent 60%),
    radial-gradient(34vmax 34vmax at 60% 110%, rgba(106,92,255,.4), transparent 60%);
  filter:blur(72px); opacity:.55; animation:rltDrift 20s ease-in-out infinite;
}
.storefront-roleta .roleta-page::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.12;
  background-image:
    linear-gradient(rgba(140,190,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,190,255,.12) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 38%,#000,transparent 82%);
  mask-image:radial-gradient(72% 62% at 50% 38%,#000,transparent 82%);
}
@keyframes rltDrift{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(1.5vmax,2vmax,0) scale(1.05)} }

/* ---- SHELL (card em vidro premium) -------------------------------------- */
.roleta-standalone .roleta-shell{
  max-width:1120px; margin:0 auto;
  padding:clamp(24px,3.2vw,48px);
  border-radius:32px;
  background:
    radial-gradient(140% 120% at 14% 0%, rgba(40,214,255,.12), transparent 44%),
    radial-gradient(120% 120% at 100% 6%, rgba(255,79,183,.14), transparent 46%),
    linear-gradient(158deg, rgba(16,29,48,.85), rgba(11,20,35,.92));
  border:1px solid rgba(150,200,255,.14);
  box-shadow:0 44px 120px rgba(2,10,22,.6), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  overflow:hidden;
}
.roleta-standalone .roleta-shell::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background:conic-gradient(from 0deg,#28d6ff,#ff4fb7,#7b6bff,#28d6ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; pointer-events:none; animation:rltShimmer 7s linear infinite;
}
@keyframes rltShimmer{ to{ filter:hue-rotate(360deg) } }

/* ---- cabecalho ---------------------------------------------------------- */
.roleta-standalone .roleta-head{
  position:relative; z-index:2; max-width:780px; margin:0 auto clamp(22px,3vw,36px); text-align:center;
}
.roleta-standalone .roleta-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px; border-radius:999px; margin-bottom:18px;
  background:linear-gradient(90deg, rgba(40,214,255,.18), rgba(255,79,183,.18));
  border:1px solid rgba(150,200,255,.24);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:#e6f6ff;
}
.roleta-standalone .roleta-eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--rlt-pink); box-shadow:0 0 10px var(--rlt-pink);
  animation:rltBlink 1.6s ease-in-out infinite;
}
@keyframes rltBlink{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }
.roleta-standalone .roleta-head h1{
  font-size:clamp(2rem,5.2vw,3.35rem); line-height:1.05; margin:0 0 12px;
  font-weight:800; letter-spacing:-.02em; color:#f3faff; text-shadow:0 12px 40px rgba(2,10,22,.5);
}
.roleta-standalone .roleta-head h1 .accent{
  background:linear-gradient(100deg,#28d6ff,#8a7dff 46%,#ff4fb7);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:rltHue 6s ease infinite;
}
@keyframes rltHue{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.roleta-standalone .roleta-head p{
  color:rgba(216,231,249,.82); font-size:clamp(1rem,2.2vw,1.15rem); margin:0 auto; max-width:54ch;
}

/* selos de confianca */
.roleta-trust{ display:none; }
.roleta-standalone .roleta-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:20px;
}
.roleta-standalone .roleta-trust__chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:12px;
  font-size:.82rem; font-weight:600; color:#dcefff;
  background:rgba(255,255,255,.05); border:1px solid rgba(150,200,255,.14);
}
.roleta-standalone .roleta-trust__chip svg{ width:15px; height:15px; color:var(--rlt-cyan); flex:0 0 auto; }

/* ---- grid principal ----------------------------------------------------- */
.roleta-standalone .roleta-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(26px,4vw,66px); align-items:center;
}

/* ---- roda --------------------------------------------------------------- */
.roleta-standalone .roleta-stage{
  position:relative; width:100%; max-width:min(470px,44vw); margin:0 auto; aspect-ratio:1/1;
  display:grid; place-items:center; perspective:none; animation:rltFloat 6s ease-in-out infinite;
}
.roleta-standalone .roleta-wheel{
  transform:none; filter:drop-shadow(0 30px 52px rgba(2,10,22,.62));
}
.roleta-standalone .roleta-wheel:hover{ transform:none; }
.roleta-standalone .roleta-stage::before{
  content:""; position:absolute; inset:-8%; border-radius:50%; z-index:-2;
  background:conic-gradient(from 0deg,#28d6ff,#ff4fb7,#7b6bff,#28d6ff);
  filter:blur(28px); opacity:.5; animation:rltRing 10s linear infinite;
}
@keyframes rltRing{ to{ transform:rotate(360deg) } }
.roleta-standalone .roleta-stage::after{
  content:""; position:absolute; left:50%; bottom:-5%; width:72%; height:13%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(40,214,255,.5), rgba(255,79,183,.24) 45%, transparent 72%);
  filter:blur(16px); z-index:-1; animation:rltGlow 3.4s ease-in-out infinite;
}
@keyframes rltGlow{ 0%,100%{opacity:.65} 50%{opacity:1} }
@keyframes rltFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.roleta-standalone .roleta-pointer{ top:-15px; filter:drop-shadow(0 7px 15px rgba(40,214,255,.6)); }
.roleta-standalone .roleta-pointer svg{ width:42px; height:auto; }

.roleta-standalone .roleta-hub{
  width:30%; height:30%;
  background:radial-gradient(circle at 50% 32%, #16304e, #060d18 78%);
  border:2px solid rgba(40,214,255,.92);
  box-shadow:0 0 0 7px rgba(6,13,24,.9), 0 0 28px rgba(40,214,255,.5), inset 0 2px 8px rgba(255,255,255,.14);
}
.roleta-standalone .roleta-hub__bolt svg{ width:46%; filter:drop-shadow(0 0 12px rgba(40,214,255,.85)); }

/* ---- painel / formulario ------------------------------------------------ */
.roleta-standalone .roleta-panel{
  background:linear-gradient(180deg, rgba(13,24,42,.8), rgba(10,18,32,.86));
  border:1px solid rgba(150,200,255,.16); border-radius:22px;
  padding:clamp(22px,2.6vw,32px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 26px 60px rgba(2,10,22,.35);
}
.roleta-standalone .roleta-panel h2{
  font-size:clamp(1.2rem,2.4vw,1.5rem); margin:0 0 20px; font-weight:800; color:#f3faff; line-height:1.2;
}
.roleta-standalone .roleta-field{
  min-height:56px; padding:0 16px; margin-bottom:13px; border-radius:15px;
  background:rgba(255,255,255,.045); border:1px solid rgba(150,200,255,.16);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.roleta-standalone .roleta-field:focus-within{
  border-color:rgba(40,214,255,.65); background:rgba(40,214,255,.07);
  box-shadow:0 0 0 4px rgba(40,214,255,.12);
}
.roleta-standalone .roleta-field svg{ color:#7fb6e6; }
.roleta-standalone .roleta-field input{ font-size:1rem; padding:16px 0; }

/* Blindagem dos campos: anula o input BRANCO global (.store-v2 input do home-v2.css),
   garante texto claro, placeholder visivel e autofill que nao volta a pintar de branco. */
.roleta-standalone .roleta-field input{
  min-height:0 !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
  color:#f3faff !important; -webkit-text-fill-color:#f3faff;
  caret-color:var(--rlt-cyan,#28d6ff);
}
.roleta-standalone .roleta-field input::placeholder{
  color:rgba(208,224,245,.55) !important; -webkit-text-fill-color:rgba(208,224,245,.55); opacity:1;
}
.roleta-standalone .roleta-field input:-webkit-autofill,
.roleta-standalone .roleta-field input:-webkit-autofill:hover,
.roleta-standalone .roleta-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#f3faff !important; caret-color:#f3faff; border-radius:12px;
  -webkit-box-shadow:0 0 0 1000px #14233d inset !important;
  box-shadow:0 0 0 1000px #14233d inset !important;
  transition:background-color 9999s ease-in-out 0s;
}

.roleta-standalone .roleta-submit{
  margin-top:8px; padding:18px 22px; border-radius:999px; font-size:1.02rem; letter-spacing:.06em;
  color:#04121f;
  background:linear-gradient(95deg,#28d6ff,#7b6bff 52%,#ff4fb7);
  background-size:180% 100%;
  box-shadow:0 18px 42px rgba(40,214,255,.28), 0 10px 30px rgba(255,79,183,.22);
  position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, background-position .5s ease;
}
.roleta-standalone .roleta-submit:hover:not(:disabled){
  transform:translateY(-2px); background-position:100% 50%;
  box-shadow:0 26px 54px rgba(255,79,183,.36);
}
.roleta-standalone .roleta-submit::after{
  content:""; position:absolute; top:0; left:-60%; width:42%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); animation:rltSheen 3.8s ease-in-out infinite;
}
@keyframes rltSheen{ 0%,58%{left:-60%} 100%{left:135%} }

.roleta-standalone .roleta-note{ justify-content:center; font-size:.82rem; margin-top:16px; }
.roleta-standalone .roleta-foot{ margin-top:clamp(18px,3vw,28px); font-size:.9rem; opacity:.85; }

/* ---- marquee de premios (somente pagina publica) ------------------------ */
.roleta-marquee{ display:none; }
.roleta-standalone .roleta-marquee{ display:block; }
.roleta-marquee{
  position:relative; z-index:2; margin-top:clamp(20px,3vw,32px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  overflow:hidden;
}
.roleta-marquee__track{ display:flex; gap:12px; width:max-content; animation:rltMarquee 24s linear infinite; }
.roleta-marquee:hover .roleta-marquee__track{ animation-play-state:paused; }
.roleta-marquee__item{
  display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(150,200,255,.14);
  font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; letter-spacing:.02em;
  color:#eaf4ff; white-space:nowrap;
}
.roleta-marquee__item svg{ width:15px; height:15px; color:var(--rlt-gold); flex:0 0 auto; }
@keyframes rltMarquee{ to{ transform:translateX(-50%) } }

/* ---- overlay de resultado (mais comemorativo) --------------------------- */
.roleta-standalone .roleta-result__card{
  border:1px solid rgba(40,214,255,.4);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(40,214,255,.22), transparent 55%),
    radial-gradient(120% 90% at 50% 112%, rgba(255,79,183,.18), transparent 55%),
    linear-gradient(180deg, rgba(14,26,44,.98), rgba(10,18,32,.98));
  box-shadow:0 44px 120px rgba(0,0,0,.62);
}
.roleta-standalone .roleta-result__prize{ font-size:clamp(2rem,7vw,2.9rem); }

/* ---- responsivo --------------------------------------------------------- */
@media (max-width:920px){
  .roleta-standalone .roleta-grid{ grid-template-columns:1fr; gap:28px; }
  .roleta-standalone .roleta-stage{ order:1; max-width:min(350px,74vw); }
  .roleta-standalone .roleta-panel{ order:2; }
}
@media (max-width:520px){
  .storefront-roleta .roleta-page{ padding:16px 0 40px; }
  .roleta-standalone .roleta-shell{ padding:22px 16px 24px; border-radius:26px; }
  .roleta-standalone .roleta-head h1{ font-size:clamp(1.7rem,8.4vw,2.25rem); }
  .roleta-standalone .roleta-stage{ max-width:min(300px,82vw); }
  .roleta-standalone .roleta-field input{ font-size:16px; }
  .roleta-standalone .roleta-trust__chip{ font-size:.76rem; padding:7px 11px; }
}
@media (prefers-reduced-motion:reduce){
  .roleta-standalone .roleta-stage,
  .roleta-standalone .roleta-shell::before,
  .roleta-standalone .roleta-stage::before,
  .roleta-standalone .roleta-stage::after,
  .roleta-standalone .roleta-submit::after,
  .roleta-standalone .roleta-eyebrow::before,
  .storefront-roleta .roleta-page::before,
  .roleta-marquee__track{ animation:none !important; }
}