/* ==========================================================================
   Fluent Forms - Essential Fixes
   ========================================================================== */

/* Override Fluent Forms primary color variable with Elementor accent */
:root,
.fluentform,
.fluentform_wrapper,
[class*="fluentform_wrapper"] {
    --fluentform-primary: var(--e-global-color-accent, #f4a029) !important;
}

/* Phone field - intl-tel-input container fixes */
.fluentform .iti,
.fluentform_wrapper .iti {
    display: flex !important;
    width: 100% !important;
}

.fluentform .iti__country-container,
.fluentform_wrapper .iti__country-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #aaa !important;
    border-right: none !important;
    border-radius: 5px 0 0 5px !important;
}

/* Phone input field - remove left border-radius when country selector present */
.fluentform .iti input[type="tel"],
.fluentform_wrapper .iti input[type="tel"] {
    border-radius: 0 5px 5px 0 !important;
    border-left: none !important;
    flex: 1 !important;
}

/* Phone field country flag height fix */
.iti__selected-flag {
    height: 48px;
}

/* Reset Elementor button styles for intl-tel-input country selector */
html body .iti__country-container button.iti__selected-country,
html body .iti.iti--allow-dropdown button.iti__selected-country,
html body .iti.iti--allow-dropdown .iti__selected-country,
html body .ff-el-input--content .iti button.iti__selected-country,
html body .fluentform .iti button.iti__selected-country,
html body .fluentform_wrapper .iti button.iti__selected-country,
html body [class*="elementor-kit"] .iti button.iti__selected-country,
html body [class*="elementor-kit"] button.iti__selected-country,
html body [class*="elementor"] .ff-el-input--content .iti button.iti__selected-country {
    background-color: transparent !important;
    border: none !important;
    border-right: 1px solid #aaa !important;
    padding: 0 6px 0 8px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    height: 100% !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: normal !important;
    text-decoration: none !important;
    min-height: auto !important;
    width: auto !important;
}

html body .iti__country-container button.iti__selected-country:hover,
html body .iti__country-container button.iti__selected-country:focus,
html body .iti.iti--allow-dropdown button.iti__selected-country:hover,
html body .iti.iti--allow-dropdown button.iti__selected-country:focus,
html body [class*="elementor-kit"] .iti button.iti__selected-country:hover,
html body [class*="elementor-kit"] .iti button.iti__selected-country:focus,
html body [class*="elementor-kit"] button.iti__selected-country:hover,
html body [class*="elementor-kit"] button.iti__selected-country:focus {
    background-color: #f5f5f5 !important;
    border: none !important;
    border-right: 1px solid #aaa !important;
}

/* Input field height and padding consistency */
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=number] {
    height: 50px !important;
    padding: 0 15px !important;
}

/* Phone field - preserve padding-left set by intl-tel-input for country flag */
.fluentform input[type=tel],
.ff-el-phone {
    height: 50px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 15px !important;
    /* padding-left is set dynamically by intl-tel-input, don't override */
}

