/*CSS For OTP Verification Plugin*/
#send-otp.verified {
    background-color: #00672E !important;
    color: white !important;
    border-color: #00672E !important;
}
/* Force disable place order button when not verified */
body:not(.otp-verified) button#place_order {
    opacity: 0.7 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}
#otp-wrapper, #otp-verification-wrapper {
    transition: all 0.3s ease!important;
}
#send-otp.processing {
    /* Keep your existing processing state styles */
}

#send-otp:disabled:not(.verified) {
    /* Styles for disabled but not verified state */
}
#otp-input{
	padding: 16px; 
	width: 100%; 
	max-width: 100%; 
	border-color:#DDDCDBD9;
}
.required_field{
	margin-bottom:8px;
	color:#404040;
}
.success {
  color: #00672E;
}

.error {
  color: #ff0000;
}

#otp-wrapper{
   display: flex; 
   font-family: 'Roboto';
}
#billing_email_field{
    width: 75%;
}
#send-otp{
    font-family: 'Roboto';
    width: 25%;
    padding: 19px 0px;
    align-self: end;
    position: relative;
    bottom: 9px;
    border-radius: 0px 4px 4px 0px;
    background-color: #2C2C2C;
    color: #F5F5F5;
    font-weight: 500;
}
.success_msg_wrapper{
    display: flex;
    padding: 15px;
    background-color: #E9FDF1;
    border-radius: 5px;
}
.success_msg_desc{
    font-family: Roboto;
    margin: 0px;
    font-size: 14px;
    font-weight: 400;
    color: #404040;
}
.success_msg_title{
    font-family: Roboto;
    margin-bottom: 5px;
    color: #00672E;
    font-size: 16px;
    font-weight: 600;
}
.success_msg_text_wrap{
    margin-left: 10px;
}


@media only screen and (max-width: 480px) {
    #billing_email_field {
        width: 100%;
    }
	#send-otp{
    width: 100%;
	white-space: normal;
    word-wrap: break-word;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
	padding: 12px 0px;
	border-radius: 0px 0px 4px 4px !important;
}
	#otp-wrapper {
    display: block;
}
}