.custom-form-wrapper {
background: radial-gradient(circle at top, #334D66, #1E2E3D);
color: white;
padding: 15px;
border-radius: 12px;
position: relative;
overflow: hidden;
font-family: 'Arial', sans-serif;
min-height: 450px; }
.custom-form-wrapper .form-heading {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
padding-top: 15px;
}
@media (max-width: 768px) {
.custom-form-wrapper .form-heading {
font-size: 16px;
}
}
.custom-form-wrapper .highlight {
color: #EF981F;
}
.custom-form-wrapper .form-divider {
justify-content: center;
text-align: center;
border-top: 1px solid white;
width: 100%;
}
.custom-form-wrapper .form-inner {
justify-content: center;
padding: 20px 30px;
}
@media (max-width: 768px) {
.custom-form-wrapper .form-inner {
padding: 5px 5px;
}
}
.custom-form-wrapper .form-subheading {
text-align: center;
color: #ccc;
font-size: 16px;
margin-bottom: 10px;
}
.custom-form-wrapper .sub-divider {
border-top: 2px solid rgba(255,255,255,0.2);
width: 80%;
margin: 10px auto;
}
.custom-form-wrapper .form-row {
display: flex;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.custom-form-wrapper .form-row input,
.custom-form-wrapper .form-row textarea {
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 6px;
width: 100%;
flex: 1;
background-color: rgba(255,255,255,0.1);
color: white;
}
.custom-form-wrapper input::placeholder,
.custom-form-wrapper textarea::placeholder {
color: #bbb;
}
.custom-form-wrapper textarea {
resize: vertical;
} .custom-form-wrapper input:focus,
.custom-form-wrapper textarea:focus {
outline: none;
border: 1px solid #EF981F;
box-shadow:
0 0 4px #EF981F,
0 0 8px rgba(239, 152, 31, 0.8),
0 0 12px rgba(239, 152, 31, 0.4);
animation: electricPulse 0.7s ease-in-out;
background-color: rgba(255, 255, 255, 0.08);
color: white;
} @keyframes electricPulse {
0% {
box-shadow:
0 0 2px #EF981F,
0 0 4px rgba(239, 152, 31, 0.6),
0 0 6px rgba(239, 152, 31, 0.3);
transform: scale(1);
}
50% {
box-shadow:
0 0 6px #EF981F,
0 0 12px rgba(239, 152, 31, 0.9),
0 0 20px rgba(239, 152, 31, 0.5);
transform: scale(1.01);
}
100% {
box-shadow:
0 0 4px #EF981F,
0 0 8px rgba(239, 152, 31, 0.6),
0 0 10px rgba(239, 152, 31, 0.3);
transform: scale(1);
}
}
.custom-form-wrapper .form-note {
text-align: center;
font-size: 10px;
color: #aaa;
margin-top: 10px;
}
.custom-form-wrapper .warning-text {
text-align: center;
font-size: 14px;
color: red;
margin-top: 10px;
visibility: hidden;
}
.custom-form-wrapper .submit-btn {
margin-top: 15px;
padding: 12px 20px;
border: none;
border-radius: 8px;
background-color: #EF981F;
color: white;
font-size: 16px;
cursor: pointer;
width: 100%;
position: relative;
overflow: hidden;
transition: background 0.3s ease, box-shadow 0.2s ease;
box-shadow: 0 0 8px rgba(239, 152, 31, 0.4);
}
.custom-form-wrapper .submit-btn:hover {
background-color: #f4a832;
box-shadow:
0 0 8px #EF981F,
0 0 12px rgba(239, 152, 31, 0.8),
0 0 16px rgba(239, 152, 31, 0.5);
}
.custom-form-wrapper .submit-btn::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s ease-in-out;
pointer-events: none;
}
.custom-form-wrapper .submit-btn:hover::after {
left: 100%;
} .custom-form-wrapper .submit-btn:active {
transform: scale(0.98);
box-shadow:
0 0 12px #EF981F,
0 0 20px rgba(239, 152, 31, 0.8),
0 0 30px rgba(239, 152, 31, 0.6);
animation: electricStrike 0.25s ease-in-out;
}
@keyframes electricStrike {
0% {
box-shadow:
0 0 6px #EF981F,
0 0 10px rgba(239, 152, 31, 0.6),
0 0 14px rgba(239, 152, 31, 0.3);
}
50% {
box-shadow:
0 0 12px #EF981F,
0 0 20px rgba(239, 152, 31, 0.9),
0 0 30px rgba(239, 152, 31, 0.6);
}
100% {
box-shadow:
0 0 8px #EF981F,
0 0 16px rgba(239, 152, 31, 0.6),
0 0 24px rgba(239, 152, 31, 0.4);
}
} .custom-form-wrapper .charging-success {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
min-height: 300px; 
}
.custom-form-wrapper .charging-bar {
width: 100%;
height: 12px;
background-color: #444;
border-radius: 6px;
overflow: hidden;
margin: 10px auto;
box-shadow: 0 0 6px rgba(255,255,255,0.1);
}
.custom-form-wrapper .charging-fill {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #EF981F, #EF981F);
border-radius: 6px;
transition: width 2s ease-in-out, background 0.5s ease;
}
.custom-form-wrapper .charging-text {
font-size: 14px;
color: #ccc;
margin-top: 10px;
opacity: 0;
transition: opacity 1s ease;
}
.custom-form-wrapper .thank-you-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
min-height: 300px; }
.custom-form-wrapper .thank-you-content h2 {
font-size: 22px;
margin-bottom: 10px;
color: white;
}
.custom-form-wrapper .thank-you-content p {
font-size: 16px;
color: #ccc;
}