body{
    transition:.3s;
}

/* =========================
RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

body{
    background:#0f172a;
    color:white;
    overflow-x:hidden;
    width: auto;
}

/* =========================
LAYOUT
========================= */

.container{
    display:flex;
    min-height:100vh;
}

/* =========================
SIDEBAR
========================= */

.sidebar{
    width:260px;
    background:#0b1220;
    padding:25px;
    flex-shrink:0;
}

.logo{
    color:#3b82f6;
    font-size:22px;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:40px;
    font-weight:700;
}

.nav{
    list-style:none;
}

.nav-item{
    display:flex;
    align-items:center;
    gap:12px;

    padding:15px;

    margin-bottom:10px;

    border-radius:14px;

    cursor:pointer;

    transition:.3s;

    color:#cbd5e1;
}

.nav-item:hover{
    background:rgba(59,130,246,.15);
}

.nav-item.active{
    background:#3b82f6;
    color:white;
}

.nav-item i{
    width:20px;
}

/* =========================
CONTENT
========================= */

.main-content{
    flex:1;
    padding:30px;

    padding-bottom:180px;
}

/* =========================
HEADER
========================= */

header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:25px;
}

header h1{
    font-size:30px;
}

header p{
    color:#94a3b8;
}

header button{
    padding:12px 18px;

    border:none;

    border-radius:12px;

    background:#3b82f6;

    color:white;

    cursor:pointer;
}

/* =========================
PAGES
========================= */

.page{
    display:none;
    animation:fade .35s ease;
}

.page.active-page{
    display:block;
}

@keyframes fade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:none;
}

}

/* =========================
CARDS GRID
========================= */

.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(150px,1fr));

gap:20px;

padding-bottom:0px;

}

.card{

background:
rgba(255,255,255,.05);

padding:25px;

border-radius:20px;

backdrop-filter:blur(10px);

transition:.3s;

border:
1px solid rgba(255,255,255,.06);

}

.card button{
    height: 40px;
    border-radius: 10px;
}

.card:hover{

transform:
translateY(-5px);

}

.card i{

font-size:26px;

margin-bottom:12px;

color:#3b82f6;

}

.card h2{

margin-top:10px;

}

/* =========================
FORMS
========================= */

/* =========================
FORMS
========================= */

form{

display:flex;

flex-direction:column;

gap:18px;

background:
rgba(255,255,255,.04);

padding:25px;

border-radius:24px;

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:
blur(12px);

max-width:500px;

}

/* INPUTS */

input{

width:100%;

height:58px;

padding:0 18px;

border:none;

outline:none;

border-radius:16px;

background:
rgba(255,255,255,.08);

color:white;

font-size:16px;

transition:.3s;

}

input::placeholder{

color:#94a3b8;

}

input:focus{

border:2px solid #3b82f6;

box-shadow:
0 0 0 4px rgba(59,130,246,.15);

}

/* BUTTONS */

button{

border:none;

outline:none;

cursor:pointer;

transition:.3s;

}

button:hover{

opacity:.95;

}
/* =========================
TRANSACTIONS
========================= */

.transaction{

display:flex;

justify-content:space-between;

padding:18px 0;

border-bottom:
1px solid rgba(255,255,255,.05);

}

.positive{
color:#10b981;
}

.negative{
color:#ef4444;
}

/* =========================
VIRTUAL CARD
========================= */

/* =========================
VIRTUAL CARD
========================= */

.virtual-card{

position:relative;

width:100%;

max-width:430px;

padding:32px;

margin-top:25px;

border-radius:28px;

overflow:hidden;

background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8,
#1e3a8a
);

box-shadow:
0 20px 40px rgba(0,0,0,.35);

border:
1px solid rgba(255,255,255,.12);

}

/* glow effect */

.virtual-card::before{

content:"";

position:absolute;

top:-80px;

right:-80px;

width:220px;

height:220px;

background:
rgba(255,255,255,.12);

border-radius:50%;

}

/* top & bottom */

.card-top,
.card-bottom{

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

z-index:2;

}

/* chip */

.virtual-card i{

font-size:32px;

}

/* number */

.virtual-card h3{

margin:45px 0;

font-size:24px;

letter-spacing:4px;

font-weight:600;

position:relative;

z-index:2;

}

/* labels */

.virtual-card p{

font-size:14px;

color:rgba(255,255,255,.75);

margin-bottom:5px;

}

/* holder */

.virtual-card h4{

font-size:18px;

font-weight:600;

}

/* =========================
LOGIN
========================= */

.login-screen{

position:fixed;

inset:0;

background:#0b1220;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

}

.login-box{

width:320px;

padding:35px;

border-radius:20px;

background:
rgba(255,255,255,.05);

backdrop-filter:
blur(20px);

}

.login-box h2{

color:#3b82f6;

margin-bottom:10px;

}

.login-box input{

margin:10px 0;

}

.login-box button{

width:100%;

}

/* =========================
FAB
========================= */

.fab{
position:fixed;
bottom:100px;
right:20px;
width:50px;
height:50px;
border-radius:50%;
background:#3b82f6;
display:flex;
justify-content:center;
align-items:center;
font-size:17px;
box-shadow:0 10px 26px -8px rgba(59,130,246,0.65);
transition:transform 0.15s ease, box-shadow 0.15s ease;
z-index:999;
}

.fab:hover{
transform:translateY(-2px);
box-shadow:0 14px 30px -8px rgba(59,130,246,0.75);
}

@media(max-width:480px){
.fab{
width:44px;
height:44px;
font-size:15px;
bottom:96px;
right:16px;
}
}

/* =========================
BOTTOM NAV
========================= */

.bottom-nav{

display:none;

}

/* =========================
DARK MODE
========================= */

.light-mode{

background:#f8fafc;

color:black;

}

.light-mode .sidebar{

background:white;

}

.light-mode .card{

background:white;

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.container{

flex-direction:column;

}

.sidebar{

width:100%;

padding:15px;

overflow-x:auto;

}

.logo{

margin-bottom:15px;
    font-weight:700;
}

.nav{

display:flex;

gap:8px;

}

.nav-item{

flex-direction:column;

font-size:12px;

min-width:85px;

}

.main-content{

padding:18px;

padding-bottom:220px;

}

header{

flex-direction:column;

align-items:flex-start;

}

header h1{

font-size:22px;

}




header button{

width:100%;

}


/* transfer buttons */

form button{

height:58px;

border-radius:16px;

background:
linear-gradient(
135deg,
#3b82f6,
#2563eb
);

color:white;

font-size:16px;

font-weight:600;

}
.cards{

grid-template-columns:1fr;

padding-bottom:160px;

}

.virtual-card{

max-width:100%;

}

.bottom-nav{

position:fixed;

bottom:0;

left:0;

right:0;

height:72px;

display:flex;

justify-content:space-around;

align-items:center;

background:#0b1220;

z-index:998;

}

.fab{

bottom:100px;

}

}

@media(max-width:480px){

header h1{

font-size:20px;

}

.card{

padding:18px;

}

.virtual-card{

padding:20px;

}

}

/* =========================
   PAGE SYSTEM FIX
========================= */

.page {
    display: none;
    width: 100%;
    animation: fadeSlide 0.4s ease;
}

.page.active-page {
    display: block;
}

/* smooth animation */
@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@media(max-width:768px){

.virtual-card h3{

font-size:18px;

letter-spacing:2px;

word-break:break-all;

}

form{

max-width:100%;

}

}

.settings-card input{
    margin-top: 10px;
}

.settings-card button{
    width: 120px;
    height: 50px;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
}

/* =========================
QUICK ACTIONS
========================= */

.quick-actions{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(140px,1fr));

gap:18px;

margin-top:-20px;

margin-bottom:30px;

}

.action-card{

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,255,255,.06);

border-radius:22px;

padding:24px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:14px;

cursor:pointer;

transition:.3s;

backdrop-filter:blur(10px);

}

.action-card:hover{

transform:
translateY(-5px);

background:
rgba(59,130,246,.12);

}

.action-card i{

font-size:28px;

color:#3b82f6;

}

.action-card span{

font-size:15px;

font-weight:600;

}

/* =========================
ADVERT SLIDER
========================= */

.advert-slider{

position:relative;

width:100%;

height:220px;

border-radius:30px;

overflow:hidden;

margin-top:20px;

}

.slide{

position:absolute;

inset:0;

opacity:0;

transition:opacity .6s ease;

display:flex;

align-items:center;

padding:40px;

background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8,
#1e3a8a
);

}

.active-slide{

opacity:1;

z-index:2;

}

.slide::before{

content:"";

position:absolute;

top:-60px;

right:-60px;

width:220px;

height:220px;

background:
rgba(255,255,255,.12);

border-radius:50%;

}

