/* ================= GENERAL RESET ================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&display=swap');

:root{
  --auth-ink:#111111;
  --auth-muted:#6B6B6B;
  --auth-faint:#9A9A9A;
  --auth-line:#DADADA;
}

.honda-auth-container{
  display:none;
  position:fixed;
  inset:0;
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
  background:#ffffff;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:9999;
}
.honda-auth-container.active{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.honda-auth-container *{ box-sizing:border-box; }

.auth-page-inner{
  position:relative;
  width:100%;
  max-width:430px;
  margin:0 auto;
  min-height:100%;
  padding:70px 22px 40px;
  display:flex;
  flex-direction:column;
}

/* BACK ARROW — signup page only */
.auth-back-arrow{
  position:absolute;
  top:24px;
  left:22px;
  background:none;
  border:none;
  color:var(--auth-ink);
  cursor:pointer;
  padding:4px;
  display:flex;
}

/* LOGO — foreign-luxury crest + serif wordmark, like the reference */
.auth-logo-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:34px;
}
.auth-logo-badge{
  color:var(--auth-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:2px;
}
.auth-wordmark{
  font-family:'Cormorant Garamond', serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:5px;
  color:var(--auth-ink);
}

/* HEADING — plain, matching the reference exactly */
.auth-heading-plain{
  margin:0 0 22px;
  font-size:24px;
  font-weight:700;
  color:var(--auth-ink);
  text-align:center;
}

/* INPUT GROUPS */
.fieldmark-input-group{ margin-bottom:16px; }

.fieldmark-input-group label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--auth-ink);
  margin-bottom:8px;
}

/* Phone field with attached country-code box */
.phone-field-row{
  display:flex;
  align-items:stretch;
}
.phone-code-box{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  background:var(--auth-ink);
  color:#ffffff;
  font-size:13.5px;
  font-weight:600;
  border-radius:10px 0 0 10px;
}
.phone-field-row .fieldmark-field-box{
  flex:1;
  min-width:0;
  border-radius:0 10px 10px 0;
  border-left:none;
}

.fieldmark-field-box{
  display:flex;
  align-items:center;
  background:#ffffff;
  border:1.5px solid var(--auth-line);
  border-radius:10px;
  padding:13px 14px;
  transition:.15s;
}
.fieldmark-field-box:focus-within{
  border-color:var(--auth-ink);
  box-shadow:0 0 0 3px rgba(17,17,17,.08);
}
.fieldmark-field-box input{
  border:none;
  outline:none;
  width:100%;
  min-width:0;
  font-size:13.5px;
  background:transparent;
  color:var(--auth-ink);
  font-family:inherit;
}
.fieldmark-field-box input::placeholder{ color:var(--auth-faint); }

/* REMEMBER PASSWORD — login only */
.remember-row{
  display:flex;
  align-items:center;
  gap:9px;
  margin:2px 0 22px;
  font-size:13px;
  color:var(--auth-ink);
  cursor:pointer;
}
.remember-row input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--auth-ink);
  cursor:pointer;
}

/* BUTTON — blue instead of black, pill shape like the reference */
.fieldmark-btn-submit{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:15px;
  border:none;
  border-radius:6px;
  background:var(--auth-ink);
  color:#ffffff;
  font-weight:700;
  cursor:pointer;
  font-size:14.5px;
  font-family:inherit;
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .1s, filter .15s;
}
.fieldmark-btn-submit .btn-content,
.fieldmark-btn-submit .btn-spinner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.fieldmark-btn-submit .btn-spinner{ display:none; }
.fieldmark-btn-submit.is-loading .btn-content{ display:none; }
.fieldmark-btn-submit.is-loading .btn-spinner{ display:flex; }
.fieldmark-btn-submit.is-loading{ cursor:not-allowed; filter:brightness(.96); }
.fieldmark-btn-submit:disabled{ pointer-events:none; opacity:.6; }
.fieldmark-btn-submit:hover{ filter:brightness(1.08); }
.fieldmark-btn-submit:active{ transform:scale(.98); }

.spin-icon{ animation:auth-spin 0.8s linear infinite; }
@keyframes auth-spin{ to{ transform:rotate(360deg); } }

/* SWITCH LINK — blue underlined, matching the reference */
.fieldmark-switch-action{
  text-align:center;
  margin-top:18px;
  font-size:13px;
  color:var(--auth-muted);
}
.fieldmark-link-btn{
  background:none;
  border:none;
  color:var(--auth-ink);
  font-weight:600;
  cursor:pointer;
  font-size:13px;
  font-family:inherit;
  padding:0;
  text-decoration:underline;
}
.fieldmark-link-btn:hover{ opacity:.8; }

/* MOBILE */
@media (max-width:380px){
  .auth-page-inner{ padding:64px 18px 32px; }
  .fieldmark-field-box{ padding:11px 12px; }
}

:root {
  --brand-yellow: #FFD400;
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.56);
  --white: #FFFFFF;
  --line: #ECECEC;
  --panel-dark: #1B1B1B;
}

/* ── DASHBOARD BODY — no side padding, everything runs edge to edge ── */
.dashboard {
  width: 100%;
  max-width: 430px;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background: #ffffff;
  color: var(--ink);
}

/* ── HEADER — image logo only, centered ── */
.mx-dash-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  background: var(--white);
}

.mx-dash-logo {
  height: 34px;
  width: auto;
  display: block;
}

/* ── BANNER CAROUSEL — edge to edge, no rounding, no side gap ── */
.mx-banner-carousel {
  position: relative;
  width: 100%;
  min-height: 170px;
  overflow: hidden;
  box-sizing: border-box;
}

.mx-banner-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mx-banner-track::-webkit-scrollbar { display: none; }

.mx-banner-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.mx-banner-slide img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.mx-banner-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.mx-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.25);
  transition: width 0.2s ease, background 0.2s ease, border-radius 0.2s ease;
}

.mx-banner-dot.active {
  width: 16px;
  border-radius: 3px;
  background: var(--brand-yellow);
}

/* ── ACTION ROW — dark full-width panel, edge to edge like the reference ── */
.mx-action-panel {
  width: 100%;
  min-height: 78px;
  box-sizing: border-box;
  background-color: var(--panel-dark) !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 13px 10px;
}

.mx-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  flex: 1;
  -webkit-tap-highlight-color: transparent;
}

.mx-action-card:active { opacity: 0.65; }

.mx-action-icon {
  font-size: 22px;
  color: #F2F2F2;
}

/* Font matches the reference: regular/medium weight, sentence case,
   plain white, no heavy bold, no letter-spacing. */
.mx-action-text {
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 0;
  font-family: inherit;
}

/* ── LIVE TICKER — bell + auto-scrolling activity messages ── */
.mx-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px;
  background: var(--white);
  overflow: hidden;
}

.mx-ticker-icon {
  flex-shrink: 0;
  font-size: 16px;
  color: #F2A900;
}

.mx-ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mx-ticker-track {
  display: flex;
  width: max-content;
  animation: mx-ticker-scroll 16s linear infinite;
}

.mx-ticker-item {
  flex-shrink: 0;
  padding-right: 40px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

@keyframes mx-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── STAT ROW — account balance / total income, image cards side by side ── */
.mx-stats-row {
  display: flex;
  width: 100%;
  gap: 3px;
  background: var(--white);
}

.mx-stat-card {
  position: relative;
  flex: 1;
  height: 180px;
  overflow: hidden;
}

.mx-stat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mx-stat-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 10px 18px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
  text-align: center;
}

.mx-stat-top span {
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
}

.mx-stat-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 10px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 380px) {
  .mx-action-icon { font-size: 20px; }
  .mx-action-text { font-size: 12px; }
  .mx-stat-card { height: 160px; }
}



:root {
  --gc-black: #141414;
  --gc-black-2: #050505;
  --gc-white: #FFFFFF;
}

.gc-carousel,
.gc-carousel * {
  box-sizing: border-box;
}

.gc-carousel {
  width: 100%;
  padding: 6px 0 4px;
}

/* ── TRACK — native horizontal scroll with snap, swipeable both ways ── */
.gc-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 16px 10px;
}

.gc-track::-webkit-scrollbar { display: none; }

/* ── CARD — black/white, layered for a raised 3D look ── */
.gc-card {
  position: relative;
  flex: 0 0 46%;
  max-width: 145px;
  scroll-snap-align: start;
  min-height: 145px;
  padding: 9px 9px 10px;
  color: var(--gc-white);
  background: linear-gradient(150deg, #2b2b2b 0%, var(--gc-black) 45%, var(--gc-black-2) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 0 100%);
  box-shadow:
    0 16px 26px rgba(0, 0, 0, 0.45),
    0 4px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -10px 18px rgba(0, 0, 0, 0.35);
}

/* Thin bright edge along the top/left to sell the raised-plate look */
.gc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 0 100%);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 30%);
  pointer-events: none;
}

/* ── THREE-DOT MENU ── */
.gc-menu-dots {
  position: absolute;
  top: 16px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 1;
}

.gc-menu-dots span {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

/* ── ICON — raised circular badge for the 3D feel ── */
.gc-icon-wrap {
  color: var(--gc-white);
  margin-top: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02));
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
}

.gc-icon-wrap svg {
  width: 16px;
  height: 16px;
}

/* ── TITLE ── */
.gc-card-title {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* ── WHITE PILL BUTTON — black bold uppercase text, raised ── */
.gc-card-btn {
  align-self: flex-start;
  background: linear-gradient(150deg, #FFFFFF, #E9E9E9);
  color: #111111;
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  z-index: 1;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.gc-card-btn:active { filter: brightness(0.94); }

/* ── DECORATIVE ICON — bottom-right, partially bleeding past the card edge ── */
.gc-deco {
  position: absolute;
  bottom: 6px;
  right: -3px;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.55);
  z-index: 1;
}

/* ── DOTS ── */
.gc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.gc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D6D6D6;
  transition: width 0.2s ease, border-radius 0.2s ease, background 0.2s ease;
}

.gc-dot.active {
  width: 20px;
  border-radius: 4px;
  background: var(--gc-black);
}

@media (max-width: 380px) {
  .gc-card { flex-basis: 48%; min-height: 130px; padding: 8px; }
  .gc-card-title { font-size: 11.5px; }
}

/* =========================================================
   REDEEM GIFT — WHITE + YELLOW + BLACK
   ========================================================= */
:root{
  --gc-yellow:#FFD400;
  --gc-yellow-dim:#D9A900;
  --gc-ink:#111111;
  --gc-muted:#6B6B6B;
  --gc-faint:#9A9A9A;
  --gc-line:#E6E6E6;
  --gc-bg:#F6F6F6;
  --gc-danger:#E5484D;
}

#giftCodePage{
  width:100%;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:#ffffff;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
  color:var(--gc-ink);
}
#giftCodePage *{ box-sizing:border-box; }

/* HEADER */
.gift-page-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-bottom:1px solid var(--gc-line);
}
.gift-back-btn{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--gc-line);
  color:var(--gc-ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
}
.gift-back-btn:hover{ border-color:var(--gc-yellow-dim); }
.gift-back-btn:active{ transform:scale(.92); }

.gift-header-title{
  font-size:16px;
  font-weight:700;
  color:var(--gc-ink);
}

.gift-content{
  padding:0 0 30px;
  width:100%;
}

/* BANNER IMAGE */
.gift-banner{
  width:100%;
  height:220px;
  overflow:hidden;
}
.gift-banner-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* INTRO TEXT */
.gift-intro-text{
  margin:18px 16px 12px;
  color:var(--gc-ink);
  font-size:13.5px;
  font-weight:500;
}

/* TELEGRAM ROW */
.gift-telegram-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 16px 22px;
  padding:13px 14px;
  border-radius:12px;
  background:var(--gc-bg);
  text-decoration:none;
  color:var(--gc-ink);
  transition:.15s;
}
.gift-telegram-row:hover{ background:#EFEFEF; }
.gift-telegram-row:active{ transform:scale(.99); }
.gift-telegram-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#27A9E1;
  color:#fff;
}
.gift-telegram-label{
  flex:1;
  font-size:13.5px;
  font-weight:500;
}
.gift-telegram-arrow{
  color:var(--gc-faint);
  flex-shrink:0;
}

/* GIFT CODE LABEL + INPUT */
.gift-label{
  display:block;
  margin:0 16px 10px;
  font-size:13.5px;
  font-weight:600;
  color:var(--gc-ink);
}
.gift-required{
  color:var(--gc-danger);
  margin-right:3px;
}

