/*
 * Baize payment modal skin.
 * Only restyles Zibll-generated payment markup; order, VIP products, payment
 * methods, coupons, balance, card-pass and AJAX behaviour remain owned by Zibll.
 */

body:not(.dark-theme) #modal_pay_uservip,
body:not(.dark-theme) #refresh_modal,
body:not(.dark-theme) #zibpay_modal {
  --baize-pay-blue: #2f6df6;
  --baize-pay-blue-2: #37b6f2;
  --baize-pay-ink: #0e2442;
  --baize-pay-text: #315070;
  --baize-pay-muted: #7387a3;
  --baize-pay-line: #cfe0f6;
  --baize-pay-soft: #f5f9ff;
}

body:not(.dark-theme) #modal_pay_uservip .modal-dialog {
  width: min(808px, calc(100vw - 32px)) !important;
  max-width: 808px !important;
  margin: 28px auto !important;
}

body:not(.dark-theme) #modal_pay_uservip .modal-content {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 28px 72px rgba(27, 73, 130, 0.2) !important;
}

body:not(.dark-theme) #modal_pay_uservip .payvip-modal {
  display: grid !important;
  gap: 24px !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  padding: 28px !important;
  color: var(--baize-pay-ink) !important;
  background:
    radial-gradient(circle at 88% 0, rgba(102, 207, 255, 0.22), transparent 34%),
    linear-gradient(180deg, #f8fbff 0, #fff 44%) !important;
}

body:not(.dark-theme) #modal_pay_uservip .payvip-modal > .close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #7f96b4 !important;
  opacity: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(179, 201, 230, 0.72) !important;
}

body:not(.dark-theme) #modal_pay_uservip .user-box {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 52px !important;
  margin: 0 48px 0 0 !important;
  padding: 0 !important;
}

body:not(.dark-theme) #modal_pay_uservip .user-box li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.dark-theme) #modal_pay_uservip .user-box > li + li {
  width: auto !important;
  min-width: 0 !important;
}

body:not(.dark-theme) #modal_pay_uservip .user-box .avatar-img {
  width: 52px !important;
  height: 52px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #eaf2ff !important;
  box-shadow: 0 12px 28px rgba(47, 109, 246, 0.16) !important;
}

body:not(.dark-theme) #modal_pay_uservip .user-box b {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--baize-pay-ink) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

body:not(.dark-theme) #modal_pay_uservip .user-box .c-red,
body:not(.dark-theme) #modal_pay_uservip .user-box .em09 {
  margin-top: 2px !important;
  color: #1463e8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-cardminis {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-cardminis > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-cardminis > li:only-child {
  grid-column: 1 / -1 !important;
  max-width: 368px !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-cardminis > li > a {
  display: block !important;
  height: 118px !important;
  overflow: hidden !important;
  border: 1px solid rgba(205, 222, 245, 0.9) !important;
  border-radius: 20px !important;
  background: #e9f3ff !important;
  color: var(--baize-pay-ink) !important;
  box-shadow: none !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-cardminis > li.active > a {
  border-color: var(--baize-pay-blue) !important;
  background: #dcedff !important;
  box-shadow: 0 16px 32px rgba(47, 109, 246, 0.14) !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-cardminis .vip-cardmini,
body:not(.dark-theme) #modal_pay_uservip .vip-cardminis .vip-card {
  height: 100% !important;
  min-height: 0 !important;
  padding: 20px !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-cardminis .vip-name {
  color: var(--baize-pay-ink) !important;
  font-size: 24px !important;
  font-weight: 950 !important;
}

body:not(.dark-theme) #modal_pay_uservip .active-icon {
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--baize-pay-blue) !important;
  box-shadow: 0 8px 16px rgba(47, 109, 246, 0.16) !important;
}

body:not(.dark-theme) #modal_pay_uservip .tab-content {
  margin: 0 !important;
  overflow: visible !important;
}

