/* ════════════════════════════════════════════
   DESIGN TOKENS — SwiftOTP Dark Palette
════════════════════════════════════════════ */
:root {
  --bg:           hsl(224 40% 9%);
  --bg-alt:       hsl(220 35% 6%);
  --card:         hsl(220 32% 15%);
  --card-2:       hsl(220 28% 18%);
  --card-hover:   hsl(218 28% 21%);
  --fg:           hsl(210 40% 97%);
  --muted:        hsl(215 18% 58%);
  --border:       hsl(218 22% 24%);
  --border-2:     hsl(218 22% 30%);
  --primary:      hsl(263 72% 68%);
  --primary-2:    hsl(248 68% 58%);
  --secondary:    hsl(199 90% 62%);
  --green:        #4ade80;
  --yellow:       #facc15;
  --red:          hsl(0 84% 62%);
  --radius:       0.875rem;
  --radius-sm:    0.5rem;
  --radius-lg:    1.25rem;
  --gradient-btn: linear-gradient(135deg, hsl(263 72% 68%), hsl(248 68% 58%));
  --gradient-banner: linear-gradient(135deg, hsl(263 65% 52%) 0%, hsl(248 65% 46%) 50%, hsl(238 65% 42%) 100%);
  --shadow-card:  0 2px 12px hsl(220 35% 3% / .5), 0 1px 0 hsl(218 22% 26% / .8) inset;
  --shadow-glow:  0 0 0 1px hsl(263 72% 68% / .22), 0 8px 32px hsl(263 72% 68% / .14);
  --shadow-btn:   0 4px 20px hsl(263 72% 68% / .38);
}

/* ════════════════════════════════════════════
   LIGHT MODE TOKENS
════════════════════════════════════════════ */
html.light {
  --bg:           hsl(220 20% 97%);
  --bg-alt:       hsl(220 18% 94%);
  --card:         hsl(0 0% 100%);
  --card-2:       hsl(220 18% 96%);
  --card-hover:   hsl(220 18% 93%);
  --fg:           hsl(220 25% 12%);
  --muted:        hsl(218 14% 48%);
  --border:       hsl(220 15% 88%);
  --border-2:     hsl(220 15% 80%);
  --primary:      hsl(263 72% 60%);
  --primary-2:    hsl(248 68% 52%);
  --secondary:    hsl(199 90% 44%);
  --green:        #16a34a;
  --yellow:       #ca8a04;
  --red:          hsl(0 84% 52%);
  --gradient-btn: linear-gradient(135deg, hsl(263 72% 60%), hsl(248 68% 52%));
  --gradient-banner: linear-gradient(135deg, hsl(263 65% 48%) 0%, hsl(248 65% 42%) 50%, hsl(238 65% 38%) 100%);
  --shadow-card:  0 1px 4px hsl(220 25% 12% / .07), 0 4px 16px hsl(220 25% 12% / .05), 0 0 0 1px hsl(220 15% 88%);
  --shadow-glow:  0 0 0 1px hsl(263 72% 60% / .18), 0 8px 24px hsl(263 72% 60% / .1);
  --shadow-btn:   0 4px 16px hsl(263 72% 60% / .3);
}

/* ════════════════════════════════════════════
   LIGHT MODE OVERRIDES
════════════════════════════════════════════ */
html.light body{
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%,hsl(263 72% 60% / .06),transparent);
}
html.light .glass{
  background:hsl(220 20% 97% / .9);
  backdrop-filter:blur(20px) saturate(1.2);
}
html.light .card{
  background:hsl(0 0% 100%);
  border-color:hsl(220 15% 88%);
}
html.light .card::before{
  background:linear-gradient(135deg,hsl(220 25% 12% / .015) 0%,transparent 60%);
}
html.light .header{border-bottom-color:hsl(220 15% 88%);}
html.light .mobile-nav{background:hsl(220 20% 96%);}
html.light .mob-nav-link:hover,.html.light .mob-nav-link.active{background:hsl(220 18% 90%);}
html.light .mob-nav-link.active{background:hsl(263 72% 60% / .08);}
html.light .tabs-wrap{background:hsl(220 18% 92%);border-color:hsl(220 15% 86%);}
html.light .tab-btn{color:hsl(218 14% 28%) !important;}
html.light .tab-btn:not(.active):hover{background:hsl(220 18% 84%) !important;color:hsl(218 14% 10%) !important;}
html.light .svc-item{align-items:center;background:hsl(220 18% 96%);border-color:hsl(220 15% 88%);color:var(--fg);}
html.light .svc-item:hover{background:hsl(263 72% 60% / .08);border-color:hsl(263 72% 60% / .3);}
html.light .svc-logo{background:hsl(220 18% 92%);}
html.light .fav-item{background:hsl(0 0% 100%);border-color:hsl(220 15% 88%);}
html.light .fav-logo{background:hsl(220 18% 93%);}
html.light .svc-pinned{background:hsl(263 72% 60% / .06);border-color:hsl(263 72% 60% / .5);}
html.light .orders-empty-title{color:var(--fg);}
html.light .order-service-icon{background:hsl(220 18% 93%);border-color:hsl(220 15% 86%);}
html.light .order-number{background:hsl(263 72% 60% / .07);border-color:hsl(263 72% 60% / .2);}
html.light .btn-ghost-sm{background:hsl(220 18% 94%);border-color:hsl(220 15% 86%);color:hsl(218 14% 42%);}
html.light .country-row:hover{background:hsl(220 18% 94%);}
html.light .country-row.active{background:hsl(263 72% 60% / .07);}
html.light .search-input{background:hsl(220 18% 94%);border-color:hsl(220 15% 85%);}
html.light .svc-show-more{border-color:hsl(220 15% 82%);background:transparent;}
html.light .svc-show-more:hover{background:hsl(220 18% 93%);}
html.light .tip-card{background:hsl(0 0% 98%);border-color:hsl(220 15% 88%);}
html.light .order-card{background:hsl(0 0% 100%);border-color:hsl(220 15% 88%);}
html.light .dep-method{background:hsl(220 18% 96%);border-color:hsl(220 15% 88%);}
html.light .dep-amt{background:hsl(220 18% 96%);border-color:hsl(220 15% 88%);}
html.light .mobile-nav{background:hsl(220 18% 95%);}
html.light .mob-nav-link:hover{background:hsl(220 18% 89%);}
html.light .mob-nav-link.active{background:hsl(263 72% 60% / .08);color:var(--primary);}
html.light .currency-pill{background:hsl(220 18% 96%);border-color:hsl(220 15% 88%);}
html.light .currency-dropdown{background:hsl(0 0% 100%);border-color:hsl(220 15% 85%);}
html.light .u-dropdown{background:hsl(0 0% 100%);border-color:hsl(220 15% 85%);}
html.light .balance-chip{background:hsl(0 0% 100%);border-color:hsl(220 15% 88%);}
html.light .user-pill{background:hsl(263 72% 60% / .07);border-color:hsl(263 72% 60% / .18);}
html.light /* ===== Country list fixed scroll (247OTP style) ===== */
.countries-wrap{
height:420px;
overflow-y:auto;
overflow-x:hidden;
border-radius:12px;
border:1px solid var(--border);
background:hsl(220 28% 14%);
}

.countries-wrap::-webkit-scrollbar{
width:4px;
}

.countries-wrap::-webkit-scrollbar-thumb{
background:#444;
border-radius:10px;
}
html.light .country-header-sticky{background:hsl(0 0% 100%);}
html.light .bh-item:hover{background:hsl(220 18% 95%);}
html.light .settings-row:hover{background:hsl(220 18% 96%);}
html.light .toggle-track{background:hsl(220 15% 82%);}
html.light .modal::after{background:linear-gradient(135deg,hsl(220 25% 12% / .02),transparent 60%);}
html.light .auth-input-dep{background:hsl(220 18% 95%);}
html.light .toast{background:hsl(0 0% 100%);border-color:hsl(220 15% 86%);}
html.light .overlay{background:hsl(220 25% 12% / .55);}
html.light .oh-table th{background:hsl(220 18% 95%);}
html.light .oh-table tr:hover td{background:hsl(220 18% 95%);}
html.light .mob-btn:hover{background:hsl(220 18% 90%);}
html.light .confirm-box{background:hsl(220 18% 96%) !important;border-color:hsl(220 15% 88%) !important;}
html.light .buy-confirm-row{border-bottom-color:hsl(220 15% 88%) !important;}html.light .mob-balance-chip{background:hsl(0 0% 100%);border-color:hsl(220 15% 88%);}
html.light .dd-item:hover{background:hsl(220 18% 94%);}
html.light .ref-link-box{background:hsl(220 18% 95%);}
html.light .aff-stat::before{background:linear-gradient(135deg,hsl(220 25% 12% / .01),transparent);}
html.light .chart-placeholder{background:linear-gradient(135deg,hsl(263 72% 60% / .04),hsl(199 90% 44% / .03));}
html.light .glass{background:hsl(220 20% 97% / .9);backdrop-filter:blur(20px) saturate(1.2);}
html.light .card{background:hsl(0 0% 100%);border-color:hsl(220 15% 88%);}
html.light .card::before{background:linear-gradient(135deg,hsl(220 25% 12% / .015) 0%,transparent 60%);}
html.light .header{border-bottom-color:hsl(220 15% 88%);}
html.light body{background-image:radial-gradient(ellipse 80% 50% at 50% -10%,hsl(263 72% 60% / .06),transparent);}
html.light .ambient-purple{background:hsl(263 72% 60% / .04) !important;}
html.light .ambient-blue{background:hsl(199 90% 44% / .03) !important;}

