* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-size-adjust: auto;
    fill: hsl(215, 19%, 25%);
}

body {
    margin: 0 auto;
    max-width: 2000px;
    min-width: 800px;
    background-color: hsl(35, 55%, 95%);
    color: hsl(215, 19%, 80%);
    font-size: 1.1rem;
}

svg {
    width: 2em;
    height: fit-content;
}

h2 {
    font-size: 2.5rem;
    color: hsl(215, 19%, 85%);

}

::placeholder {
    color: hsl(215, 19%, 70%);
}





.row {
    display: flex;
    margin: 2.5% 5%;
    gap: 2em;
}

.row h1 {
    flex: 1;
}





.wrapper {
    margin: 2.5% 10%;
    background-color: hsl(215, 19%, 45%);
    border-radius: 1em;
    display: flex;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-areas:
        "checkout review"
        "left-col right-col";
}

.checkout {
    grid-area: checkout;
    padding: 3.5% 5%;
}

.review {
    grid-area: review;
    padding: 3.5% 5%;
}

.left-col,
.right-col {
    padding: 7% 10%;
    font-weight: 800;
}

.left-col {
    grid-area: left-col;
}

.right-col {
    grid-area: right-col;
}





.shipping-information {
    width: 95%;
    margin-right: auto;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 10px;
}

.shipping-information div,
.shipping-information label {
    display: flex;
    align-items: center;
    align-content: center;
}

.shipping-information div {
    border: 2px solid hsl(215, 19%, 25%);
    border-radius: .5em;
    padding: 5px 10px;
    margin: 10px;
}

.simple-info span,
.location-info span {
    color: hsl(0, 90%, 39%);
}

.location-info {
    display: flex;
    align-content: space-between;
    gap: .5em;
}





.agreement {
    display: flex;
    align-items: center;
}




.right-col a {
    text-decoration: none;
    color: hsl(215, 19%, 80%);
}

.product {
    display: flex;
    align-items: start;
}

.product-image {
    width: 200px;
    height: 150px;
    background-size: 102%;
    border-radius: .5em;
    transition: all 500ms;
}

.product:hover .product-image {
    background-size: 100%;
}

.product-description {
    padding: .5em .75em;
}

.price {
    font-size: 1rem;
    color: hsl(215, 19%, 77.5%);
    margin-left: 1em;
}




.discount {
    display: flex;
    align-content: center;
    align-items: center;
    margin-left: 10%;

}

.discount svg {
    height: 1.75rem;
}

.discount input,
.discount button {
    height: 1.5rem;
    margin: 0;
    border: none;
}

.discount button {
    padding: 0 .5rem;
    background-color: hsl(215, 19%, 37.5%);
}

.discount button p {
    color: hsl(215, 19%, 80%);
}

.discount button:hover {
    background-color: hsl(215, 19%, 32.5%);
}

.discount button:hover p {
    color: hsl(215, 19%, 70%);

}





.cost-info {
    width: 75%;
    border: 2px solid hsl(215, 19%, 15%);
}

.cost-breakdown {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid hsl(215, 19%, 15%);
    padding: .25em 1em;
}

.cost-type {
    color: hsl(215, 19%, 20%);
    font-weight: 700;
}

.cost {
    color: hsl(215, 19%, 15%);
    font-weight: 800;
}

#total-cost,
#total-type {
    font-weight: 900;
    font-size: 1.25rem;
    text-decoration: underline;
}





.pay-now {
    width: auto;
    margin: 0 25%;
    color: hsl(215, 19%, 75%);
    background-color: hsl(215, 19%, 30%);
    border: 2px solid hsl(215, 19%, 28%);
    padding: .5rem 1rem;
    border-radius: 1em;
}

.pay-now:hover {
    color: hsl(215, 19%, 70%);
    background-color: hsl(215, 19%, 25%);
    border: 2px solid hsl(215, 19%, 20%);
}





.false-promise {
    width: 75%;
}

.security {
    font-size: 1.25rem;
    display: flex;
    align-content: center;
    align-items: center;
}

.security svg {
    width: 1.5em;
    height: fit-content;
}

.sure {
    color: hsl(215, 19%, 60%);
    font-size: .75rem;
    padding: 0 2.7em;
}