.balsec {
    padding: 20px;
    margin-top: 10px;
    border-radius: 10px;

    /* Background */
    background: #00000040;
    background-image: url(../images/bg/referral-pattern-bg.png);
    
}

.action-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
     /* dark background */
    

}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.action-btn .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #00000040; /* default gray */
    font-size: 20px;
    color: white;
    margin-bottom: 6px;
}

.action-btn p {
    margin: 0;
    font-size: 13px;
    color: white;
}

/* Special style for Top Up */
.action-btn.topup .icon {
    background-color: #FFD700; /* yellow */
    color: black;
    font-size: 24px;
    font-weight: bold;
}

.action-btn .icon:hover {
    background-color: #FFD700; /* yellow */
    color: black;
    font-size: 24px;
    font-weight: bold;
}

.wallet-btn {
    display: flex;
    align-items: center;
    justify-content: center; /* centers content horizontally */
    gap: 10px; /* spacing between icon and text */
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: linear-gradient(90deg, #1e1e90, #b13f8d);
    transition: transform 0.2s ease, opacity 0.2s ease;
    width: 100%; /* optional: make it stretch full width */
    margin: 0 auto; /* center the button itself */
}

/* Icon styling */
.wallet-btn i {
    font-size: 16px;
}

/* Hover effect */
.wallet-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.card {
    display: flex;
    align-items: center;
    justify-content: center; /* centers content horizontally */
    gap: 10px; /* spacing between icon and text */
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #C9D1FF;
    transition: transform 0.2s ease, opacity 0.2s ease;
    width: 100%; /* optional: make it stretch full width */
   
    margin: 0 auto; /* center the button itself */
}

/* Icon styling */
.card i {
    font-size: 16px;
}

/* Hover effect */
.card:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.chart {
    display: flex;
    align-items: right;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: linear-gradient(90deg, #1e1e90, #b13f8d);
    transition: transform 0.2s ease, opacity 0.2s ease;
    
    margin: 0 auto; /* center the button itself */
}


.chart:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.coin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2d3748;
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 8px;
  }
  .coin-left {
    display: flex;
    align-items: center;
  }
  .coin-left img {
    width: 32px;
    height: 32px;
    margin-right: 12px;
  }
  .coin-info {
    display: flex;
    flex-direction: column;
  }
  .coin-name {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .badge {
    background-color: #4a5568;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
  }
  .coin-price {
    font-size: 14px;
    color: #cbd5e0;
  }
  .positive {
    color: #48bb78;
  }
  .negative {
    color: #f56565;
  }
  .coin-right {
    text-align: right;
  }
  .balance {
    font-size: 14px;
  }
  .usd {
    font-size: 12px;
    color: #a0aec0;
  }