/* Compact profile-standard pass: UI only, no functional selectors changed. */
:root{--compact-max:390px}
.header,.language-header{height:48px!important;padding:0 14px!important}
.back-btn{left:10px!important;width:34px!important;height:34px!important;font-size:20px!important}
.header-title,.language-title{font-size:16px!important;line-height:1!important}
.submit-btn{min-height:46px!important;height:46px!important;border-radius:10px!important;font-size:16px!important}

/* Safe */
body.page-safe .safe-content{max-width:var(--compact-max)!important;padding:0 12px 24px!important}
body.page-safe .safe-hero{height:158px!important;margin:0 -12px 14px!important;padding:0 14px!important}
body.page-safe .safe-hero-copy{width:57%!important}
body.page-safe .safe-hero h1{font-size:19px!important;margin-bottom:7px!important}
body.page-safe .safe-hero p{font-size:11px!important;line-height:1.5!important}
body.page-safe .safe-hero-art{right:0!important;bottom:-3px!important;width:48%!important;height:88%!important}
body.page-safe .security-options{border-radius:12px!important}
body.page-safe .security-option{min-height:70px!important;padding:10px 12px!important;grid-template-columns:42px minmax(0,1fr) 12px!important;gap:10px!important}
body.page-safe .safe-option-icon{width:42px!important;height:42px!important;border-radius:10px!important;padding:7px!important}
body.page-safe .option-text{font-size:14px!important}
body.page-safe .security-option .option-text:after{font-size:10px!important;margin-top:3px!important}
body.page-safe .option-arrow{font-size:12px!important}

/* Password pages */
body.page-password .change-password-content{max-width:var(--compact-max)!important;padding:27px 14px 24px!important}
body.page-password .password-field{margin-bottom:24px!important}
body.page-password .password-label{font-size:15px!important;margin-bottom:9px!important}
body.page-password .password-input-container{height:56px!important;border-radius:12px!important;padding-left:48px!important}
body.page-password .password-input-container:before{left:16px!important;font-size:18px!important}
body.page-password .password-input{font-size:14px!important;padding-right:42px!important}
body.page-password .password-toggle{right:8px!important;width:34px!important;height:34px!important;font-size:18px!important}
body.page-password .password-hint{font-size:11px!important;margin-top:8px!important}
body.page-password .submit-btn{margin-top:2px!important}

/* Language */
body.page-language .language-container{max-width:var(--compact-max)!important}
body.page-language .language-list{padding:14px 12px!important;gap:10px!important}
body.page-language .language-item{min-height:70px!important;padding:10px 13px!important;gap:13px!important;border-radius:12px!important}
body.page-language .language-flag{flex-basis:46px!important;width:46px!important;height:46px!important;border-radius:10px!important}
body.page-language .language-flag:after{font-size:18px!important}
body.page-language .language-name{font-size:16px!important}
body.page-language .language-check{flex-basis:34px!important;width:34px!important;height:34px!important;border-radius:9px!important;font-size:16px!important}

/* Deposit + withdrawal */
body.page-money .modal-body{max-width:var(--compact-max)!important;padding:11px 12px 28px!important}
body.page-money .money-hero{min-height:145px!important;margin-bottom:14px!important;padding:20px 45% 16px 16px!important;border-radius:13px!important;background-size:55% auto!important}
body.page-money .money-hero.withdraw{background-size:50% auto!important}
body.page-money .money-hero h2{font-size:20px!important;margin-bottom:7px!important}
body.page-money .money-hero p{font-size:11px!important;line-height:1.45!important}
body.page-money h4{font-size:16px!important;margin-bottom:12px!important}
body.page-money .mb-3{margin-bottom:12px!important}
body.page-money .mb-4{margin-bottom:14px!important}
body.page-money .form-label{font-size:13px!important;margin-bottom:6px!important}
body.page-money .form-control,body.page-money select,body.page-money .network-option,body.page-money .currency-selector,body.page-money .amount-input-container{min-height:48px!important;font-size:13px!important;border-radius:10px!important}
body.page-money .network-options{gap:8px!important}
body.page-money .network-option{padding:8px!important}
body.page-money .balance-info,body.page-money .instructions{padding:12px!important;border-radius:11px!important;font-size:11px!important}
body.page-money .instruction-text{font-size:11px!important;line-height:1.45!important}
body.page-money .deposit-option,body.page-money .withdrawal-option{min-height:112px!important;border-radius:13px!important}
body.page-money .deposit-icon,body.page-money .withdrawal-icon{width:46px!important;height:46px!important}
body.page-money .submit-btn{margin-top:16px!important}

