:root {
    --ff-base: "Space Grotesk", serif;

    --fs-step--3: 0.5625rem;  /* 9px */
    --fs-step--2: 0.75rem;    /* 12px */
    --fs-step--1: 0.875rem;   /* 14px;*/
    --fs-step-0: 1rem;        /* 16px; */
    --fs-step-1: 1.125rem;    /* 18px; */
    --fs-step-2: 1.25rem;     /* 20px; */
    --fs-step-3: 1.5rem;      /* 24px; */
    --fs-step-4: 1.75rem;      /* 28px; */

    --clr-neutral-900: hsl(278, 68%, 11%);
    --clr-neutral-300: hsl(279, 6%, 55%);
    --clr-neutral-200: hsl(270, 3%, 87%);
    --clr-neutral-100: hsl(0, 0%, 100%);

    --clr-Linear-gradient: linear-gradient(hsl(249, 99%, 64%), hsl(278, 94%, 30%));
    --clr-Red: hsl(0, 100%, 66%);

    /* container size */
    --content-size: 1050px;
    --full-width-size: 1fr;
    --space-lr: 1rem;

    --calc-content-size: min(100% - calc(var(--space-lr) * 2), var(--content-size));
    --calc-full-width-size: minmax(var(--space-lr), var(--full-width-size));
}

/* set box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* reset margin */
h1,
h2,
h3,
h4,
h5,
h6,
p,
body {
    margin: 0;
}

/* setup the body */
body {
    font-family: var(--ff-base);
}

/* Reset list */
ul[type = "role"],
ol[type = "role"]{
  list-style: none;
}

