/* GoTroppo Rewards promo styles: homepage banner (light) + prize peek-drawer (glass).
 * Wild palette. No emojis. Australian English.
 */

/* ============ HOMEPAGE BANNER (light cream) ============ */
.gtl-banner{
  --b-cream:#f7f0e4; --b-cream2:#fbf6ee; --b-ink:#181523; --b-ink2:#14322a;
  --b-yellow:#ffd23d; --b-orange:#ff6200; --b-orange2:#ff8e2b;
  --b-reward-a:#7209b7; --b-reward-b:#ff4e88;
  font-family:'Montserrat',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  max-width:1300px; margin:0 auto; padding:10px 16px;
}
.gtl-banner-inner{
  display:grid; grid-template-columns:1.18fr 0.92fr 1.4fr; gap:30px; align-items:center;
  padding:40px 46px; border-radius:26px; color:var(--b-ink);
  background:linear-gradient(135deg, var(--b-cream2) 0%, var(--b-cream) 100%);
  border:1px solid rgba(24,21,35,.07);
  box-shadow:0 26px 64px -34px rgba(60,30,10,.4);
}
.gtl-banner-eyebrow{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:#fff; padding:7px 15px; border-radius:50px;
  background:linear-gradient(135deg,var(--b-reward-a),var(--b-reward-b)); box-shadow:0 8px 20px -8px rgba(255,78,136,.5);}