.gift-input-wrapper{
  margin:0 16px 26px;
}
#giftCodeInput{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border:1.5px solid var(--gc-line);
  background:var(--gc-bg);
  color:var(--gc-ink);
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  outline:none;
  transition:.15s;
}
#giftCodeInput::placeholder{
  color:var(--gc-faint);
  font-weight:400;
}
#giftCodeInput:focus{
  border-color:var(--gc-yellow-dim);
  background:#fff;
  box-shadow:0 0 0 4px rgba(217,169,0,.12);
}

/* CONFIRM BUTTON */
.gift-receive-btn{
  display:block;
  width:calc(100% - 32px);
  margin:8px 16px 0;
  padding:15px;
  border:none;
  border-radius:24px;
  background:var(--gc-yellow);
  color:var(--gc-ink);
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
}
.gift-receive-btn:hover{ filter:brightness(0.97); }
.gift-receive-btn:active{ transform:scale(.98); }
.gift-receive-btn:disabled{
  background:#E5E5E5;
  color:#B0B0B0;
  cursor:not-allowed;
}

@media (max-width:380px){
  .gift-banner{ height:190px; }
  .gift-intro-text{ margin:16px 14px 10px; }
  .gift-telegram-row{ margin:0 14px 20px; }
  .gift-label{ margin:0 14px 10px; }
  .gift-input-wrapper{ margin:0 14px 22px; }
  .gift-receive-btn{ width:calc(100% - 28px); margin:8px 14px 0; }
}

.record-id {
  font-weight: 700;           /* Makes it bold */
  font-family: 'Courier New', Courier, monospace; /* Monospace for numbers */
  color: #000000;                /* Slightly darker for readability */
  background: #f0f0f0;        /* Light grey background badge */
  padding: 2px 6px;           /* Space inside the badge */
  border-radius: 4px;         /* Rounded corners */
  display: inline-block;      /* Keeps the background tight to the text */
  margin-top: 4px;            /* Space from the time above */
  font-size: 11px;            /* Keeps it small but clear */
  letter-spacing: 0.5px;      /* Spacing between numbers */
  user-select: all;           /* Allows user to select full ID with one tap */
}


:root {
  --bottom-nav-bg: #1A1A1A;
  --nav-inactive: #8A8A8A;
  --nav-active: #FFFFFF;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  background: var(--bottom-nav-bg);
  border-top: none;
  border-radius: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-pill-container {
  height: 58px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  align-items: center;
  justify-items: center;
  padding: 0 4px;
  box-sizing: border-box;
}

.nav-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--nav-inactive);
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}

.nav-item svg {
  color: var(--nav-inactive);
  transition: color 0.2s;
}

.nav-item .nav-label-text {
  font-size: 11px;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  color: var(--nav-inactive);
  transition: color 0.2s;
}

.nav-item.active svg {
  color: var(--nav-active);
}

.nav-item.active .nav-label-text {
  color: var(--nav-active);
  font-weight: 700;
}

.nav-item:active {
  opacity: 0.7;
}

.nav-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

/* Default state */
#bottomNav {
    display: none; 
}

/* Visibility state */
.nav-visible {
    display: flex !important;
}




.ticker-search-bar {
  width: 90%;
  max-width: 400px;
  margin: 15px auto; /* Spacing between flyer and action buttons */
  height: 45px;
  background: #ffffff;
  border-radius: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(157, 78, 221, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 35s linear infinite; /* Adjust speed here */
}

.ticker-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 600;
  color: #5c6a7e;
  gap: 8px;
}

.user-icon {
  width: 24px;
  height: 24px;
  background: #9d4edd;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* =========================================================
   PROFILE — matched to reference: logo top, black info bar,
   action row, banner, list card, separate logout bar
   Yellow #FFD400 · Black #111111 · White #FFFFFF
   ========================================================= */

#profilePage{
  --yellow:#FFD400;
  --ink:#111111;
  --muted:#7C7C7C;
  --line:#F0F0F0;
  --page-bg:#F4F4F5;
  --danger:#E5484D;

  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--page-bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  z-index:500;
  box-sizing:border-box;
}
#profilePage *{ box-sizing:border-box; }

/* TOP LOGO */
#profilePage .pf-brand-block{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 16px 14px;
  background:#fff;
}
#profilePage .pf-brand-logo-img{
  max-width:180px;
  max-height:60px;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* BLACK INFO BAR — logo left, phone/balance right */
#profilePage .pf-info-bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 16px;
  background:var(--ink);
}
#profilePage .pf-info-logo{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:8px;
  background:#EFEFEF;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#profilePage .pf-info-logo-img{
  width:70%;
  height:70%;
  object-fit:contain;
}


#profilePage .pf-info-bar{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 16px 34px;
  background:var(--ink);
}

#profilePage .pf-info-logo{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:8px;
  background:#EFEFEF;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

#profilePage .pf-info-logo-img{
  width:70%;
  height:70%;
  object-fit:contain;
}

#profilePage .pf-info-text{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  text-align:right;
}

#profilePage .pf-info-phone{
  color:#fff;
  font-size:15px;
  font-weight:700;
}

#profilePage .pf-info-phone::before {
  content: "+234 ";
}

#profilePage .pf-info-balance{
  color:#fff;
  font-size:15px;
  font-weight:700;
}

#profilePage .pf-info-recharge-balance{
  position:absolute;
  left:16px;
  bottom:12px;
  color:#fff;
  font-size:11.5px;
  font-weight:600;
}

/* ACTION ROW */
#profilePage .pf-action-row{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  background:#fff;
  border-bottom:1px solid var(--line);
}
#profilePage .pf-action-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 6px;
  border:none;
  background:none;
  color:var(--ink);
  cursor:pointer;
  font-family:inherit;
}
#profilePage .pf-action-item span{
  font-size:11.5px;
  font-weight:500;
  color:var(--ink);
}
#profilePage .pf-action-item:active{ opacity:.6; }

/* BANNER PHOTO */
#profilePage .pf-banner-photo{
  flex:0 0 auto;
  width:100%;
  height:150px;
  overflow:hidden;
}
#profilePage .pf-banner-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* HIDDEN COMPATIBILITY ELEMENTS */
#profilePage .pf-compat-hidden{
  display:none;
}

/* SCROLL CONTAINER + LIST CARD */
#profilePage .profile-scroll-container{
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:14px 14px calc(90px + env(safe-area-inset-bottom,0px));
  flex:1;
  display:flex;
  flex-direction:column;
  gap:14px;
}
#profilePage .pf-menu-card{
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}

#profilePage .pf-list-item{
  min-height:54px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--line);
  cursor:pointer;
  transition:background .15s ease;
}
#profilePage .pf-list-item:first-child{ border-top:none; }
#profilePage .pf-list-item:active{ background:#FAFAFA; }

#profilePage .pf-list-icon{
  width:22px;
  flex:0 0 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
}

#profilePage .pf-list-content{ flex:1; min-width:0; }
#profilePage .pf-list-content strong{
  color:var(--ink);
  font-size:13.5px;
  font-weight:400;
}

#profilePage .pf-list-chevron{ color:#C7C7C7; flex-shrink:0; }

/* LOGOUT — separate solid black bar, matching reference */
#profilePage .pf-logout-bar{
  width:100%;
  padding:15px;
  border:none;
  border-radius:12px;
  background:var(--ink);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
#profilePage .pf-logout-bar:active{ opacity:.85; }

@media(max-width:360px){
  #profilePage .pf-info-logo{ width:48px; height:48px; }
  #profilePage .pf-info-phone,
  #profilePage .pf-info-balance{ font-size:13.5px; }
  #profilePage .pf-banner-photo{ height:130px; }
}


:root {
  --y: #D9A900;
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.56);
  --ink-faint: rgba(17, 17, 17, 0.36);
  --page-bg: #F2F2F2;
  --field-bg: #E2E2E2;
  --line: #ECECEC;
  --white: #FFFFFF;

  --dot-nekpay: #E74C3C;
  --dot-kkpay: #D9A900;
  --dot-flutterwave: #27AE60;
}

.bank-page {
  background: var(--page-bg);
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  box-sizing: border-box;
}

/* ── FLAT HEADER ── */
.bank-flat-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.bank-flat-back {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
}

.bank-flat-header h2 {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  pointer-events: none;
}

/* ── LANDING VIEW ── */
.bank-landing-body {
  max-width: 430px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  box-sizing: border-box;
}

.bank-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 90px;
}

.bank-empty-box {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
}

.bank-empty-box::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(17,17,17,0.08) 0%, transparent 70%);
}

.bank-empty-box i {
  position: relative;
  font-size: 60px;
  color: #D8D8D8;
}

.bank-pill-btn {
  width: 100%;
  max-width: 260px;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.bank-pill-btn:active { opacity: 0.85; }

/* ── CHANNEL RADIO DOTS ── */
.bank-channel-select {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding: 18px 16px 4px;
}

.bank-channel-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bank-radio-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid;
  transition: background 0.15s ease;
}

.bank-radio-dot[data-channel="nekpay"] { border-color: var(--dot-nekpay); }
.bank-radio-dot[data-channel="kkpay"] { border-color: var(--dot-kkpay); }
.bank-radio-dot[data-channel="flutterwave"] { border-color: var(--dot-flutterwave); }

.bank-radio-dot.active[data-channel="nekpay"] { background: var(--dot-nekpay); }
.bank-radio-dot.active[data-channel="kkpay"] { background: var(--dot-kkpay); }
.bank-radio-dot.active[data-channel="flutterwave"] { background: var(--dot-flutterwave); }

.bank-channel-label {
  font-size: 10.5px;
  color: var(--ink-muted);
  font-weight: 600;
}

/* ── FORM VIEW ── */
.bank-form-body {
  max-width: 430px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  box-sizing: border-box;
}

.bank-ash-box {
  background: var(--white);
  border-radius: 14px;
  padding: 16px;
  box-sizing: border-box;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(17, 17, 17, 0.04);
}

.bank-field { margin-bottom: 16px; }
.bank-field:last-child { margin-bottom: 0; }

.bank-field label {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 8px;
}

.bank-field select,
.bank-field input {
  width: 100%;
  padding: 13px 14px;
  border: none;
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  appearance: none;
}

.bank-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.bank-field input::placeholder { color: var(--ink-faint); }

.bank-field select:focus,
.bank-field input:focus {
  box-shadow: 0 0 0 2px var(--y);
}

.bank-field select:disabled,
.bank-field input:disabled {
  color: var(--ink);
  opacity: 1;
  cursor: not-allowed;
}

.bank-field input[readonly] {
  color: var(--ink);
  opacity: 1;
}

.bank-submit-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.bank-submit-btn:active { opacity: 0.85; }

.bank-locked-note {
  margin: 14px 4px 0;
  font-size: 11.5px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bank-locked-note i { color: var(--y); }

/* ── iOS-STYLE CONFIRM ALERT ── */
.ios-alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ios-alert-overlay.show { opacity: 1; }

.ios-alert-box {
  width: 270px;
  background: rgba(28, 28, 30, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.15s ease;
}
.ios-alert-overlay.show .ios-alert-box { transform: scale(1); }

.ios-alert-title {
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  padding: 20px 18px 4px;
}

.ios-alert-message {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  padding: 4px 18px 18px;
  line-height: 1.4;
}

.ios-alert-actions {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.ios-alert-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: #4A9EFF;
  font-size: 15px;
  padding: 12px 0;
  cursor: pointer;
  font-family: inherit;
}

.ios-alert-btn + .ios-alert-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.ios-alert-btn.accept {
  font-weight: 700;
  color: #4A9EFF;
}

@media (max-width: 380px) {
  .bank-empty-state { padding-top: 70px; }
  .bank-empty-box { width: 90px; height: 90px; margin-bottom: 32px; }
  .bank-empty-box i { font-size: 50px; }
  .bank-channel-select { gap: 26px; }
}



/* =========================================================
   RECHARGE — BLACK / WHITE / GRAY
   ========================================================= */

#rechargePage{
  --ink:#111111;
  --muted:rgba(17,17,17,.55);
  --faint:rgba(17,17,17,.35);
  --line:#E2E2E2;
  --panel:#F4F4F4;

  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  background:#ffffff;
  color:var(--ink);
  z-index:500;
  font-family:inherit;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}

#rechargePage *{box-sizing:border-box}

/* ── PLAIN HEADER BAR ── */
#rechargePage .recharge-header-bar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:52px;
  padding:0 14px;
  background:#ffffff;
  border-bottom:1px solid var(--line);
}