/* ════════════════════════════════════════════
   THEME TOGGLE BUTTON
════════════════════════════════════════════ */
@keyframes themeSwitch {
  0%  {transform:scale(1) rotate(0)}
  30% {transform:scale(.82) rotate(-15deg);opacity:.6}
  70% {transform:scale(1.08) rotate(8deg);opacity:.9}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.theme-toggle {
  display:flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:.625rem;
  background:var(--card);border:1px solid var(--border);
  color:var(--muted);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
  flex-shrink:0;position:relative;overflow:hidden;
}
.theme-toggle:hover{
  background:var(--card-hover);border-color:var(--border-2);
  color:var(--fg);box-shadow:0 2px 10px hsl(263 72% 68% / .15);
}
.theme-toggle .ico-sun,.theme-toggle .ico-moon{
  position:absolute;transition:opacity .25s,transform .3s;
}
.theme-toggle .ico-sun {opacity:0;transform:rotate(-90deg) scale(.6);}
.theme-toggle .ico-moon{opacity:1;transform:rotate(0) scale(1);}
html.light .theme-toggle .ico-sun {opacity:1;transform:rotate(0) scale(1);}
html.light .theme-toggle .ico-moon{opacity:0;transform:rotate(90deg) scale(.6);}
.theme-toggle.animating{animation:themeSwitch .38s ease;}
html.light .theme-toggle{color:var(--muted);}
html.light .theme-toggle:hover{color:var(--fg);}

/* ambient glows light mode */
html.light .ambient-purple{background:hsl(263 72% 60% / .04) !important;}
html.light .ambient-blue{background:hsl(199 90% 44% / .03) !important;}

/* ════════════════════════════════════════════  RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--border);}
html{font-family:'Inter',system-ui,sans-serif;line-height:1.5;-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;background-image:radial-gradient(ellipse 80% 50% at 50% -10%,hsl(263 72% 68% / .08),transparent);transition:background .35s,color .35s;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;font-family:inherit;background:none;border:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:inherit;outline:none;background:none;color:inherit;}
img,svg{display:block;}

/* ════════════════════════════════════════════  ANIMATIONS */
@keyframes fadeUp     {from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn     {from{opacity:0}to{opacity:1}}
@keyframes spin       {to{transform:rotate(360deg)}}
@keyframes pulse      {50%{opacity:.5}}
@keyframes pulseGlow  {0%,100%{box-shadow:0 0 0 0 hsl(263 72% 68% / .0)}50%{box-shadow:0 0 24px 4px hsl(263 72% 68% / .18)}}
@keyframes float-slow {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes modalIn    {from{opacity:0;transform:scale(.94) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes toastIn    {from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shake      {0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes smsPop     {0%{opacity:0;transform:translateY(12px) scale(.95)}60%{transform:translateY(-3px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shimmer    {0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes dotBounce  {0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
@keyframes borderGlow {0%,100%{border-color:hsl(263 72% 68% / .25)}50%{border-color:hsl(263 72% 68% / .55)}}
@keyframes countUp    {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes tabActivate{from{opacity:.6;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes promoPulse {0%,100%{opacity:1}50%{opacity:.88}}
@keyframes btnPress   {0%{transform:scale(1)}50%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes slideUp    {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ripple     {from{transform:scale(0);opacity:.4}to{transform:scale(2.5);opacity:0}}

.anim-fade-up    {animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both;}
.anim-fade-in    {animation:fadeIn .35s ease both;}
.spin            {animation:spin .7s linear infinite;}
.pulse           {animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;}

/* ════════════════════════════════════════════  HELPERS */
.container{width:100%;max-width:1300px;margin:0 auto;padding:0 .875rem;}
@media(min-width:480px){.container{padding:0 1rem;}}
@media(min-width:768px){.container{padding:0 1.5rem;}}

.gradient-text{background:var(--gradient-btn);-webkit-background-clip:text;background-clip:text;color:transparent;}
.gradient-btn-bg{background:var(--gradient-btn);transition:filter .18s,transform .18s,box-shadow .18s;}
.gradient-btn-bg:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 6px 24px hsl(263 72% 68% / .35);}
.gradient-btn-bg:active{transform:translateY(0);filter:brightness(.97);}
.glass{background:hsl(224 40% 9% / .88);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);}
.card{
  background:linear-gradient(145deg,hsl(220 32% 16%),hsl(220 28% 13%));
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  position:relative;overflow:clip;
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,hsl(210 40% 97% / .03) 0%,transparent 60%);
  pointer-events:none;
}
.card-glow{box-shadow:var(--shadow-glow);}
.card-hover-effect{transition:box-shadow .25s,border-color .25s,transform .2s;}
.card-hover-effect:hover{box-shadow:0 8px 32px hsl(220 35% 3% / .6),0 1px 0 hsl(218 22% 28%) inset;border-color:var(--border-2);transform:translateY(-1px);}
.scrollbar-hide::-webkit-scrollbar{display:none;}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none;}
.tag{display:inline-flex;align-items:center;padding:.2rem .625rem;border-radius:9999px;font-size:.725rem;font-weight:700;letter-spacing:.01em;}
.tag-primary{background:hsl(263 72% 68% / .14);color:var(--primary);border:1px solid hsl(263 72% 68% / .28);}
.tag-green{background:hsl(152 60% 40% / .14);color:var(--green);border:1px solid hsl(152 60% 40% / .25);}
.tag-yellow{background:hsl(45 93% 50% / .14);color:var(--yellow);border:1px solid hsl(45 93% 50% / .25);}
.tag-red{background:hsl(0 84% 60% / .12);color:var(--red);border:1px solid hsl(0 84% 60% / .22);}
.tag-blue{background:hsl(199 90% 62% / .13);color:var(--secondary);border:1px solid hsl(199 90% 62% / .24);}

/* ════════════════════════════════════════════  HEADER NAV LINKS */
.header-nav{
  display:none;align-items:center;gap:.125rem;flex:1;justify-content:center;
}
@media(min-width:900px){.header-nav{display:flex;}}
.header-nav-link{
  padding:.4375rem .75rem;border-radius:.625rem;
  font-size:.875rem;font-weight:500;color:var(--muted);
  cursor:pointer;transition:color .15s,background .15s;white-space:nowrap;
}
.header-nav-link:hover{color:var(--fg);background:hsl(220 28% 18%);}
html.light .header-nav-link:hover{background:hsl(220 18% 92%);}

/* ════════════════════════════════════════════  HEADER */
.header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid hsl(218 22% 20% / .8);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:3.5rem;padding:0 .875rem;gap:.5rem;
  min-width:0;
}
@media(min-width:640px){.header-inner{height:3.75rem;padding:0 1.25rem;}}
@media(min-width:768px){.header-inner{height:4rem;padding:0 1.5rem;gap:.75rem;}}

.logo{display:flex;align-items:center;gap:.5rem;flex-shrink:0;min-width:0;}
.logo-icon{
  width:2.375rem;height:2.375rem;border-radius:.625rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px hsl(263 72% 68% / .45);
  position:relative;overflow:visible;
  transition:box-shadow .2s,transform .2s;
}
.logo:hover .logo-icon{
  box-shadow:0 6px 24px hsl(263 72% 68% / .6);
  transform:scale(1.05);
}
.logo-icon::after{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(135deg,hsl(210 40% 97% / .18),transparent);
  pointer-events:none;
}
.logo-text{font-size:1.1875rem;font-weight:800;letter-spacing:-.01em;}
.logo-otp{color:var(--primary);}

/* currency selector */
.currency-pill{
  display:flex;align-items:center;gap:.375rem;padding:.3125rem .625rem;
  border-radius:.5rem;background:hsl(220 28% 18%);border:1px solid var(--border);
  font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;
  position:relative;
}
.currency-pill:hover{background:var(--card-hover);border-color:var(--border-2);}
.currency-dropdown{
  position:absolute;top:calc(100% + .5rem);left:0;min-width:8.5rem;
  background:hsl(220 32% 16%);border:1px solid var(--border-2);border-radius:.875rem;
  padding:.375rem;box-shadow:0 16px 40px hsl(220 35% 3% / .6),0 0 0 1px hsl(263 72% 68% / .06);
  display:none;flex-direction:column;z-index:200;
}
.currency-pill.open .currency-dropdown{display:flex;}
.currency-opt{
  display:flex;align-items:center;gap:.5rem;padding:.4375rem .625rem;
  border-radius:.5rem;font-size:.875rem;cursor:pointer;transition:background .13s;
}
.currency-opt:hover{background:var(--card-hover);}
.currency-opt.active{color:var(--primary);font-weight:700;}

/* balance chip */
.balance-chip{
  display:flex;align-items:center;background:hsl(220 28% 17%);
  border:1px solid var(--border);border-radius:.625rem;overflow:hidden;
  transition:border-color .2s;
}
.balance-chip:hover{border-color:var(--border-2);}
.balance-chip-val{
  display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;
  font-size:.8125rem;font-weight:700;
}
.deposit-btn{
  display:flex;align-items:center;justify-content:center;gap:.3125rem;
  padding:.375rem .875rem;font-size:.8125rem;font-weight:700;color:#fff;
  border-left:1px solid var(--border);transition:filter .15s;
}
.deposit-btn:hover{filter:brightness(1.12);}

/* user pill */
.user-pill{
  display:flex;align-items:center;gap:.5rem;padding:.3125rem .5rem;
  border-radius:9999px;background:hsl(263 72% 68% / .1);
  border:1px solid hsl(263 72% 68% / .2);cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .2s;position:relative;
}
.user-pill:hover{background:hsl(263 72% 68% / .17);border-color:hsl(263 72% 68% / .35);box-shadow:0 0 0 3px hsl(263 72% 68% / .08);}
.user-av{
  width:1.875rem;height:1.875rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0;
  box-shadow:0 2px 8px hsl(263 72% 68% / .4);
}
.user-name{font-size:.8125rem;font-weight:600;max-width:6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-chevron{width:.875rem;height:.875rem;color:var(--muted);transition:transform .22s cubic-bezier(.34,1.56,.64,1);}
.user-pill.open .user-chevron{transform:rotate(180deg);}
.u-dropdown{
  position:absolute;top:calc(100% + .5rem);right:0;min-width:13rem;
  background:hsl(220 32% 16%);border:1px solid var(--border-2);border-radius:1rem;
  padding:.375rem;box-shadow:0 20px 48px hsl(220 35% 3% / .65),0 0 0 1px hsl(263 72% 68% / .06);
  display:none;flex-direction:column;z-index:300;
}
.user-pill.open .u-dropdown{display:flex;}
.dd-head{padding:.75rem .875rem .625rem;border-bottom:1px solid var(--border);margin-bottom:.375rem;}
.dd-name{font-size:.9375rem;font-weight:700;}
.dd-email{font-size:.75rem;color:var(--muted);margin-top:.125rem;}
.dd-item{display:flex;align-items:center;gap:.5rem;padding:.5625rem .875rem;border-radius:.5rem;font-size:.875rem;color:var(--muted);cursor:pointer;transition:background .13s,color .13s;}
.dd-item:hover{background:var(--card-hover);color:var(--fg);}
.dd-item.danger:hover{background:hsl(0 84% 60% / .1);color:var(--red);}
.dd-sep{height:1px;background:var(--border);margin:.375rem 0;}

/* mobile menu */
.mob-btn{display:flex;align-items:center;justify-content:center;width:2.125rem;height:2.125rem;border-radius:.5rem;transition:background .15s;color:var(--muted);}
.mob-btn:hover{background:var(--card);color:var(--fg);}
@media(min-width:768px){.mob-bal-wrap,.mob-btn{display:none;}}
/* On mobile hide desktop-only elements */
@media(max-width:767px){
  #desk-right{display:none !important;}
  #mob-right{display:flex !important;align-items:center;}
}
/* On desktop hide mobile-only elements — no JS needed */
@media(min-width:768px){
  #mob-right{display:none !important;}
  #desk-right{display:flex !important;align-items:center;}
}
.mobile-nav{
  display:none;border-top:1px solid var(--border);
  padding:.875rem 1rem;background:hsl(220 35% 8%);flex-direction:column;gap:.3125rem;
  max-height:calc(100vh - 4rem);overflow-y:auto;
}
.mobile-nav.open{display:flex;}
.mob-nav-link{
  display:flex;align-items:center;gap:.625rem;padding:.6875rem .875rem;
  border-radius:.75rem;font-size:.9375rem;font-weight:500;color:var(--muted);
  transition:background .15s,color .15s;width:100%;text-align:left;
}
.mob-nav-link:hover,.mob-nav-link.active{background:hsl(220 28% 20%);color:var(--fg);}
.mob-nav-link.active{color:var(--primary);font-weight:600;background:hsl(263 72% 68% / .1);}
/* mobile balance chip compact */
.mob-balance-chip{
  display:flex;align-items:center;background:hsl(220 28% 17%);
  border:1px solid var(--border);border-radius:.5rem;overflow:hidden;
  font-size:.75rem;font-weight:700;
}
.mob-balance-val{
  display:flex;align-items:center;gap:.25rem;padding:.3125rem .5rem;
}
.mob-deposit-btn{
  display:flex;align-items:center;justify-content:center;
  padding:.3125rem .5rem;border-left:1px solid var(--border);
  color:#fff;transition:filter .15s;
}
.mob-deposit-btn:hover{filter:brightness(1.12);}

/* ════════════════════════════════════════════  TABS */
.tabs-wrap{
  overflow-x:auto;
  background:hsl(220 28% 13%);
  border:1px solid var(--border);border-radius:1rem;
  padding:.375rem;
}
.tabs-inner{display:flex;align-items:center;gap:.25rem;width:max-content;min-width:100%;}
.tab-btn{
  display:inline-flex;align-items:center;gap:.4375rem;
  padding:.5rem .9375rem;border-radius:.75rem;
  font-size:.8125rem;font-weight:600;color:var(--muted);
  white-space:nowrap;transition:all .22s;flex-shrink:0;
  position:relative;
}
.tab-btn:hover{background:hsl(220 28% 21%);color:var(--fg);}
.tab-btn.active{
  color:#fff;
  box-shadow:0 2px 14px hsl(263 72% 68% / .3);
  animation:tabActivate .25s ease;
}
.tab-btn.active::after{
  content:'';position:absolute;bottom:-.25rem;left:50%;transform:translateX(-50%);
  width:1.5rem;height:2px;border-radius:9999px;background:var(--primary);opacity:.7;
}
@media(max-width:640px){
  .tab-btn .tab-long{display:none;}
  .tab-btn .tab-short{display:inline;}
}
.tab-btn .tab-long{display:inline;}
.tab-btn .tab-short{display:none;}

/* ════════════════════════════════════════════  MAIN GRID */
.main-grid{display:grid;gap:1rem;grid-template-columns:1fr;}
@media(min-width:640px){.main-grid{gap:1.125rem;}}
@media(min-width:768px){.main-grid{gap:1.25rem;}}
@media(min-width:1024px){.main-grid{grid-template-columns:5fr 7fr;gap:1.375rem;}}
@media(min-width:1280px){.main-grid{grid-template-columns:420px 1fr;}}

/* ════════════════════════════════════════════  CARDS */
.panel{padding:1.375rem;border-radius:var(--radius);position:relative;}
.panel::before{
  content:'';position:absolute;top:0;left:1.5rem;right:1.5rem;height:1.5px;
  background:var(--gradient-btn);border-radius:0 0 9999px 9999px;opacity:.35;pointer-events:none;
}
.panel-title{font-size:1.0625rem;font-weight:700;margin-bottom:0;letter-spacing:-.01em;line-height:1.3;}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.125rem;gap:.75rem;flex-wrap:nowrap;
}
.panel-link{
  font-size:.8125rem;color:var(--secondary);display:flex;align-items:center;gap:.25rem;
  cursor:pointer;transition:color .15s;font-weight:500;flex-shrink:0;white-space:nowrap;
}
.panel-link:hover{color:hsl(199 90% 75%);text-decoration:underline;}

/* section label */
.section-label{
  font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:.5rem;display:flex;align-items:center;gap:.375rem;
}
.section-label::before{content:'';width:.375rem;height:.375rem;border-radius:50%;background:var(--primary);flex-shrink:0;}

/* ════════════════════════════════════════════  SEARCH */
.search-wrap{position:relative;margin-bottom:.875rem;}
.search-ico{position:absolute;left:.8125rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex;}
.search-input{
  width:100%;padding:.5625rem .875rem .5625rem 2.375rem;
  background:hsl(220 35% 10%);border:1px solid var(--border);border-radius:.75rem;
  font-size:.875rem;color:var(--fg);transition:border-color .2s,box-shadow .2s,background .2s;
}
.search-input::placeholder{color:hsl(215 18% 38%);}
.search-input:focus{
  background:hsl(220 35% 11%);
  border-color:var(--primary);
  box-shadow:0 0 0 3px hsl(263 72% 68% / .12);
}

/* ════════════════════════════════════════════  SERVICE SELECTION */
.svc-pinned{
  display:flex;align-items:center;justify-content:space-between;
  padding:.875rem 1rem;border-radius:.875rem;
  border:2px solid hsl(199 90% 55%);
  background:hsl(199 90% 62% / .07);
  cursor:pointer;transition:all .2s;margin-bottom:.75rem;
  gap:.75rem;min-width:0;
}
.svc-pinned:hover{background:hsl(199 90% 62% / .13);transform:translateY(-1px);}
html.light .svc-pinned{background:hsl(199 90% 44% / .06);border-color:hsl(199 90% 44% / .6);}
html.light .svc-pinned:hover{background:hsl(199 90% 44% / .1);}
.svc-pinned-left{display:flex;align-items:center;gap:.875rem;min-width:0;flex:1;overflow:hidden;}
.svc-pinned-name{font-weight:700;font-size:1.0625rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Inline grid (max 8 items, no fixed height) ── */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.5rem;
  max-height:none;
  overflow:visible;
}
@media(min-width:480px){.svc-grid{gap:.5625rem;}}

.svc-item{
  display:flex;align-items:center;gap:.625rem;
  padding:.6875rem .875rem;border-radius:.875rem;
  border:1px solid var(--border);font-size:.875rem;font-weight:500;
  cursor:pointer;transition:all .18s;overflow:hidden;
  background:var(--card);color:var(--fg);min-width:0;text-align:left;
  box-shadow:var(--shadow-card);
}
.svc-item:hover{border-color:var(--primary);background:hsl(263 72% 68% / .06);transform:translateY(-1px);}
.svc-item.active{border-color:var(--primary);background:hsl(263 72% 68% / .1);box-shadow:var(--shadow-glow);}
html.light .svc-item{align-items:center;background:hsl(0 0% 100%);border-color:hsl(220 15% 88%);}
html.light .svc-item:hover{background:hsl(263 72% 60% / .06);border-color:hsl(263 72% 60% / .35);}
.svc-logo{width:2rem;height:2rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:hsl(220 28% 22%);}
.svc-logo img{width:1.375rem;height:1.375rem;object-fit:contain;display:block;}
html.light .svc-logo{background:hsl(220 18% 93%);}
.svc-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:.8125rem;font-weight:600;}
.svc-show-more{
  width:100%;margin-top:.75rem;padding:.625rem;
  font-size:.875rem;font-weight:500;color:var(--muted);
  border:1px solid var(--border);border-radius:.75rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  transition:all .18s;background:transparent;
}
.svc-show-more:hover{color:var(--fg);background:var(--card-hover);border-color:var(--border-2);}

/* ════  ALL-SERVICES BOTTOM-SHEET MODAL  ════ */
.svc-modal-overlay{
  position:fixed;inset:0;z-index:9100;
  display:flex;align-items:flex-end;justify-content:center;
  background:hsl(220 40% 4% / .75);
  padding:0;
  contain:strict;
}
.svc-modal-overlay{transition:opacity .2s ease,visibility .2s ease;}
.svc-modal-overlay.hidden{opacity:0;pointer-events:none;visibility:hidden;}
html.light .svc-modal-overlay{background:hsl(220 25% 12% / .55);}

.svc-modal{
  position:relative;width:100%;max-width:540px;
  background:hsl(220 30% 14%);
  border:1px solid hsl(218 22% 28%);
  border-radius:1.5rem 1.5rem 0 0;
  max-height:92dvh;
  display:flex;flex-direction:column;
  box-shadow:0 -8px 32px hsl(220 40% 3% / .5);
  animation:svcSlideUp .22s cubic-bezier(.25,.46,.45,.94);
  overflow:hidden;
  will-change:transform;
  transform:translateZ(0);
}
html.light .svc-modal{
  background:linear-gradient(175deg,hsl(0 0% 100%),hsl(220 20% 98%));
  border-color:hsl(220 15% 88%);
  box-shadow:0 -8px 40px hsl(220 25% 12% / .12);
}
@keyframes svcSlideUp{
  from{transform:translate3d(0,100%,0);}
  to{transform:translate3d(0,0,0);}
}

.svc-modal-handle{
  width:2.5rem;height:.25rem;
  background:hsl(218 22% 32%);border-radius:9999px;
  margin:.875rem auto .25rem;flex-shrink:0;
}
html.light .svc-modal-handle{background:hsl(220 15% 82%);}

.svc-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.25rem .875rem;flex-shrink:0;
}
.svc-modal-title{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;}
.svc-modal-count{
  font-size:.75rem;font-weight:700;
  color:var(--primary);background:hsl(263 72% 68% / .12);
  border:1px solid hsl(263 72% 68% / .2);
  border-radius:9999px;padding:.2rem .625rem;margin-left:.5rem;
}
.svc-modal-close{
  width:2rem;height:2rem;border-radius:.625rem;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:all .15s;flex-shrink:0;
  background:hsl(220 28% 20%);border:1px solid var(--border);
}
.svc-modal-close:hover{background:hsl(220 28% 26%);color:var(--fg);}
html.light .svc-modal-close{background:hsl(220 18% 94%);border-color:hsl(220 15% 86%);}
html.light .svc-modal-close:hover{background:hsl(220 18% 88%);}

.svc-modal-search{
  padding:0 1.25rem .875rem;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
html.light .svc-modal-search{border-bottom-color:hsl(220 15% 88%);}
.svc-modal-search .search-wrap{margin:0;}

.svc-modal-body{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:1rem 1.25rem 2rem;
  scrollbar-width:thin;
  scrollbar-color:hsl(218 22% 30%) transparent;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  will-change:scroll-position;
}
.svc-modal-body::-webkit-scrollbar{width:4px;}
.svc-modal-body::-webkit-scrollbar-thumb{background:hsl(218 22% 30%);border-radius:9999px;}

.svc-alpha-section{margin-bottom:.25rem;}
.svc-alpha-divider{
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  padding:.875rem 0 .375rem;
}

.svc-all-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.5rem;
  margin-bottom:.5rem;
}
@media(min-width:400px){.svc-all-grid{gap:.5625rem;}}
@media(min-width:600px){.svc-all-grid{grid-template-columns:repeat(3,1fr);}}

/* Active highlight in modal */
.svc-all-grid .svc-item.active{
  border-color:var(--primary);
  background:hsl(263 72% 68% / .12);
}

/* Desktop: centered dialog instead of bottom-sheet */
@media(min-width:640px){
  .svc-modal-overlay{align-items:center;padding:.75rem;}
  .svc-modal{
    border-radius:1.375rem;
    max-height:88dvh;
    animation:modalIn .28s cubic-bezier(.34,1.45,.64,1);
  }
}

/* ════════════════════════════════════════════  COUNTRY SELECTION */
.country-header-sticky{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:.625rem .875rem;background:hsl(220 32% 15%);border-bottom:1px solid var(--border);
  border-radius:.75rem .75rem 0 0;font-size:.8125rem;color:var(--fg);font-weight:700;
}
html.light .country-header-sticky{background:hsl(0 0% 100%);border-bottom-color:hsl(220 15% 88%);}
.sort-btn{
  display:flex;align-items:center;gap:.25rem;cursor:pointer;
  padding:.25rem .625rem;border-radius:.375rem;font-size:.8125rem;font-weight:600;
  border:1px solid var(--border);transition:all .15s;color:var(--muted);
}
.sort-btn:hover{color:var(--primary);background:hsl(263 72% 68% / .08);border-color:hsl(263 72% 68% / .3);}
/* ── Country List ─────────────────────────────────────── */
.countries-wrap{
  max-height:28rem;overflow-y:auto;border-radius:1rem;
  border:1px solid var(--border);background:var(--card);
}
html.light .countries-wrap{background:#fff;}
.countries-wrap::-webkit-scrollbar{width:.2rem;}
.countries-wrap::-webkit-scrollbar-track{background:transparent;}
.countries-wrap::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:9999px;}

.country-row{
  display:block;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.country-row:last-child{border-bottom:0;}
html.light .country-row{border-bottom-color:hsl(220 15% 91%);}

.cr-main{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1rem;cursor:pointer;gap:.75rem;
  transition:background .12s;
}
.country-row:hover .cr-main{background:hsl(220 28% 17%);}
html.light .country-row:hover .cr-main{background:hsl(220 18% 96%);}
.country-row.active .cr-main{background:hsl(199 89% 50% / .07);}
html.light .country-row.active .cr-main{background:hsl(199 89% 50% / .05);}
.country-row.active{border-left:2.5px solid var(--primary);}

.cr-left{display:flex;align-items:center;gap:.75rem;min-width:0;flex:1;}
.cr-flag{font-size:1.625rem;flex-shrink:0;line-height:1;}
.cr-info{min-width:0;}
.cr-name{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr-qty{font-size:.72rem;color:var(--muted);margin-top:.1rem;}
.cr-right{display:flex;align-items:center;gap:.375rem;flex-shrink:0;}
.cr-price-tag{
  display:flex;align-items:center;gap:.25rem;
  padding:.3rem .9rem;border-radius:.625rem;
  background:var(--primary);color:#fff;
  font-size:.875rem;font-weight:700;white-space:nowrap;
}
.cr-from{font-size:.7rem;font-weight:500;opacity:.85;}
.cr-chevron{font-size:.65rem;color:var(--muted);line-height:1;}

/* ── Price Tiers ──────────────────────────────────────── */
.tiers-expand{
  border-top:1px solid var(--border);
  background:var(--surface,hsl(220 28% 11%));
}
html.light .tiers-expand{background:hsl(220 18% 97%);}
.tiers-header{
  padding:.4rem 1rem .3rem;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;
  color:var(--muted);text-transform:uppercase;
}
.tier-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 1rem;cursor:pointer;
  border-top:1px solid var(--border);
  transition:background .1s;
}
html.light .tier-row{border-top-color:hsl(220 15% 91%);}
.tier-row:hover,.tier-row-hover{background:hsl(199 89% 50% / .08) !important;}
html.light .tier-row:hover{background:hsl(199 89% 50% / .05) !important;}
.tier-qty{font-size:.8125rem;color:var(--muted);}
.tier-price{
  padding:.25rem .8rem;border-radius:.5rem;
  background:var(--primary);color:#fff;
  font-size:.875rem;font-weight:700;white-space:nowrap;
}

/* ── High Delivery Chips ──────────────────────────────── */
.hd-chip{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1rem;border-radius:.875rem;
  border:1px solid var(--border);background:var(--card);
  cursor:pointer;transition:all .15s;gap:.75rem;
}
.hd-chip:hover{border-color:var(--primary);background:hsl(199 90% 62%/.06);}
.price-pill{
  padding:.3rem .9rem;border-radius:.625rem;
  background:var(--primary);color:#fff;
  font-size:.9rem;font-weight:700;white-space:nowrap;flex-shrink:0;
}

/* ════════════════════════════════════════════  PROMO BANNER */
.promo-banner{
  border-radius:var(--radius-lg);padding:1.625rem 1.5rem;
  background:var(--gradient-banner);position:relative;overflow:hidden;color:#fff;
  box-shadow:0 8px 32px hsl(263 65% 52% / .3), 0 1px 0 hsl(210 40% 97% / .12) inset;
}
.promo-banner::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,hsl(210 40% 97% / .06),transparent 60%);pointer-events:none;
}
.promo-bg-circle-1{position:absolute;top:1rem;right:5rem;width:5rem;height:5rem;border:1.5px solid rgba(255,255,255,.18);border-radius:50%;animation:promoPulse 3s ease-in-out infinite;}
.promo-bg-circle-2{position:absolute;bottom:1.5rem;right:10rem;width:2.5rem;height:2.5rem;border:1.5px solid rgba(255,255,255,.14);border-radius:50%;}
.promo-bg-dot{position:absolute;top:3rem;right:15rem;width:1rem;height:1rem;background:rgba(255,255,255,.18);border-radius:50%;}
.promo-inner{position:relative;z-index:1;}
.promo-badge{
  display:inline-flex;align-items:center;gap:.375rem;
  background:rgba(255,255,255,.22);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:9999px;padding:.25rem .875rem;font-size:.75rem;font-weight:800;margin-bottom:.875rem;
  letter-spacing:.04em;
}
.promo-title{font-size:1.5rem;font-weight:900;margin-bottom:.5rem;letter-spacing:-.02em;}
.promo-details{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap;margin-bottom:.625rem;}
.promo-country{display:flex;align-items:center;gap:.375rem;font-weight:600;font-size:.9375rem;}
.promo-price-new{font-size:1.75rem;font-weight:900;letter-spacing:-.02em;}
.promo-price-old{font-size:.9375rem;text-decoration:line-through;opacity:.6;}
.promo-note{font-size:.8125rem;opacity:.78;}
.promo-img{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);}
.promo-img-box{
  width:6.5rem;height:6.5rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:1.25rem;transform:rotate(10deg);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}

/* ════════════════════════════════════════════  ACTIVE ORDERS */
.orders-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1rem;color:var(--muted);text-align:center;}
.orders-empty-icon{
  width:3.5rem;height:3.5rem;
  display:flex;align-items:center;justify-content:center;margin-bottom:.875rem;
  color:var(--muted);
}
.orders-empty-title{font-weight:600;font-size:.9375rem;color:var(--fg);margin-bottom:.25rem;}
.orders-empty-sub{font-size:.8125rem;color:var(--muted);}

.order-card{
  padding:1rem 1.125rem;border-radius:.9375rem;
  border:1px solid var(--border);
  background:linear-gradient(145deg,hsl(220 28% 17%),hsl(220 28% 14%));
  margin-bottom:.625rem;transition:border-color .2s,box-shadow .2s;
  position:relative;overflow:hidden;
}
.order-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gradient-btn);border-radius:9999px 9999px 0 0;opacity:.7;
}
.order-card{transition:border-color .2s,box-shadow .25s,transform .2s;}
.order-card:hover{border-color:hsl(263 72% 68% / .4);box-shadow:0 6px 28px hsl(263 72% 68% / .14);transform:translateY(-1px);}
.order-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.75rem;}
.order-service{display:flex;align-items:center;gap:.625rem;}
.order-service-icon{
  width:2.25rem;height:2.25rem;border-radius:.625rem;
  background:hsl(220 28% 22%);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;
}
.order-service-name{font-weight:700;font-size:.9375rem;}
.order-country{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:.3125rem;margin-top:.125rem;}
.order-number{
  font-size:1.125rem;font-weight:800;color:var(--primary);
  letter-spacing:.05em;font-variant-numeric:tabular-nums;
  padding:.4375rem .75rem;
  background:hsl(263 72% 68% / .09);
  border-radius:.625rem;border:1px solid hsl(263 72% 68% / .22);
  display:flex;align-items:center;gap:.5rem;cursor:pointer;
  transition:all .18s;
}
.order-number:hover{background:hsl(263 72% 68% / .16);border-color:hsl(263 72% 68% / .4);}
.order-actions{display:flex;gap:.5rem;align-items:center;margin-top:.75rem;}
.order-action-btn{
  display:flex;align-items:center;gap:.375rem;padding:.4375rem .75rem;
  border-radius:.5rem;font-size:.8125rem;font-weight:600;
  transition:all .18s;
}
.btn-ghost-sm{background:hsl(220 28% 19%);border:1px solid var(--border);color:var(--muted);}
.btn-ghost-sm:hover{background:hsl(220 28% 23%);border-color:var(--border-2);color:var(--fg);}
.btn-danger-sm{background:hsl(0 84% 60% / .09);border:1px solid hsl(0 84% 60% / .22);color:var(--red);}
.btn-danger-sm:hover{background:hsl(0 84% 60% / .18);}
.btn-primary-sm{color:#fff;}
.timer-bar{height:.3125rem;border-radius:9999px;background:hsl(220 28% 22%);overflow:hidden;margin-top:.75rem;}
.timer-fill{height:100%;border-radius:9999px;background:var(--primary);transition:width .8s linear,background .5s ease;}

/* ════════════════════════════════════════════  CUSTOMER FAVORITES */
.favs-grid{display:grid;grid-template-columns:1fr;gap:.375rem;}
@media(min-width:1024px){.favs-grid{grid-template-columns:1fr;}}
.fav-item{
  display:flex;align-items:center;gap:.875rem;
  padding:.875rem 1rem;border-radius:.875rem;
  border:1px solid var(--border);cursor:pointer;
  transition:all .18s;background:var(--card);min-width:0;overflow:hidden;
}
.fav-item:hover{border-color:var(--primary);background:hsl(263 72% 68% / .06);}
html.light .fav-item{background:hsl(0 0% 100%);border-color:hsl(220 15% 88%);}
.fav-logo{width:2.75rem;height:2.75rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:hsl(220 28% 22%);}
.fav-logo img{width:1.875rem;height:1.875rem;object-fit:contain;display:block;}
html.light .fav-logo{background:hsl(220 18% 93%);}
.fav-text{flex:1;min-width:0;overflow:hidden;}
.fav-service{font-size:.9375rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;}
.fav-country{font-size:.8125rem;color:var(--muted);margin-top:.1875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.3125rem;}
.fav-price{font-size:.9375rem;font-weight:700;color:#fff;white-space:nowrap;flex-shrink:0;background:hsl(152 60% 38%);padding:.3125rem .875rem;border-radius:9999px;margin-left:auto;letter-spacing:.01em;}

/* ════════════════════════════════════════════  TIPS CAROUSEL */
.tips-list{display:flex;gap:.75rem;overflow-x:auto;padding-bottom:.375rem;}
.tips-list::-webkit-scrollbar{height:.1875rem;}
.tips-list::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:9999px;}
.tip-card{
  flex-shrink:0;width:13.5rem;padding:.875rem;border-radius:.875rem;
  border:1px solid var(--border);
  background:linear-gradient(145deg,hsl(220 28% 18%),hsl(220 28% 15%));
  transition:border-color .18s,transform .18s;
}
.tip-card:hover{border-color:var(--border-2);transform:translateY(-1px);}
.tip-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.4375rem;}
.tip-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;}
.tip-label{font-size:.75rem;font-weight:700;}
.tip-text{font-size:.725rem;color:var(--muted);line-height:1.55;}

/* ════════════════════════════════════════════  ORDER HISTORY TAB */
.oh-table-wrap{border-radius:.875rem;overflow:hidden;border:1px solid var(--border);}
.oh-table{width:100%;border-collapse:collapse;font-size:.8125rem;}
.oh-table th{padding:.6875rem 1rem;text-align:left;font-size:.75rem;color:var(--muted);font-weight:600;background:hsl(220 28% 13%);border-bottom:1px solid var(--border);}
.oh-table td{padding:.6875rem 1rem;border-bottom:1px solid hsl(218 22% 18%);vertical-align:middle;}
.oh-table tr:last-child td{border-bottom:0;}
.oh-table tr:hover td{background:hsl(220 28% 19%);}
.oh-empty{padding:3rem;text-align:center;color:var(--muted);font-size:.9375rem;}

/* ════════════════════════════════════════════  QUERY STATISTICS TAB */
.qs-grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr));}
@media(min-width:480px){.qs-grid{gap:.875rem;grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:640px){.qs-grid{gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(min-width:1024px){.qs-grid{gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr));}}
.qs-card{
  border-radius:1rem;padding:1.375rem;text-align:center;
  position:relative;overflow:hidden;
}
.qs-card::before{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--gradient-btn);opacity:.5;
}
.qs-val{font-size:1.875rem;font-weight:900;margin-bottom:.3125rem;letter-spacing:-.02em;}
.qs-lbl{font-size:.8125rem;color:var(--muted);}
.chart-placeholder{
  border-radius:1rem;height:13rem;
  background:linear-gradient(135deg,hsl(263 72% 68% / .05),hsl(199 90% 62% / .04));
  border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.9375rem;margin-top:1rem;
}

