.modal-lf {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center; opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-lf.is-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.modal-lf__backdrop {
position: absolute;
inset: 0;
background: rgba(12, 62, 154, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
} .modal-lf__wrap {
position: relative;
z-index: 1;
overflow: visible; transform: translateY(12px);
transition: transform 0.25s ease;
}
.modal-lf.is-open .modal-lf__wrap {
transform: translateY(0);
} .modal-lf__panel {
position: relative;
width: 580px;
box-sizing: border-box; padding: 30px 30px 30px;
border-radius: 30px;
background: linear-gradient(180deg, #4085D9 0%, #0C3E9A 100%);
color: rgba(255, 240, 240, 1);
} .modal-lf__close {
position: absolute;
top: -50px;
right: -35px;
width: 46px;
height: 46px;
background: none;
border: none;
cursor: pointer;
padding: 0;
line-height: 0;
transition: opacity 0.2s;
}
.modal-lf__close:hover { opacity: 0.75; }
.modal-lf__close svg { display: block; } .modal-lf__title {
font-family: 'Mulish', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 47px;
letter-spacing: 0;
color: rgba(255, 240, 240, 1);
margin: 0 0 15px;
} .modal-lf__description {
font-family: 'Mulish', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0;
color: rgba(255, 240, 240, 1);
margin: 0 0 30px;
} .modal-lf__form {
display: flex;
flex-direction: column;
} .modal-lf__fields {
display: flex;
gap: 30px;
margin-bottom: 25px;
}
.modal-lf__fields .lead-form__field {
flex: 0 0 245px;
width: 245px;
} .modal-lf__input {
width: 100%;
height: 38px;
border-radius: 40px;
border: 1.5px solid rgba(224, 229, 237, 0.6);
background: transparent;
padding: 0 16px;
font-family: 'Mulish', sans-serif;
font-size: 16px;
color: rgba(255, 240, 240, 1);
outline: none;
box-sizing: border-box;
transition: border-color 0.2s;
}
.modal-lf__input::placeholder {
color: rgba(255, 240, 240, 0.55);
}
.modal-lf__input:focus {
border-color: rgba(255, 240, 240, 0.9);
background: transparent;
box-shadow: none;
outline: none;
}
.modal-lf__input:-webkit-autofill,
.modal-lf__input:-webkit-autofill:hover,
.modal-lf__input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
-webkit-text-fill-color: rgba(255, 240, 240, 1) !important;
transition: background-color 9999s ease-out;
} .modal-lf__agree {
margin-bottom: 25px;
}
.modal-lf__agree-text {
font-family: 'Mulish', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0;
color: rgba(255, 240, 240, 1);
} .modal-lf__submit {
width: 100%;
height: 41px;
border-radius: 40px;
background: #1F4FCE;
border: none;
cursor: pointer;
font-family: 'Mulish', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0;
color: rgba(255, 240, 240, 1);
transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.2s ease;
margin-top: 0;
} .modal-lf__panel .lead-form__submit,
.modal-lf .modal-lf__submit {
background: rgba(255, 240, 240, 1) !important;
color: #1F4FCE !important;
margin-top: 0;
}
.modal-lf__submit:hover {
opacity: 0.95;
transform: translateY(-2px);
} .modal-lf__success {
margin-top: 14px;
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 240, 240, 1);
} .modal-lf__agree.is-error svg rect { stroke: #ff6b6b; }
.modal-lf__agree.is-error { animation: shake 0.3s; } @media (max-width: 1024px) {
.modal-lf__panel {
width: 452px;
padding: 20px 24px 30px;
}
.modal-lf__close {
top: -45px;
right: -40px;
}
.modal-lf__title {
font-size: 28px;
line-height: 35px;
margin-bottom: 15px;
}
.modal-lf__description {
font-size: 12px;
margin-bottom: 30px;
}
.modal-lf__fields {
gap: 20px;
margin-bottom: 20px;
}
.modal-lf__fields .lead-form__field {
flex: 1 1 auto;
width: auto;
}
.modal-lf__agree {
margin-bottom: 20px;
}
.modal-lf__agree-text {
font-size: 12px;
}
.modal-lf__submit {
font-size: 12px;
height: 38px;
}
} @media (max-width: 640px) { .modal-lf {
align-items: center;
padding: 16px;
}
.modal-lf__close {
top: -60px;
right: 0;
}
.modal-lf__wrap {
width: 100%;
max-width: 310px;
}
.modal-lf__panel {
width: 100%;
border-radius: 24px; padding: 20px 20px 29px;
}
.modal-lf__title {
font-size: 22px;
line-height: 29px;
margin-bottom: 15px;
}
.modal-lf__description {
font-size: 12px;
margin-bottom: 20px;
}
.modal-lf__fields {
flex-direction: column;
gap: 20px;
margin-bottom: 20px;
}
.modal-lf__fields .lead-form__field {
flex: 1 1 auto;
width: 100%;
}
.modal-lf__input {
height: 41px;
width: 100%;
}
.modal-lf__agree {
margin-bottom: 20px;
}
.modal-lf__agree-text {
font-size: 12px;
}
.modal-lf__submit {
font-size: 12px;
height: 41px;
}
}