#rechargePage .recharge-back-btn-v2{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:var(--ink);
  font-size:15px;
  cursor:pointer;
}

#rechargePage .recharge-banner-title{
  margin:0;
  color:var(--ink);
  font-size:15px;
  font-weight:700;
}

#rechargePage .recharge-history-btn{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:var(--ink);
  font-size:14px;
  cursor:pointer;
}


/* ── CONTAINER — no gap between sections, matching reference's flush layout ── */
#rechargePage .recharge-page-container{
  width:100%;
  max-width:430px;
  margin:auto;
  padding:0 0 calc(100px + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
}


/* ── BALANCE BANNER — image fills the block, balance text sits ON TOP ── */
#rechargePage .rech-balance-card{
  position:relative;
  width:100%;
  height:170px;
  overflow:hidden;
}

#rechargePage .rech-balance-bg-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#rechargePage .rech-balance-overlay{
  position:absolute;
  top:20px;
  left:16px;
  z-index:2;
}

#rechargePage .rech-balance-label{
  font-size:12px;
  font-weight:500;
  color:var(--ink);
  margin-top:4px;
}

#rechargePage .rech-balance-value{
  font-size:24px;
  font-weight:800;
  color:var(--ink);
}


/* ── CARDS ── */
#rechargePage .rech-card{
  padding:16px 14px 0;
  border:none;
  border-radius:0;
  background:transparent;
}

#rechargePage .rech-card-heading{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:10px;
}

#rechargePage .rech-card-heading h3{
  margin:0;
  color:var(--ink);
  font-size:14px;
  font-weight:700;
}

#rechargePage .rech-min-inline{
  font-size:12px;
  font-weight:400;
  color:var(--muted);
}

/* ── QUICK AMOUNTS — scrollable with a peek cue for hidden items ── */
#rechargePage .quick-amount-grid{
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-right: 24px; /* Leaves room to partially show the next item */
  padding-bottom: 4px;
}

/* Hide scrollbar for cleaner look */
#rechargePage .quick-amount-grid::-webkit-scrollbar {
  display: none;
}
#rechargePage .quick-amount-grid {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#rechargePage .amount-option{
  flex: 0 0 auto;
  width: 88px;
  height: 38px;
  padding: 0 6px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: .15s ease;
}

#rechargePage .amount-option:hover{ border-color: var(--ink); }

#rechargePage .amount-option.active,
#rechargePage .amount-option.selected{
  border-color: var(--ink);
  background: var(--ink);
  color: #ffffff;
  font-weight: 700;
}


/* ── AMOUNT INPUT — plain white with thin border ── */
#rechargePage .main-amount-input{
  height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#ffffff;
}

#rechargePage .main-amount-input:focus-within{
  border-color:var(--ink);
}

#rechargePage .main-amount-currency{
  color:var(--faint);
  font-size:15px;
  font-weight:700;
}

#rechargePage #customAmount{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-size:14px;
  font-weight:600;
}

#rechargePage #customAmount::placeholder{ color:var(--faint); }

#rechargePage #customAmount::-webkit-inner-spin-button,
#rechargePage #customAmount::-webkit-outer-spin-button{
  -webkit-appearance:none;
}


/* ── PAYMENT CHANNELS — thin rectangles, stacked ── */
#rechargePage .channel-select-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

#rechargePage .channel-manual-tag{
  display:none;
}

#rechargePage .channel-card{
  position:relative;
  width:100%;
  min-height:40px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid var(--ink);
  border-radius:8px;
  background:#ffffff;
  cursor:pointer;
  transition:.15s ease;
}

#rechargePage .channel-card.selected{
  background:var(--ink);
  border-color:var(--ink);
}

#rechargePage .channel-card-icon{
  display:none;
}

#rechargePage .channel-card-info{
  flex:none;
  min-width:0;
  text-align:center;
}

#rechargePage .channel-card-name{
  color:var(--ink);
  font-size:13px;
  font-weight:600;
}

#rechargePage .channel-card.selected .channel-card-name{
  color:#ffffff;
}

#rechargePage .channel-card-radio{
  display:none;
}


/* ── CONFIRM BUTTON — short, centered, not full-width ── */
#rechargePage .deposit-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:fit-content;
  min-width:140px;
  height:40px;
  margin:16px auto 0;
  padding:0 28px;
  border:0;
  border-radius:999px;
  background:var(--ink);
  color:#ffffff;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
}

#rechargePage .deposit-btn:hover{ filter:brightness(1.15); }
#rechargePage .deposit-btn:active{ transform:scale(.98); }

#rechargePage .deposit-btn:disabled{
  opacity:1;
  cursor:not-allowed;
}


/* ── INSTRUCTIONS ── */
#rechargePage .rech-info-box{
  margin:20px 14px 0;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}

#rechargePage .rech-info-title{
  margin-bottom:0;
  color:var(--ink);
  font-size:14.5px;
  font-weight:700;
}

#rechargePage .rech-info-note{
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
  margin:10px 0 16px;
}

#rechargePage .rech-instruction-row{
  display:flex;
  gap:6px;
  margin-bottom:14px;
}

#rechargePage .rech-instruction-row:last-child{ margin-bottom:0; }

#rechargePage .rech-instruction-row span{
  flex-shrink:0;
  color:var(--ink);
  font-size:12px;
  font-weight:600;
}

#rechargePage .rech-instruction-row p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}


/* ── HIDDEN COMPATIBILITY ── */
#rechargePage #manualTransferCard,
#rechargePage #rechargeRulesBox{
  display:none!important;
}


/* ── SCROLLBAR ── */
#rechargePage::-webkit-scrollbar{ width:3px }
#rechargePage::-webkit-scrollbar-thumb{
  background:rgba(17,17,17,.25);
  border-radius:99px;
}


/* ── SMALL PHONES ── */
@media(max-width:360px){
  #rechargePage .rech-card{ padding-left:11px; padding-right:11px; }
  #rechargePage .amount-option{ width:80px; font-size:11px; height:36px; }
  #rechargePage .rech-balance-card{ height:150px; }
  #rechargePage .rech-info-box{ margin-left:11px; margin-right:11px; }
}



/* =========================================================
   PAYMENT LOADER — Black Transparent, White Text (No Yellow)
   ========================================================= */

.gle-payment-loader-popup {
  width: min(240px, calc(100vw - 60px)) !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(15, 17, 21, 0.82) !important; /* Semi-transparent rich dark black */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.gle-payment-loader {
  padding: 22px 18px 18px;
  text-align: center;
  color: #ffffff;
}

.gle-payment-loader-popup .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
}

.gle-loader-orbit {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gle-loader-orbit::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.gle-loader-orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-right-color: rgba(255, 255, 255, 0.3);
  animation: recharge-loader-spin 0.8s linear infinite;
}

.gle-loader-core {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
}

.gle-loader-core-icon {
  color: #ffffff;
  font-size: 11px;
}

.gle-loader-title {
  margin: 0 o 4px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.gle-loader-subtitle {
  max-width: 190px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  line-height: 1.4;
}

.gle-loader-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}

.gle-loader-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  animation: recharge-loader-dot 1.2s ease-in-out infinite;
}

.gle-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.gle-loader-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes recharge-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes recharge-loader-dot {
  0%, 70%, 100% { opacity: 0.2; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-2px); }
}




/* =========================================================
   GLOBAL VARIABLES — moved to :root so all elements can see them
   ========================================================= */
:root {
  --mcp-green-dark: #123D2F;
  --mcp-green: #1C7A4D;
  --mcp-green-mid: #178A56;
  --mcp-green-light: #E3F5EC;
  --mcp-blue: #2F6FED;
  --mcp-ink: #16241F;
  --mcp-muted: #6B8079;
  --mcp-line: #E3EFE9;
  --mcp-bg: #ffffff;
  --mcp-warn-ink: #B45B22;
}




/* =========================================================
   MANUAL CHECKOUT — dark green / mint, matching reference
   ========================================================= */

.manual-checkout-page {
  --mcp-green-dark: #123D2F;
  --mcp-green: #1C7A4D;
  --mcp-green-mid: #178A56;
  --mcp-green-light: #E3F5EC;
  --mcp-blue: #2F6FED;
  --mcp-ink: #16241F;
  --mcp-muted: #6B8079;
  --mcp-line: #E3EFE9;
  --mcp-bg: #ffffff;
  --mcp-warn-ink: #B45B22;

  position: fixed;
  inset: 0;
  z-index: 999998;
  background: var(--mcp-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: 'Inter', sans-serif;
  color: var(--mcp-ink);
  box-sizing: border-box;
}

.manual-checkout-page * { box-sizing: border-box; }

.mcp-wrap {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ── GREEN TOP SECTION — sized to its content only, not full page ── */
.mcp-topband {
  background: var(--mcp-green-dark);
  padding: 18px 0 46px;
  position: relative;
}

.mcp-topbar {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.mcp-back-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
}

.mcp-topbar-title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.mcp-secured-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── AMOUNT CARD — floats on top of the green band ── */
.mcp-amount-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.mcp-amount-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--mcp-muted);
  margin-bottom: 6px;
}

.mcp-amount-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--mcp-green-mid);
  margin-bottom: 12px;
}

.mcp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--mcp-green-light);
  color: var(--mcp-green-dark);
  font-size: 12px;
  font-weight: 700;
}

.mcp-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mcp-green-mid);
}

/* ── LOWER WHITE SECTION — pulled up to overlap the green band's
   bottom curve, so the page reads as compact, not a full green wall ── */
.mcp-wrap-lower {
  margin-top: -26px;
  padding-bottom: 40px;
}

/* ── PAYMENT DETAILS CARD ── */
.mcp-details-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 28px rgba(18, 61, 47, 0.10);
}

.mcp-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.mcp-details-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--mcp-ink);
}

.mcp-expires-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--mcp-muted);
  background: #F2F2F2;
  border-radius: 999px;
  padding: 5px 11px;
}

/* ── DETAIL ROWS ── */
.mcp-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mcp-line);
}

.mcp-detail-row:last-of-type {
  border-bottom: none;
}

.mcp-detail-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--mcp-muted);
  margin-bottom: 3px;
}

.mcp-detail-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--mcp-ink);
}

.mcp-value-blue { color: var(--mcp-blue); }
.mcp-value-green { color: var(--mcp-green-mid); }

.mcp-copy-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
}

.mcp-copy-blue { background: var(--mcp-blue); }
.mcp-copy-green { background: var(--mcp-green-mid); }
.mcp-copy-btn:active { opacity: 0.85; }

/* ── NOTE ── */
.mcp-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--mcp-muted);
  line-height: 1.6;
  margin: 18px 0 16px;
}

/* ── SUBMIT BUTTON TEXT FIX ── */
.mcp-submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--mcp-green-mid);
  color: #ffffff; /* Ensures text is visible/white */
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.mcp-submit-btn:active { background: var(--mcp-green-dark); }





/* =========================================================
   PROOF FORM OVERLAY — fancier, new style
   ========================================================= */

.mcp-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(18, 61, 47, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.mcp-form-card {
  width: 100%;
  max-width: 370px;
  background: #ffffff;
  border-radius: 24px;
  padding: 30px 24px 24px;
  box-sizing: border-box;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: mcpFormPop 0.25s ease-out;
}

@keyframes mcpFormPop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.mcp-form-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--mcp-green-mid), var(--mcp-green-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 10px 22px -6px rgba(23, 138, 86, 0.5);
}

.mcp-form-card h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--mcp-ink);
}

.mcp-form-sub {
  margin: 0 0 20px;
  font-size: 12.5px;
  color: var(--mcp-muted);
}

.mcp-form-label {
  display: block;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--mcp-ink);
  margin-bottom: 7px;
}

.mcp-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 48px;
  border: 1.5px solid var(--mcp-line);
  border-radius: 12px;
  background: #FAFCFB;
  margin-bottom: 18px;
  transition: border-color 0.2s;
}

.mcp-input-wrap:focus-within {
  border-color: var(--mcp-green-mid);
  background: #ffffff;
}

.mcp-input-wrap i {
  color: var(--mcp-green-mid);
  font-size: 13px;
}