/* ════════════════════════════════════════════  BALANCE HISTORY TAB */
.bh-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:.875rem 1rem;border-bottom:1px solid hsl(218 22% 18%);
  transition:background .13s;
}
.bh-item:last-child{border-bottom:0;}
.bh-item:hover{background:hsl(220 28% 19%);}
.bh-left{display:flex;align-items:center;gap:.625rem;}
.bh-icon{width:2.375rem;height:2.375rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--border);}
.bh-desc{font-size:.875rem;font-weight:600;}
.bh-date{font-size:.75rem;color:var(--muted);margin-top:.0625rem;}
.bh-amount{font-weight:800;font-size:.9375rem;letter-spacing:-.01em;}

/* ════════════════════════════════════════════  SETTINGS TAB */
.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9375rem 1.125rem;border-bottom:1px solid hsl(218 22% 18%);
  transition:background .13s;
}
.settings-row:hover{background:hsl(220 28% 17%);}
.settings-row:last-child{border-bottom:0;}
.settings-label{font-size:.9375rem;font-weight:600;}
.settings-sub{font-size:.8125rem;color:var(--muted);margin-top:.1875rem;}
.toggle-wrap{position:relative;display:inline-flex;align-items:center;cursor:pointer;}
.toggle-input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{
  width:2.75rem;height:1.5rem;border-radius:9999px;
  background:hsl(220 28% 26%);transition:background .25s;
  display:inline-block;position:relative;
  border:1px solid hsl(220 28% 30%);
}
.toggle-input:checked + .toggle-track{background:var(--primary);border-color:var(--primary);}
.toggle-thumb{
  position:absolute;top:.1875rem;left:.1875rem;
  width:1.0625rem;height:1.0625rem;border-radius:50%;background:#fff;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.toggle-input:checked ~ .toggle-thumb{transform:translateX(1.25rem);}

/* ════════════════════════════════════════════  AFFILIATE TAB */
.aff-stat{border-radius:1rem;padding:1.125rem .875rem;text-align:center;position:relative;overflow:hidden;}
@media(min-width:480px){.aff-stat{padding:1.375rem;}}
.aff-stat::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,hsl(210 40% 97% / .025),transparent);pointer-events:none;}
.aff-stat-val{font-size:1.75rem;font-weight:900;margin-bottom:.3125rem;letter-spacing:-.02em;}
.aff-stat-lbl{font-size:.8125rem;color:var(--muted);}
.ref-link-box{
  display:flex;align-items:center;gap:.625rem;padding:.875rem 1rem;
  background:hsl(220 35% 10%);border:1px solid var(--border);border-radius:.875rem;
  font-family:monospace;font-size:.8125rem;color:var(--secondary);overflow:hidden;
  transition:border-color .18s;
}
.ref-link-box:hover{border-color:var(--border-2);}
.ref-link-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ref-copy-btn{
  display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;
  background:hsl(263 72% 68% / .14);border:1px solid hsl(263 72% 68% / .28);
  border-radius:.5rem;font-size:.75rem;font-weight:700;color:var(--primary);
  flex-shrink:0;transition:all .18s;
}
.ref-copy-btn:hover{background:hsl(263 72% 68% / .24);box-shadow:0 2px 8px hsl(263 72% 68% / .2);}

