html {
    box-sizing: border-box;
    font-family: 'Inter-Regular';
    font-style: normal;
}

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

* {
    margin: 0px;
    padding: 0px;
}

@font-face {
    font-family: 'Inter-Bold';
    src: url(Fonts/Inter_24pt-Bold.ttf);
    font-style: normal;
}

@font-face {
    font-family: 'Inter-Semibold';
    src: url(Fonts/Inter_18pt-SemiBold.ttf);
    font-style: normal;
}

@font-face {
    font-family: 'Inter-Medium';
    src: url(Fonts/Inter_18pt-Medium.ttf);
    font-style: normal
}

@font-face {
    font-family: 'Inter-Regular';
    src: url(Fonts/Inter_18pt-Regular.ttf);
    font-style: normal
}

:root {
    --background-color-white: #FFFFFF;
    --background-color-lighterWhite: #F3F4F6;
    --background-color-grey: #D2D5DA;
    --background-color-input: #E5E7EB;
    --background-color-button: hsl(240, 3%, 12%);
    --color-button: #F3F4F6;
    --section-border-radius: 1rem;
    --main-border-radius: 1.5rem;
    --buttonInput-border-radius: .50rem;

    /* Fluid type */
    /* Step -3: 9.2593px → 12.288px */
    --step--3: clamp(0.5787rem, 0.5106rem + 0.3029vw, 0.768rem);
    /* Step -2: 11.1111px → 15.36px */
    --step--2: clamp(0.6944rem, 0.5988rem + 0.4249vw, 0.96rem);
    /* Step -1: 13.3333px → 19.2px */
    --step--1: clamp(0.8333rem, 0.7013rem + 0.5867vw, 1.2rem);
    /* Step 0: 16px → 24px */
    --step-0: clamp(1rem, 0.82rem + 0.8vw, 1.5rem);
    /* Step 1: 19.2px → 30px */
    --step-1: clamp(1.2rem, 0.957rem + 1.08vw, 1.875rem);
    /* Step 2: 23.04px → 37.5px */
    --step-2: clamp(1.44rem, 1.1147rem + 1.446vw, 2.3438rem);
    /* Step 3: 27.648px → 46.875px */
    --step-3: clamp(1.728rem, 1.2954rem + 1.9227vw, 2.9297rem);
    /* Step 4: 33.1776px → 58.5938px */
    --step-4: clamp(2.0736rem, 1.5017rem + 2.5416vw, 3.6621rem);
    /* Step 5: 39.8131px → 73.2422px */
    --step-5: clamp(2.4883rem, 1.7362rem + 3.3429vw, 4.5776rem);

    /* Fluid space */
    /* @link https://utopia.fyi/space/calculator?c=360,16,1.2,1360,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    /* Space 3xs: 4px → 6px */
    --space-3xs: clamp(0.25rem, 0.205rem + 0.2vw, 0.375rem);
    /* Space 2xs: 8px → 12px */
    --space-2xs: clamp(0.5rem, 0.41rem + 0.4vw, 0.75rem);
    /* Space xs: 12px → 18px */
    --space-xs: clamp(0.75rem, 0.615rem + 0.6vw, 1.125rem);
    /* Space s: 16px → 24px */
    --space-s: clamp(1rem, 0.82rem + 0.8vw, 1.5rem);
    /* Space m: 24px → 36px */
    --space-m: clamp(1.5rem, 1.23rem + 1.2vw, 2.25rem);
    /* Space l: 32px → 48px */
    --space-l: clamp(2rem, 1.64rem + 1.6vw, 3rem);
    /* Space xl: 48px → 72px */
    --space-xl: clamp(3rem, 2.46rem + 2.4vw, 4.5rem);
    /* Space 2xl: 64px → 96px */
    --space-2xl: clamp(4rem, 3.28rem + 3.2vw, 6rem);
    /* Space 3xl: 96px → 144px */
    --space-3xl: clamp(6rem, 4.92rem + 4.8vw, 9rem);
    /* Space 4xl: 120px → 180px */
    --space-4xl: clamp(7.5rem, 6.15rem + 6vw, 11.25rem);
    /* Space 5xl: 136px → 204px */
    --space-5xl: clamp(8.5rem, 6.97rem + 6.8vw, 12.75rem);

    /* @link https://utopia.fyi/clamp/calculator?a=360,1350,14—16|16—20&p=padding */
    --padding-4-8: clamp(0.25rem, 0.16rem + 0.4vw, 0.5rem);
    --padding-6-12: clamp(0.375rem, 0.24rem + 0.6vw, 0.75rem);
    --padding-10-14: clamp(0.625rem, 0.535rem + 0.4vw, 0.875rem);
    --padding-14-16: clamp(0.875rem, 0.8295rem + 0.202vw, 1rem);
    --padding-16-20: clamp(1.25rem, 1.1591rem + 0.404vw, 1.5rem);
    --padding-16-20: clamp(1rem, 0.9091rem + 0.404vw, 1.25rem);
    --padding-20-24: clamp(1.25rem, 1.1591rem + 0.404vw, 1.5rem);
    --padding-24-28: clamp(1.5rem, 1.4091rem + 0.404vw, 1.75rem);
    --padding-28-32: clamp(1.75rem, 1.66rem + 0.4vw, 2rem);
    --padding-32-36: clamp(2rem, 1.91rem + 0.4vw, 2.25rem);

    --grid-max-width: 13.50rem;
    --grid-gutter: var(--space-xs-s, clamp(0.75rem, 2.625rem + -8.3333vw, 1.5rem));
    --grid-columns: 2;
}

