.c-form {
    .uabb-wpf-styler {
        .wpforms-container {
            margin: 0;

            form.wpforms-form {

                * {
                    margin: 0;
                    padding: 0;
                }


                .wpforms-field-container {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    input:not([type="checkbox"]), textarea {
                        padding: 16px 33px;
                        background: #12121254;
                        border: 1px solid var(--primary);
                        border-radius: 1.25rem;
                        color: var(--white);
                        font-size: 18px;
                        text-align: left;

                        &::placeholder {
                            color: var(--white);
                            opacity: 0.2;
                        }

                        &:focus {
                            outline: none;
                            border-color: var(--secondary);
                            box-shadow: none;
                        }
                    }
                    
                    .wpforms-field-gdpr-checkbox {
                        .wpforms-field-label-inline {
                            color: var(--white);
                            font-size: var(--fs--xxs);
                        }
                    }
                }

                .wpforms-submit-container {
                    margin-top: 20px;

                    button {
                        padding: 15px 40px;
                        font-size: 16px;
                        border-radius: 99px;
                        line-height: 0;

                        .c-form.c-form--primary & {
                            background-color: var(--primary);
                            color: var(--on-primary);

                            &:hover {
                                background-color: var(--secondary);
                                color: var(--on-secondary);
                            }
                        }

                        .c-form.c-form--secondary & {
                            background-color: var(--secondary);
                            color: var(--on-secondary);

                            &:hover {
                                background-color: var(--primary);
                                color: var(--on-primary);
                            }
                        }

                        .c-form.c-form--outline-primary & {
                            background-color: none;
                            border: 1px solid var(--primary);
                            color: var(--on-outline);

                            &:hover {
                                background-color: var(--primary);
                                color: var(--on-primary);
                            }
                        }

                        .c-form.c-form--outline-secondary & {
                            background-color: none;
                            border: 1px solid var(--secondary);
                            color: var(--on-outline);

                            &:hover {
                                background-color: var(--secondary);
                                color: var(--on-secondary);
                            }
                        }

                        .c-form.c-form--black & {
                            background-color: var(--black);
                            color: var(--on-black);

                            &:hover {
                                background-color: var(--primary);
                                color: var(--on-primary);
                            }
                        }

                        .c-form.c-form--white & {
                            background-color: var(--white);
                            color: var(--on-white);

                            &:hover {
                                background-color: var(--primary);
                                color: var(--on-primary);
                            }
                        }

                        .c-form.c-form--outline-black & {
                            background-color: none;
                            border: 1px solid var(--black);
                            color: var(--on-outline);

                            &:hover {
                                background-color: var(--black);
                                color: var(--on-black);
                            }
                        }

                        .c-form.c-form--outline-white & {
                            background-color: none;
                            border: 1px solid var(--white);
                            color: var(--on-outline);

                            &:hover {
                                background-color: var(--white);
                                color: var(--on-white);
                            }
                        }
                    }
                }
            }
        }
    }
}

div.c-checkout {
    .woocommerce {
        form.checkout {
            display: grid;
            grid-template-columns: repeat(9, 1fr);

            #customer_details.col2-set {
                grid-column: 1/5;
                width: fit-content;
                margin: 0;

                .col-1 {
                    span.woocommerce-input-wrapper {

                        input,
                        textarea {
                            padding: 30px 20px;
                            border: 1px solid #322E2B14;
                            background-color: #322E2B08;
                            border-radius: 4px;
                            font-size: 16px;
                            color: #6F6F6F;
                            text-transform: uppercase;
                        }

                        select~.select2 span.select2-selection--single {
                            padding-bottom: 1em;
                            border: 1px solid #322E2B14;
                            background-color: #322E2B08;
                            border-radius: 4px;
                            font-size: 16px;
                            color: #6F6F6F;
                            text-transform: uppercase;
                        }
                    }

                    .button {
                        background: var(--black);
                        padding: 20px 40px;
                        border: 2px solid var(--black);
                        color: var(--white);
                        text-transform: uppercase;
                        transition: var(--transition);

                        &:hover,
                        &:focus {
                            background: var(--secondary);
                            border-color: var(--secondary);
                        }
                    }
                }
            }

            #ast-order-review-wrapper {
                grid-column: 7/-1;

                * {
                    width: fit-content;
                }
            }
        }
    }
}