body:not(.dark-theme) #modal_pay_uservip .tab-pane,
body:not(.dark-theme) #modal_pay_uservip .tab-pane.active,
body:not(.dark-theme) #modal_pay_uservip .tab-pane.active.in {
  width: 100% !important;
  overflow: visible !important;
}

body:not(.dark-theme) #modal_pay_uservip form > .row {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr) !important;
  gap: 22px !important;
  margin: 0 !important;
  align-items: stretch !important;
}

body:not(.dark-theme) #modal_pay_uservip form > .row::before,
body:not(.dark-theme) #modal_pay_uservip form > .row::after,
body:not(.dark-theme) #modal_pay_uservip .tab-content .row::before,
body:not(.dark-theme) #modal_pay_uservip .tab-content .row::after {
  display: none !important;
  content: none !important;
}

body:not(.dark-theme) #modal_pay_uservip form > .row > [class*="col-sm-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

body:not(.dark-theme) #modal_pay_uservip form > .row > .col-sm-5,
body:not(.dark-theme) #modal_pay_uservip .tab-content .row > .col-sm-5 {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body:not(.dark-theme) #modal_pay_uservip form > .row > .col-sm-7,
body:not(.dark-theme) #modal_pay_uservip .tab-content .row > .col-sm-7 {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body:not(.dark-theme) #modal_pay_uservip .theme-box {
  display: flex !important;
  flex-direction: column !important;
  min-height: 520px !important;
  margin: 0 !important;
  padding: 28px 22px !important;
  border: 1px solid var(--baize-pay-line) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 188, 91, 0.18), transparent 34%),
    linear-gradient(180deg, #fffdfa 0, #fff 100%) !important;
  box-shadow: none !important;
}

body:not(.dark-theme) #modal_pay_uservip .payvip_icon {
  margin: 0 !important;
  color: #ff7b3d !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

body:not(.dark-theme) #modal_pay_uservip .payvip_icon p {
  margin: 0 0 14px !important;
}

body:not(.dark-theme) #modal_pay_uservip .payvip_equity {
  display: grid !important;
  gap: 14px !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  color: var(--baize-pay-text) !important;
  text-align: left !important;
}

body:not(.dark-theme) #modal_pay_uservip .payvip_equity li {
  position: relative !important;
  margin: 0 !important;
  padding: 12px 14px 12px 40px !important;
  border: 1px solid #e4edf9 !important;
  border-radius: 14px !important;
  background: #f7fbff !important;
  color: var(--baize-pay-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

body:not(.dark-theme) #modal_pay_uservip .payvip_equity li::before {
  content: "\f00c" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: -9px !important;
  border-radius: 999px !important;
  background: rgba(47, 109, 246, 0.1) !important;
  color: var(--baize-pay-blue) !important;
  font: normal normal normal 11px/18px FontAwesome !important;
  text-align: center !important;
}

body:not(.dark-theme) #modal_pay_uservip .col-sm-7 {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-height: 520px !important;
  margin: 0 !important;
  padding: 22px !important;
  border: 1px solid var(--baize-pay-line) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #f9fcff 0, #fff 100%) !important;
}

body:not(.dark-theme) #modal_pay_uservip .charge-box,
body:not(.dark-theme) #modal_pay_uservip .label-box {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

body:not(.dark-theme) #modal_pay_uservip .charge-box label,
body:not(.dark-theme) #modal_pay_uservip .label-box label {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-product {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 122px !important;
  margin: 0 !important;
  padding: 18px 14px !important;
  border: 1px solid var(--baize-pay-blue) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 16px 28px rgba(47, 109, 246, 0.08) !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-product-input:not(:checked) + .vip-product {
  border-color: #d8e6f8 !important;
  box-shadow: none !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-product-input:checked + .vip-product,
body:not(.dark-theme) #modal_pay_uservip .vip-product-input:checked ~ .vip-product {
  background: linear-gradient(180deg, #f7fbff 0, #fff 100%) !important;
  box-shadow: 0 18px 34px rgba(47, 109, 246, 0.16) !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-product-input:checked + .vip-product::before,
body:not(.dark-theme) #modal_pay_uservip .vip-product-input:checked ~ .vip-product::before {
  left: 12px !important;
  top: 12px !important;
  color: var(--baize-pay-blue) !important;
}

body:not(.dark-theme) #modal_pay_uservip .product-price {
  color: var(--baize-pay-blue) !important;
  font-size: 44px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body:not(.dark-theme) #modal_pay_uservip .product-price .pay-mark,
body:not(.dark-theme) #modal_pay_uservip .product-price .em09,
body:not(.dark-theme) #modal_pay_uservip .product-price .px12 {
  color: inherit !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body:not(.dark-theme) #modal_pay_uservip .original-price {
  margin-top: 8px !important;
  color: #8ea1bb !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  text-decoration: line-through !important;
}

