paybill css

/* PayBill.css */

/* Base page style */
.paybill-container {
position: relative;
width: 100%;
min-height: 100vh;
background: linear-gradient(135deg, #0a2647, #aa9b9b, #185db2, #ffffff);
background-size: 600% 600%;
animation: gradientFlow 5s linear infinite;
}

@keyframes gradientFlow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}

/* Card styling */
.paybill-card {
width: 700px;
max-width: 90%;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Heading styling */
.paybill-heading {
color: #0a2647;
}

/* Floating label animation */
.transition-label {
transition: all 0.3s ease;
top: 50%;
left: 15px;
transform: translateY(-50%);
background-color: white;
padding: 0 5px;
pointer-events: none;
}

.label-up {
top: 0px;
font-size: 0.9rem;
color: #144272;
}

/* Input field */
.phone-input {
border: 2px solid #205295;
transition: border-color 0.3s ease;
}

.phone-input:focus {
border-color: #0a2647;
box-shadow: none;
}

/* Button styles /
/ Button styles - fixed layout issue */
.paybill-button {
padding: 5px 24px;
font-weight: 600;
font-size: 1rem;
background-color: #144272;
border: none;
color: white;
width: 100%;
max-width: 220px;
text-align: center;
display: inline-block;
white-space: nowrap;
border-radius: 999px;
transition: background-color 0.3s ease, transform 0.2s ease;
line-height: 1.4;
}

.paybill-button:hover {
background-color: #0a2647;
transform: translateY(-2px);
}

.paybill-button:active {
transform: scale(0.97);
}

/* Bill details section */
.bill-details-container {
margin-top: 30px;
background: #f5f7fa;
padding: 25px;
border-radius: 15px;
box-shadow: inset 0 0 10px rgba(32, 82, 149, 0.1);
}

.bill-header {
font-size: 1.4rem;
font-weight: 600;
color: #0a2647;
margin-bottom: 15px;
border-bottom: 2px solid #205295;
padding-bottom: 8px;
}

.bill-info p {
font-size: 1.05rem;
margin-bottom: 10px;
color: #333;
}

/* Modal background */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 38, 71, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

/* Modal content */
.modal-content {
background-color: #fff;
padding: 30px;
border-radius: 20px;
width: 400px;
max-width: 90%;
box-shadow: 0 15px 40px rgba(0,0,0,0.2);
text-align: center;
}

/* Tick animation */
.checkmark-circle {
width: 80px;
height: 80px;
position: relative;
display: inline-block;
vertical-align: top;
}

.background {
width: 80px;
height: 80px;
border-radius: 50%;
background: #28a745;
position: absolute;
top: 0;
left: 0;
}

.checkmark-circle {
width: 80px;
height: 80px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}

.background {
width: 80px;
height: 80px;
border-radius: 50%;
background: #28a745;
display: flex;
justify-content: center;
align-items: center;
}

.checkmark {
width: 24px;
height: 48px;
border-left: 5px solid #fff;
border-bottom: 5px solid #fff;
transform: rotate(-45deg);
animation: draw-check 0.6s ease-out forwards;
}

@keyframes draw-check {
0% {
height: 0;
width: 0;
opacity: 0;
}
50% {
height: 24px;
width: 0;
opacity: 1;
}
100% {
height: 24px;
width: 40px;
opacity: 1;
}
}