@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-card-label-container, .revolut-pay-label-container  {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.revolut-card-label-brands, .revolut-pay-label-brands {
  display: flex;
}

.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);
  }
}