.slide-content{

position:relative;

z-index:2;

max-width:420px;

}

.slide-content h2{

font-size:34px;

margin-bottom:10px;

}

.slide-content p{

font-size:16px;

color:rgba(255,255,255,.85);

margin-bottom:22px;

}

.slide-content button{

padding:14px 22px;

border:none;

border-radius:14px;

background:white;

color:#2563eb;

font-weight:700;

cursor:pointer;

}

/* MOBILE */

@media(max-width:768px){

.quick-actions{

grid-template-columns:
repeat(2,1fr);

}

.advert-slider{

height:260px;

}

.slide{

padding:28px;

}

.slide-content h2{

font-size:26px;

}

}

.action-card:nth-child(5) i{
color:#22c55e;
}

.action-card:nth-child(6) i{
color:#f59e0b;
}

.action-card:nth-child(7) i{
color:#ef4444;
}

.action-card:nth-child(8) i{
color:#a855f7;
}

.transaction-info{

display:flex;

flex-direction:column;

gap:4px;

}

.transaction-info h4{

font-size:15px;

font-weight:600;

color:white;

}

.transaction-info small{

font-size:12px;

color:#94a3b8;

}


/* =========================
LOADER
========================= */

.loader-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.7);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-box{

background:#111827;

padding:35px;

border-radius:24px;

text-align:center;

width:320px;

}

.spinner{

width:60px;

height:60px;

border:6px solid rgba(255,255,255,.2);

border-top:6px solid #3b82f6;

border-radius:50%;

margin:auto;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

/* =========================
RECEIPT MODAL
========================= */

.receipt-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.7);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.receipt-box{

background:#111827;

padding:30px;

border-radius:24px;

width:90%;

max-width:420px;

}

.receipt-box h2{

margin-bottom:20px;

color:#10b981;

}

.receipt-item{

display:flex;

flex-wrap:wrap;

justify-content:space-between;

align-items:flex-start;

gap:10px;

margin-bottom:15px;

padding-bottom:10px;

border-bottom:
1px solid rgba(255,255,255,.08);

}

.receipt-item span{

flex-shrink:0;

}

.receipt-item strong{

text-align:right;

word-break:break-word;

max-width:65%;

}

.receipt-box button{

width:100%;

height:55px;

border:none;

border-radius:16px;

background:#3b82f6;

color:white;

margin-top:20px;

cursor:pointer;

}


/* =========================
NOTIFICATION CENTER
========================= */

.header-actions{

display:flex;

align-items:center;

gap:15px;

position:relative;

}

.notification-wrapper{

position:relative;

}

.notification-icon{

width:52px;

height:52px;

border-radius:16px;

background:rgba(255,255,255,.08);

display:flex;

justify-content:center;

align-items:center;

cursor:pointer;

position:relative;

font-size:20px;

transition:.3s;

border:1px solid rgba(255,255,255,.08);

}

.notification-icon:hover{

background:rgba(59,130,246,.18);

transform:translateY(-2px);

}

.notification-count{

position:absolute;

top:-6px;

right:-6px;

width:22px;

height:22px;

border-radius:50%;

background:#ef4444;

display:flex;

justify-content:center;

align-items:center;

font-size:12px;

font-weight:700;

color:white;

}

.notification-dropdown{

position:absolute;

top:70px;

right:0;

width:360px;

max-height:450px;

overflow-y:auto;

background:#111827;

border-radius:24px;

padding:18px;

display:none;

z-index:1000;

box-shadow:0 20px 40px rgba(0,0,0,.35);

border:1px solid rgba(255,255,255,.08);

}

.notification-dropdown.active{

display:block;

animation:fadeNotification .3s ease;

}

@keyframes fadeNotification{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.notification-header{

margin-bottom:15px;

padding-bottom:12px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.notification-header h3{

font-size:18px;

}

.notification-item{

padding:15px;

border-radius:18px;

background:rgba(255,255,255,.04);

margin-bottom:12px;

cursor:pointer;

transition:.3s;

border:1px solid rgba(255,255,255,.05);

}

.notification-item:hover{

background:rgba(59,130,246,.12);

transform:translateY(-2px);

}

.notification-item h4{

font-size:15px;

margin-bottom:6px;

}

.notification-item p{

font-size:13px;

color:#94a3b8;

}

.empty-notification{

text-align:center;

color:#94a3b8;

padding:20px 0;

}

/* MOBILE */

@media(max-width:768px){

.notification-dropdown{

width:100vw;

right:-20px;

top:65px;

border-radius:22px 22px 0 0;

max-height:75vh;

}

.header-actions{

width:100%;

justify-content:space-between;

}

}


/* =========================
TOPUP MODAL
========================= */

.topup-modal{

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.6);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 9999;

}

.topup-box{
  width: 90%;
  max-width: 400px;
  background: #111827;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 25px;
}

.topup-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.topup-header h2{
  font-size: 20px;
  color: #fff;
}

.topup-header button{
  border: none;
  background: transparent;
  font-size: 20px;
  color: #94a3b8;
  cursor: pointer;
}

.topup-box form{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.topup-box input,
.topup-box select{
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 0 15px;
  font-size: 15px;
  background: #0b1220;
  color: #fff;
}

.topup-box input::placeholder{
  color: #94a3b8;
}

.topup-box button[type="submit"]{
  height: 50px;
  border: none;
  border-radius: 12px;
  background: #2563eb;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.quick-actions{
  display:flex;
  gap:15px;
  margin:20px 0;
}

.quick-actions button{
  padding:12px 20px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  color:white;
  min-width:120px;
}

.quick-actions .deposit-btn{
  background:#2563eb;
}

.quick-actions .withdraw-btn{
  background:#ef4444;
}




.transaction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
}

.transaction-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.transaction-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 18px;
}

.transaction-info h4 {
  font-size: 15px;
  margin-bottom: 4px;
}

.transaction-info small {
  color: #94a3b8;
}

.positive {
  color: #10b981;
  font-weight: 700;
}

.negative {
  color: #ef4444;
  font-weight: 700;
}


/* WITHDRAW MODAL FIX */

#withdrawModal{

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.45);

  display: none;

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

  z-index: 99999;

}

.withdraw-modal-box{

  width: 95%;
  max-width: 420px;

  background: #ffffff;

  border-radius: 24px;

  padding: 24px;

  animation: modalFade .25s ease;

}

@keyframes modalFade{

  from{
    transform: translateY(20px);
    opacity: 0;
  }

  to{
    transform: translateY(0);
    opacity: 1;
  }

}

.withdraw-header{

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

}

.withdraw-header h2{

  font-size: 22px;

  color: #111827;

}

.close-btn{

  border: none;

  background: #f3f4f6;

  width: 38px;
  height: 38px;

  border-radius: 12px;

  cursor: pointer;

  font-size: 18px;

}

.input-group{

  margin-bottom: 18px;

}

.input-group label{

  display: block;

  margin-bottom: 8px;

  font-size: 14px;

  font-weight: 600;

}

.input-group input,
.input-group select{

  width: 100%;

  height: 54px;

  border: 1px solid #d1d5db;

  border-radius: 14px;

  padding: 0 14px;

  font-size: 15px;

  outline: none;

}

.withdraw-submit-btn{

  width: 100%;

  height: 54px;

  border: none;

  border-radius: 14px;

  background: #2563eb;

  color: white;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  margin-top: 10px;

}


/* =========================
TOAST NOTIFICATIONS
========================= */

#toastContainer{
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast{
  min-width: 300px;
  padding: 16px 18px;
  border-radius: 14px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideIn .3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.toast.success{
  background: #10b981;
}

.toast.error{
  background: #ef4444;
}

.toast.warning{
  background: #f59e0b;
}

.toast.info{
  background: #3b82f6;
}

.toast button{
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

@keyframes slideIn{
  from{
    transform: translateX(100%);
    opacity: 0;
  }

  to{
    transform: translateX(0);
    opacity: 1;
  }
}



.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.modal-content {
    background: #111827;
    width: 90%;
    max-width: 400px;
    padding: 20px;
    border-radius: 12px;
    color: #fff;
}




/* AIRTIME MODAL */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.modal-content {
  width: 100%;
  max-width: 420px;
  background: #111827;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  color: #fff;
}

.modal-content h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
  font-size: 24px;
}

.modal-content form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal-content input,
.modal-content select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  transition: 0.3s;
  background: #0b1220;
  color: #fff;
}

.modal-content input::placeholder {
  color: #94a3b8;
}

.modal-content input:focus,
.modal-content select:focus {
  border-color: #3b82f6;
  background: #0b1220;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.modal-content button[type="submit"] {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.modal-content button[type="submit"]:hover {
  transform: translateY(-2px);
  background: #1d4ed8;
}