.mcp-form-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--mcp-ink);
  font-family: inherit;
}

.mcp-upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px;
  border: 1.5px dashed var(--mcp-line);
  border-radius: 14px;
  color: var(--mcp-muted);
  font-size: 12px;
  margin-bottom: 20px;
  cursor: pointer;
  background: #FAFCFB;
  transition: border-color 0.2s, background 0.2s;
}

.mcp-upload-box:hover {
  border-color: var(--mcp-green-mid);
  background: var(--mcp-green-light);
}

.mcp-upload-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mcp-green-light);
  color: var(--mcp-green-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.mcp-upload-box.has-file {
  border-style: solid;
  border-color: var(--mcp-green-mid);
  color: var(--mcp-green-dark);
  background: var(--mcp-green-light);
}

.mcp-complete-pill {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mcp-green-mid), var(--mcp-green-dark));
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 12px 26px -8px rgba(23, 138, 86, 0.55);
}
.mcp-complete-pill:active { filter: brightness(0.95); }
.mcp-complete-pill:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.mcp-form-cancel {
  width: 100%;
  padding: 11px;
  border: none;
  background: transparent;
  color: var(--mcp-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}


/* ── SUCCESS STATE FIX ──
   Was z-index: 5, which sat BEHIND .manual-checkout-page (and
   .mcp-form-overlay, at 999999) — so this never actually became
   visible before the 2-second redirect fired. Matching the same
   z-index tier as the form overlay fixes it. Also adds the icon
   style, since .mcp-success-icon didn't exist in the old CSS (it
   only had .mcp-verifying-spinner). */

.mcp-verifying {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
}

.mcp-success-icon {
  font-size: 54px;
  color: #10A37F;
  margin-bottom: 16px;
}

.mcp-verifying h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: #1A2B27;
}

.mcp-verifying p {
  margin: 0;
  font-size: 13px;
  color: #7C8F89;
}

.channel-card-icon-manual {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}


.record-card {
  position: relative;
}

.record-channel-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #111111;
  color: #FFD400;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
}


:root {
  --ink: #111111;
  --ink-soft: #2A2A2A;
  --white: #FFFFFF;
}

.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999998;
  box-sizing: border-box;
  padding: 20px;
}

/* ── CARD ── */
.mx-unique-modal {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  box-sizing: border-box;
  animation: mx-pop-in 0.25s ease-out;
}

.mx-modal-inner {
  border-radius: 18px;
  padding: 24px 20px 20px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--white);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.28);
}

@keyframes mx-pop-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── TITLE ── */
.mx-welcome-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  margin: 0 0 18px;
  letter-spacing: -0.2px;
}

/* ── PLAIN NUMBERED TEXT LIST — no icons, no stripes, matches reference ── */
.mx-notice-list {
  margin-bottom: 20px;
}

.mx-notice-item {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.mx-notice-item:last-child {
  margin-bottom: 0;
}

/* ── TELEGRAM PILLS — side by side, same dark tone as reference ── */
.mx-notice-btn-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

/* ── BUTTONS ── */
.mx-action-btn {
  padding: 13px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, filter 0.2s;
  font-family: inherit;
  border: none;
  color: var(--white);
  background: linear-gradient(180deg, #3A4650, #232B33);
}

.mx-action-btn--half {
  flex: 1;
}

.mx-action-btn--ok {
  width: 100%;
  border-radius: 999px;
  background: var(--ink);
  font-size: 15px;
  padding: 14px;
}

.mx-action-btn:hover { filter: brightness(1.15); }
.mx-action-btn:active { transform: scale(0.97); }

@media (max-width: 380px) {
  .mx-welcome-title { font-size: 19px; }
}


#welcomePopup {
  display: none; /* Changed from none to flex for visibility during testing */
}


.ft-alert-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(11, 15, 25, 0.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 20px;
  box-sizing: border-box;
}

.ft-alert-overlay.show {
  display: flex;
}

.ft-alert-card {
  width: 100%;
  max-width: 340px;
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.18);
  animation: ft-alert-pop 0.2s ease-out;
  font-family: 'Inter', sans-serif;
}

@keyframes ft-alert-pop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.ft-alert-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.ft-alert-icon.warning { background: #fff7e6; color: #d99a06; }
.ft-alert-icon.error   { background: #fdecec; color: #e5484d; }
.ft-alert-icon.success { background: #eaf6ec; color: #1a9c4a; }
.ft-alert-icon.info    { background: #eaf6ec; color: #16a34a; }

.ft-alert-title {
  font-size: 16px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 8px;
}

.ft-alert-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.56);
  margin: 0 0 20px;
}

/* review details block (used by ftConfirm's `html` option) */
.ft-alert-html {
  text-align: left;
  font-size: 13.5px;
  line-height: 1.7;
  color: #111111;
  margin: -10px 0 20px;
}

/* side-by-side confirm/cancel layout */
.ft-alert-btn-row {
  display: flex;
  gap: 10px;
}

.ft-alert-btn-row .ft-alert-btn {
  flex: 1;
  margin: 0; /* was width:100% standalone before, now shares the row */
}

.ft-alert-btn {
  border: none;
  background: #16A34A;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}

/* neutral cancel styling, sits next to the confirm button */
.ft-alert-btn-cancel {
  background: #F1F1F1;
  color: #111111;
}

.ft-alert-btn:active { transform: scale(0.98); }


.referral-promo-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid #e7edfb;
  box-shadow: 0 8px 24px rgba(3, 87, 238, 0.08);
  max-width: 500px;
  
  /* 🌟 CHANGE THIS LINE: Adds negative top margin to shift it up, and pushes the bottom up */
  margin: -20px auto 35px auto; 
  
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.referral-promo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(3, 87, 238, 0.16);
}

.referral-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
}

.referral-text-col { flex: 1; }

.referral-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #0357EE;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.referral-headline {
  font-size: 21px;
  font-weight: 800;
  color: #0b1220;
  margin: 0 0 4px 0;
  letter-spacing: -0.3px;
}

.referral-subtext {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.referral-icon-badge {
  width: 42px;
  height: 42px;
  background: #eaf0fe;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #0357EE;
  flex-shrink: 0;
  border: 1px solid #d7e3fb;
}

.referral-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.referral-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 30px;
  white-space: nowrap;
}

.referral-pill.green {
  background: #e8f8ef;
  color: #16a34a;
  border: 1px solid #c8ede0;
}

.referral-pill.amber {
  background: #fff6e6;
  color: #b45309;
  border: 1px solid #fbe3b0;
}

.referral-cta-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 13px;
  background: #0357EE;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 18px rgba(3, 87, 238, 0.25);
  transition: background 0.2s, transform 0.15s;
}

.referral-cta-btn:hover {
  background: #0241b8;
}

.referral-cta-btn:active {
  transform: scale(0.97);
}

@media (max-width: 380px) {
  .referral-headline { font-size: 19px; }
  .referral-icon-badge { width: 38px; height: 38px; border-radius: 10px; font-size: 15px; }
}


/* DAILY LOADER OVERLAY */
.daily-loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:9999;
}

/* 3D SPINNER */
.spinner-3d{
  width:60px;
  height:60px;
  border:6px solid rgba(255,255,255,0.2);
  border-top:6px solid #00c2ff;
  border-radius:50%;
  animation:spin3d 1s linear infinite;
  margin-bottom:15px;
}

@keyframes spin3d{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

.daily-loader p{
  color:white;
  font-weight:600;
  font-size:16px;
}


/* ===== PRODUCT PAGE ===== */
.product-page {
  width: 100%;
  padding: 20px;
  padding-bottom: 80px;
  padding-top: 65px; /* space for fixed header */
  background: #ffffff; /* white background */
  min-height: 100vh;
  color: #ffffff;      /* white text */
  display: none;       /* show when active */
}

/* ===== FIXED HEADER ===== */
.product-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #1e40ff; /* blue header */
  padding: 12px 0;
  z-index: 1000;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;      /* white text */
  box-shadow: 0 3px 8px rgba(30, 64, 255, 0.2); /* subtle blue shadow */
}

.product-header i {
  margin-right: 8px;
  color: #ffffff; /* white icon */
}

/* ===== PREMIUM PRODUCT CARD - REDESIGNED ===== */
.premium-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 0;
  margin-top: -12px;
  margin-bottom: 16px;
  border: 1px solid #ede9f6;
  box-shadow: 0 4px 18px rgba(75, 0, 130, 0.07);
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── TOP STRIP ── */
.inv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #4b0082, #9d4edd);
}

.inv-vip-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}

.inv-vip-badge i {
  color: #e9d5ff;
  font-size: 14px;
}

.inv-days-pill {
  background: rgba(255,255,255,0.2);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.3);
}

/* ── BODY: IMAGE + STATS GRID ── */
.inv-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.inv-product-img {
  width: 85px;
  height: 85px;
  min-width: 85px;
  border-radius: 12px;
  background: #f5f0ff;
  border: 1px solid #ede9f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.inv-product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inv-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}

.inv-stat-box {
  background: #faf7ff;
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid #ede9f6;
}

.inv-stat-label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}

.inv-stat-label i {
  color: #9d4edd;
  font-size: 9px;
}

.inv-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: #9d4edd;
}

.inv-stat-val.dark {
  color: #0f172a;
}

.inv-stat-val.green {
  color: #16a34a;
}

/* ── FOOTER: DATE + PROGRESS BAR ── */
.inv-card-footer {
  padding: 0 16px 14px 16px;
  border-top: 1px solid #f3eeff;
  padding-top: 12px;
}

.inv-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #7c3aed;
  font-weight: 600;
  margin-bottom: 8px;
}

.inv-date-range i {
  color: #9d4edd;
}

.inv-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: #ede9f6;
  border-radius: 99px;
  overflow: hidden;
}

.inv-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4b0082, #9d4edd);
  border-radius: 99px;
  transition: width 0.5s ease;
}

/* ── COUNTDOWN ROW ── */
.inv-countdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #faf7ff;
  border-top: 1px solid #f3eeff;
}

.inv-next-label {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

.inv-countdown-timer {
  font-family: monospace;
  font-weight: 700;
  color: #4b0082;
  font-size: 13px;
  letter-spacing: 1px;
}

/* ── MOBILE ── */
@media (max-width: 480px) {
  .inv-product-img {
    width: 72px;
    height: 72px;
    min-width: 72px;
  }
  .inv-stat-val {
    font-size: 12px;
  }
}


:root {
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.55);
  --white: #FFFFFF;
  --line: #EFEFEF;
  --panel-gray: #F6F6F6;
}

.invite-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 999;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--white);
  color: var(--ink);
  padding-bottom: 40px;
}

/* ── CONTAINER ── */
.referral-container {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 0 32px 0;
  box-sizing: border-box;
}



/* ── BRAND BLOCK — logo image + "Task Center >>" ── */
.invite-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px 14px;
  text-align: center;
}

.invite-brand-logo-img {
  max-width: 160px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 10px;
}

/* ── TASK CENTER LINK — plain text, no pill ── */
.invite-task-link {
  border: none;
  background: transparent;
  padding: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.invite-task-link-arrow {
  font-size: 12px;
  font-weight: 500;
}

/* ── BANNER — code/link text overlaid directly on the photo ── */
.invite-banner-photo {
  position: relative;
  width: 100%;
  height: 170px;
  overflow: hidden;
}

.invite-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.invite-banner-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 70%, transparent 100%);
  padding: 30px 16px 12px;
  box-sizing: border-box;
}

.invite-banner-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.invite-banner-col:last-child {
  text-align: right;
  align-items: flex-end;
}

.invite-banner-value {
  font-size: 14px;
  font-weight: 600;
  color: #E8A33D;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.invite-banner-link {
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  text-align: right;
  width: 100%;
  padding: 0;
}

.invite-banner-label {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}

/* ── COPY BAR — thin ── */
.invite-copy-bar {
  display: flex;
  background: var(--ink);
}

.invite-copy-half {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 500;
  padding: 11px 8px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}

.invite-copy-half:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* ── VALID USERS / TOTAL INCOME PILL — thinner ── */
.invite-stats-bar {
  background: var(--panel-gray);
  padding: 12px;
}

.invite-stats-pill {
  background: var(--ink);
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 11px 0;
}

.invite-stats-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.invite-stats-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

.invite-stats-label {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}

.invite-stats-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.18);
}

/* ── LEVEL ROWS — thin, plain, no bold ── */
.invite-level-list {
  background: var(--white);
}