/* Certification */
body.page-cert .container-fluid{max-width:var(--compact-max)!important}
body.page-cert .cert-stepper{padding:14px 8px 9px!important;gap:10px!important;font-size:14px!important}
body.page-cert .cert-step{gap:7px!important;white-space:nowrap!important}
body.page-cert .cert-step b{width:30px!important;height:30px!important;font-size:14px!important}
body.page-cert .cert-line{width:42px!important}
body.page-cert .cert-hero{margin:8px 10px 15px!important;min-height:156px!important;padding:28px 50% 18px 18px!important;border-radius:14px!important;overflow:hidden!important}
body.page-cert .cert-hero h2{font-size:19px!important;margin:0 0 8px!important;white-space:nowrap!important}
body.page-cert .cert-hero p{font-size:11px!important;line-height:1.55!important;margin:0!important}
body.page-cert .cert-hero img{right:-2%!important;top:2%!important;width:52%!important;height:96%!important;object-fit:contain!important;filter:drop-shadow(0 0 10px rgba(0,119,255,.45))}
body.page-cert .p-3{padding:11px 14px!important}
body.page-cert .form-label{font-size:14px!important;margin-bottom:7px!important}
body.page-cert .form-control{height:52px!important;border-radius:11px!important;font-size:13px!important;padding:0 14px!important}
body.page-cert .mb-3{margin-bottom:18px!important}
body.page-cert .submit-btn{font-size:16px!important}
body.page-cert h5{font-size:16px!important}
body.page-cert small{font-size:10px!important}
body.page-cert input[type=file]{height:auto!important;padding:12px!important}
body.page-cert .image-preview{max-height:130px!important}

@media(max-width:360px){
 :root{--compact-max:360px}
 body.page-safe .safe-hero h1{font-size:17px!important}
 body.page-cert .cert-stepper{font-size:13px!important}
 body.page-cert .cert-line{width:30px!important}
 body.page-money .money-hero{padding-left:13px!important}
}

/* Withdrawal network selector alignment/readability */
body.page-money #network-options .network-option{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:48px!important;
  padding:8px 28px!important;
  line-height:1!important;
}
body.page-money #network-options .network-label{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:600!important;
}
body.page-money #network-options .network-option.selected::after{
  top:50%!important;
  right:10px!important;
  transform:translateY(-50%)!important;
  font-size:14px!important;
  line-height:1!important;
}

/* ========================================================================
   Deposit page refresh — keep deposit UI aligned with the withdrawal theme
   ======================================================================== */
body.page-money #usdtDepositForm .money-hero{
    background-image:linear-gradient(100deg,rgba(3,28,62,.97),rgba(1,21,48,.35)),url('../img/withdraw-new.png')!important;
    background-position:right center!important;
    background-size:50% auto!important;
}

/* Deposit channel / currency cards: use the same dark navy surface as withdraw. */
body.page-money #usdtDepositForm .crypto-option{
    min-height:64px!important;
    padding:11px 14px!important;
    margin:0!important;
    background:rgba(8,27,53,.83)!important;
    border:1px solid rgba(58,100,153,.5)!important;
    border-radius:11px!important;
    box-shadow:none!important;
    transform:none!important;
}
body.page-money #usdtDepositForm .crypto-option:hover{
    background:rgba(8,34,67,.96)!important;
    border-color:#087cff!important;
    box-shadow:0 0 12px rgba(0,120,255,.22)!important;
    transform:none!important;
}
body.page-money #usdtDepositForm .crypto-option > div:first-child{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    margin-right:13px!important;
}
body.page-money #usdtDepositForm .crypto-option p{
    color:#fff!important;
    font-size:14px!important;
    font-weight:500!important;
}
body.page-money #usdtDepositForm .row.mb-4{
    margin-bottom:0!important;
}
body.page-money #usdtDepositForm .col-12.mb-3{
    margin-bottom:10px!important;
}

