*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: inherit;
    font-family: "Onest", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
}

:root {
    /* Primary Colors */
    --primary-800: #242526;
    --primary-white: #ffffff;

    /* Neutral Colors / Grays */
    --gray-800: #242526;
    --gray-700: #3a3b3c;
    --gray-600: #505151;
    --gray-500: #666667;
    --gray-400: #7c7c7d;
    --gray-300: #919292;
    --gray-200: #a7a8ab;
    --gray-100: #bdbebe;
    --gray-50: #d3d3d3;
    --gray-25: #e9e9e9;
    --gray-15: #f8f9fa;
    --gray-0: #ffffff;

    /* Action Colors */
    --action-red: #FF1D1D;
    --action-green: #58B338;
}

.paper {
    width: 100%;
    border-width: .1875rem .1875rem .375rem .1875rem;
    border-style: solid;
    border-color: #F2F2F2;
    background-color: var(--gray-0);
    padding: 2rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

label {
    font-family: "Onest", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--gray-700);
    font-size: .875rem;

    p {
        margin-bottom: .25rem;
    }
}

.textarea-container {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
    flex-grow: 1;

    .textarea {
        width: 100%;
        min-height: 17.1875rem;
        border-radius: .75rem;
        border: .0625rem solid var(--gray-25) !important;
        background-color: var(--gray-0);
        font-family: "Onest", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 400;
        font-size: .875rem;
        color: var(--gray-800);
        resize: none;
        padding: .75rem 1rem;

        &::placeholder {
            color: var(--gray-200);
            font-family: "Onest", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
            font-weight: 400;
            font-size: .875rem;
        }

        &:focus-within {
            outline: none;
            border: .0625rem solid #F85628 !important;
        }
    }

    .hint {
        display: none;
        font-family: "Onest", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 400;
        font-size: .875rem;
        color: var(--action-red);
    }

    &.error {
        .textarea {
            border-color: var(--action-red) !important;
        }

        .hint {
            display: block;
        }
    }
}

.button-fill {
    background-color: #F85628;
    border-radius: 6.25rem;
    color: var(--gray-0);
    font-family: "Onest", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    padding: .75rem 1rem;
    display: flex;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    width: 100%;
    flex-grow: 1;
    min-height: 3rem;
    transition: 0.4s ease;

    &:hover {
        background-color: #C7360D;
    }
}

.button-outline {
    background-color: var(--gray-0);
    border-radius: 6.25rem;
    color: #F85628;
    font-family: "Onest", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    padding: calc(.75rem - .0625rem) 1rem;
    display: flex;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    border: .0625rem solid var(--gray-25);
    cursor: pointer;
    width: 100%;
    flex-grow: 1;
    min-height: 3rem;
    transition-property: border, color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;

    &:hover {
        border: .0625rem solid #C7360D;
        color: #C7360D;
    }

    &.average {
        padding: calc(.625rem - .0625rem) .75rem;
        font-size: .875rem;
    }

    &.icon {
        padding: .625rem;
    }
}

.submit-button-wrapper {
    height: 3rem;

    .fixed-button {
        position: relative;
        bottom: 0;
    }

    .fixed {
        position: fixed;
        bottom: 1rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: fit-content;
        max-width: 53.75rem;
        z-index: 200;
        transition: bottom .2s;
        transition-property: bottom, background-color, color;
    }
}

.letter-flowers {
    position: absolute;
    width: 100%;
    height: 281px;
    top: 48px;
    z-index: 0;
}

.letter-flowers__container {
    position: relative;
    width: 100%;
    height: 100%;
}

.letter-flowers__img {
    position: absolute;
    width: auto;
    height: auto;
}

.letter-flowers__img:nth-child(1) {
    top: -49px;
    left: -77px;
}

.letter-flowers__img:nth-child(2) {
    top: -48px;
    right: -83px;
}

.letter-flowers__img:nth-child(3) {
    left: 26px;
    bottom: -18px;
}

.letter-flowers__img:nth-child(4) {
    max-width: 125px;
    right: 26px;
    bottom: -20px;
}

.letter-section {
    img {
        width: auto;
    }

    .letter {
        position: relative;
        padding-top: 96px;
        padding-bottom: 96px;

        .cover-letter {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            max-width: 53.75rem;
            margin: 0 auto 6rem;
            box-sizing: content-box;
            z-index: 1;

            .badge {
                width: fit-content;
                background-color: #FFE5D0;
                padding: .25rem .375rem;
                border-radius: 62.4375rem;
                font-family: "Onest", sans-serif;
                font-optical-sizing: auto;
                font-style: normal;
                font-weight: 500;
                font-size: .875rem;
                color: #F85628;
                margin-bottom: 1.25rem;
            }

            .title {
                font-family: "Onest", sans-serif;
                font-optical-sizing: auto;
                font-style: normal;
                font-weight: 600;
                font-size: 2.75rem;
                color: #2A1C14;
                margin-bottom: 1rem;
                text-align: center;
            }

            .subtitle {
                font-family: "Onest", sans-serif;
                font-optical-sizing: auto;
                font-style: normal;
                font-weight: 400;
                font-size: 1.125rem;
                color: #5E5E5E;
                margin-bottom: 3rem;
                text-align: center;
            }

            .privacy-policy {
                width: 100%;
                padding: 1.25rem 1.5rem;
                display: flex;
                align-items: start;
                gap: .5rem;
                background-color: #F7F7F7;
                border-width: .0625rem .0625rem .1875rem .0625rem;
                border-style: solid;
                border-color: #F2F2F2;
                border-radius: 1rem;

                div {
                    p:first-child {
                        font-weight: 500;
                        font-size: .875rem;
                        color: #2A1C14;
                        margin-bottom: .25rem;
                    }

                    p:last-child {
                        font-weight: 400;
                        font-size: .875rem;
                        color: #919292;
                    }
                }
            }

            .paper {
                form {
                    .fields {
                        display: flex;
                        gap: 1rem;
                        margin-bottom: 1.5rem;

                        .file-container {
                            position: relative;

                            .textarea {
                                padding: .75rem 1rem 2.5rem;
                            }

                            .file {
                                width: 100%;
                                position: absolute;
                                bottom: .75rem;
                                padding: .5rem 1rem 0;
                                display: flex;
                                justify-content: space-between;

                                .add-file {
                                    cursor: pointer;
                                    display: flex;
                                    align-items: center;
                                    gap: .5rem;
                                    width: fit-content;

                                    p {
                                        font-size: .875rem;
                                        font-weight: 500;
                                        color: #2A1C14;
                                        margin: 0;
                                    }

                                    input {
                                        display: none;
                                    }
                                }

                                .attached-file {
                                    position: relative;
                                    display: none;
                                    align-items: center;
                                    gap: .5rem;
                                    width: fit-content;
                                    padding-right: 1.25rem;

                                    p {
                                        font-size: .875rem;
                                        font-weight: 500;
                                        color: #F85628;
                                        margin: 0;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        max-width: 6.25rem;
                                    }

                                    .remove-file {
                                        position: absolute;
                                        right: 0;
                                        top: -50%;
                                        cursor: pointer;
                                    }

                                    &.active {
                                        display: flex;
                                    }
                                }
                            }
                        }
                    }

                    .submit {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: .5rem;

                        .cover-letter-count {
                            color: #5E5E5E;
                            font-size: 1rem;
                            font-weight: 400;

                            span {
                                font-weight: 600;
                            }
                        }

                        button,
                        a {
                            width: fit-content;
                            flex-grow: 0;
                            padding: .875rem 1.5rem;
                        }
                    }
                }

                .result-title {
                    font-size: 1.5rem;
                    font-weight: 600;
                    color: #2A1C14;
                    margin-bottom: 1rem;
                }

                .result {
                    display: flex;
                    flex-direction: column;
                    max-height: 18.4375rem;
                    font-size: .875rem;
                    font-weight: 400;
                    color: var(--gray-800);
                    padding: .75rem 1rem;
                    padding-right: .3125rem;
                    border: .0625rem solid #EBEDEF;
                    border-radius: .75rem;
                    margin-bottom: 1rem;
                    position: relative;

                    &::after {
                        content: "";
                        position: absolute;
                        top: .75rem;
                        right: .375rem;
                        bottom: .75rem;
                        width: .125rem;
                        background-color: #F0F0F0;
                        z-index: 1;
                    }

                    textarea {
                        position: relative;
                        z-index: 2;
                        width: 100%;
                        height: 18.4375rem;
                        border: none;
                        background-color: transparent;
                        padding-right: .625rem;

                        &::-webkit-scrollbar {
                            width: .25rem;
                            background-color: transparent;
                            border-radius: .1875rem;
                        }

                        &::-webkit-scrollbar-thumb {
                            width: .25rem;
                            background-color: #F85628;
                            border-radius: .1875rem;
                        }
                    }
                }

                .result-buttons {
                    display: flex;
                    align-items: center;
                    gap: 1rem;

                    div {
                        flex-grow: 1;
                        width: 100%;
                    }

                    .result-copy {
                        .copy-ico {
                            display: block;
                        }

                        .copied-ico {
                            display: none;
                        }

                        .copy-text {
                            display: block;
                        }

                        .copied-text {
                            display: none;
                        }

                        &.copied {
                            .copy-ico {
                                display: none;
                            }

                            .copied-ico {
                                display: block;
                            }

                            .copy-text {
                                display: none;
                            }

                            .copied-text {
                                display: block;
                            }
                        }
                    }
                }
            }
        }

        .auth {
            border-width: .1875rem .1875rem .375rem .1875rem;
            border-style: solid;
            border-color: #F2F2F2;
            border-radius: 1.75rem;
            background-color: #FFFFFF;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            max-width: 77.875rem;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            margin-bottom: 6rem;

            p {
                max-width: 40rem;
                text-align: center;
                font-size: 1.5rem;
                font-weight: 600;
                color: #2A1C14;
                margin-bottom: 1.5rem;
                z-index: 1;

                span {
                    color: #C6C6C6;
                }
            }

            .buttons {
                display: flex;
                align-items: center;
                gap: 1rem;

                button, a {
                    min-width: 11.9375rem;
                }
            }

            .flowers {
                user-select: none;

                .desctop {
                    display: block;
                }

                .mobile {
                    display: none;
                }

                .desctop,
                .mobile {
                    svg {
                        position: absolute;
                    }

                    svg:nth-child(1) {
                        left: 0;
                        top: 0;
                    }

                    svg:nth-child(2) {
                        right: 0;
                        top: 0;
                    }
                }
            }
        }

        .cv-tariffs {
            .container {
                padding: 0;
            }
        }

        .tariffs {
            max-width: 77.875rem;
            margin: 0 auto;

            .title {
                font-size: 2.75rem;
                font-weight: 600;
                color: #2A1C14;
                text-align: center;
                margin: 0 auto 1.5rem;
            }

            .list {
                display: flex;
                align-items: stretch;
                justify-content: center;
                gap: 1rem;
                flex-wrap: wrap;

                .tariff {
                    display: flex;
                    flex-direction: column;
                    padding: 1.5rem;
                    border-width: .1875rem .1875rem .375rem .1875rem;
                    border-style: solid;
                    border-color: var(--border-color);
                    border-radius: 1.5rem;
                    min-width: 0;
                    flex-grow: 1;
                    flex-shrink: 1;
                    max-width: 18.6875rem;
                    width: 17.5rem;
                    position: relative;
                    transition: border-color .2s ease-in-out;

                    .chip {
                        display: none;
                        position: absolute;
                        top: -0.625rem;
                        right: 1rem;
                        background-color: #F96F48;
                        padding: .4375rem .625rem;
                        border-radius: 1rem;
                        color: #FFFFFF;
                        z-index: 2;
                    }

                    .check {
                        border: .0625rem solid var(--gray-25);
                        border-radius: 6.25rem;
                        color: #F85628;
                        width: 3rem;
                        height: 3rem;
                        margin-bottom: 1.5rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-shrink: 0;
                    }

                    .info {
                        display: flex;
                        flex-direction: column;
                        gap: .25rem;
                        list-style: none;
                        margin-bottom: .25rem;
                        height: 100%;
                        min-height: 0;

                        li {
                            color: #919292;
                            font-size: 1.125rem;
                            font-weight: 600;
                        }
                    }

                    .price {
                        font-family: "Source Serif 4", serif;
                        font-size: 2rem;
                        color: #2A1C14;
                        font-weight: 700;
                        margin-bottom: 1.5rem;
                    }

                    .hint {
                        color: #5E5E5E;
                        font-size: 1rem;
                        margin-bottom: 1.5rem;
                        font-weight: 400;
                        height: 100%;
                        min-height: 0;
                    }

                    button {
                        max-height: 3rem;
                        transition-property: background-color, border-color, color;

                        &:hover {
                            background-color: #F85628;
                            border-color: #F85628;
                            color: var(--gray-0);
                        }
                    }

                    .flowers {
                        position: absolute;
                        right: -0.0313rem;
                        top: -0.0313rem;
                        width: 100%;
                        height: 100%;
                        border-radius: 1.375rem;
                        overflow: hidden;
                        user-select: none;
                        pointer-events: none;

                        svg {
                            position: absolute;
                            right: 0;
                            top: 0;
                        }
                    }

                    &.popular {
                        border-color: #D5F5E3;

                        .chip {
                            display: block;
                        }

                        .check {
                            background-color: #F85628;
                            color: var(--gray-0);
                        }
                    }

                    &:hover {
                        border-color: #F85628;
                    }
                }
            }
        }
    }
}