.invite-level-row-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.invite-level-medal {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invite-level-medal i {
  font-size: 26px;
  color: #D9A900;
}

.invite-level-medal-tag {
  position: absolute;
  top: 6px;
  font-size: 5.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  text-align: center;
}

.invite-level-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.invite-level-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.invite-level-lbl {
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-muted);
}

/* ── INVITATION RULE ── */
.invite-rule-card {
  margin: 14px 16px 0;
  padding: 0 2px;
}

.invite-rule-card p {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 9px;
}

.invite-rule-card strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 380px) {
  .invite-level-row-item { padding: 10px 10px; gap: 6px; }
  .invite-level-medal { width: 26px; }
  .invite-level-medal i { font-size: 22px; }
}



/* =========================================================
   TEAM PAGE — plain white, matching reference exactly
   ========================================================= */

:root {
  --team-ink: #111111;
  --team-muted: #9A9A9A;
  --team-line: #ECECEC;
  --team-bg: #FAFAFA;
  --team-green: #16A34A;
  --team-red: #E11D48;
}

#earningsPage {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--team-bg);
  color: var(--team-ink);
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
}
#earningsPage * { box-sizing: border-box; }

/* =========================================================
   HEADER — plain white, back arrow + centered title only
   ========================================================= */

.team-header-main {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--team-line);
}

.team-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--team-ink);
}

.back-btn-white {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--team-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.back-btn-white:active { transform: translateY(-50%) scale(.92); }

/* =========================================================
   CONTAINER
   ========================================================= */

.team-page-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 0 130px;
  box-sizing: border-box;
}

/* =========================================================
   LEVEL TABS — number on top, "Level N(x)" label below,
   thin bottom line, active tab gets a black underline
   ========================================================= */

.team-level-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--team-line);
  background: #ffffff;
}

.team-tab-btn {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--team-muted);
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  position: relative;
  transition: color .15s ease;
}

.team-tab-btn strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--team-ink);
}

.team-tab-btn span {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--team-muted);
}

.team-tab-btn.active span {
  color: var(--team-ink);
}

.team-tab-btn.active::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 2px;
  background: var(--team-ink);
}

.team-tab-btn:active { opacity: .7; }

/* =========================================================
   TEAM LIST
   ========================================================= */

.team-list-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 15px 0;
}

/* =========================================================
   MEMBER CARD
   ========================================================= */

.team-list-row {
  position: relative;
  padding: 14px 15px;
  background: #ffffff;
  border: 1px solid var(--team-line);
  border-radius: 16px;
}

.team-list-row-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.team-member-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--team-line);
}
.team-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.team-list-number-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.team-list-number-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--team-ink);
}
.team-list-number {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--team-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-status-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.team-status-purchased {
  background: rgba(22,163,74,.12);
  color: var(--team-green);
}
.team-status-inactive {
  background: rgba(225,29,72,.10);
  color: var(--team-red);
}

.team-list-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--team-line);
}

.team-row-figures {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
}
.team-row-figures span { color: var(--team-muted); font-weight: 500; }
.team-deposit-value { color: var(--team-green); }
.team-withdraw-value { color: var(--team-red); }

.team-row-time {
  font-size: 10.5px;
  color: var(--team-muted);
}

/* =========================================================
   EMPTY STATE — clipboard illustration + "No more data",
   matching the reference exactly
   ========================================================= */

.team-list-nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 20px 100px;
  text-align: center;
}

.team-list-nodata svg {
  color: #D9D9D9;
  margin-bottom: 18px;
}

.team-list-nodata span {
  font-size: 13.5px;
  font-weight: 400;
  color: #B0B0B0;
}

/* =========================================================
   LOADING / ERROR STATES
   ========================================================= */

.team-list-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 22px;
  background: #ffffff;
  border: 1px solid var(--team-line);
  border-radius: 18px;
  margin: 0 15px;
}

.team-list-empty-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F2F2;
  color: var(--team-ink);
  font-size: 20px;
}

.team-error-state .team-list-empty-icon {
  background: #FDEBEC;
  color: var(--team-red);
}

.team-list-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--team-ink);
  margin: 0 0 6px;
}

.team-list-empty-sub {
  font-size: 11.5px;
  color: var(--team-muted);
  line-height: 1.55;
  max-width: 250px;
  margin: 0;
}

.team-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 46px 0;
  color: var(--team-muted);
  font-size: 12px;
  font-weight: 600;
}

.team-loading-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F2F2;
  color: var(--team-ink);
}



/* ============ WITHDRAWAL — WHITE + BLACK, minimal foreign-script style ============ */
:root{
  --wd-ink:#111111;
  --wd-muted:#6B6B6B;
  --wd-faint:#9A9A9A;
  --wd-line:#E6E6E6;
}

.withdraw-page{
  position:relative;
  min-height:100vh;
  width:100%;
  background:#ffffff;
  color:var(--wd-ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  box-sizing:border-box;
  padding-bottom:40px;
}
.withdraw-page *{ box-sizing:border-box; }

/* HEADER BAR — shared by both pages */
.wd-header-bar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  height:52px;
  padding:0 14px;
  background:#ffffff;
  border-bottom:1px solid var(--wd-line);
}
.wd-back-btn{
  position:absolute;
  left:14px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:var(--wd-ink);
  cursor:pointer;
}
.wd-header-title{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--wd-ink);
}

/* CONTAINER */
.wd-container{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-direction:column;
}

/* BALANCE BANNER */
.wd-balance-banner{
  position:relative;
  width:100%;
  height:170px;
  overflow:hidden;
}
.wd-balance-bg-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.wd-balance-overlay{
  position:absolute;
  top:20px;
  left:16px;
  z-index:2;
}
.wd-balance-value{
  font-size:24px;
  font-weight:800;
  color:var(--wd-ink);
}
.wd-balance-label{
  font-size:12px;
  font-weight:500;
  color:var(--wd-ink);
  margin-top:4px;
}

/* SELECT WITHDRAWAL ACCOUNT ROW */
.wd-select-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 14px;
  border:none;
  border-bottom:1px solid var(--wd-line);
  background:#ffffff;
  cursor:pointer;
  font-family:inherit;
}
.wd-select-icon{
  flex:0 0 auto;
  color:var(--wd-ink);
  display:flex;
  align-items:center;
}
.wd-select-text{
  flex:1;
  text-align:left;
  font-size:14px;
  font-weight:600;
  color:var(--wd-ink);
}
.wd-select-chevron{
  flex:0 0 auto;
  color:var(--wd-faint);
}

/* WITHDRAWAL AMOUNT */
.wd-section{
  padding:18px 14px 0;
}
.wd-section-title{
  margin:0 0 12px;
  font-size:14px;
  font-weight:700;
  color:var(--wd-ink);
}
.wd-amount-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:14px;
  border-bottom:1px solid var(--wd-line);
}
.wd-currency{
  color:var(--wd-faint);
  font-size:15px;
  font-weight:600;
}
.wd-input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  color:var(--wd-ink);
}
.wd-input::placeholder{ color:var(--wd-faint); }
.wd-input::-webkit-inner-spin-button,
.wd-input::-webkit-outer-spin-button{ -webkit-appearance:none; }

/* META ROW */
.wd-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 0;
  font-size:12.5px;
  color:var(--wd-ink);
}
.wd-meta-row strong{ font-weight:700; }

/* CONFIRM */
.wd-action{
  display:flex;
  justify-content:center;
  padding:20px 14px 0;
}
.wd-confirm-btn{
  width:fit-content;
  min-width:150px;
  height:42px;
  padding:0 30px;
  border:none;
  border-radius:999px;
  background:var(--wd-ink);
  color:#fff;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
}
.wd-confirm-btn:hover{ filter:brightness(1.2); }
.wd-confirm-btn:active{ transform:scale(.98); }
.wd-confirm-btn:disabled{
  background:#B5B5B5;
  cursor:not-allowed;
}

/* INSTRUCTIONS */
.wd-instructions-block{
  padding:26px 14px 0;
}
.wd-instructions-title{
  margin:0 0 14px;
  font-size:14.5px;
  font-weight:700;
  color:var(--wd-ink);
}
.wd-instructions{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  color:var(--wd-muted);
  font-size:12.5px;
  line-height:1.55;
}
.wd-instructions li{ padding-left:2px; }
.wd-instructions-footer{
  margin:16px 0 0;
  color:var(--wd-muted);
  font-size:12.5px;
  line-height:1.55;
}


/* ============ SELECT PAYOUT ACCOUNT — new form-style page ============ */
.bank-select-page{
  position:relative;
  min-height:100vh;
  width:100%;
  background:#ffffff;
  color:var(--wd-ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  box-sizing:border-box;
  padding-bottom:40px;
}
.bank-select-page *{ box-sizing:border-box; }

.bsel-container{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:20px 16px 0;
}

.bsel-intro{
  font-size:13px;
  color:var(--wd-muted);
  line-height:1.55;
  margin:0 0 20px;
}

.bsel-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:20px;
}

/* Each account is a bordered form card, not a pill */
.bsel-card{
  border:1.5px solid var(--wd-line);
  border-radius:16px;
  padding:16px;
  background:#ffffff;
  cursor:pointer;
  transition:.15s;
}
.bsel-card:active{ transform:scale(.99); }
.bsel-card.selected{
  border-color:var(--wd-ink);
  box-shadow:0 6px 18px rgba(17,17,17,.08);
}

.bsel-card-top{
  display:flex;
  align-items:center;
  gap:12px;
}

.bsel-card-icon{
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#F2F2F2;
  color:var(--wd-ink);
}
.bsel-card.selected .bsel-card-icon{
  background:var(--wd-ink);
  color:#ffffff;
}

.bsel-card-heading{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.bsel-card-name{
  font-size:14.5px;
  font-weight:700;
  color:var(--wd-ink);
}

.bsel-card-badge{
  align-self:flex-start;
  font-size:10px;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  background:#F5F5F5;
  color:var(--wd-faint);
}
.bsel-badge-linked{
  background:#111111;
  color:#ffffff;
}
.bsel-badge-unlinked{
  background:#F8F8F8;
  color:var(--wd-faint);
  border:1px dashed var(--wd-line);
}

.bsel-radio{
  flex-shrink:0;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1.5px solid #D5D5D5;
  position:relative;
}
.bsel-card.selected .bsel-radio{
  border-color:var(--wd-ink);
}
.bsel-card.selected .bsel-radio::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--wd-ink);
}

.bsel-card-divider{
  height:1px;
  background:var(--wd-line);
  margin:14px 0 12px;
}

.bsel-card-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.bsel-detail-label{
  font-size:11px;
  font-weight:600;
  color:var(--wd-faint);
  text-transform:uppercase;
  letter-spacing:.03em;
}

.bsel-detail-value{
  font-size:12.5px;
  font-weight:600;
  color:var(--wd-ink);
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:65%;
}

/* Add-account action — dashed, distinct from the solid cards */
.bsel-add-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px;
  border:1.5px dashed var(--wd-line);
  border-radius:14px;
  background:transparent;
  color:var(--wd-ink);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  margin-bottom:18px;
  transition:.15s;
}
.bsel-add-btn:hover{ background:#FAFAFA; border-color:var(--wd-ink); }
.bsel-add-btn:active{ transform:scale(.98); }

.bsel-note{
  color:var(--wd-faint);
  font-size:11px;
  line-height:1.5;
  text-align:center;
  margin:0 0 20px;
}

.channel-disabled{
  opacity:.4;
  pointer-events:none;
}

/* MOBILE */
@media (max-width:390px){
  .wd-balance-banner{ height:150px; }
  .wd-section{ padding-left:12px; padding-right:12px; }
  .wd-select-row{ padding-left:12px; padding-right:12px; }
  .wd-meta-row{ padding-left:12px; padding-right:12px; }
  .wd-instructions-block{ padding-left:12px; padding-right:12px; }
  .bsel-container{ padding-left:12px; padding-right:12px; }
}



:root {
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.55);
  --ink-faint: rgba(17, 17, 17, 0.4);
  --line: #ECECEC;

  --in: #16A34A;
  --out: #E11D48;
  --pending: #D9A900;
}

.bank-page {
  position: relative;
  background: #ffffff;
  min-height: 100vh;
  width: 100%;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ── HEADER — plain, no blur/dot texture ── */
.records-hero {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  padding: 14px 16px 0;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}

.records-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
}