h2 {
    font: Inter-Bold normal 700;
    font-size: var(--step-0);
    letter-spacing: .10rem;
}

body {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color-lighterWhite);
}

header {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
}

img#banner_image {
    width: 100%;
    height: auto;
}

div#title {
    margin-top: var(--space-m);
    top: clamp(-1.5rem, -0.82rem + -0.8vw, -1rem);
    padding: var(--space-s);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-button);
}

main#main_page {
    position: absolute;
    top: clamp(1.5rem, 2.5rem + 3.5vw, 7rem);
    display: flex;
    width: fit-content;
    height: auto;
    justify-content: center;
    border-radius: var(--main-border-radius);
}

p#quantity {
    font-size: var(--step--3);
    margin-left: var(--space-2xs);
    text-transform: uppercase;
    padding: var(--space-3xs) var(--space-xs);
    background-color: var(--background-color-button);
    border-radius: 1rem;
}

section.checkout {
    width: 100%;
    height: auto;
    padding: var(--space-xs);
}

#checkout_items_iPhone {
    font-size: var(--step--2);
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
        'iPhone iPhonePrice'
        'iPhoneColor iPhoneColor'
        'iPhoneQuantity iPhoneRemoveItem';
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: var(--grid-gutter);
    margin-inline: auto;
    gap: 0rem var(--grid-gutter);
}

#checkout_items_watch {
    font-size: var(--step--2);
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
        'watch watchPrice'
        'watchColor watchColor'
        'watchQuantity watchRemoveItem';
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: var(--grid-gutter);
    margin-inline: auto;
    gap: 0rem var(--grid-gutter);
}

#checkout_items_iMac {
    font-size: var(--step--2);
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
        'iMac iMacPrice'
        'iMacColor iMacColor'
        'iMacQuantity iMacRemoveItem';
    justify-content: space-between;
    width: 100%;
    padding-left: var(--grid-gutter);
    margin-inline: auto;
    gap: 0rem var(--grid-gutter);

}

section#checkout_items {
    background-color: var(--background-color-input);
    border-radius: var(--section-border-radius) 0 0 var(--section-border-radius);
}

section#contact_info {
    background-color: var(--background-color-white);
    border-radius: 0 var(--section-border-radius) var(--section-border-radius) 0;
}

.pics_img_div {
    display: flex;
    background-color: var(--background-color-lighterWhite);
    border-radius: var(--buttonInput-border-radius);
    height: auto;
}

.items {
    font-family: Inter-Bold;
}

#iPhone_12 {
    padding: var(--padding-4-8) var(--padding-28-32);
}

#Apple_Watch {
    padding: var(--padding-16-20) var(--padding-32-36);
}

#iMac_Apple {
    padding: var(--padding-4-8);
}

#iPhonePrice {
    grid-area: iPhonePrice;
}

#iPhone {
    grid-area: iPhone;
}

#watch {
    grid-area: watch;
}

#iMac {
    grid-area: iMac;
}

#watchPrice {
    grid-area: watchPrice;

}

#iMacPrice {
    grid-area: iMacPrice;
}

#iPhoneColor {
    grid-area: iPhoneColor;
}

#watchColor {
    grid-area: watchColor;
}

#iMacColor {
    grid-area: iMacColor;
}

