/* ============================================================
   MyBL — Home Screen  |  style.css
   ============================================================ */

:root{
  --orange:        #F1662A;
  --orange-deep:   #E4551B;
  --orange-soft:   #FDF0E6;
  --head-1:        #FDEBDC;
  --head-2:        #FEF4EA;
  --ink:           #12100E;
  --ink-2:         #2B2724;
  --muted:         #8B8480;
  --line:          #ECE8E5;
  --green:         #04A54B;
  --green-2:       #0E9F4A;
  --card-radius:   16px;
  --shadow-sm:     0 1px 3px rgba(23,17,12,.06), 0 1px 2px rgba(23,17,12,.04);
  --shadow-md:     0 6px 18px rgba(60,40,25,.10);
  --nav-h:         64px;
  --promo-h:       74px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:#DCDCDC;
  font-family:'Inter','Hind Siliguri',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  justify-content:center;
  align-items:center;
}

button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
svg{ display:block; }

/* ---------- Phone frame ---------- */
.phone{
  position:relative;
  width:100%;
  max-width:412px;
  height:100vh;
  max-height:892px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
@media (min-width:520px) and (min-height:900px){
  .phone{ border-radius:38px; }
}

/* ============================================================
   STATUS BAR
   ============================================================ */
.statusbar{
  flex:0 0 auto;
  height:46px;
  padding:0 24px 0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--head-1);
  position:relative;
  z-index:6;
}
.sb-time{ font-size:17px; font-weight:600; letter-spacing:.2px; color:#000; }
.sb-right{ display:flex; align-items:center; gap:6px; }
.sb-signal{ width:19px; height:13px; fill:#000; }
.sb-wifi{ width:17px; height:13px; fill:#000; }

.sb-battery{ display:flex; align-items:center; gap:1.5px; }
.sb-batt-body{
  width:29px; height:15px;
  border-radius:4.5px;
  background:#000;
  display:flex; align-items:center; justify-content:center;
}
.sb-batt-level{ font-size:10.5px; font-weight:700; color:#fff; letter-spacing:-.2px; }
.sb-batt-cap{ width:2px; height:5px; border-radius:0 2px 2px 0; background:rgba(0,0,0,.35); }

/* ============================================================
   HEADER
   ============================================================ */
.app-header{
  flex:0 0 auto;
  position:relative;
  z-index:5;
  padding:6px 0 0;
  background:linear-gradient(180deg,var(--head-1) 0%,var(--head-1) 46%,var(--head-2) 100%);
  overflow:hidden;
}
.deco-circle{
  position:absolute;
  left:-64px; top:32px;
  width:130px; height:130px;
  border-radius:50%;
  background:var(--orange);
  opacity:.92;
  pointer-events:none;
}

.header-top{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 16px 0 16px;
  min-height:58px;
}

.avatar{
  flex:0 0 auto;
  width:52px; height:52px;
  border-radius:50%;
  background:#fff;
  border:1.6px solid #F6DFCC;
  display:grid; place-items:center;
}
.avatar svg{ width:27px; height:27px; fill:var(--orange); }

.user-block{ flex:0 0 auto; margin-left:2px; }
.user-name{
  display:flex; align-items:center; gap:6px;
  font-size:20px; font-weight:700; letter-spacing:-.2px; color:var(--ink);
}
.user-name .caret{ width:11px; height:7px; fill:none; stroke:var(--ink); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.user-msisdn{ font-size:13.5px; font-weight:500; color:#5C5450; margin-top:1px; letter-spacing:.1px; }

/* heart logo */
.brand-logo{
  position:absolute;
  left:50%;
  top:-2px;
  transform:translateX(-46%) rotate(-8deg);
  width:56px; height:54px;
  filter:drop-shadow(0 3px 5px rgba(224,112,40,.35));
  pointer-events:none;
}
.brand-logo svg{ width:100%; height:100%; }
.hl-back{ fill:#FBB040; }
.hl-front{ fill:#F1662A; }

.header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
}
.hbtn svg{
  width:25px; height:25px;
  fill:none; stroke:#171310;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
}
.hbtn:last-child svg{ stroke-width:2; }

/* ---------- Tier row ---------- */
.tier-row{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:10px;
  padding:14px 16px 16px;
}
.tier-card{
  flex:1 1 auto;
  min-width:0;
  height:56px;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 16px 0 12px;
}
.tier-badge{ flex:0 0 auto; width:31px; height:31px; }
.tier-badge svg{ width:100%; height:100%; }
.tb-ribbon{ fill:#C8874A; }
.tb-outer{ fill:#B8763C; }
.tb-inner{ fill:none; stroke:#F0C79A; stroke-width:1.6; }
.tb-star{ fill:#FBE3C8; }

.tier-name{
  font-size:15.5px; font-weight:800; letter-spacing:.2px; color:var(--ink);
  white-space:nowrap;
}
.tier-coins{
  margin-left:auto;
  display:flex; align-items:center; gap:7px;
  font-size:15.5px; font-weight:800; color:var(--ink);
  white-space:nowrap;
}
.coin-emoji{ font-size:15px; line-height:1; }

.scan-btn{
  flex:0 0 auto;
  width:58px; height:56px;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  display:grid; place-items:center;
}
.scan-btn svg{
  width:26px; height:26px;
  fill:none; stroke:var(--orange);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

/* ============================================================
   CONTENT
   ============================================================ */
.content{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  background:#fff;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.content::-webkit-scrollbar{ display:none; }

.scroll-tail{ height:calc(var(--promo-h) + var(--nav-h) + 18px); }

/* ---------- Balance block ---------- */
.balance-block{ padding:16px 16px 4px; }

.balance-top{
  display:flex;
  align-items:stretch;
  gap:10px;
  padding-bottom:14px;
}

.bal-left{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding-right:14px;
  border-right:1px solid var(--line);
  min-width:190px;
}
.taka-tile{
  width:52px; height:52px;
  border-radius:12px;
  background:var(--orange-soft);
  display:grid; place-items:center;
  font-size:25px; font-weight:700; color:var(--orange);
  font-family:'Hind Siliguri','Inter',sans-serif;
  line-height:1;
}
.bal-amount{ font-size:31px; font-weight:800; letter-spacing:-.9px; line-height:1.05; color:var(--ink); }
.bal-valid{ font-size:12.5px; font-weight:500; color:var(--muted); margin-top:2px; }

.bal-right{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  padding-left:4px;
}
.bal-row{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
}
.bal-ico{
  flex:0 0 auto;
  width:21px; height:21px;
  fill:none; stroke:var(--orange);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.bal-val{ font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.2px; }
.bal-val i{ font-style:normal; font-weight:700; }
.chev{
  width:7px; height:12px;
  fill:none; stroke:#3C3833;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.bal-row .chev{ margin-left:auto; }

/* ---------- Get loan ---------- */
.loan-row{
  width:100%;
  height:48px;
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  background:#fff;
}
.loan-left{ display:flex; align-items:center; gap:11px; }
.loan-ico{
  width:21px; height:21px;
  fill:none; stroke:var(--orange);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.loan-txt{ font-size:15.5px; font-weight:600; color:var(--ink-2); }
.loan-right{
  display:flex; align-items:center; gap:12px;
  font-size:15.5px; font-weight:600; color:var(--ink-2);
  font-family:'Hind Siliguri','Inter',sans-serif;
}

/* ---------- Amount + chips ---------- */
.amount-row{
  margin-top:12px;
  height:56px;
  background:#F5F4F2;
  border-radius:14px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.amount-input{
  flex:0 0 auto;
  width:150px;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  padding:0 14px 0 16px;
  font-size:16.5px;
  font-weight:500;
  color:var(--ink);
  border-right:1px solid #E2E0DD;
}
.amount-input::placeholder{ color:#9A938E; font-weight:500; }

.chips{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto;
  height:38px;
  min-width:78px;
  padding:0 16px;
  border:1px solid #E3E1DE;
  border-radius:9px;
  background:#fff;
  font-size:15.5px;
  font-weight:600;
  color:var(--ink-2);
  font-family:'Hind Siliguri','Inter',sans-serif;
  transition:background .15s, border-color .15s, color .15s;
}
.chip.selected{
  border-color:var(--orange);
  background:var(--orange-soft);
  color:var(--orange-deep);
}

/* ---------- Recharge ---------- */
.recharge-btn{
  margin-top:14px;
  width:100%;
  height:56px;
  border-radius:13px;
  background:linear-gradient(180deg,var(--green) 0%,var(--green-2) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  box-shadow:0 4px 12px rgba(4,165,75,.22);
}
.recharge-btn:active{ transform:translateY(1px); }
.pay-stack{ display:flex; align-items:center; }
.pay{
  width:29px; height:29px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid #fff;
  display:grid; place-items:center;
  margin-left:-9px;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.pay:first-child{ margin-left:0; }
.pay svg{ width:17px; height:17px; }
.pay.bkash svg{ fill:#E2136E; }
.pay.nagad svg{ fill:none; stroke:#EE1C25; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pay.more{
  background:#F0EEEC;
  font-size:11.5px; font-weight:700; color:#3C3833;
}
.recharge-label{ font-size:18px; font-weight:700; color:#fff; letter-spacing:-.1px; }

/* ---------- Plans & Offers ---------- */
.plans{ padding:22px 0 0; }
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px 14px;
}
.section-head h2{
  margin:0;
  font-size:21px;
  font-weight:700;
  letter-spacing:-.4px;
  color:var(--ink);
}
.see-all{
  width:46px; height:38px;
  border:1px solid var(--line);
  border-radius:11px;
  display:grid; place-items:center;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.plan-scroller{
  display:flex;
  gap:12px;
  padding:4px 16px 6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.plan-scroller::-webkit-scrollbar{ display:none; }

.plan-card{
  position:relative;
  flex:0 0 auto;
  width:99px;
  height:110px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:8px 4px;
}
.plan-card .dot{
  position:absolute;
  top:9px; right:10px;
  width:8px; height:8px;
  border-radius:50%;
  background:#F0442C;
}
.plan-ico{
  width:28px; height:28px;
  fill:none; stroke:var(--orange);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.plan-label{
  font-size:13.5px;
  font-weight:600;
  line-height:1.28;
  text-align:center;
  color:var(--ink-2);
}

/* ---------- Banners ---------- */
.banner-scroller{
  display:flex;
  gap:12px;
  padding:20px 0 6px 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.banner-scroller::-webkit-scrollbar{ display:none; }
.banner-scroller > .banner:first-child{ margin-left:-14px; }
.banner-scroller > .banner:last-child{ margin-right:16px; }

.banner{
  flex:0 0 auto;
  width:245px;
  height:112px;
  border-radius:14px;
  overflow:hidden;
  position:relative;
}

/* purple super surprise */
.banner-purple{
  background:linear-gradient(160deg,#7B2FA8 0%,#5E1F8C 55%,#4B1673 100%);
  display:grid;
  place-items:center;
}
.banner-purple .stripes{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 3px,transparent 3px 13px);
}
.super-text{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:.94;
  font-family:'Hind Siliguri',sans-serif;
  transform:rotate(-2deg);
}
.super-text .l1{
  font-size:26px; font-weight:700; color:#fff;
  text-shadow:0 2px 0 #3D0F63, 0 4px 8px rgba(0,0,0,.45);
}
.super-text .l2{
  font-size:34px; font-weight:700;
  background:linear-gradient(180deg,#FFE9A8 0%,#FFC93C 45%,#F08A14 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-stroke:1.2px #FFF3C4;
  text-shadow:0 3px 0 rgba(90,30,10,.35);
  padding:0 2px;
}

/* dark offer banners */
.banner-offer{
  background:#2A2A2A;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0;
  font-family:'Hind Siliguri',sans-serif;
}
.offer-top{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 0 0 14px;
}
.offer-main{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
}
.offer-line{ display:flex; flex-direction:column; line-height:1; }
.offer-line b{ font-size:22px; font-weight:700; letter-spacing:-.5px; }
.offer-line em{ font-size:12.5px; font-style:normal; font-weight:600; opacity:.95; margin-top:2px; }
.plus{ font-size:20px; font-weight:700; opacity:.9; }

.offer-price{
  align-self:stretch;
  width:62px;
  background:linear-gradient(180deg,#F2732B 0%,#E85B18 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#fff;
}
.offer-price .pr{ font-size:17px; font-weight:700; line-height:1; }
.offer-price .pr sup{ font-size:11px; top:-.35em; }
.offer-price .dy{ font-size:11.5px; font-weight:600; }

.offer-cashback{
  flex:0 0 auto;
  height:31px;
  background:linear-gradient(180deg,#12B24A 0%,#0C9A3D 100%);
  color:#fff;
  font-size:15px;
  font-weight:700;
  display:grid;
  place-items:center;
}
.offer-cashback sup{ font-size:10.5px; top:-.4em; }

/* ---------- Quick grid ---------- */
.quick-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  row-gap:22px;
  padding:22px 10px 0;
}
.quick{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
}
.q-ico{
  width:29px; height:29px;
  fill:none; stroke:var(--orange);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.quick span{ font-size:13.5px; font-weight:600; color:var(--ink-2); }

/* ============================================================
   FAB
   ============================================================ */
.fab{
  position:absolute;
  right:16px;
  bottom:calc(var(--promo-h) + var(--nav-h) + 4px);
  width:56px; height:56px;
  border-radius:17px;
  background:linear-gradient(180deg,#F5793C 0%,#EE5B18 100%);
  display:grid; place-items:center;
  box-shadow:0 8px 18px rgba(228,85,27,.38);
  z-index:12;
  transition:opacity .25s, transform .25s;
}
.fab svg{
  width:29px; height:29px;
  fill:none; stroke:#fff;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.fab .eye{ fill:#fff; stroke:none; }
.fab.hidden{ opacity:0; transform:scale(.7); pointer-events:none; }

/* ============================================================
   PROMO BAR
   ============================================================ */
.promo-bar{
  position:absolute;
  left:0; right:0;
  bottom:var(--nav-h);
  height:var(--promo-h);
  background:linear-gradient(180deg,#FEF0E2 0%,#FDE7D4 100%);
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 14px 0 16px;
  z-index:11;
  box-shadow:0 -3px 14px rgba(120,70,30,.08);
  transition:transform .32s ease, opacity .32s ease;
}
.promo-bar.closed{ transform:translateY(120%); opacity:0; pointer-events:none; }

.promo-ico{ flex:0 0 auto; }
.promo-ico svg{
  width:26px; height:26px;
  fill:none; stroke:var(--orange);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.promo-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.promo-text b{ font-size:18.5px; font-weight:700; letter-spacing:-.35px; color:var(--ink); }
.promo-text i{
  font-style:normal;
  font-size:12.5px; font-weight:500; color:#7A716B;
  margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.promo-timer{
  flex:0 0 auto;
  height:30px;
  padding:0 10px;
  border-radius:8px;
  background:#F0442C;
  color:#fff;
  display:flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; letter-spacing:-.1px;
}
.promo-timer svg{
  width:14px; height:14px;
  fill:none; stroke:#fff;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

.promo-close{
  flex:0 0 auto;
  width:30px; height:30px;
  display:grid; place-items:center;
}
.promo-close svg{
  width:19px; height:19px;
  fill:none; stroke:#4A4440;
  stroke-width:2; stroke-linecap:round;
}

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.bottom-nav{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:var(--nav-h);
  background:#fff;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  z-index:12;
  border-top:1px solid #F1EEEB;
}
.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  height:100%;
  justify-content:center;
}
.nav-ico-wrap{
  width:44px; height:30px;
  border-radius:11px;
  display:grid; place-items:center;
  transition:background .2s;
}
.nav-ico{
  width:23px; height:23px;
  fill:none; stroke:#6E6863;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.nav-label{ font-size:11.5px; font-weight:600; color:#6E6863; letter-spacing:-.1px; }

.nav-item.active .nav-ico-wrap{ background:var(--orange); }
.nav-item.active .nav-ico{ stroke:#fff; }
.nav-item.active .nav-label{ color:var(--orange); }

/* ---------- Home indicator ---------- */
.home-indicator{
  position:absolute;
  left:50%; bottom:7px;
  transform:translateX(-50%);
  width:140px; height:5px;
  border-radius:3px;
  background:#0B0B0B;
  z-index:14;
  pointer-events:none;
}

/* ============================================================
   SIDE MENU (slider)
   ============================================================ */
.menu-scrim{
  position:absolute; inset:0;
  background:rgba(20,14,10,.35);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
  z-index:20;
}
.menu-scrim.show{ opacity:1; visibility:visible; }

.menu-panel{
  position:absolute;
  top:0; right:0; bottom:0;
  width:100%;
  background:#fff;
  z-index:21;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.32,.72,.28,1);
  will-change:transform;
}
.menu-panel.open{ transform:translateX(0); }

/* status bar inside menu (white) */
.menu-statusbar{
  flex:0 0 auto;
  height:46px;
  padding:0 24px 0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
}

/* ---------- profile head ---------- */
.menu-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px 18px 16px;
  background:#fff;
}
.menu-avatar{
  flex:0 0 auto;
  width:50px; height:50px;
  border-radius:50%;
  background:#FDEEE2;
  display:grid; place-items:center;
}
.menu-avatar svg{ width:26px; height:26px; fill:var(--orange); }

.menu-user{ flex:0 0 auto; }
.menu-uname{
  display:flex; align-items:center; gap:7px;
  font-size:20px; font-weight:700; letter-spacing:-.2px; color:var(--ink);
}
.menu-uname .caret{ width:12px; height:8px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.menu-edit{ font-size:13.5px; font-weight:500; color:#57504C; margin-top:2px; }

/* language toggle */
.lang-toggle{
  margin-left:auto;
  display:flex;
  align-items:center;
  height:34px;
  border-radius:19px;
  background:#12B24A;
  border:1.6px solid #12B24A;
  overflow:hidden;
}
.lang-opt{
  height:100%;
  min-width:47px;
  display:grid; place-items:center;
  padding:0 11px;
  font-size:14px; font-weight:700;
  color:#fff;
  font-family:'Inter','Hind Siliguri',sans-serif;
  transition:background .2s, color .2s;
}
.lang-opt.on{
  background:#fff;
  color:#1B1815;
  border-radius:19px;
}

.menu-close{
  flex:0 0 auto;
  width:34px; height:34px;
  display:grid; place-items:center;
  margin-left:4px;
}
.menu-close svg{
  width:26px; height:26px;
  fill:none; stroke:#151210;
  stroke-width:2.1; stroke-linecap:round;
}

/* ---------- scroll body ---------- */
.menu-body{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  background:#fff;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.menu-body::-webkit-scrollbar{ display:none; }

.menu-gap{ height:11px; background:#F2F1EF; }
.menu-tail{ height:26px; }

/* ---------- Orange club row ---------- */
.club-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px 16px;
  background:#fff;
}
.club-hex{ flex:0 0 auto; width:38px; height:41px; }
.club-hex svg{ width:100%; height:100%; }
.hx{ fill:#C58B4E; }
.hx-in{ fill:none; stroke:#F3D6B2; stroke-width:1.5; }
.hx-star{ fill:#FBEBD6; }
.hx-rib{ fill:#B8763C; }

.club-txt{ display:flex; flex-direction:column; text-align:left; }
.club-txt i{ font-style:normal; font-size:14.5px; font-weight:500; color:#8B8480; line-height:1.3; }
.club-txt b{ font-size:16.5px; font-weight:800; letter-spacing:.2px; color:var(--ink); }

.club-coins{
  margin-left:auto;
  display:flex; align-items:center; gap:9px;
  height:38px;
  padding:0 13px 0 11px;
  border-radius:20px;
  background:#EFEEEC;
  font-size:16px; font-weight:700; color:var(--ink);
}
.club-coin{
  width:17px; height:17px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE9A8 0%,#F5B942 55%,#E09A20 100%);
  box-shadow:inset 0 0 0 1.5px #fff;
}
.club-coins .chev{ stroke:#5A544F; }

/* ---------- sections ---------- */
.menu-section{ background:#fff; }

.sec-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 18px 14px 16px;
}
.sec-ico{ flex:0 0 auto; }
.sec-ico svg{
  width:31px; height:31px;
  fill:none; stroke:var(--orange);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.sec-ico.pink svg{ stroke:#F0517F; }
.sec-title{ font-size:20px; font-weight:700; letter-spacing:-.3px; color:var(--ink); }
.sec-caret{
  margin-left:auto;
  width:15px; height:10px;
  fill:none; stroke:var(--orange);
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .28s ease;
}
.sec-head.collapsed .sec-caret{ transform:rotate(180deg); }

.sec-panel{
  margin:0 14px;
  border:1px solid #ECE9E6;
  border-radius:14px;
  overflow:hidden;
  transition:max-height .3s ease, opacity .25s ease, margin-bottom .3s ease;
  max-height:1400px;
  opacity:1;
}
.sec-panel.hide{ max-height:0; opacity:0; border-color:transparent; }

.tile-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  row-gap:26px;
  padding:26px 6px 26px;
}
.tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  padding:0 2px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.tile-ico{
  width:30px; height:30px;
  fill:none; stroke:var(--orange);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.tile-ico .fill{ fill:var(--orange); stroke:none; }
.tile-ico .thin{ stroke-width:1.4; }
.tile-ico .tk{
  fill:var(--orange); stroke:none;
  font-size:11px; font-weight:700;
  text-anchor:middle;
  font-family:'Hind Siliguri',sans-serif;
}
.tile-ico.pink{ stroke:#F0517F; }
.tile-ico.pink .fill{ fill:#F0517F; }
.tile-ico.magenta{ stroke:#E5177B; stroke-width:2.6; }
.tile-ico.green{ stroke:#1E7A5A; }

.tile span{
  font-size:13.5px;
  font-weight:500;
  line-height:1.3;
  text-align:center;
  color:var(--ink);
}

/* Orange Club solid ring mark */
.orange-ring{
  width:30px; height:30px;
  border-radius:50%;
  background:conic-gradient(from 150deg,#F9A61A 0deg,#F1662A 140deg,#EE4E12 260deg,#F9A61A 360deg);
  -webkit-mask:radial-gradient(circle, transparent 34%, #000 35%);
  mask:radial-gradient(circle, transparent 34%, #000 35%);
}

.menu-hi{ z-index:24; }

/* ============================================================
   CHAT — language select
   ============================================================ */
.chat-phone{ background:#fff; }

.chat-statusbar{ background:var(--chat-orange,#F2823F); }
.chat-statusbar .sb-signal,
.chat-statusbar .sb-wifi{ fill:#1A1512; }
.chat-statusbar .sb-batt-body{ background:#1A1512; }
.chat-statusbar .sb-batt-cap{ background:rgba(26,21,18,.35); }

.chat-header{
  flex:0 0 auto;
  height:66px;
  background:var(--chat-orange,#F2823F);
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 20px;
}
.chat-back{
  width:30px; height:24px;
  display:grid; place-items:center;
  color:#fff;
}
.chat-back svg{
  width:27px; height:21px;
  fill:none; stroke:#fff;
  stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round;
}
.chat-title{
  font-size:22px;
  font-weight:600;
  letter-spacing:-.2px;
  color:#fff;
}

.chat-body{
  flex:1 1 auto;
  overflow-y:auto;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:74px 24px 40px;
  scrollbar-width:none;
}
.chat-body::-webkit-scrollbar{ display:none; }
.chat-body--blank{ padding:0; }

/* ---------- bot mark ---------- */
.bot-tile{
  width:154px; height:154px;
  border-radius:34px;
  background:
    radial-gradient(circle at 50% 42%, #F79B5E 0%, #F4884A 42%, #EF7431 72%, #EC6A26 100%);
  display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(233,107,40,.26);
}
.bot-mark{ width:112px; height:112px; }
.bot-face{ fill:rgba(255,255,255,.9); }
.bot-eye{ fill:#F2894D; }
.bot-band,
.bot-boom{
  fill:none;
  stroke:#fff;
  stroke-width:9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.chat-greeting{
  margin:26px 0 0;
  font-size:17px;
  font-weight:400;
  color:#8B8480;
  letter-spacing:-.1px;
}
.chat-heading{
  margin:12px 0 0;
  font-size:25px;
  font-weight:700;
  letter-spacing:-.5px;
  color:#231F1C;
  text-align:center;
}

/* ---------- language buttons ---------- */
.lang-list{
  width:100%;
  max-width:340px;
  margin-top:44px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.lang-btn{
  height:60px;
  border:1px solid #ECEAE7;
  border-radius:11px;
  background:#fff;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:500;
  color:#231F1C;
  text-decoration:none;
  font-family:'Inter','Hind Siliguri',sans-serif;
  box-shadow:0 1px 2px rgba(23,17,12,.04);
  transition:background .15s, border-color .15s;
}
.lang-btn:active{
  background:var(--orange-soft);
  border-color:var(--orange);
}

/* ============================================================
   EMBEDDED WEB-CALL WIDGET (chat screen)
   Un-floats Speaklar's #spcl-popup so it sits in the page flow.
   ============================================================ */
.chat-body--blank{
  padding:0;
  justify-content:flex-start;
}

.widget-mount{
  width:100%;
  display:flex;
  justify-content:center;
  padding:26px 16px 40px;
}

.widget-loading{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:40px;
  font-size:15px;
  font-weight:500;
  color:#8B8480;
}
.widget-spinner{
  width:17px; height:17px;
  border-radius:50%;
  border:2px solid #E7E3DF;
  border-top-color:var(--orange);
  animation:spcl-spin .8s linear infinite;
}
@keyframes spcl-spin{ to{ transform:rotate(360deg); } }

.widget-fallback{
  margin-top:40px;
  text-align:center;
  font-size:14.5px;
  line-height:1.55;
  color:#8B8480;
}

/* ---- hidden widget fields (Company / Call Type / preferences) ----
   CSS hides them instantly so they never flash before webcall-init.js
   runs; that script also hides the wrapper rows and pins the values
   (company = configured name, call type = webcall). */
#spcl-company,
#spcl-call-type{ display:none !important; }

.spcl-contact-box:has(> #spcl-company),
.spcl-contact-box:has(> #spcl-call-type),
.spcl-contact-box:has(#spcl-get-whatsapp){ display:none !important; }

/* ---- overrides applied only while the widget is embedded ---- */
body.spcl-embedded #spcl-popup{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  transition:none !important;
  display:block !important;
  width:100% !important;
  max-width:330px !important;
  margin:0 auto !important;
  z-index:auto !important;
}

/* the floating launcher is redundant once the card is in-page */
body.spcl-embedded #spcl-toggle{ display:none !important; }

/* ---- no floating widgets anywhere ----
   Both widgets are only wanted where they are embedded in the frame: the
   voice-call card on /chat/{lang}, the chat panel on /chat/assistant.
   Everywhere else they float over the page, so they are hidden.

   The voice widget lives in the page DOM, so display:none is safe. The
   chat widget is a custom element that measures itself while starting up
   and has to stay clickable for chat-assistant.js to open it — hiding it
   visually rather than removing it from layout keeps that working. */
body:not(.spcl-embedded) #spcl-toggle,
body:not(.spcl-embedded) #spcl-popup{ display:none !important; }

body > chat-widget{
  opacity:0 !important;
  pointer-events:none !important;
}

/* ...until chat-assistant.js moves it into the mount, where it belongs. */
body.chat-assistant-page #chatAssistant chat-widget{
  opacity:1 !important;
  pointer-events:auto !important;
}

/* chat-assistant.js moves the widget into #chatAssistant; these rules give
   it the blank area under the header to fill. Presentation only. */
body.chat-assistant-page .chat-body--blank{ padding:0; }

body.chat-assistant-page #chatAssistant{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;      /* centre the panel across the frame */
  justify-content:center;  /* and in the space under the header */
  width:100%;
  min-height:0;
  padding:0;
}

body.chat-assistant-page #chatAssistant chat-widget{
  flex:0 1 auto;
  display:block;
  width:100%;
  max-width:360px;
  height:100%;
  min-height:0;
  margin:auto;
  overflow:hidden;
}

/* ---- "Powered By" logo ----
   The widget appends an unclassed flex row holding the "Powered By:" label
   and the PowerInAI logo link. Matching on the direct-child chain keeps the
   selector on that row only — a loose :has() would also match #step-call
   and blank the whole card. */
body.spcl-embedded #spcl-popup div:has(> div > a > #spcl-powered-by){
  display:none !important;
}

/* ---------- Small screens ---------- */
@media (max-height:720px){
  .phone{ max-height:100vh; }
}