/* Global Form Styles */
input,
select,
textarea {
    border-width: 1px;
    border-style: solid;
    border-color: #bebebf;
    padding: 15px 13px;
    font-size: var(--wp--preset--font-size--normal);
    font-family: var(--wp--preset--font-family--calibri);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--wp--preset--color--red-200);
    outline: none;
}

label {
    display: inline-block;
    margin-bottom: 7px;
}

/* For WooCommerce */
body.woocommerce-page,
.wc-block-mini-cart__drawer {
    .qty {
        border-radius: 6px;
        cursor: pointer;
    }

    .wc-block-components-product-button__button,
    .wc-block-components-button,
    button.single_add_to_cart_button {
        background-color: var(--wp--preset--color--blue-300);
        border: 2px solid #23A9E0 !important;
        border-radius: 6px;
        color: var(--wp--preset--color--white);
        font-family: var(--wp--preset--font-family--plus-jakarta-sans);
        font-size: var(--wp--preset--font-size--normal);
        padding: 16px 24px;
        font-weight: 600;

        &:hover {
            background-color: var(--wp--preset--color--white);
            border-color: var(--wp--preset--color--blue-300);
            color: var(--wp--preset--color--blue-300);
        }
    }
}

/* HubSpot Form Specific Styles */
.hbspt-form {

    .input {
        margin: 0 !important;
    }

    textarea {
        min-height: 200px;
    }

    form fieldset {
        max-width: none;
    }

    input[type="email"] {
        width: 100%;
    }

    form fieldset.form-columns-1 .hs-input {
        width: 100%;
    }

    .hs-form-field {
        margin-bottom: 30px;
    }

    form fieldset.form-columns-2>.hs-form-field:first-of-type,
    form fieldset.form-columns-2>div:not(.hs-form-field)+.hs-form-field {
        .input {
            input {
                width: 90%;
            }
        }
    }

    form fieldset div.input,
    form fieldset div.textarea,
    form fieldset div.select {
        display: flex;
        width: -webkit-fill-available;
    }

    form fieldset div.input input,
    form fieldset div.input select {
        width: 100%;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin-top: 10px;
        margin-bottom: 0;

        li {
            margin: 15px 0;
        }
    }

    .hs-error-msgs {
        color: var(--wp--preset--color--red-200);
        font-size: var(--wp--preset--font-size--small);
        margin-top: 10px;
    }

    a {
        color: initial !important;

        &:hover {
            text-decoration: underline;
            color: var(--wp--preset--color--red-200) !important;
        }

        border: none !important;
    }

    button[type="submit"],
    input[type="submit"] {
        width: 150px;
        max-width: 100%;

        cursor: pointer;
        transition: all 0.3s ease;
        background-color: var(--wp--preset--color--blue-300);
        border: 1px solid var(--wp--preset--color--blue-300);
        border-radius: 3px;
        color: var(--wp--preset--color--white);
        font-family: var(--wp--preset--font-family--calibri);
        padding: 8px 22px;
        font-size: var(--wp--preset--font-size--normal);

        &:hover {
            background-color: var(--wp--preset--color--white);
            border-color: var(--wp--preset--color--blue-300);
            color: var(--wp--preset--color--blue-300);
        }
    }

}