/* Awestruck Social-Proof Toasts — styles (v4)
   White · Yellow · Black · Blue palette (purple only on CTA buttons). */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root{
  --blue:#383BF1; --blue-2:#2A2CC9; --sky:#4C8DFF; --purple:#6E54FF; --yellow:#FFE600;
  --grad:linear-gradient(125deg,#383BF1 0%,#2F6BF5 55%,#4C8DFF 100%);
  --grad-purple:linear-gradient(125deg,#5B4BF2,#7A5CFF);
  --ink:#11142B; --muted:#5E6478; --gold:#FFB020;
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
}

.awt{position:fixed;left:clamp(14px,2vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:2147482000;font-family:var(--body);pointer-events:none}
.awt__wrap{position:relative;border-radius:20px;padding:2px;width:346px;       /* FIXED size — never grows/shrinks */
  opacity:0;transform:translateY(20px) scale(.93);filter:blur(7px);
  transition:opacity .46s ease,transform .55s cubic-bezier(.25,1.3,.45,1),filter .46s ease}
.awt.show .awt__wrap{opacity:1;transform:none;filter:blur(0)}
.awt.leaving .awt__wrap{opacity:0;transform:translateY(-16px) scale(.96) rotateX(16deg);filter:blur(8px);
  transition:opacity .42s ease,transform .46s cubic-bezier(.5,0,.7,0),filter .42s ease}
/* glowing moving border (blue) */
@property --awt-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.awt__wrap::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:0;
  background:conic-gradient(from var(--awt-ang),#383BF1,#4C8DFF,#5BC8FF,#2F6BF5,#383BF1);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:awtspin 4s linear infinite}
@keyframes awtspin{to{--awt-ang:360deg}}
.awt__wrap::after{content:"";position:absolute;inset:-6px;border-radius:24px;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(56,59,241,.35),transparent 70%);filter:blur(8px);animation:awtglow 3.2s ease-in-out infinite}
@keyframes awtglow{0%,100%{opacity:.4}50%{opacity:.8}}

.awt__card{position:relative;z-index:1;border-radius:18px;padding:15px 16px 16px;overflow:hidden;pointer-events:auto;background:#fff;
  min-height:158px;display:flex;flex-direction:column}
.awt__card.t-vend{background:linear-gradient(165deg,#F6F8FF,#FFFFFF)}
.awt__card.t-promo,.awt__card.t-intro{background:linear-gradient(160deg,#15172B,#0C0D18);color:#fff}
.awt__card.t-intro{background:linear-gradient(160deg,#16213F,#0D1326)}

/* prominent close */
.awt__x{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:9px;cursor:pointer;z-index:6;
  background:#11142B;color:#fff;font-size:17px;line-height:1;display:grid;place-items:center;transition:.15s;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
.awt__x:hover{background:#000;transform:rotate(90deg)}
.t-promo .awt__x,.t-intro .awt__x{background:rgba(255,255,255,.92);color:#14122A}

/* patch tones */
.awt__patch{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 11px 6px 9px;border-radius:9px;margin-bottom:9px;box-shadow:0 6px 14px -7px rgba(0,0,0,.4)}
.awt__patch svg{width:14px;height:14px;fill:currentColor}
.awt__patch .pdot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pdot 1.4s ease-in-out infinite}
@keyframes pdot{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.pt-blue{background:linear-gradient(120deg,#383BF1,#4C8DFF);color:#fff}
.pt-ink{background:#11142B;color:#fff}
.pt-yellow{background:#FFE600;color:#11142B}
.pt-sky{background:#4C8DFF;color:#fff}
.pt-white{background:#fff;color:#11142B;box-shadow:0 6px 14px -7px rgba(0,0,0,.3)}

.awt__name{font-size:12.5px;font-weight:600;color:var(--muted)}
.awt__name b{color:var(--ink);font-weight:800}
.awt__head{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.12;letter-spacing:-.02em;color:var(--ink);margin:3px 0 1px}
.awt__txt{font-size:13.5px;color:#3A3F52;line-height:1.46;margin-top:7px;text-wrap:pretty;flex:1}
.t-promo .awt__head,.t-intro .awt__head{color:#fff}
.t-promo .awt__txt,.t-intro .awt__txt{color:#C7CBE4}
.hl{color:var(--blue);font-weight:800}
.t-promo .hl,.t-intro .hl{color:#8FB6FF}
.mk{font-weight:800;color:inherit;background:linear-gradient(transparent 56%,rgba(255,230,0,.65) 56%);
  background-size:0% 100%;background-repeat:no-repeat;animation:mkin .7s .35s forwards ease}
@keyframes mkin{to{background-size:100% 100%}}

/* animated stars */
.awt__stars{display:flex;gap:2px;margin:8px 0 2px}
.star{position:relative;width:16px;height:16px;display:inline-block;transform:scale(0)}
.awt.show .star{animation:starpop .46s cubic-bezier(.3,1.7,.5,1) forwards;animation-delay:var(--d)}
@keyframes starpop{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.star .sb,.star .sf{position:absolute;inset:0;overflow:hidden;display:flex}
.star .sf{z-index:1}
.star svg{width:16px;height:16px;display:block;flex:none}
.star .sb svg{fill:#E2E5F0}.star .sf svg{fill:var(--gold)}

/* chips */
.awt__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.awt__chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:6px 10px;border-radius:999px;
  background:rgba(56,59,241,.1);color:var(--blue-2)}
.awt__chip svg{width:12px;height:12px;fill:currentColor}
.awt__chip.ink{background:rgba(17,20,43,.08);color:#11142B}
.t-intro .awt__chip{background:rgba(255,255,255,.12);color:#DCE6FF}
.t-intro .awt__chip svg{fill:#9FC0FF}

/* CTA button tones */
.awt__cta{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;width:100%;font-family:inherit;font-weight:800;font-size:14px;
  padding:13px 18px;border-radius:13px;cursor:pointer;border:0;text-decoration:none;position:relative;overflow:hidden;transition:transform .16s,box-shadow .16s}
.awt__cta:hover{transform:translateY(-2px)}
.awt__cta .ar{transition:transform .18s}.awt__cta:hover .ar{transform:translate(3px,-3px)}
.awt__cta svg{width:15px;height:15px}
.bt-blue{background:var(--grad);color:#fff;box-shadow:0 13px 26px -10px rgba(56,59,241,.8)}
.bt-purple{background:var(--grad-purple);color:#fff;box-shadow:0 13px 26px -10px rgba(110,84,255,.75)}
.bt-yellow{background:#FFE600;color:#11142B;box-shadow:0 13px 26px -12px rgba(255,210,0,.85)}
.bt-ink{background:#11142B;color:#fff;box-shadow:0 13px 26px -12px rgba(0,0,0,.6)}
.awt__cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:ctashine 3.4s ease-in-out infinite}
.bt-yellow::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent)}
@keyframes ctashine{0%{left:-70%}45%{left:150%}100%{left:150%}}

/* floating sparkles on dark cards */
.spk{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,0));opacity:0;pointer-events:none;animation:spk 3.4s ease-in-out infinite}
.spk.s1{top:16px;right:52px;animation-delay:.2s}.spk.s2{top:38px;right:28px;animation-delay:1.2s}.spk.s3{top:62px;right:60px;animation-delay:2.2s}
@keyframes spk{0%{opacity:0;transform:translateY(4px) scale(.6)}40%{opacity:1;transform:translateY(-4px) scale(1)}80%{opacity:0;transform:translateY(-10px) scale(.7)}100%{opacity:0}}

@media(max-width:767px){.awt{display:none!important}}
@media(prefers-reduced-motion:reduce){
  .awt__wrap::before,.awt__wrap::after,.star,.awt__cta::after,.mk,.spk,.awt__patch .pdot{animation:none!important}
  .star{transform:scale(1)}.mk{background-size:100% 100%}
}