.close-btn {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #cbd5e1;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.close-btn:hover {
  background: rgba(255,255,255,.15);
}




.account-number-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  margin-top: 15px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
}

.account-number-card h3 {
  margin-top: 5px;
  letter-spacing: 2px;
}

#copyAccountBtn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}





/* =========================
GIFT CARD FORM
========================= */

#giftCardForm select,
#giftCardForm input[type="number"],
#giftCardForm input[type="text"],
#giftCardForm input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.gc-rate-preview {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  margin-bottom: 16px;
  font-size: 14px;
}

/* =========================
TRADE LIST
========================= */

.gc-trade-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  cursor: pointer;
}

.gc-trade-row:last-child { border-bottom: none; }

.gc-trade-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gc-trade-left strong { font-size: 14px; }
.gc-trade-left small { color: #94a3b8; font-size: 12px; }

.gc-trade-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.gc-amount { font-weight: 600; font-size: 14px; }

.gc-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.gc-status-badge.pending { background: rgba(217, 140, 43, 0.15); color: #d98c2b; }
.gc-status-badge.under_review { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.gc-status-badge.approved { background: rgba(31, 157, 108, 0.15); color: #1f9d6c; }
.gc-status-badge.rejected { background: rgba(217, 72, 59, 0.15); color: #d9483b; }
.gc-status-badge.paid { background: rgba(16, 185, 129, 0.18); color: #10b981; }

/* =========================
TRADE DETAIL MODAL
========================= */

.gc-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  font-size: 13.5px;
}

.gc-detail-row:last-child { border-bottom: none; }

.gc-detail-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.gc-detail-images img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.gc-admin-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(217, 72, 59, 0.08);
  border-left: 3px solid #d9483b;
  font-size: 13px;
}

/* =========================
WITHDRAW METHOD FIELDS
========================= */

.withdraw-method-fields select,
.withdraw-method-fields input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}



body{
    transition:.3s;
}

/* =========================
RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

body{
    background:#0f172a;
    color:white;
    overflow-x:hidden;
}

/* =========================
LAYOUT
========================= */

.container{
    display:flex;
    min-height:100vh;
}

/* =========================
SIDEBAR
========================= */

.sidebar{
    width:260px;
    background:#0b1220;
    padding:25px;
    flex-shrink:0;
}

.logo{
    color:#3b82f6;
    font-size:22px;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:40px;
    font-weight:700;
}

.nav{
    list-style:none;
}

.nav-item{
    display:flex;
    align-items:center;
    gap:12px;

    padding:15px;

    margin-bottom:10px;

    border-radius:14px;

    cursor:pointer;

    transition:.3s;

    color:#cbd5e1;
}

.nav-item:hover{
    background:rgba(59,130,246,.15);
}

.nav-item.active{
    background:#3b82f6;
    color:white;
}

.nav-item i{
    width:20px;
}

/* =========================
CONTENT
========================= */

.main-content{
    flex:1;
    padding:30px;

    padding-bottom:180px;
}

/* =========================
HEADER
========================= */

header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:25px;
}

header h1{
    font-size:30px;
}

header p{
    color:#94a3b8;
}

header button{
    padding:12px 18px;

    border:none;

    border-radius:12px;

    background:#3b82f6;

    color:white;

    cursor:pointer;
}

/* =========================
PAGES
========================= */

.page{
    display:none;
    animation:fade .35s ease;
}

.page.active-page{
    display:block;
}

@keyframes fade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:none;
}

}

/* =========================
CARDS GRID
========================= */

.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(150px,1fr));

gap:20px;

padding-bottom:0px;

}

.card{

background:
rgba(255,255,255,.05);

padding:25px;

border-radius:20px;

backdrop-filter:blur(10px);

transition:.3s;

border:
1px solid rgba(255,255,255,.06);

}

.card button{
    height: 40px;
    border-radius: 10px;
}

.card:hover{

transform:
translateY(-5px);

}

.card i{

font-size:26px;

margin-bottom:12px;

color:#3b82f6;

}

.card h2{

margin-top:10px;

}

/* =========================
FORMS
========================= */

/* =========================
FORMS
========================= */

form{

display:flex;

flex-direction:column;

gap:18px;

background:
rgba(255,255,255,.04);

padding:25px;

border-radius:24px;

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:
blur(12px);

max-width:500px;

}

/* INPUTS */

input{

width:100%;

height:58px;

padding:0 18px;

border:none;

outline:none;

border-radius:16px;

background:
rgba(255,255,255,.08);

color:white;

font-size:16px;

transition:.3s;

}

input::placeholder{

color:#94a3b8;

}

input:focus{

border:2px solid #3b82f6;

box-shadow:
0 0 0 4px rgba(59,130,246,.15);

}

/* BUTTONS */

button{

border:none;

outline:none;

cursor:pointer;

transition:.3s;

}

button:hover{

opacity:.95;

}
/* =========================
TRANSACTIONS
========================= */

.transaction{

display:flex;

justify-content:space-between;

padding:18px 0;

border-bottom:
1px solid rgba(255,255,255,.05);

}

.positive{
color:#10b981;
}

.negative{
color:#ef4444;
}

/* =========================
VIRTUAL CARD
========================= */

/* =========================
VIRTUAL CARD
========================= */

.virtual-card{

position:relative;

width:100%;

max-width:430px;

padding:32px;

margin-top:25px;

border-radius:28px;

overflow:hidden;

background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8,
#1e3a8a
);

box-shadow:
0 20px 40px rgba(0,0,0,.35);

border:
1px solid rgba(255,255,255,.12);

}

/* glow effect */

.virtual-card::before{

content:"";

position:absolute;

top:-80px;

right:-80px;

width:220px;

height:220px;

background:
rgba(255,255,255,.12);

border-radius:50%;

}

/* top & bottom */

.card-top,
.card-bottom{

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

z-index:2;

}

/* chip */

.virtual-card i{

font-size:32px;

}

/* number */

.virtual-card h3{

margin:45px 0;

font-size:24px;

letter-spacing:4px;

font-weight:600;

position:relative;

z-index:2;

}

/* labels */

.virtual-card p{

font-size:14px;

color:rgba(255,255,255,.75);

margin-bottom:5px;

}

/* holder */

.virtual-card h4{

font-size:18px;

font-weight:600;

}

/* =========================
LOGIN
========================= */

.login-screen{

position:fixed;

inset:0;

background:#0b1220;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

}

.login-box{

width:320px;

padding:35px;

border-radius:20px;

background:
rgba(255,255,255,.05);

backdrop-filter:
blur(20px);

}

.login-box h2{

color:#3b82f6;

margin-bottom:10px;

}

.login-box input{

margin:10px 0;

}

.login-box button{

width:100%;

}

/* =========================
FAB
========================= */

.fab{
position:fixed;
bottom:100px;
right:20px;
width:50px;
height:50px;
border-radius:50%;
background:#3b82f6;
display:flex;
justify-content:center;
align-items:center;
font-size:17px;
box-shadow:0 10px 26px -8px rgba(59,130,246,0.65);
transition:transform 0.15s ease, box-shadow 0.15s ease;
z-index:999;
}

.fab:hover{
transform:translateY(-2px);
box-shadow:0 14px 30px -8px rgba(59,130,246,0.75);
}

@media(max-width:480px){
.fab{
width:44px;
height:44px;
font-size:15px;
bottom:96px;
right:16px;
}
}

/* =========================
BOTTOM NAV
========================= */

.bottom-nav{

display:none;

}

/* =========================
DARK MODE
========================= */

.light-mode{

background:#f8fafc;

color:black;

}

.light-mode .sidebar{

background:white;

}

.light-mode .card{

background:white;

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.container{

flex-direction:column;

}

.sidebar{

width:100%;

padding:15px;

overflow-x:auto;

}

.logo{

margin-bottom:15px;
    font-weight:700;
}

.nav{

display:flex;

gap:8px;

}

.nav-item{

flex-direction:column;

font-size:12px;

min-width:85px;

}

.main-content{

padding:18px;

padding-bottom:220px;

}

header{

flex-direction:column;

align-items:flex-start;

}

header h1{

font-size:22px;

}




header button{

width:100%;

}


/* transfer buttons */

form button{

height:58px;

border-radius:16px;

background:
linear-gradient(
135deg,
#3b82f6,
#2563eb
);

color:white;

font-size:16px;

font-weight:600;

}
.cards{

grid-template-columns:1fr;

padding-bottom:160px;

}

.virtual-card{

max-width:100%;

}

.bottom-nav{

position:fixed;

bottom:0;

left:0;

right:0;

height:72px;

display:flex;

justify-content:space-around;

align-items:center;

background:#0b1220;

z-index:998;

}

.fab{

bottom:100px;

}

}