/* ════════════════════════════════════════════  MODALS */
.overlay{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  padding:.75rem;
  background:hsl(220 40% 4% / .82);backdrop-filter:blur(10px) saturate(1.2);
  overflow-y:auto;
  transition:opacity .22s ease,visibility .22s ease;
}
.overlay.hidden{opacity:0;pointer-events:none;visibility:hidden;}
.modal{
  position:relative;width:100%;max-width:26rem;
  background:linear-gradient(145deg,hsl(220 32% 16%),hsl(220 28% 13%));
  border:1px solid hsl(218 22% 28%);border-radius:1.375rem;
  padding:2rem 1.75rem;
  box-shadow:0 48px 96px hsl(220 40% 3% / .7),0 0 0 1px hsl(263 72% 68% / .08);
  animation:modalIn .3s cubic-bezier(.34,1.45,.64,1);overflow:hidden;
  margin:auto;flex-shrink:0;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.modal::before{
  content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:300px;height:200px;background:var(--primary);border-radius:50%;
  opacity:.12;filter:blur(72px);pointer-events:none;
}
.modal::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,hsl(210 40% 97% / .025),transparent 60%);
  pointer-events:none;
}

/* ── Light mode modal ── */
html.light .modal{
  background:linear-gradient(145deg,hsl(0 0% 100%),hsl(220 20% 98%));
  border:1px solid hsl(220 15% 88%);
  box-shadow:0 24px 64px hsl(220 25% 12% / .14),0 0 0 1px hsl(220 15% 88%);
}
html.light .modal::before{opacity:.06;}
html.light .modal::after{background:linear-gradient(135deg,hsl(220 25% 12% / .015),transparent 60%);}

