@charset "UTF-8";

/**
 * Recharge / Deposit page design override
 * Matches reference: dark theme, orange accents, red/grey for unselected
 * Note: Uses :has() - supported in Chrome 105+, Safari 15.4+, Firefox 121+
 * For older browsers, add data-recharge="1" to #app in Vue when on recharge route
 */

/* Apply orange theme when recharge content is present */
#app:has(.Recharge__container-tabcard),
#app:has(.Recharge__box),
#app:has(.Recharge__content),
#app:has(.Recharge__content-quickInfo),
#app:has(.Recharge__content-paymoney) {
  --main-color: #ff6b00 !important;
  --main-gradient-start: #ff8c42 !important;
  --main-gradient-end: #e55a00 !important;
  --main_gradient-color: linear-gradient(180deg, #ff8c42, #e55a00) !important;
  --main_gradient-color2: linear-gradient(90deg, #ff8c42, #e55a00) !important;
  --bg_color_L2: #1a1a1a !important;
  --bg_color_L3: #252525 !important;
  --button_dis_color: linear-gradient(180deg, #3a3a3a, #2a2a2a) !important;
}

/* Payment method cards (Nagad, Bkash, USDT) - REFERENCE: dark bg, ORANGE BORDER when selected (not fill) */
#app .Recharge__container-tabcard__items {
  background: #1e1e1e !important;
  border: 0.04rem solid #333 !important;
  border-radius: 0.24rem !important;
}

#app .Recharge__container-tabcard__items.active {
  background: #1e1e1e !important;
  border: 0.08rem solid #ff6b00 !important;
  box-shadow: 0 0 0 0.03rem rgba(255, 107, 0, 0.3) !important;
}

/* Select channel (BJPay) - match Deposit Channel style: compact, orange border when selected */
#app .Recharge__content-quickInfo {
  overflow-x: hidden !important;
}

#app .Recharge__content-quickInfo .rechargeTypes_list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.2rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#app .Recharge__content-quickInfo__item {
  background: #1e1e1e !important;
  border: 0.05rem solid transparent !important;
  border-radius: 0.2rem !important;
  min-height: 0.95rem !important;
  min-width: 0 !important;
  padding: 0.18rem 0.2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.06rem !important;
  text-align: center !important;
  color: #ccc !important;
}

#app .Recharge__content-quickInfo .item_active {
  background: #252525 !important;
  border: 0.08rem solid #ff6b00 !important;
  color: #ff6b00 !important;
  position: relative !important;
  box-shadow: 0 0 0 0.02rem rgba(255, 107, 0, 0.2) !important;
}

#app .Recharge__content-quickInfo .item_active::after {
  content: '✓' !important;
  position: absolute !important;
  right: 0.16rem !important;
  bottom: 0.16rem !important;
  font-size: 0.28rem !important;
  color: #ff6b00 !important;
  font-weight: 700 !important;
}

#app .Recharge__content-quickInfo__item .other .bouns,
#app .Recharge__content-quickInfo__item .name,
#app .Recharge__content-quickInfo .item_active .other .bouns,
#app .Recharge__content-quickInfo .item_active .name {
  font-size: 0.28rem !important;
}

#app .Recharge__content-quickInfo__item .name,
#app .Recharge__content-quickInfo__item .other .bouns {
  color: #ccc !important;
}

#app .Recharge__content-quickInfo .item_active .name,
#app .Recharge__content-quickInfo .item_active .other .bouns {
  color: #ff6b00 !important;
}

/* Phone: small compact rectangles, 2 cols to prevent overflow */
@media screen and (max-width: 500px) {
  #app .Recharge__content-quickInfo .rechargeTypes_list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.15rem !important;
  }

  #app .Recharge__content-quickInfo__item {
    min-height: 0.75rem !important;
    padding: 0.12rem 0.16rem !important;
    gap: 0.03rem !important;
    border-radius: 0.16rem !important;
  }

  #app .Recharge__content-quickInfo__item .other .bouns,
  #app .Recharge__content-quickInfo__item .name,
  #app .Recharge__content-quickInfo .item_active .other .bouns,
  #app .Recharge__content-quickInfo .item_active .name {
    font-size: 0.24rem !important;
    line-height: 1.2 !important;
  }

  #app .Recharge__content-quickInfo .item_active::after {
    right: 0.1rem !important;
    bottom: 0.1rem !important;
    font-size: 0.22rem !important;
  }

  /* Deposit channel - compact on phone */
  #app .Recharge__content .transfer .transfer_list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.2rem !important;
  }

  #app .Recharge__content .transfer .transfer_list .item {
    min-height: 1rem !important;
    padding: 0.24rem 0.2rem !important;
    border-radius: 0.2rem !important;
  }

  #app .Recharge__content .transfer .transfer_list .transfer_active::after {
    font-size: 0.26rem !important;
    right: 0.1rem !important;
    bottom: 0.1rem !important;
  }
}

/* Amount buttons - unselected dark grey, selected orange */
#app .Recharge__content-paymoney__money-list__item,
#app .Recharge__box .Recharge__container-paymoney__money-list__item {
  background: #1e1e1e !important;
  border: 0.026rem solid #3a3a3a !important;
  color: #fff !important;
}

