/* Branding */
.navbar-brand {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1.5rem;
 }

/* Light Mode Background */
body.light-mode {
  /* background: url("https://vectplace.com/wp-content/uploads/2024/06/VP3361-FREE-Bitcoin-SVG.webp") no-repeat center center fixed; */
  background-size: 450px;
  background-color: #f8f9fa;
  color: #212529;
}

/* Dark Mode Background */
body.dark-mode {
  /* background: url("https://th.bing.com/th/id/OIP.MzsD03cS96X3eIKh6YvC-wHaHa?pid=ImgDet&w=178&h=178&c=7&dpr=1.5") no-repeat center center fixed; */
  background-size: 450px;
  /* background-size: cover; */
  background-color: #0f2027;
  color: #e0e0e0;
}

/* Dark Mode Toggle Hover */
#darkModeToggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}


/* new dashboard starts */
.wallet-pattern {
  background: linear-gradient(135deg, #1f1c2c, #928dab);
  color: #fff;
  border: none;
}
.wallet-icon {
  color: #ffd700;
}
.btn-gradient-deposit {
  background: linear-gradient(to right, #1d976c, #93f9b9);
  color: #fff;
}
.btn-gradient-withdraw {
  background: linear-gradient(to right, #f85032, #e73827);
  color: #fff;
}
.btn-gradient-stake {
  background: linear-gradient(to right, #ff8008, #ffc837);
  color: #fff;
}
.btn-gradient-transfer {
  background: linear-gradient(to right, #4568dc, #b06ab3);
  color: #fff;
}

  .crypto-card-d {
    position: relative;
    overflow: hidden;
    font-weight: bolder;
    color: #fff;
  }

  .crypto-card-d::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: url('https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExbXZmNjl0dDFrMDBzbXJ4YTFtaDl1dWdwcGhsNWlrMzV0b3ZuNXNiNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/LukAHGCMfxMbK/giphy.gif') no-repeat center center; */
    background-size: cover;
    opacity: 0.2; /* Lower opacity for the GIF background */
    z-index: 0;
  }

  .crypto-card-d .card-body-d,
  .crypto-card-d .crypto-logo-d,
  .crypto-card-d .card-icon-d,
  .crypto-card-d .crypto-label-d,
  .crypto-card-d .crypto-value-d {
    position: relative;
    z-index: 1;
  }

  .crypto-card-d .form-select {
    position: relative;
    z-index: 1;
  }

  .crypto-card {
        position: relative;
        border: none;
        color: #fff;
        padding: 20px;
        border-radius: 18px;
        overflow: hidden;
        background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(6px);
        transition: 0.3s ease-in-out;
      }

      .crypto-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
      }

      .crypto-chip {
      width: 60px;
      height: 60px;
      background: url('https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExbXZmNjl0dDFrMDBzbXJ4YTFtaDl1dWdwcGhsNWlrMzV0b3ZuNXNiNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/LukAHGCMfxMbK/giphy.gif') no-repeat center center;
      background-size: contain;
      border-radius: 100%;
      position: absolute;
      top: 20px;
      left: 20px;
      box-shadow: inset 0 0 3px #c9aa00;
    }

      .crypto-logo {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.4);
      }

      .crypto-label {
        margin-top: 60px;
        font-size: 0.9rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: bolder;
        /* opacity: 0.8; */
      }

      .crypto-value {
        font-size: 1.6rem;
        font-weight: bold;
      }

      .card-icon {
        font-size: 2.5rem;
        margin-top: 15px;
        opacity: 0.85;
      }

      code{color:rgb(5, 5, 5);}

/* new dashboard ends */

/* Uniform Button Gradient Styles */
.btn-gradient-deposit,
.btn-gradient-withdraw,
.btn-gradient-stake,
.btn-gradient-transfer {
  background: linear-gradient(135deg, #1e1e2f, #252525, #554f01);
  color: #fff;
  border: none;
}

.btn-gradient-deposit:hover,
.btn-gradient-withdraw:hover,
.btn-gradient-stake:hover,
.btn-gradient-transfer:hover {
  opacity: 0.9;
  color: #e0e0e0;
}

/* Wallet Cards */
.wallet-pattern {
  background: linear-gradient(135deg, #1f1f1f, #2c2c2c);
  border: none;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* .wallet-pattern::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 10%, transparent 70%);
  animation: floatPattern 10s linear infinite;
} */

.wallet-pattern::before {
  pointer-events: none;
}


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

.wallet-icon {
  color: #FFD700 !important; /* Gold */
  opacity: 0.8;
}

.wallet-balance,
.wallet-stake,
.wallet-referral {
  font-size: 1.25rem;
  font-weight: bold;
}

/* BTC icon positioning */
.btc-card-front .bi-currency-bitcoin {
  opacity: 0.2;
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 2.5rem;
}

/* Wallet Input Glass Effect */
.wallet-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #fff;
  font-family: 'Courier New', monospace;
  padding: 0.75rem;
  transition: border-color 0.3s ease;
}

.wallet-glass::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.wallet-glass:focus {
  outline: none;
  border-color: #ffc107;
  background: rgba(255, 255, 255, 0.1);
}

/* Countdown Glow Animation */
.glow {
  animation: glowPulse 2s infinite ease-in-out;
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 0px rgba(255, 193, 7, 0.4);
  }
  50% {
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.8);
  }
  100% {
    box-shadow: 0 0 0px rgba(255, 193, 7, 0.4);
  }
}