#iPhoneQuantity {
    grid-area: iPhoneQuantity;
}

#watchQuantity {
    grid-area: watchQuantity;
}

#iMacQuantity {
    grid-area: iMacQuantity;
}

#iPhoneRemove {
    grid-area: iPhoneRemoveItem;
    justify-self: end;
}

#watchRemove {
    grid-area: watchRemoveItem;
    justify-self: end;
}

#iMacRemove {
    grid-area: iMacRemoveItem;
    justify-self: end;
}

.checkout_items {
    list-style-type: none;

}

.cart_items {
    margin-bottom: var(--space-xs);
    display: flex;
    justify-content: center;
}

input#input_coupon {
    font-size: var(--step--2);
    padding: var(--space-2xs);
    border-radius: var(--buttonInput-border-radius);
    border: none;
    min-width: var(--space-xl);
}

button#coupon_button {
    padding: var(--space-2xs);
    font-size: var(--step--2);
    border-radius: var(--buttonInput-border-radius);
    text-transform: capitalize;
    color: var(--color-button);
    background-color: var(--background-color-button);
    min-width: var(--space-2xl);
    border: none;
}

div#coupon {
    margin: var(--space-xs) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 var(--space-xs);
    width: 100%;
}

dt {
    justify-self: start;
}

dd {
    justify-self: end;
}

#cart_items_total {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(2, auto);
    grid-template-areas:
        'subtotal sub_total_price'
        'tax tax_price'
        'total total_price';
    font-family: Inter-regular;
    font-size: var(--step--2);
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3xs) 0rem;
    gap: var(--space-2xs);
}

#sub_total {
    grid-area: subtotal;
}

#tax {
    grid-area: tax;
}

#overall_total {
    font-family: Inter-semibold;
    grid-area: total;
}

#sub_total_price {
    grid-area: sub_total_price;
}

#tax_price {
    grid-area: tax_price;
}

#total_price {
    font-family: Inter-semibold;
    grid-area: total_price;
}

form#form_checkout {
    width: 100%;
    height: auto;
}

div#country {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

h3#contact_info {
    font-size: var(--step--1);
    margin-bottom: var(--space-m);
    text-transform: capitalize;
}

label.contact_info_labels {
    font-family: Inter-medium;
    font-size: var(--step--2);
    text-transform: capitalize;
}

input#form_first_lastName,
input#email {
    font-size: var(--step--2);
    width: 100%;
    padding: var(--space-2xs);
    margin: var(--space-2xs) 0rem var(--space-s) 0rem;
    border-radius: var(--buttonInput-border-radius);
    background-color: var(--background-color-input);
    border-style: none;
}

input#form_first_lastName:not(:placeholder-shown):invalid,
input#email:not(:placeholder-shown):invalid {
    outline-color: rgb(255, 0, 0);
}

input#form_first_lastName:focus:invalid,
input#email:focus:invalid {
    outline-color: orange;
}

input#form_first_lastName:focus:invalid,
input#email:focus:invalid {
    outline-color: orange;
}

input#input_coupon:focus:valid,
select#form_country:focus:valid,
input#postal_code:focus:valid {
    outline-color: orange;
}

select#form_country,
input#postal_code {
    font-size: var(--step--2);
    width: var(--space-4xl);
    padding: var(--space-2xs);
    margin: var(--space-3xs) 0rem var(--space-s) 0rem;
    border-radius: var(--buttonInput-border-radius);
    background-color: rgb(239, 240, 241);
    border-style: none;
}

button[id=continue_button] {
    width: 100%;
    margin: var(--space-3xs) 0rem;
    padding: var(--space-2xs);
    text-transform: capitalize;
    font-size: var(--step--2);
    color: var(--color-button);
    border: none;
    background-color: var(--background-color-button);
    border-radius: var(--buttonInput-border-radius);
}

button[id=continue_button]:hover,
button#coupon_button:hover {
    background-color: oklch(from var(--background-color-button) calc(l + 0.05) c h);
    cursor: pointer;
}

@media screen and (width < 600px) {
    main#main_page {
        flex-direction: column;
        justify-content: center;
    }

    section#checkout_items {
        background-color: var(--background-color-input);
        border-radius: var(--section-border-radius) var(--section-border-radius) 0 0;
    }

    section#contact_info {
        background-color: var(--background-color-white);
        border-radius: 0 0 var(--section-border-radius) var(--section-border-radius);
    }

}