/* Error styles */
.sanaam-error-field,
.sanaam-error-field:focus,
.sanaam-error-field:active,
.sanaam-error-field:hover
 {
  border-bottom-color: red !important;
  border: 4px solid red !important;
  border-color: red !important;
}

.sanaam-error {
  color: red;
  font-size: 14px;
  margin-top: 4px;
}

/* Success styles */
.sanaam-valid {
  border: 1px solid green !important;
}

/* Submit form error message */
.sanaam-form-error {
  color: red;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 15px;
}

/* Shake animation */
@keyframes sanaam-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.sanaam-shake {
  animation: sanaam-shake 0.5s;
}







/*form focus*/
form.elementor-form .elementor-field.elementor-size-sm.elementor-field-textual,
form.elementor-form textarea.elementor-field.elementor-size-sm.elementor-field-textual {
  position: relative !important;
  background-color: #F3F4F6;

  /* English: two gradients, both positioned at the center */
  background-image:
    linear-gradient(to right, #0D121C 0%, #0D121C 100%),
    linear-gradient(to left,  #0D121C 0%, #0D121C 100%) !important;

  background-position: center bottom, center bottom !important;
  background-repeat: no-repeat !important;

  /* English: hidden by default (0% width each, so invisible) */
  background-size: 0% 2px, 0% 2px !important;

  transition: background-size 0.32s cubic-bezier(.2,.8,.2,1) !important;
  -webkit-transition: background-size 0.32s cubic-bezier(.2,.8,.2,1) !important;

  border-bottom: 2px solid #d1d5db !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Focus: expand outward from center */
form.elementor-form .elementor-field.elementor-size-sm.elementor-field-textual:focus,
form.elementor-form textarea.elementor-field.elementor-size-sm.elementor-field-textual:focus,
form.elementor-form .elementor-field.elementor-size-sm.elementor-field-textual:focus-visible {
  background-size: 100% 2px, 50% 2px !important; /* each side grows to half */
  border-bottom-color: transparent !important;
  background-color: #ffffff;
}



/*news focus*/


/* Override old popup input focus with animation */
#newsletter_popup input.elementor-field.elementor-size-sm.elementor-field-textual {
  position: relative !important;
  background-color: #F3F4F6 !important;

  background-image:
    linear-gradient(to right, #0D121C 0%, #0D121C 100%),
    linear-gradient(to left,  #0D121C 0%, #0D121C 100%) !important;

  background-position: center bottom, center bottom !important;
  background-repeat: no-repeat !important;
  background-size: 0% 2px, 0% 2px !important;

  transition: background-size 0.32s cubic-bezier(.2,.8,.2,1) !important;
  -webkit-transition: background-size 0.32s cubic-bezier(.2,.8,.2,1) !important;

  border-bottom: 2px solid #d1d5db !important; /* static gray line */
  outline: none !important;
  box-shadow: none !important;
  border: none !important; /* disable conflicting border */
}

/* Focus animation */
#newsletter_popup input.elementor-field.elementor-size-sm.elementor-field-textual:focus {
  background-size: 100% 2px, 50% 2px !important;
  border-bottom-color: transparent !important;
  background-color: #ffffff !important;
}