#app .Recharge__content-paymoney__money-list__item.active,
#app .Recharge__content-paymoney__money-list__item.arActive,
#app .Recharge__box .Recharge__container-paymoney__money-list__item.active {
  background: linear-gradient(180deg, #ff8c42, #e55a00) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Section titles - orange left accent bar */
#app .Recharge__content-paymoney__title,
#app .Recharge__content-quickInfo__title .title,
#app .select_bank_tit,
#app .Recharge__content .transfer .title {
  border-left: 0.08rem solid #ff6b00 !important;
  padding-left: 0.32rem !important;
  margin-left: 0 !important;
}

/* Deposit Channel - REFERENCE: square buttons, orange border when selected */
#app .Recharge__content .transfer .transfer_list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.32rem !important;
}

#app .Recharge__content .transfer .transfer_list .item {
  background: #1e1e1e !important;
  color: #fff !important;
  border: 0.05rem solid transparent !important;
  border-radius: 0.24rem !important;
  min-height: 1.6rem !important;
  padding: 0.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#app .Recharge__content .transfer .transfer_list .transfer_active {
  background: #252525 !important;
  border: 0.08rem solid #ff6b00 !important;
  color: #ff6b00 !important;
  box-shadow: 0 0 0 0.02rem rgba(255, 107, 0, 0.2) !important;
  position: relative !important;
}

#app .Recharge__content .transfer .transfer_list .transfer_active::after {
  content: '✓' !important;
  position: absolute !important;
  right: 0.16rem !important;
  bottom: 0.16rem !important;
  font-size: 0.32rem !important;
  color: #ff6b00 !important;
  font-weight: 700 !important;
}

#app .Recharge__content .transfer .transfer_list .transfer_active img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(95%) saturate(1500%) hue-rotate(10deg);
}

/* Box/card backgrounds - dark grey */
#app .boxStyle,
#app .Recharge__content-paymoney,
#app .Recharge__box .Recharge__container-paymoney {
  background: #1a1a1a !important;
}

/* Primary Deposit button - large solid orange */
#app .Recharge__container-rechageBtn.rechage_active,
#app .Recharge__box .rechage_active,
#app [class*="Recharge__"] .rechage_active {
  background: linear-gradient(180deg, #ff8c42, #e55a00) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 0.5rem !important;
  min-height: 1.2rem !important;
  line-height: 1.2rem !important;
}

/* Fixed bottom bar - dark, orange deposit button */
#app .Recharge__content-fixed-box {
  background: #141414 !important;
  border-top: 0.026rem solid #333 !important;
}

#app .Recharge__content-fixed-box .button,
#app .Recharge__content-fixed-box [class*="rechage"] {
  background: linear-gradient(180deg, #ff8c42, #e55a00) !important;
  color: #fff !important;
  border-radius: 0.4rem !important;
}

/* Info/tip section - light orange/amber background */
#app .Recharge__container-intro {
  background: rgba(255, 140, 66, 0.12) !important;
  border: 0.013rem solid rgba(255, 107, 0, 0.25) !important;
  border-radius: 0.27rem !important;
}

#app .Recharge__container-intro__title {
  color: #ff6b00 !important;
}

/* Bank list items */
#app .bank_list .bank_item {
  background: #1e1e1e !important;
}

#app .bank_list .bank_item_active {
  background: linear-gradient(180deg, #ff8c42, #e55a00) !important;
}

/* Money input - orange accent */
#app .Recharge__content-paymoney__money-input .place-div,
#app .Recharge__content-paymoney__money-input .inp,
#app .Recharge__content-paymoney__money-input input {
  color: #ff6b00 !important;
}

#app .Recharge__content-paymoney__money-input {
  background: #252525 !important;
  border-radius: 0.4rem !important;
}

/* New UPI cards */
#app .new_upi {
  background: #1e1e1e !important;
}

#app .new_upi.upi_active {
  background: linear-gradient(180deg, #ff8c42, #e55a00) !important;
  border: 0.08rem solid rgba(255, 107, 0, 0.3) !important;
}

/* Balance card - light teal tint per reference */
#app .balanceAssets,
#app .Recharge__container-balanceAssets {
  background: linear-gradient(135deg, rgba(0, 180, 160, 0.15), rgba(0, 120, 140, 0.12)) !important;
  border: 0.013rem solid rgba(0, 180, 160, 0.2) !important;
}

/* Deposit/Withdrawal tabs - orange active */
#app .van-tabs__line {
  background-color: #ff6b00 !important;
}

#app .van-tab--active {
  color: #ff6b00 !important;
  font-weight: 600 !important;
}

/* RecycleBtn (Deposit/Withdraw toggle) */
#app .recycleBtnD button.active,
#app .wallet-container .recycleBtnD button.active {
  background: linear-gradient(180deg, #ff8c42, #e55a00) !important;
}

/* OtherPay page */
#app .other_pay .pay_btn .finish {
  background: linear-gradient(180deg, #ff8c42, #e55a00) !important;
}

#app .other_pay .pay_btn .cancel_order {
  border-color: #ff6b00 !important;
  color: #ff6b00 !important;
}