body:not(.dark-theme) #modal_pay_uservip .vip-tag {
  top: -12px !important;
  right: 18px !important;
  left: auto !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: var(--baize-pay-blue) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body:not(.dark-theme) #modal_pay_uservip .muted-box,
body:not(.dark-theme) #modal_pay_uservip .coupon-input-box,
body:not(.dark-theme) #modal_pay_uservip [data-controller="payment_method"] {
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid #d9e7f8 !important;
  border-radius: 16px !important;
  background: #f8fbff !important;
  color: var(--baize-pay-text) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

body:not(.dark-theme) #modal_pay_uservip .dependency-box {
  display: grid !important;
  gap: 12px !important;
}

body:not(.dark-theme) #modal_pay_uservip .dependency-box > .flex.mb10 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

body:not(.dark-theme) #modal_pay_uservip .payment-method-radio,
body:not(.dark-theme) #refresh_modal .payment-method-radio,
body:not(.dark-theme) #zibpay_modal .payment-method-radio {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 10px 8px !important;
  border: 1px solid #d7e5f7 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--baize-pay-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

body:not(.dark-theme) #modal_pay_uservip .payment-method-radio.active,
body:not(.dark-theme) #refresh_modal .payment-method-radio.active,
body:not(.dark-theme) #zibpay_modal .payment-method-radio.active {
  border-color: var(--baize-pay-blue) !important;
  background: #f4f9ff !important;
  box-shadow: 0 12px 24px rgba(47, 109, 246, 0.12) !important;
}

body:not(.dark-theme) #modal_pay_uservip .payment-method-radio img,
body:not(.dark-theme) #refresh_modal .payment-method-radio img,
body:not(.dark-theme) #zibpay_modal .payment-method-radio img {
  height: 26px !important;
  margin: 0 0 4px !important;
}

body:not(.dark-theme) #modal_pay_uservip .charge-box.but,
body:not(.dark-theme) #modal_pay_uservip .but.charge-box,
body:not(.dark-theme) #modal_pay_uservip .initiate-pay,
body:not(.dark-theme) #refresh_modal .initiate-pay,
body:not(.dark-theme) #refresh_modal .but.btn-block,
body:not(.dark-theme) #zibpay_modal .initiate-pay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--baize-pay-blue), var(--baize-pay-blue-2)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 16px 28px rgba(47, 109, 246, 0.2) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

body:not(.dark-theme) #modal_pay_uservip .initiate-pay *,
body:not(.dark-theme) #refresh_modal .initiate-pay *,
body:not(.dark-theme) #zibpay_modal .initiate-pay * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body:not(.dark-theme) #modal_pay_uservip input[type="hidden"] {
  display: none !important;
}

body:not(.dark-theme) #refresh_modal .modal-dialog.modal-mini,
body:not(.dark-theme) #refresh_modal .modal-dialog {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: 760px !important;
}

body:not(.dark-theme) #refresh_modal .modal-content {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 28px 72px rgba(27, 73, 130, 0.18) !important;
}

body:not(.dark-theme) #refresh_modal .paid-modal-content,
body:not(.dark-theme) #refresh_modal .pay-box {
  color: var(--baize-pay-ink) !important;
  background: linear-gradient(180deg, #f8fbff 0, #fff 42%) !important;
}

