/* BITBANK_EXCHANGE_PREMIUM_V58 */

/* Чётче текст: убираем GPU-размытие основного контента */
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.site-content{
  transform:none !important;
  backface-visibility:visible !important;
}

.exchange-card,
.exchange-card *{
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:geometricPrecision !important;
}

.exchange-card{
  isolation:isolate !important;
  border-color:rgba(142,232,255,.22) !important;
  background:
    radial-gradient(circle at 88% 9%, rgba(115,230,255,.13), transparent 178px),
    radial-gradient(circle at 7% 96%, rgba(230,51,202,.10), transparent 190px),
    linear-gradient(180deg,rgba(35,39,100,.965),rgba(14,17,51,.992)) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    0 0 0 1px rgba(115,230,255,.045),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(255,255,255,.035) !important;
}

.exchange-card::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(145deg,rgba(255,255,255,.07),transparent 28%,transparent 74%,rgba(115,230,255,.045)),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 38%);
  opacity:.76;
}

.exchange-card > *{
  position:relative !important;
  z-index:1 !important;
}

.exchange-card .exchange-title{
  color:#fff !important;
  font-weight:880 !important;
  letter-spacing:-.01em !important;
}

.exchange-card .field-label,
.exchange-card .methods-title{
  color:rgba(247,249,255,.92) !important;
  font-weight:760 !important;
  letter-spacing:.01em !important;
}

.exchange-card .input,
.exchange-card .select{
  color:#fbfcff !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  border-color:rgba(255,255,255,.145) !important;
  background-color:rgba(255,255,255,.066) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.10) !important;
  transform:none !important;
}

.exchange-card .input::placeholder{
  color:rgba(207,214,245,.74) !important;
  opacity:1 !important;
}

.exchange-card .input:focus,
.exchange-card .select:focus{
  border-color:rgba(115,230,255,.52) !important;
  background-color:rgba(255,255,255,.088) !important;
  box-shadow:
    0 0 0 3px rgba(115,230,255,.085),
    inset 0 1px 0 rgba(255,255,255,.065) !important;
}

.exchange-card .currency-icon{
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 5px 12px rgba(0,0,0,.18) !important;
}

.exchange-card .amount-inline-helper{
  min-height:15px !important;
  color:rgba(230,236,255,.88) !important;
  font-weight:680 !important;
  letter-spacing:.005em !important;
}

.exchange-card .amount-inline-note{
  min-height:32px !important;
  display:flex !important;
  align-items:center !important;
  color:rgba(230,250,255,.96) !important;
  font-weight:710 !important;
  border-color:rgba(115,230,255,.25) !important;
  background:
    linear-gradient(90deg,rgba(115,230,255,.085),rgba(123,57,255,.055)),
    rgba(255,255,255,.02) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.exchange-card .methods{
  border-color:rgba(255,255,255,.13) !important;
  background:rgba(255,255,255,.04) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.exchange-card .method-chip{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:rgba(250,252,255,.98) !important;
  font-weight:780 !important;
  border-color:rgba(255,255,255,.15) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.045)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.exchange-card .method-chip.active{
  color:#fff !important;
  border-color:rgba(115,230,255,.72) !important;
  background:
    linear-gradient(180deg,rgba(115,230,255,.15),rgba(92,108,255,.105)),
    rgba(255,255,255,.045) !important;
  box-shadow:
    inset 0 0 0 1px rgba(115,230,255,.18),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(115,230,255,.09) !important;
}

.exchange-card .swap-btn{
  color:#fff !important;
  border-color:rgba(255,255,255,.14) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.052)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.exchange-card .primary-btn{
  color:#fff !important;
  font-weight:880 !important;
  letter-spacing:.01em !important;
  background:linear-gradient(100deg,#df2cca 0%,#7d36ff 54%,#61dbff 125%) !important;
  box-shadow:
    0 16px 34px rgba(123,57,255,.26),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.exchange-card .primary-btn:focus-visible,
.exchange-card .method-chip:focus-visible,
.exchange-card .swap-btn:focus-visible{
  outline:2px solid rgba(115,230,255,.72) !important;
  outline-offset:3px !important;
}

@media (hover:hover){
  .exchange-card .method-chip:hover{
    border-color:rgba(115,230,255,.36) !important;
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.055)) !important;
  }

  .exchange-card .primary-btn:hover{
    filter:brightness(1.06) saturate(1.03) !important;
  }
}

/* Планшеты и разворот телефона: блок расширяется и центрируется */
@media (min-width:681px) and (max-width:980px){
  .hero-grid{
    justify-items:center !important;
  }

  .exchange-card{
    width:100% !important;
    max-width:690px !important;
    justify-self:center !important;
  }

  .exchange-card .amount-line{
    grid-template-columns:minmax(0,1fr) 150px !important;
  }

  .exchange-card .methods{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .exchange-card .methods-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Мобильный вид: на iPhone XR и похожих — методы по 2 в ряд */
@media (max-width:680px){
  .hero-grid{
    justify-items:center !important;
  }

  .hero-copy{
    width:100% !important;
  }

  .exchange-card{
    width:100% !important;
    max-width:560px !important;
    justify-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:18px !important;
  }

  .exchange-card .exchange-title{
    font-size:24px !important;
    line-height:1.16 !important;
    margin-bottom:18px !important;
  }

  .exchange-card .exchange-form{
    gap:11px !important;
  }

  .exchange-card .field-group{
    gap:7px !important;
  }

  .exchange-card .field-label,
  .exchange-card .methods-title{
    font-size:13px !important;
  }

  .exchange-card .amount-line{
    grid-template-columns:minmax(0,1fr) minmax(112px,34%) !important;
    gap:10px !important;
  }

  .exchange-card .input,
  .exchange-card .select{
    min-height:58px !important;
    border-radius:14px !important;
    font-size:16px !important;
  }

  .exchange-card .select{
    padding-left:42px !important;
  }

  .exchange-card .currency-icon{
    left:13px !important;
    width:22px !important;
    height:22px !important;
    font-size:11px !important;
  }

  .exchange-card .swap-btn{
    width:46px !important;
    height:46px !important;
    border-radius:14px !important;
  }

  .exchange-card .amount-inline-helper{
    font-size:12px !important;
    line-height:1.25 !important;
    min-height:16px !important;
  }

  .exchange-card .amount-inline-note{
    min-height:48px !important;
    padding:9px 11px !important;
    border-radius:13px !important;
    font-size:12.6px !important;
    line-height:1.28 !important;
  }

  .exchange-card .methods{
    height:auto !important;
    min-height:0 !important;
    padding:12px !important;
    margin-bottom:10px !important;
    overflow:visible !important;
  }

  .exchange-card .methods-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    overflow:visible !important;
  }

  .exchange-card .method-chip{
    min-height:48px !important;
    height:auto !important;
    padding:8px 7px !important;
    border-radius:13px !important;
    font-size:13.5px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .exchange-card .primary-btn{
    min-height:58px !important;
    border-radius:15px !important;
    font-size:16px !important;
    margin-top:0 !important;
  }
}

/* Очень узкие телефоны — методы по одному */
@media (max-width:374px){
  .exchange-card{
    padding:16px !important;
  }

  .exchange-card .amount-line{
    grid-template-columns:1fr !important;
  }

  .exchange-card .methods-grid{
    grid-template-columns:1fr !important;
  }

  .exchange-card .method-chip{
    min-height:46px !important;
  }
}