/* All individual crypto deposit forms share the same withdraw-style controls. */
body.page-money .deposit-form[id$="CryptoForm"] .modal-body{
    text-align:center!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .form-section{
    text-align:left!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .form-control{
    min-height:48px!important;
    height:48px!important;
    padding:0 14px!important;
    background:rgba(8,27,53,.83)!important;
    border:1px solid rgba(58,100,153,.5)!important;
    color:#fff!important;
    border-radius:10px!important;
    font-size:13px!important;
    box-shadow:none!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .form-control:focus{
    background:rgba(8,27,53,.96)!important;
    border-color:#087cff!important;
    box-shadow:0 0 0 2px rgba(8,124,255,.12)!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .form-control::placeholder{
    color:#7890b6!important;
    opacity:1!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .form-label{
    color:#fff!important;
    font-size:13px!important;
    font-weight:700!important;
    margin-bottom:6px!important;
}

/* Network buttons now behave visually like the withdrawal network selector. */
body.page-money .deposit-form[id$="CryptoForm"] .form-section .d-flex.gap-2{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .chain-btn{
    width:100%!important;
    min-height:48px!important;
    height:48px!important;
    margin:0!important;
    padding:8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(8,27,53,.83)!important;
    border:1px solid rgba(58,100,153,.5)!important;
    border-radius:10px!important;
    color:#fff!important;
    font-size:14px!important;
    font-weight:600!important;
    box-shadow:none!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .chain-btn.btn-primary{
    background:rgba(8,27,53,.96)!important;
    border-color:#087cff!important;
    box-shadow:0 0 12px rgba(0,120,255,.38)!important;
    color:#fff!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .chain-btn:hover{
    border-color:#087cff!important;
    background:rgba(8,34,67,.96)!important;
}

/* Address + QR controls use the same blue outline language. */
body.page-money .deposit-form[id$="CryptoForm"] .wallet-address{
    margin-bottom:16px!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .wallet-address p{
    color:#8ea4c5!important;
    font-size:11px!important;
    word-break:break-all!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .deposit-copy-address-btn{
    min-height:38px!important;
    padding:7px 18px!important;
    border:1px solid rgba(58,100,153,.75)!important;
    border-radius:8px!important;
    background:rgba(8,27,53,.72)!important;
    color:#fff!important;
    font-size:12px!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .deposit-copy-address-btn:hover{
    border-color:#087cff!important;
    background:rgba(8,34,67,.96)!important;
}

/* Voucher upload becomes a navy withdraw-style panel instead of the old purple box. */
body.page-money .deposit-form[id$="CryptoForm"] .upload-area{
    min-height:112px!important;
    padding:18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(4,24,51,.72)!important;
    border:1px dashed rgba(72,111,160,.72)!important;
    border-radius:11px!important;
    box-shadow:none!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .upload-area:hover{
    background:rgba(5,31,62,.86)!important;
    border-color:#087cff!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .upload-area i{
    color:#7890b6!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .upload-area p{
    color:#8ea4c5!important;
}

/* Important notice mirrors withdrawal's instruction card. */
body.page-money .deposit-form[id$="CryptoForm"] .important-notice{
    margin-top:16px!important;
    padding:12px!important;
    background:rgba(4,24,51,.72)!important;
    border:1px solid rgba(38,90,152,.38)!important;
    border-radius:11px!important;
    text-align:left!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .important-notice h6{
    color:#fff!important;
    font-size:13px!important;
    font-weight:700!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .important-notice p{
    color:#8ea4c5!important;
    font-size:11px!important;
    line-height:1.45!important;
}

/* Submit button matches withdrawal's primary action. */
body.page-money .deposit-form[id$="CryptoForm"] button[type="submit"]{
    min-height:50px!important;
    height:50px!important;
    padding:0 15px!important;
    margin-top:2px!important;
    border:none!important;
    border-radius:10px!important;
    background:#087cff!important;
    color:#fff!important;
    font-size:15px!important;
    font-weight:600!important;
}
body.page-money .deposit-form[id$="CryptoForm"] button[type="submit"]:hover{
    background:#066dde!important;
}


/* ========================================================================
   Deposit v2 standardization — mirror Withdrawal page (reference image 3)
   ======================================================================== */

/* Header is one shared standard for deposit + withdrawal. */
body.page-money .header{
  height:48px!important;
  min-height:48px!important;
  padding:0 14px!important;
  border-bottom:1px solid rgba(52,101,157,.42)!important;
  background:#00152f!important;
}
body.page-money .header .back-btn{
  left:10px!important;
  width:34px!important;
  height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:20px!important;
}
body.page-money .header .header-title{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:700!important;
}

/* Same content width / side spacing as withdraw. */
body.page-money #usdtDepositForm .modal-body,
body.page-money .deposit-form[id$="CryptoForm"] .modal-body{
  width:100%!important;
  max-width:390px!important;
  margin:0 auto!important;
  padding:11px 9px 30px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

/* Top banner follows withdrawal dimensions and typography exactly. */
body.page-money #usdtDepositForm .money-hero,
body.page-money .deposit-form[id$="CryptoForm"] .deposit-detail-hero{
  min-height:145px!important;
  height:145px!important;
  margin:0 0 14px!important;
  padding:20px 45% 16px 16px!important;
  border:1px solid rgba(19,115,222,.45)!important;
  border-radius:13px!important;
  background-image:linear-gradient(100deg,rgba(3,28,62,.97),rgba(1,21,48,.32)),url('../img/withdraw-new.png')!important;
  background-position:right center!important;
  background-size:50% auto!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
}
body.page-money #usdtDepositForm .money-hero h2,
body.page-money .deposit-form[id$="CryptoForm"] .deposit-detail-hero h2{
  margin:0 0 7px!important;
  color:#fff!important;
  font-size:20px!important;
  line-height:1.2!important;
  font-weight:800!important;
}
body.page-money #usdtDepositForm .money-hero p,
body.page-money .deposit-form[id$="CryptoForm"] .deposit-detail-hero p{
  margin:0!important;
  color:#9ab0d1!important;
  font-size:11px!important;
  line-height:1.45!important;
}

/* Deposit channel list = same navy card language used by withdrawal. */
body.page-money #usdtDepositForm > .modal-dialog .crypto-option{
  min-height:64px!important;
  height:64px!important;
  padding:10px 14px!important;
  margin:0!important;
  background:rgba(8,27,53,.83)!important;
  border:1px solid rgba(58,100,153,.55)!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
body.page-money #usdtDepositForm > .modal-dialog .crypto-option:hover{
  border-color:#087cff!important;
  background:rgba(8,34,67,.96)!important;
}
body.page-money #usdtDepositForm .crypto-option p{
  color:#fff!important;
  font-size:14px!important;
  font-weight:600!important;
}
body.page-money #usdtDepositForm .text-white.mb-4[data-translate="deposit.selectCrypto"]{
  margin:0 0 12px!important;
  font-size:14px!important;
  font-weight:600!important;
}

/* Detail page title under the banner follows withdrawal section heading. */
body.page-money .deposit-form[id$="CryptoForm"] h4.text-white{
  margin:0 0 12px!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:600!important;
  text-align:left!important;
}

/* QR block stays functional, but its spacing/background now belongs to same theme. */
body.page-money .deposit-form[id$="CryptoForm"] .qr-container{
  margin-bottom:12px!important;
  padding:12px!important;
  border-radius:12px!important;
  box-shadow:0 0 0 1px rgba(58,100,153,.35),0 8px 24px rgba(0,0,0,.12)!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .qr-container img{
  width:190px!important;
  height:190px!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .wallet-address{
  margin-bottom:12px!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .wallet-address p{
  margin-bottom:8px!important;
  color:#8ea4c5!important;
  font-size:11px!important;
}

/* All fields now use the exact withdrawal control geometry. */
body.page-money .deposit-form[id$="CryptoForm"] .mb-3,
body.page-money .deposit-form[id$="CryptoForm"] .mb-4{
  margin-bottom:12px!important;
  text-align:left!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .form-label{
  display:block!important;
  margin:0 0 6px!important;
  color:#fff!important;
  font-size:13px!important;
  line-height:1.25!important;
  font-weight:700!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .form-control{
  width:100%!important;
  min-height:48px!important;
  height:48px!important;
  padding:0 14px!important;
  border:1px solid rgba(58,100,153,.5)!important;
  border-radius:10px!important;
  outline:none!important;
  background:rgba(8,27,53,.83)!important;
  color:#fff!important;
  font-size:13px!important;
  box-shadow:none!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .form-control:focus{
  border-color:#087cff!important;
  background:rgba(8,27,53,.96)!important;
  box-shadow:0 0 0 2px rgba(8,124,255,.12)!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .form-control::placeholder{
  color:#7890b6!important;
  opacity:1!important;
}

/* Chain selector = withdrawal ERC20/TRC20 selector, including selected state. */
body.page-money .deposit-form[id$="CryptoForm"] .d-flex.gap-2{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .chain-btn{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:8px 28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(58,100,153,.5)!important;
  border-radius:10px!important;
  background:rgba(8,27,53,.83)!important;
  color:#fff!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:600!important;
  box-shadow:none!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .chain-btn.btn-primary{
  border-color:#087cff!important;
  background:rgba(8,27,53,.96)!important;
  box-shadow:0 0 12px rgba(0,120,255,.38)!important;
}

/* Copy/upload/info panels use the same outlines/radii as withdrawal cards. */
body.page-money .deposit-form[id$="CryptoForm"] .deposit-copy-address-btn{
  min-height:38px!important;
  border:1px solid rgba(58,100,153,.75)!important;
  border-radius:8px!important;
  background:rgba(8,27,53,.72)!important;
  color:#fff!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .upload-area{
  min-height:112px!important;
  padding:18px!important;
  border:1px dashed rgba(72,111,160,.72)!important;
  border-radius:11px!important;
  background:rgba(4,24,51,.72)!important;
}
body.page-money .deposit-form[id$="CryptoForm"] .important-notice{
  padding:12px!important;
  border:1px solid rgba(38,90,152,.38)!important;
  border-radius:11px!important;
  background:rgba(4,24,51,.72)!important;
}
body.page-money .deposit-form[id$="CryptoForm"] button[type="submit"]{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  margin-top:16px!important;
  border:0!important;
  border-radius:10px!important;
  background:#087cff!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:600!important;
}

/* 2026-08-11 global mobile header viewport fix
   Keep page headers full-width on every phone width even when the page content
   is intentionally capped/centered (e.g. certification at --compact-max). */
@media (max-width: 600px), (min-width: 601px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Certification uses a centered max-width container for its form. Do not let
     that content width constrain the top header. */
  body.page-cert > .container-fluid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Shared settings/account headers must always follow the viewport, not the
     width of an inner compact content container. */
  .header,
  .language-header {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: auto !important;
    right: auto !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Reserve equal space on both sides so longer English titles stay genuinely
     centered and never collide with the back button on narrower devices. */
  .header-title,
  .language-title {
    width: auto !important;
    max-width: calc(100vw - 104px) !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }

  .header .back-btn,
  .language-header .back-btn {
    left: 10px !important;
    right: auto !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 360px) {
  .header-title,
  .language-title {
    max-width: calc(100vw - 92px) !important;
    font-size: 15px !important;
  }
}