body:not(.dark-theme) #refresh_modal .dependency-box {
  display: grid !important;
  gap: 12px !important;
  padding: 0 !important;
}

body:not(.dark-theme) #refresh_modal .dependency-box > .flex.mb10 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

body:not(.dark-theme) #zibpay_modal .modal-dialog {
  width: min(520px, calc(100vw - 32px)) !important;
}

body:not(.dark-theme) #zibpay_modal .modal-pay-body {
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 28px 72px rgba(27, 73, 130, 0.2) !important;
}

body:not(.dark-theme) #zibpay_modal .modal-pay-body .row-5.hide-sm {
  display: none !important;
}

body:not(.dark-theme) #zibpay_modal .modal-pay-body .row-5 {
  display: block !important;
  width: 100% !important;
}

body:not(.dark-theme) #zibpay_modal .pay-qrcon {
  border-radius: 24px !important;
  background: linear-gradient(180deg, #f8fbff 0, #fff 44%) !important;
}

body:not(.dark-theme) #zibpay_modal .pay-qrcode {
  width: 178px !important;
  height: 178px !important;
  padding: 12px !important;
  border: 1px solid #d9e7f8 !important;
  border-radius: 22px !important;
  background: #fff !important;
}

body:not(.dark-theme) #zibpay_modal .pay-notice .notice {
  background: linear-gradient(135deg, var(--baize-pay-blue), var(--baize-pay-blue-2)) !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form),
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) {
  padding: 24px !important;
  border: 1px solid rgba(198, 218, 246, 0.9) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #f8fbff 0, #fff 36%) !important;
  color: var(--baize-pay-ink) !important;
  box-shadow: 0 28px 72px rgba(23, 74, 139, 0.18) !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form) .touch,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .touch {
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form) .modal-title,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .modal-title {
  color: var(--baize-pay-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form) .modal-title > span,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .modal-title > span {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  margin-right: 10px !important;
  border-radius: 10px !important;
  background: #eaf3ff !important;
  color: var(--baize-pay-blue) !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form) .close,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8ca0ba !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form {
  display: grid !important;
  gap: 16px !important;
  max-height: min(72vh, 680px) !important;
  padding: 0 !important;
  color: var(--baize-pay-text) !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .charge-box {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .charge-box > .muted-color,
body:not(.dark-theme) #refresh_modal .balance-charge-form .charge-box > .muted-2-color {
  grid-column: 1 / -1 !important;
  margin: 2px 0 0 !important;
  color: #66809f !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .vip-product.product-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 14px 10px !important;
  border: 1px solid #d6e5f8 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--baize-pay-ink) !important;
  box-shadow: none !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .vip-product.product-box.active {
  border-color: var(--baize-pay-blue) !important;
  background: #f4f9ff !important;
  box-shadow: 0 12px 26px rgba(47, 109, 246, 0.12) !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .vip-product.product-box > .em14 {
  color: var(--baize-pay-ink) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .vip-product.product-box > .c-red {
  margin-top: 8px !important;
  color: var(--baize-pay-blue) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .vip-product.product-box .c-yellow,
body:not(.dark-theme) #refresh_modal .balance-charge-form .vip-product.product-box .smail {
  color: #4e83e8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .vip-product.product-box .vip-tag {
  top: -10px !important;
  right: 12px !important;
  left: auto !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: var(--baize-pay-blue) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  box-shadow: 0 8px 16px rgba(47, 109, 246, 0.16) !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .charge-box > [data-for="balance_product"][data-value="custom"]:not(.product-box) {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #d9e7f8 !important;
  border-radius: 16px !important;
  background: #fff !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .line-form-input {
  color: var(--baize-pay-blue) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form .line-form-line {
  background: #d7e5f7 !important;
}

body:not(.dark-theme) #refresh_modal .balance-charge-form > .muted-box,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .muted-box {
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid #d8e7f8 !important;
  border-radius: 16px !important;
  background: #f7fbff !important;
  color: #66809f !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.7 !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form) .dependency-box > .flex.mb10 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form) .payment-method-radio {
  min-height: 84px !important;
  border-radius: 16px !important;
  background: #fff !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form) .payment-method-radio.active {
  background: #f4f9ff !important;
  box-shadow: inset 0 0 0 1px rgba(47, 109, 246, 0.12) !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form) .initiate-pay,
body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form) .but.btn-block {
  min-height: 52px !important;
  margin-top: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 26px rgba(47, 109, 246, 0.2) !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) form {
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .table.table-bordered.table-mini {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid #d7e5f7 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--baize-pay-text) !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .table.table-bordered.table-mini th,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .table.table-bordered.table-mini td {
  padding: 12px 14px !important;
  border-color: #dce9f8 !important;
  color: var(--baize-pay-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  vertical-align: middle !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .table.table-bordered.table-mini thead th {
  background: #f5f9ff !important;
  color: var(--baize-pay-ink) !important;
  font-weight: 900 !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .table.table-bordered.table-mini .c-blue,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .table.table-bordered.table-mini .c-blue th,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .table.table-bordered.table-mini .c-blue td {
  color: var(--baize-pay-blue) !important;
  background: #f7fbff !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) form > .c-red,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) > .c-red {
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #d8e7f8 !important;
  border-radius: 14px !important;
  background: #f7fbff !important;
  color: var(--baize-pay-blue) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .dependency-box {
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid #d8e7f8 !important;
  border-radius: 16px !important;
  background: #f8fbff !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .dependency-box .badg {
  padding: 8px 12px !important;
  border: 1px solid #d6e5f8 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--baize-pay-text) !important;
  font-weight: 800 !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .form-control {
  height: 44px !important;
  border: 1px solid #d7e5f7 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--baize-pay-ink) !important;
  box-shadow: none !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .modal-buts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding-top: 2px !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .modal-buts .but,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .modal-buts button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  margin: 0 !important;
  border: 1px solid #cfe0f6 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--baize-pay-blue) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .modal-buts button.c-blue,
body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .modal-buts .c-blue {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--baize-pay-blue), var(--baize-pay-blue-2)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 14px 24px rgba(47, 109, 246, 0.2) !important;
}

@media (max-width: 860px) {
  body:not(.dark-theme) #modal_pay_uservip .modal-dialog,
  body:not(.dark-theme) #refresh_modal .modal-dialog,
  body:not(.dark-theme) #zibpay_modal .modal-dialog {
    width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
  }

  body:not(.dark-theme) #modal_pay_uservip .payvip-modal {
    max-height: calc(100vh - 20px) !important;
    overflow-y: auto !important;
    padding: 20px !important;
    border-radius: 22px !important;
  }

  body:not(.dark-theme) #modal_pay_uservip .vip-cardminis,
  body:not(.dark-theme) #modal_pay_uservip form > .row,
  body:not(.dark-theme) #modal_pay_uservip .charge-box,
  body:not(.dark-theme) #modal_pay_uservip .label-box,
  body:not(.dark-theme) #modal_pay_uservip .dependency-box > .flex.mb10,
  body:not(.dark-theme) #refresh_modal .dependency-box > .flex.mb10 {
    grid-template-columns: 1fr !important;
  }

  body:not(.dark-theme) #modal_pay_uservip .theme-box,
  body:not(.dark-theme) #modal_pay_uservip .col-sm-7 {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
  }

  body:not(.dark-theme) #modal_pay_uservip .vip-cardminis > li > a {
    height: 96px !important;
  }

  body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form),
  body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  body:not(.dark-theme) #refresh_modal .balance-charge-form .charge-box,
  body:not(.dark-theme) #refresh_modal .modal-content:has(.balance-charge-form) .dependency-box > .flex.mb10,
  body:not(.dark-theme) #refresh_modal .modal-content:has(.modal-title .fa-jpy):has(.table.table-bordered.table-mini) .modal-buts {
    grid-template-columns: 1fr !important;
  }

  body:not(.dark-theme) #refresh_modal .balance-charge-form .vip-product.product-box {
    min-height: 72px !important;
  }
}