/* toast */
.toast {
  animation: fadeInScale 0.6s ease;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.rounded-circle-initial {
  width: 40px;
  height: 40px;
  background: #007bff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.list-group-item:hover {
  background-color: #343a40;
  color: #ffc107;
}
.list-group-item.active {
  background-color: #212529;
  color: #ffc107;
  font-weight: bold;
}


      .crypto-card {
        position: relative;
        border: none;
        color: #fff;
        padding: 20px;
        border-radius: 18px;
        overflow: hidden;
        background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(6px);
        transition: 0.3s ease-in-out;
      }

      .crypto-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
      }

      /* .crypto-chip {
      width: 45px;
      height: 32px;
      background: #ffd700;
      border-radius: 6px;
      position: absolute;
      top: 20px;
      left: 20px;
      box-shadow: inset 0 0 3px #c9aa00;
    } */

      .crypto-logo {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.4);
      }

      .crypto-label {
        margin-top: 60px;
        font-size: 0.9rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        opacity: 0.8;
      }

      .crypto-value {
        font-size: 1.6rem;
        font-weight: bold;
      }

      .card-icon {
        font-size: 2.5rem;
        margin-top: 15px;
        opacity: 0.85;
      }

      /* code{color:rgb(5, 5, 5); text-shadow: 2px 2px 4px rgb(252, 253, 253);} */

/* language */
      .lang-dropdown-container {
  position: relative;
  display: inline-block;
  z-index: 2000;
}

.lang-btn {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #ccc;
  background: rgb(244, 220, 220);
  cursor: pointer;
  border-radius: 5px;
  gap: 10px;
  width: 150px;

}

.lang-btn .flag-icon {
  width: 24px;
  height: 16px;
  background-size: cover;
}

.arrow-down {
  margin-left: auto;
  border: solid #333;
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg);
}

.lang-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgb(244, 220, 220);
  border: 1px solid #ccc;
  width: 150px;
  color: #333;
  border-radius: 5px;
}

.lang-menu li {
  padding: 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.lang-menu li:hover {
  /* background: #f2abab; */
  color: #adb5bd;
}

.lang-menu .flag-icon {
  width: 24px;
  height: 16px;
  background-size: cover;
  margin-right: 10px;
}

/* Flag backgrounds */
.flag-us { background-image: url('../flags/us.jpg'); }
.flag-fr { background-image: url('../flags/fr.jpg'); }
.flag-es { background-image: url('../flags/es.jpg'); }
.flag-ar { background-image: url('../flags/ar.jpg'); }
.flag-ru { background-image: url('../flags/ru.jpg'); }
.flag-ua { background-image: url('../flags/ukr.jpg'); }
.flag-cn { background-image: url('../flags/cn.jpg'); }
.flag-kr { background-image: url('../flags/ko.jpg'); }



/* Footer */
footer {
  font-size: 0.9rem;
  width: 100%;
  position: fixed !important;
  bottom: 0 !important;
}

/* Card Hover Effect */
.card {
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card:hover {
  transform: rotateY(10deg);
}

#darkModeToggle {
    position: fixed;
  }

  /* Default: bottom-right (for medium to large screens) */
  @media (min-width: 768px) {
    #darkModeToggle {
      bottom: 1rem;
      right: 1rem;
    }
  }

  /* Mobile: top-right (for small screens) */
  @media (max-width: 767.98px) {
    #darkModeToggle {
      top: 0.75rem;
      right: 0.75rem;
    }
  }

/* Mobile Responsive */
@media (max-width: 576px) {
  .card {
    transform: none !important;
    margin-bottom: 1.5rem;
  }

  /* em.dark-mode{color: #fff !important; }
em.light-mode{color: #000 !important;} */

  .wallet-pattern,
  .wallet-glass {
    font-size: 0.9rem;
    padding: 0.6rem;
  }

  .btn {
    width: 100%;
  }

  .card-title {
    font-size: 1.1rem;
  }

  .m-btn-dnone{display: none;}
}