.records-back-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.records-hero-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  text-align: center;
}

/* ── TABS — underline style ── */
.records-tab-bar {
  display: flex;
  gap: 26px;
  justify-content: center;
}

.records-tab-btn {
  border: none;
  background: none;
  padding: 0 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  position: relative;
}

.records-tab-btn.active {
  color: var(--ink);
  font-weight: 700;
}

.records-tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ink);
}

/* ── CONTENT ── */
.records-content-container {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 4px 16px 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ── LEDGER LIST — plain rows, no card background ── */
#recordsContainer {
  display: flex;
  flex-direction: column;
}

.record-card {
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.record-card:last-child {
  border-bottom: none;
}

.record-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* type label — PLAIN TEXT ONLY. No background, no border, no
   box-shadow, no filter/blur of any kind — just the text color
   itself carries the status. */
.record-type-label {
  font-size: 14px;
  font-weight: 600;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline;
}

.record-type-label.status-pending  { color: var(--pending); }
.record-type-label.status-approved { color: var(--in); }
.record-type-label.status-failed   { color: var(--out); }

.record-date {
  font-size: 12px;
  color: var(--ink-faint);
}

/* order/reference number — kept, shown small and muted */
.record-ref {
  font-size: 11px;
  color: var(--ink-faint);
}

.record-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.record-type-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* amount received (withdrawals only) — kept, muted, right-aligned */
.record-received {
  font-size: 11.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.records-empty-text {
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  margin-top: 40px;
}

@media (max-width: 380px) {
  .record-card { padding: 14px 0; }
  .records-tab-bar { gap: 18px; }
}


/* ================= MODAL OVERLAY ================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

/* ================= MODAL CARD ================= */
.modal-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}

/* ================= HEADER ================= */
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sheet-title {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
}

.close-sheet {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

/* ================= INNER CARD ================= */
.slim-card {
  background: #f7f7f7;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 25px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* ================= PRODUCT ROW ================= */
.product-main-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.check-icon-container {
  width: 48px;
  height: 48px;
  background: #2D6BEF;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  color: #000000;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================= PRODUCT DETAILS ================= */
.product-details strong {
  font-size: 17px;
  font-weight: 700;
  display: block;
  color: #111;
}

.product-details p {
  font-size: 14px;
  color: #444;
  margin-top: 3px;
}

/* ================= DIVIDER ================= */
.divider-line {
  height: 1px;
  background: #e5e5e5;
  margin: 14px 0;
}

/* ================= BALANCE ================= */
.account-balance-row {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

/* ================= PURCHASE BUTTON ================= */
.purchase-btn {
  background: #2D6BEF;
  color: white;
  border: none;
  border-radius: 40px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  margin: auto;
  box-shadow: 0 6px 15px rgba(47,72,236,0.4);
  transition: transform 0.15s ease;
}

.purchase-btn:active {
  transform: scale(0.95);
}

/* ================= MOBILE ================= */
@media (max-width:480px){

.modal-card{
padding:20px;
}

.sheet-title{
font-size:20px;
}

.product-details strong{
font-size:16px;
}

.product-details p,
.account-balance-row{
font-size:13px;
}

.purchase-btn{
font-size:14px;
padding:10px 22px;
}

}


:root {
  --fs-bg: #f4f5f7;
  --fs-card-bg: #ffffff;
  --fs-purple: #7c3aed;
  --fs-green: #10b981;
  --fs-red: #ef4444;
  --fs-dark: #111827;
  --fs-gray: #6b7280;
}

.investment-page {
  position: relative;
  background: var(--fs-bg);
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: var(--fs-dark);
}

/* Thin Header with Tiny Text */
.investment-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  z-index: 1000;
  border-bottom: 1px solid #e5e7eb;
  box-sizing: border-box;
}

.investment-header-center h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-dark);
  letter-spacing: 0.3px;
}

.investment-back-btn {
  position: absolute;
  left: 12px;
  background: transparent;
  border: none;
  color: var(--fs-dark);
  cursor: pointer;
  font-size: 13px;
}

.card-wrapper {
  position: relative;
  flex: 1;
  padding: calc(44px + 12px) 16px 100px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  overflow-x: hidden;
}

/* Extended Banner Height (Taller Rectangle) */
.fs-hero-banner {
  position: relative;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  height: 230px; /* Increased height so it's longer/taller */
  border-radius: 0;
  background: url('pro.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.fs-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 100%);
}

/* Thin Stacked Pills Touching the Left Edge */
.fs-stats-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 150px;
  margin-left: -16px;
}

.fs-stat-pill {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  padding: 6px 14px 6px 18px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.fs-stat-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--fs-dark);
  line-height: 1.1;
}

.fs-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fs-gray);
  margin-top: 1px;
}

/* Empty State */
.inv-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  margin-top: 4px;
}

.inv-empty-text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--fs-gray);
}

/* Product Card Style */
.fs-product-card {
  background: var(--fs-card-bg);
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fs-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fs-plan-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--fs-purple);
}

.fs-cycle-text {
  font-size: 12px;
  color: var(--fs-gray);
  font-weight: 500;
}

.fs-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fs-metric-box {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #f1f5f9;
}

.fs-metric-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.fs-icon-green { color: var(--fs-green); font-size: 12px; }
.fs-icon-purple { color: var(--fs-purple); font-size: 12px; }

.fs-metric-label {
  font-size: 11px;
  color: var(--fs-gray);
  font-weight: 600;
}

.fs-metric-val {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}

.fs-text-green { color: var(--fs-green); }
.fs-text-purple { color: var(--fs-purple); }

.fs-metric-sub {
  font-size: 10px;
  color: var(--fs-gray);
}

.fs-roi-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fs-roi-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fs-gray);
  font-weight: 500;
}

.fs-roi-pct {
  color: var(--fs-purple);
  font-weight: 700;
}

.fs-roi-track {
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

.fs-roi-fill {
  height: 100%;
  background: var(--fs-purple);
  border-radius: 999px;
}

.fs-details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

.fs-detail-label {
  font-size: 11px;
  color: var(--fs-gray);
  margin-bottom: 2px;
}

.fs-detail-main {
  font-size: 16px;
  font-weight: 800;
  color: var(--fs-dark);
}

.fs-detail-profit {
  font-size: 15px;
  font-weight: 800;
  color: var(--fs-green);
}

.fs-countdown-row {
  font-size: 13px;
  color: var(--fs-red);
  font-weight: 600;
  padding-top: 4px;
}

.channel-card.channel-disabled {
  filter: blur(1px);
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.channel-card-disabled-badge {
  display: none;
  font-size: 10px;
  font-weight: 700;
  color: #ef4444;
  margin-top: 2px;
}

.channel-card.channel-disabled .channel-card-disabled-badge {
  display: block;
}



/* =========================================================
   SWAL POPUP (unchanged)
   ========================================================= */

.gle-swal-popup {
  border-radius: 20px !important;
  padding: 28px 22px !important;
  box-shadow: 0 20px 50px rgba(2, 65, 184, 0.15) !important;
}

.gle-swal-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0b1220 !important;
}

.gle-swal-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  color: #64748b !important;
}

.gle-swal-confirm {
  background: #0032A0 !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(0, 50, 160, 0.25) !important;
}

.gle-swal-confirm:hover {
  background: #001F66 !important;
}

.gle-swal-icon {
  border-color: #eaf0fe !important;
}


@media (max-width: 380px) {
  .inv-hero-value { font-size: 23px; }
  .inv-hero-stat-divider { margin: 0 8px; }
  .premium-card { padding: 15px; }
  .inv-price-badge { font-size: 11px; padding: 6px 11px; }
}



:root {
  --y: #FFD400;
  --y-dim: #D9A900;
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.5);
  --page-bg: #F5F5F5;
  --border: #ECECEC;
}

.password-page {
  background: var(--page-bg);
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  width: 100%;
  box-sizing: border-box;
}

/* ===================== ROUNDED HEADER — matching the reference ===================== */
.pw-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  background: var(--ink);
  border-radius: 0 0 20px 20px;
  box-sizing: border-box;
}

.pw-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
}
.pw-back-btn:active { background: rgba(255, 255, 255, 0.3); }

.pw-topbar-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

/* ===================== CONTAINER ===================== */
.pw-container {
  max-width: 460px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  box-sizing: border-box;
}

/* ===================== CARD ===================== */
.pw-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.05);
}

/* ===================== FORM ===================== */
.pw-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Plain boxed inputs — matching the reference exactly */
.pw-field-group {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
}

.pw-field-group input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  width: 100%;
  font-family: inherit;
  padding: 15px 40px 15px 16px;
  box-sizing: border-box;
}

.pw-field-group input::placeholder {
  color: var(--ink-muted);
}

.pw-field-group input:focus {
  box-shadow: 0 0 0 2px var(--y);
  border-radius: 10px;
}

.pw-eye-icon {
  position: absolute;
  right: 14px;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 13px;
}
.pw-eye-icon:hover { color: var(--ink); }

/* ===================== SUBMIT BUTTON — solid black, matching header ===================== */
.pw-submit-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 10px;
  background: var(--ink);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  font-size: 14.5px;
  font-family: inherit;
  margin-top: 6px;
}

.pw-submit-btn:active { opacity: 0.85; }
.pw-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===================== NOT USED IN THIS DESIGN — kept for compatibility ===================== */
.pw-badge-wrap,
.pw-strength-row {
  display: none;
}




.gle-whatsapp-fab {
  position: fixed;
  bottom: 180px;
  right: 18px;
  width: 54px;
  height: 54px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 26px;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  z-index: 9998;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.gle-whatsapp-fab:active {
  transform: scale(0.92);
}




:root {
  --ink: #111111;
  --ink-muted: #6B6B6B;
  --white: #FFFFFF;
  --page-bg: #F0F0F0;
}

.ppx-page,
.ppx-page * {
  box-sizing: border-box;
}

/* ── PAGE SHELL — top padding equals the fixed header's height ── */
.ppx-page {
  background: var(--page-bg);
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding-top: 56px;
  padding-bottom: 90px;
}

/* ── FIXED HEADER — pinned to the top while the page scrolls under it ── */
.ppx-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06);
}

.ppx-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* ── HERO BANNER — landscape rectangle, not a square ── */
.ppx-hero {
  position: relative;
}

.ppx-hero-img {
  width: 100%;
  aspect-ratio: 2 / 1;
  height: auto;
  max-height: 190px;
  object-fit: cover;
  display: block;
}

.ppx-stats {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;   /* sits fully inside the hero image, not straddling its edge */
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 10px;   /* thin */
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.18);
}

.ppx-stat {
  text-align: center;
  flex: 1;
}

.ppx-stat-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.ppx-stat-label {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 1px;
}

.ppx-stat-divider {
  width: 1px;
  height: 22px;
  background: #ECECEC;
  flex-shrink: 0;
}

/* ── LIST — grey page background peeks through as the gap between
   rows, rows themselves run full-bleed edge to edge, no side gutter ── */
.ppx-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 16px 0 0;   /* pill no longer overlaps the hero edge, so no extra clearance needed */
}

/* ── ROW — flush, no radius, no shadow, no side margin. Internal
   padding is what gives the content room to breathe. ── */
.ppx-item {
  width: 100%;
  background: var(--white);
  padding: 16px;
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.ppx-item-media {
  flex-shrink: 0;
  width: 88px;
  border-radius: 10px;
  overflow: hidden;
  background: #F0F0F0;
}

.ppx-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Everything to the right of the image: text sits top-left, button
   sits bottom-right — this column holds both and splits them apart. */
.ppx-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.ppx-item-text {
  text-align: left;
}

.ppx-item-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
  text-align: left;
}

.ppx-item-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-muted);
  padding: 3px 0;
  text-align: left;
}

.ppx-item-row strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.ppx-item-footer {
  display: flex;
  justify-content: flex-end;
}

/* ── BUY BUTTON — small, pill, black/white, no hover motion ── */
.ppx-buy-btn {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.ppx-buy-btn:active {
  filter: brightness(1.15);
}

.ppx-buy-btn:disabled {
  background: #D5D5D5;
  color: #8F8F8F;
  cursor: not-allowed;
}

.ppx-loader,
.ppx-error {
  text-align: center;
  padding: 30px 16px;
  color: var(--ink-muted);
  font-size: 14px;
}

@media (max-width: 380px) {
  .ppx-item-media { width: 76px; }
  .ppx-item-row, .ppx-item-row strong { font-size: 12px; }
  .ppx-buy-btn { padding: 8px 16px; font-size: 12px; }
}


/* This targets the <a> tag wrapping your settings item */
a.settings-link-wrapper {
    text-decoration: none !important; /* Forces the underline to disappear */
    color: inherit !important;        /* Forces the text to stay your app's color */
    display: block;                   /* Makes the whole row clickable */
    -webkit-tap-highlight-color: transparent; /* Removes the gray box on mobile tap */
}

/* Optional: Add a slight hover or active effect so the user knows it's a button */
a.settings-link-wrapper:active {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* ================= CUSTOM ALERT ================= */
.custom-alert {
  position: fixed !important;

  top: 50% !important;
  left: 50% !important;

  transform: translate(-50%, -50%) !important;

  background: rgba(0, 0, 0, 0.85);
  color: #fff;

  padding: 14px 24px;
  border-radius: 12px;

  font-size: 15px;
  text-align: center;

  max-width: 90%;
  width: max-content;

  box-shadow: 0 8px 20px rgba(0,0,0,0.5);

  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;

  z-index: 999999; /* higher than EVERYTHING */
}

.custom-alert.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) !important;
}
.custom-alert {
  right: auto;
  margin: 0;
}

.custom-alert.show {
  animation: alertPop 0.3s ease;
}

@keyframes alertPop {
  0% {
    transform: translate(-50%, -60%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}


/* ================= EMPTY STATE UI (PRODUCT STYLE) ================= */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  padding: 40px 20px; 
  margin: 15px;
  text-align: center;
  
  /* Card Design: Stretch like an ATM card */
  background: #ffffff;
  border-radius: 16px; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  
  width: auto; 
  max-width: 100%; 
  box-sizing: border-box;
}

.empty-icon-circle {
  width: 70px; /* Slightly larger for product focus */
  height: 70px;
  background: #f8f9fa; /* Clean grey/white tint */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.empty-icon-circle i {
  font-size: 28px;
  color: #121b1e; /* Bold dark icon */
}

.empty-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Poppins', sans-serif;
}

.empty-subtitle {
  margin: 8px 0 25px 0;
  font-size: 14px;
  color: #777;
  font-weight: 400;
  line-height: 1.5;
  max-width: 280px; /* Keeps text centered and readable */
}

/* THE BUTTON - Full width button */
.browse-plans-btn {
  background: #4b0082; 
  color: #ffffff;
  border: none;
  width: 100%; 
  max-width: 300px; /* Adjusted for better card balance */
  padding: 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.browse-plans-btn:active {
  transform: scale(0.97);
}


#pageLoader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  z-index: 99999;

  opacity: 1;
  visibility: visible;

  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.clean-loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Small circle, single thin black ring, the image itself spins */
.clean-loader-logo-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #111111;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clean-loader-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: cleanLogoSpin 1s linear infinite;
}

@keyframes cleanLogoSpin {
  to { transform: rotate(360deg); }
}

.clean-loading-text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;

  color: #111111;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animated dots */
.loader-dots::after {
  content: "";
  color: #111111;
  animation: loadingDots 1.5s steps(4, end) infinite;
}

@keyframes loadingDots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

/* Hidden State */
#pageLoader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Header Image */
.product-header-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 15px;
}


.debit-amount  { color: #ef4444; font-weight: 700; }
.pending-amount { color: #f59e0b; font-weight: 700; }
.failed-amount  { color: #94a3b8; font-weight: 700; text-decoration: line-through; }
.record-amount-value { color: #16a34a; font-weight: 700; }

/* Reviews Ticker Wrapper - fills remaining viewport height */
.reviews-ticker-wrapper {
  width: 100%;
  height: calc(100vh - 250px); /* adjust based on your header/image height */
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff; /* blue background */
  padding: 10px;
  box-sizing: border-box;
}

/* Ticker container */
.reviews-ticker {
  display: flex;
  flex-direction: column;
  gap: 15px;
  animation: scrollReviews 300s linear infinite; /* very slow scroll */
}

/* Each review item */
.review-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  background: #ffffff; /* white card background */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  min-height: 80px; /* make each review taller */
}

/* User logo / icon */
.review-item .user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; /* keeps image from shrinking */
}

/* Review text */
.review-item .review-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: #79a2e5; /* blue text */
}

/* Smooth scroll animation */
@keyframes scrollReviews {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}



/* Full-width black box around dashboard image */
.dashboard-image-box-full {
    width: 100%;                 /* full width of parent container */
    background-color: #000000;   /* black box (you can change to green) */
    padding: 15px;               /* space inside box for image */
    border-radius: 16px;         /* rounded corners */
    box-sizing: border-box;
    text-align: center;          /* center image */
    margin: 20px 0;              /* vertical spacing only, no horizontal shift */
    overflow: hidden;            /* prevent any overflow */
}

/* Dashboard image inside the box */
.dashboard-image {
    max-width: 100%;             /* fit inside green box */
    height: auto;
    border-radius: 12px;         /* slightly rounded corners */
    display: inline-block;       /* center properly */
}




/* ===== PAYMENT TYPE ===== */
.payment-type {
  margin: 15px 0;
  text-align: left;
  width: 100%;
  position: relative;
  font-family: sans-serif;
}

.payment-type label {
  display: block;
  margin-bottom: 6px;
  color: #f4b400; /* green label */
  font-weight: 600;
  font-size: 14px;
}

/* The clickable box */
.payment-box {
  width: 100%;
  background: #ffffff;          /* white box */
  color: #000000;               /* green text */
  border: 1px solid #c0c0c0;   /* silver edge */
  border-radius: 12px;
  padding: 12px 15px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}

.payment-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.payment-box .arrow {
  font-size: 14px;
}



/* Options list hidden by default */
.payment-options {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 48px; /* below the box */
  width: 100%;
  background: #ffffff;
  border: 1px solid #c0c0c0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: none; /* hidden initially */
  z-index: 100;
}

.payment-options li {
  padding: 10px 15px;
  cursor: pointer;
  color: #000000;
  font-weight: 500;
  transition: background 0.2s;
}

.payment-options li:hover {
  background: rgba(15,157,88,0.1); /* light green hover */
}


/* Selected Amount Display */
.selected-amount {
  font-weight: bold;
  color: #000000;   /* black */
  font-size: 20px;
  margin-top: 8px;
  text-align: center;
}



#paymentCountdown {
  margin-top: 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #ff0707; /* green */
}


#paymentStatusMessage {
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  display: none;
}


.status-pending {
  background: #f0fff6;
  color: #d29922;
}

.status-approved {
  background: #e6fff1;
  color: #1faa59;
}

.status-declined {
  background: #ffecec;
  color: #d62828;
}

.status-timeout {
  background: #fff6e5;
  color: #c77700;
}




/* ================= FLOATING TELEGRAM (PROFILE PAGE) ================= */
.profile-page .telegram-float-profile {
  position: fixed;
  bottom: 90px;              /* above bottom nav */
  right: 16px;               /* move to right */
  z-index: 9999;

  width: 56px;
  height: 56px;
  border-radius: 50%;

  background: #0088cc;       /* Telegram blue */
  color: #ffffff;            /* white icon/text */

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  text-decoration: none;

  box-shadow: 0 8px 20px rgba(0,136,204,0.35);  /* subtle blue shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover / tap */
.profile-page .telegram-float-profile:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(0,136,204,0.45); /* stronger blue shadow */
}

/* Mobile safe */
@media (max-width: 480px) {
  .profile-page .telegram-float-profile {
    bottom: 100px;
    right: 12px;            /* adjust right for mobile */
  }
}



#toast-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#toast-overlay.toast-show {
  opacity: 1;
}

/* Small wide rectangle — not a tall square, matching the reference */
.toast-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: rgba(20, 20, 20, 0.88);
  backdrop-filter: blur(6px);
  color: #ffffff;

  padding: 12px 20px;
  border-radius: 10px;

  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;

  max-width: 260px;
  width: max-content;
  box-sizing: border-box;

  transform: scale(0.94);
  transition: transform 0.25s ease;
}

#toast-overlay.toast-show .toast-inner {
  transform: scale(1);
}

/* Small inline icon, not a big centered graphic */
.toast-type-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.toast-success .toast-type-icon { color: #16a34a; }
.toast-error   .toast-type-icon { color: #dc2626; }
.toast-warning .toast-type-icon { color: #f0b100; }
.toast-info    .toast-type-icon { color: #ffffff; }

.toast-msg {
  color: #ffffff;
}

@media (max-width: 480px) {
  .toast-inner {
    max-width: 82vw;
    padding: 11px 18px;
    font-size: 12.5px;
  }
}

.fintech-toast {
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  font-family: Inter, sans-serif;
}


.payment-confirm-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 24px;
}

.pc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
}

.pc-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid #f2e9c9;
  border-top-color: #f0b100;
  animation: pc-spin 0.9s linear infinite;
  margin-bottom: 20px;
}

@keyframes pc-spin {
  to { transform: rotate(360deg); }
}

.pc-icon-success, .pc-icon-fail {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  margin-bottom: 20px;
}

.pc-icon-success { background: #16a34a; }
.pc-icon-fail { background: #dc2626; }

.pc-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}

.pc-sub {
  font-size: 13.5px;
  color: #8a8a8a;
  margin: 0 0 24px;
  line-height: 1.5;
}

.pc-btn {
  background: #f0b100;
  color: #1a1a1a;
  border: none;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}


.record-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.status-approved {
  background: #dcfce7;
  color: #16a34a;
}
.status-pending {
  background: #fef9c3;
  color: #ca8a04;
}
.status-failed {
  background: #fee2e2;
  color: #dc2626;
}



:root {
  --tc-ink: #1A1A1A;
  --tc-muted: #6B6B6B;
  --tc-bg: #F7F8FA;
  --tc-white: #FFFFFF;
  --tc-line: #DCE6F5;
  --tc-green: #3AA13B;
  --tc-orange: #F07B1C;
  --tc-red: #E22B2B;
  --tc-blue: #2F6FED;
  --tc-yellow: #F2B705;
}

.tc-page,
.tc-page * {
  box-sizing: border-box;
}

.tc-page {
  width: 100%;
  min-height: 100vh;
  background: var(--tc-bg);
  font-family: 'Inter', sans-serif;
  color: var(--tc-ink);
  padding: 18px 18px 90px;
}

/* ── TOP ROW ── */
.tc-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.tc-recharge-btn {
  background: var(--tc-ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.tc-recharge-btn:active { opacity: 0.85; }

.tc-balance-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tc-ink);
}

.tc-balance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.6px solid var(--tc-ink);
  font-size: 10.5px;
  font-weight: 800;
}

/* ── BACK BUTTON ── */
.tc-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--tc-muted);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 10px 0 0;
}

/* ── TITLE ── */
.tc-title-block {
  text-align: center;
  padding: 14px 0 18px;
}

.tc-title {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--tc-ink);
}

.tc-subtitle {
  margin: 0;
  font-size: 13.5px;
  color: var(--tc-muted);
}

.tc-subtitle strong { color: var(--tc-ink); }

/* ── ACTIVATION BANNER ── */
.tc-activate-banner {
  background: var(--tc-white);
  border: 1.5px dashed var(--tc-blue);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  margin-bottom: 18px;
}

.tc-activate-banner p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--tc-muted);
  line-height: 1.5;
}

.tc-activate-btn {
  background: var(--tc-blue);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.tc-activate-btn:active { opacity: 0.88; }

.tc-activate-banner.tc-hidden { display: none; }

/* ── DIVIDER ── */
.tc-divider {
  border: none;
  border-top: 1.5px solid var(--tc-blue);
  opacity: 0.5;
  margin: 18px 0;
}

/* ── GAME ROW — text left, graphic right ── */
.tc-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}

.tc-game-row.tc-locked {
  opacity: 0.45;
  pointer-events: none;
}

.tc-game-text h2 {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 800;
}

.tc-game-text p {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--tc-muted);
}

.tc-play-btn {
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  min-width: 150px;
}
.tc-play-btn:active { transform: scale(0.97); }
.tc-play-btn:disabled {
  background: #C9CDD3 !important;
  cursor: not-allowed;
  transform: none;
}

.tc-btn-green  { background: var(--tc-green); }
.tc-btn-orange { background: var(--tc-orange); }
.tc-btn-red    { background: var(--tc-red); }

