@font-face {
  font-family: 'Basier Circle';
  font-display: swap;
  font-weight: 400;
  src: url('https://assets.revolut.com/media/fonts/BasierCircle-Regular.woff2');
}
@font-face {
  font-family: 'Basier Circle';
  font-display: swap;
  font-weight: 500;
  src: url('https://assets.revolut.com/media/fonts/BasierCircle-Medium.woff2');
}
@font-face {
  font-family: 'Basier Circle';
  font-display: swap;
  font-weight: 600;
  src: url('https://assets.revolut.com/media/fonts/BasierCircle-SemiBold.woff2');
}
@font-face {
  font-family: 'Inter';
  font-display: swap;
  font-weight: 400;
  src: url('https://assets.revolut.com/media/fonts/Inter-Regular.woff2');
}
@font-face {
  font-family: 'Inter';
  font-display: swap;
  font-weight: 500;
  src: url('https://assets.revolut.com/media/fonts/Inter-Medium.woff2');
}
@font-face {
  font-family: 'Inter';
  font-display: swap;
  font-weight: 600;
  src: url('https://assets.revolut.com/media/fonts/Inter-SemiBold.woff2');
}
@font-face {
  font-family: 'Inter';
  font-display: swap;
  font-weight: 700;
  src: url('https://assets.revolut.com/media/fonts/Inter-Bold.woff2');
}
@font-face {
  font-family: 'Aeonik Pro';
  font-display: swap;
  font-weight: 900;
  src: url('https://assets.revolut.com/media/fonts/AeonikPro-Black.woff2');
}

#wc-revolut-cardholder-name,
#wc-revolut-cardholder-name::placeholder {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    Helvetica,
    Arial,
    Arimo,
    sans-serif;
  color: #848484;
}

#wc-revolut-cardholder-name,
#woocommerce-revolut-card-element {
  border-radius: 10px;
  border: 1px solid #dfe3e7;
  background-color: #ffffff;
  padding: 5px;
  font-size: 16px;
  box-shadow: none;
}

#woocommerce-revolut-card-element {
  margin-bottom: 14px;
}

.wc-revolut-cardholder-name-error,
.woocommerce-revolut-card-element-error {
  background-color: #fdedec !important;
  color: #f26055 !important;
}

#revolut-upsell-banner {
  margin-top: 5px;
}
.hidden_by_revolut {
  display: none !important;
}

.revolut-payment-method-save label {
  display: inline !important;
}

.revolut-error {
  margin-top: 5px;
}

.revolut-pay {
  height: auto;
}

.revolut-payment-method-label-container,
.revolut-pay-label-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.revolut-payment-method-label-scheme-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0 !important
}

.revolut-pay-label-title-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.wc_payment_method.payment_method_revolut_pay, 
.wc_payment_method.payment_method_revolut_cc,
.wc_payment_method.payment_method_revolut_payment_request {
  display: flex !important;
  flex-wrap: wrap;
}

.revolut-payment-method-save{
  display: flex !important;
}

.payment_box.payment_method_revolut_pay, 
.payment_box.payment_method_revolut_cc, 
.payment_method_revolut_payment_request{
  flex-basis: 100%;
}

.wc_payment_method.payment_method_revolut_pay label[for="payment_method_revolut_pay"], 
.wc_payment_method.payment_method_revolut_cc label[for="payment_method_revolut_cc"],
.wc_payment_method.payment_method_revolut_payment_request label[for="payment_method_revolut_payment_request"] {
  display: flex !important;
  align-items: center;
  flex: 1;
}

.revolut-label-informational-icon {
  margin-left: 5px;
  flex: 20;
  display: flex;
  align-items: center;
}

.revolut-pay-label-icons {
  width: 60%;
}
.revolut-pay-label-title {
  white-space: nowrap;
  margin-right: 5px;
}

.card-field-error {
  color: red;
  font-size: 12px;
  font-family:
    Inter,
    -apple-system,
    'system-ui',
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Helvetica,
    Arial,
    Arimo,
    sans-serif;
}

.revolutBlockUI {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.revSpinnerContainer {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font: inherit;
  color: #4f55f1;
  width: 96px;
  height: 96px;
  border-radius: 9999px;
}

.revSpinnerContainer .spinner {
  --rui-spinner-circumference: 295.3097094374406px;
  --rui-spinner-dasharray: calc(295.3097094374406px * 0.6), 295.3097094374406px;
  animation-name: spinnerAnimation;
  animation-duration: 1700ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center center;
}

@keyframes spinnerAnimation {
  0% {
    stroke-dasharray: 1px, var(--rui-spinner-circumference);
    stroke-dashoffset: 0px;
    transform: rotate(0deg);
  }
  50% {
    stroke-dasharray: var(--rui-spinner-dasharray);
    stroke-dashoffset: calc(var(--rui-spinner-circumference) * -0.15);
    transform: rotate(180deg);
  }
  100% {
    stroke-dasharray: var(--rui-spinner-dasharray);
    stroke-dashoffset: calc(var(--rui-spinner-circumference) * -1);
    transform: rotate(360deg);
  }
}