.gtl-banner-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:#fff;}
.gtl-banner-h{font-size:clamp(28px,3vw,42px); line-height:1.04; font-weight:900; margin:16px 0 10px; letter-spacing:-.01em; color:var(--b-ink);}
.gtl-banner-h .hl{background:linear-gradient(120deg,var(--b-orange),var(--b-orange2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.gtl-banner-sub{font-size:15px; line-height:1.55; color:rgba(24,21,35,.66); margin:0 0 22px; max-width:42ch;}
.gtl-banner-cta{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:15px; text-decoration:none;
  color:#fff; background:linear-gradient(120deg,var(--b-orange2),var(--b-orange)); padding:14px 28px; border-radius:50px;
  box-shadow:0 14px 30px -10px rgba(255,98,0,.5); transition:transform .18s ease, box-shadow .18s ease;}
.gtl-banner-cta:hover{transform:translateY(-2px); box-shadow:0 20px 40px -10px rgba(255,98,0,.62);}
.gtl-banner-cta svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round;}

/* center: bright warm sun-spot + prize over it */
.gtl-banner-stage{position:relative; display:grid; place-items:center; min-height:240px;}
.gtl-banner-spot{position:absolute; width:300px; height:300px; border-radius:50%; z-index:1;
  background:radial-gradient(circle at 50% 46%, var(--b-yellow) 0%, var(--b-yellow) 26%, var(--b-orange) 54%, rgba(255,98,0,0) 72%);}
.gtl-banner-prize{position:relative; z-index:2; width:120%; max-width:120%; height:auto;
  filter:drop-shadow(0 22px 22px rgba(40,20,5,.32));}

/* right: how it works (loose black line icons) + earn entries (orange badges) */
.gtl-banner-lists{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.gtl-banner-ct{font-size:12.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--b-ink2); margin:0 0 16px;}
.gtl-banner-steps, .gtl-banner-earn{list-style:none; margin:0; padding:0;}
.gtl-banner-steps li, .gtl-banner-earn li{display:flex; gap:12px; align-items:flex-start; margin-bottom:16px;}
.gtl-banner-steps .ic{flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center;}
.gtl-banner-steps .ic svg{width:26px; height:26px; stroke:#181523; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-2.5deg);}
.gtl-banner-earn .badge{flex:0 0 40px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-weight:900; font-size:13px; color:#fff; background:linear-gradient(150deg,var(--b-orange2),var(--b-orange)); box-shadow:0 6px 14px -5px rgba(255,98,0,.5);}
.gtl-banner-steps .tx strong, .gtl-banner-earn .tx strong{display:block; font-size:14px; font-weight:800; line-height:1.2; color:var(--b-ink);}
.gtl-banner-steps .tx em, .gtl-banner-earn .tx em{display:block; font-style:normal; font-size:12px; line-height:1.36; color:rgba(24,21,35,.55); margin-top:2px;}

@media (max-width:1024px){
  .gtl-banner-inner{grid-template-columns:1fr 1fr; gap:24px; padding:34px 30px;}
  .gtl-banner-stage{order:-1; grid-column:1 / -1; min-height:210px;}
  .gtl-banner-lists{grid-column:1 / -1;}
}
@media (max-width:600px){
  .gtl-banner{padding:6px 12px;}
  .gtl-banner-inner{grid-template-columns:1fr; padding:26px 22px; border-radius:20px;}
  .gtl-banner-lists{grid-template-columns:1fr; gap:18px;}
  .gtl-banner-spot{width:230px; height:230px;}
  .gtl-banner-prize{width:92%; max-width:92%;}
}

/* ============ PRIZE PEEK-DRAWER (slide-out, glass) ============ */
.gtl-so-prize{
  --so-yellow:#ffde59; --so-orange:#ff6200; --so-ink:#14322a; --so-glass-brd:rgba(255,255,255,.24); --so-tab:58px;
  position:fixed; right:0; top:44%; z-index:99990; width:368px; max-width:92vw;
  font-family:'Montserrat',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#fff; background:rgba(20,20,40,.7);
  border:1px solid var(--so-glass-brd); border-right:0; border-radius:20px 0 0 20px;
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 28px 70px -22px rgba(0,0,0,.65);
  transform:translateX(calc(100% - var(--so-tab))); transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.gtl-so-prize.gtl-in{transform:translateX(0);}
.gtl-so-handle{position:absolute; left:0; top:0; bottom:0; width:var(--so-tab); padding:0; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:20px 0 0 20px;
  background:linear-gradient(160deg,var(--so-yellow),var(--so-orange)); color:var(--so-ink); box-shadow:-6px 0 18px -8px rgba(255,98,0,.7);}
.gtl-so-handle svg{width:24px; height:24px; stroke:var(--so-ink); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.gtl-so-handle-lbl{writing-mode:vertical-rl; transform:rotate(180deg); font-weight:800; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;}
.gtl-so-card{margin-left:var(--so-tab); padding:20px 22px 21px; position:relative;}
.gtl-so-x{position:absolute; top:11px; right:12px; width:26px; height:26px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; border-radius:50%; font-size:16px; line-height:1; display:grid; place-items:center;}
.gtl-so-x:hover{background:rgba(255,255,255,.28);}
.gtl-so-lab{font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--so-yellow);}
.gtl-so-ttl{font-size:23px; font-weight:900; line-height:1.06; margin:4px 0 0;}
.gtl-so-row{display:flex; gap:14px; align-items:center; margin-top:14px;}
.gtl-so-thumb{position:relative; flex:0 0 104px; height:70px; display:grid; place-items:center;}
.gtl-so-thumb .gtl-so-ss{position:absolute; inset:0; margin:auto; width:88px; height:88px; border-radius:50%;
  background:radial-gradient(circle, var(--so-yellow) 0%, var(--so-orange) 55%, rgba(255,98,0,0) 70%);}
.gtl-so-thumb img{position:relative; width:100%; height:auto; filter:drop-shadow(0 7px 9px rgba(0,0,0,.42));}
.gtl-so-note{margin:0 0 8px; font-size:13px; color:rgba(255,255,255,.82); line-height:1.42;}
.gtl-so-cta{display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:800; font-size:13.5px; color:var(--so-yellow);}
.gtl-so-cta svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:900px){ .gtl-so-prize{width:340px; top:42%;} .gtl-so-ttl{font-size:21px;} }
@media (max-width:600px){
  .gtl-so-prize{--so-tab:52px; width:min(340px,92vw); top:auto; bottom:13%; border-radius:18px 0 0 18px;}
  .gtl-so-card{padding:16px 18px 18px;} .gtl-so-ttl{font-size:20px;} .gtl-so-thumb{flex:0 0 92px; height:62px;}
}
@media (prefers-reduced-motion:reduce){ .gtl-so-prize{transition:none;} }