@media (max-width: 48rem) {
    .letter-flowers__img:nth-child(1) {
        width: 85px;
        top: -22px;
        left: -58px;
    }
    .letter-flowers__img:nth-child(2) {
        width: 84px;
        height: 84px;
        top: -21px;
        right: -35px;
    }
    .letter-flowers__img:nth-child(3) {
        width: 85px;
        left: -54px;
        bottom: 28px;
    }
    .letter-flowers__img:nth-child(4) {
        right: -45px;
    }
    .letter-section {
        .letter {
            padding-top: 32px;
            padding-bottom: 32px;
            .cover-letter {
                .paper {
                    .result-buttons {
                        flex-direction: column-reverse;
                    }
                }
            }

            .auth {
                border-color: #FFDAD1;
                padding: 1.25rem 1rem;
                margin-bottom: 4rem;

                p {
                    font-size: 1.125rem;
                    padding: 0 .8125rem;
                }

                .buttons {
                    flex-direction: column;
                    width: 100%;

                    button {
                        width: 100%;
                    }
                }

                .flowers {
                    .desctop {
                        display: none;
                    }

                    .mobile {
                        display: block;
                    }
                }
            }
        }
    }
}

@media (max-width: 40rem) {
    .submit-button-wrapper {
        .fixed {
            width: 100%;
            max-width: calc(100% - 2rem);
        }
    }

    .letter-section {
        .container {
            .cover-letter {
                align-items: flex-start;

                .title {
                    font-size: 1.75rem;
                    text-align: left;
                }

                .subtitle {
                    font-size: 1rem;
                    margin-bottom: 4rem;
                    text-align: left;
                }

                .paper {
                    padding: 1.5rem 1rem;

                    form {
                        .fields {
                            flex-direction: column;

                            .textarea-container:not(.file-container) {
                                .textarea {
                                    min-height: 9.375rem;
                                }
                            }
                        }

                        .submit {
                            flex-direction: column;
                            align-items: start;

                            a,
                            button {
                                width: 100%;
                            }


                        }
                    }
                }

                .privacy-policy {
                    padding: 1rem;
                }
            }

            .tariffs {
                .title {
                    text-align: left;
                    font-size: 1.75rem;
                }

                .list {
                    flex-direction: column;

                    .tariff {
                        max-width: 100%;
                        width: 100%;
                        padding: 1rem;

                        .check {
                            margin-bottom: 1rem;
                        }

                        .info {
                            li {
                                font-size: 1rem;
                            }
                        }

                        .price {
                            font-size: 1.5rem;
                            margin-bottom: 1rem;
                        }

                        .hint {
                            margin-bottom: 1rem;
                        }
                    }
                }
            }
        }
    }
}