/* CHOR TOPUP storefront polish layer (2026-10-30) — loaded LAST on every storefront page.
   Visual only: same layout, same purple brand; smoother cards, type, motion and touch targets. */
:root{--cp-p:#6d28d9;--cp-p2:#8b5cf6;--cp-ink:#0f172a;--cp-ink2:#475569;--cp-ink3:#94a3b8;--cp-line:#e7e5f2;--cp-card:#fff;--cp-bg:#f6f5fb;
 --cp-r:16px;--cp-sh:0 1px 2px rgba(30,20,80,.05),0 4px 14px rgba(30,20,80,.06);--cp-sh2:0 10px 30px rgba(76,29,149,.16);--cp-ease:cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
*{-webkit-tap-highlight-color:transparent}
::selection{background:#ddd6fe;color:#2e1065}
.body-bg{background:radial-gradient(1200px 500px at 50% -120px,#ede9fe 0,transparent 60%),var(--cp-bg)!important}
img{image-rendering:auto}

/* header: glassy, crisp */
.header{background:rgba(255,255,255,.82)!important;backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 rgba(30,20,80,.06),0 6px 20px -12px rgba(30,20,80,.18)!important}
.es-nav-link{position:relative;transition:color .2s var(--cp-ease)}
.es-nav-link::after{content:'';position:absolute;left:12px;right:12px;bottom:-4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cp-p),var(--cp-p2));transform:scaleX(0);transition:transform .25s var(--cp-ease)}
.es-nav-link:hover::after,.es-nav-link.is-active::after{transform:scaleX(1)}
.hdr-login-btn,.hdr-register-btn{transition:transform .15s var(--cp-ease),box-shadow .2s,filter .2s}
.hdr-login-btn{background:linear-gradient(135deg,var(--cp-p),var(--cp-p2))!important;box-shadow:0 6px 16px -6px rgba(109,40,217,.6)}
.hdr-login-btn:hover,.hdr-register-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* notice + slider */
.premium-notice-card{border-radius:14px!important;box-shadow:var(--cp-sh)}
.premium-slider{border-radius:20px!important;overflow:hidden;box-shadow:0 18px 40px -22px rgba(76,29,149,.55)}
.premium-slide-img{transition:transform 6s ease}
.premium-slide.active .premium-slide-img{transform:scale(1.02)}
.premium-dot{transition:all .3s var(--cp-ease)}

/* quick chips */
.es-chip{border-radius:14px!important;transition:transform .15s var(--cp-ease),box-shadow .2s;box-shadow:0 6px 14px -8px rgba(15,23,42,.35)}
.es-chip:hover{transform:translateY(-2px)}
.es-chip:active{transform:scale(.97)}

/* section titles: modern sans + accent bars instead of the slab serif (beats ct-estop's html:root body rules) */
html:root body{--es-title:'Plus Jakarta Sans','Hind Siliguri',Inter,system-ui,sans-serif}
html:root body .premium-category-title-v2 h3{display:flex!important;align-items:center;justify-content:center;gap:12px;font-weight:800!important;font-size:clamp(1.25rem,2.2vw,1.65rem)!important;color:#0f172a!important;letter-spacing:-.02em!important}
html:root body .premium-category-title-v2 h3::before,html:root body .premium-category-title-v2 h3::after{content:'';flex:none;width:28px;height:4px;border-radius:4px;background:linear-gradient(90deg,#6d28d9,#a78bfa)}
html:root body .premium-category-title-v2 h3::after{background:linear-gradient(90deg,#a78bfa,#6d28d9)}
html:root body .product-card-title p{letter-spacing:0!important;word-spacing:.08em;font-weight:700!important;font-size:.8rem!important;color:#1e293b!important;line-height:1.25!important}
html:root body .review-heading,html:root body .flash-title{font-weight:800!important}
html:root body .co-hero-title,html:root body .co-rel-ttl{font-family:var(--es-title)!important;font-weight:800!important}

/* product grid + cards */
.product-card-wrapper{transition:transform .25s var(--cp-ease)}
.single-game-product{background:var(--cp-card)!important;border:1px solid var(--cp-line)!important;border-radius:var(--cp-r)!important;box-shadow:var(--cp-sh);overflow:hidden;transition:box-shadow .25s var(--cp-ease),border-color .25s,transform .25s var(--cp-ease)}
.product-card-link:hover .single-game-product{transform:translateY(-4px);box-shadow:var(--cp-sh2);border-color:#c4b5fd!important}
.product-card-link:active .single-game-product{transform:scale(.98)}
.product-img-wrapper{border-radius:12px!important;overflow:hidden;aspect-ratio:1/1}
.game-product-img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--cp-ease)}
.product-card-link:hover .game-product-img{transform:scale(1.06)}
.product-card-title{font-weight:700!important;color:var(--cp-ink)!important;line-height:1.3!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center;justify-content:center}

/* latest orders */
.es-lo-card{border:1px solid var(--cp-line);border-radius:20px!important;box-shadow:var(--cp-sh)!important}
.latest-order-card{border-radius:14px!important;border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s var(--cp-ease);animation:cp-in .4s var(--cp-ease) both}
.latest-order-card:hover{border-color:var(--cp-line);background:#fff!important;transform:translateX(2px)}
.latest-order-card:nth-child(2){animation-delay:.04s}.latest-order-card:nth-child(3){animation-delay:.08s}.latest-order-card:nth-child(4){animation-delay:.12s}.latest-order-card:nth-child(5){animation-delay:.16s}
.latest-order-name{font-weight:700!important;color:var(--cp-ink)!important}
.latest-order-amount{font-weight:700!important;color:var(--cp-p)!important}
.latest-order-badge{border-radius:999px!important;font-weight:700!important;letter-spacing:.01em}
@media (max-width:640px){.latest-order-card:nth-child(n+7){display:none!important}}
@keyframes cp-in{from{opacity:0;transform:translateY(6px)}}

/* reviews */
.review-main-card,.single-review-card{border-radius:20px!important;border:1px solid var(--cp-line);box-shadow:var(--cp-sh)}
.review-nav-btn{transition:transform .15s,box-shadow .2s}.review-nav-btn:hover:not(.disabled){transform:scale(1.06);box-shadow:var(--cp-sh2)}

/* checkout / product page */
.co-hero,.co-card{border-radius:20px!important;border:1px solid var(--cp-line)!important;box-shadow:var(--cp-sh)!important}
.co-card{animation:cp-in .35s var(--cp-ease) both}
.co-card:nth-of-type(2){animation-delay:.05s}.co-card:nth-of-type(3){animation-delay:.1s}.co-card:nth-of-type(4){animation-delay:.15s}
.co-hero-img{border-radius:16px!important;box-shadow:0 10px 24px -14px rgba(76,29,149,.6)}
.co-hero-title{font-family:'Plus Jakarta Sans','Hind Siliguri',Inter,sans-serif!important;font-weight:800!important;letter-spacing:-.01em}
.co-step{background:linear-gradient(135deg,var(--cp-p),var(--cp-p2))!important;color:#fff!important;box-shadow:0 6px 14px -6px rgba(109,40,217,.7)}
.co-card-title{font-weight:700!important;color:var(--cp-ink)!important}
.co-var-btn{border-radius:14px!important;min-height:56px;transition:border-color .2s,box-shadow .2s,transform .15s var(--cp-ease),background .2s}
.co-var-btn:hover{border-color:#c4b5fd!important;box-shadow:0 6px 16px -10px rgba(109,40,217,.55)}
.co-var-btn:active{transform:scale(.98)}
.co-var-btn.sel,.co-var-btn.active,.co-var-btn.selected,.co-var-btn[aria-pressed=true],.co-var-btn:has(input:checked){border-color:var(--cp-p)!important;background:linear-gradient(180deg,#faf5ff,#f3e8ff)!important;box-shadow:0 0 0 3px rgba(139,92,246,.18)!important}
.co-var-name{font-weight:700!important;color:var(--cp-ink)!important}
.co-var-price{font-weight:800!important}
.co-input{border-radius:12px!important;min-height:46px;transition:border-color .2s,box-shadow .2s}
.co-input:focus{border-color:var(--cp-p)!important;box-shadow:0 0 0 4px rgba(139,92,246,.16)!important;outline:0}
.co-qty-btn{border-radius:12px!important;min-width:40px;min-height:40px;transition:transform .12s}.co-qty-btn:active{transform:scale(.92)}
.co-pm-card{border-radius:16px!important;transition:border-color .2s,box-shadow .2s,transform .15s}
.co-pm-card:active{transform:scale(.98)}
.co-pm-card.co-pm-sel{box-shadow:0 0 0 3px rgba(139,92,246,.2),0 10px 24px -14px rgba(109,40,217,.6)!important}
.co-btn{border-radius:14px!important;min-height:52px;font-weight:700!important;letter-spacing:.01em;transition:transform .15s var(--cp-ease),box-shadow .2s,filter .2s}
.co-btn-p{background:linear-gradient(135deg,var(--cp-p),var(--cp-p2))!important;box-shadow:0 12px 24px -12px rgba(109,40,217,.8)!important}
.co-btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.co-btn:active:not(:disabled){transform:scale(.98)}
.co-cost{border-radius:14px!important}
.co-cost-val{font-weight:800!important}
.co-rel-card{border-radius:16px!important;overflow:hidden;transition:transform .2s var(--cp-ease),box-shadow .2s}
.co-rel-card:hover{transform:translateY(-3px);box-shadow:var(--cp-sh2)}
.co-rules{line-height:1.7}

/* forms (login/register/account/add money) */
input,select,textarea,button{font-family:inherit}
.form-control,input[type=email],input[type=password],input[type=text],input[type=number],input[type=tel]{transition:border-color .2s,box-shadow .2s}
.form-control:focus,input[type=email]:focus,input[type=password]:focus,input[type=text]:focus,input[type=number]:focus,input[type=tel]:focus{box-shadow:0 0 0 4px rgba(139,92,246,.15)!important;border-color:var(--cp-p)!important;outline:0}
button,.btn,a.btn{transition:transform .15s var(--cp-ease),filter .2s,box-shadow .2s}
button:active:not(:disabled),.btn:active{transform:scale(.98)}
button:focus-visible,a:focus-visible,.btn:focus-visible{outline:2px solid var(--cp-p2);outline-offset:2px}

/* footer */
.es-cbtn,.es-social,.es-app-badge,.es-support{transition:transform .15s var(--cp-ease),filter .2s}
.es-cbtn:hover,.es-social:hover,.es-app-badge:hover,.es-support:hover{transform:translateY(-2px);filter:brightness(1.08)}
.es-foot-panel{border-radius:18px!important}

/* bottom nav: glass + bigger targets + safe area */
.es-bnav{background:rgba(255,255,255,.9)!important;backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 -8px 24px -12px rgba(30,20,80,.25)!important;padding-bottom:env(safe-area-inset-bottom)!important}
.es-bnav-item{min-height:48px;transition:color .2s}
.es-bnav-item.active{color:var(--cp-p)!important}
.es-bnav-plus{background:linear-gradient(135deg,var(--cp-p),var(--cp-p2))!important;box-shadow:0 10px 22px -8px rgba(109,40,217,.8)!important;transition:transform .15s var(--cp-ease)}
.es-bnav-plus-link:active .es-bnav-plus{transform:scale(.92)}

/* popups + floating help */
.custom-popup-modal .modal-content{border-radius:22px!important;overflow:hidden;box-shadow:0 30px 60px -20px rgba(15,23,42,.5)!important;animation:cp-pop .28s var(--cp-ease)}
.modal-backdrop.show{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
@keyframes cp-pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.fab-custom-main-trigger{transition:transform .2s var(--cp-ease)}.fab-custom-main-trigger:hover{transform:scale(1.06)}

/* skeleton shimmer for images still loading */
.skeleton-placeholder{background:linear-gradient(90deg,#efedf7 25%,#f8f7fc 50%,#efedf7 75%);background-size:200% 100%;animation:cp-sh 1.4s infinite}
@keyframes cp-sh{to{background-position:-200% 0}}

/* safety: never scroll sideways */
html,body{overflow-x:clip;max-width:100%}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ───── site chrome: drawer, progress bar, skeletons, spin wheel (2026-10-30) ───── */
.ctx-brand{display:flex;align-items:center;gap:6px;min-width:0}
.ctx-menu-btn{width:42px;height:42px;border:0;background:transparent;border-radius:12px;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;flex:none;transition:background .2s}
.ctx-menu-btn:hover{background:#f3f0ff}
.ctx-menu-btn span{display:block;width:20px;height:2.2px;border-radius:2px;background:#1e1b4b;transition:transform .2s}
.ctx-menu-btn span:nth-child(2){width:14px;align-self:center;margin-left:-6px}
.ctx-drawer-root{position:fixed;inset:0;z-index:1200;pointer-events:none}
.ctx-drawer-root.open{pointer-events:auto}
.ctx-scrim{position:absolute;inset:0;background:rgba(15,10,40,.45);opacity:0;transition:opacity .25s;backdrop-filter:blur(2px)}
.ctx-drawer-root.open .ctx-scrim{opacity:1}
.ctx-drawer{position:absolute;top:0;bottom:0;left:0;width:min(320px,86vw);background:#fff;box-shadow:12px 0 40px -12px rgba(30,20,80,.35);transform:translateX(-102%);transition:transform .3s var(--cp-ease);display:flex;flex-direction:column;overflow-y:auto;padding:14px 14px calc(18px + env(safe-area-inset-bottom));border-radius:0 22px 22px 0}
.ctx-drawer-root.open .ctx-drawer{transform:none}
.ctx-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 12px}
.ctx-logo{height:34px;width:auto}
.ctx-x{width:38px;height:38px;border-radius:12px;border:0;background:#f4f2fb;color:#1e1b4b;font-size:16px;cursor:pointer}
.ctx-user{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:linear-gradient(135deg,#6d28d9,#8b5cf6);color:#fff!important;text-decoration:none!important;margin-bottom:10px;box-shadow:0 10px 24px -12px rgba(109,40,217,.7)}
.ctx-av{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:800;overflow:hidden;flex:none}.ctx-av img{width:100%;height:100%;object-fit:cover}
.ctx-user-txt{flex:1;min-width:0}.ctx-user-txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ctx-user-txt small{opacity:.85;font-size:12.5px}
.ctx-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.ctx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:14px;border:1px solid #e5e1f5;background:#fff;color:#1e1b4b!important;font-weight:700;text-decoration:none!important;cursor:pointer;transition:transform .15s var(--cp-ease),filter .2s}
.ctx-btn.p{background:linear-gradient(135deg,#6d28d9,#8b5cf6);border-color:transparent;color:#fff!important;box-shadow:0 10px 22px -12px rgba(109,40,217,.8)}
.ctx-btn.lg{min-height:54px;font-size:16px;padding:0 28px;width:100%;max-width:360px}
.ctx-btn:disabled{opacity:.55;cursor:not-allowed}
.ctx-nav{display:flex;flex-direction:column;gap:2px}
.ctx-item{display:flex;align-items:center;gap:14px;min-height:46px;padding:0 14px;border-radius:14px;color:#334155!important;font-weight:600;text-decoration:none!important;transition:background .15s,color .15s}
.ctx-item i{width:20px;text-align:center;color:#7c3aed;font-size:16px}
.ctx-item:hover{background:#f6f3ff}.ctx-item.on{background:#ede9fe;color:#4c1d95!important}
.ctx-pages{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding-top:12px;border-top:1px solid #eee9fb}
.ctx-pages span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;padding:4px 14px}
.ctx-pages a{padding:9px 14px;border-radius:12px;color:#475569!important;font-size:14px;text-decoration:none!important}.ctx-pages a:hover{background:#f6f3ff}
.ctx-logout{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border-radius:14px;border:1px solid #fecdd3;background:#fff1f2;color:#be123c;font-weight:700;cursor:pointer;margin-top:16px}
.ctx-progress{position:fixed;top:0;left:0;height:3px;z-index:1300;background:linear-gradient(90deg,#6d28d9,#c084fc,#6d28d9);box-shadow:0 0 10px rgba(139,92,246,.7);transition:width .2s ease,opacity .3s;pointer-events:none;border-radius:0 3px 3px 0}
.ctx-page{max-width:1180px;margin:0 auto;padding:16px 16px 110px}
.ctx-sk{background:linear-gradient(90deg,#ebe8f5 25%,#f7f5fc 50%,#ebe8f5 75%);background-size:200% 100%;animation:cp-sh 1.3s infinite}
.ctx-sk-row{display:flex;gap:10px;margin-top:12px;overflow:hidden}
.ctx-sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media (min-width:640px){.ctx-sk-grid{grid-template-columns:repeat(4,1fr)}}@media (min-width:1024px){.ctx-sk-grid{grid-template-columns:repeat(7,1fr)}}
.ctx-sk-card{background:#fff;border:1px solid #eee9fb;border-radius:16px;padding:8px 8px 12px}
.ctx-loading{animation:cp-in .2s ease both}
.ctx-card{background:#fff;border:1px solid var(--cp-line);border-radius:20px;box-shadow:var(--cp-sh);padding:18px;margin-top:16px}
.ctx-center{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.ctx-h3{font-family:var(--es-title,'Plus Jakarta Sans'),sans-serif;font-weight:800;font-size:17px;color:#0f172a;margin:0 0 12px}
.ctx-muted{color:#64748b;font-size:14px}.ctx-err{color:#be123c;font-weight:600}
.ctx-ok{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:14px;background:#ecfdf5;color:#047857;font-weight:600;margin:8px 0 4px}
.ctx-auth-foot{text-align:center;margin-top:18px}.ctx-auth-foot a{color:#6d28d9;font-weight:700;text-decoration:none}
.ctx-spin-hero{text-align:center;padding:26px 18px;border-radius:24px;background:radial-gradient(circle at 30% 0,#8b5cf6,#4c1d95 70%);color:#fff;box-shadow:0 20px 40px -24px rgba(76,29,149,.9)}
.ctx-spin-hero h1{font-family:var(--es-title,'Plus Jakarta Sans'),sans-serif;font-weight:800;font-size:clamp(24px,5vw,34px);margin:0 0 6px;color:#fff}
.ctx-spin-hero p{opacity:.9;margin:0}
.ctx-spin-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.ctx-spin-stats span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:700;font-size:13.5px}
.ctx-wheel-wrap{position:relative;width:min(340px,86vw);aspect-ratio:1;margin:28px auto 18px}
.ctx-wheel{position:absolute;inset:0;border-radius:50%;border:10px solid #fff;box-shadow:0 0 0 4px #ede9fe,0 24px 50px -20px rgba(76,29,149,.7);overflow:hidden}
.ctx-slice-label{position:absolute;left:50%;top:50%;width:0;height:0;display:flex;justify-content:center}
.ctx-slice-label b{position:absolute;transform:translate(-50%,-120px);white-space:nowrap;color:#fff;font-weight:800;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
@media (max-width:380px){.ctx-slice-label b{transform:translate(-50%,-100px);font-size:11.5px}}
.ctx-pointer{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:28px solid #f59e0b;z-index:3;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.ctx-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;border:5px solid #fff;background:linear-gradient(135deg,#6d28d9,#a78bfa);color:#fff;font-weight:900;letter-spacing:.06em;cursor:pointer;z-index:2;box-shadow:0 10px 24px -8px rgba(76,29,149,.9)}
.ctx-hub:disabled{cursor:not-allowed;filter:grayscale(.3)}
.ctx-spin-cta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.ctx-prizes{display:flex;flex-wrap:wrap;gap:8px}.ctx-prizes span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#f8f7fc;font-weight:600;font-size:14px}.ctx-prizes i{width:12px;height:12px;border-radius:4px}
.ctx-list{list-style:none;margin:0;padding:0}.ctx-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed #eee9fb}.ctx-list li:last-child{border-bottom:0}
.ctx-list b{display:block;color:#0f172a}.ctx-list small{color:#94a3b8}
.ctx-dot{width:10px;height:10px;border-radius:50%;flex:none}.ctx-dot.green{background:#10b981}.ctx-dot.grey{background:#cbd5e1}
.ctx-modal{position:fixed;inset:0;z-index:1250;background:rgba(15,10,40,.5);display:grid;place-items:center;padding:16px;animation:cp-in .2s ease}
.ctx-modal-card{background:#fff;border-radius:24px;padding:26px 22px;text-align:center;width:min(360px,100%);box-shadow:0 30px 60px -20px rgba(15,23,42,.5);animation:cp-pop .3s var(--cp-ease)}
.ctx-modal-ic{font-size:48px}.ctx-modal-card h2{font-weight:800;margin:6px 0;color:#0f172a}.ctx-modal-card p{color:#475569;margin-bottom:16px}
.ctx-spin-hero p{color:rgba(255,255,255,.9)!important}

/* Miko Bazar 2026-11-03: anime mascot logo needs more height than the 40px cap */
html:root body .header .logo-img { max-height: 52px !important; width: auto !important; }
@media (max-width: 359px) { html:root body .header .logo-img { max-height: 42px !important; } }