/**
 * Conditional SMS Opt-In for MemberPress
 * CSS styles for phone number validation feedback
 */

/* Phone number validation styles */
input[name="mepr_phone_number"].valid-phone {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
    background-color: #f8fff9 !important;
}

input[name="mepr_phone_number"].invalid-phone {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff8f8 !important;
}

/* Optional: Add validation message */
.phone-validation-message {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}

.phone-validation-message.valid {
    color: #28a745;
    display: block;
}

.phone-validation-message.invalid {
    color: #dc3545;
    display: block;
}

/* Smooth transitions */
input[name="mepr_phone_number"] {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* MemberPress form specific adjustments */
.mepr-form-row input[name="mepr_phone_number"].valid-phone {
    border-color: #28a745 !important;
}

.mepr-form-row input[name="mepr_phone_number"].invalid-phone {
    border-color: #dc3545 !important;
}