﻿.container-2 {
    background-color: var(--form-bg-color);
    border-radius: var(--form-border-radius);
    box-shadow: var(--form-card-shadow);
    max-width: var(--main-container-2);
    margin: 0 auto;
    padding-top: var(--padding-top-container-2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-main-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .form-main-container .form-left-content-container {
        width: var(--form-left-container-width);
        display: var(--form-left-container-display);
    }

    .form-main-container .form-right-content-container {
        width: var(--form-right-container-width);
        padding: var(--form-right-content-container-padding);
        border-radius: var(--form-right-container-border);
        box-shadow: var(--form-right-container-box-shadow);
        background-color: var(--form-right-container-bg-color);
        margin-bottom: var(--form-right-container-margin-bottom, 10%);
    }

        .form-main-container .form-right-content-container h2 {
            display: var(--contact-form-sub-title);
        }

.form-right-content-container-message {
    width: var(--form-right-container-width);
    padding: var(--form-right-content-container-padding);
    margin-bottom: 5% !important;
    justify-content: center;
    align-items: center;
    font-weight: var(--form-right-content-container-message-font-weight);
}

.form-action-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .form-action-container .submit,
    .form-action-container .form-action {
        background-color: var(--action-button-color, var(--primary-color));
        color: var(--cta-text-color);
        border: none;
        padding: 15px 30px;
        margin: 20px;
        border-radius: var(--border-radius-trial-button);
        font-size: var(--submit-button-font-size);
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        border: var(--action-button-border);
        max-width: 70%;
    }

/* Form Styles */
#enrollment-step-2 label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--text-color);
    line-height: 1.8;
}

.enrollment-form-container {
    width: var(--enrollment-form-container);
}

#enrollmentForm, #address-info {
    width: 100%; /* Adjust as needed */
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    #enrollmentForm *, #address-info * {
        box-sizing: inherit; /* Inherit the box-sizing from the parent */
    }

    #enrollmentForm .input-group,
    #billingForm .input-group,
    #shippingForm .input-group {
        margin: 10px 0 2px;
    }

    #enrollmentForm label, .check-box label, .input-group span,
    #billingForm label, .check-box label, .input-group span,
    #shippingForm label, .check-box label, .input-group span,
    #billingShippingForm .check-box {
        color: var(--input-label-color);
        font-size: var(--font-size-form);
        line-height: 1.8;
    }

    #enrollmentForm input, #enrollmentForm select,
    #billingForm input, #address-info select,
    #shippingForm input, #address-info select {
        width: 100%;
        padding: 10px;
        margin: var(--input-margin);
        border: 1px solid var(--input-border-color);
        border-radius: 5px;
        font-size: 1.15em;
        box-sizing: border-box;
        background-color: var(--select-background-color);
    }

    select option {
        color: var(--select-option-color-text);
    }
        #enrollmentForm input:focus,
        #billingForm input:focus,
        #shippingForm input:focus {
            border-color: var(--input-focus-color);
        }

    #enrollmentForm select,
    #billingForm select,
    #shippingForm select {
        color: var(--select-color);
    }

        #enrollmentForm select:focus,
        #billingForm select:focus,
        #shippingForm select:focus {
            outline: none;
        }

    #contact-info h1,
    #address-info h1,
    #confirm-enrollment h1,
    #payment-info h1 {
        font-size: var(--contact-form-h1-size);
        font-style: normal;
        font-weight: var(--contact-form-weight);
        line-height: 1.1;
        letter-spacing: 0em;
        text-align: center;
        background: none;
        text-transform: none;
        padding: unset;
        color: var(--text-color);
        box-shadow: unset;
        margin-bottom: .2em;
    }

        #contact-info h1 span {
            color: var(--primary-color);
        }

#contact-info .custom-error-blank-message {
    color: var(--custom-h2-error-message-font-color, var(--input-label-color));
    font-size: var(--custom-h2-error-message-font-size, 1.5em);
    font-weight: var(--custom-h2-error-message-font-weight, 200);
    padding: var(--custom-h2-error-message-padding);
}

#contact-info h2 {
    text-align: center;
    color: var(--input-label-color);
    font-weight: 200;
    font-size: 1.5em;
    margin: 0;
}

#subscription-agreement {
    color: var(--primary-color);
    text-decoration: unset;
}

.form-left-content-container h1 {
    margin-top: 150px;
    color: var(--text-color) !important;
    font-size: 2em !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.form-left-content-container h2 {
    color: var(--text-color) !important;
    margin: 20px 20px 20px 0px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    word-wrap: break-word !important;
    text-align: left !important;
}

.form-contact-info-section {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 40px;
}

    .form-contact-info-section p {
        color: #666666;
        font-size: 16px;
        line-height: 1.45;
        margin: 0;
    }

    .form-contact-info-section a {
        color: #666666;
        font-size: 16px;
        font-weight: bold;
        color: var(--primary-color);
    }
