/* WGCryptoIcons CSS — Modern Vector Icon System for Cryptocurrencies & Networks */

.wg-crypto-icon-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  vertical-align: middle !important;
}
.wg-crypto-icon-box svg,
.wg-crypto-icon-box img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Base Quick Crypto Chip Buttons */
.wg-crypto-chip-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.16), rgba(80, 0, 16, 0.32)) !important;
  border: 1.5px solid rgba(255, 0, 51, 0.5) !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 10px rgba(255, 0, 51, 0.2) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin: 3px !important;
  text-decoration: none !important;
}
.wg-crypto-chip-btn:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5) !important;
}
.wg-crypto-chip-btn span:last-child {
  font-weight: 850 !important;
  letter-spacing: 0.03em !important;
}

/* ==========================================================================
   VIBRANT BRAND COLORS FOR TOP CRYPTOCURRENCIES (USDT, BTC, ETH, BNB, SOL, TRX)
   ========================================================================== */

/* 1. USDT (Tether) — Vibrant Emerald Teal */
.wg-crypto-chip-btn[data-coin="USDT"],
.wg-crypto-chip-btn.wg-coin-usdt,
.wg-coin-chip-usdt {
  background: linear-gradient(135deg, rgba(38, 161, 123, 0.26), rgba(12, 64, 48, 0.48)) !important;
  border: 1.5px solid #26a17b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(38, 161, 123, 0.35) !important;
}
.wg-crypto-chip-btn[data-coin="USDT"]:hover,
.wg-crypto-chip-btn.wg-coin-usdt:hover,
.wg-coin-chip-usdt:hover {
  background: linear-gradient(135deg, rgba(38, 161, 123, 0.48), rgba(18, 92, 69, 0.65)) !important;
  border-color: #38d9a9 !important;
  box-shadow: 0 0 24px rgba(38, 161, 123, 0.75) !important;
  transform: translateY(-2px) scale(1.06) !important;
}
.wg-crypto-chip-btn[data-coin="USDT"].active,
.wg-crypto-chip-btn.wg-coin-usdt.active,
.wg-coin-chip-usdt.active {
  background: linear-gradient(135deg, #26a17b, #155e46) !important;
  border-color: #5eedc4 !important;
  box-shadow: 0 0 28px rgba(38, 161, 123, 0.9), 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
}
.wg-crypto-chip-btn[data-coin="USDT"] span:last-child,
.wg-coin-chip-usdt span:last-child {
  color: #7ee7c9 !important;
}
.wg-crypto-chip-btn[data-coin="USDT"].active span:last-child,
.wg-coin-chip-usdt.active span:last-child {
  color: #ffffff !important;
}

/* 2. BTC (Bitcoin) — Vibrant Bitcoin Gold / Orange */
.wg-crypto-chip-btn[data-coin="BTC"],
.wg-crypto-chip-btn.wg-coin-btc,
.wg-coin-chip-btc {
  background: linear-gradient(135deg, rgba(247, 147, 26, 0.26), rgba(110, 62, 5, 0.48)) !important;
  border: 1.5px solid #f7931a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(247, 147, 26, 0.35) !important;
}
.wg-crypto-chip-btn[data-coin="BTC"]:hover,
.wg-crypto-chip-btn.wg-coin-btc:hover,
.wg-coin-chip-btc:hover {
  background: linear-gradient(135deg, rgba(247, 147, 26, 0.48), rgba(150, 85, 8, 0.65)) !important;
  border-color: #ffa940 !important;
  box-shadow: 0 0 24px rgba(247, 147, 26, 0.75) !important;
  transform: translateY(-2px) scale(1.06) !important;
}
.wg-crypto-chip-btn[data-coin="BTC"].active,
.wg-crypto-chip-btn.wg-coin-btc.active,
.wg-coin-chip-btc.active {
  background: linear-gradient(135deg, #f7931a, #bd6d09) !important;
  border-color: #ffd591 !important;
  box-shadow: 0 0 28px rgba(247, 147, 26, 0.9), 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
}
.wg-crypto-chip-btn[data-coin="BTC"] span:last-child,
.wg-coin-chip-btc span:last-child {
  color: #ffc078 !important;
}
.wg-crypto-chip-btn[data-coin="BTC"].active span:last-child,
.wg-coin-chip-btc.active span:last-child {
  color: #ffffff !important;
}

/* 3. ETH (Ethereum) — Radiant Indigo / Royal Blue */
.wg-crypto-chip-btn[data-coin="ETH"],
.wg-crypto-chip-btn.wg-coin-eth,
.wg-coin-chip-eth {
  background: linear-gradient(135deg, rgba(98, 126, 234, 0.26), rgba(35, 48, 115, 0.48)) !important;
  border: 1.5px solid #627eea !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(98, 126, 234, 0.35) !important;
}
.wg-crypto-chip-btn[data-coin="ETH"]:hover,
.wg-crypto-chip-btn.wg-coin-eth:hover,
.wg-coin-chip-eth:hover {
  background: linear-gradient(135deg, rgba(98, 126, 234, 0.48), rgba(50, 70, 160, 0.65)) !important;
  border-color: #8fa6ff !important;
  box-shadow: 0 0 24px rgba(98, 126, 234, 0.75) !important;
  transform: translateY(-2px) scale(1.06) !important;
}
.wg-crypto-chip-btn[data-coin="ETH"].active,
.wg-crypto-chip-btn.wg-coin-eth.active,
.wg-coin-chip-eth.active {
  background: linear-gradient(135deg, #627eea, #3b50aa) !important;
  border-color: #d6e4ff !important;
  box-shadow: 0 0 28px rgba(98, 126, 234, 0.9), 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
}
.wg-crypto-chip-btn[data-coin="ETH"] span:last-child,
.wg-coin-chip-eth span:last-child {
  color: #b5c4fe !important;
}
.wg-crypto-chip-btn[data-coin="ETH"].active span:last-child,
.wg-coin-chip-eth.active span:last-child {
  color: #ffffff !important;
}

/* 4. BNB (Binance Coin) — Brilliant Binance Gold / Yellow */
.wg-crypto-chip-btn[data-coin="BNB"],
.wg-crypto-chip-btn.wg-coin-bnb,
.wg-coin-chip-bnb {
  background: linear-gradient(135deg, rgba(243, 186, 47, 0.26), rgba(115, 86, 12, 0.48)) !important;
  border: 1.5px solid #f3ba2f !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(243, 186, 47, 0.35) !important;
}
.wg-crypto-chip-btn[data-coin="BNB"]:hover,
.wg-crypto-chip-btn.wg-coin-bnb:hover,
.wg-coin-chip-bnb:hover {
  background: linear-gradient(135deg, rgba(243, 186, 47, 0.48), rgba(160, 120, 16, 0.65)) !important;
  border-color: #ffd666 !important;
  box-shadow: 0 0 24px rgba(243, 186, 47, 0.75) !important;
  transform: translateY(-2px) scale(1.06) !important;
}
.wg-crypto-chip-btn[data-coin="BNB"].active,
.wg-crypto-chip-btn.wg-coin-bnb.active,
.wg-coin-chip-bnb.active {
  background: linear-gradient(135deg, #f3ba2f, #b88612) !important;
  border-color: #fff1b8 !important;
  box-shadow: 0 0 28px rgba(243, 186, 47, 0.9), 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
}
.wg-crypto-chip-btn[data-coin="BNB"] span:last-child,
.wg-coin-chip-bnb span:last-child {
  color: #ffe58f !important;
}
.wg-crypto-chip-btn[data-coin="BNB"].active span:last-child,
.wg-coin-chip-bnb.active span:last-child {
  color: #ffffff !important;
}

/* 5. SOL (Solana) — Vibrant Cyber Purple & Spring Green Gradient */
.wg-crypto-chip-btn[data-coin="SOL"],
.wg-crypto-chip-btn.wg-coin-sol,
.wg-coin-chip-sol {
  background: linear-gradient(135deg, rgba(153, 69, 255, 0.32), rgba(20, 241, 149, 0.28)) !important;
  border: 1.5px solid #14f195 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 18px rgba(20, 241, 149, 0.4) !important;
}
.wg-crypto-chip-btn[data-coin="SOL"]:hover,
.wg-crypto-chip-btn.wg-coin-sol:hover,
.wg-coin-chip-sol:hover {
  background: linear-gradient(135deg, rgba(153, 69, 255, 0.52), rgba(20, 241, 149, 0.45)) !important;
  border-color: #69fec0 !important;
  box-shadow: 0 0 26px rgba(20, 241, 149, 0.8) !important;
  transform: translateY(-2px) scale(1.06) !important;
}
.wg-crypto-chip-btn[data-coin="SOL"].active,
.wg-crypto-chip-btn.wg-coin-sol.active,
.wg-coin-chip-sol.active {
  background: linear-gradient(135deg, #9945ff, #14f195) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 30px rgba(20, 241, 149, 0.95), 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
}
.wg-crypto-chip-btn[data-coin="SOL"] span:last-child,
.wg-coin-chip-sol span:last-child {
  color: #80ffd6 !important;
}
.wg-crypto-chip-btn[data-coin="SOL"].active span:last-child,
.wg-coin-chip-sol.active span:last-child {
  color: #ffffff !important;
}

/* 6. TRX (TRON) — Radiant TRON Flame Crimson / Red */
.wg-crypto-chip-btn[data-coin="TRX"],
.wg-crypto-chip-btn.wg-coin-trx,
.wg-coin-chip-trx {
  background: linear-gradient(135deg, rgba(239, 0, 39, 0.26), rgba(110, 0, 16, 0.48)) !important;
  border: 1.5px solid #ef0027 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(239, 0, 39, 0.35) !important;
}
.wg-crypto-chip-btn[data-coin="TRX"]:hover,
.wg-crypto-chip-btn.wg-coin-trx:hover,
.wg-coin-chip-trx:hover {
  background: linear-gradient(135deg, rgba(239, 0, 39, 0.48), rgba(160, 0, 26, 0.65)) !important;
  border-color: #ff4d6a !important;
  box-shadow: 0 0 24px rgba(239, 0, 39, 0.75) !important;
  transform: translateY(-2px) scale(1.06) !important;
}
.wg-crypto-chip-btn[data-coin="TRX"].active,
.wg-crypto-chip-btn.wg-coin-trx.active,
.wg-coin-chip-trx.active {
  background: linear-gradient(135deg, #ef0027, #a8001a) !important;
  border-color: #ff7875 !important;
  box-shadow: 0 0 28px rgba(239, 0, 39, 0.9), 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
}
.wg-crypto-chip-btn[data-coin="TRX"] span:last-child,
.wg-coin-chip-trx span:last-child {
  color: #ff9ca8 !important;
}
.wg-crypto-chip-btn[data-coin="TRX"].active span:last-child,
.wg-coin-chip-trx.active span:last-child {
  color: #ffffff !important;
}

/* Crypto Badge Pill */
.wg-crypto-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.18), rgba(46, 6, 16, 0.85)) !important;
  border: 1.5px solid rgba(255, 0, 51, 0.5) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 0, 51, 0.2) inset !important;
}
.wg-crypto-badge-pill[data-coin="USDT"] { border-color: #26a17b !important; box-shadow: 0 0 16px rgba(38,161,123,0.3) !important; }
.wg-crypto-badge-pill[data-coin="BTC"]  { border-color: #f7931a !important; box-shadow: 0 0 16px rgba(247,147,26,0.3) !important; }
.wg-crypto-badge-pill[data-coin="ETH"]  { border-color: #627eea !important; box-shadow: 0 0 16px rgba(98,126,234,0.3) !important; }
.wg-crypto-badge-pill[data-coin="BNB"]  { border-color: #f3ba2f !important; box-shadow: 0 0 16px rgba(243,186,47,0.3) !important; }
.wg-crypto-badge-pill[data-coin="SOL"]  { border-color: #14f195 !important; box-shadow: 0 0 16px rgba(20,241,149,0.3) !important; }
.wg-crypto-badge-pill[data-coin="TRX"]  { border-color: #ef0027 !important; box-shadow: 0 0 16px rgba(239,0,39,0.3) !important; }

.wg-crypto-badge-pill b {
  color: #ffffff !important;
}
.wg-crypto-badge-pill span {
  color: #ffb3bf !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

/* Network Badge Pill */
.wg-net-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.22), rgba(120, 0, 24, 0.4)) !important;
  border: 1.5px solid rgba(255, 0, 51, 0.55) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 0, 51, 0.3) !important;
}
.wg-net-pill svg {
  width: 16px !important;
  height: 16px !important;
}

/* Quick Chips Container */
#wgCryptoQuickChips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* Rich Crimson Buttons for Payment Pages */
.wg-btn.wg-btn-primary,
.wg-binance-create-btn,
button#wgBinanceCreateBtn {
  background: linear-gradient(135deg, #ff0033, #b80024) !important;
  border: 1.5px solid #ff3355 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(255, 0, 51, 0.65), 0 0 25px rgba(255, 0, 51, 0.4) !important;
  font-weight: 800 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.wg-btn.wg-btn-primary:hover,
.wg-binance-create-btn:hover,
button#wgBinanceCreateBtn:hover {
  background: linear-gradient(135deg, #ff1a47, #d4002b) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 30px rgba(255, 0, 51, 0.85), 0 0 35px rgba(255, 0, 51, 0.6) !important;
}

.wg-bp-copy,
.btn-copy-address {
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.22), rgba(120, 0, 24, 0.38)) !important;
  border: 1.5px solid rgba(255, 0, 51, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.wg-bp-copy:hover,
.btn-copy-address:hover {
  background: linear-gradient(135deg, #ff0033, #a80022) !important;
  border-color: #ff3355 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(255, 0, 51, 0.6) !important;
}