.payment_method_mpesa_express {
font-weight: 600 !important;
font-size: 14px !important;
}
.iti__tel-input {
border: 3px solid #2CB349;
border-radius: 6px; line-height: 2.5;
padding: 8px 12px; font-size: 1.1em; box-shadow: 0 0 5px rgba(44, 179, 73, 0.3); outline: none; transition: box-shadow 0.3s ease, border-color 0.3s ease; } .iti__tel-input:focus {
border-color: #52b44b; box-shadow: 0 0 8px rgba(44, 179, 73, 0.5); }
label[for="mpesa_express_phone"] {
font-size: 16px;
}
li.wc_payment_method.payment_method_mpesa_express img {
max-width: 50px;
height: auto;
}
#valid-msg {
color: #00c900;
}
.hide {
display: none;
}
#error-msg {
color: red;
}
#request_payment_btn {
display: inline-block;
background: #2CB349;
font-size: 1.4em;
font-weight: 600;
cursor: pointer;
color: #ffffff;
border: 2px solid #52b44b;
border-radius: 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase;
}
.submit-btn {
display: inline-block;
background: #2CB349;
font-size: 1.4em;
font-weight: 600;
cursor: pointer;
color: #ffffff;
border: 2px solid #52b44b;
border-radius: 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase;
padding: 12px 20px;
transition: background-color 0.3s, box-shadow 0.3s;
}
.submit-btn:hover {
background-color: #52b44b;
box-shadow: 0 4px 6px rgba(44, 179, 73, 0.3);
}
.loaderingmain {
background: rgba(0, 0, 0, 0.45);
width: 100%;
height: 100%;
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
.loaderingmain .loader {
position: relative;
margin: 0 auto;
width: 30px;
height: 30px;
top: 50%;
}
.circular-loader {
animation: rotate 3s linear infinite;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
left: 0;
margin: auto;
}
.loader-path {
stroke-dasharray: 150, 200;
stroke-dashoffset: -10;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
@keyframes color {
0%, 40%, 66%, 80%, 90% {
stroke: #70c542;
}
}
.success_msg {
text-align: center;
width: 100%;
color: green;
font-size: 18px;
font-weight: 800;
}
.fail_msg {
text-align: center;
width: 100%;
color: red;
font-size: 20px;
font-weight: 800;
} .container.delivery {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
} .input-field {
margin-bottom: 15px;
}
.input-field label {
display: block;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
color: #333;
}
.input-field input[type="text"],
.input-field select {
width: 100%;
padding: 10px;
font-size: 14px;
border: 2px solid #2CB349;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s, box-shadow 0.3s;
}
.input-field input[type="text"]:focus,
.input-field select:focus {
border-color: #52b44b;
box-shadow: 0 0 5px rgba(44, 179, 73, 0.3);
outline: none;
} .half-width {
width: 48%;
float: left;
margin-right: 2%;
} .half-width:nth-child(2n) {
margin-right: 0;
} .full-width {
width: 100%;
clear: both;
} .phone-container {
display: flex;
align-items: center;
}
.custom-input-group {
display: flex;
align-items: center;
}
.custom-input-group-addon {
padding: 10px;
background-color: #e0e0e0;
border: 2px solid #2CB349;
border-right: none;
font-weight: bold;
color: #333;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.custom-form-control {
width: 100%;
padding: 10px;
border: 2px solid #2CB349;
border-left: none;
border-radius: 0 4px 4px 0;
font-size: 14px;
line-height: 1.5;
transition: border-color 0.3s, box-shadow 0.3s;
}
.custom-form-control:focus {
border-color: #52b44b;
box-shadow: 0 0 5px rgba(44, 179, 73, 0.3);
outline: none;
} .submit-btn {
display: inline-block;
background: #2CB349;
font-size: 1.2em;
font-weight: bold;
color: #ffffff;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
text-transform: uppercase;
transition: background-color 0.3s, box-shadow 0.3s;
}
.submit-btn:hover {
background-color: #52b44b;
box-shadow: 0 4px 6px rgba(44, 179, 73, 0.3);
} .success_msg,
.fail_msg {
text-align: center;
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.success_msg {
color: #28a745;
}
.fail_msg {
color: #dc3545;
} .container.delivery:after {
content: "";
display: table;
clear: both;
}