@media(max-width:480px){

header h1{

font-size:20px;

}

.card{

padding:18px;

}

.virtual-card{

padding:20px;

}

}

/* =========================
   PAGE SYSTEM FIX
========================= */

.page {
    display: none;
    width: 100%;
    animation: fadeSlide 0.4s ease;
}

.page.active-page {
    display: block;
}

/* smooth animation */
@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@media(max-width:768px){

.virtual-card h3{

font-size:18px;

letter-spacing:2px;

word-break:break-all;

}

form{

max-width:100%;

}

}

.settings-card input{
    margin-top: 10px;
}

.settings-card button{
    width: 120px;
    height: 50px;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
}

/* =========================
QUICK ACTIONS
========================= */

.quick-actions{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(140px,1fr));

gap:18px;

margin-top:-20px;

margin-bottom:30px;

}

.action-card{

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,255,255,.06);

border-radius:22px;

padding:24px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:14px;

cursor:pointer;

transition:.3s;

backdrop-filter:blur(10px);

}

.action-card:hover{

transform:
translateY(-5px);

background:
rgba(59,130,246,.12);

}

.action-card i{

font-size:28px;

color:#3b82f6;

}

.action-card span{

font-size:15px;

font-weight:600;

}

/* =========================
ADVERT SLIDER
========================= */

.advert-slider{

position:relative;

width:100%;

height:220px;

border-radius:30px;

overflow:hidden;

margin-top:20px;

}

.slide{

position:absolute;

inset:0;

opacity:0;

transition:opacity .6s ease;

display:flex;

align-items:center;

padding:40px;

background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8,
#1e3a8a
);

}

.active-slide{

opacity:1;

z-index:2;

}

.slide::before{

content:"";

position:absolute;

top:-60px;

right:-60px;

width:220px;

height:220px;

background:
rgba(255,255,255,.12);

border-radius:50%;

}

.slide-content{

position:relative;

z-index:2;

max-width:420px;

}

.slide-content h2{

font-size:34px;

margin-bottom:10px;

}

.slide-content p{

font-size:16px;

color:rgba(255,255,255,.85);

margin-bottom:22px;

}

.slide-content button{

padding:14px 22px;

border:none;

border-radius:14px;

background:white;

color:#2563eb;

font-weight:700;

cursor:pointer;

}

/* MOBILE */

@media(max-width:768px){

.quick-actions{

grid-template-columns:
repeat(2,1fr);

}

.advert-slider{

height:260px;

}

.slide{

padding:28px;

}

.slide-content h2{

font-size:26px;

}

}

.action-card:nth-child(5) i{
color:#22c55e;
}

.action-card:nth-child(6) i{
color:#f59e0b;
}

.action-card:nth-child(7) i{
color:#ef4444;
}

.action-card:nth-child(8) i{
color:#a855f7;
}

.transaction-info{

display:flex;

flex-direction:column;

gap:4px;

}

.transaction-info h4{

font-size:15px;

font-weight:600;

color:white;

}

.transaction-info small{

font-size:12px;

color:#94a3b8;

}


/* =========================
LOADER
========================= */

.loader-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.7);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-box{

background:#111827;

padding:35px;

border-radius:24px;

text-align:center;

width:320px;

}

.spinner{

width:60px;

height:60px;

border:6px solid rgba(255,255,255,.2);

border-top:6px solid #3b82f6;

border-radius:50%;

margin:auto;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

/* =========================
RECEIPT MODAL
========================= */

.receipt-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.7);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.receipt-box{

background:#111827;

padding:30px;

border-radius:24px;

width:90%;

max-width:420px;

}

.receipt-box h2{

margin-bottom:20px;

color:#10b981;

}

.receipt-item{

display:flex;

flex-wrap:wrap;

justify-content:space-between;

align-items:flex-start;

gap:10px;

margin-bottom:15px;

padding-bottom:10px;

border-bottom:
1px solid rgba(255,255,255,.08);

}

.receipt-item span{

flex-shrink:0;

}

.receipt-item strong{

text-align:right;

word-break:break-word;

max-width:65%;

}

.receipt-box button{

width:100%;

height:55px;

border:none;

border-radius:16px;

background:#3b82f6;

color:white;

margin-top:20px;

cursor:pointer;

}


/* =========================
NOTIFICATION CENTER
========================= */

.header-actions{

display:flex;

align-items:center;

gap:15px;

position:relative;

}

.notification-wrapper{

position:relative;

}

.notification-icon{

width:52px;

height:52px;

border-radius:16px;

background:rgba(255,255,255,.08);

display:flex;

justify-content:center;

align-items:center;

cursor:pointer;

position:relative;

font-size:20px;

transition:.3s;

border:1px solid rgba(255,255,255,.08);

}

.notification-icon:hover{

background:rgba(59,130,246,.18);

transform:translateY(-2px);

}

.notification-count{

position:absolute;

top:-6px;

right:-6px;

width:22px;

height:22px;

border-radius:50%;

background:#ef4444;

display:flex;

justify-content:center;

align-items:center;

font-size:12px;

font-weight:700;

color:white;

}

.notification-dropdown{

position:absolute;

top:70px;

right:0;

width:360px;

max-height:450px;

overflow-y:auto;

background:#111827;

border-radius:24px;

padding:18px;

display:none;

z-index:1000;

box-shadow:0 20px 40px rgba(0,0,0,.35);

border:1px solid rgba(255,255,255,.08);

}

.notification-dropdown.active{

display:block;

animation:fadeNotification .3s ease;

}

@keyframes fadeNotification{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.notification-header{

margin-bottom:15px;

padding-bottom:12px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.notification-header h3{

font-size:18px;

}

.notification-item{

padding:15px;

border-radius:18px;

background:rgba(255,255,255,.04);

margin-bottom:12px;

cursor:pointer;

transition:.3s;

border:1px solid rgba(255,255,255,.05);

}

.notification-item:hover{

background:rgba(59,130,246,.12);

transform:translateY(-2px);

}

.notification-item h4{

font-size:15px;

margin-bottom:6px;

}

.notification-item p{

font-size:13px;

color:#94a3b8;

}

.empty-notification{

text-align:center;

color:#94a3b8;

padding:20px 0;

}

/* MOBILE */

@media(max-width:768px){

.notification-dropdown{

width:100vw;

right:-20px;

top:65px;

border-radius:22px 22px 0 0;

max-height:75vh;

}

.header-actions{

width:100%;

justify-content:space-between;

}

}


/* =========================
TOPUP MODAL
========================= */

.topup-modal{

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.6);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 9999;

}

.topup-box{
  width: 90%;
  max-width: 400px;
  background: #111827;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 25px;
}

.topup-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.topup-header h2{
  font-size: 20px;
  color: #fff;
}

.topup-header button{
  border: none;
  background: transparent;
  font-size: 20px;
  color: #94a3b8;
  cursor: pointer;
}

.topup-box form{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.topup-box input,
.topup-box select{
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 0 15px;
  font-size: 15px;
  background: #0b1220;
  color: #fff;
}

.topup-box input::placeholder{
  color: #94a3b8;
}

.topup-box button[type="submit"]{
  height: 50px;
  border: none;
  border-radius: 12px;
  background: #2563eb;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.quick-actions{
  display:flex;
  gap:15px;
  margin:20px 0;
}

.quick-actions button{
  padding:12px 20px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  color:white;
  min-width:120px;
}

.quick-actions .deposit-btn{
  background:#2563eb;
}

.quick-actions .withdraw-btn{
  background:#ef4444;
}




.transaction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
}

.transaction-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.transaction-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 18px;
}

.transaction-info h4 {
  font-size: 15px;
  margin-bottom: 4px;
}

.transaction-info small {
  color: #94a3b8;
}

.positive {
  color: #10b981;
  font-weight: 700;
}

.negative {
  color: #ef4444;
  font-weight: 700;
}


/* WITHDRAW MODAL FIX */

#withdrawModal{

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.45);

  display: none;

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

  z-index: 99999;

}

.withdraw-modal-box{

  width: 95%;
  max-width: 420px;

  background: #ffffff;

  border-radius: 24px;

  padding: 24px;

  animation: modalFade .25s ease;

}

@keyframes modalFade{

  from{
    transform: translateY(20px);
    opacity: 0;
  }

  to{
    transform: translateY(0);
    opacity: 1;
  }

}

.withdraw-header{

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

}

.withdraw-header h2{

  font-size: 22px;

  color: #111827;

}

.close-btn{

  border: none;

  background: #f3f4f6;

  width: 38px;
  height: 38px;

  border-radius: 12px;

  cursor: pointer;

  font-size: 18px;

}

.input-group{

  margin-bottom: 18px;

}

.input-group label{

  display: block;

  margin-bottom: 8px;

  font-size: 14px;

  font-weight: 600;

}

