/* Shared cart drawer + checkout popup (cart.js), used by every shop page. */

.ct-overlay{
  position:fixed; inset:0; z-index:700; display:flex; justify-content:flex-end;
  background:rgba(15,27,61,0); visibility:hidden; pointer-events:none;
  transition:background .3s ease, visibility 0s linear .3s;
}
.ct-overlay.open{ background:rgba(15,27,61,.45); visibility:visible; pointer-events:auto; transition:background .3s ease; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }

.ct-drawer{
  width:min(430px, 100vw); height:100%; background:#F6F8FF; display:flex; flex-direction:column;
  border-radius:26px 0 0 26px; overflow:hidden; box-shadow:-24px 0 60px -20px rgba(15,27,61,.45);
  transform:translateX(105%); transition:transform .42s cubic-bezier(.2,.9,.25,1.1);
  font-family:'Nunito Sans', sans-serif; color:#0F1B3D;
}
.ct-overlay.open .ct-drawer{ transform:none; }
@media (max-width:520px){ .ct-drawer{ border-radius:0; } }

/* ---------- header ---------- */
.ct-head{
  position:relative; padding:18px 18px 16px; color:#fff; overflow:hidden; flex-shrink:0;
  background:linear-gradient(120deg, #2F5FE0 0%, #4A6FF0 45%, #7B5CFF 100%);
}
.ct-head::before, .ct-head::after{
  content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none;
}
.ct-head::before{ width:160px; height:160px; right:-40px; top:-70px; }
.ct-head::after{ width:90px; height:90px; left:38%; bottom:-60px; }
.ct-head-row{ position:relative; display:flex; align-items:center; gap:10px; z-index:1; }
.ct-head-ico{ font-size:26px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.ct-head-ico.wiggle{ animation:ctWiggle .6s ease; }
.ct-title{ font:800 21px 'Baloo 2', sans-serif; line-height:1; }
.ct-sub{ font-size:12px; font-weight:700; opacity:.85; margin-top:3px; }
.ct-close{
  margin-left:auto; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.2); color:#fff; font-size:15px; font-weight:800;
  transition:background .15s ease, transform .2s ease;
}
.ct-close:hover{ background:rgba(255,255,255,.32); transform:rotate(90deg); }

/* ---------- scroll area ---------- */
.ct-scroll{ flex:1; overflow-y:auto; padding:14px 14px 8px; overscroll-behavior:contain; }
.ct-scroll::-webkit-scrollbar{ width:6px; }
.ct-scroll::-webkit-scrollbar-thumb{ background:#CBD6F5; border-radius:6px; }

.ct-game{ display:flex; align-items:center; gap:6px; margin:4px 2px 8px; font:800 11.5px 'Nunito Sans', sans-serif; color:#6B7A99; text-transform:uppercase; letter-spacing:.4px; }
.ct-game::after{ content:''; flex:1; height:1px; background:#DCE4FA; }

.ct-item{
  position:relative; display:flex; align-items:center; gap:11px; padding:10px; margin-bottom:9px;
  background:#fff; border:1px solid #E1E8FB; border-radius:16px;
  box-shadow:0 6px 16px -12px rgba(47,95,224,.45);
  transition:transform .2s ease, box-shadow .2s ease, opacity .22s ease;
}
.ct-item:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -14px rgba(47,95,224,.6); }
.ct-item.ct-in{ animation:ctSlideIn .45s cubic-bezier(.2,.9,.25,1.2) both; }
.ct-item.ct-out{ opacity:0; transform:translateX(40px) scale(.96); }
.ct-thumb{
  width:58px; height:58px; flex-shrink:0; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 25%, #FFFFFF 0%, #E8EEFF 70%); font-size:26px; overflow:hidden;
}
.ct-thumb img{ width:100%; height:100%; object-fit:contain; }
.ct-info{ flex:1; min-width:0; }
.ct-name{ font:800 14px 'Baloo 2', sans-serif; line-height:1.2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ct-unit{ font-size:11px; font-weight:700; color:#6B7A99; margin-top:1px; }
.ct-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.ct-qty{ display:inline-flex; align-items:center; background:#F0F4FF; border-radius:999px; padding:2px; }
.ct-qty button{
  width:26px; height:26px; border-radius:50%; border:none; cursor:pointer; background:#fff; color:#2F5FE0;
  font-weight:900; font-size:15px; line-height:1; box-shadow:0 2px 6px -2px rgba(47,95,224,.4);
  transition:transform .12s ease, background .12s ease;
}
.ct-qty button:hover:not(:disabled){ transform:scale(1.12); background:#2F5FE0; color:#fff; }
.ct-qty button:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.ct-qty span{ min-width:28px; text-align:center; font-weight:900; font-size:13px; }
.ct-qty span.bump{ animation:ctBump .3s ease; }
.ct-line{ font:800 15px 'Baloo 2', sans-serif; color:#0F1B3D; }
.ct-remove{
  position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; border:none; cursor:pointer;
  background:transparent; color:#A3AFCB; font-size:12px; font-weight:900; transition:background .15s ease, color .15s ease;
}
.ct-remove:hover{ background:#FFE8E8; color:#E8412C; }
.ct-item.locked{ background:linear-gradient(135deg, #FFF8EE, #FFF1E0); border-color:#FFD9A8; }
.ct-item.locked .ct-thumb{ background:radial-gradient(circle at 30% 25%, #fff, #FFE3C2); }
.ct-free{ font:800 11px 'Nunito Sans', sans-serif; color:#fff; background:linear-gradient(135deg, #FF9A52, #FF6A2B); padding:3px 9px; border-radius:999px; }
.ct-lock{ font-size:11px; font-weight:800; color:#C4661C; }

/* empty */
.ct-empty{ text-align:center; padding:34px 10px 16px; }
.ct-empty-ico{ font-size:62px; display:inline-block; animation:ctFloat 2.6s ease-in-out infinite; }
.ct-empty h4{ font:800 19px 'Baloo 2', sans-serif; margin-top:8px; }
.ct-empty p{ font-size:12.5px; font-weight:700; color:#6B7A99; margin-top:3px; }
.ct-empty button{
  margin-top:14px; border:none; cursor:pointer; padding:10px 20px; border-radius:999px; color:#fff;
  background:linear-gradient(135deg, #2F5FE0, #7B5CFF); font:800 13.5px 'Baloo 2', sans-serif;
  box-shadow:0 10px 22px -10px rgba(47,95,224,.8);
}

/* ---------- reward cards ---------- */
.ct-rewards{ display:flex; flex-direction:column; gap:8px; margin:6px 0 10px; }
.ct-rw{
  position:relative; display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:16px; cursor:pointer;
  background:#fff; border:1.5px solid #E1E8FB; transition:transform .15s ease, border-color .15s ease, box-shadow .2s ease;
  text-align:left; width:100%; font-family:inherit; color:inherit;
}
.ct-rw:hover{ transform:translateY(-1px); }
.ct-rw-ico{ width:38px; height:38px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; background:#F0F4FF; }
.ct-rw-txt{ flex:1; min-width:0; }
.ct-rw-title{ display:block; font:800 13.5px 'Baloo 2', sans-serif; line-height:1.15; }
.ct-rw-sub{ display:block; font-size:11.5px; font-weight:700; color:#6B7A99; margin-top:1px; }
.ct-rw-side{ font:800 13px 'Baloo 2', sans-serif; white-space:nowrap; }

/* ready & selected: glowing animated border */
.ct-rw.on{
  border-color:transparent; color:#fff;
  background:linear-gradient(120deg, #FF7A29, #FF4F8B, #7B5CFF, #FF7A29); background-size:300% 100%;
  animation:ctFlow 6s linear infinite; box-shadow:0 12px 26px -14px rgba(255,79,139,.9);
}
.ct-rw.on .ct-rw-ico{ background:rgba(255,255,255,.22); }
.ct-rw.on .ct-rw-sub{ color:rgba(255,255,255,.9); }
.ct-rw.on::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  background-size:250% 100%; animation:ctShine 2.8s ease-in-out infinite;
}
.ct-switch{ width:38px; height:22px; border-radius:999px; background:#D5DDF3; position:relative; flex-shrink:0; transition:background .2s ease; }
.ct-switch::after{ content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2); transition:transform .25s cubic-bezier(.3,1.4,.5,1); }
.ct-rw.on .ct-switch, .ct-switch.on{ background:rgba(255,255,255,.35); }
.ct-switch.on{ background:#22C55E; }
.ct-rw.on .ct-switch::after, .ct-switch.on::after{ transform:translateX(16px); }

/* progress toward the $2 minimum */
.ct-rw.progress{ cursor:default; background:#FFFBF2; border-color:#FFE2B8; }
.ct-rw.progress .ct-rw-ico{ background:#FFEBCC; }
.ct-bar{ height:7px; border-radius:99px; background:#FFE7C7; margin-top:6px; overflow:hidden; }
.ct-bar i{
  display:block; height:100%; border-radius:inherit; transition:width .5s cubic-bezier(.2,.9,.25,1);
  background:repeating-linear-gradient(-45deg, #FF9A52 0 8px, #FF7A29 8px 16px); background-size:22px 22px; animation:ctStripes .8s linear infinite;
}

/* used today: countdown */
.ct-rw.cooldown{ background:#F3F5FB; border-color:#E1E6F3; }
.ct-rw.cooldown .ct-rw-ico{ background:#E6EAF5; }
.ct-rw.cooldown .ct-rw-side{ color:#2F5FE0; }

.ct-rw.login{ background:linear-gradient(135deg, #EEF3FF, #F6EEFF); border-color:#D9DFFF; }

/* wallet + code */
.ct-box{ background:#fff; border:1px solid #E1E8FB; border-radius:16px; padding:10px 12px; margin-bottom:8px; }
.ct-wallet{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.ct-wallet b{ color:#16A34A; }
.ct-code-toggle{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; cursor:pointer; font:800 13px 'Nunito Sans', sans-serif; color:#0F1B3D; padding:0; }
.ct-code-toggle .chev{ margin-left:auto; transition:transform .2s ease; color:#6B7A99; }
.ct-code-toggle.open .chev{ transform:rotate(180deg); }
.ct-code-body{ display:none; margin-top:9px; }
.ct-code-body.open{ display:block; animation:ctFade .25s ease; }
.ct-code-row{ display:flex; gap:8px; }
.ct-code-row input{
  flex:1; min-width:0; border:1.5px solid #D7E3FF; border-radius:11px; padding:9px 12px;
  font:700 13px 'Baloo 2', sans-serif; text-transform:uppercase; letter-spacing:.5px; outline:none; transition:border-color .15s ease;
}
.ct-code-row input:focus{ border-color:#2F5FE0; }
.ct-code-row button{ border:none; border-radius:11px; padding:0 16px; cursor:pointer; color:#fff; background:#0F1B3D; font:800 13px 'Nunito Sans', sans-serif; }
.ct-code-row button:disabled{ opacity:.6; }
#promoMsg{ font-size:11.5px; font-weight:700; margin-top:6px; }
.ct-chip{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; background:#DCFCE7; color:#166534; font-size:11.5px; font-weight:900; padding:3px 6px 3px 10px; border-radius:999px; }
.ct-chip button{ border:none; background:rgba(22,101,52,.15); color:#166534; width:18px; height:18px; border-radius:50%; cursor:pointer; font-size:10px; font-weight:900; }

/* summary */
.ct-sum{ background:#fff; border:1px solid #E1E8FB; border-radius:16px; padding:10px 14px; }
.ct-sum-row{ display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:#4A5878; padding:3px 0; }
.ct-sum-row.green{ color:#16A34A; }
.ct-sum-row.small{ font-size:12px; color:#8A96B3; }
.ct-note{ font-size:10.5px; color:#8A96B3; font-weight:700; text-align:right; margin-top:4px; }

/* ---------- sticky bottom ---------- */
.ct-foot{ flex-shrink:0; padding:12px 14px 16px; background:#fff; border-top:1px solid #E6ECFA; box-shadow:0 -12px 24px -20px rgba(15,27,61,.35); }
.ct-total-row{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:10px; }
.ct-total-label{ font-size:12px; font-weight:800; color:#6B7A99; }
.ct-total{ font:800 26px 'Baloo 2', sans-serif; line-height:1; }
.ct-save{ display:inline-block; margin-top:4px; font-size:11px; font-weight:900; color:#16A34A; background:#DCFCE7; padding:2px 8px; border-radius:999px; animation:ctPop .35s ease both; }
.ct-go{
  position:relative; overflow:hidden; width:100%; border:none; cursor:pointer; padding:15px; border-radius:16px; color:#fff;
  background:linear-gradient(135deg, #FF7A29 0%, #FF4F8B 100%); font:800 16px 'Baloo 2', sans-serif; letter-spacing:.2px;
  box-shadow:0 14px 28px -14px rgba(255,90,90,.95); transition:transform .15s ease, box-shadow .15s ease;
}
.ct-go:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 18px 32px -14px rgba(255,90,90,1); }
.ct-go:active:not(:disabled){ transform:translateY(0) scale(.99); }
.ct-go::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation:ctSweep 3.2s ease-in-out infinite;
}
.ct-go:disabled{ background:#C9D2E8; box-shadow:none; cursor:not-allowed; }
.ct-go:disabled::after{ display:none; }
.ct-trust{ display:flex; justify-content:center; gap:14px; margin-top:9px; font-size:10.5px; font-weight:800; color:#8A96B3; }

/* ---------- daily countdown popup ---------- */
.ct-pop-wrap{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,27,61,.55); animation:ctFade .2s ease; }
.ct-pop{
  position:relative; width:100%; max-width:340px; text-align:center; padding:26px 22px 22px; border-radius:26px; color:#fff; overflow:hidden;
  background:linear-gradient(150deg, #2F5FE0, #7B5CFF 60%, #FF4F8B); box-shadow:0 30px 60px -20px rgba(15,27,61,.7);
  animation:ctPopIn .45s cubic-bezier(.2,.9,.25,1.25) both; font-family:'Nunito Sans', sans-serif;
}
.ct-pop-clock{ font-size:48px; display:inline-block; animation:ctTick 1s steps(2) infinite; }
.ct-pop h4{ font:800 20px 'Baloo 2', sans-serif; margin-top:4px; }
.ct-pop p{ font-size:12.5px; font-weight:700; opacity:.9; margin-top:4px; line-height:1.5; }
.ct-digits{ display:flex; justify-content:center; gap:8px; margin:16px 0 6px; }
.ct-digit{ min-width:70px; padding:10px 6px 8px; border-radius:16px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); }
.ct-digit b{ display:block; font:800 32px 'Baloo 2', sans-serif; line-height:1; }
.ct-digit span{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; opacity:.85; }
.ct-pop button{ margin-top:14px; border:none; cursor:pointer; padding:11px 26px; border-radius:999px; background:#fff; color:#2F5FE0; font:800 14px 'Baloo 2', sans-serif; }

/* ---------- toast + flying picture ---------- */
.ct-toast{
  position:fixed; left:50%; bottom:24px; z-index:9999; display:flex; align-items:center; gap:10px; max-width:92vw;
  background:#0F1B3D; color:#fff; font-weight:800; font-size:13.5px; padding:10px 12px 10px 18px; border-radius:999px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45); transform:translate(-50%, 140%); opacity:0;
  transition:transform .35s cubic-bezier(.2,.9,.25,1.2), opacity .25s ease; font-family:'Nunito Sans', sans-serif;
}
.ct-toast.show{ transform:translate(-50%, 0); opacity:1; }
.ct-toast button{ border:none; cursor:pointer; background:linear-gradient(135deg, #FF7A29, #FF4F8B); color:#fff; font-weight:900; font-size:12px; padding:7px 12px; border-radius:999px; white-space:nowrap; }
.ct-toast:not(.has-btn){ padding-right:18px; }
.ct-fly{ position:fixed; z-index:9998; pointer-events:none; object-fit:contain; border-radius:14px; }
.cart-count.ct-bump, .ct-head-ico.ct-bump{ animation:ctBump .45s cubic-bezier(.3,1.6,.5,1); }
.seller-cart.ct-added{ background:#16A34A !important; color:#fff !important; }

/* ---------- checkout popup ---------- */
/* The overlay itself scrolls, so the PayPal card form (an iframe) can grow
   and the mouse wheel scrolls the popup instead of the page behind it. */
#checkoutModal.ct-co-overlay{ z-index:710; overflow-y:auto; overscroll-behavior:contain; align-items:flex-start; padding:24px 16px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
#checkoutModal.open .ct-co{ animation:ctPopIn .4s cubic-bezier(.2,.9,.25,1.15) both; }
#checkoutModal .modal-box.ct-co{ margin:auto; max-width:440px; padding:0; border-radius:26px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(15,27,61,.6); font-family:'Nunito Sans', sans-serif; }
.ct-co-x{ position:absolute; top:12px; right:12px; z-index:3; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.22); color:#fff; font-size:14px; font-weight:900; transition:transform .2s ease, background .15s ease; }
.ct-co-x:hover{ transform:rotate(90deg); background:rgba(255,255,255,.35); }
#checkoutSuccess.show ~ .ct-co-x, .ct-co:has(#checkoutSuccess.show) .ct-co-x{ background:#EEF2FF; color:#6B7A99; }

.ct-co-head{ position:relative; overflow:hidden; text-align:center; color:#fff; padding:22px 20px 18px;
  background:linear-gradient(135deg, #2F5FE0 0%, #6A5CFF 55%, #FF4F8B 100%); }
.ct-co-orbs i{ position:absolute; border-radius:50%; background:rgba(255,255,255,.13); animation:ctFloat 6s ease-in-out infinite; }
.ct-co-orbs i:nth-child(1){ width:140px; height:140px; left:-50px; top:-60px; }
.ct-co-orbs i:nth-child(2){ width:90px; height:90px; right:-20px; bottom:-30px; animation-delay:-2s; }
.ct-co-orbs i:nth-child(3){ width:40px; height:40px; right:70px; top:16px; animation-delay:-4s; }
.ct-co-head > *:not(.ct-co-orbs){ position:relative; }
.ct-co-badge{ display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.2); }
.ct-co-title{ font:800 19px 'Baloo 2', sans-serif; margin-top:8px; }
.ct-co-amount{ font:800 44px 'Baloo 2', sans-serif; line-height:1; margin-top:2px; text-shadow:0 6px 18px rgba(0,0,0,.18); }
.ct-co-meta{ font-size:12px; font-weight:800; opacity:.95; margin-top:6px; }
.ct-co-save{ display:inline-block; margin-left:4px; padding:2px 8px; border-radius:999px; background:#fff; color:#16A34A; font-size:11px; }
.ct-co-steps{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; font-size:11px; font-weight:800; }
.ct-co-steps span{ display:flex; align-items:center; gap:5px; opacity:.7; }
.ct-co-steps span b{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.25); font-size:10.5px; }
.ct-co-steps span.done, .ct-co-steps span.now{ opacity:1; }
.ct-co-steps span.done b{ background:#22C55E; }
.ct-co-steps span.now b{ background:#fff; color:#5B4CF0; box-shadow:0 0 0 4px rgba(255,255,255,.3); animation:ctPulse 1.6s ease-in-out infinite; }
.ct-co-steps i{ width:22px; height:2px; border-radius:2px; background:rgba(255,255,255,.35); }
.ct-co-steps i.done{ background:#22C55E; }

.ct-co-body{ padding:16px 18px 18px; background:#fff; }
.ct-co-label{ font-size:11px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; color:#8A96B3; margin:14px 0 7px; }

.ct-co-items{ border:1px solid #E1E8FB; border-radius:16px; background:#F8FAFF; }
.ct-co-items summary{ list-style:none; cursor:pointer; display:flex; align-items:center; padding:11px 14px; font-size:13px; font-weight:800; }
.ct-co-items summary::-webkit-details-marker{ display:none; }
.ct-co-items summary .chev{ margin-left:auto; color:#6B7A99; transition:transform .2s ease; }
.ct-co-items[open] summary .chev{ transform:rotate(180deg); }
#ctCoItems{ padding:0 12px 10px; animation:ctFade .25s ease; }
.ct-co-item{ display:flex; align-items:center; gap:10px; padding:6px 2px; font-size:12.5px; font-weight:700; }
.ct-co-thumb{ width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #E1E8FB; font-size:17px; overflow:hidden; }
.ct-co-thumb img{ width:100%; height:100%; object-fit:contain; }
.ct-co-iname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-co-iname em{ font-style:normal; color:#6B7A99; }
.ct-co-rows{ border-top:1px dashed #D7E0F7; margin-top:6px; padding-top:6px; }
.ct-co-row{ display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:#4A5878; padding:2px 2px; }
.ct-co-row.green{ color:#16A34A; }
.ct-co-row.small{ color:#8A96B3; }
.ct-co-row.total{ font-size:13.5px; color:#0F1B3D; margin-top:2px; }

.ct-co-who{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; background:linear-gradient(135deg, #F2F6FF, #F7F2FF); border:1px solid #DDE5FB; }
.ct-co-who img{ width:46px; height:46px; border-radius:50%; background:#E4E9F7; border:3px solid #fff; box-shadow:0 4px 12px -4px rgba(47,95,224,.6); }
.ct-co-who-name{ font:800 15px 'Baloo 2', sans-serif; line-height:1.1; }
.ct-co-who-handle{ font-size:11.5px; font-weight:700; color:#6B7A99; }
.ct-co-ok{ font-size:10.5px; font-weight:900; color:#16A34A; background:#DCFCE7; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.ct-co-missing{ padding:10px 12px; border-radius:14px; background:#FFF1F0; color:#C0392B; font-size:12.5px; font-weight:700; line-height:1.5; }
.ct-co-missing a{ color:#2F5FE0; font-weight:900; }
.ct-co-hint{ font-size:11px; font-weight:600; color:#8A96B3; margin-top:6px; }

.ct-co-note{ display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding:11px 12px; border-radius:16px; background:#FFF8EC; border:1px solid #FFE3B5; font-size:12.5px; color:#7A4B00; }
.ct-co-note b{ font-weight:900; }
.ct-co-note-ico{ font-size:18px; line-height:1; }
.ct-co-note-more{ display:none; font-size:11.5px; font-weight:600; line-height:1.55; margin-top:4px; }
.ct-co-note.open .ct-co-note-more{ display:block; animation:ctFade .25s ease; }
.ct-co-more{ border:none; background:#FFE7BF; color:#7A4B00; font-size:11px; font-weight:900; padding:4px 10px; border-radius:999px; cursor:pointer; }
.ct-co-warn{ margin-top:10px; padding:12px 14px; border-radius:16px; background:#FFF4E5; border:1px solid #FFD79A; font-size:11.5px; font-weight:600; line-height:1.6; color:#0F1B3D; }
.ct-co-error{ margin-top:12px; padding:10px 12px; border-radius:12px; background:#FFF1F0; color:#C0392B; font-size:12.5px; font-weight:800; animation:ctShake .4s ease; }
.ct-co-pay{ min-height:50px; }
.ct-co-processing{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; font-size:12.5px; font-weight:800; color:#2F5FE0; }
.ct-spin{ width:16px; height:16px; border-radius:50%; border:2.5px solid #C9D6FB; border-top-color:#2F5FE0; animation:ctRotate .8s linear infinite; }
.ct-co-trust{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 12px; margin-top:12px; padding-top:12px; border-top:1px solid #EEF2FB; font-size:10.5px; font-weight:800; color:#8A96B3; }

.ct-success{ position:relative; overflow:hidden; padding:34px 22px 28px !important; }
.ct-success > :not(.ct-confetti){ position:relative; z-index:1; }
.ct-success h3{ font:800 22px 'Baloo 2', sans-serif; }
.ct-success h3, .ct-success p{ text-shadow:0 0 6px #fff, 0 0 12px #fff; }
.ct-success .big{ display:inline-block; font-size:54px !important; animation:ctPopIn .6s cubic-bezier(.2,.9,.25,1.4) both; }
.ct-success-btn{ display:inline-block; margin-top:12px; padding:12px 22px; border-radius:999px; color:#fff; text-decoration:none; font:800 14px 'Baloo 2', sans-serif;
  background:linear-gradient(135deg, #2F5FE0, #7B5CFF); box-shadow:0 12px 24px -12px rgba(47,95,224,.9); }
.ct-confetti{ position:absolute; top:-10px; width:8px; height:14px; border-radius:2px; opacity:0; animation:ctConfetti 1.8s ease-out forwards; }

/* tip picker inside the new popup */
#checkoutModal .tp-box{ border-radius:16px; }

/* ---------- info popup (spin check etc.) ---------- */
.ct-info-pop p.ct-info-big{ font:800 15px 'Baloo 2', sans-serif; opacity:1; margin-top:12px; }
.ct-info-bar{ height:10px; border-radius:99px; background:rgba(255,255,255,.22); margin:14px 4px 4px; overflow:hidden; }
.ct-info-bar i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #FFE27A, #FFB238); transition:width .8s cubic-bezier(.2,.9,.25,1); }
.ct-info-nums{ display:flex; justify-content:space-between; font-size:11px; font-weight:800; opacity:.85; padding:0 4px; }

@keyframes ctPulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(255,255,255,.3); } 50%{ box-shadow:0 0 0 7px rgba(255,255,255,.12); } }
@keyframes ctRotate{ to{ transform:rotate(360deg); } }
@keyframes ctShake{ 0%,100%{ transform:none; } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }

@keyframes ctSlideIn{ from{ opacity:0; transform:translateX(30px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes ctBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
@keyframes ctWiggle{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-14deg); } 75%{ transform:rotate(12deg); } }
@keyframes ctFloat{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-10px) rotate(3deg); } }
@keyframes ctFlow{ to{ background-position:300% 0; } }
@keyframes ctShine{ 0%{ background-position:150% 0; } 60%,100%{ background-position:-100% 0; } }
@keyframes ctStripes{ to{ background-position:22px 0; } }
@keyframes ctSweep{ 0%,55%{ left:-60%; } 100%{ left:130%; } }
@keyframes ctFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ctPop{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:none; } }
@keyframes ctPopIn{ from{ opacity:0; transform:scale(.7) translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes ctTick{ 0%{ transform:rotate(-8deg); } 100%{ transform:rotate(8deg); } }
@keyframes ctConfetti{ 0%{ opacity:1; transform:translateY(0) rotate(0); } 100%{ opacity:0; transform:translateY(260px) rotate(540deg); } }

@media (prefers-reduced-motion: reduce){
  .ct-drawer, .ct-item, .ct-toast{ transition:none; }
  .ct-item.ct-in, .ct-empty-ico, .ct-co-orbs i, .ct-co-steps span.now b, #checkoutModal.open .ct-co, .ct-rw.on, .ct-rw.on::after, .ct-bar i, .ct-go::after, .ct-pop, .ct-pop-clock, .ct-confetti{ animation:none; }
}

/* ---------- VIP ---------- */
.ct-vip-chip{ display:inline-flex; align-items:center; margin-left:2px; padding:2px 8px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(135deg, #FFD54A, #FF9A1F); color:#5A3300; font:900 10.5px 'Nunito Sans', sans-serif; letter-spacing:.3px;
  box-shadow:0 3px 10px -3px rgba(255,154,31,.9); animation:ctPop .35s ease both; }
.perk-btn.ct-vip-ready{ background:linear-gradient(135deg, #FFB800, #FF4F8B) !important; animation:ctPulse 1.6s ease-in-out infinite; }

/* VIP subscribe popup */
.ct-vip-wrap{ overflow-y:auto; align-items:flex-start; padding:24px 16px; }
.ct-vip-sheet{ position:relative; width:100%; max-width:420px; margin:auto; border-radius:26px; overflow:hidden; background:#fff;
  box-shadow:0 40px 80px -30px rgba(15,27,61,.6); animation:ctPopIn .4s cubic-bezier(.2,.9,.25,1.15) both; font-family:'Nunito Sans', sans-serif; color:#0F1B3D; }
.ct-vip-top{ position:relative; overflow:hidden; text-align:center; color:#5A3300; padding:24px 20px 18px;
  background:linear-gradient(135deg, #FFE27A 0%, #FFB800 50%, #FF7A29 100%); }
.ct-vip-top > *:not(.ct-co-orbs){ position:relative; }
.ct-vip-top .ct-co-orbs i{ background:rgba(255,255,255,.25); }
.ct-vip-sheet .ct-co-x{ background:rgba(90,51,0,.15); color:#5A3300; }
.ct-vip-crown{ font-size:46px; line-height:1; animation:ctFloat 2.6s ease-in-out infinite; }
.ct-vip-top .ct-co-amount{ text-shadow:0 4px 12px rgba(255,255,255,.4); }
.ct-vip-top .ct-co-amount small{ font-size:16px; margin-left:2px; }
.ct-vip-perk{ display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px; border-radius:14px; background:#FFF9EC; border:1px solid #FFE7B0; }
.ct-vip-perk > span{ font-size:22px; }
.ct-vip-perk b{ display:block; font-size:13px; }
.ct-vip-perk small{ display:block; font-size:11.5px; font-weight:700; color:#8A6A2E; }
.ct-vip-fine{ margin-top:12px; font-size:10.5px; font-weight:600; color:#8A96B3; line-height:1.55; text-align:center; }
.ct-vip-sheet .ct-success{ padding:40px 22px 30px !important; }

/* ---------- Explore Shop game buttons + search (all shop pages) ---------- */
#mainSellerTabs{ gap:10px; flex-wrap:wrap; }
#mainSellerTabs .seller-tab{
  font:700 14px 'Baloo 2', sans-serif; padding:9px 18px; border-radius:999px; cursor:pointer;
  background:#fff; color:#0F1B3D; border:1.5px solid #DCE5FB; box-shadow:0 6px 14px -10px rgba(47,95,224,.55);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
#mainSellerTabs .seller-tab:hover{ transform:translateY(-2px); border-color:#2F5FE0; box-shadow:0 10px 20px -12px rgba(47,95,224,.8); }
#mainSellerTabs .seller-tab.active{
  color:#fff; border-color:transparent; background:linear-gradient(135deg, #2F5FE0, #6E5BFF);
  box-shadow:0 12px 24px -12px rgba(47,95,224,.95);
}
.inline-search-input{ transition:border-color .15s ease, box-shadow .15s ease; }
.inline-search-input:focus{ border-color:#2F5FE0 !important; box-shadow:0 0 0 4px rgba(47,95,224,.14) !important; }
.ct-noresults{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 10px; text-align:center; font-family:'Nunito Sans', sans-serif; }
.ct-noresults-ico{ font-size:26px; }
.ct-noresults b{ font-size:13.5px; color:#0F1B3D; }
.ct-noresults span{ font-size:12.5px; font-weight:700; color:#6B7A99; }
.ct-noresults a{ margin-top:8px; padding:8px 16px; border-radius:999px; text-decoration:none; color:#fff; font:800 13px 'Nunito Sans', sans-serif;
  background:linear-gradient(135deg, #2F5FE0, #6E5BFF); }

/* feedback popup */
.ct-fb{ position:relative; width:100%; max-width:380px; text-align:center; padding:26px 22px 22px; border-radius:24px; background:#fff;
  font-family:'Nunito Sans', sans-serif; color:#0F1B3D; box-shadow:0 30px 60px -20px rgba(15,27,61,.6); animation:ctPopIn .35s cubic-bezier(.2,.9,.25,1.2) both; }
.ct-fb.bug{ border-top:6px solid #FF6A3D; }
.ct-fb.wish{ border-top:6px solid #5B5BFF; }
.ct-fb .ct-co-x{ background:#F1F4FB; color:#6B7A99; }
.ct-fb-ico{ font-size:40px; }
.ct-fb h4{ font:800 20px 'Baloo 2', sans-serif; margin-top:4px; }
.ct-fb p{ font-size:13px; font-weight:700; color:#6B7A99; margin-top:4px; line-height:1.5; }
.ct-fb textarea{ width:100%; margin-top:14px; padding:12px; border-radius:14px; border:1.5px solid #D7E3FF; font:600 13.5px 'Nunito Sans', sans-serif; resize:vertical; outline:none; }
.ct-fb textarea:focus{ border-color:#2F5FE0; }
.ct-fb-err{ min-height:16px; margin-top:6px; font-size:12px; font-weight:800; color:#C0392B; }
.ct-fb-send{ margin-top:6px; width:100%; padding:13px; border:none; border-radius:999px; cursor:pointer; color:#fff; font:800 15px 'Baloo 2', sans-serif;
  background:linear-gradient(135deg, #2F5FE0, #6E5BFF); box-shadow:0 12px 24px -12px rgba(47,95,224,.9); }
.ct-fb.bug .ct-fb-send{ background:linear-gradient(135deg, #FF7A29, #FF4F6B); }
.ct-fb-send:disabled{ opacity:.6; }

/* ---------- "Why Shop With BuyRBLX?" perks (all shop pages) ---------- */
.perks.pk-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:1040px; }
@media (max-width:860px){ .perks.pk-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .perks.pk-grid{ grid-template-columns:1fr; } }
.perk-card.pk{
  --pk1:#2F5FE0; --pk2:#6E5BFF; --pkbg:#EEF3FF;
  display:flex; flex-direction:column; overflow:hidden; border-radius:22px; padding:24px 22px 22px;
  border:1px solid #E1E8FB; background:#fff; box-shadow:0 18px 34px -30px rgba(15,27,61,.55);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.perk-card.pk::before{ content:''; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg, var(--pk1), var(--pk2)); }
.perk-card.pk::after{ content:''; position:absolute; right:-40px; top:-40px; width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle, var(--pkbg) 0%, transparent 70%); pointer-events:none; }
.perk-card.pk:hover{ transform:translateY(-4px); border-color:var(--pk1); box-shadow:0 24px 40px -26px rgba(15,27,61,.6); }
.perk-card.pk .perk-icon{ position:relative; z-index:1; width:52px; height:52px; border-radius:16px; font-size:26px;
  background:linear-gradient(135deg, var(--pk1), var(--pk2)); box-shadow:0 10px 20px -10px var(--pk1); }
.perk-card.pk h3{ position:relative; z-index:1; font:800 19px 'Baloo 2', sans-serif; margin-bottom:6px; color:#0F1B3D; }
.perk-card.pk p{ position:relative; z-index:1; flex:1; font-size:13.5px; line-height:1.55; }
.perk-card.pk .perk-tag{ z-index:2; top:18px; right:16px; background:linear-gradient(135deg, var(--pk1), var(--pk2)); letter-spacing:.4px; }
.perk-card.pk .perk-btn, .perk-card.pk .perk-btn-row{ position:relative; z-index:1; margin-top:16px; }
.perk-card.pk .perk-btn{ width:100%; border-radius:999px; padding:12px; font:800 14px 'Baloo 2', sans-serif; color:#fff;
  background:linear-gradient(135deg, var(--pk1), var(--pk2)); box-shadow:0 12px 22px -14px var(--pk1); transition:transform .15s ease; }
.perk-card.pk .perk-btn:hover{ transform:translateY(-2px); filter:none; }
.perk-card.pk .perk-btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.perk-card.pk .perk-btn-row button{ border-radius:999px; padding:11px 8px; font:800 13px 'Baloo 2', sans-serif; }
.perk-card.pk .perk-btn-fill{ background:linear-gradient(135deg, var(--pk1), var(--pk2)); color:#fff; border:none; }
.perk-card.pk .perk-btn-outline{ background:#fff; color:var(--pk1); border:1.5px solid var(--pk1); }
.perk-card.pk.pk-gift{ --pk1:#FF7A29; --pk2:#FF4F8B; --pkbg:#FFE9DE; }
.perk-card.pk.pk-cash{ --pk1:#16A34A; --pk2:#22C55E; --pkbg:#DCFCE7; }
.perk-card.pk.pk-daily{ --pk1:#F59E0B; --pk2:#FF7A29; --pkbg:#FEF3C7; }
.perk-card.pk.pk-spin{ --pk1:#7B5CFF; --pk2:#C056FF; --pkbg:#EDE7FF; }
.perk-card.pk.pk-fast{ --pk1:#2F5FE0; --pk2:#22B8F0; --pkbg:#E0F2FE; }
.perk-card.pk.pk-help{ --pk1:#E0457B; --pk2:#7B5CFF; --pkbg:#FCE7F3; }

/* VIP: wide premium banner under the six perks */
.perk-card.pk-vip{
  grid-column:1 / -1; position:relative; overflow:hidden; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:28px 30px; border-radius:26px; border:none; color:#fff;
  background:linear-gradient(120deg, #1B1446 0%, #3B2A7A 45%, #6A3FD6 100%);
  box-shadow:0 30px 60px -34px rgba(59,42,122,.95);
}
.pk-vip-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 85% 20%, rgba(255,213,74,.35), transparent 40%), radial-gradient(circle at 10% 110%, rgba(255,79,139,.35), transparent 45%);
  animation:pkVipPulse 4s ease-in-out infinite alternate; }
@keyframes pkVipPulse{ from{ opacity:.7; } to{ opacity:1; } }
.pk-vip-left{ position:relative; flex:1 1 360px; }
.pk-vip-right{ position:relative; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; }
.pk-vip-badge{ display:inline-block; padding:5px 12px; border-radius:999px; font:900 11px 'Nunito Sans', sans-serif; letter-spacing:.8px;
  color:#5A3300; background:linear-gradient(135deg, #FFE27A, #FFB800); box-shadow:0 8px 18px -8px rgba(255,184,0,.9); }
.pk-vip h3, .perk-card.pk-vip h3{ font:800 28px 'Baloo 2', sans-serif; margin:10px 0 6px; color:#fff; }
.perk-card.pk-vip h3 small{ font-size:15px; opacity:.8; margin-left:2px; }
.perk-card.pk-vip p{ color:#DCD4FF; font-size:14px; line-height:1.6; font-weight:600; max-width:560px; }
.perk-card.pk-vip p b{ color:#FFE27A; }
.perk-card.pk-vip .perk-btn{ margin:0; padding:15px 28px; border-radius:999px; border:none; cursor:pointer; white-space:nowrap;
  font:800 16px 'Baloo 2', sans-serif; color:#5A3300; background:linear-gradient(135deg, #FFE27A, #FFB800 55%, #FF8A1F);
  box-shadow:0 14px 28px -12px rgba(255,170,40,1); transition:transform .15s ease; }
.perk-card.pk-vip .perk-btn:hover{ transform:translateY(-2px) scale(1.02); filter:none; }
.pk-vip-note{ font-size:11.5px; font-weight:800; color:#BFB3F5; }
@media (max-width:560px){ .perk-card.pk-vip{ padding:24px 20px; } .pk-vip-right{ width:100%; } .perk-card.pk-vip .perk-btn{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .pk-vip-glow{ animation:none; } }

/* cashback card: two buttons always fit */
.perk-card.pk .perk-btn-row{ grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); }
.perk-card.pk .perk-btn-row button{ min-width:0; width:100%; padding:11px 6px; white-space:nowrap; }

/* ---------- search bar (all shop pages) ---------- */
.inline-search-wrap .isw-ico{
  position:absolute; left:7px; top:7px; z-index:2; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:17px; pointer-events:none;
  background:linear-gradient(135deg, #2F5FE0, #7B5CFF); box-shadow:0 8px 16px -8px rgba(47,95,224,.9);
  transition:transform .25s cubic-bezier(.3,1.5,.5,1);
}
.inline-search-wrap:focus-within .isw-ico{ transform:rotate(-12deg) scale(1.08); }
.inline-search-wrap .inline-search-input{
  height:54px; padding:0 20px 0 58px !important; border-radius:999px !important;
  border:2px solid transparent !important; font:700 15px 'Nunito Sans', sans-serif !important; color:#0F1B3D;
  background:linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #C9D6FB, #DCCEFF) border-box !important;
  box-shadow:0 14px 30px -20px rgba(47,95,224,.7) !important;
  transition:box-shadow .2s ease, background .2s ease !important;
}
.inline-search-wrap .inline-search-input::placeholder{ color:#8A96B3; font-weight:600; }
.inline-search-wrap .inline-search-input:hover{
  background:linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #2F5FE0, #7B5CFF) border-box !important;
}
.inline-search-wrap .inline-search-input:focus{
  background:linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #2F5FE0, #7B5CFF, #FF4F8B) border-box !important;
  box-shadow:0 0 0 5px rgba(123,92,255,.14), 0 18px 34px -18px rgba(47,95,224,.9) !important;
}
.inline-search-wrap .inline-search-dropdown{ border-radius:18px !important; border:1px solid #E1E8FB !important; padding:8px !important;
  box-shadow:0 24px 50px -20px rgba(15,27,61,.45) !important; margin-top:10px !important; animation:ctFade .18s ease; }

.pk-vipnote{ display:inline-block; vertical-align:middle; margin-left:6px; padding:2px 8px; border-radius:999px; font:900 10.5px 'Nunito Sans', sans-serif;
  color:#5A3300; background:linear-gradient(135deg, #FFE27A, #FFB800); }

/* ===================== Header (all shop pages) ===================== */
body > header{
  background:rgba(255,255,255,.84); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  box-shadow:0 1px 0 rgba(15,27,61,.06), 0 12px 30px -20px rgba(20,40,120,.45); padding:12px 5vw;
}
body > header::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, #2F5FE0, #7B5CFF, #FF4F8B, #FF9A1F, #2F5FE0); background-size:200% 100%;
  animation:hdrFlow 8s linear infinite;
}
@keyframes hdrFlow{ to{ background-position:200% 0; } }
.hdr-left{ display:flex; align-items:center; gap:16px; }
.hdr-logo{ display:flex; align-items:center; gap:9px; text-decoration:none; color:#0F1B3D; font:800 22px/1 'Baloo 2', sans-serif; letter-spacing:.2px; }
.hdr-logo img{ width:36px; height:36px; border-radius:11px; box-shadow:0 6px 14px -6px rgba(47,95,224,.7); transition:transform .25s ease; }
.hdr-logo:hover img{ transform:rotate(-8deg) scale(1.06); }
.hdr-logo b{ font-weight:800; }
.hdr-logo span{ background:linear-gradient(135deg, #2F5FE0, #7B5CFF); -webkit-background-clip:text; background-clip:text; color:transparent; }
body > header .select-game-btn{
  background:linear-gradient(135deg, #3D6BFF, #2F5FE0 55%, #5B4BFF); box-shadow:0 10px 22px -10px rgba(47,95,224,.9), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
body > header .select-game-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(47,95,224,1), inset 0 1px 0 rgba(255,255,255,.25); }
body > header nav{ gap:6px; }
body > header nav a{ position:relative; padding:8px 12px; border-radius:10px; opacity:.8; transition:background .15s ease, color .15s ease, opacity .15s ease; }
body > header nav a::after{
  content:''; position:absolute; left:12px; right:12px; bottom:3px; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg, #2F5FE0, #7B5CFF); transform:scaleX(0); transition:transform .2s ease;
}
body > header nav a:hover{ opacity:1; background:#F1F5FF; }
body > header nav a:hover::after{ transform:scaleX(1); }
body > header .header-icons{ gap:8px; }
body > header .header-icons .icon-btn:not(#walletBtn):not(.lc-btn){
  width:38px; height:38px; border-radius:12px; display:inline-grid; place-items:center; font-size:17px;
  background:#F3F6FC; border:1px solid #E6ECF8; transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
body > header .header-icons .icon-btn:not(#walletBtn):not(.lc-btn):hover{ transform:translateY(-2px); background:#EAF0FF; border-color:#C9D7FF; }
body > header .cart-count{ top:-6px; right:-6px; min-width:18px; width:auto; height:18px; padding:0 4px; border-radius:9px; border:2px solid #fff; box-sizing:border-box; }
body > header #walletBtn{
  height:38px; background:linear-gradient(135deg, #EBFBF2, #D5F5E3) !important; border:1px solid #BDEBD1 !important; color:#0E6B3A;
  transition:transform .15s ease;
}
body > header #walletBtn:hover{ transform:translateY(-2px); }
body > header #headerUserBadge{ background:linear-gradient(135deg, #F1F5FF, #ECE8FF) !important; border:1px solid #DCE3FB; transition:transform .15s ease; }
body > header #headerUserBadge:hover{ transform:translateY(-2px); }
.lc-btn{
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:12px; white-space:nowrap;
  background:#F3F6FC; border:1px solid #E6ECF8 !important; font:800 12.5px 'Nunito Sans', sans-serif; color:#0F1B3D; cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.lc-btn:hover{ transform:translateY(-2px); background:#EAF0FF; }
.lc-btn i{ width:4px; height:4px; border-radius:50%; background:#9AA8C7; }
.lc-btn-globe{ font-size:15px; }
@media (max-width:640px){
  .hdr-left{ width:100%; justify-content:space-between; }
  .hdr-left .select-game-wrap{ width:auto; margin:0; order:0; }
  .hdr-left .game-menu{ left:auto; right:0; }
  body > header .header-icons{ flex-wrap:wrap; justify-content:center; width:100%; gap:6px; }
  body > header .header-icons .icon-btn:not(#walletBtn):not(.lc-btn){ width:34px; height:34px; }
  body > header #walletBtn, .lc-btn{ height:34px; }
}
@media (prefers-reduced-motion: reduce){ body > header::before{ animation:none; } }

/* ===================== Language & currency popup ===================== */
.lc-overlay{ position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; padding:18px;
  background:rgba(8,10,28,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lc-overlay.open{ display:flex; animation:lcFade .2s ease; }
@keyframes lcFade{ from{ opacity:0; } }
.lc-box{ position:relative; width:100%; max-width:440px; padding:26px 24px 22px; border-radius:22px; color:#fff; overflow:visible;
  background:linear-gradient(160deg, #23264A, #15162D); border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7); animation:lcPop .32s cubic-bezier(.2,.9,.25,1.2); font-family:'Nunito Sans', sans-serif; }
@keyframes lcPop{ from{ opacity:0; transform:translateY(14px) scale(.96); } }
.lc-glow{ position:absolute; inset:0; border-radius:22px; pointer-events:none; overflow:hidden;
  background:radial-gradient(260px 140px at 15% 0%, rgba(123,92,255,.35), transparent 70%), radial-gradient(220px 120px at 100% 100%, rgba(47,95,224,.28), transparent 70%); }
.lc-box > *:not(.lc-glow){ position:relative; }
.lc-box h3{ margin:0 34px 18px 0; font:800 18px/1.25 'Baloo 2', sans-serif; display:flex; align-items:center; gap:8px; }
.lc-globe{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.08); font-size:18px; }
.lc-x{ position:absolute !important; top:16px; right:16px; width:32px; height:32px; border-radius:10px; border:0; cursor:pointer;
  background:rgba(255,255,255,.08); color:#fff; font-size:14px; transition:background .15s ease, transform .15s ease; }
.lc-x:hover{ background:rgba(255,255,255,.16); transform:rotate(90deg); }
.lc-label{ display:block; margin:0 0 7px; font-size:12.5px; font-weight:800; color:#A9AECF; }
.lc-select{ position:relative; margin-bottom:16px; }
.lc-select.open{ z-index:5; }
.lc-current{ width:100%; display:flex; align-items:center; gap:6px; padding:13px 14px; border-radius:12px; cursor:pointer; text-align:left;
  background:#262A4A; color:#fff; border:1.5px solid rgba(255,255,255,.12); font:700 14.5px 'Nunito Sans', sans-serif; transition:border-color .15s ease, box-shadow .15s ease; }
.lc-current:hover{ border-color:rgba(255,255,255,.28); }
.lc-select.open .lc-current{ border-color:#6E7BFF; box-shadow:0 0 0 4px rgba(110,123,255,.18); }
.lc-caret{ margin-left:auto; color:#A9AECF; transition:transform .2s ease; }
.lc-select.open .lc-caret{ transform:rotate(180deg); }
.lc-list{ position:absolute; left:0; right:0; top:calc(100% + 6px); max-height:250px; overflow-y:auto; padding:6px; border-radius:12px;
  background:#262A4A; border:1px solid rgba(255,255,255,.1); box-shadow:0 18px 40px -12px rgba(0,0,0,.7);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .15s ease, transform .15s ease; }
.lc-select.open .lc-list{ opacity:1; transform:none; pointer-events:auto; }
.lc-opt{ display:flex; align-items:center; gap:6px; padding:11px 12px; border-radius:9px; cursor:pointer; font-size:14px; font-weight:600; color:#E4E6F5; }
.lc-opt:hover{ background:rgba(255,255,255,.07); }
.lc-opt.on{ font-weight:800; color:#fff; background:rgba(110,123,255,.16); }
.lc-check{ margin-left:auto; color:#8FA2FF; font-weight:900; }
.lc-sym{ color:#8FA2FF; font-weight:800; }
.lc-sub{ color:#9CA2C8; font-size:12.5px; font-weight:600; }
.lc-note{ margin:2px 0 16px; font-size:12px; font-weight:600; color:#9CA2C8; line-height:1.5; }
.lc-save{ width:100%; padding:14px; border:0; border-radius:12px; cursor:pointer; color:#fff; font:800 16px 'Baloo 2', sans-serif;
  background:linear-gradient(135deg, #5B6CFF, #7B5CFF); box-shadow:0 12px 26px -10px rgba(110,92,255,.9); transition:transform .15s ease, filter .15s ease; }
.lc-save:hover{ transform:translateY(-1px); filter:brightness(1.08); }

/* Google's translator: keep its bar and tooltips hidden. */
body{ top:0 !important; }
body > .skiptranslate, .goog-te-banner-frame, iframe.skiptranslate, #goog-gt-tt, .goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }

/* ===================== Pay your way ===================== */
.pay2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; max-width:760px; margin:28px auto 0; padding:0 6vw; }
.pay2-card{ position:relative; overflow:hidden; border-radius:22px; padding:24px 24px 22px; color:#fff; isolation:isolate;
  box-shadow:0 22px 40px -22px var(--pc, rgba(0,48,135,.8)); transition:transform .25s ease, box-shadow .25s ease; }
.pay2-card:hover{ transform:translateY(-4px) rotate(-.4deg); }
.pay2-pp{ --pc:rgba(0,48,135,.85); background:linear-gradient(135deg, #003087 0%, #0070E0 65%, #00A1E4 100%); }
.pay2-visa{ --pc:rgba(26,31,113,.85); background:linear-gradient(135deg, #1A1F71 0%, #2B3AB8 60%, #F7B600 160%); }
.pay2-card::after{ content:''; position:absolute; z-index:-1; width:220px; height:220px; right:-70px; top:-90px; border-radius:50%; background:rgba(255,255,255,.12); }
.pay2-shine{ position:absolute; inset:0; z-index:-1; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%);
  background-size:250% 100%; background-position:120% 0; transition:background-position .9s ease; }
.pay2-card:hover .pay2-shine{ background-position:-40% 0; }
.pay2-logo{ display:flex; align-items:center; gap:10px; font:900 30px/1 'Baloo 2', sans-serif; letter-spacing:.3px; }
.pay2-pp .pay2-logo b{ color:#fff; font-style:italic; }
.pay2-pp .pay2-logo i{ color:#9FDBFF; margin-left:-10px; }
.pay2-visa .pay2-logo{ font-style:italic; letter-spacing:1.5px; }
.pay2-chip{ width:34px; height:26px; border-radius:6px; background:linear-gradient(135deg, #FFE7A3, #D4A52A); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.pay2-text{ margin-top:12px; font-size:13.5px; font-weight:600; line-height:1.55; color:rgba(255,255,255,.88); }
.pay2-tag{ display:inline-block; margin-top:14px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.16); font-size:12px; font-weight:800; }
.pay2-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:760px; margin:16px auto 0; padding:0 6vw; }
.pay2-chips span{ padding:7px 13px; border-radius:999px; background:#fff; border:1px solid var(--card-border, #D7E3FF); font-size:12.5px; font-weight:800; color:#33415F; }
@media (max-width:640px){ .pay2{ grid-template-columns:1fr; } }

/* ===================== Safe to use ===================== */
.safe2{ position:relative; overflow:hidden; isolation:isolate; max-width:980px; margin:70px auto 0; padding:40px 30px 30px; border-radius:28px; text-align:center;
  background:linear-gradient(150deg, #0E1A45 0%, #1B2C77 55%, #3A2B8F 100%); color:#fff; box-shadow:0 30px 60px -30px rgba(20,30,90,.8); }
@media (max-width:1040px){ .safe2{ margin-left:5vw; margin-right:5vw; } }
.safe2-glow{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(380px 200px at 10% 0%, rgba(79,140,255,.45), transparent 70%), radial-gradient(360px 220px at 95% 100%, rgba(255,79,139,.3), transparent 70%); }
.safe2-badge{ display:inline-block; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-size:12px; font-weight:800; letter-spacing:.3px; }
.safe2-head h2{ margin:12px 0 0; font:800 clamp(24px, 4vw, 36px)/1.15 'Baloo 2', sans-serif; }
.safe2-head h2 span{ background:linear-gradient(90deg, #7FB2FF, #C59BFF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.safe2-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-top:26px; }
.safe2-tile{ padding:22px 14px 20px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.safe2-tile:hover{ transform:translateY(-5px); background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22); }
.safe2-ico{ width:52px; height:52px; margin:0 auto 12px; border-radius:16px; display:grid; place-items:center; font-size:24px;
  background:linear-gradient(135deg, var(--a), var(--b)); box-shadow:0 12px 22px -10px var(--b); }
.safe2-tile h4{ margin:0; font:800 16px 'Baloo 2', sans-serif; }
.safe2-tile p{ margin:4px 0 0; font-size:12.5px; font-weight:600; color:#B9C4EC; }
.safe2-note{ display:flex; align-items:center; gap:12px; margin-top:18px; padding:14px 18px; border-radius:16px; text-align:left;
  background:rgba(255,255,255,.08); font-size:13.5px; font-weight:600; line-height:1.55; color:#DCE3FF; }
.safe2-note span{ font-size:22px; }
@media (max-width:720px){ .safe2{ padding:30px 16px 18px; } .safe2-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } }

/* ===================== FAQ ===================== */
.faq{ max-width:820px; margin-top:28px; }
.faq-item{ background:#fff; border:1px solid #E1E8F8; border-radius:18px; margin-bottom:12px; overflow:hidden;
  box-shadow:0 10px 24px -20px rgba(20,40,120,.5); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.faq-item:hover{ border-color:#C9D7FF; transform:translateY(-1px); }
.faq-item.open{ border-color:#9DB5FF; box-shadow:0 18px 36px -20px rgba(47,95,224,.55); }
.faq-q{ gap:12px; justify-content:flex-start; padding:16px 18px; color:#0F1B3D; font-size:15.5px; }
.faq-qt{ flex:1; }
.faq-ico{ flex-shrink:0; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:18px; background:#F1F5FF; transition:background .2s ease; }
.faq-item.open .faq-ico{ background:linear-gradient(135deg, #DCE6FF, #E9DFFF); }
.faq-q .chev{ width:30px; height:30px; background:#F1F5FF; color:#2F5FE0; font:800 20px/1 'Nunito Sans', sans-serif; transition:transform .28s ease, background .2s ease, color .2s ease; }
.faq-item.open .faq-q .chev{ transform:rotate(45deg); background:linear-gradient(135deg, #2F5FE0, #7B5CFF); color:#fff; }
.faq-a{ color:#4A5878; font-size:14px; padding:0 18px 0 68px; }
.faq-item.open .faq-a{ padding:0 22px 18px 68px; }
.faq-a b{ color:#0F1B3D; }
.faq-a a{ color:#2F5FE0; font-weight:800; }
@media (max-width:560px){ .faq-a, .faq-item.open .faq-a{ padding-left:18px; } }

/* ===================== Still have questions ===================== */
.help2{ position:relative; overflow:hidden; isolation:isolate; text-align:center; padding:38px 26px 32px; border-radius:26px;
  background:linear-gradient(135deg, #FFF4EA 0%, #FFE9F2 50%, #EEE9FF 100%); border:1px solid #F4DDEA; }
.help2-glow{ position:absolute; z-index:-1; inset:-40% -10% auto auto; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(255,154,31,.3), transparent 65%); }
.help2-emoji{ width:64px; height:64px; margin:0 auto 12px; border-radius:20px; display:grid; place-items:center; font-size:30px;
  background:linear-gradient(135deg, #FFB547, #FF5E8A); box-shadow:0 14px 26px -10px rgba(255,94,138,.8); animation:help2Bob 3s ease-in-out infinite; }
@keyframes help2Bob{ 50%{ transform:translateY(-5px) rotate(-4deg); } }
.help2 h3{ margin:0 0 8px; font:800 24px 'Baloo 2', sans-serif; color:#0F1B3D; }
.help2 p{ margin:0 auto 20px; max-width:440px; color:#5B6787; font-size:14px; font-weight:600; line-height:1.6; }
.help2-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.help2-btn{ display:inline-flex; align-items:center; gap:6px; padding:13px 22px; border-radius:14px; text-decoration:none; font:800 15px 'Baloo 2', sans-serif; transition:transform .15s ease, box-shadow .15s ease; }
.help2-btn:hover{ transform:translateY(-2px); }
.help2-main{ color:#fff; background:linear-gradient(135deg, #FF9A1F, #FF5E3A); box-shadow:0 12px 24px -10px rgba(255,94,58,.9); }
.help2-alt{ color:#2F2A6B; background:#fff; border:1px solid #E2DBFA; box-shadow:0 10px 20px -14px rgba(60,40,140,.5); }
@media (prefers-reduced-motion: reduce){ .help2-emoji{ animation:none; } .pay2-shine{ transition:none; } }

/* ===================== Adopt Me version picker ===================== */
.adm-vars{ display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; margin:8px 14px 2px; padding:4px; border-radius:12px; background:#F1F5FF; }
.adm-var{ padding:6px 0; border:0; border-radius:9px; background:transparent; cursor:pointer; font:800 11.5px 'Nunito Sans', sans-serif; color:#5B6787;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease; }
.adm-var:hover{ color:#0F1B3D; background:#fff; }
.adm-var.on{ color:#fff; background:linear-gradient(135deg, #3D6BFF, #7B5CFF); box-shadow:0 6px 12px -6px rgba(61,107,255,.9); }
.adm-var:nth-child(3).on{ background:linear-gradient(135deg, #12C29A, #3D8BFF); }
.adm-var:nth-child(4).on{ background:linear-gradient(90deg, #FF4F8B, #FFB547, #3DDC97, #3D8BFF, #B05CFF); }
.adm-bump{ display:inline-block; animation:admBump .3s ease; }
@keyframes admBump{ 40%{ transform:scale(1.12); } }

/* ===================== Bundles ===================== */
.bundle-peek{ position:absolute; right:10px; bottom:10px; z-index:2; padding:5px 10px; border-radius:999px; font-size:11px; font-weight:800; color:#fff;
  background:rgba(15,10,40,.7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.bundle-see{ display:block; margin:6px auto 0; padding:5px 12px; border:0; border-radius:999px; cursor:pointer; background:#F3EEFF; color:#6B3FE0; font:800 12px 'Nunito Sans', sans-serif; transition:background .15s ease; }
.bundle-see:hover{ background:#E7DDFF; }
.bv-overlay{ position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(8,10,28,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.bv-overlay.open{ display:flex; animation:lcFade .2s ease; }
.bv-box{ position:relative; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; padding:24px 22px 20px; border-radius:24px; text-align:center;
  background:linear-gradient(160deg, #241B4E, #15122D); color:#fff; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); animation:lcPop .3s cubic-bezier(.2,.9,.25,1.2); }
.bv-x{ position:absolute; top:14px; right:14px; width:32px; height:32px; border:0; border-radius:10px; cursor:pointer; background:rgba(255,255,255,.1); color:#fff; font-size:14px; }
.bv-tag{ display:inline-block; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:800; background:linear-gradient(135deg, #7B5CFF, #FF4F8B); }
.bv-box h3{ margin:10px 0 4px; font:800 24px 'Baloo 2', sans-serif; }
.bv-box p{ margin:0 0 16px; color:#C9C2EE; font-size:14px; font-weight:600; }
.bv-box p b{ color:#FFD54A; }
.bv-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.bv-item{ border-radius:14px; overflow:hidden; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); transition:transform .15s ease; }
.bv-item:hover{ transform:translateY(-3px); }
.bv-item img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.bv-item span{ display:block; padding:7px 4px 8px; font-size:12px; font-weight:800; line-height:1.25; }
.bv-add{ width:100%; margin-top:16px; padding:14px; border:0; border-radius:14px; cursor:pointer; color:#fff; font:800 16px 'Baloo 2', sans-serif;
  background:linear-gradient(135deg, #FF9A1F, #FF5E3A); box-shadow:0 12px 24px -10px rgba(255,94,58,.9); }
@media (max-width:480px){ .bv-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }