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

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.17;
    min-width: 320px;
    overflow-y: hidden;
}

.layout {
    background-color: #F2F5F7;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    width: 100%;
    max-width: 700px;
    background-color: #ffffff;
    box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    text-align: center;
    padding: 100px;
}

.header {
    margin-bottom: 30px;
}

.title {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(90deg, #9C171B 0%, #DB435D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.product-image {
    margin-bottom: 30px;
    display: block;
}

.fieldset {
    margin-bottom: 30px;
}

.input-wrapper {
    position: relative;
}

.input-wrapper:first-child {
    margin-bottom: 15px;
}

.input-wrapper::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.input-wrapper:last-child::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.1067 11.5085L13.009 9.41518C12.2598 8.66758 10.9862 8.96665 10.6865 9.93851C10.4618 10.6114 9.71257 10.9852 9.03831 10.8356C7.53996 10.4618 5.51718 8.51806 5.14259 6.94809C4.91783 6.27522 5.36734 5.52761 6.0416 5.30336C7.01553 5.00432 7.31521 3.73339 6.56603 2.98578L4.46833 0.892492C3.86898 0.369169 2.96997 0.369169 2.44555 0.892492L1.02211 2.31294C-0.401331 3.80815 1.17194 7.77045 4.69308 11.2842C8.21422 14.7979 12.1849 16.4427 13.6832 14.9475L15.1067 13.527C15.6311 12.9289 15.6311 12.0318 15.1067 11.5085Z' fill='%23D2D2D2'/%3E%3C/svg%3E%0A");
}

.input-wrapper:first-child::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.99578 15.5C7.34162 15.4615 6.68514 15.4435 6.0339 15.3783C5.49288 15.324 4.95496 15.2281 4.42112 15.1248C4.0336 15.0498 3.64937 14.9491 3.27368 14.8311C2.5324 14.598 1.82837 14.2912 1.24291 13.7789C0.932816 13.5076 0.693548 13.1885 0.575176 12.7991C0.493091 12.5292 0.478149 12.2534 0.530737 11.9728C0.637855 11.4014 0.841029 10.863 1.15151 10.3671C1.3215 10.0958 1.51381 9.83204 1.73057 9.59377C1.97236 9.32799 2.22308 9.06221 2.53706 8.86892C2.93331 8.62488 3.31657 8.36059 3.76813 8.20577C4.1151 8.08682 4.46595 7.98813 4.82883 7.93126C5.02074 7.90115 5.21654 7.89557 5.40924 7.86918C5.60135 7.84279 5.77367 7.88647 5.94522 7.96471C6.10473 8.03757 6.26948 8.1002 6.43481 8.16024C6.60053 8.22027 6.76645 8.2842 6.93819 8.32286C7.10003 8.35929 7.26924 8.36542 7.43535 8.38438C7.59525 8.4026 7.75476 8.42471 7.91525 8.43624C7.98452 8.44107 8.05555 8.41598 8.1256 8.41728C8.46209 8.42341 8.7879 8.36022 9.11197 8.28532C9.2905 8.24406 9.47311 8.21265 9.64426 8.1515C9.82415 8.08738 9.992 7.99259 10.1659 7.91249C10.1971 7.89799 10.2311 7.88182 10.2646 7.87959C10.7063 7.85189 11.1418 7.89762 11.5677 8.00653C11.7723 8.05876 11.969 8.13905 12.1685 8.20893C12.3218 8.26283 12.4792 8.30967 12.6253 8.37825C13.4615 8.77004 14.138 9.34081 14.6598 10.0772C14.9212 10.4459 15.1364 10.84 15.271 11.2687C15.3488 11.5165 15.4249 11.7668 15.4727 12.0209C15.5437 12.3997 15.4738 12.766 15.2926 13.1099C15.0335 13.6011 14.6128 13.9408 14.1345 14.2226C13.6744 14.4938 13.183 14.7025 12.6649 14.8456C12.2166 14.9694 11.7651 15.0865 11.3089 15.1785C10.1406 15.4141 9.11721 15.471 7.99578 15.5Z' fill='%23D2D2D2'/%3E%3Cpath d='M11.5495 3.90313C11.5574 5.82306 9.95339 7.10679 8.49896 7.27648C7.31834 7.4142 6.30538 7.09043 5.47114 6.29272C4.78924 5.64054 4.45333 4.83726 4.44576 3.90722C4.43102 2.05049 6.0436 0.489828 8.02081 0.50005C9.95164 0.510086 11.5656 2.04064 11.5495 3.90313Z' fill='%23D2D2D2'/%3E%3C/svg%3E%0A");
}

.input {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 1px solid #D2D2D2;
    border-radius: 4px;
    outline: none;
    padding: 0 14px 0 48px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

input::placeholder {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

.button {
    margin-bottom: 40px;
    width: 100%;
    height: 80px;
    background: linear-gradient(90deg, #9C171B 0%, #DB435D 100%);
    border-radius: 4px;
    border: none;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.button span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 14px), -50%);
}

.button span::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: -38px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.5'%3E%3Cpath d='M17.2758 5H7.7246C7.04837 5 6.5 4.41071 6.5 3.68401V1.31599C6.50039 0.589292 7.04837 0 7.7246 0H17.2754C17.9516 0 18.5 0.589292 18.5 1.31599V3.68443C18.5 4.41113 17.952 5 17.2758 5Z' fill='white'/%3E%3Cpath d='M17.4138 6H7.58658C5.8819 6 4.5 7.27516 4.5 8.84862V22.1685C4.5 23.18 5.38834 24 6.48421 24H18.5158C19.6117 24 20.5 23.18 20.5 22.1685V8.84862C20.5 7.27516 19.1181 6 17.4138 6Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.note {
    font-size: 12px;
    max-width: 300px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    color: #717171;
    letter-spacing: 0.5px;
    opacity: .5;
}

.note a {
    color: inherit;
}

.discount {
    text-align: center;
}
.discount-title{
    width: 100%;
    font-weight: bold;
    font-size: 19px;
    line-height: 22px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    background: #44A30A;
    padding: 10px 0 7px;
}
.discount-price-container{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 25px 0;
    background: #FCFCFC;
}
.old-price,
.new-price{
    width: 50%;
    font-weight: bold;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center; 
    margin: 0 auto;   
}
.old-price{        
    font-weight: normal;
    color: #423C36;
}
.new-price{
    color: #44A30A;
}
.price-title{
    max-width: 144px;
    margin: 0 auto;
    padding: 6px 0 0;    
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
}


/* breakpoints */
@media (max-width: 1440px) {
    .content {
        max-width: 570px;
        padding: 70px 70px 40px;
    }

    .title {
        font-size: 30px;
    }

    .button {
        height: 70px;
    }
}

@media (max-width: 768px) {
    .layout {
        background-color: #ffffff;
    }

    .content {
        max-width: 368px;
        box-shadow: none;
        padding: 0;
    }
}

@media (max-width: 414px) {
    .content {
        max-width: 100%;
        padding: 0 20px;
    }

    .title {
        font-size: 18px;
    }

    .header, .product-image, .fieldset {
        margin-bottom: 20px;
    }

    .button {
        margin-bottom: 30px;
        height: 60px;
        font-size: 18px;
    }
}