.input-group input,
.input-group select{

  width: 100%;

  height: 54px;

  border: 1px solid #d1d5db;

  border-radius: 14px;

  padding: 0 14px;

  font-size: 15px;

  outline: none;

}

.withdraw-submit-btn{

  width: 100%;

  height: 54px;

  border: none;

  border-radius: 14px;

  background: #2563eb;

  color: white;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  margin-top: 10px;

}


/* =========================
TOAST NOTIFICATIONS
========================= */

#toastContainer{
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast{
  min-width: 300px;
  padding: 16px 18px;
  border-radius: 14px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideIn .3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.toast.success{
  background: #10b981;
}

.toast.error{
  background: #ef4444;
}

.toast.warning{
  background: #f59e0b;
}

.toast.info{
  background: #3b82f6;
}

.toast button{
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

@keyframes slideIn{
  from{
    transform: translateX(100%);
    opacity: 0;
  }

  to{
    transform: translateX(0);
    opacity: 1;
  }
}



.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.modal-content {
    background: #111827;
    width: 90%;
    max-width: 400px;
    padding: 20px;
    border-radius: 12px;
    color: #fff;
}




/* AIRTIME MODAL */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.modal-content {
  width: 100%;
  max-width: 420px;
  background: #111827;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  color: #fff;
}

.modal-content h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
  font-size: 24px;
}

.modal-content form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal-content input,
.modal-content select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  transition: 0.3s;
  background: #0b1220;
  color: #fff;
}

.modal-content input::placeholder {
  color: #94a3b8;
}

.modal-content input:focus,
.modal-content select:focus {
  border-color: #3b82f6;
  background: #0b1220;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.modal-content button[type="submit"] {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.modal-content button[type="submit"]:hover {
  transform: translateY(-2px);
  background: #1d4ed8;
}

.close-btn {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #cbd5e1;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.close-btn:hover {
  background: rgba(255,255,255,.15);
}




.account-number-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  margin-top: 15px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
}

.account-number-card h3 {
  margin-top: 5px;
  letter-spacing: 2px;
}

#copyAccountBtn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}





/* =========================
GIFT CARD FORM
========================= */

#giftCardForm select,
#giftCardForm input[type="number"],
#giftCardForm input[type="text"],
#giftCardForm input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.gc-rate-preview {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  margin-bottom: 16px;
  font-size: 14px;
}

/* =========================
TRADE LIST
========================= */

.gc-trade-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  cursor: pointer;
}

.gc-trade-row:last-child { border-bottom: none; }

.gc-trade-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gc-trade-left strong { font-size: 14px; }
.gc-trade-left small { color: #94a3b8; font-size: 12px; }

.gc-trade-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.gc-amount { font-weight: 600; font-size: 14px; }

.gc-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.gc-status-badge.pending { background: rgba(217, 140, 43, 0.15); color: #d98c2b; }
.gc-status-badge.under_review { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.gc-status-badge.approved { background: rgba(31, 157, 108, 0.15); color: #1f9d6c; }
.gc-status-badge.rejected { background: rgba(217, 72, 59, 0.15); color: #d9483b; }
.gc-status-badge.paid { background: rgba(16, 185, 129, 0.18); color: #10b981; }

/* =========================
TRADE DETAIL MODAL
========================= */

.gc-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  font-size: 13.5px;
}

.gc-detail-row:last-child { border-bottom: none; }

.gc-detail-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.gc-detail-images img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.gc-admin-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(217, 72, 59, 0.08);
  border-left: 3px solid #d9483b;
  font-size: 13px;
}

/* =========================
WITHDRAW METHOD FIELDS
========================= */

.withdraw-method-fields select,
.withdraw-method-fields input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

/* =========================
DASHBOARD SUMMARY WIDGETS
(rates & notifications preview cards on the dashboard)
========================= */

.dash-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13.5px;
}

.dash-rate-row:last-child { border-bottom: none; }

.dash-rate-row strong { color: #10b981; }

.dash-notification-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.dash-notification-row:last-child { border-bottom: none; }

.dash-notification-row span { font-size: 13.5px; font-weight: 600; }
.dash-notification-row small { font-size: 12px; color: #94a3b8; }

/* =========================
GIFT CARD RATE PREVIEW — 3-row breakdown
(Card Value / Current Rate / Estimated Amount to Receive)
========================= */

.gc-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.gc-rate-row strong {
  font-size: 13.5px;
  color: #e2e8f0;
  font-weight: 600;
}

.gc-rate-row.total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(99, 102, 241, 0.35);
}

.gc-rate-row.total strong {
  color: #10b981;
  font-size: 16px;
}




/* =========================
SAVED BANK ACCOUNTS (Settings page)
========================= */

.settings-section-title {
  margin: 0 0 4px;
  font-size: 16px;
}

.settings-section-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  color: #94a3b8;
}

.saved-bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.saved-bank-row:last-child {
  border-bottom: none;
}

.saved-bank-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.saved-bank-row-info small {
  color: #94a3b8;
}

.saved-bank-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.saved-bank-row-actions button {
  background: none;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

.saved-bank-delete-btn {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.saved-bank-default-badge {
  font-size: 11px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  padding: 4px 8px;
  border-radius: 6px;
}

.saved-bank-add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.saved-bank-default-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.saved-bank-add-actions {
  display: flex;
  gap: 10px;
}

.saved-bank-add-actions button {
  flex: 1;
}

.add-saved-bank-btn {
  margin-top: 14px;
  width: 100%;
}

.secondary-btn {
  background: transparent !important;
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: inherit;
}

/* Saved bank select injected into the withdraw modal's bank fields block */
#withdrawSavedBankSelect {
  margin-bottom: 4px;
}

/* =========================
PROFILE PHOTO (Settings page)
========================= */

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-photo-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 24px;
  color: #94a3b8;
}

.profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-photo-upload-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}

.profile-photo-controls .secondary-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.profile-photo-controls .secondary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================
WITHDRAWAL PIN (Settings page forms)
========================= */

#pinSetForm,
#pinChangeForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================
PIN ENTRY MODAL (withdraw confirmation)
========================= */

.pin-entry-box {
  max-width: 320px;
  text-align: center;
}

.pin-entry-subtitle {
  color: #94a3b8;
  font-size: 13px;
  margin: 4px 0 18px;
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 8px;
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: transparent;
  transition: background 0.15s ease;
}

.pin-dot.filled {
  background: #2563eb;
  border-color: #2563eb;
}

.pin-entry-error {
  color: #ef4444;
  font-size: 12.5px;
  min-height: 18px;
  margin: 8px 0 4px;
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.pin-pad button {
  padding: 16px 0;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.08);
  font-size: 18px;
  cursor: pointer;
}

.pin-pad button:active {
  background: rgba(37, 99, 235, 0.15);
}

.pin-pad-empty {
  background: transparent !important;
  border: none !important;
  cursor: default !important;
}
/* =========================
SETTINGS MENU (list of icon links -> sub-panels)
========================= */

.settings-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: background 0.2s ease, transform 0.15s ease;
}

.settings-menu-item:hover {
  background: rgba(255, 255, 255, 0.09);
}

.settings-menu-item:active {
  transform: scale(0.99);
}

.settings-menu-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.settings-menu-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-menu-text strong {
  font-size: 14.5px;
  font-weight: 600;
}

.settings-menu-text small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.settings-menu-chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}

.settings-menu-item-danger .settings-menu-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.settings-menu-item-danger .settings-menu-text strong {
  color: #f87171;
}

/* =========================
SETTINGS SUB-PANELS
========================= */

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: fadeSlide 0.3s ease;
}

.settings-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.settings-back-btn:hover {
  background: rgba(255, 255, 255, 0.11);
}

@media (max-width: 768px) {
  .settings-menu-text small {
    display: none;
  }
}

/* =========================
SUPPORT CHAT WIDGET
========================= */

.support-chat-fab {
  position: fixed;
  left: 22px;
  bottom: 88px;
  height: 48px;
  padding: 0 18px 0 16px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  border: none;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(37, 99, 235, 0.6);
  z-index: 998;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.support-chat-fab-label {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.support-chat-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -8px rgba(37, 99, 235, 0.7);
}

.support-chat-fab-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #0f172a;
}

@media (max-width: 768px) {
  /* Icon-only on ALL mobile screens, not just very narrow ones — the
     full pill with "Chat with us" text was too wide on mobile and
     could crowd/overlap nearby tappable elements. */
  .support-chat-fab {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    left: 16px;
    bottom: 96px; /* more clearance above the 72px bottom nav bar */
  }
  .support-chat-fab-label { display: none; }
}

@media (max-width: 420px) {
  .support-chat-fab {
    width: 42px;
    height: 42px;
    bottom: 92px;
  }
}

