#bkashPaymentModal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
overflow-y: auto;
}
.modal-content {
background-color: #fff;
margin: 3% auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
max-width: 800px;
position: relative;
border-radius: 10px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
} @media only screen and (max-width: 600px) {
.modal-content {
margin: 10% auto;
width: 98%;
}
} .modal-body {
display: flex;
}
.form-column {
flex: 1;
padding-right: 20px;
} #bkashCheckoutForm {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#bkashCheckoutForm label {
margin: 10px 0 5px;
font-weight: bold;
font-size: 14px;
}
#bkashCheckoutForm input[type="text"],
#bkashCheckoutForm input[type="email"],
#bkashCheckoutForm input[type="tel"] {
width: 100%;
padding: 10px;
margin-bottom: 8px;
border: 1px solid #ddd;
border-radius: 4px;
transition: all 0.3s ease;
box-sizing: border-box;
} #bkashCheckoutForm input:focus {
outline: none;
border-color: #0066cc;
box-shadow: 0 0 8px rgba(0, 102, 204, 0.5);
} #bkashCheckoutForm button {
background-color: #28a745;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
} #bkashCheckoutForm button:hover {
background-color: #218838;
} #bkashCheckoutForm input,
#bkashCheckoutForm button {
max-width: 100%;
width: 100%;
} .logo-column {
flex: 0 0 250px;
padding-left: 20px;
text-align: center;
margin-top: 20px;
background-color: #f9f9f9;
border-radius: 8px;
padding: 15px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
} #mobileOperator {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 20px;
}
#mobileOperator label {
font-weight: bold;
cursor: pointer;
margin-right: 15px;
position: relative;
padding-left: 30px;
}
#mobileOperator input[type="radio"] {
appearance: none; width: 18px;
height: 18px;
border-radius: 50%;
cursor: pointer;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
} #mobileOperator input[type="radio"][value="bkash"] {
background-color: #E2126E; border: 2px solid #E2126E;
}
#mobileOperator input[type="radio"][value="nagad"] {
background-color: #F69220; border: 2px solid #F69220;
}
#mobileOperator input[type="radio"][value="rocket"] {
background-color: #88288F; border: 2px solid #88288F;
}
#mobileOperator input[type="radio"][value="upay"] {
background-color: #0054A5; border: 2px solid #0054A5;
} #mobileOperator input[type="radio"]:checked {
border: 4px solid white;
box-shadow: 0 0 0 2px black;
} #mobileInfo {
text-align: center;
margin-top: 20px;
}
#mobileNumber {
font-size: 17px;
color: #333;
margin-bottom: 10px;
}
#operatorLogo {
display: none;
width: 120px;
height: auto;
margin: 10px auto;
display: block;
}
.instruction-text {
margin-top: 10px;
font-size: 13px;
color: #666;
font-style: italic;
} @media (max-width: 768px) {
.logo-column {
flex: 0 0 100%;
padding-left: 0;
}
#mobileOperator {
flex-direction: column;
justify-content: center;
}
#mobileOperator label {
margin-bottom: 10px;
}
}
#bkashCheckoutContainer h3 {
position: relative;
margin-bottom: 10px;
}
#bkashCheckoutContainer h3::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -5px;
height: 2px;
background-color: #e2126e;
transition: width 0.3s ease;
width: 100%;
margin-bottom: 10px;
}
#bkashCheckoutContainer h3:hover::after {
width: 50%; background-color: #e74c3c; margin-bottom: 10px;
} @media (max-width: 600px) {
#bkashCheckoutContainer h3 {
font-size: 20px; }
}.mobile-banking-container {
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
ul.payment-method-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.payment-method-item {
display: flex;
align-items: center;
justify-content: space-between; margin-bottom: 15px;
} .button-39 {
background-color: #FFFFFF;
border: 1px solid rgb(209, 213, 219);
border-radius: .5rem;
box-sizing: border-box;
color: #111827;
font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 15px;
font-weight: 600;
line-height: 1.25rem;
padding: .75rem 1rem;
text-align: center;
text-decoration: none;
text-decoration-thickness: auto;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 150px; height: 50px; display: flex;
align-items: center;
justify-content: center;
}
.button-39:hover {
background-color: #E2126E; color: white; }
.button-39:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.button-39:focus-visible {
box-shadow: none;
} .button-40 {
background-color: #FFFFFF; border: 1px solid rgb(209, 213, 219);
border-radius: .5rem;
box-sizing: border-box;
color: #111827; font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 15px;
font-weight: 600;
line-height: 1.25rem;
padding: .75rem 1rem;
text-align: center;
text-decoration: none;
text-decoration-thickness: auto;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 150px; height: 50px; display: flex;
align-items: center;
justify-content: center;
}
.button-40:hover {
background-color: #F69220; color: white; }
.button-40:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.button-40:focus-visible {
box-shadow: none;
} .button-41 {
background-color: #FFFFFF; border: 1px solid rgb(209, 213, 219);
border-radius: .5rem;
box-sizing: border-box;
color: #111827; font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 15px;
font-weight: 600;
line-height: 1.25rem;
padding: .75rem 1rem;
text-align: center;
text-decoration: none;
text-decoration-thickness: auto;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 150px; height: 50px; display: flex;
align-items: center;
justify-content: center;
}
.button-41:hover {
background-color: #88288F; color: white; }
.button-41:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.button-41:focus-visible {
box-shadow: none;
} .button-42 {
background-color: #FFFFFF; border: 1px solid rgb(209, 213, 219);
border-radius: .5rem;
box-sizing: border-box;
color: #111827; font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 15px;
font-weight: 600;
line-height: 1.25rem;
padding: .75rem 1rem;
text-align: center;
text-decoration: none;
text-decoration-thickness: auto;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 150px; height: 50px; display: flex;
align-items: center;
justify-content: center;
}
.button-42:hover {
background-color: #0054A5; color: white; }
.button-42:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.button-42:focus-visible {
box-shadow: none;
} .payment-icon {
width: 50px; height: 50px; margin: 0 10px; object-fit: contain; } .payment-number {
margin-left: 15px; font-weight: bold;
color: #333;
display: none;
} .payer-number-label {
font-family: Inter, sans-serif;
font-size: 16px;
font-weight: 400;
color: #000;
margin: 8px 0px 8px 0;
display: block; }
.transaction-id-label {
font-family: Inter, sans-serif;
font-size: 16px;
font-weight: 400;
color: #000;
margin: 8px 0px 8px 0;
display: block;
} .mobile-banking-form input[type="tel"],
.mobile-banking-form input[type="text"] {
width: 100%;
height:40px;
padding: 10px;
margin-top: 10px;
border: 1px solid #ddd;
border-radius: 4px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.mobile-banking-form input[type="tel"]:focus,
.mobile-banking-form input[type="text"]:focus {
border-color: #007cba;
box-shadow: 0 0 5px rgba(0, 124, 186, 0.5);
} .mobile-banking-form input[type="tel"]:hover,
.mobile-banking-form input[type="text"]:hover {
box-shadow: 0 0 8px rgba(0, 124, 186, 0.2);
} .payment-method-item:hover .payment-number {
transform: scale(1.1);
transition: transform 0.3s;
} .payment-method-item {
display: flex;
align-items: center;
transition: filter 0.3s ease; }
.payment-button {
transition: transform 0.3s ease; }
.zoom {
transform: scale(1.1); z-index: 1; }
.blur {
filter: blur(2px); } .payment-options {
display: flex; flex-direction: row; gap: 10px; align-items: center; font-family: Inter, sans-serif; margin-top: 16px; } .payment-options input[type="radio"] {
display: none; } .payment-options label {
align-items: center; background-color: #fff; border: 2px solid #000; box-sizing: border-box; color: #000; cursor: pointer; display: inline-block; height: 48px; justify-content: center; letter-spacing: -.8px; line-height: 24px; min-width: 140px; outline: 0; padding: 0 15px; text-align: center; text-decoration: none; transition: all .3s; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: 100%; } .payment-options label:focus {
color: #171e29; }
.payment-options label:hover {
border-color: #06f; color: #06f; } .payment-options input[type="radio"]:checked + label {
border-color: #06f; color: #06f; } .payment-options input[type="radio"]:checked + label:hover,
.payment-options input[type="radio"]:checked + label:focus {
border-color: #06f; color: #06f; } .payment-options input[type="radio"]:checked + label {
background-color: #edf2f7; box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 4px -6px; color: #41403e; border-left: 5px solid #2b6cb0;
}
@media (min-width: 768px) {
.payment-options label {
min-width: 170px; }
} @media (max-width: 768px) {
.payment-options {
flex-direction: column; align-items: flex-start; }
.payment-options label {
width: auto; min-width: 100%; }
}