/* Variables */
:root {
  --clr-Red_error: hsl(0, 100%, 66%);
  --clr-White: hsl(0, 0%, 100%);
  --clr-Light_grayish_violet: hsl(270, 3%, 87%);
  --clr-Dark_grayish_violet: hsl(279, 6%, 55%);
  --clr-Very_dark_violet: hsl(278, 68%, 11%);

  --ff: "Space Grotesk", sans-serif;

  --fs-13px: 0.8125rem; /* equivalen a 13px */
  --fs-18px: 1.25rem; /* equivalen a 18px */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--ff);
  font-size: var(--fs-13px);
  font-weight: 500;
}

/* Tarjetas */
.wrapper {
    background-image: url(../img/bg-main-mobile.png);    
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    
    height: 100vh;
}

.card {
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
}

.card-front {
  max-width: 85%;
  position: relative;
  align-self: flex-start;
  /* hace que comienze desde la izq de la caja */
  order: 2;
  /* para cambiar el orden que se visualizan las tarjetas, y no tener que modificar el html */
  margin-top: -4.5rem;
  z-index: 1;
  /* Para que quede por siempre este por encima de la otra tarjeta */
}

.card-front__bg,
.card-back__bg {
  width: 100%;
}

.card-front__data_top {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  position: absolute;

  inset: 0;
  padding: 1rem 1rem 1.5rem 1rem;
}

.card-front__logo {
  max-width: 3rem;
}

.card-front__data_display {
  display: flex;
  flex-direction: column;

  gap: 1.5rem;
  /* da separacion entre el Numero y el bloque (name - exp date) */
  width: 100%;
}

.card-front__data_bottom {
  width: 100%;

  display: flex;
  justify-content: space-between;
}

.card-back {
  max-width: 85%;
  position: relative;
  /* con esto hago que .card-back__data solo tome el contorno de la tarjeta, y no toda la pantalla como lo haria. */
  display: flex;
  align-self: flex-end;
  order: 1;
}

.card-back__data {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: end;

  padding-right: 13%;
}

/* Modificadores */
.card-text {
  color: var(--clr-White);
  font-weight: 500;
  text-transform: uppercase;

  font-size: 0.7rem; /* un poco mas de 10 px */
  letter-spacing: 1px;
}

.card-title {
  color: var(--clr-White);
  font-weight: 500;
  text-transform: uppercase;

  font-size: 1.2rem;
  letter-spacing: 1.5px;
}

/* formulario */
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  padding: 2rem;
  padding-top: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group-col {
  display: flex;
  flex-direction: row;
  gap: 0.7rem;
}

.form-group-row {
  display: flex;
  flex-direction: column;
}

.form-group__2col {
  display: flex;
  gap: 0.5rem;
}

.form-group__exp_date {
  width: 100%;
}

.flex-group-row {
  display: flex;
  flex-direction: column;
}
.form__input-cvc {
  width: 151px;
}

.form__input {
  border: 1px solid var(--clr-Light_grayish_violet);
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.form__input::placeholder {
  color: var(--clr-Light_grayish_violet);
}

.form__input:focus {
  outline: 0; /* Elimina la linea por defecto */
  border: 1.2px solid;
  border-color: hsl(249, 99%, 64%) hsl(278, 94%, 30%);
}

.form__label {
  color: var(--clr-Very_dark_violet);
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;

  margin-bottom: 0.5rem;
}

.button {
  background: var(--clr-Very_dark_violet);
  color: var(--clr-White);
  font-size: 1rem;
  margin-top: 0.5rem;

  padding-block: 0.75rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

.button:hover{
  box-shadow: inset -34px -34px 55px -15px rgb(78,21,111),inset 34px 34px 55px -15px rgb(78,21,111);
}

.button:focus{
  outline: none;
  box-shadow: inset -34px -34px 55px -15px rgb(78,21,111),inset 34px 34px 55px -15px rgb(78,21,111);
}

.thankYou{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.thankYou-title{
  text-transform: uppercase;
  font-size: var(--fs-18px);
  font-weight: 500;
  margin:0;
  letter-spacing: 2px;
}

.thankYou-text{
  letter-spacing: 1px;
  color: var(--clr-Dark_grayish_violet);
}

.thankYou__button {
  width: 80%;
}

.hiden {
  display: none;
}

/* Error msj! */
.error{
  display: block;
  color: hsl(0, 100%, 66%);
  font-size: 0.7rem;
  margin-top: 0.3rem;
}
.invalid{
  border: 1.2px solid hsl(0, 100%, 66%);
}

/* MediaQuerry */
@media (min-width: 376px) {

  .wrapper {
    background-image: url(../img/bg-main-desktop.png);
    background-position: left;
    background-size: auto 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
  }

  .card {
    justify-content: center;
    gap: 2rem;
    padding-inline: 6rem;
  }

  .card-front {
    margin-top: 0;
    order: 1;
    width: 25rem;
  }

  .card-back {
    order: 2;
    width: 25rem;
    box-shadow: 15px 15px 20px -5px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
  }

  .form-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .form {
    width:25rem;
    /* Le doy un ancho determinado para evitar que se "rompa"  la parte de mes y año*/
    max-width: 100%;
  }

  .thankYou__button {
    width: 20rem;
  }
  
}