/* Countdown label shown on a disabled button */
.tc-play-btn .tc-cooldown-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 2px;
}

.tc-game-visual {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═════════════════ SPIN WHEEL ═════════════════ */
.tc-wheel-wrap {
  position: relative;
  width: 150px;
  height: 150px;
}

.tc-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid var(--tc-ink);
  position: relative;
  background: conic-gradient(
    var(--tc-blue) 0deg 90deg,
    var(--tc-yellow) 90deg 180deg,
    var(--tc-green) 180deg 270deg,
    var(--tc-green) 270deg 360deg
  );
  transition: transform 3.2s cubic-bezier(0.17, 0.67, 0.2, 1);
}

.tc-wheel-num {
  position: absolute;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.tc-wn-1 { top: 20%; left: 50%; transform: translateX(-50%); }
.tc-wn-2 { top: 50%; right: 12%; transform: translateY(-50%); }
.tc-wn-3 { bottom: 16%; left: 50%; transform: translateX(-50%); }
.tc-wn-4 { top: 50%; left: 12%; transform: translateY(-50%); }

.tc-wheel-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid var(--tc-ink);
  z-index: 3;
}

.tc-wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--tc-ink);
  z-index: 2;
}

/* ═════════════════ DICE ═════════════════ */
.tc-dice-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tc-die {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.tc-die-black { background: #1A1A1A; }
.tc-die-white { background: #FFFFFF; border: 1.5px solid #E0E0E0; }

.tc-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
  justify-self: center;
  opacity: 0;
}
.tc-die-black .tc-pip { background: #fff; }
.tc-die-white .tc-pip { background: #1A1A1A; }

/* Grid positions for pip layouts 1-6, toggled via face-N class */
.p1 { grid-area: 1 / 1; } .p2 { grid-area: 1 / 3; }
.p3 { grid-area: 2 / 1; } .p4 { grid-area: 2 / 3; }
.p5 { grid-area: 3 / 1; } .p6 { grid-area: 3 / 3; }
.tc-die .pc { grid-area: 2 / 2; }

.tc-die.face-1 .p1 { grid-area: 2 / 2; opacity: 1; }
.tc-die.face-2 .p1, .tc-die.face-2 .p5 { opacity: 1; }
.tc-die.face-3 .p1, .tc-die.face-3 .p5 { opacity: 1; }
.tc-die.face-3 .p3 { grid-area: 2/2; opacity: 1; }
.tc-die.face-4 .p1, .tc-die.face-4 .p2, .tc-die.face-4 .p5, .tc-die.face-4 .p6 { opacity: 1; }
.tc-die.face-5 .p1, .tc-die.face-5 .p2, .tc-die.face-5 .p5, .tc-die.face-5 .p6 { opacity: 1; }
.tc-die.face-5 .p3 { grid-area: 2/2; opacity: 1; }
.tc-die.face-6 .p1, .tc-die.face-6 .p2, .tc-die.face-6 .p3,
.tc-die.face-6 .p4, .tc-die.face-6 .p5, .tc-die.face-6 .p6 { opacity: 1; }

.tc-die.tc-rolling {
  animation: tc-dice-roll 0.15s linear infinite;
}

@keyframes tc-dice-roll {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(12deg) scale(0.94); }
  100% { transform: rotate(-10deg) scale(1); }
}

/* ═════════════════ SAFE BOX ═════════════════ */
.tc-safe {
  position: relative;
  width: 110px;
  height: 100px;
  background: linear-gradient(160deg, #3A3F47, #1E2125);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-safe-dial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2A2E34;
  border: 2px solid #55595F;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.tc-safe-dial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CD137;
  box-shadow: 0 0 6px #4CD137;
}

.tc-safe-keypad {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(3, 5px);
  grid-gap: 4px;
}
.tc-safe-keypad span {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #55595F;
}

.tc-safe-handle {
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 34px;
  border-radius: 3px;
  background: #55595F;
}

.tc-safe.tc-shaking {
  animation: tc-safe-shake 0.4s ease-in-out infinite;
}

@keyframes tc-safe-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(-3px) rotate(-2deg); }
  75%      { transform: translateX(3px) rotate(2deg); }
}

.tc-safe.tc-opened .tc-safe-dial-dot {
  background: #FFD400;
  box-shadow: 0 0 10px #FFD400;
}

/* ═════════════════ REWARD OVERLAY ═════════════════ */
.tc-reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(17, 17, 17, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tc-reward-card {
  background: #fff;
  border-radius: 22px;
  padding: 30px 26px 24px;
  text-align: center;
  width: 100%;
  max-width: 280px;
  animation: tc-reward-pop 0.25s ease-out;
}

@keyframes tc-reward-pop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.tc-reward-icon { font-size: 40px; margin-bottom: 6px; }

.tc-reward-label {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--tc-muted);
  font-weight: 600;
}

.tc-reward-amount {
  font-size: 30px;
  font-weight: 800;
  color: var(--tc-green);
  margin-bottom: 18px;
}

.tc-reward-claim-btn {
  width: 100%;
  background: var(--tc-ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.tc-reward-claim-btn:active { opacity: 0.85; }

@media (max-width: 380px) {
  .tc-title { font-size: 25px; }
  .tc-game-visual { width: 120px; height: 120px; }
  .tc-wheel-wrap { width: 120px; height: 120px; }
  .tc-safe { width: 92px; height: 84px; }
}

:root {
  --brand-black: #111111;
  --brand-white: #FFFFFF;
}

.brand-redirect-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--brand-white);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-redirect-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Small logo circle — black ring, continuously rotating */
.brand-logo-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-white);
  border: 2px solid var(--brand-black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: brandSpin 1.4s linear infinite;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@keyframes brandSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 380px) {
  .brand-logo-circle { width: 48px; height: 48px; }
}



/* =========================================================================
   DESKTOP / TABLET RESPONSIVE LAYER
   -------------------------------------------------------------------------
   Nothing above this point was changed — every existing mobile rule and
   breakpoint in this file still applies exactly as before, at every width.
   Everything below only ACTIVATES at 768px and up, and only does 3 things:

     1. Fills the browser background behind the app on wide screens, so it
        no longer looks like a thin phone-width strip floating in blank
        white space.
     2. Widens the full-screen pages (dashboard, recharge, withdraw, bank,
        profile, tasks, etc.) and their inner content containers a
        moderate, readable amount — not edge-to-edge, since unbounded
        line-length at 1920px would be unreadable, but enough to visibly
        use the extra space and look intentional.
     3. Nudges base type size up slightly for comfortable reading at
        desktop viewing distance.
   ========================================================================= */

/* ---- 1. Desktop background behind the centered app ---- */
@media (min-width: 768px) {
  html, body {
    min-height: 100vh;
    background: linear-gradient(160deg, #f4f7fd 0%, #e9eefb 100%);
  }
}

/* ---- 2a. Full-screen page wrappers: framed + centered, tablet ---- */
@media (min-width: 768px) {
  .dashboard,
  #giftCodePage,
  #profilePage,
  .bank-page,
  #rechargePage,
  .recharge-page,
  .payment-confirm-page,
  .product-page,
  #earningsPage,
  .withdraw-page,
  .investment-page,
  .password-page,
  .tsk-wrapper,
  #tasksPage {
    max-width: 560px;
    margin: 0 auto;
    box-shadow:
      0 30px 80px rgba(3, 87, 238, 0.10),
      0 0 0 1px rgba(3, 87, 238, 0.05);
  }
}

/* ---- 2b. Same wrappers, wider again at true desktop sizes ---- */
@media (min-width: 1024px) {
  .dashboard,
  #giftCodePage,
  #profilePage,
  .bank-page,
  #rechargePage,
  .recharge-page,
  .payment-confirm-page,
  .product-page,
  #earningsPage,
  .withdraw-page,
  .investment-page,
  .password-page,
  .tsk-wrapper,
  #tasksPage {
    max-width: 640px;
  }
}

/* ---- 2c. Inner content containers: more breathing room on desktop ---- */
@media (min-width: 1024px) {
  .auth-page-inner,
  .header-top-row,
  #profilePage .profile-scroll-container,
  .bankdisp-container,
  #rechargePage .recharge-page-container,
  .records-content-container,
  .wd-container,
  .team-page-container,
  .ticker-search-bar {
    max-width: 560px;
  }

  .referral-promo-card,
  .premium-card,
  .referral-container,
  .card-wrapper {
    max-width: 640px;
  }

  .pw-container,
  .modal-card {
    max-width: 480px;
  }
}

/* ---- 2d. Popups/modals/alerts: stay compact, don't stretch ---- */
@media (min-width: 1024px) {
  .mx-unique-modal,
  .ft-alert-card {
    max-width: 400px;
  }
}

/* ---- 2e. Bottom nav follows the same widened frame ---- */
@media (min-width: 768px) {
  .bottom-nav {
    max-width: 560px;
  }
}

@media (min-width: 1024px) {
  .bottom-nav {
    max-width: 640px;
  }
}

/* ---- 3. Slightly larger base type for desktop reading distance ---- */
@media (min-width: 1024px) {
  body {
    font-size: 15.5px;
  }
}


.wd-account-item {
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.wd-account-check {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s, transform 0.15s;
}

.wd-account-item.selected {
  border-color: #0057FF;
  background: #E5F0FF;
}

.wd-account-item.selected .wd-account-check {
  opacity: 1;
  transform: scale(1);
  color: #0057FF;
}

.wd-account-item.channel-disabled {
  opacity: 0.5;
  pointer-events: none;
}



/* ── FILL SCREEN: dashboard stretches down to the bottom nav ── */
:root {
  --nav-h: calc(58px + env(safe-area-inset-bottom, 0px));
}

/* JS shows the dashboard with an inline display value, which kills flex growth.
   This forces it back to a flex column whenever it's visible. */
.dashboard[style*="block"],
.dashboard[style*="flex"] {
  display: flex !important;
  flex-direction: column !important;
}

.dashboard {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  height: auto;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Stat cards absorb the spare height */
.mx-stats-row {
  flex: 1 1 auto;
  min-height: 180px;
}

.mx-stat-card {
  height: auto !important;
  min-height: 180px;
}

.mx-stat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 380px) {
  .mx-stat-card { min-height: 160px; }
}





/* =========================================================
   FT ALERT & TOAST — White, Ash, and Black Theme
   ========================================================= */

/* Overlay Background */
#ftAlertOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65); /* Deep black translucent backdrop */
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

#ftAlertOverlay.show {
  opacity: 1;
  visibility: visible;
}

/* Modal Box Container */
.ft-alert-box, 
.ft-alert-content {
  background: #ffffff; /* Pure White */
  color: #111827; /* Rich Black text */
  border: 1px solid #e5e7eb; /* Light Ash border */
  border-radius: 12px;
  width: 90%;
  max-width: 380px;
  padding: 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Icons */
.ft-alert-icon {
  font-size: 32px;
  margin-bottom: 16px;
  color: #111827; /* Black accent */
}

/* Titles and Text */
#ftAlertTitle {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

#ftAlertText {
  font-size: 14px;
  color: #4b5563; /* Medium Ash / Slate */
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Action Buttons Container */
.ft-alert-actions {
  display: flex;
  gap: 10px;
}

/* Confirm / Primary Button (Solid Black with White Text) */
#ftAlertBtn {
  flex: 1;
  background-color: #111827; /* Black */
  color: #ffffff; /* White */
  border: none;
  padding: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#ftAlertBtn:hover {
  background-color: #374151; /* Dark Ash / Charcoal hover */
}

/* Cancel Button (Light Ash Background with Dark Text) */
#ftAlertCancelBtn {
  flex: 1;
  background-color: #f3f4f6; /* Light Ash */
  color: #111827; /* Black */
  border: 1px solid #d1d5db; /* Ash border */
  padding: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#ftAlertCancelBtn:hover {
  background-color: #e5e7eb; /* Slightly darker ash on hover */
}

/* =========================================================
   TOAST NOTIFICATIONS (White, Ash, & Black Theme)
   ========================================================= */

#toast-overlay {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 999999;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

#toast-overlay.toast-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-inner {
  background: #111827; /* Solid Black */
  color: #ffffff; /* White Text */
  border: 1px solid #374151; /* Dark Ash border */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}

.toast-type-icon {
  font-size: 16px;
  color: #9ca3af; /* Ash accent icon */
}