@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-image: url("../../images/bg-main-desktop.png");
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 100vh;
  padding: 1.5rem;
}

input {
  padding: 0.6rem;
  border-radius: 5px;
  border: 1px solid hsl(270, 3%, 87%);
  width: 100%;
  font-size: 1rem;
  color: rgb(33, 9, 47);
  transition: all 0.3s;
}

input:focus {
  border-color: hsl(249, 99%, 64%);
  outline: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  /* appearance: none; */
}

.card--front {
  background-image: url("../../images/bg-card-front.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.card--back {
  background-image: url("../../images/bg-card-back.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.cvc--code {
  top: 49%;
}

button:hover {
  box-shadow: 0 0 15px 0 rgb(33, 9, 47);
}

.error,
.error span {
  display: none;
  transition: all 0.3s;
}

.error.error--active {
  display: flex;
}

input.error--active {
  border: 1px solid red;
}

.card--form,
.card--complete {
  transition: all 0.3s;
}

.card--form.card--hidden {
  display: none;
}

.card--complete.card--hidden {
  display: none;
}