@font-face {
  font-family: 'SF-Pro-Display';
  src: url('fonts/SF-Pro-Display-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SF-Pro-Display';
  src: url('fonts/SF-Pro-Display-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'SF-Pro-Display';
  src: url('fonts/SF-Pro-Display-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

/*
  Scoped version of creditcard/style.css for embedding into the app.
  (Avoids global selectors like `body { ... }`.)
*/

.wallet-creditcard {
  width: 520px;
  max-width: calc(100vw - 32px);
  overflow: visible;
  margin: 8px auto 0;
}

.wallet-creditcard .credit-card {
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 100%;
  background-color: black;
  margin: 0 auto;
  border-radius: 16px;
  background:
    url('imgs/bg-image.png'),
    linear-gradient(322deg, #3259a8 0%, #75b4fb 100%);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 105%;
  overflow: visible;
}

.wallet-creditcard .settings-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin-top: 3%;
  margin-right: 4%;
  width: calc(100% - 4%);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.wallet-creditcard .settings-btn {
  margin: 0;
  padding: 0;
  width: 28px;
  height: auto;
}

.wallet-creditcard .card-name-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin-left: 6%;
  margin-top: -4%;
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.wallet-creditcard .card-name {
  font-family: 'SF-Pro-Display';
  font-weight: 500;
  color: white;
  font-size: 22px;
}

.wallet-creditcard .balance-container {
  font-family: 'SF-Pro-Display';
  font-weight: 600;
  color: white;
  font-size: 44px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin: 4% 0 0 6%;
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}

.wallet-creditcard .balance-sep {
  font-size: 22px;
  color: #b4caff;
}

.wallet-creditcard .balance-after-sep {
  font-size: 22px;
  color: #b4caff;
}

.wallet-creditcard .stats-container-positive {
  font-family: 'SF-Pro-Display';
  font-weight: 500;
  color: #10f9ab;
  background-color: rgba(66, 221, 138, 0.5);
  font-size: 14px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 1% 0 0 6%;
  width: fit-content;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.wallet-creditcard .stats-container-negative {
  font-family: 'SF-Pro-Display';
  font-weight: 500;
  color: #b4caff;
  background-color: rgba(180, 202, 255, 0.22);
  font-size: 14px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 1% 0 0 6%;
  width: fit-content;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.wallet-creditcard .stats-container-positive .stats-arrow {
  background: url('imgs/Arrow-positive.svg');
  height: 12px;
  width: 12px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.wallet-creditcard .stats-container-negative .stats-arrow {
  background: url('imgs/Arrow-negative.svg');
  height: 12px;
  width: 12px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.wallet-creditcard .stats-arrow,
.wallet-creditcard .stats-percent-value,
.wallet-creditcard .stats-sep {
  margin: 0 6px 0 0;
}

.wallet-creditcard .card-user-name-container {
  font-family: 'SF-Pro-Display';
  font-weight: normal;
  color: #93c7f9;
  font-size: 20px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 10% 0 0 4%;
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.wallet-creditcard .user-name {
  margin: 0 10px 0 0;
}

.wallet-creditcard .copy-icon {
  background: url('imgs/copy-icon.svg');
  height: 18px;
  width: 18px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media (max-width: 420px) {
  .wallet-creditcard .settings-btn { width: 24px; }
  .wallet-creditcard .card-name { font-size: 18px; }
  .wallet-creditcard .balance-container { font-size: 36px; }
  .wallet-creditcard .balance-sep,
  .wallet-creditcard .balance-after-sep { font-size: 18px; }
  .wallet-creditcard .stats-container-positive { font-size: 12px; }
  .wallet-creditcard .stats-container-negative { font-size: 12px; }
  .wallet-creditcard .card-user-name-container { font-size: 16px; }
}