:root{
    --border-active:hsl(249, 99%, 64%) to hsl(278, 94%, 30%);
    --white: hsl(0, 0%, 100%);
    --red: hsl(0, 100%, 66%);
    --light-gray-violet: hsl(270, 3%, 87%);
    --dark-gray-violet: hsl(279, 6%, 55%);
    --very-dark-violet: hsl(278, 68%, 11%)
}

body {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-size: 18px;
    font-family: "Space Grotesk";
    font-weight:500;
    font-size: 16px;
    letter-spacing: 5%;
}

/* ----- typography - global ------*/

input,
button {
    font-family: "Space Grotesk";
    font-size: 1.125rem;
    border-radius: 10px;
}

input {
    padding-left:1em;
}

button:hover {
    opacity:0.9;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

label {
    text-transform: uppercase;
    font-size: 0.70rem;
    font-weight: bold;
    letter-spacing: 2.5px;
    margin-bottom:.75em;
}
/* ----- errors ----- */

.error-msg {
    color: var(--red);
    font-size: .75rem;
    font-weight: 600;
    margin:.5em 0;
}

#name-err,
#number-err,
#exp-err,
#cvc-err {
    visibility:hidden;
}

.error#name-err ,
.error#number-err,
.error #exp-err,
.error #cvc-err,
#number-err.error  {
    visibility:visible;
}

#payment-form input.error {
    border:solid var(--red) 1px;
}

main {
    display:flex;
    align-items: center;
    justify-content: center;
    min-height:100vh;
    width:100vw;
    background-color:var(--white);
    background-image: url("./images/bg-main-desktop.png");
    background-repeat: no-repeat;
    background-size: 33.3% 100%;
}

.container {
    display: flex;
    gap:40px;
}

.cards--container {
    display: flex;
    flex-direction: column;
    min-width:540px;
    gap:36px;
}

.cards {
    display:flex;
    flex-wrap: wrap;
    width:445px;
    min-height:245px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color:var(--white);
    font-size: 1.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 10px;
}

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

.card--back {
    background-image: url("./images/bg-card-back.png");
    margin-top:auto;
    align-self: flex-end;
}

.logo {
    height:47px;
    margin:1em;
}

.card-number {
    margin:.5em auto 0 2rem;
    width:100%;
}
.card-name,
.card-date {
    font-size: .85rem;
    letter-spacing: 2.5px;
    margin:0 2rem;
}

.card-date {
    margin-left:auto;
}

.card-cvc {
    font-size: .8rem;
    letter-spacing: 2px;
    margin:auto;
    padding: 0 1.75em .25em 0;
    width:80%;
    text-align: right;
}

/* ----- form ----- */

.form--container {
    display:flex;
    margin-left:auto;
    justify-content: center;
    align-items: center;
    width:540px;
}

#payment-form {
    display:flex;
    flex-direction: column; 
    width:70%;
}

#payment-form input {
    border:solid .5px rgb(212, 205, 205);
    height:42px;
    font-size:1.125rem;
}

#payment-form input,
#payment-form button {
    padding:auto 1.125em;
    border-radius: 5px;
    margin-bottom: 0;
}

#payment-form input:active {
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to right, hsl(249, 99%, 64%), hsl(278, 94%, 30%)) 1;
}

#payment-form input::placeholder {
    color: rgb(212, 205, 205);
}

#payment-form button {
    padding:.8em;
    margin-top:1.125em;
    background-color: var(--very-dark-violet);
    border:solid 1px var(--very-dark-violet);
    color:var(--white);
}

.card--details {
    margin-top:1.25em;
    display:flex;
}

.dates-container {
    width:50%;
    display:flex-wrap;
}

.dates-container > label {
    width:100%;
    display: flex;
}

.dates-container input {
    width: 30%;
}

.cvc-container {
    width:50%;
    display:flex;
    flex-direction: column;
}

.confirmation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:auto;
    min-width:100%;
}

.icon {
    height:80px;
}

.confirmation-heading {
    text-transform: uppercase;
    margin:1.5em auto .5em;
    font-size: 1.8rem;
    letter-spacing: 3px;
    font-weight:500;
}

.confirmation-message {
    margin:.0 auto 1rem;
    color:var(--dark-gray-violet);
    font-size: 1.125rem;
}

#continue-btn {
    padding:.75em;
    margin-top:2.25rem;
    background-color: var(--very-dark-violet);
    border:solid 1px var(--very-dark-violet);
    color:var(--white);
    border-radius: 7px;
    width:70%;
}

/* ----- media queries - all ----- */

@media only screen and (max-width: 800px) {
    body {
        font-size: 14px;
    }
    
    main {    
        background-image: url("./images/bg-main-mobile.png");
        background-size: 100vw 240px;
    }
    
    .container {
      flex-direction: column;
      align-self: flex-start;
      margin: 2em 1em 1em;
      width:100%;
    }

    .cards--container {
        min-width:100%;
        align-items: space-between;
    }
    
    .cards {
        max-width:285px;
        min-height:155px;
        position: relative;
        font-size: .8rem;
    }

    .card--front {
        z-index: 1;
        margin-top:26%;
    }
    
    .card--back {
        margin-top:0;
        margin-left:0;
        align-self:flex-end;
    }

    .logo {
        height:30px;
        margin:1.125rem;
    }
    
    .card-number {
        font-size: 1.125rem;
        margin-left: 1.2em;
        margin-top:-10px;
        height:10px;
        padding:0;       
    }

    .card-name,
    .card-date {
        font-size: .65rem;
        margin:5px 2em 0;
        letter-spacing: 1px;
    }

    .card-date {
        margin-left:auto;
    }

    .card--back {
        position: absolute;
    }

    .card-cvc {
        font-size: .6rem;
    }

    .form--container {
        width:100%;
    }
    
    #payment-form,
    .confirmation-container {
        margin:5px 1rem auto;
        width:100%;
    }
    .error-msg {
        margin:2px 0;
    }
    
    .card--details {
        margin:0;
    }

    .dates-container {
        width:50%;
    }
    
    .dates-container > label {
        width:100%;
        display: flex;
    }

    .dates-container > label,
    .cvc-container > label {
        margin-top:0;
    }
    
    .dates-container input {
        width: 30%;
    }
    
    .cvc-container {
        width:50%;
        display:flex;
        flex-direction: column;
        margin-top: 0;
    }

    #payment-form button {
        padding:.9em;
        margin-top: .5rem;
    }

    #continue-btn {
        width:calc(100% - 1rem)
    }
  }

.hidden,
#payment-form.hidden {
    display:none;
}