:root {
/* ==== Настраиваемая палитра — подгоните под фирменные цвета сайта ==== */
--modal-accent: #E84716;       /* основной акцентный цвет (кнопки, фокус) */
--modal-accent-dark: #96602e;  /* акцент при hover */
--modal-text: #2b2b2b;         /* основной текст */
--modal-text-muted: #6f6f6f;   /* второстепенный текст */
--modal-bg: #ffffff;           /* фон окна */
--modal-border: #e3e0da;       /* границы полей */
--modal-error: #d64545;        /* цвет ошибок */
--modal-success: #3c9a5f;      /* цвет успеха */
--modal-radius: 14px;
--modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
--modal-font: "IgraSans"; /* замените на шрифт сайта */
}

/* ==== Оверлей (затемнение фона) ==== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(20, 18, 15, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
font-family: var(--modal-font);
}

.modal-overlay.is-open {
opacity: 1;
visibility: visible;
}

/* ==== Окно ==== */
.modal {
position: relative;
background: var(--modal-bg);
border-radius: var(--modal-radius);
box-shadow: var(--modal-shadow);
width: 100%;
max-width: 420px;
padding: 36px 32px 28px;
text-align: center;
transform: translateY(20px) scale(0.97);
transition: transform 0.25s ease;
}

.modal-overlay.is-open .modal {
transform: translateY(0) scale(1);
}

.modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border: none;
background: transparent;
font-size: 22px;
line-height: 1;
color: var(--modal-text-muted);
cursor: pointer;
border-radius: 50%;
transition: background 0.15s ease, color 0.15s ease;
}

.modal__close:hover {
background: #f2f0eb;
color: var(--modal-text);
}

.modal__title {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
color: var(--modal-text);
}

.modal__subtitle {
margin: 0 0 22px;
font-size: 14px;
line-height: 1.5;
color: var(--modal-text-muted);
}

/* ==== Форма ==== */
.modal__form {
text-align: left;
}

.modal__field {
margin-bottom: 16px;
}

.modal__field label {
display: block;
margin-bottom: 6px;
font-size: 13px;
color: var(--modal-text-muted);
}

.modal__field input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
font-size: 15px;
border: 1px solid var(--modal-border);
border-radius: 8px;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
font-family: inherit;
color: var(--modal-text);
}

.modal__field input:focus {
border-color: var(--modal-accent);
box-shadow: 0 0 0 3px rgba(181, 118, 60, 0.15);
}

.modal__field.has-error input {
border-color: var(--modal-error);
}

.modal__error {
display: none;
margin-top: 6px;
font-size: 12px;
color: var(--modal-error);
}

.modal__field.has-error .modal__error {
display: block;
}

.modal__submit {
width: 100%;
padding: 13px 20px;
margin-top: 6px;
border: none;
border-radius: 8px;
background: var(--modal-accent);
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, opacity 0.15s ease;
}

.modal__submit:hover {
background: var(--modal-accent-dark);
}

.modal__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}

.modal__form-error {
display: none;
margin: 10px 0 0;
font-size: 13px;
text-align: center;
color: var(--modal-error);
}

.modal__form-error.is-visible {
display: block;
}

.modal__policy {
margin: 14px 0 0;
font-size: 11px;
line-height: 1.4;
color: var(--modal-text-muted);
text-align: center;
}

/* ==== Окно успеха ==== */
.modal--success {
padding-top: 40px;
}

.modal__icon {
width: 60px;
height: 60px;
margin: 0 auto 18px;
border-radius: 50%;
background: rgba(60, 154, 95, 0.12);
color: var(--modal-success);
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
}

@media (max-width: 480px) {
.modal {
  padding: 28px 20px 22px;
}
}