/* CAPTCHA Field Styling - Position it directly above submit button using CSS */

/* Target the field that contains .g-recaptcha */
.userform .field:has(.g-recaptcha),
.userform .field[id*="Nocaptcha"] {
    clear: both !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    text-align: right !important;
    float: none !important;
    display: block !important;
}

/* Fallback for browsers that don't support :has() - target by ID pattern */
.userform .field[id*="Nocaptcha"] {
    clear: both !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    text-align: right !important;
    float: none !important;
    display: block !important;
}

/* Target the .g-recaptcha element directly - align right */
.userform .g-recaptcha {
    clear: both !important;
    width: auto !important;
    margin-bottom: 15px !important;
    text-align: right !important;
    float: right !important;
    display: inline-block !important;
}

/* Ensure the field container for CAPTCHA is full width and right-aligned */
.userform .field:has(.g-recaptcha),
.userform .field[id*="Nocaptcha"] {
    width: 100% !important;
    clear: both !important;
    float: none !important;
    text-align: right !important;
}

.userform .field:has(.g-recaptcha) .middleColumn,
.userform .field[id*="Nocaptcha"] .middleColumn {
    width: 100% !important;
    text-align: right !important;
    float: none !important;
    padding: 0 !important;
}

/* Ensure CAPTCHA field appears before Actions (submit button) */
.userform .field:has(.g-recaptcha) ~ .clear,
.userform .field[id*="Nocaptcha"] ~ .clear {
    clear: both !important;
}

/* Position Actions (submit button) right after CAPTCHA */
.userform .Actions {
    clear: both !important;
    margin-top: 0 !important;
    text-align: right !important;
    width: 100% !important;
}

/* Use flexbox or grid to ensure proper ordering if needed */
.userform-fields {
    display: flex;
    flex-direction: column;
}

/* Ensure CAPTCHA field is the last field before Actions */
.userform .field:has(.g-recaptcha),
.userform .field[id*="Nocaptcha"] {
    order: 9999;
}

/* Alternative: Use CSS to move CAPTCHA before Actions using positioning */
.userform {
    position: relative;
}

/* Make sure CAPTCHA floats to the right to align with submit button */
.userform .field:has(.g-recaptcha) .g-recaptcha,
.userform .field[id*="Nocaptcha"] .g-recaptcha,
.userform .g-recaptcha {
    float: right !important;
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Ensure error message is visible */
.userform .field .message.error.captcha-error {
    display: block !important;
    color: #d32f2f !important;
    font-weight: bold !important;
    margin-top: 10px !important;
    padding: 8px !important;
    background-color: #ffebee !important;
    border: 1px solid #ffcdd2 !important;
    border-radius: 4px !important;
    clear: both !important;
}