/* My247shop v1.2.0 — compact premium responsive UI */
:root{--m247-bg:#07110e;--m247-panel:rgba(17,31,26,.88);--m247-line:rgba(255,255,255,.09);--m247-green:#19e786;--m247-muted:#9aafa5;--m247-radius:22px}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#07110e}
body{width:100%;min-width:0;overflow-x:clip;padding:0!important;margin:0!important;background:radial-gradient(ellipse at 10% 0%,rgba(25,231,134,.11),transparent 32%),radial-gradient(ellipse at 95% 20%,rgba(28,143,255,.09),transparent 30%),#070d0b!important;color:#f6faf8}
.app{width:100%;max-width:1120px!important;min-height:100dvh;height:auto!important;max-height:none!important;margin:0 auto!important;border-radius:0!important;overflow:clip!important;background:linear-gradient(180deg,rgba(8,24,18,.95),rgba(6,14,12,.98))!important;box-shadow:none!important}
.app::before,.app::after{opacity:.35!important;animation-duration:90s!important}
.app-top{padding:calc(env(safe-area-inset-top,0px) + 12px) clamp(14px,3vw,28px) 0!important}
.brand{font-size:clamp(22px,4vw,30px)!important;letter-spacing:-1.2px!important}
.tagline{font-size:10px!important;letter-spacing:1.8px!important;text-transform:uppercase}
.welcome{margin-top:17px!important}
.welcome h1{font-size:clamp(25px,5vw,36px)!important;line-height:1.05!important;letter-spacing:-1.2px!important}
.welcome p{font-size:13px!important;margin-top:5px!important}
.wallet-card{margin:16px clamp(12px,2.5vw,24px) 0!important;padding:clamp(15px,2.4vw,24px)!important;border-radius:clamp(19px,3vw,28px)!important;background:radial-gradient(circle at 100% 0%,rgba(39,225,146,.18),transparent 36%),linear-gradient(145deg,rgba(31,39,36,.97),rgba(9,17,14,.98))!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 16px 44px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.08)!important}
.credit-card-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:15px!important}
.credit-brand-name{font-size:clamp(22px,4.5vw,32px)!important;letter-spacing:-1.4px!important;line-height:1.05!important}
.credit-brand-tagline{font-size:10px!important;letter-spacing:2px!important;margin-top:4px!important}
.credit-card-logout{min-height:38px!important;padding:8px 12px!important;border-radius:13px!important;font-size:12px!important;white-space:nowrap}
.wallet-heading{gap:10px!important}
.wallet-icon{width:38px!important;height:38px!important;border-radius:12px!important;font-size:18px!important}
.wallet-label small{font-size:10px!important;letter-spacing:1.3px!important;text-transform:uppercase}
.wallet-label strong{font-size:14px!important}
.balance{font-size:clamp(29px,7vw,45px)!important;line-height:1.05!important;letter-spacing:-1.5px!important;margin-top:13px!important;overflow-wrap:anywhere}
.wallet-sub{font-size:10px!important;letter-spacing:1px!important;text-transform:uppercase;margin-top:5px!important}
.wallet-actions{margin-top:15px!important;padding-top:13px!important}
.wallet-action{min-width:0!important;padding:0 4px!important}
.wallet-action-icon{width:38px!important;height:38px!important;font-size:19px!important}
.wallet-action strong{font-size:11px!important;margin-top:6px!important;white-space:normal!important}
.scan-wrap{padding:22px 0 9px!important}
.scan-button{width:clamp(142px,35vw,190px)!important;height:clamp(142px,35vw,190px)!important;max-width:75vw!important}
.scan-icon{width:49px!important;height:49px!important;border-width:3px!important;border-radius:14px!important;font-size:25px!important;margin-bottom:6px!important}
.scan-button strong{font-size:clamp(15px,4vw,19px)!important}
.scan-button small{font-size:10px!important}
.quick-actions{padding:0 clamp(12px,2.5vw,24px)!important;gap:9px!important}
.quick{min-height:76px!important;padding:11px!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(18,43,31,.95),rgba(10,25,18,.97))!important;border-color:rgba(46,231,139,.15)!important}
.quick-icon{font-size:20px!important}
.quick strong{font-size:12px!important;margin-top:5px!important}
.quick small{font-size:10px!important;line-height:1.25!important}
.content{padding:20px clamp(12px,2.5vw,24px) calc(92px + env(safe-area-inset-bottom,0px))!important}
.section-head{margin-bottom:12px!important;gap:10px!important}
.section-head strong{font-size:17px!important;letter-spacing:-.3px}
.categories{gap:9px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.category{min-width:0!important;gap:5px!important;font-size:11px!important;text-align:center}
.category-box{width:100%!important;max-width:68px!important;height:58px!important;margin:auto!important;border-radius:15px!important}
.deal{margin-top:16px!important;padding:15px!important;border-radius:17px!important}
.bottom-nav{position:fixed!important;left:50%!important;transform:translateX(-50%)!important;bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;width:min(720px,calc(100% - 20px))!important;padding:7px 5px!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:2px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:20px!important;background:rgba(8,17,14,.91)!important;backdrop-filter:blur(22px) saturate(145%)!important;-webkit-backdrop-filter:blur(22px) saturate(145%)!important;box-shadow:0 10px 34px rgba(0,0,0,.38)!important;z-index:120!important}
.nav-item{min-width:0!important;padding:5px 2px!important;font-size:10px!important;gap:3px!important}
.nav-icon{font-size:18px!important}
.nav-scan{width:32px!important;height:32px!important;font-size:19px!important}
.sheet-overlay{padding:0!important;align-items:flex-end!important}
.auth-sheet,.sheet{width:100%!important;max-width:620px!important;max-height: min(88dvh,760px)!important;overflow-y:auto!important;margin:0 auto!important;border-radius:25px 25px 0 0!important;padding:20px clamp(16px,4vw,26px) calc(20px + env(safe-area-inset-bottom,0px))!important}
input,select,textarea{font-size:16px!important;max-width:100%!important}
button,a,[role=button]{touch-action:manipulation}
img,video,canvas,svg{max-width:100%}
/* Compact Snooker/reward wallet cards injected by the account UI */
[id*="Snooker" i],[class*="snooker" i],[id*="rewardWallet" i],[class*="reward-wallet" i]{max-width:100%;overflow-wrap:anywhere}
/* payment modal and confirmation details */
#paymentConfirmation,#payment-confirmation,.payment-confirmation,.payment-sheet{width:calc(100% - 20px)!important;max-width:560px!important;margin-inline:auto!important;border-radius:22px!important}
@media(min-width:700px){
 .app-top{padding-top:24px!important}
 .welcome{margin-top:24px!important}
 .wallet-card{margin-top:22px!important}
 .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .content{padding-bottom:34px!important}
 .bottom-nav{position:sticky!important;left:auto!important;transform:none!important;bottom:auto!important;margin:0 auto 12px!important}
 .scan-wrap{padding:25px 0 14px!important}
}
@media(max-width:380px){
 .wallet-card{padding:14px!important}
 .credit-card-logout{padding:7px 9px!important;font-size:11px!important}
 .balance{font-size:clamp(26px,7.2vw,32px)!important}
 .wallet-action strong{font-size:10px!important}
 .quick-actions{gap:6px!important}
 .quick{padding:9px!important}
 .quick strong{font-size:11px!important}
 .categories{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}