.support-chat-panel {
  position: fixed;
  left: 22px;
  bottom: 156px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 480px;
  max-height: calc(100vh - 200px);
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 999;

  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.support-chat-panel.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (max-width: 768px) {
  .support-chat-panel {
    right: 16px;
    left: 16px;
    width: auto;
    bottom: 144px;
    height: min(480px, calc(100vh - 220px));
  }
}

.support-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(37, 99, 235, 0.08);
}

.support-chat-header h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
}

.support-chat-header p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.support-chat-header button {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
}

.support-chat-header button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.support-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-chat-empty {
  margin: auto;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  padding: 24px 12px;
}

.support-chat-empty i {
  font-size: 26px;
  margin-bottom: 10px;
  display: block;
}

.support-chat-empty p {
  font-size: 13px;
  line-height: 1.5;
}

.support-chat-bubble {
  max-width: 78%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
}

.support-chat-bubble.from-user {
  align-self: flex-end;
  background: #2563eb;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.support-chat-bubble.from-admin {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-bottom-left-radius: 4px;
}

.support-chat-bubble-time {
  display: block;
  font-size: 10.5px;
  opacity: 0.6;
  margin-top: 4px;
}

.support-chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.support-chat-input-row input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  font-size: 13.5px;
  outline: none;
}

.support-chat-input-row input:focus {
  border-color: #2563eb;
}

.support-chat-input-row button {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
}

.support-chat-input-row button:hover {
  background: #1d4ed8;
}

/* =========================
SUPPORT CHAT — TYPING INDICATOR
========================= */

.support-chat-typing-indicator {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  margin: 0 16px 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}

.support-chat-typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  animation: supportTypingBounce 1.2s infinite ease-in-out;
}

.support-chat-typing-indicator span:nth-child(2) {
  animation-delay: 0.15s;
}

.support-chat-typing-indicator span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes supportTypingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Admin-side conversation list unread count badge */
.admin-support-conversation-item .conv-count-badge {
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

/* Admin-side "user is typing" indicator in the thread view */
.admin-support-typing-indicator {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--admin-surface-alt, rgba(0, 0, 0, 0.05));
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}

.admin-support-typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  animation: supportTypingBounce 1.2s infinite ease-in-out;
}

.admin-support-typing-indicator span:nth-child(2) {
  animation-delay: 0.15s;
}

.admin-support-typing-indicator span:nth-child(3) {
  animation-delay: 0.3s;
}

/* =========================
SUPPORT CHAT — IMAGE ATTACHMENT
========================= */

#supportChatAttachBtn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

#supportChatAttachBtn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

.support-chat-image-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 0 12px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.support-chat-image-preview img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
}

.support-chat-image-preview button {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}

.support-chat-image-preview button:hover {
  background: rgba(239, 68, 68, 0.7);
}

.support-chat-image {
  display: block;
  max-width: 100%;
  width: 190px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: opacity 0.15s ease;
}

.support-chat-image:hover {
  opacity: 0.9;
}

.support-chat-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  cursor: zoom-out;
  animation: lightboxFadeIn 0.15s ease;
}

@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.support-chat-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.support-chat-lightbox button {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

.support-chat-lightbox button:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* =========================
INTERACTIVE WALKTHROUGH
========================= */

.walkthrough-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  pointer-events: none;
}

.walkthrough-spotlight {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(5, 8, 15, 0.78);
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.walkthrough-tooltip {
  position: fixed;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  transition: top 0.3s ease, left 0.3s ease;
  animation: walkthroughTooltipIn 0.25s ease;
}

@keyframes walkthroughTooltipIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.walkthrough-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.walkthrough-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s ease, width 0.2s ease;
}

.walkthrough-dots span.active {
  background: #2563eb;
  width: 16px;
  border-radius: 3px;
}

.walkthrough-tooltip h3 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.walkthrough-tooltip p {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 18px;
}

.walkthrough-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.walkthrough-skip {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  cursor: pointer;
  padding: 8px 0;
}

.walkthrough-skip:hover {
  color: rgba(255, 255, 255, 0.7);
}

.walkthrough-nav-btns {
  display: flex;
  gap: 8px;
}

.walkthrough-back,
.walkthrough-next {
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
}

.walkthrough-back {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.walkthrough-back:hover {
  background: rgba(255, 255, 255, 0.14);
}

.walkthrough-next {
  background: #2563eb;
  color: #fff;
}

.walkthrough-next:hover {
  background: #1d4ed8;
}

@media (max-width: 480px) {
  .walkthrough-tooltip {
    width: calc(100vw - 32px);
  }
}

/* =========================
WALLET OVERVIEW CARD (balance + promo carousel side by side)
========================= */

.wallet-overview-card {
  display: flex;
  gap: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  padding: 28px;
  margin-top: 20px;
  align-items: stretch;
}

.wallet-balance-block {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wallet-balance-label {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 10px;
}

.wallet-balance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.wallet-currency-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.wallet-balance-amount {
  font-size: clamp(20px, 5vw, 34px);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}

.wallet-balance-amount.balance-hidden {
  filter: blur(9px);
  user-select: none;
}

.balance-eye-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
  transition: background 0.15s ease;
}

.balance-eye-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.wallet-topup-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: none;
  border: none;
  color: #10b981;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  padding: 0;
}

.wallet-topup-link:hover {
  text-decoration: underline;
}

.rate-board-viewall-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #10b981;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
}

.rate-board-viewall-btn i {
  font-size: 12px;
  line-height: 1;
}

.rate-board-viewall-btn:hover {
  text-decoration: underline;
}

.wallet-promo-carousel {
  flex: 1.3;
  position: relative;
  min-width: 240px;
  border-radius: 18px;
  overflow: hidden;
  min-height: 150px;
}

.wallet-promo-carousel .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  align-items: center;
  padding: 30px 28px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8, #1e3a8a);
}

.wallet-promo-carousel .slide::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.wallet-promo-carousel .active-slide {
  opacity: 1;
  z-index: 2;
}

.wallet-promo-carousel .slide-content {
  position: relative;
  z-index: 2;
}

.wallet-promo-carousel .slide-content h2 {
  font-size: 21px;
  margin-bottom: 6px;
}

.wallet-promo-carousel .slide-content p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}

.wallet-promo-carousel .slide-content button {
  padding: 9px 16px;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: #2563eb;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .wallet-overview-card {
    flex-direction: column;
  }
  .wallet-promo-carousel {
    min-height: 120px;
  }
}

/* =========================
QUICK ACTION TILES (colored, WhatsApp/Cardtonic-style)
========================= */

.wallet-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.qa-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease;
  font-family: inherit;
}

.qa-tile:hover {
  transform: translateY(-2px);
}

.qa-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: #fff;
}

.qa-label {
  font-size: 13.5px;
  font-weight: 700;
}

