/*
 * WPForms OTP Verification Styles
 * Version 1.3 - Fix for column layout issues
*/

.otp-controls-wrapper {
    /* --- FIX STARTS HERE --- */
    /* These properties force the container to take up the full width
       and move to its own line, fixing the side-by-side layout issue. */
    width: 100% !important;
    flex-basis: 100% !important; /* For parent containers using Flexbox */
    clear: both !important;      /* For parent containers using floats */
    /* --- FIX ENDS HERE --- */

    margin-top: 15px !important;
    padding: 15px !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

/*
 * === Button Styling ===
 * Target our specific buttons to override the theme's aggressive reset.
*/
.otp-controls-wrapper #send-otp-btn {
    /* Re-apply button styles */
    display: inline-block !important;
    background-color: #dd3333 !important; /* Updated main color */
    color: #ffffff !important;
    border: 1px solid #dd3333 !important; /* Updated main color */
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
    text-align: center !important;
    border-radius: 3px !important;
    cursor: pointer !important;

    /* Reset any aggressive styles */
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    position: static !important;
    float: none !important;
}

/* Style for buttons when they are disabled */
.otp-controls-wrapper #send-otp-btn:disabled {
    background-color: #a0a5aa !important;
    border-color: #a0a5aa !important;
    color: #f1f1f1 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.otp-input-container {
    margin-top: 15px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

/*
 * === Input Field Styling ===
 * Target our specific OTP input field.
*/
.otp-controls-wrapper #otp-input {
    flex-grow: 1;
    max-width: 200px;
    background: #ffffff !important;
    border: 1px solid #8c8f94 !important;
    padding: 6px !important;
    height: auto !important;
    font-size: 14px !important;
    border-radius: 3px !important;
}

/*
 * === Message Styling ===
*/
.otp-message {
    margin-top: 10px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 10px !important;
    border-radius: 3px !important;
    display: none; /* Hidden until a message exists */
}

.otp-message:not(:empty) {
    display: block !important;
}

.otp-message.success {
    color: #155724 !important;
    background-color: #d4edda !important;
    border: 1px solid #c3e6cb !important;
}

.otp-message.error {
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border: 1px solid #f5c6cb !important;
}

/* Style for disabled main WPForms submit button */
.wpforms-submit.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}