/* Floating labels */
.float-input{position:relative;margin-bottom:20px;}
.float-input input,
.float-input select,
.float-input textarea{
  width:100%;padding:14px 14px 14px 35px;border:1px solid #D1D5DB;border-radius:8px;font-size:14px;transition:0.3s;outline:none;background:#fff;
}
.float-input input:focus,
.float-input select:focus,
.float-input textarea:focus{border-color:#1E3A8A;box-shadow:0 0 6px rgba(30,58,138,0.25);}
.float-input label{position:absolute;left:35px;top:14px;color:#9CA3AF;pointer-events:none;transition:0.3s;}
.float-input input:focus + label,
.float-input input:not(:placeholder-shown)+label,
.float-input select:focus + label,
.float-input select:not([value=""])+label,
.float-input textarea:focus + label,
.float-input textarea:not(:placeholder-shown)+label{
  top:-10px;font-size:12px;color:#1E3A8A;background:#F9FAFB;padding:0 4px;
}
.float-input i{position:absolute;left:10px;top:14px;color:#9CA3AF;font-size:14px;}

/* Button */
form button{
  width:100%;
  background:linear-gradient(90deg,#1E3A8A,#2563EB);
  color:white;padding:16px;border:none;border-radius:10px;font-size:18px;cursor:pointer;
  display:flex;justify-content:center;align-items:center;
  transition:all 0.3s ease;
}
form button:hover{opacity:0.9;}

/* Toast */
#xavindo-toast{
  position:fixed;top:20px;right:20px;background:#1E3A8A;color:white;
  padding:14px 22px;border-radius:10px;display:none;z-index:9999;opacity:0;
  transition:all 0.5s ease;
}

/* Mobile */
@media(max-width:768px){
  #xavindo-consultation-wrapper{padding:20px;}
  #xavindo-consultation-wrapper h2{font-size:24px;}
}

#xavindo-success-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.success-box{
background:white;
padding:40px;
border-radius:16px;
text-align:center;
width:320px;
animation:popUp 0.4s ease;
}

.success-box h3{
color:#278a1e;
margin-top:20px;
}

.success-box p{
color:#555;
font-size:14px;
}

@keyframes popUp{
0%{transform:scale(0.7);opacity:0;}
100%{transform:scale(1);opacity:1;}
}

/* CHECKMARK ANIMATION */

.checkmark-circle {
width:80px;
height:80px;
position:relative;
display:inline-block;
}

.background {
width:80px;
height:80px;
border-radius:50%;
background:#22c55e;
position:absolute;
}

.checkmark.draw:after {
animation-duration:800ms;
animation-timing-function:ease;
animation-name:checkmark;
transform:scaleX(-1) rotate(135deg);
animation-fill-mode:forwards;
}

.checkmark:after {
opacity:1;
height:40px;
width:20px;
transform-origin:left top;
border-right:6px solid white;
border-top:6px solid white;
content:'';
left:28px;
top:42px;
position:absolute;
}

@keyframes checkmark {
0% {
height:0;
width:0;
opacity:1;
}
20% {
height:0;
width:20px;
opacity:1;
}
40% {
height:40px;
width:20px;
opacity:1;
}
100% {
height:40px;
width:20px;
opacity:1;
}
}

#xavindo-success-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
backdrop-filter:blur(4px);
}

.success-box{
background:white;
padding:40px;
border-radius:18px;
text-align:center;
width:340px;
animation:popupAnim 0.4s ease;
}

@keyframes popupAnim{
0%{transform:scale(.7);opacity:0;}
100%{transform:scale(1);opacity:1;}
}

.success-box h3{
color:#1E3A8A;
margin-top:20px;
font-size:22px;
}

.success-box p{
color:#555;
font-size:14px;
line-height:1.6;
}

/* CHECKMARK */

.checkmark-circle{
width:90px;
height:90px;
position:relative;
display:inline-block;
}

.background{
width:90px;
height:90px;
border-radius:50%;
background:#22c55e;
position:absolute;
}

.checkmark:after{
opacity:1;
height:45px;
width:22px;
transform-origin:left top;
border-right:6px solid white;
border-top:6px solid white;
content:'';
left:32px;
top:50px;
position:absolute;
transform:scaleX(-1) rotate(135deg);
animation:checkAnim 0.8s ease forwards;
}

@keyframes checkAnim{
0%{height:0;width:0;}
30%{height:0;width:22px;}
100%{height:45px;width:22px;}
}