/**
 * Sales Rep Map - Form Styles
 * Fixes for Cloudflare Turnstile positioning
 */

/* Handle invisible Turnstile mode - keep it within the form flow */
.wpforms-recaptcha-container.wpforms-is-turnstile-invisible {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 65px !important; /* Space for the success message */
    margin: 20px 0 30px 0 !important;
    clear: both !important;
}

/* Ensure Turnstile success message is visible */
.wpforms-recaptcha-container .cf-turnstile-success,
.wpforms-recaptcha-container [data-state="success"] {
    position: relative !important;
    display: block !important;
    margin: 10px 0 !important;
}

/* Ensure visible Turnstile widgets are properly positioned */
.wpforms-recaptcha-container.wpforms-is-turnstile:not(.wpforms-is-turnstile-invisible),
.cf-turnstile,
[data-cf-turnstile],
.cf-turnstile-wrapper {
    position: relative !important;
    margin: 15px 0 !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    max-width: 300px !important;
    z-index: 1 !important;
}

/* Ensure the Turnstile iframe doesn't overlap */
.cf-turnstile iframe,
[data-cf-turnstile] iframe,
.wpforms-recaptcha-container iframe {
    position: relative !important;
    display: block !important;
}

/* Fix for the contact form panel - let it expand naturally */
#contact-form-panel {
    max-height: none !important; /* Remove height restriction */
    height: auto !important; /* Natural height */
    overflow: visible !important; /* No scrolling */
    padding-bottom: 20px !important;
    /* Keep it within viewport with scrolling on body if needed */
    max-width: 450px !important;
}

/* Ensure the form container inside has proper spacing */
#contact-form-container {
    padding-bottom: 30px !important;
    position: relative !important;
    overflow: visible !important;
}

/* Specific fix for WPForms container */
#contact-form-panel .wpforms-container {
    position: relative !important;
    overflow: visible !important;
}

/* Specific fix for WPForms Turnstile container */
.wpforms-container .wpforms-recaptcha-container {
    clear: both !important;
    margin: 20px 0 60px 0 !important; /* Extra bottom margin */
}

/* Ensure proper spacing before submit button */
#contact-form-panel .wpforms-submit-container {
    margin-top: 20px !important;
    clear: both !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Additional spacing if Turnstile is present */
#contact-form-panel .cf-turnstile + .wpforms-submit-container,
#contact-form-panel [data-cf-turnstile] + .wpforms-submit-container {
    margin-top: 30px !important;
}

/* Ensure the submit button is always visible and clickable */
#contact-form-panel .wpforms-submit {
    position: relative !important;
    z-index: 10 !important;
    display: inline-block !important;
    margin-bottom: 20px !important; /* Ensure space at bottom */
}

/* Add spacing after Turnstile and before submit button */
#contact-form-panel .wpforms-recaptcha-container + .wpforms-submit-container {
    margin-top: 30px !important;
    padding-bottom: 30px !important;
}

/* Fix for any potential absolute positioning issues */
#contact-form-panel .wpforms-container .wpforms-field:last-of-type {
    margin-bottom: 20px !important;
}

/* Ensure Turnstile doesn't float or position absolutely */
#contact-form-panel .cf-turnstile-container {
    position: relative !important;
    float: none !important;
    margin: 15px 0 25px 0 !important;
}

/* Additional safeguard for form fields */
#contact-form-panel .wpforms-field {
    position: relative !important;
    clear: both !important;
}

/* Make sure success message from Turnstile doesn't overlap */
#contact-form-panel .cf-turnstile-success {
    position: relative !important;
    margin-bottom: 20px !important;
}

/* Fix potential z-index stacking issues */
#contact-form-panel form {
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure Cloudflare branding stays in place */
.cf-turnstile .cf-turnstile-brand,
[data-cf-turnstile] .cf-turnstile-brand {
    position: relative !important;
    display: block !important;
    margin-top: 10px !important;
}