/* Override Elementor focus styles that remove border */
html body [class*="elementor-kit"] .fluentform input:focus,
html body [class*="elementor-kit"] .fluentform textarea:focus,
html body [class*="elementor-kit"] .iti input[type=tel]:focus {
    border-style: solid !important;
    border-color: var(--e-global-color-accent, #f4a029) !important;
    outline: none !important;
}

.fluentform textarea {
    padding: 15px !important;
}

/* Input background and border */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="url"],
.fluentform input[type="password"],
.fluentform input[type="search"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform textarea,
.fluentform select {
    background-color: #fff !important;
    border-color: #aaa !important;
}

/* Placeholder styling */
.fluentform ::placeholder {
    color: #888 !important;
    opacity: 1;
    text-transform: initial;
}

.fluentform :-ms-input-placeholder {
    color: #888;
}

.fluentform ::-ms-input-placeholder {
    color: #888;
}

/* Form control base styling */
.fluentform .ff-el-form-control {
    font-size: 16px !important;
    border-radius: 0 !important;
}

/* Select dropdown styling */
.fluentform select,
.ffs_modern_l .ff-el-group .ff-el-input--content select {
    height: 50px !important;
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #444;
    line-height: 1.3 !important;
    padding: 0.6em 2em 0.5em 1em !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
    border-radius: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') !important;
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 0.65em auto;
}

.fluentform select::-ms-expand {
    display: none;
}

/* Progress bar color */
.ff-el-progress-bar {
    background-color: var(--e-global-color-primary, #10aa9e) !important;
}

/* Hide progress status text */
.ff-el-progress-status {
    display: none;
}

/* Column padding - cleaner spacing */
.fluentform .ff-t-cell {
    padding: 0 !important;
}

@media only screen and (min-width: 768px) {
    .fluentform .ff_columns_total_3 .ff-t-column-1 {
        padding-right: 5px !important;
    }

    .fluentform .ff_columns_total_3 .ff-t-column-2 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .fluentform .ff_columns_total_3 .ff-t-column-3 {
        padding-left: 5px !important;
    }
}

/* Upload field styling */
.ff_upload_btn.ff-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    background: #a9a9a9 !important;
    margin-top: 10px;
}

/* Step indicators */
.ff-step-titles span,
.ff-step-titles li:after {
    display: none !important;
}

.ff-step-titles li {
    padding: 0 5px !important;
    vertical-align: middle !important;
}

ul.ff-step-titles {
    width: inherit !important;
    margin: 0 auto !important;
}

.ff-step-titles li:before {
    padding: 10px 0 !important;
    width: 44px !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    border: 2px solid var(--e-global-color-primary, #10aa9e) !important;
    color: var(--e-global-color-primary, #10aa9e) !important;
    font-weight: 600;
}

.ff-step-titles li.ff_active:before,
.ff-step-titles li.ff_completed:before {
    background-color: var(--e-global-color-primary, #10aa9e) !important;
    color: #fff !important;
}

/* Checkbox/radio selected state */
.ff-el-form-check.ff_item_selected input:after {
    background-color: var(--e-global-color-primary, #10aa9e) !important;
    border-color: var(--e-global-color-primary, #10aa9e) !important;
}

/* Checkable grids */
.ff-checkable-grids thead {
    display: none;
}

.ff-checkable-grids {
    border-width: 0 !important;
}

.ff-checkable-grids tbody > tr {
    border: solid #f3f3f3;
    border-width: 1px 0 0 0;
}

.ff-checkable-grids tbody > tr:last-of-type {
    border-width: 1px 0 1px 0;
}

.ff-checkable-grids td {
    padding: 12px 0 12px 10px !important;
    font-size: 16px;
}

.ff-checkable-grids tbody > tr:nth-child(2n) > td {
    background: #fff !important;
}

.ff-checkable-grids input[type=checkbox]:checked:after {
    background-color: var(--e-global-color-primary, #10aa9e) !important;
    border-color: var(--e-global-color-primary, #10aa9e) !important;
}

.ff-checkable-grids input[type=checkbox]:after {
    margin-top: -3px !important;
}

.ff-checkable-grids tbody tr {
    display: flex;
    flex-direction: row-reverse;
}

.ff-checkable-grids tbody tr td:nth-child(1) {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    table.ff_flexible_table tbody tr {
        display: flex !important;
        margin: 0 !important;
        border-width: 0 0 1px 0 !important;
    }

    .ff-checkable-grids td {
        padding: 10px 0 !important;
        height: 46px;
        font-size: 14px;
    }

    table.ff_flexible_table.ff-checkable-grids tbody tr td.ff_grid_header {
        background-color: #fff !important;
    }
}

/* Submit button - override Elementor widget defaults */
html body .fluentform .ff-btn-submit,
html body .fluentform-widget-wrapper .ff-btn-submit,
html body .fluentform-widget-wrapper .ff-el-group .ff-btn-submit,
html body [class*="elementor-element"] .fluentform-widget-wrapper .ff-btn-submit,
html body [class*="elementor-element"] .fluentform-widget-wrapper .ff-el-group .ff-btn-submit,
html body [class*="elementor"] [class*="elementor-element"] .fluentform-widget-wrapper .ff-el-group .ff-btn-submit {
    background-color: var(--e-global-color-accent, #f4a029) !important;
    color: #fff !important;
    border: none !important;
}

html body .ff-btn-submit:hover,
html body .fluentform .ff-btn-submit:hover,
html body .fluentform-widget-wrapper .ff-btn-submit:hover {
    opacity: 0.9 !important;
}

/* Previous button in multistep */
.ff-btn.ff-btn-prev {
    background-color: transparent !important;
    color: #aaa !important;
    border: 0 !important;
    padding: 10px 20px 10px 5px;
    margin-top: 10px;
    transition: 0.3s;
    text-transform: inherit;
    font-weight: 600 !important;
}

.ff-btn.ff-btn-prev:hover {
    color: #666 !important;
}

/* Next button in multistep */
.ff-btn.ff-btn-next {
    background-color: var(--e-global-color-accent, #f4a029) !important;
    border: 2px solid var(--e-global-color-accent, #f4a029) !important;
    margin-top: 10px;
    font-size: 15px !important;
    padding: 8px 25px !important;
    font-weight: 600 !important;
    color: #fff !important;
    border-radius: 4px;
}

.ff-btn.ff-btn-next:hover {
    opacity: 0.9 !important;
}

/* Radio button list styling */
.fluentform .ff_list_buttons .ff-el-form-check span {
    border: 1px solid #e9ecef !important;
    border-radius: 3px !important;
    margin-left: 10px !important;
    background-color: #e9ecef !important;
    box-shadow: none !important;
}

.fluentform .ff_list_buttons .ff-el-form-check span:hover,
.fluentform .ff_list_buttons .ff-el-form-check.ff_item_selected span {
    background-color: var(--e-global-color-accent, #f4a029) !important;
    border-color: var(--e-global-color-accent, #f4a029) !important;
    color: #fff !important;
}

.ff_list_buttons .ff-el-form-check:nth-child(1) span {
    margin-left: 0 !important;
}

@media only screen and (max-width: 768px) {
    .fluentform .ff_list_buttons .ff-el-form-check {
        display: block !important;
    }

    .fluentform .ff_list_buttons .ff-el-form-check span {
        display: block !important;
        margin-left: 0 !important;
    }
}

/* Remove default form border */
.fluentform {
    border: 0 !important;
}

/* Success message cleanup */
.ff-message-success {
    box-shadow: none !important;
    border: none !important;
}

/* Flatpickr hover color */
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--e-global-color-primary, #10aa9e) !important;
}

/* Multistep mobile */
@media only screen and (max-width: 768px) {
    .ff-btn.ff-btn-next {
        width: 100%;
    }

    .ff-form-has-steps .step-nav {
        display: flex;
        flex-direction: column-reverse;
    }

    .ff-form-has-steps .ff_submit_btn_wrapper .ff-btn-submit {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Zipcode Form Styling (Postcode API)
   -------------------------------------------------------------------------- */
.fluentform .form_zipcode .ff_street,
.fluentform .form_zipcode .ff_city,
.fluentform .form_zipcode .ff_province,
.fluentform .form_zipcode .ff_municipality {
    display: none;
}

.fluentform .form_zipcode input {
    border: none;
}

.fluentform .form_zipcode .ff_address_full .ff-el-input--label {
    width: 140px;
    padding-top: 6px;
}

.fluentform .form_zipcode button[type="submit"].disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Zipcode form - dark theme */
.fluentform .form_zipcode.form_dark p,
.fluentform .form_zipcode.form_dark a,
.fluentform .form_zipcode.form_dark .postcode_error_feedback {
    color: #fff;
    font-size: 0.9em !important;
    line-height: 1.6;
}

.fluentform .form_zipcode.form_dark a {
    text-decoration: underline;
}

.fluentform .form_zipcode.form_dark .ff_address_full .ff-el-input--label > label {
    color: #fff !important;
}

.fluentform .form_zipcode.form_dark .ff_address_full .ff-el-input--content {
    margin-left: 140px !important;
}

.fluentform .form_zipcode.form_dark .ff_address_full textarea {
    background-color: transparent !important;
    color: #fff !important;
    border-width: 0 !important;
}

/* Zipcode form - light theme */
.fluentform .form_zipcode.form_light .ff_address_full .ff-el-input--label > label {
    color: #000 !important;
}

.fluentform .form_zipcode.form_light .ff_address_full textarea {
    background-color: transparent !important;
    color: #000 !important;
    border-width: 0 !important;
}

/* Orange button modifier class */
html body .fluentform .ff-btn-submit.orange {
    background-color: var(--e-global-color-accent, #f4a029) !important;
    border: 0 !important;
}