/* buy confirm rows light mode */
html.light .buy-modal .confirm-box{
  background:hsl(220 18% 96%);
  border-color:hsl(220 15% 88%);
}
html.light .buy-confirm-row{border-bottom-color:hsl(220 15% 88%);}

.modal-close{
  position:absolute;top:1.125rem;right:1.125rem;
  width:2.125rem;height:2.125rem;border-radius:.625rem;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:background .15s,color .15s;z-index:10;
  background:var(--card);border:1px solid var(--border);
}
.modal-close:hover{background:hsl(220 28% 24%);color:var(--fg);}
html.light .modal-close{background:hsl(220 18% 96%);border-color:hsl(220 15% 86%);}
html.light .modal-close:hover{background:hsl(220 18% 88%);}
.modal-title{font-size:1.3125rem;font-weight:800;margin-bottom:.375rem;letter-spacing:-.02em;}
.modal-sub{font-size:.875rem;color:var(--muted);margin-bottom:1.5rem;line-height:1.55;}

/* deposit modal */
.dep-methods{display:grid;grid-template-columns:1fr 1fr;gap:.5625rem;margin-bottom:1.125rem;}
.dep-method{
  padding:.875rem .625rem;border-radius:.9375rem;
  border:1.5px solid var(--border);
  background:hsl(220 28% 17%);
  text-align:center;cursor:pointer;transition:all .2s;
}
.dep-method:hover{border-color:hsl(263 72% 68% / .4);background:hsl(263 72% 68% / .08);}
.dep-method.active{
  border-color:var(--primary);background:hsl(263 72% 68% / .12);
  box-shadow:0 0 0 3px hsl(263 72% 68% / .1);
}
.dep-method-icon{font-size:1.625rem;margin-bottom:.3125rem;}
.dep-method-name{font-size:.8125rem;font-weight:700;}
.dep-method-sub{font-size:.7rem;color:var(--muted);}
.dep-amounts{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.dep-amt{
  padding:.4375rem .9375rem;border-radius:9999px;
  border:1.5px solid var(--border);background:hsl(220 28% 17%);
  font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;
}
.dep-amt:hover{border-color:hsl(263 72% 68% / .4);background:hsl(263 72% 68% / .08);}
.dep-amt.active{
  border-color:var(--primary);background:hsl(263 72% 68% / .12);
  color:var(--primary);box-shadow:0 0 0 3px hsl(263 72% 68% / .1);
}
.auth-input-dep{
  width:100%;padding:.75rem 1rem;background:hsl(220 35% 10%);
  border:1.5px solid var(--border);border-radius:.875rem;font-size:.9375rem;
  color:var(--fg);transition:border-color .2s,box-shadow .2s,background .2s;
}
.auth-input-dep::placeholder{color:hsl(215 18% 38%);}
.auth-input-dep:focus{background:hsl(220 35% 11%);border-color:var(--primary);box-shadow:0 0 0 3px hsl(263 72% 68% / .13);}
.submit-btn{
  width:100%;padding:.875rem;border-radius:1rem;font-size:.9375rem;font-weight:700;
  color:#fff;display:flex;align-items:center;justify-content:center;gap:.5rem;
  transition:transform .18s,box-shadow .18s,filter .18s;
  box-shadow:var(--shadow-btn);margin-top:.25rem;
  position:relative;overflow:hidden;
}
.submit-btn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,hsl(210 40% 97% / .12),transparent 60%);pointer-events:none;
}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px hsl(263 72% 68% / .48);filter:brightness(1.08);}
.submit-btn:active{transform:translateY(0);}
.submit-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}
.submit-btn.loading .btn-lbl{display:none;}
.submit-btn .spin-ico{animation:spin .7s linear infinite;display:none;}
.submit-btn.loading .spin-ico{display:block;}

