/* ========================================================
   PAYCARD V7.12
   FINAL FRONTEND POLISH
   ======================================================== */


/* ========================================================
   LANGUAGE
   ======================================================== */

.v712-language {
  height:40px;

  padding:0 10px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:4px;

  flex:0 0 auto;

  background:#fff;

  border:
    1px solid #e0e6ea;

  border-radius:11px;
}


.v712-language button {
  min-width:28px;

  padding:5px 6px;

  color:#77828e;

  background:transparent;

  border:0;

  border-radius:6px;

  cursor:pointer;

  font-size:11px;

  font-weight:900;
}


.v712-language span {
  color:#c1c8ce;

  font-size:10px;
}


.v712-language button.active {
  color:#fff;

  background:var(--primary);
}


/* ========================================================
   DEPOSIT FINAL
   ======================================================== */

#bankCards {
  display:grid !important;

  grid-template-columns:
    1fr !important;

  gap:16px !important;

  width:100% !important;

  max-width:100% !important;
}


#bankCards > * {
  width:100% !important;

  max-width:100% !important;

  min-width:0 !important;

  padding:22px !important;

  position:relative !important;

  display:grid !important;

  grid-template-columns:
    52px
    minmax(190px,1.4fr)
    repeat(
      4,
      minmax(
        120px,
        1fr
      )
    ) !important;

  column-gap:22px !important;

  row-gap:15px !important;

  align-items:start !important;

  overflow:hidden !important;

  background:#fff !important;

  border:
    1px solid #dfe6ea !important;

  border-radius:16px !important;
}


/*
 * JS gerçek custom-rate panelini kartın doğrudan
 * child'ı yaptığı için artık güvenle full span.
 */

#bankCards > .v712-custom-rate {
  grid-column:
    1 / -1 !important;

  width:100% !important;

  max-width:100% !important;

  margin-top:4px !important;

  padding:16px !important;

  display:block !important;

  position:relative !important;

  inset:auto !important;

  float:none !important;

  transform:none !important;

  background:#f7f9fa !important;

  border:
    1px solid #e3e9ed !important;

  border-radius:12px !important;
}


#bankCards
.v712-custom-rate
.custom-rate-grid {
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    ) !important;

  gap:12px !important;
}


#bankCards
.v712-custom-rate
input,
#bankCards
.v712-custom-rate
select {
  width:100% !important;

  max-width:100% !important;

  min-width:0 !important;

  height:44px !important;

  box-sizing:border-box !important;

  padding:
    0 12px !important;

  background:#fff !important;

  border:
    1px solid #d7e0e5 !important;

  border-radius:9px !important;
}


#bankCards
.v712-custom-rate
.custom-rate-results,
#bankCards
.v712-custom-rate
.deposit-result-grid {
  width:100% !important;

  margin-top:12px !important;

  display:grid !important;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    ) !important;

  gap:8px !important;
}


/* ========================================================
   MARKET RESPONSIVE SAFETY
   ======================================================== */

#v711Market {
  width:100%;

  max-width:100%;
}


.v711-source-card,
.v711-source-list,
.v711-source-row {
  max-width:100%;
}


.v711-source-value strong,
.v711-price-card strong {
  overflow-wrap:anywhere;
}


/* ========================================================
   HEADER RESPONSIVE
   ======================================================== */

header,
.site-header,
.topbar {
  max-width:100vw;
}


header nav,
.main-nav {
  min-width:0;
}


/* ========================================================
   TABLET
   ======================================================== */

@media(max-width:1100px) {

  #bankCards > * {
    grid-template-columns:
      46px
      minmax(
        180px,
        1.4fr
      )
      repeat(
        2,
        minmax(
          120px,
          1fr
        )
      ) !important;
  }


  #bankCards
  .v712-custom-rate
  .custom-rate-results,
  #bankCards
  .v712-custom-rate
  .deposit-result-grid {
    grid-template-columns:
      1fr 1fr !important;
  }

}


/* ========================================================
   MOBILE
   ======================================================== */

@media(max-width:760px) {

  .v712-language {
    height:36px;

    padding:
      0 6px;
  }


  .v712-language button {
    min-width:25px;

    padding:
      4px;
  }


  /*
   * Header yatay kaydırılabilir.
   */
  header nav,
  .main-nav {
    overflow-x:auto;

    overscroll-behavior-x:
      contain;

    scrollbar-width:none;
  }


  header nav::-webkit-scrollbar,
  .main-nav::-webkit-scrollbar {
    display:none;
  }


  /*
   * Bank cards
   */
  #bankCards > * {
    padding:16px !important;

    grid-template-columns:
      1fr !important;

    column-gap:0 !important;

    row-gap:11px !important;
  }


  #bankCards > * > * {
    width:100% !important;

    min-width:0 !important;

    grid-column:auto !important;
  }


  #bankCards >
  .v712-custom-rate {
    grid-column:auto !important;

    padding:14px !important;
  }


  #bankCards
  .v712-custom-rate
  .custom-rate-grid {
    grid-template-columns:
      1fr !important;
  }


  #bankCards
  .v712-custom-rate
  .custom-rate-results,
  #bankCards
  .v712-custom-rate
  .deposit-result-grid {
    grid-template-columns:
      1fr 1fr !important;
  }


  #bankCards input,
  #bankCards select {
    font-size:16px !important;
  }


  /*
   * Market asset cards
   */
  .v711-price-grid {
    grid-template-columns:
      1fr !important;
  }


  .v711-source-row {
    grid-template-columns:
      1fr 1fr !important;
  }


  .v711-source-main,
  .v711-source-value.price,
  .v711-source-update {
    grid-column:
      1 / -1 !important;
  }

}


@media(max-width:450px) {

  #bankCards
  .v712-custom-rate
  .custom-rate-results,
  #bankCards
  .v712-custom-rate
  .deposit-result-grid {
    grid-template-columns:
      1fr !important;
  }


  .v711-source-row {
    grid-template-columns:
      1fr !important;
  }


  .v711-source-main,
  .v711-source-value.price,
  .v711-source-update {
    grid-column:auto !important;
  }

}