/* Reset link */
ul[type = "role"] a,
ol[type = "role"] a { 
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture {
    object-fit: cover;
    display: block;
}

/* Make form elements to work with */
input,
button,
textarea,
select {
    font: inherit;
}

/* remove animation for people who' ve turned them off */
@media (prefers-reduced-motion: reduce)  {
    *,
    *::before,
    *::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*                                                                                                     */
/*                                                      layout                                         */
/*                                                                                                     */

.btn {
    width: 100%;
    height: max-content;
    padding-block: 0.75em;
    padding-inline: 1rem;
    border-radius: 0.5em;

    font-size: var(--fs-step-1);
    font-weight: 500;

    border: 0.0625em solid var(--clr-neutral-900);
    background: var(--clr-neutral-900);
    color: var(--clr-neutral-100);
}

.btn:hover {
    cursor: pointer;
    background-color: var(--clr-neutral-300);
    border-color: var(--clr-neutral-300);
}

/*                                                                                                     */
/*                                                      layout                                         */
/*                                                                                                     */

.page-layout {
    display: grid;
    grid-template-columns: 
        [full-width-start] var(--calc-full-width-size) 
            [content-start] calc(var(--calc-content-size) * 0.5)
            
                [center-point]

            calc(var(--calc-content-size) * 0.5) [content-end] 
        var(--calc-full-width-size) [full-width-end];
}

.page-layout > * {
    grid-column: content;
}

@media screen and (max-width: 649px) {
    .page-layout {
        min-height: 100dvh;
    }
}

@media screen and (min-width: 650px) {
    .page-layout {
        min-height: 100dvh;
    }
    
    .page-layout > .form {
        margin-inline-start: clamp(0.0625rem, -3.8936rem + 12.6596vw, 7.5rem);
    }
    
    .page-layout > .completed-state {
        align-self: center;
        margin-inline-start: clamp(0.0625rem, -3.8936rem + 12.6596vw, 7.5rem);
    }
}

/*                                                                                                     */
/*                                                 credit card                                         */
/*                                                                                                     */

.card{
    display: grid;
}

.card img {
    max-width: 84px;
    max-height: 47px;
}

.card p {
    font-weight: 500;
    color: var(--clr-neutral-100);
}

.card::before {
    content: '';
}

.card .card-front {
    background-image: url(images/bg-card-front.png);
    box-shadow: 0 2rem 10rem -0.125rem hsla(0, 3%, 7%, 0.5);
    background-repeat: no-repeat;
    border-radius: 0.75rem;
    padding: clamp(1rem, 0.4681rem + 1.7021vw, 2rem);

    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-rows: max-content 1fr 1fr;
}

.card .card-front p:nth-of-type(1) {
    grid-column: span 3;
    align-self: end;
    letter-spacing: 1px;
    font-size: var(--fs-step-2);
    text-decoration: none;
}

.card .card-front p:nth-of-type(2) {
    grid-column: span 2;
    align-self: end;
    font-size: var(--fs-step--1);
}

.card .card-front p:nth-of-type(3) {
    grid-column: 3;
    align-self: end;
    font-size: var(--fs-step--1);
}

.card .card-back {
    background-image: url(images/bg-card-back.png);
    background-repeat: no-repeat;
    box-shadow: 0 2rem 10rem -0.125rem hsla(0, 3%, 7%, 0.5);
    border-radius: 0.75rem;
    padding: 4em;
    display: grid;
}

.card .card-back p{
    align-self: center;
    justify-self: end;
}

@media screen and (max-width : 649px) {
    .card {
        grid-column: full-width;
        grid-template-columns:1rem minmax(0, 100px) minmax(250px, 1fr) minmax(0, 150px) 1rem;
        grid-template-rows: 128px 114px 128px;
    }

    .card::before {
        grid-area: 1 / 1 / 3 / -1;
        content: '';
        background-image: url(images/bg-main-mobile.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .card-front {
        margin: 0.25rem 0 3rem 0;
        grid-area: 2 / 2 / 4 / 4;
        z-index: 3;
        width: min(100%, 360px);
        background-size: cover;
        background-position: left bottom;
    }

    .card-back {
        margin-block: 2rem;
        grid-area: 1 / 3 / 3 / 5;
        z-index: 2;
        background-size: contain;
        background-position: center right;
    }
}

@media screen and (min-width: 650px){
    .card {
        grid-column: full-width / center-point;
        grid-template-columns: minmax(1rem, 1fr) minmax(0, 120px) 207px minmax(0, 120px) minmax(0, 120px);
        grid-template-rows: 1fr 309px 309px 1fr;
    }

    .card::before {
        grid-area: 1 / 1 / 5 / 4;
        background-image: url(images/bg-main-desktop.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .card-front {
        margin-block-start: 3em;
        margin-block-end: 1em;
        grid-area: 2 / 2 / 3 / 5;
        z-index: 3;
        background-size: cover;
        background-position: left bottom;
    }

    .card-back {
        margin-block-start: 1em;
        margin-block-end: 3em;
        grid-area: 3 / 3 / 4 / 6;
        z-index: 2;
        background-size: cover;
        background-position: center center;
    }
}

/*                                                                                                     */
/*                                                state credit card                                    */
/*                                                                                                     */

.card p[state = 'prePaint']{
    color:gold;
}

.card span[state = 'prePaint']{
    color:gold;
}

.card p[state = 'success']{
    color:white;
}

.card span[state = 'success']{
    color:white;
}

/*                                                                                                     */
/*                                                 form register                                       */
/*                                                                                                     */

.form {
    margin-block-end: 2em;
}

.form > * + * {
    margin-block-start: 1.25em;
}

.form .row {
    display: grid;
    gap: 0 0.75rem;
    grid-template-columns: 1fr 1fr;
}

.form .row .form-control:is(.form-exp-date) {
    display: grid;
    gap: 0 0.75rem;
    grid-template-columns: 1fr 1fr;
}

.form .row .form-control:is(.form-exp-date) label {
    grid-column: span 2;
}

.form .row .form-control:is(.form-cvc) {
    display: grid;
    gap: 0 0.75rem;
    grid-template-columns: 1fr 1fr;
}

.form .row .form-control:is(.form-cvc) label,
.form .row .form-control:is(.form-cvc) input {
    grid-column: span 2;
}

.form .form-control small {
    grid-column: span 2;
}

label {
    font-weight: 500;
    font-size: var(--fs-step--2);
    letter-spacing: 0.115em;
    text-transform: uppercase;
}

input[type = 'text']{
    font-size: var(--fs-step-1);
    line-height: 27px;
    font-weight: 500;
    width: 100%;
    margin-block-start: 0.5625rem;
    padding-block: 0.5rem;
    padding-inline: 1em;
    border-radius: 0.5em;
    border: 0.0625em solid var(--clr-neutral-200);
    color: var(--clr-neutral-300);
}


@media screen and (max-width: 649px) {
    .form {
        padding-inline: 1em;
    }
}

@media screen and (min-width: 650px){ 
    .form {
        grid-column: center-point / content;
        align-self: center;
    }
}

/*                                                                                                     */
/*                                       form set state success                                  */
/*                                                                                                     */

.form[state = 'success'] {
    display: none;
}

/*                                                                                                     */
/*                                       form control set state error                                  */
/*                                                                                                     */

.form-control[state = 'error'] input {
    border-color: var(--clr-Red);
}

.form-control[state = 'error'] small {
    padding-inline-start: 0.5em;
    margin-block-start: 0.25em;
    font-weight: 500;
    font-size: var(--fs-step--1);
    color: var(--clr-Red);
}

/*                                                                                                     */
/*                                                completed state                                      */
/*                                                                                                     */

.completed-state {
    margin-block-end: 2em;
    height: 291px;
    display: grid;
    grid-template-rows: 1fr max-content 1fr max-content;
    text-align: center;
}

.completed-state img{
    margin-inline: auto;
    margin-block-end: 2.5em;
}

.completed-state h3 {
    font-size: var(--fs-step-4);
    font-weight: 500;
    line-height: 1em;
    letter-spacing: 0.125em;
}

.completed-state h3 + p {
    margin-block-start: 1em;
}

.completed-state p {
    font-size: var(--fs-step--1);
    font-weight: 500;
    letter-spacing: 0.125em;
    line-height: 2em;
    color: var(--clr-neutral-300);
}

@media screen and (max-width : 649px) {
    .completed-state {
        padding-inline: 1em;
        grid-column: content;
    }
}

@media screen and (min-width : 650px) {
    .completed-state {
        grid-column: center-point / content;
    }
}