/* buy number modal */
.buy-modal{max-width:28rem;}
.buy-step{margin-bottom:1.25rem;}
.buy-step-label{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;}
.buy-confirm-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.75rem 1rem;border-bottom:1px solid hsl(218 22% 20%);
  gap:.75rem;
}
.buy-confirm-row:last-child{border-bottom:0;}
.buy-confirm-row span:last-child{
  text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;
}

/* active number modal */
.active-num-modal{max-width:28rem;}
.num-display{
  background:linear-gradient(135deg,hsl(263 72% 68% / .1),hsl(248 68% 58% / .07));
  border:1.5px solid hsl(263 72% 68% / .3);
  border-radius:1rem;padding:1.25rem;margin-bottom:1.25rem;text-align:center;
  animation:borderGlow 3s ease-in-out infinite;
  transition:background .3s,border-color .3s;
}
html.light .num-display{background:linear-gradient(135deg,hsl(263 72% 60% / .07),hsl(248 68% 52% / .05));border-color:hsl(263 72% 60% / .25);}
.num-val{font-size:1.5625rem;font-weight:900;color:var(--primary);letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.num-country{font-size:.8125rem;color:var(--muted);margin-top:.3125rem;}
.sms-area{
  background:hsl(199 90% 62% / .06);border:1px solid hsl(199 90% 62% / .2);
  border-radius:1rem;padding:1.125rem 1.25rem;margin-bottom:1.25rem;
  min-height:5.5rem;display:flex;align-items:center;justify-content:center;
  text-align:center;transition:background .3s,border-color .3s;
}
html.light .sms-area{background:hsl(199 90% 44% / .05);border-color:hsl(199 90% 44% / .18);}
.sms-waiting{color:var(--muted);font-size:.9375rem;}
.sms-code{font-size:2.5rem;font-weight:900;color:var(--secondary);letter-spacing:.14em;animation:smsPop .5s cubic-bezier(.34,1.56,.64,1);}
.sms-note{font-size:.75rem;color:var(--muted);margin-top:.375rem;}
.cancel-timer{font-size:.75rem;color:var(--muted);text-align:center;margin-top:.625rem;}
.cancel-timer span{color:var(--red);font-weight:700;}

/* ════════════════════════════════════════════  ORDER HISTORY PAGE */
.oh-card{
  border:1px solid var(--border);border-radius:1rem;
  background:var(--card);padding:1rem 1.125rem;
  margin-bottom:.75rem;transition:border-color .2s,box-shadow .2s,transform .18s;
  position:relative;overflow:hidden;
}
.oh-card:last-child{margin-bottom:0;}
.oh-card:hover{border-color:var(--border-2);box-shadow:0 4px 18px hsl(263 72% 68% / .09);transform:translateY(-1px);}
.oh-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.875rem;}
.oh-card-svc{display:flex;align-items:center;gap:.625rem;}
.oh-card-svc-logo{width:2.25rem;height:2.25rem;border-radius:.625rem;background:hsl(220 28% 22%);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.oh-card-svc-logo img{width:1.5rem;height:1.5rem;object-fit:contain;}
.oh-card-svc-name{font-weight:700;font-size:.9375rem;}
.oh-card-svc-country{font-size:.8125rem;color:var(--muted);margin-top:.125rem;display:flex;align-items:center;gap:.25rem;}
.oh-card-meta{text-align:right;flex-shrink:0;}
.oh-card-price{font-size:.9375rem;font-weight:700;color:var(--fg);}
.oh-card-time{font-size:.8125rem;color:var(--muted);margin-top:.125rem;}
.oh-card-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem 0;border-top:1px solid hsl(218 22% 20%);min-height:2.25rem;}
html.light .oh-card-row{border-top-color:hsl(220 15% 90%);}
.oh-card-num{font-size:1rem;font-weight:700;letter-spacing:.03em;color:var(--fg);}
.oh-card-sms{display:flex;align-items:center;gap:.375rem;font-size:.9375rem;font-weight:700;color:var(--green);}
.oh-card-copy{display:flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border-radius:.5rem;border:1px solid var(--border);color:var(--muted);transition:all .15s;flex-shrink:0;cursor:pointer;background:transparent;}
.oh-card-copy:hover{border-color:var(--border-2);color:var(--fg);background:var(--card-hover);}
.oh-repeat-btn{
  width:100%;margin-top:.875rem;padding:.6875rem;border-radius:.75rem;
  font-size:.9375rem;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  transition:filter .18s,transform .18s,box-shadow .18s,opacity .18s;
  position:relative;overflow:hidden;
}
.oh-repeat-btn:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 6px 20px hsl(263 72% 68% / .3);}
.oh-repeat-btn:active{transform:translateY(0);filter:brightness(.98);}
.oh-repeat-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;filter:none;}
.oh-status-badge{
  display:inline-flex;align-items:center;padding:.1875rem .625rem;border-radius:9999px;
  font-size:.75rem;font-weight:700;letter-spacing:.01em;
}
.oh-status-completed{background:hsl(152 60% 40% / .14);color:var(--green);border:1px solid hsl(152 60% 40% / .25);}
.oh-status-expired{background:hsl(0 84% 60% / .12);color:var(--red);border:1px solid hsl(0 84% 60% / .22);}
.oh-status-cancelled{background:hsl(0 84% 60% / .12);color:var(--red);border:1px solid hsl(0 84% 60% / .22);}
.oh-status-active{background:hsl(45 93% 50% / .14);color:var(--yellow);border:1px solid hsl(45 93% 50% / .25);}

/* ════════════════════════════════════════════  CHILD PANEL TAB */
.cp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.5rem;color:var(--muted);text-align:center;}

