/* Eatopia Promo – customer UI */
:root{--promo-green:var(--brand,#13A538);--promo-ink:#111827;--promo-muted:#6B7280;--promo-line:#E5E7EB}
.promo-home,.promo-rm{font-family:Manrope,system-ui,sans-serif}
.promo-home .mp-section-head h2,.promo-rm-head h2{display:flex;align-items:center;gap:8px;font-size:20px;margin:6px 0 10px}
.promo-rm{max-width:1380px;margin:0 auto 14px;padding:0 20px;display:grid;gap:12px}
.promo-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;scrollbar-width:thin}
.promo-rail>*{scroll-snap-align:start;flex:0 0 auto}
.promo-deal{width:270px;background:#fff;border:1px solid var(--promo-line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--promo-ink);display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(0,0,0,.04);transition:transform .15s}
a.promo-deal:hover{transform:translateY(-2px)}
.promo-deal-top{background:var(--c);color:var(--f);display:flex;gap:10px;align-items:center;padding:14px}
.promo-deal-top .material-symbols-rounded{font-size:28px}
.promo-deal-top small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.promo-deal-top strong{font-size:16px;line-height:1.2}
.promo-deal-body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:7px;font-size:13px}
.promo-deal-body p{margin:0;color:#374151;line-height:1.4}
.promo-flag{align-self:flex-start;background:#FEF3C7;color:#92400E;border-radius:999px;padding:3px 9px;font-weight:800;font-size:11.5px}
.promo-code{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#374151}
.promo-code b{background:#111827;color:#fff;border-radius:6px;padding:2px 7px;letter-spacing:.06em}
.promo-code .material-symbols-rounded{font-size:17px}
.promo-deal-rests{display:flex;flex-wrap:wrap;gap:5px}
.promo-deal-rests a{background:#F3F4F6;border-radius:999px;padding:3px 9px;color:#111827;text-decoration:none;font-weight:700;font-size:12px}
.promo-cd{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;background:#111827;color:#fff;border-radius:999px;padding:4px 10px;font-weight:800;font-size:12px;font-variant-numeric:tabular-nums}
.promo-cd .material-symbols-rounded{font-size:15px}
.promo-goal{width:300px;background:#fff;border:1px solid var(--promo-line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px;border-top:5px solid var(--c)}
.promo-goal.done{background:linear-gradient(180deg,#F0FDF4,#fff)}
.promo-goal-head{display:flex;gap:10px;align-items:center}
.promo-goal-head .material-symbols-rounded{color:var(--c);font-size:28px}
.promo-goal-head small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--promo-muted)}
.promo-goal p{margin:0;font-size:13px;color:#374151}
.promo-goal-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px}
.promo-bar{height:10px;background:#F3F4F6;border-radius:999px;overflow:hidden}
.promo-bar span{display:block;height:100%;background:var(--c,var(--promo-green));border-radius:999px;transition:width .6s}
.promo-upcoming{display:flex;flex-wrap:wrap;gap:8px}
.promo-upcoming span{display:inline-flex;gap:6px;align-items:center;background:#FDF2F8;color:#9D174D;border-radius:12px;padding:8px 12px;font-weight:700;font-size:13px}
.promo-weather{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--promo-muted);font-weight:700}
.promo-wallet-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:6px}
.promo-wallet-strip a,.promo-wallet-strip button{display:inline-flex;align-items:center;gap:6px;background:#F0FDF4;border:1px solid #BBF7D0;color:#14532D;border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;cursor:pointer;font-family:inherit}
.promo-wallet-strip button{background:#FDF2F8;border-color:#FBCFE8;color:#9D174D;animation:promoWiggle 2.4s infinite}
@keyframes promoWiggle{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-3deg)}96%{transform:rotate(3deg)}}
.promo-bundle{background:#fff;border:1px solid var(--promo-line);border-left:5px solid var(--c);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.promo-bundle-head{display:flex;gap:10px;align-items:center}
.promo-bundle-head>div{flex:1}
.promo-bundle-head small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--promo-muted)}
.promo-bundle-head b{font-size:20px;color:var(--c)}
.promo-bundle-slots{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.promo-bundle-slots>div{background:#F9FAFB;border-radius:12px;padding:8px 10px;min-width:140px;flex:1}
.promo-bundle-slots small{display:block;font-weight:800;font-size:11px;color:var(--promo-muted);text-transform:uppercase}
.promo-bundle-slots span{font-size:13px;font-weight:600}
.promo-bundle-slots i{font-style:normal;font-weight:900;color:var(--promo-muted)}
.promo-tiers{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--promo-line);border-left:5px solid var(--c);border-radius:16px;padding:12px 14px}
.promo-tiers small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--promo-muted);text-transform:uppercase}
.promo-secret{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#111827,#312E81);color:#fff;border-radius:18px;padding:16px}
.promo-secret>.material-symbols-rounded{font-size:32px;color:#FCD34D}
.promo-secret small{display:block;opacity:.8;font-size:12px}
.promo-secret>div>small:first-child{font-weight:900;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.promo-secret strong{display:block;margin:3px 0}
.promo-secret.open{background:linear-gradient(135deg,#065F46,#13A538)}
.promo-secret .promo-muted{color:#E5E7EB}
.promo-secret-form{display:flex;gap:8px;margin-top:8px}
.promo-secret-form input{border:0;border-radius:10px;padding:9px 12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;width:150px}
.promo-pbadges{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.promo-pb{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:800;line-height:1.3}
.promo-pb .material-symbols-rounded{font-size:14px}
.promo-pb.deal{background:#FEE2E2;color:#B91C1C}
.promo-pb.mystery{background:#EDE9FE;color:#5B21B6}
.promo-pb.secret{background:#111827;color:#FCD34D}
.promo-checkout{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.promo-hint{display:flex;gap:10px;align-items:center;background:#F0FDF4;border:1px solid #BBF7D0;border-radius:14px;padding:10px 12px;color:#14532D}
.promo-hint>div{flex:1;display:flex;flex-direction:column;gap:6px}
.promo-hint strong{font-size:13px}
.promo-checkout-rewards{display:flex;flex-direction:column;gap:8px}
.promo-checkout-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.promo-checkout-title small{color:var(--promo-muted)}
.promo-applied-list{display:block;color:#065F46;font-size:12px;margin-top:2px}
.promo-reward{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--promo-line);border-radius:14px;padding:10px 12px;position:relative}
.promo-reward::before{content:"";position:absolute;left:84px;top:6px;bottom:6px;border-left:2px dashed #E5E7EB}
.promo-reward-val{width:72px;text-align:center;font-weight:900;font-size:15px;color:var(--promo-green);line-height:1.15}
.promo-reward-copy{flex:1;display:flex;flex-direction:column;gap:2px;padding-left:8px}
.promo-reward-copy strong{font-size:14px}
.promo-reward-copy small{color:var(--promo-muted);font-size:12px}
.promo-reward code{background:#F3F4F6;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:800}
.promo-reward.selectable{cursor:pointer}
.promo-reward.selected{border-color:var(--promo-green);box-shadow:0 0 0 2px rgba(19,165,56,.18);background:#F0FDF4}
.promo-reward.disabled{opacity:.55;cursor:not-allowed}
.promo-radio .material-symbols-rounded{color:var(--promo-green)}
.promo-good{color:#15803D!important;font-weight:800}
.promo-warn{color:#B45309!important;font-weight:700}
.promo-muted{color:var(--promo-muted);font-size:12.5px}
.promo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--promo-green);color:#fff;border:0;border-radius:14px;padding:13px 18px;font-weight:900;letter-spacing:.03em;cursor:pointer;text-decoration:none;font-family:inherit;font-size:14px}
.promo-btn:disabled{opacity:.6}
.promo-btn.ghost{background:#F3F4F6;color:#111827}
.promo-btn.small{padding:8px 12px;font-size:12px;border-radius:10px}
.promo-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px}
.promo-modal-bg{position:absolute;inset:0;background:rgba(17,24,39,.6);backdrop-filter:blur(3px)}
.promo-modal-card{position:relative;background:#fff;border-radius:24px;width:min(440px,100%);max-height:92vh;overflow:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3);font-family:Manrope,system-ui,sans-serif;animation:promoPop .25s ease}
@keyframes promoPop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.promo-modal-x{position:absolute;right:10px;top:10px;border:0;background:#F3F4F6;border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
html.promo-modal-open{overflow:hidden}
.promo-spin{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.promo-spin small{font-weight:900;letter-spacing:.12em;color:#DB2777}
.promo-spin h2{margin:0;font-size:24px}
.promo-spin p{margin:0;color:var(--promo-muted)}
.promo-wheel{position:relative;width:min(300px,78vw);aspect-ratio:1;margin:8px auto}
.promo-wheel-svg{width:100%;height:100%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.promo-wheel-rot{transform-origin:150px 150px;transform-box:view-box}
.promo-wheel-pin{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid #111827;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.promo-spin-result{min-height:10px;width:100%}
.promo-won{display:flex;gap:10px;align-items:center;text-align:left;background:#F0FDF4;border-radius:14px;padding:12px 14px;animation:promoPop .3s}
.promo-won .material-symbols-rounded{font-size:32px;color:var(--promo-green)}
.promo-won.lose{background:#F3F4F6}
.promo-won.lose .material-symbols-rounded{color:var(--promo-muted)}
.promo-won small{display:block;color:var(--promo-muted)}
.promo-after{display:flex;flex-direction:column;gap:10px}
.promo-after h3{margin:6px 0 0}
.promo-lucky{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#F59E0B,#DB2777);color:#fff;border-radius:16px;padding:14px}
.promo-lucky .material-symbols-rounded{font-size:34px}
.promo-lucky small{display:block;font-weight:900;letter-spacing:.1em;font-size:11px;opacity:.9}
.promo-prog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.promo-prog{background:#fff;border:1px solid var(--promo-line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.promo-prog-head{display:flex;gap:10px;align-items:center}
.promo-prog-head .material-symbols-rounded{color:var(--promo-green);font-size:26px}
.promo-prog-head small{display:block;font-weight:900;font-size:10.5px;letter-spacing:.08em;color:var(--promo-muted)}
.promo-prog-head strong{font-size:14px}
.promo-stamps{display:flex;flex-wrap:wrap;gap:6px}
.promo-stamps i{font-style:normal;width:34px;height:34px;border-radius:50%;border:2px dashed #CBD5E1;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:#94A3B8}
.promo-stamps i.on{background:var(--promo-green);border:2px solid var(--promo-green);color:#fff;animation:promoPop .3s}
.promo-stamps i.gift{border-style:solid;border-color:#F59E0B;color:#F59E0B}
.promo-stamps.pass i{border-radius:10px}
.promo-order-card{max-width:720px;margin:12px auto;padding:14px;background:#fff;border:1px solid var(--promo-line);border-radius:18px;display:flex;flex-direction:column;gap:10px;font-family:Manrope,system-ui,sans-serif}
.promo-wallet{display:flex;flex-direction:column;gap:12px}
.promo-wallet h3{margin:8px 0 0}
.promo-wallet-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.promo-wallet-top>div{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--promo-line);border-radius:14px;padding:12px}
.promo-wallet-top .material-symbols-rounded{color:var(--promo-green)}
.promo-wallet-top small{display:block;color:var(--promo-muted);font-size:12px}
.promo-wallet-top b{font-size:18px}
.promo-spins{display:flex;flex-wrap:wrap;gap:8px}
.promo-empty{display:flex;gap:10px;align-items:center;background:#F9FAFB;border-radius:14px;padding:14px;color:var(--promo-muted)}
.promo-history summary{cursor:pointer;font-weight:800;margin:6px 0}
.promo-history .promo-reward{opacity:.7;margin-bottom:6px}
.promo-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111827;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;z-index:100000;opacity:0;transition:.25s;pointer-events:none;font-family:Manrope,system-ui,sans-serif}
.promo-toast.show{opacity:1;transform:translate(-50%,0)}
.promo-toast.err{background:#B91C1C}
@media(max-width:640px){.promo-rm{padding:0 14px}.promo-deal{width:240px}.promo-goal{width:270px}.promo-rail{margin-right:-14px;padding-right:14px}}