/* Contact form inside the "Contact us" modal (#OpenModal1). */
#OpenModal1 form.lead-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
#OpenModal1 .lead-form .lf-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
#OpenModal1 .lead-form label{
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: rgba(255,255,255,.9);
  padding-left: 22px;
}
#OpenModal1 .lead-form label span{ color: #ffd2d2; }
#OpenModal1 .lead-form input[type="text"],
#OpenModal1 .lead-form input[type="email"],
#OpenModal1 .lead-form input[type="tel"]{
  width: 100%;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 30px;
  outline: 0;
  padding: 0 22px;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  color: #1C1919;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
#OpenModal1 .lead-form input::placeholder{ color: #a9a3a3; }
#OpenModal1 .lead-form input:focus{
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.25);
}
#OpenModal1 .lead-form .lf-field.is-invalid input{ border-color: #ffb3b3; }
#OpenModal1 .lead-form .lf-error{
  min-height: 18px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #ffe0e0;
  padding-left: 22px;
}
#OpenModal1 .lead-form .lf-trap{
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
#OpenModal1 .lead-form .lf-submit{
  grid-column: 1 / -1;
  height: 64px;
  border: 0;
  border-radius: 32px;
  background: #fff;
  color: #C83C3F;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
#OpenModal1 .lead-form .lf-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
#OpenModal1 .lead-form .lf-submit:disabled{
  opacity: .7;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
#OpenModal1 .lead-form .lf-status{
  grid-column: 1 / -1;
  min-height: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  text-align: center;
  color: #ffe0e0;
}
#OpenModal1 .lead-form .lf-status:empty{ display: none; }
#OpenModal1 .lead-form .private{
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 20px;
  opacity: .85;
}

/* Success state replaces the form. */
#OpenModal1 .lf-success{
  padding: 30px 10px 20px;
  text-align: center;
  color: #fff;
  font-family: 'Manrope', sans-serif;
}
#OpenModal1 .lf-success[hidden]{ display: none; }
#OpenModal1 .lf-check{
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  position: relative;
}
#OpenModal1 .lf-check::after{
  content: "";
  position: absolute;
  left: 26px;
  top: 16px;
  width: 18px;
  height: 32px;
  border: solid #fff;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}
#OpenModal1 .lf-success-title{
  font-size: 30px;
  line-height: 38px;
  margin-bottom: 10px;
}
#OpenModal1 .lf-success-text{
  font-size: 18px;
  line-height: 26px;
  opacity: .9;
}

@media (max-width: 768px){
  #OpenModal1 form.lead-form{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #OpenModal1 .lead-form input[type="text"],
  #OpenModal1 .lead-form input[type="email"],
  #OpenModal1 .lead-form input[type="tel"]{ height: 52px; font-size: 16px; }
  #OpenModal1 .lead-form .lf-submit{ height: 56px; }
  #OpenModal1 .lf-success-title{ font-size: 24px; line-height: 30px; }
}

/* The original modal had a fixed 415px height; let it grow with the form and stay centred.
   The close button sits above the box (top: -91px), so scrolling happens inside .modal_inner. */
#OpenModal1 .popup{
  height: auto;
  min-height: 0;
  max-width: 640px;
  top: calc(50% + 45px);
  bottom: auto;
  transform: translateY(-50%);
}
#OpenModal1 .modal_inner{
  padding: 40px 40px 32px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}
@media (max-width: 768px){
  #OpenModal1 .popup{
    height: auto;
    min-height: 0;
    max-width: 95%;
  }
  #OpenModal1 .modal_inner{
    padding: 28px 18px 22px;
    max-height: calc(100vh - 120px);
  }
}

#OpenModal1 form.lead-form[hidden]{ display: none; }
#OpenModal1 .modal_form:has(.lf-success:not([hidden])) .sttl{ display: none; }
@media (max-width: 768px){
  #OpenModal1 .lead-form .lf-error:empty{ display: none; }
  #OpenModal1 .lead-form .lf-field{ gap: 6px; }
  #OpenModal1 .ttl{ margin-bottom: 8px; }
  #OpenModal1 .sttl{ margin-bottom: 18px; font-size: 16px; line-height: 22px; }
}
