/* Load Rubik Font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&display=swap');

/* Box-sizing reset for consistency */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* Main Form Styling */
.hs-form {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-bottom: 20px !important; /* To prevent footer overlap */
}

/* Fieldset Styling */
.hs-form fieldset {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* Individual Form Fields */
.hs-form .hs-form-field {
    display: flex;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 42.7px !important;
    margin-bottom: 12px !important;
}

/* Inputs, Textareas, and Select Fields Styling */
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="url"],
.hs-form input[type="number"],
.hs-form input[type="date"],
.hs-form textarea,
.hs-form select {
    width: 100% !important;
    height: 42.7px !important;
    max-width: 300px !important;
    background-color: #FFF !important;
    border: 1px solid #000 !important;
    padding: 12px !important;
    font-family: 'Rubik', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    box-sizing: border-box !important;
    color: #3f3838 !important;
    border-radius: 0 !important;
}

/* Placeholder Styling for Inputs and Textareas */
.hs-form input::placeholder,
.hs-form textarea::placeholder {
    text-transform: uppercase !important;
    letter-spacing: 1.8px !important;
    color: #3f3838 !important; /* Explicitly set placeholder color */
}

/* Style the Select Field's Options */
.hs-form select option {
    color: #3f3838 !important; /* Match the color of other fields */
    font-family: 'Rubik', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
}

/* Style the Placeholder Option Specifically */
.hs-form select option[disabled][selected] {
    color: #3f3838 !important; /* Ensure the placeholder option matches */
    text-transform: uppercase !important;
    letter-spacing: 1.8px !important; /* Match the placeholder styling */
}

/* Textarea Height */
.hs-form textarea {
    height: 100px !important;
}

/* Select Field Width */
.hs-form select {
    width: 100% !important;
    max-width: 300px !important;
}

/* Inputs Hover and Focus States */
.hs-form .hs-input:hover,
.hs-form .hs-input:focus,
.hs-form textarea:hover,
.hs-form textarea:focus,
.hs-form select:hover,
.hs-form select:focus {
    border-color: #000 !important;
    outline: none !important;
}

/* Error Messages Styling */
.errors {
    font-weight: bold !important;
    font-size: 18px !important;
    color: #ba0606 !important;
}

.error.no-label {
    color: #ba0606 !important;
    font-size: 14px !important;
    margin-bottom: 18px !important;
}

.hs-error-msg {
    padding-bottom: 0px !important;
}

/* Submit Button Container */
.hs-form .hs_submit,
.hs-form .hs-submit,
form.hs-form .hs_submit,
form.hs-form .hs-submit {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
}

/* Target any wrapper div inside the submit container */
.hs-form .hs_submit > div,
.hs-form .hs-submit > div,
form.hs-form .hs_submit > div,
form.hs-form .hs-submit > div {
    max-width: 300px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    float: none !important;
}

/* Actions Container */
.hs-form .actions,
form.hs-form .actions {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    float: none !important;
}

/* Submit Button Styling */
.hs-form input[type="submit"],
.hs-form .hs-button,
form.hs-form input[type="submit"],
form.hs-form .hs-button {
    width: 100% !important;
    max-width: 300px !important;
    height: 53.5px !important;
    background-color: #00CEF5 !important;
    border: solid 1px #000 !important;
    font-family: 'Rubik', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #3f3838 !important;
    text-transform: uppercase !important;
    letter-spacing: 2.3px !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 15px auto !important;
    float: none !important;
    white-space: nowrap !important;
}

/* Last Resort: Override HubSpot Inline Styles */
form.hs-form div.hs_submit,
form.hs-form div.hs-submit {
    float: none !important;
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
}