.popup-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
}
.popup {
max-width: 860px;
width: 100%;
background: #fff;
border-radius: 24px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: row;
}
.popup-inner {
display: flex;
flex-direction: row;
width: 100%;
}
.popup-image {
flex: 1;
max-width: 300px;
background: #f6f6f6;
overflow: hidden;
}
.popup-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.popup-content {
flex: 2;
padding: 50px;
box-sizing: border-box;
}
.popup-content h2 {
font-size: 28px;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.2;
}
.popup-content p {
font-size: 18px;
margin-bottom: 30px;
color: #333;
line-height: 1.4;
}
.ui-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.ui-form .ui_form__fieldsets {
grid-column: span 2;
}
.ui-form .ui_form__fieldset {
position: relative;
display: flex;
flex-direction: column;
}
.ui-form .ui_form__fieldset input,
.ui-form .ui_form__fieldset textarea,
.ui-form .ui_form__fieldset select {
padding: 10px;
font-size: 16px;
border: none;
border-bottom: 1px solid #ccc;
background: transparent;
outline: none;
transition: 0.3s;
resize: vertical;
}
.ui-form .ui_form__fieldset label {
font-size: 15px;
color: #1E335A;
margin-bottom: 6px;
font-weight: 500;
}
.ui-form .field.checkbox {
flex-direction: row;
align-items: flex-start;
gap: 10px;
}
.ui-form .ui_form__fieldset.checkbox--1 {
grid-column: span 2;
}
.ui-form .field.checkbox label {
font-size: 14px;
color: #000;
}
.popup-submit {
grid-column: span 1;
margin-top: 20px;
text-align: left;
}
.popup-submit button {
padding: 14px 28px;
background: #C2B6FF;
border: none;
border-radius: 30px;
font-size: 16px;
font-weight: bold;
color: #fff;
cursor: pointer;
transition: background 0.3s ease;
}
.popup-submit button:hover {
background: #b3a6f2;
}
.popup-submit button:disabled {
background: #d7ccfc;
cursor: not-allowed;
opacity: 0.7;
}
.popup-submit button.enabled {
background: #1400ff;
color: #fff;
}
.popup-close {
position: absolute;
z-index: 2;
top: 6px;
right: 3px;
display: flex;
justify-content: center;
align-items: center;
width: 1.2em;
height: 1.2em;
padding: 0;
overflow: hidden;
transition: color 0.1s ease-out;
border: none;
border-radius: 0;
outline: none;
background: transparent;
color: #dadada;
font-family: 'Graphik LC', serif;
font-weight: 100;
font-size: 2em;
line-height: 1.2;
cursor: pointer;
}
.popup-close:hover {
color: #f27474;
background: transparent;
transform: none;
}
.ui_form__fieldset.invalid label {
color: #e65f7a;
}
.ui_form__fieldset.invalid input,
.ui_form__fieldset.invalid textarea,
.ui_form__fieldset.invalid select {
border-bottom-color: #e65f7a;
}
.ui_form__fieldset .information {
color: #e65f7a;
font-size: 12px;
line-height: 15px;
margin-left: 9px;
margin-top: 0;
transition: 0.2s;
max-height: 0px;
overflow: hidden;
}
.ui_form__fieldset .information.shown {
max-height: 50px;
margin-top: 5px;
}