/* =========================
   LAYOUT
========================= */
.callback-section{
  padding:40px 15px;
  background:#f3f6f9;
}


/* =========================
   CALLBACK TITLE STYLE
========================= */
.callback-title{
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #16a34a;
  position: relative;
  display: inline-block;
  animation: titleFade 0.8s ease forwards;
  opacity: 0;
}

/* gradient shine */
.callback-title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 60%;
  height: 4px;
  border-radius: 10px;
  background: linear-gradient(90deg,#16a34a,#22c55e,#86efac);
  animation: lineGrow 1s ease forwards;
}

/* fade slide */
@keyframes titleFade{
  from{
    opacity:0;
    transform: translateY(-15px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* underline grow */
@keyframes lineGrow{
  from{ width:0; }
  to{ width:60%; }
}

/* mobile */
@media(max-width:768px){
  .callback-title{
    font-size:22px;
  }
}


.callback-container{
  max-width:1100px;
  margin:auto;
  display:flex;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.image-side,
.form-side{
  flex:1;
}

/* IMAGE */
.image-side{
  background:#eaf7ee;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.image-side img{
  width:100%;
  max-width:420px;
  height:auto;
  object-fit:contain;
}

/* =========================
   FORM
========================= */
.form-card{
  padding:30px;
}

.form-card h2{
  margin-bottom:5px;
}

.form-card p{
  color:#666;
  margin-bottom:18px;
  font-size:14px;
}

/* =========================
   INPUTS
========================= */
#callbackForm input,
#callbackForm select,
.primary-btn{
  width:100%;
  height:48px;
  border-radius:8px;
  font-size:14px;
  margin-bottom:12px;
  padding:0 12px;
  box-sizing:border-box;
}

/* border */
#callbackForm input,
#callbackForm select{
  border:2px solid #d1d5db;
  transition:.2s;
  background:#fff;
}

/* focus effect */
#callbackForm input:focus,
#callbackForm select:focus{
  border-color:#16a34a;
  outline:none;
  box-shadow:0 0 0 3px rgba(22,163,74,.15);
}

/* =========================
   SEND OTP BUTTON
========================= */
.primary-btn{
  border:none;
  background:#16a34a;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  transition:.2s;
}

.primary-btn:hover{
  background:#15803d;
}

.primary-btn:disabled{
  background:#9ca3af;
  cursor:not-allowed;
}

/* =========================
   OTP
========================= */
.otp-box{
  display:none;
  margin-top:15px;
  text-align:center;
}

.otp-box h3{
  margin-bottom:10px;
}

.otp-inputs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:15px 0;
}

/* otp inputs */
.otp-inputs input{
  width:55px;
  height:55px;
  font-size:22px;
  text-align:center;
  border-radius:8px;
  border:2px solid #d1d5db;
  transition:.2s;
}

.otp-inputs input:focus{
  border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.15);
  outline:none;
}

/* =========================
   VERIFY BUTTON
========================= */
.verify-btn{
  width:100%;
  height:48px;
  border:none;
  border-radius:8px;
  background:#16a34a;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  transition:.2s;
}

.verify-btn:hover{
  background:#15803d;
}

.verify-btn:disabled{
  background:#9ca3af;
  cursor:not-allowed;
}

/* =========================
   MOBILE
========================= */
@media(max-width:768px){
  .callback-container{
    flex-direction:column;
  }

  .image-side{
    padding:10px;
  }

  .form-card{
    padding:20px;
  }
}


/* =========================
   RESEND
========================= */
.resend-wrap{
  margin-top:12px;
  font-size:13px;
  color:#666;
}

#resendOtpBtn{
  background:none;
  border:none;
  color:#16a34a;
  font-weight:bold;
  cursor:pointer;
}

#resendOtpBtn:disabled{
  color:#9ca3af;
  cursor:not-allowed;
}

/* =========================
   SHAKE ANIMATION
========================= */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

.shake{
  animation: shake .3s ease;
  border-color:#ef4444 !important;
}

.otp-info{
  font-size:13px;
  color:#555;
  margin-bottom:10px;
}