/* ════════════════════════════════════════════  TOAST */
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;
  display:flex;align-items:center;gap:.75rem;
  padding:.875rem 1.25rem;border-radius:1rem;
  background:hsl(220 32% 18%);border:1px solid hsl(218 22% 30%);
  box-shadow:0 12px 36px hsl(220 40% 3% / .55),0 0 0 1px hsl(263 72% 68% / .06);
  font-size:.9rem;font-weight:500;max-width:22rem;
  animation:toastIn .28s cubic-bezier(.34,1.2,.64,1);
}
.toast.hiding{animation:toastIn .25s ease reverse forwards;}
.toast.hidden{display:none;}
.t-ico{width:2rem;height:2rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toast.success .t-ico{background:hsl(152 60% 40% / .18);color:var(--green);}
.toast.error   .t-ico{background:hsl(0 84% 60% / .14);color:var(--red);}
.toast.info    .t-ico{background:hsl(263 72% 68% / .14);color:var(--primary);}

/* ════════════════════════════════════════════  WA BUTTON */
.wa-btn{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:100;
  width:3.375rem;height:3.375rem;border-radius:50%;background:#25d366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px #25d36650,0 1px 0 #43e87a44 inset;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.wa-btn:hover{transform:scale(1.13);box-shadow:0 8px 28px #25d36670;}
/* On mobile, lift above bottom nav bar */
@media(max-width:767px){.wa-btn{bottom:5.5rem;right:.875rem;width:3rem;height:3rem;}}

/* ════════════════════════════════════════════  FOOTER */
.site-footer{
  background:hsl(220 35% 7%);
  border-top:1px solid hsl(218 22% 18%);
  margin-top:2rem;
}
html.light .site-footer{background:hsl(220 20% 10%);border-top-color:hsl(218 22% 16%);}
.footer-main{
  max-width:1300px;margin:0 auto;
  padding:2rem 1.25rem 2rem;
  display:grid;gap:1.75rem;
  /* Mobile: brand full width, then 2-col for links */
  grid-template-columns:1fr 1fr;
}
/* Brand takes full width on mobile */
.footer-brand{grid-column:1/-1;}
@media(min-width:640px){
  .footer-main{grid-template-columns:repeat(3,1fr);padding:2.5rem 1.5rem 2rem;gap:2rem;}
  .footer-brand{grid-column:1/-1;}
}
@media(min-width:900px){
  .footer-main{grid-template-columns:1.8fr 1fr 1fr 1fr;gap:2rem;}
  .footer-brand{grid-column:auto;}
}
@media(min-width:1024px){.footer-main{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:2rem;}}
.footer-brand{}
.footer-logo{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem;}
.footer-logo-box{
  width:2.75rem;height:2.75rem;border-radius:.75rem;
  display:flex;align-items:center;justify-content:center;
  background:hsl(199 89% 48%);flex-shrink:0;
  box-shadow:0 4px 14px hsl(199 89% 48% / .4);
}
.footer-logo-text{font-size:1.3125rem;font-weight:900;color:#fff;letter-spacing:-.02em;}
.footer-logo-otp{color:var(--primary);}
.footer-desc{font-size:.875rem;color:hsl(215 18% 55%);line-height:1.7;margin-bottom:1.25rem;max-width:100%;}
html.light .footer-desc{color:hsl(215 12% 52%);}
.footer-social{display:flex;gap:.5rem;}
.footer-social-btn{
  width:2.375rem;height:2.375rem;border-radius:.625rem;
  display:flex;align-items:center;justify-content:center;
  background:hsl(220 28% 14%);border:1px solid hsl(218 22% 22%);
  color:hsl(215 18% 55%);transition:all .18s;
}
html.light .footer-social-btn{background:hsl(220 18% 16%);border-color:hsl(218 18% 20%);color:hsl(215 12% 60%);}
.footer-social-btn:hover{background:hsl(220 28% 20%);border-color:hsl(218 22% 30%);color:#fff;}
.footer-col-title{font-size:.8125rem;font-weight:700;color:#fff;margin-bottom:1rem;letter-spacing:.02em;}
html.light .footer-col-title{color:hsl(210 40% 92%);}
.footer-links{display:flex;flex-direction:column;gap:.5rem;}
.footer-link{
  font-size:.8125rem;color:hsl(215 18% 55%);transition:color .15s;
  cursor:pointer;width:fit-content;
}
html.light .footer-link{color:hsl(215 12% 52%);}
.footer-link:hover{color:hsl(215 18% 80%);}
html.light .footer-link:hover{color:hsl(215 12% 75%);}
.footer-divider{
  max-width:1300px;margin:0 auto;
  border:none;height:1px;background:hsl(218 22% 16%);
}
html.light .footer-divider{background:hsl(218 18% 18%);}
.footer-bottom{
  max-width:1300px;margin:0 auto;
  padding:1rem 1.25rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;
}
@media(min-width:640px){.footer-bottom{flex-direction:row;justify-content:space-between;text-align:left;padding:1.25rem 1.5rem;}}
.footer-copyright{font-size:.8125rem;color:hsl(215 18% 45%);}
html.light .footer-copyright{color:hsl(215 12% 46%);}
.footer-tagline{font-size:.8125rem;color:hsl(215 18% 40%);}
html.light .footer-tagline{color:hsl(215 12% 42%);}
.footer-badges{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;
  padding:1.25rem 1.25rem 0;max-width:1300px;margin:0 auto;
}
@media(min-width:768px){.footer-badges{padding:1.5rem 1.5rem 0;}}
.footer-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border-radius:9999px;font-size:.8125rem;
  background:hsl(220 28% 12%);border:1px solid hsl(218 22% 20%);
  font-size:.875rem;font-weight:600;color:hsl(215 18% 72%);
  transition:border-color .18s;
}
html.light .footer-badge{background:hsl(220 18% 14%);border-color:hsl(218 18% 20%);color:hsl(215 12% 70%);}
.footer-badge:hover{border-color:hsl(218 22% 32%);}
.footer-badge svg{flex-shrink:0;color:hsl(199 89% 60%);}

/* ════════════════════════════════════════════  SERVICE GRID EXPANDED */
.svc-grid-expanded{
  max-height:22rem;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:hsl(218 22% 30%) transparent;
}
.svc-grid-expanded::-webkit-scrollbar{width:.25rem;}
.svc-grid-expanded::-webkit-scrollbar-thumb{background:hsl(218 22% 30%);border-radius:9999px;}
/* fallback icon when favicon doesn't load */
.svc-fallback-ico{
  width:1.25rem;height:1.25rem;border-radius:50%;
  background:hsl(218 22% 30%);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
html.light .svc-fallback-ico{background:hsl(220 15% 82%);}

/* ════════════════════════════════════════════
   MOBILE BOTTOM NAV BAR (app-style like 247otp)
════════════════════════════════════════════ */
.mob-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:var(--bg-alt);
  border-top:1px solid var(--border);
  padding:.375rem .5rem calc(.375rem + env(safe-area-inset-bottom));
  gap:.125rem;
  box-shadow:0 -4px 24px hsl(220 40% 3% / .35);
  transition:background .3s,border-color .3s;
}
@media(max-width:767px){.mob-bottom-nav{display:flex;}}
html.light .mob-bottom-nav{background:hsl(0 0% 100%);box-shadow:0 -2px 16px hsl(220 25% 12% / .08);}

.mob-bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;padding:.375rem .25rem;border-radius:.625rem;
  font-size:.625rem;font-weight:600;color:var(--muted);
  transition:color .15s,background .15s;cursor:pointer;border:none;background:none;
  min-width:0;letter-spacing:.01em;
}
.mob-bn-item:hover{color:var(--fg);}
.mob-bn-item.active{color:var(--primary);}
.mob-bn-item svg{flex-shrink:0;transition:transform .2s;}
.mob-bn-item.active svg{transform:scale(1.1);}
.mob-bn-dot{
  width:.3125rem;height:.3125rem;border-radius:50%;
  background:var(--primary);margin-top:.125rem;
  opacity:0;transition:opacity .2s;
}
.mob-bn-item.active .mob-bn-dot{opacity:1;}

/* Mobile: add padding to bottom so content not hidden behind nav */
@media(max-width:767px){
  main.container{padding-bottom:5.5rem !important;}
  /* Reduce top padding since tabs take some space */
  main.container{padding-top:.875rem !important;}
  /* Hide hamburger menu entirely on mobile since we have bottom nav */
  #mob-ham{display:none !important;}
  #mob-menu{display:none !important;}
  /* Show tabs on mobile — compact horizontal scrollable */
  .tabs-wrap{
    display:block !important;
    border-radius:.75rem !important;
    padding:.25rem !important;
    margin-bottom:.875rem !important;
  }
  .tabs-inner{ gap:.2rem !important; }
  .tab-btn{
    padding:.4375rem .625rem !important;
    font-size:.72rem !important;
    gap:.275rem !important;
    border-radius:.5rem !important;
  }
  .tab-btn svg{ width:12px !important; height:12px !important; }
  /* Mobile header compact */
  .header-inner{height:3.25rem !important;}
}

/* Mobile: full-width single column always */
@media(max-width:767px){
  .main-grid{grid-template-columns:1fr !important;}
  /* Service grid 2-col on mobile */
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  /* Stats strip hidden on mobile (shown in stats tab instead) */
  #stat-strip{display:none !important;}
  /* Promo banner compact */
  .promo-banner{padding:1rem !important;}
  .promo-title{font-size:1.125rem !important;}
  .promo-img{display:none !important;}
  /* Panel padding tighter */
  .panel{padding:.875rem !important;}
  /* qs-grid 2x2 on mobile */
  .qs-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  /* fav grid single col */
  .favs-grid{grid-template-columns:1fr !important;}
  /* aff stats */
  #aff-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* Mobile page title bar */
.mob-page-title{
  display:none;
}
@media(max-width:767px){
  .mob-page-title{
    display:flex;align-items:center;gap:.5rem;
    font-size:1.0625rem;font-weight:700;
    padding:.625rem 0 .875rem;
    color:var(--fg);
  }
  .mob-page-title svg{color:var(--primary);}
}

/* ════════════════════════════════════════════
   MOBILE: Quick action fab (deposit button)
════════════════════════════════════════════ */
.mob-fab{
  display:none;
}
@media(max-width:767px){
  .mob-fab{
    display:flex;
    position:fixed;bottom:4.75rem;right:1rem;z-index:99;
    width:3.25rem;height:3.25rem;border-radius:50%;
    align-items:center;justify-content:center;
    box-shadow:0 4px 20px hsl(263 72% 68% / .45);
    transition:transform .2s,box-shadow .2s;
  }
  .mob-fab:hover{transform:scale(1.08);box-shadow:0 6px 28px hsl(263 72% 68% / .55);}
}

/* responsive */
@media(max-width:640px){
  .panel{padding:.875rem;}
  .promo-img{display:none;}
  .main-grid{gap:.75rem;}
  .oh-table th:nth-child(3),.oh-table td:nth-child(3){display:none;}
  .modal{padding:1.5rem 1.125rem;border-radius:1.125rem;}
  .modal-title{font-size:1.125rem;}
  .buy-confirm-row{padding:.625rem .875rem;}
  .tabs-wrap{border-radius:.75rem;padding:.25rem;}
  .tab-btn{padding:.4375rem .5625rem;font-size:.75rem;gap:.3rem;}
  .promo-banner{padding:1.25rem;}
  .promo-title{font-size:1.25rem;}
  main.container{padding-left:.75rem;padding-right:.75rem;}
}
@media(max-width:480px){
  .overlay{padding:.5rem;}
  .modal{padding:1.25rem .9375rem;max-width:100%;}
  .dep-methods{gap:.375rem;}
  .num-val{font-size:1.25rem;}
  .buy-confirm-row span:last-child{max-width:55%;}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fav-price{font-size:.6875rem;}
  .qs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:380px){
  .svc-grid{grid-template-columns:1fr;}
  .promo-title{font-size:1.0625rem;}
  .tab-btn{padding:.375rem .4375rem;font-size:.6875rem;}
  .header-inner{padding:0 .625rem;}
  .fav-item{padding:.4375rem .5rem;}
  .panel{padding:.75rem;}
  .qs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .qs-val{font-size:1.375rem;}
}

/* ════════════════════════════════════════════  SCROLLBAR (webkit) */
::-webkit-scrollbar{width:.25rem;height:.25rem;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:hsl(218 22% 28%);border-radius:9999px;}
::-webkit-scrollbar-thumb:hover{background:hsl(218 22% 36%);}

/* =====================================
   RESPONSIVE FIX FOR PHONE / DESKTOP
=====================================*/

@media (max-width: 768px) {
  body{font-size:14px;}
  .container{padding:0 10px;}
  .header-inner{height:60px;padding:0 10px;}
  .logo-text{font-size:16px;}
  .panel{padding:12px;}
  .panel-title{font-size:16px;}
  .main-grid{grid-template-columns:1fr !important;}
  .svc-grid{grid-template-columns:1fr;}
  .promo-title{font-size:18px;}
  .promo-price-new{font-size:22px;}
  .order-number{font-size:16px;}
  .fav-service{font-size:14px;}
  .modal{width:95%;padding:20px;}
}

@media (min-width:769px) and (max-width:1024px){
  .container{max-width:900px;}
  .main-grid{grid-template-columns:1fr 1fr;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:1200px){
  .container{max-width:1400px;}
  .main-grid{grid-template-columns:420px 1fr;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
}

/* ==============================
   MOBILE PIXEL PERFECT LAYOUT
============================== */

/* Small phones (320px – 360px) */
@media (max-width:360px){

.container{
padding:0 8px;
}

.panel{
padding:10px;
}

.logo-text{
font-size:14px;
}

.svc-grid{
grid-template-columns:1fr;
}

.order-number{
font-size:14px;
}

.modal{
width:96%;
padding:18px;
}

}


/* Normal phones (361px – 480px) */

@media (min-width:361px) and (max-width:480px){

.container{
padding:0 10px;
}

.main-grid{
grid-template-columns:1fr;
}

.panel{
padding:12px;
}

.logo-text{
font-size:15px;
}

.svc-grid{
grid-template-columns:1fr;
}

.order-number{
font-size:15px;
}

}


/* Large phones (481px – 768px) */

@media (min-width:481px) and (max-width:768px){

.container{
padding:0 14px;
}

.main-grid{
grid-template-columns:1fr;
}

.svc-grid{
grid-template-columns:repeat(2,1fr);
}

.panel{
padding:14px;
}

.logo-text{
font-size:16px;
}

}


/* =================================
   MOBILE SERVICES PAGE PERFECT FIX
================================= */
@media (max-width:768px){

html,body{
width:100%;
max-width:100%;
overflow-x:hidden;
}

/* stack main layout */
.main-grid{
display:flex !important;
flex-direction:column !important;
gap:16px;
}

/* services list single column */
.svc-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}

/* service item full width */
.svc-item{
width:100%;
padding:14px;
font-size:14px;
}

/* pinned service */
.svc-pinned{
flex-direction:row;
padding:14px;
}

/* country section under services */
.countries-wrap{
max-height:none;
width:100%;
}

/* country rows */
.country-row{
padding:14px;
}

/* panels full width */
.panel{
width:100%;
padding:16px;
}

/* promo banner fit */
.promo-banner{
padding:20px 16px;
}

/* modal mobile width */
.modal{
width:95%;
max-width:95%;
}

}


/* ===== Active orders appear above services on mobile ===== */
@media (max-width:768px){
#activeOrders{
order:-1;
margin-bottom:12px;
}
}

/* active order card style */
.order-card{
background:var(--card);
border-radius:14px;
padding:14px;
border:1px solid var(--border);
margin-bottom:10px;
}

.order-number{
font-size:18px;
font-weight:700;
color:var(--primary);
}

.order-actions{
display:flex;
gap:10px;
margin-top:8px;
}




/* show only first 11 services initially */
.svc-grid .svc-item:nth-child(n+12){display:none;}

/* expanded show all */
.svc-grid.expanded .svc-item{display:flex;}

/* scroll like countries */
.services-scroll{
height:420px;
overflow-y:auto;
overflow-x:hidden;
padding-right:4px;
}
.services-scroll::-webkit-scrollbar{width:4px;}
.services-scroll::-webkit-scrollbar-thumb{background:#888;border-radius:10px;}

/* MOBILE GRID LIKE 247OTP */
@media(max-width:768px){
.svc-grid{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
gap:12px !important;
}
.svc-item{
display:flex;
align-items:center;
gap:10px;
padding:12px;
border-radius:12px;
}
}



/* WhatsApp Floating Button Position Fix */
.wp-float-btn{
position:fixed;
right:18px;
bottom:160px !important;
z-index:9999;
width:56px;
height:56px;
border-radius:50%;
background:#25D366;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 25px rgba(0,0,0,0.25);
}

/* Ensure it stays above mobile nav */
@media (max-width:768px){
.wp-float-btn{
bottom:160px !important;
}
}

/* Light mode toggle color fix */
html.light .theme-toggle{
background:#ffffff !important;
border:1px solid #e5e7eb !important;
color:#6366f1 !important;
}

html.light .theme-toggle:hover{
background:#f3f4f6 !important;
color:#4f46e5 !important;
}

/* Hide floating add funds button if present */
.fab,
.mob-fab,
.add-funds-btn,
.float-add,
.floating-add,
button[title="Add Funds"],
button[aria-label="Add Funds"]{
display:none !important;
}



      @media(max-width:767px){#stat-strip{display:none !important;}}
      @media(min-width:640px){#stat-strip{grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.375rem;}}
      @media(min-width:1024px){#stat-strip{grid-template-columns:repeat(4,1fr);}}
      .favs-grid{display:grid;grid-template-columns:1fr;gap:.375rem;}
      @media(min-width:480px){.favs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;}}
      @media(min-width:1024px){.favs-grid{grid-template-columns:1fr;}}
      @media(min-width:1280px){.favs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
      .stat-card-inner{display:flex;align-items:center;gap:.625rem;}
      .stat-ico-box{width:2.25rem;height:2.25rem;border-radius:.625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
      @media(min-width:480px){.stat-ico-box{width:2.375rem;height:2.375rem;}}
      .stat-val-txt{font-size:1rem;font-weight:800;line-height:1;margin-bottom:.125rem;}
      @media(min-width:480px){.stat-val-txt{font-size:1.125rem;}}
      .stat-lbl-txt{font-size:.6875rem;color:var(--muted);white-space:nowrap;}
      @media(min-width:480px){.stat-lbl-txt{font-size:.75rem;}}
    


        @media(min-width:480px){#aff-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;}}
/* ═══════════════════ SKELETON LOADER ═══════════════════ */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/* ═══════════════════ SERVICE NOTE CARD ═══════════════════ */
.svc-note-card {
  padding: .6875rem .875rem;
  border-radius: .5625rem;
  background: hsl(38 92% 58% / .12);
  border: 1px solid hsl(38 92% 58% / .35);
  animation: fadeSlideDown .22s ease;
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.svc-note-text {
  color: hsl(38 55% 72%);
}
html.light .svc-note-card {
  background: hsl(38 95% 55% / .1);
  border-color: hsl(38 92% 50% / .35);
}
html.light .svc-note-text {
  color: hsl(32 65% 28%);
}
/* ── Service Note Card — light mode fix ── */
html.light #svc-note-card {
  background: linear-gradient(135deg, hsl(38 92% 52% / .12) 0%, hsl(38 92% 52% / .06) 100%);
  border-color: hsl(38 80% 45% / .5);
}
html.light #svc-note-card > div:first-child {
  background: hsl(38 92% 52% / .2);
  border-bottom-color: hsl(38 80% 45% / .3);
}
/* ── Active Orders Scrollable Container ── */
#active-orders-wrap {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: hsl(199 89% 50% / .5) hsl(199 89% 50% / .08);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#active-orders-wrap::-webkit-scrollbar {
  width: 5px;
}
#active-orders-wrap::-webkit-scrollbar-track {
  background: hsl(199 89% 50% / .08);
  border-radius: 9999px;
}
#active-orders-wrap::-webkit-scrollbar-thumb {
  background: hsl(199 89% 50% / .5);
  border-radius: 9999px;
}
#active-orders-wrap::-webkit-scrollbar-thumb:hover {
  background: hsl(199 89% 50% / .8);
}/* ═══════════════════════════════════════════════════════════════
   PROMO BANNER CAROUSEL — append to assets/dashboard.css
   IMPORTANT: Do NOT modify or remove any existing .promo-* rules
   in dashboard.css. The Vietnam slide reuses them VERBATIM.
   This file only ADDS:
     • carousel wrapper (.promo-carousel, .promo-track, .promo-slide, .promo-dots)
     • slide 2 styles (.promo2-*)
   No selector here overrides the original .promo-* rules.
   ═══════════════════════════════════════════════════════════════ */

/* ── carousel wrapper (does NOT touch .promo-banner) ── */
.promo-carousel{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  user-select:none;
  cursor:grab;
}
.promo-carousel:active{cursor:grabbing;}
.promo-track{display:flex;width:100%;will-change:transform;}
.promo-slide{flex:0 0 100%;min-width:0;}

/* ── dots ── */
.promo-dots{
  position:absolute;bottom:.55rem;left:0;right:0;
  display:flex;justify-content:center;gap:.375rem;z-index:3;
  pointer-events:none;
}
.promo-dot{
  pointer-events:auto;
  width:.45rem;height:.45rem;border-radius:9999px;
  background:rgba(255,255,255,.45);border:none;cursor:pointer;padding:0;
  transition:width .3s, background .3s;
}
.promo-dot.is-active{width:1.4rem;background:#fff;}

/* ═══════════════════════════════════════════════════════════════
   SLIDE 2 ONLY — BIGGEST OFFER banner (.promo2-*)
   Independent styles — no overlap with original .promo-*.
   ═══════════════════════════════════════════════════════════════ */

.promo2-banner{
  position:relative;
  border-radius:var(--radius-lg);
  padding:1.625rem 1.5rem 2.2rem;
  background:
    radial-gradient(120% 90% at 100% 0%, hsl(285 90% 65% / .55) 0%, transparent 55%),
    radial-gradient(120% 100% at 0% 100%, hsl(220 90% 55% / .5)  0%, transparent 55%),
    var(--gradient-banner);
  color:#fff;
  overflow:hidden;
  box-shadow:0 8px 32px hsl(263 65% 52% / .3), 0 1px 0 hsl(210 40% 97% / .12) inset;
}
.promo2-banner::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,hsl(0 0% 100% / .08),transparent 55%);
  pointer-events:none;
}
.promo2-shine{
  position:absolute;top:-100%;left:-30%;
  width:40%;height:300%;
  background:linear-gradient(115deg,transparent 40%,hsl(0 0% 100% / .18) 50%,transparent 60%);
  transform:rotate(20deg);
  animation:promo2Shine 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes promo2Shine{
  0%,60%,100%{transform:translateX(-30%) rotate(20deg);opacity:0;}
  70%{opacity:1;}
  90%{transform:translateX(380%) rotate(20deg);opacity:0;}
}

.promo2-bg-circle-1{position:absolute;top:1rem;right:4rem;width:5rem;height:5rem;border:1.5px solid rgba(255,255,255,.2);border-radius:50%;animation:promo2Pulse 3s ease-in-out infinite;}
.promo2-bg-circle-2{position:absolute;bottom:1.5rem;right:9rem;width:2.5rem;height:2.5rem;border:1.5px solid rgba(255,255,255,.14);border-radius:50%;}
.promo2-bg-dot{position:absolute;top:3rem;right:14rem;width:.85rem;height:.85rem;background:rgba(255,255,255,.22);border-radius:50%;}
@keyframes promo2Pulse{
  0%,100%{opacity:.6;transform:scale(1);}
  50%{opacity:1;transform:scale(1.08);}
}

.promo2-inner{position:relative;z-index:1;}
.promo2-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:linear-gradient(135deg,hsl(45 95% 60% / .35),hsl(35 95% 55% / .25));
  border:1px solid hsl(45 95% 70% / .55);
  border-radius:9999px;padding:.3rem .85rem;
  font-size:.72rem;font-weight:800;margin-bottom:.875rem;
  letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 0 16px hsl(45 95% 60% / .35);
  backdrop-filter:blur(10px);
}
.promo2-title{
  font-size:1.5rem;font-weight:900;
  margin-bottom:.5rem;
  letter-spacing:-.02em;line-height:1.15;
}
.promo2-accent{
  background:linear-gradient(135deg,hsl(45 100% 70%),hsl(30 100% 65%));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.promo2-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0 .75rem;}
.promo2-chip{
  font-size:.7rem;font-weight:700;
  padding:.22rem .6rem;border-radius:9999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);white-space:nowrap;
}
.promo2-chip-fire{
  background:linear-gradient(135deg,hsl(20 100% 60% / .35),hsl(0 90% 60% / .25));
  border-color:hsl(20 100% 70% / .5);
}
.promo2-details{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.625rem;}
.promo2-price-old{font-size:.9375rem;text-decoration:line-through;opacity:.55;}
.promo2-arrow{font-size:1.1rem;opacity:.7;}
.promo2-price-new{
  font-size:1.75rem;font-weight:900;letter-spacing:-.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.25);
}
.promo2-save{
  font-size:.65rem;font-weight:900;letter-spacing:.08em;
  padding:.2rem .55rem;border-radius:9999px;
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
  box-shadow:0 4px 12px hsl(142 70% 35% / .45);
}
.promo2-note{font-size:.8125rem;opacity:.85;line-height:1.45;max-width:36rem;}

@media (max-width:640px){
  .promo2-banner{padding:1.1rem 1rem 2rem;}
  .promo2-title{font-size:1.15rem;}
  .promo2-price-new{font-size:1.45rem;}
  .promo2-chip{font-size:.62rem;}
  .promo2-bg-circle-1,.promo2-bg-circle-2,.promo2-bg-dot{display:none;}
}

/* ── carousel slide size equalizer ── */
.promo-track{align-items:stretch;}
.promo-slide{display:flex;}
.promo-slide > .promo-banner,
.promo-slide > .promo2-banner{
  flex:1 1 auto;
  width:100%;
  min-height:196px;
  box-sizing:border-box;
}

.promo-slide > .promo-banner{
  display:flex;
  align-items:center;
  padding-right:9rem;
}

.promo-slide > .promo-banner .promo-inner{
  max-width:100%;
}

.promo-slide > .promo-banner .promo-note{
  max-width:34rem;
}

.promo-slide > .promo-banner .promo-img{
  right:1.5rem;
}