/* This snippet is for styling the free Fluent Forms plugin in the Bricks builder.
Without Bricks addons or a paid version of Fluent Forms, you have no place to style the form. */

/* These styles are for a contact form with the following fields and the form labels disabled:
    * Name
    * Email
    * Phone Number
    * Message
    * and the submit button
*/

/******************************************************************************************************
*******************************************************************************************************/

/* Normal form field syles */
.ff-el-form-control{
    color: var(--dark) !important;
    background-color: transparent;
    font-family: Playfair Display !important;
    padding: var(--space-5xs) var(--space-2xs) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 2px;
}

/* Form fields focus border styles */
.ff-el-form-control:focus{
    border: 1px solid var(--accent) !important;
    background-color: transparent !important;
    outline: none !important;
}

/* Paid version is needed to use the phone number field in Fluent Forms Plugin> */
/* Remove the numeric arrow buttons in the Phone Number field */
.fluentform input::-webkit-outer-spin-button,
.fluentform input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/* Form Fields placeholder text styles*/
.fluentform ::placeholder{
    color: var(--dark) !important;
    font-family: Playfair Display !important;
    opacity: 0.5;
}
/* END Fluent Forms FREE styles */

/********************************************************************************
*********************************************************************************/

/* Submit button styles */
.ff-btn-submit{
    font-weight: 700;
    border: 2px solid var(--primary) !important;
    color: var(--light) !important;
    background-color: var(--primary) !important;
    text-transform: uppercase !important;
    padding: var(--space-2xs) var(--space-l) !important;
    margin-top: var(--space-2xl);
    border-radius: 25px;
    cursor: pointer;
}
/* Submit button hover state */
.ff-btn-submit:hover{
    color: var(--accent) !important;
    background-color: transparent !important;
    border-color: var(--accent) !important;
}
/* END Submit button styles */

/* Success Message styles */
.ff-message-success.ff-message-success{
    background-color: var(--primary) !important;
    color: var(--light) !important;
}