/* ====CARD PAYMENT ==== */

:root{
  --main-color:#f8d558;
  --color-payiz: rgba(231, 188, 107, 0.51);
  --main-lighter-color:#ef233c;
  --light-color:#8d99ae;
  --lighter-color:#edf2f4;
  --dark-color:#2b2d42;
  --color-success:#1CA81FFF;
  --font-smiler:12px;
  --font-bigger:16px;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::after,::before{
  box-sizing: border-box;
}
ul{
  list-style: none;
}
html{
  scroll-behavior: smooth;
}

a{
  text-decoration: none;
  color: inherit;
}
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1em;
}
.outher{
  border-radius: 1.8em;
  padding: 4em 2em;
  background-color: white;
}
.header-card{
  margin-bottom: 4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-card .logo{
  font-size: 2em;
}
.header-card .logo strong{
  color: var(--main-lighter-color)
}
.header-card .time-left{
  display: flex;
  flex-direction: column;
  align-items: end;
  line-height: 1.2;
}

.payment-card,
.payment-card :where(form > div:not(.card-number), .card-expiration .input,.card-country .input, .card-holder .input){
  display: flex;
  align-items: center;
  box-shadow: none;
}
.payment-card{
  flex-direction: column-reverse;
  gap: 4px;
}
.payment-card form div  .input textarea{
  font-weight: 600;
  font-size: var(--font-bigger);
  border-radius: 8px;
  width: 100%;
  border: 2px solid var(--lighter-color);
}


.payment-card form > div{
  margin-bottom: .5em;
  flex-direction: column;
  align-items: stretch;
}

.payment-card form > div .text{
  flex: 1 0 40%;
}
.payment-card form > div .input{
  flex: 1 0 60%;
}
.payment-card .left p{
  font-weight: 700;
  font-size: var(--font-bigger);
}

.payment-card .left span{
  color:var(--light-color);

}
.payment-card .left input{
  font-weight: 600;
  font-size: var(--font-bigger);
  padding: 0 1em ;
  line-height: 40px;
  border-radius: 8px;
  width: 100%;
  border: 2px solid var(--lighter-color);
  outline-color: transparent;
  transition: all .3s ease-in;
  --webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
}
.payment-card .left input::placeholder {
  font-weight: 300;
  font-family: inherit;
  letter-spacing: 2px;
  font-size: var(--font-smiler);
  color: var(--light-color);
  opacity: .5;

}
.payment-card .left select{
  font-weight: 600;
  font-size: var(--font-bigger);
  line-height: 46px;
  border-radius: 8px;
  width: 100%;
  border: 1px solid var(--lighter-color);
  outline-color: transparent;
  transition: all .3s ease-in;
  --webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
  padding: 8px;
  background-color: white;
}
.payment-card .left input:focus{
  outline-color: var(--main-color);
  background-color: var(--lighter-color);
}
.payment-card .card-number-box{
  position: relative;
  margin-top: 1em;
}
.payment-card .card-number-box input{
  padding: 0 4em;
}
.payment-card .card-number-box input::placeholder{
  font-size: inherit;
}
.payment-card form .cc-logo{
  position: absolute;
  top:50%;
  left:1.2em;
  margin-top: -10px;
}
.payment-card .cc-logo::before, .payment-card .cc-logo::after{
  content: '';
  position: relative;
  display: inline-block;
  width: 20px;
  height:20px ;
  border-radius: 50%;
  background-color: var(--main-color);
}
.payment-card .cc-logo::after{
  background-color: #f79e1c;
  margin-left: -7px;
  opacity: .75;
}
.payment-card .card-expiration .input{
  gap: 10%;
  text-align: center;
}
.payment-card form button{
  font-size: var(--font-bigger);
  font-weight: 600;
  border: 0;
  background-color: var(--main-color);
  color: white;
  border-radius: 8px;
  line-height: 56px;
  width: 100%;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.payment-card form button:hover {
  background-color: var(--main-color);
}

.payment-card .right{
  max-width: 300px;
  width: 100%;

}
.payment-card .card-virtual{
  position: relative;
  margin: 0 2em -5em;
  padding: 2em;
  line-height: 2em;
  font-size: var(--font-bigger);
  font-weight: 600;
  color: white;
  background-color: var(--dark-color);
  border-radius: 10px;
  box-shadow: rgba(43 45 66/ 30%) 0 20px 30px;
  z-index: 1;
  overflow: hidden;
}

.payment-card .card-virtual .cc-logo{
  position: relative;
  transform: scale(5);
  text-align: center;

}
.payment-card .card-virtual .name-holder{
  margin:4em 0 0 ;
}
.payment-card .chip{
  display: flex;
  justify-content: end;
  align-items: center;
  margin: 0 -.15em  -1.5em;
  opacity: .5;
}
.payment-card .chip svg{
  width: 30px;
  height: 35px;
  fill: #f79e1c;
}
.payment-card .card-virtual .highlight{
  position: relative;
  height: auto;
  margin: 2em -2em -2em;
  background-color: var(--light-color);
  border-radius: 0 0 10px 10px;
  padding: 2em;
}
.payment-card .card-virtual .highlight{
  position: relative;
  height: auto;
  margin: 2em -2em -2em;
  background-color: var(--light-color);
  border-radius:0 0 10px ;
  display: flex;
  flex-direction: column;
}

.payment-card .right .receipt{
  position: relative;
  padding: 8em 2em 2em;
  border-radius:10px ;
  background-color: var(--lighter-color);
}
.payment-card .right .receipt ul li {
  display: flex;
  justify-content: space-between;
  line-height: 3em;
  border-bottom: 1px dotted var(--light-color);
}
.payment-card .right .receipt ul li span:first-child{
  color: var(--light-color);
}
.payment-card .right .receipt ul li span:last-child{
  font-weight: 700;
}
.payment-card .right .receipt .total{
  text-align: right;
  margin-top: 1em;
}


@media screen and (min-width: 576px){
  .outher{
    padding: 4em;
  }
  .payment-card form > div {
    flex-direction: row;
  }
  .payment-card form > div .text{
    padding-right: 1em ;
  }

}
@media screen and (min-width:992px) {
  .header-card{
    max-width: 70%;
    padding-right: 4em;
    margin-bottom: 0;
  }
  .payment-card{
    flex-direction: row;
    gap: 0;
  }
  .payment-card .left{
    flex: 1 0 65%;
    padding-right: 4em;
  }
  .payment-card .right{
    flex:1 0 35%;
    align-self: flex-end;
  }
}
.chebox-deal{

}