@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');

/* CRIANDO CARTÃO DE CREDITO */

.cartao-wrapper-mobile {
	position: fixed;
	top: 100px;
	left: 50%;
	z-index: 12;
	transform: translate(-50%, -50%);
	overflow: hidden;
	background: #f2f2f2;
	width: 100%;
	display: none;
	height: 210px;
}

.cartao-wrapper-mobile  .card-container::after {
    position: absolute;
    content: 'x';
    color: #fff;
    top: 65px;
    right: 8px;
    background: #666;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 8px 3px;
}

.animated-card-wrapper{
	display: none;
	margin-top: 0px;
}

.card-container	{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 300px;
	overflow: hidden;
}

.credit-card {
	width: 280px;
	height: 170px;

	text-transform: uppercase;
    font-size: 12px;
    color: #333;
    letter-spacing: 0.3px;

    position: relative;
    transition: transform 0.6s ease-in-out;
}

.credit-card .front, .credit-card .back {
	position: absolute;
	top: 0;
	left: 0;

	padding: 15px;
	border-radius: 10px;
	background: linear-gradient(90deg,#c5c5c5,#e9e9e9);
	box-shadow: 0 2px 7px rgb(0 0 0 / 60%);

	width: 100%;
	height: 100%;

	overflow: hidden;
	backface-visibility: hidden;

	transition: transform 0.65s cubic-bezier(0.63, -0.19, 0.48, 1.47), color 0.35s ease-in-out;
}

.credit-card .front {
	transform: perspective(800px) rotateY(0deg);
}

.credit-card .back {
	transform: perspective(800px) rotateY(180deg);
}

/* BACKGROUND DO CARTÃO */

.credit-card .front::before, .credit-card .back::before, .cpf-card::before {
	content: '';
	width:340px;
	height: 340px;
    border: 1px solid #999;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    top: -185px;
    right: -95px;
    background: rgba(0,0,0,.03);
    mix-blend-mode: overlay;
}

.credit-card .front::after, .credit-card .back::after, .cpf-card::after {
	content: '';
	width:360px;
	height: 320px;
    border: 1px solid #999;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
   	bottom: -160px;
    left: -135px;
    background:  rgba(58,58,58,.03);
    mix-blend-mode: overlay;
}

/* ANIMAÇÃO CARTÃO VIRANDO */

.front-flip {
	transform: perspective(800px) rotateY(-180deg) !important;
}

.back-flip {
	transform: perspective(800px) rotateY(0deg) !important;
}

/* ELEMENTOS DO CARTAO */

.credit-card .front #card-brands {
	max-width: 59px;
    height: 39px;
    border-radius: 4px;
    background: #aaa;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;

    margin-bottom: 30px;
}


.credit-card .front .card-number {
	font-family: 'Roboto Mono', monospace;
    letter-spacing: 3.55px;
    font-size: 16px;
    padding: 10px 0
}

.credit-card .front .card-user-name, .credit-card .front .card-date span{
	font-family: 'Roboto Mono', monospace;
	white-space: nowrap;
	overflow: hidden;
}

.credit-card .back .black-strip {
	background: #313131;
	height: 40px;
	z-index: 2;
}

.credit-card .back .card-security-number {
	position: relative;

	background: #fff;
	margin: 10px 0;
	padding: 5px;

	font-family: 'Roboto Mono', monospace;
	text-align: right;
	color: #222;
	font-weight: bold;
}

.credit-card .back .card-security-number:after {
	content: '';
	position: absolute;
	right: -1px;
	top: -8px;

	height: 42px;
	width: 42px;
	border: 2px solid #22dd22;
	border-radius: 50%;
}

/* CPF */

.cpf-card {
	position: absolute;
	transform: translateX(500px);

	width: 280px;
	height: 170px;
	padding: 15px;
	border-radius: 10px;
	background: linear-gradient(90deg,#c5c5c5,#e9e9e9);
	box-shadow: 0 2px 7px rgb(0 0 0 / 60%);
	overflow: hidden;

	transition: transform 0.6s ease-in-out;
}

.cpf-card span {
	font-family: 'Roboto Mono', monospace;
	font-size: 15px;
	text-transform: uppercase;
}

.cpf-card .cpf-number {
	font-family: 'Roboto Mono', monospace;
	font-size: 18px;
	text-transform: uppercase;
	color: #555;
}

.cpf-card > div {
	margin-bottom: 12px;
}

/* ANIMAÇÕES ENTRE CARTÕES */

.card-slip {
	transform: translateX(0px);
}

.credit-card-slip {
	transform: translateX(-500px);
}

/* CORES DE FUNDO DOS CARTÕES */

.visa-background .card-number,
.mastercard-background .card-number,
.hipercard-background .card-number,
.american-express-background .card-number,
.senff-background .card-number {
	filter: drop-shadow(0 1px 1px #111);
}

.visa-background,
.mastercard-background,
.hipercard-background,
.elo-background,
.american-express-background,
.senff-background {
	color: #ffffff;
    animation: slidein 0.35s ease-in-out;
}

.visa-background {
    background: linear-gradient(90deg,#021670,#5168d1) !important;
}

.mastercard-background {
	background: linear-gradient(90deg,#35475b,#5a8296) !important;
}

.hipercard-background {
	background: linear-gradient(90deg,#7e1b1d,#bf3131) !important;
}

.elo-background {
	background: linear-gradient(90deg,#111,#222) !important;
}

.american-express-background {
	background: linear-gradient(90deg,#255a79,#3391c7) !important;
}

.senff-background {
	background: linear-gradient(90deg,#293370,#7b8ac0) !important;
}

@keyframes slidein {
  from { filter: opacity(50%) }
  to   { filter: opacity(100%) }
}

/* BANDEIRAS */

.visa-brand {
	background-image: url(../img/visa.png) !important;
	background-color: transparent !important; 
}

.mastercard-brand{
	background-image: url(../img/mastercard.png) !important;
	background-color: transparent !important; 
}

.hipercard-brand{
	max-width: 95px !important;
	background-image: url(../img/hipercard.png) !important;
	background-color: transparent !important; 
}

.elo-brand{
	background-image: url(../img/elo.png) !important;
	background-color: transparent !important; 
}

.american-express-brand {
	background-image: url(../img/american-express.png) !important;
	background-color: transparent !important; 
}

.senff-brand {
	background-image: url(../img/senff.png) !important;
	background-color: transparent !important; 
}