body.page-id-889 {
    &.vin-results-page {
        .results-hide {
            display: none;
        }

        .results-show {
            display: block !important;
        }
    }

    .vin-container {
        color: #000;

        .no-service {
            display: grid;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #000;
            margin-bottom: 25px;
        }

        .vin-form {
            padding: 20px;
            margin: 20px;
            display: grid;
            align-items: center;
            justify-content: center;

            .vin-input {
                display: inline-flex;
                border-radius: 15px;
                border: 1px solid black;
                padding: 10px;
                font-size: 16px;
                margin-bottom: 15px;

                /*&:invalid {*/
                /*    border: 2px solid red;*/
                /*}*/

                &:valid {
                    border: 2px solid green;
                }
            }

            .vin-submit-btn {
                backface-visibility: hidden;
                background-color: #405cf5;
                border-radius: 6px;
                border-width: 0;
                box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .1) 0 2px 5px 0, rgba(0, 0, 0, .07) 0 1px 1px 0;
                box-sizing: border-box;
                color: #fff;
                cursor: pointer;
                font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
                font-size: 100%;
                height: 44px;
                line-height: 1.15;
                margin: 12px 0 0;
                outline: none;
                overflow: hidden;
                padding: 0 25px;
                position: relative;
                text-align: center;
                text-transform: none;
                transform: translateZ(0);
                transition: all .2s, box-shadow .08s ease-in;
                user-select: none;
                -webkit-user-select: none;
                touch-action: manipulation;

                &:hover {
                    background-color: #000;
                }
            }
        }

        .check-title {
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            color: #000;
            margin-top: 1em !important;
        }

        .check-container {
            width: 100% !important;
            display: grid;
            grid-gap: 5px;
            grid-template-areas:
        'vin vin'
        'car car'
        'carfax autocheck'
        'year year'
        'payment payment';
            padding: 5px;

            > div {
                background-color: rgb(237 237 237 / 80%);
                color: #000;
                text-align: center;
                padding: 10px 0;
                font-size: 20px;
            }

            > .payment-form {
                padding: 25px;
                grid-area: payment;

                #payment-form {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: center;
                    gap: 2%;

                    .report-price {
                        font-weight: bold;
                        margin-bottom: 15px;
                        width: 100%;
                    }

                    .form-field {
                        width: 49%;
                        display: flex;
                        align-items: center;
                        margin-bottom: 50px;
                        flex-wrap: wrap;

                        label {
                            width: auto;
                            text-align: right;
                            margin-right: 5px;
                        }

                        select,
                        input {
                            width: auto;
                            margin: 0;
                        }

                        @media screen and (max-width: 1024px) {
                            label,
                            input,
                            select {
                                width: 100% !important;
                                text-align: left;
                            }
                        }

                        @media screen and (max-width: 767px) {
                            width: 100%;
                        }
                    }

                    #payment-element {
                        width: 100%;
                        margin-bottom: 20px;
                    }
                }
            }

            .vin-number {
                grid-area: vin;
            }

            .car-name {
                grid-area: car;
            }

            .carfax-type {
                grid-area: carfax;
            }

            .autocheck-type {
                grid-area: autocheck;
            }

            .car-year {
                grid-area: year;
            }
        }

        .success-container {
            display: grid;
            align-items: center;
            justify-content: center;
            color: #000;
            text-align: center;
            margin-bottom: 25px;

            .image-container {
                display: grid;
                align-items: center;
                justify-content: center;

                > img {
                    width: 150px;
                    height: 150px;
                }

            }
        }

        .vin-loading {
            margin: 0 auto;
            border: 2px solid #ccc;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border-top-color: #1ecd97;
            border-left-color: #1ecd97;
            animation: vin-spin 1s infinite ease-in;
            margin-top: 25px;
            margin-bottom: 25px;
        }
    }
}

@keyframes vin-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}