.qa-tile-cyan { background: rgba(6, 182, 212, 0.14); }
.qa-tile-cyan .qa-icon { background: #06b6d4; }
.qa-tile-cyan .qa-label { color: #22d3ee; }

.qa-tile-green { background: rgba(16, 185, 129, 0.14); }
.qa-tile-green .qa-icon { background: #10b981; }
.qa-tile-green .qa-label { color: #34d399; }

.qa-tile-purple { background: rgba(139, 92, 246, 0.14); }
.qa-tile-purple .qa-icon { background: #8b5cf6; }
.qa-tile-purple .qa-label { color: #a78bfa; }

.qa-tile-orange { background: rgba(249, 115, 22, 0.14); }
.qa-tile-orange .qa-icon { background: #f97316; }
.qa-tile-orange .qa-label { color: #fb923c; }

.qa-tile-blue { background: rgba(59, 130, 246, 0.14); }
.qa-tile-blue .qa-icon { background: #3b82f6; }
.qa-tile-blue .qa-label { color: #60a5fa; }

.qa-tile-gray { background: rgba(148, 163, 184, 0.14); }
.qa-tile-gray .qa-icon { background: #64748b; }
.qa-tile-gray .qa-label { color: #cbd5e1; }

/* =========================
TRANSACTION SECTION (dashboard preview + transactions page share this)
========================= */

.wallet-tx-section {
  margin-top: 28px;
}

.wallet-tx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.wallet-tx-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #10b981;
}

.wallet-tx-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.wallet-filter-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

.wallet-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0b1220;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.wallet-export-btn:hover {
  background: #172033;
}

.no-card-padding {
  padding: 8px !important;
}

.wallet-tx-list {
  display: flex;
  flex-direction: column;
}

.wallet-tx-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.wallet-tx-row:last-child {
  border-bottom: none;
}

.wallet-tx-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.wallet-tx-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  color: #fff;
}

.wallet-tx-icon.tx-deposit { background: #10b981; }
.wallet-tx-icon.tx-withdrawal { background: #ef4444; }
.wallet-tx-icon.tx-transfer { background: #8b5cf6; }
.wallet-tx-icon.tx-giftcard { background: #f97316; }
.wallet-tx-icon.tx-airtime,
.wallet-tx-icon.tx-data { background: #3b82f6; }
.wallet-tx-icon.tx-admin { background: #64748b; }

.wallet-tx-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wallet-tx-info strong {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-tx-info small {
  font-size: 11.5px;
  color: #94a3b8;
}

.wallet-tx-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.wallet-tx-amount {
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
}

.wallet-tx-amount.positive { color: #10b981; }
.wallet-tx-amount.negative { color: #ef4444; }
.wallet-tx-amount.neutral { color: #e2e8f0; }

.wallet-tx-status {
  font-size: 11px;
  font-weight: 700;
}

.wallet-tx-status.status-completed { color: #10b981; }
.wallet-tx-status.status-pending { color: #f59e0b; }
.wallet-tx-status.status-rejected { color: #ef4444; }

.wallet-tx-empty {
  padding: 30px 10px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

@media (max-width: 480px) {
  .wallet-tx-info small { display: none; }
}
/* =========================
TWO-FACTOR AUTHENTICATION (Settings > Security)
========================= */

.two-factor-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  margin-bottom: 4px;
}

.two-factor-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.two-factor-status-dot.off { background: #94a3b8; }
.two-factor-status-dot.on {
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

.two-factor-status-row strong { display: block; font-size: 14px; }
.two-factor-status-row small { color: #94a3b8; font-size: 12.5px; }

.settings-menu-item-danger-btn {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}
.settings-menu-item-danger-btn:hover { background: rgba(239, 68, 68, 0.08); }

/* The "Confirm & enable" button in the authenticator-app setup flow had
   no class at all, so it fell back to the bare unstyled <button> default
   (grey, browser-native) sitting right next to the properly styled
   Cancel button — this gives it the same solid, rounded, brand-blue look
   used for every other primary action in Settings. */
#confirmTotpEnrollBtn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
#confirmTotpEnrollBtn:hover { background: #1d4ed8; }
#confirmTotpEnrollBtn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Same bare-<button> problem on the entry-point "+ Set up authenticator
   app" button (.add-saved-bank-btn only ever set width/margin, never any
   actual visual styling) and on the two other primary Settings buttons
   that share that gap — "Save Changes" on the profile form and "Save
   Account" when adding a bank. All three now get the same brand-blue
   treatment instead of the browser's plain default button look. */
#startTotpEnrollBtn,
#saveSettingsBtn,
#confirmSavedBankBtn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  padding: 12px 16px;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
#startTotpEnrollBtn:hover,
#saveSettingsBtn:hover,
#confirmSavedBankBtn:hover { background: #1d4ed8; }
#startTotpEnrollBtn:disabled,
#saveSettingsBtn:disabled,
#confirmSavedBankBtn:disabled { opacity: 0.6; cursor: not-allowed; }

/* =========================
TRANSFER 2FA MODAL
========================= */

.tfa-method-toggle {
  display: flex;
  gap: 8px;
  margin: 14px 0 18px;
}
.tfa-method-toggle button {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tfa-method-toggle button.active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

#tfaCodeInput {
  width: 100%;
  text-align: center;
  letter-spacing: 8px;
  font-family: monospace;
  font-size: 20px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: transparent;
  color: inherit;
  margin-bottom: 6px;
}

.tfa-resend-row {
  text-align: center;
  font-size: 12.5px;
  color: #94a3b8;
  margin-top: 10px;
}
.tfa-resend-row a { color: #10b981; font-weight: 600; }

.tfa-error {
  display: none;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 12px;
}
.tfa-error.show { display: block; }

#confirmReauthBtn {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
#confirmReauthBtn:hover { background: #1d4ed8; }

/* =========================
VIRTUAL CARD EXPLAINER BANNER
========================= */

.vcard-explainer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #93c5fd;
}
.vcard-explainer i { margin-top: 2px; flex-shrink: 0; color: #60a5fa; }
.vcard-explainer p { margin: 0; color: inherit; }
body.light-mode .vcard-explainer {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}
body.light-mode .vcard-explainer i { color: #3b82f6; }

/* =========================
GLOBAL PAGE-SECTION SPACING — FIXES CONTAINER OVERLAP/COLLISION
This CSS file has accumulated a lot of duplicate rule blocks over past
edits (some pages' selectors are defined 2-4x with slightly different
values fighting each other in the cascade — e.g. an old, now-unused
.quick-actions rule had a NEGATIVE margin-top pulling it up into the
card above it). Rather than track down every individual component's
spacing by hand, this gives every direct top-level section of a .page
(header, wallet-overview-card, quick actions, cards, etc.) a
guaranteed, consistent gap from the section before it — so no section
can ever end up flush against or overlapping its neighbor, regardless
of what any individual older rule elsewhere in this file says.
Placed at the very end of the file so it wins the cascade.
========================= */

.page > * + * {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .page > * + * {
    margin-top: 16px;
  }
}

/* Cards stacked inside a wrapping div (e.g. .cards, .grid-2) already
   get spacing from their own container's `gap` — this only adds
   spacing between TOP-level .page sections, so it won't double up
   with those internal grid/flex gaps. */
/* =========================================================
PRELOADER — dashboard
Shown from first paint until the user's Firestore doc has
actually rendered, with the message updated at each stage
(auth check -> account data) so it never looks like a frozen
blank screen while Firebase does its thing.
========================================================= */
.page-preloader{
  position:fixed; inset:0; z-index:99999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:#0f172a;
  transition:opacity .35s ease, visibility .35s ease;
}
.page-preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.page-preloader-spinner{
  width:36px; height:36px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.12); border-top-color:#3b82f6;
  animation:page-preloader-spin .8s linear infinite;
}
@keyframes page-preloader-spin{ to{ transform:rotate(360deg); } }
.page-preloader-text{ font-size:13.5px; color:#9aa9c7; font-family:Arial,sans-serif; }
@media (prefers-reduced-motion: reduce){
  .page-preloader-spinner{ animation-duration: 1.6s; }
}

/* =========================================================
   DASHBOARD FIXES PATCH — Sept 2026
   Appended at the end so these rules win over the (duplicated)
   earlier blocks without having to hunt through them.
   Covers: select styling, withdraw source toggle, settings
   card button/input sizing, saved-bank mobile overlap, bottom
   nav visibility, gift-card e-code required styling.
========================================================= */

/* ---- 1. GLOBAL SELECT STYLING ----
   Every <select> in the dashboard (including ones injected by JS,
   like #withdrawSavedBankSelect) gets a consistent look: dark
   background, visible border, custom chevron, proper focus ring. */
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 0 40px 0 15px;
  font-size: 15px;
  background-color: #0b1220;
  color: #fff;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%239aa9c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  transition: border-color .2s ease, box-shadow .2s ease;
}
select:hover{ border-color: rgba(255,255,255,.28); }
select:focus{
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}
select:disabled{
  opacity: .55;
  cursor: not-allowed;
}
select option{
  background: #0b1220;
  color: #fff;
}
/* Small inline selects (bank picker inside the settings "add account"
   form, saved-bank withdraw picker) shouldn't force the full 50px
   height if a tighter context already sets one, but default to the
   same consistent style otherwise. */
.wallet-filter-select{
  height: 40px;
  padding-right: 34px;
  background-position: right 12px center;
}

/* ---- 2. WITHDRAW: "use default" vs "enter new account" ----
   Replaces the old behaviour where a saved default account was
   force-applied with no visible way to switch to manual entry. */
.withdraw-source-toggle{
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.withdraw-source-btn{
  flex: 1;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0b1220;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
}
.withdraw-source-btn.active{
  border-color: #3b82f6;
  background: rgba(59,130,246,.14);
  color: #fff;
}
#withdrawSavedBankSelect{
  margin-bottom: 14px;
}
.withdraw-method-fields.manual-hidden{
  display: none !important;
}

/* ---- 3. SETTINGS CARD: stop the blanket 120x50 button rule from
   blowing up small icon/action buttons (delete, set-default). ---- */
.settings-card .saved-bank-row-actions button,
.settings-card .saved-bank-delete-btn{
  width: auto;
  height: auto;
  padding: 7px 10px;
  margin: 0;
  border-radius: 8px;
}
.settings-card .saved-bank-delete-btn{
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.settings-card .saved-bank-delete-btn i{
  font-size: 13px;
}
.settings-card .saved-bank-add-actions button,
.settings-card .add-saved-bank-btn,
.settings-card #confirmSavedBankBtn,
.settings-card #cancelSavedBankBtn{
  width: auto;
  height: 46px;
  margin: 0;
}

/* Saved-bank "set as default" checkbox + label — stop text/box overlap
   on narrow screens by letting the row wrap and giving the checkbox
   a fixed, non-shrinking size instead of default tiny/overlapping. */
.saved-bank-default-toggle{
  flex-wrap: wrap;
  line-height: 1.4;
}
.saved-bank-default-toggle input[type="checkbox"]{
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
}

/* Saved bank input fields inside the settings "add account" form were
   inheriting an oversized height; keep them consistent with everything
   else instead of noticeably bigger. */
.saved-bank-add-form input{
  height: 48px;
  width: 100%;
  margin: 0;
}

@media (max-width: 480px){
  .saved-bank-row{
    flex-wrap: wrap;
    gap: 8px;
  }
  .saved-bank-row-actions{
    width: 100%;
    justify-content: flex-end;
  }
  .saved-bank-default-toggle{
    font-size: 12.5px;
    gap: 6px;
  }
  .withdraw-source-toggle{
    flex-direction: column;
  }
}

/* ---- 4. MOBILE BOTTOM NAV — make it visible, not flat ---- */
.bottom-nav{
  height: auto !important;
  min-height: 62px;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -6px 20px rgba(0,0,0,.25);
}
.bottom-nav > div{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  padding: 5px 2px;
  border-radius: 10px;
  color: #7c8aa8;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
.bottom-nav > div i{
  font-size: 16px;
  line-height: 1;
  transition: transform .15s ease;
}
.bottom-nav > div.active{
  color: #3b82f6;
  background: rgba(59,130,246,.12);
}
.bottom-nav > div.active i{
  transform: translateY(-1px);
}
.bottom-nav > div:active{
  transform: scale(.94);
}
.bottom-nav > div span{
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 380px){
  .bottom-nav > div{ font-size: 8px; }
  .bottom-nav > div i{ font-size: 15px; }
}
@media (max-width: 340px){
  /* Not enough room for both icon and label without crowding — drop
     the label and rely on the (larger, colored-when-active) icon alone. */
  .bottom-nav > div span{ display: none; }
  .bottom-nav > div i{ font-size: 20px; }
}

/* ---- 5. GIFT CARD — E-code trade field ---- */
.gc2-code-input{
  border: 1px solid rgba(59,130,246,.4) !important;
}
.gc2-code-required-label{
  font-size: 12.5px;
  color: #cbd5e1;
  margin-bottom: 6px;
  display: block;
}
.gc2-code-required-label .req-star{
  color: #ef4444;
}

/* =========================================================
   MOBILE BOTTOM NAV v2 — OKX-style: only the most-used
   destinations stay on the bar; everything else lives behind
   a "More" bottom sheet. Sits last in the cascade on purpose
   so it wins over the earlier .bottom-nav rules above.
========================================================= */

/* Give every nav item, including the two new custom ones
   (center Trade button + More button), the same flex sizing
   as the original data-page items. */
.bottom-nav > div,
.bottom-nav > #bottomNavMoreBtn{
  flex: 1;
  min-width: 0;
}

/* ---- Center "Trade" button — raised circular swap icon, OKX-style ----
   Structure copied from the reference screenshot: a flat solid-color
   circle that straddles the top edge of the bar (half poking above it),
   with a thin ring in the bar's own background color separating it from
   whatever sits behind it, and a plain two-arrow swap glyph inside. ---- */
.bottom-nav > .bottom-nav-center{
  position: relative;
  justify-content: flex-end;
  padding-top: 0;
}
.bottom-nav-center-btn{
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3b82f6;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 0 0 5px #0b1220, 0 6px 14px -2px rgba(0,0,0,.45);
  transition: transform .15s ease;
}
/* BUGFIX: ".bottom-nav > div span{ display:block }" further up the
   cascade is more specific (class+type+type) than the single-class
   rule above, so it was silently winning and killing the flex
   centering on this span — the icon was rendering pinned to the
   top-left corner of the circle instead of centered in it. Restating
   flex here with the same higher-specificity shape settles it. */
.bottom-nav > .bottom-nav-center .bottom-nav-center-btn{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Swapped the FontAwesome glyph for a hand-drawn SVG (two arrows with
   true 180°-rotational symmetry around its own center) instead of trying
   to eyeball an offset for an off-center font glyph — this renders
   pixel-perfect centered inside the circle on every browser/OS. */
.bottom-nav-center-btn .bottom-nav-center-icon{
  display: block;
  width: 19px;
  height: 19px;
}
.bottom-nav > .bottom-nav-center:active .bottom-nav-center-btn{
  transform: translateX(-50%) scale(.92);
}
.bottom-nav > .bottom-nav-center.active .bottom-nav-center-btn{
  background: #4f8ffb;
}
.bottom-nav > .bottom-nav-center span:last-child{
  margin-top: 22px;
}
.bottom-nav > .bottom-nav-center.active{
  background: none;
}
.bottom-nav > .bottom-nav-center.active span:last-child{
  color: #3b82f6;
}

/* ---- "More" button reuses the same look as the other items ---- */
#bottomNavMoreBtn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 2px;
  border-radius: 10px;
  color: #7c8aa8;
  font-size: 9px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
#bottomNavMoreBtn i{
  font-size: 16px;
  transition: transform .15s ease;
}
#bottomNavMoreBtn:active{
  transform: scale(.94);
}
#bottomNavMoreBtn.active{
  color: #3b82f6;
  background: rgba(59,130,246,.12);
}
@media (max-width: 380px){
  #bottomNavMoreBtn{ font-size: 8px; }
  #bottomNavMoreBtn i{ font-size: 15px; }
}
@media (max-width: 340px){
  #bottomNavMoreBtn span{ display: none; }
  #bottomNavMoreBtn i{ font-size: 20px; }
}

/* ---- "More" bottom sheet ---- */
.bottom-nav-more-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,15,.55);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  display: none;
}
.bottom-nav-more-sheet{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0b1220;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,.4);
  z-index: 1000;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.32,.72,0,1);
  display: none;
}
.bottom-nav-more-handle{
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.18);
  margin: 4px auto 12px;
}
.bottom-nav-more-title{
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
}
.bottom-nav-more-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 8px;
}
.bottom-nav-more-grid > div{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 4px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.bottom-nav-more-grid > div i{
  font-size: 19px;
  color: #3b82f6;
}
.bottom-nav-more-grid > div:active{
  transform: scale(.95);
  background: rgba(59,130,246,.14);
}

@media(max-width:768px){
  .bottom-nav-more-overlay{ display: block; }
  .bottom-nav-more-sheet{ display: block; }
}

.bottom-nav-more-overlay.open{
  opacity: 1;
  pointer-events: auto;
}
.bottom-nav-more-sheet.open{
  transform: translateY(0);
}

/* Lock background scroll while the sheet is open */
body.bottom-nav-more-lock{
  overflow: hidden;
}

/* ---- Swap button picker (Gift Card Trade vs Crypto Trade) ---- */
.bottom-nav-swap-sheet{
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.bottom-nav-swap-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bottom-nav-swap-option{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.bottom-nav-swap-option:active{
  transform: scale(.98);
  background: rgba(59,130,246,.1);
}
.bottom-nav-swap-option-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.bottom-nav-swap-option-icon--gift{
  background: rgba(168,85,247,.16);
  color: #c084fc;
}
.bottom-nav-swap-option-icon--crypto{
  background: rgba(59,130,246,.16);
  color: #3b82f6;
}
.bottom-nav-swap-option-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.bottom-nav-swap-option-text strong{
  font-size: 14px;
  font-weight: 600;
}
.bottom-nav-swap-option-text small{
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}
.bottom-nav-swap-option-chevron{
  font-size: 12px;
  color: #4b5875;
  flex-shrink: 0;
}

/* =========================================================
   WALLET BALANCE CARD + ADVERT — mobile width/padding fixes
   The desktop padding (28px) and the balance/carousel min-widths
   (220px/240px) were forcing this card wider than small screens,
   which is why it looked like it didn't "fit" — it was overflowing
   and getting clipped/squeezed instead of using the full width.

   It's also now pulled out full-bleed (edge-to-edge, no side margin)
   by cancelling out .main-content's own 18px side padding with a
   matching negative margin — the rest of the page keeps that inset,
   only this card breaks out of it.
========================================================= */
@media (max-width: 768px){
  .wallet-overview-card{
    padding: 18px;
    gap: 16px;
    width: calc(100% + 36px);
    margin-left: -18px;
    margin-right: -18px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .wallet-balance-block,
  .wallet-promo-carousel{
    min-width: 0;
    width: 100%;
  }
  .wallet-promo-carousel .slide{
    padding: 26px 22px;
  }
}