/* ═════════════════════════════════════════════════════════════
   ZWE — модалка «Нашли ошибку?»
   Используется на /zi-wei/ и /bazi/.
   ПК (≥581px): центрированная модалка.
   Мобайл (≤580px): bottom-sheet, слайд снизу.
   ═════════════════════════════════════════════════════════════ */

/* Кнопка-триггер. На каждой странице может быть позиционирована по-своему — здесь только базовые стили. */
.zwe-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    background: transparent;
    border: 1.5px solid #ba8923;
    border-radius: 999px;
    color: #ba8923;
    font: 600 16px/1 'Manrope', system-ui, sans-serif;
    letter-spacing: .01em;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.zwe-trigger:hover {
    color: #fff;
    background: #ba8923;
    border-color: #ba8923;
    box-shadow: 0 6px 16px rgba(186,137,35,.25);
}
.zwe-trigger svg { color: currentColor; width: 16px; height: 16px; }
@media (max-width: 580px) {
    .zwe-trigger { padding: 10px 18px; font-size: 15px; }
}

/* Модалка */
.zwe-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: none;
    opacity: 0;
    transition: opacity .18s ease;
}
.zwe-modal.is-open { display: block; opacity: 1; }
.zwe-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(20,16,12,.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.zwe-modal__dialog {
    position: relative;
    background: #fff;
    color: #2a2622;
    box-shadow: 0 24px 72px rgba(20,16,12,.22), 0 2px 8px rgba(20,16,12,.06);
}

/* Закрывашка */
.zwe-modal__close {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(40,30,20,.05);
    border: none; padding: 0; cursor: pointer;
    color: #8a8270;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease;
}
.zwe-modal__close:hover { background: rgba(40,30,20,.1); color: #2a2622; }

/* Тело модалки */
.zwe-modal__body { padding: 36px 36px 32px; }
@media (max-width: 580px) {
    .zwe-modal__body { padding: 24px 20px 28px; }
}
.zwe-modal__title {
    margin: 0 0 16px;
    font: 400 32px/1.15 'Forum', serif;
    color: #2a2622;
    letter-spacing: -.005em;
}
.zwe-modal__desc {
    margin: 0 0 28px;
    font: 400 18px/1.6 'Manrope', system-ui, sans-serif;
    color: #3a342c;
}
@media (max-width: 580px) {
    .zwe-modal__title { font-size: 30px; margin-bottom: 12px; }
    .zwe-modal__desc  { font-size: 16px; margin-bottom: 22px; }
}

/* Поля */
.zwe-form { display: flex; flex-direction: column; gap: 22px; }
.zwe-field { display: flex; flex-direction: column; gap: 8px; }
.zwe-field__label {
    font: 600 16px/1.25 'Manrope', system-ui, sans-serif;
    color: #2a2622;
    letter-spacing: .01em;
}
@media (max-width: 580px) {
    .zwe-field__label { font-size: 15px; }
}
.zwe-field__opt { color: #97907f; font-weight: 400; }
.zwe-required { color: #c44a3b; margin-left: 3px; font-weight: 500; }
.zwe-field__input,
.zwe-field__textarea {
    width: 100%; box-sizing: border-box;
    padding: 14px 16px;
    background: #fafaf8;
    border: 1.5px solid #e4e1da;
    border-radius: 12px;
    font: 500 16px/1.45 'Manrope', system-ui, sans-serif;
    color: #2a2622;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.zwe-field__input::placeholder,
.zwe-field__textarea::placeholder { color: #b3ac9a; }
.zwe-field__textarea { resize: vertical; min-height: 120px; }
.zwe-field__input:hover,
.zwe-field__textarea:hover { border-color: #d4cfc2; background: #fff; }
.zwe-field__input:focus,
.zwe-field__textarea:focus {
    outline: none;
    border-color: #4f725d;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(79,114,93,.12);
}
.zwe-field__hint {
    font: 400 13px/1.45 'Manrope', system-ui, sans-serif;
    color: #8a8270;
    margin-top: 2px;
}

/* Honeypot — невидимый */
.zwe-hp {
    position: absolute; left: -9999px; top: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}

/* Ошибка валидации */
.zwe-form__error {
    padding: 10px 14px;
    background: rgba(196,74,59,.08);
    border: 1px solid rgba(196,74,59,.25);
    border-radius: 8px;
    color: #c44a3b;
    font: 500 13px/1.4 'Manrope', system-ui, sans-serif;
}

/* Кнопка submit */
.zwe-form__actions { margin-top: 6px; }
.zwe-submit {
    width: 100%;
    padding: 16px 24px;
    background: #4f725d;
    color: #fff;
    border: none; border-radius: 12px;
    font: 600 16px/1 'Manrope', system-ui, sans-serif;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .18s ease, transform .1s ease, box-shadow .18s ease;
    box-shadow: 0 6px 16px rgba(79,114,93,.18);
}
.zwe-submit:hover  { background: #3a5746; box-shadow: 0 8px 22px rgba(79,114,93,.28); }
.zwe-submit:active { transform: translateY(1px); background: #2f4a3a; box-shadow: 0 3px 8px rgba(79,114,93,.18); }
.zwe-submit:disabled { background: #a8b7ad; cursor: wait; box-shadow: none; }

/* Thanks-лайтбокс — белый фон */
.zwe-modal__dialog--thanks { background: #fff; }
.zwe-thanks {
    padding: 64px 40px 52px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.zwe-thanks__icon {
    width: 112px; height: 112px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #4f725d;
    animation: zwe-thanks-pop .4s cubic-bezier(.2,.7,.2,1) both;
}
.zwe-thanks__icon svg {
    width: 96px; height: 96px;
    filter: drop-shadow(0 6px 14px rgba(79,114,93,.22));
}
@keyframes zwe-thanks-pop {
    0%   { transform: scale(.5); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
.zwe-thanks__title {
    margin: 0;
    font: 400 28px/1.3 'Forum', serif;
    color: #2a2622;
    max-width: 480px;
}
.zwe-thanks__text {
    margin: 0;
    font: 400 18px/1.6 'Manrope', system-ui, sans-serif;
    color: #6f6a60;
    max-width: 480px;
}
.zwe-thanks__close {
    margin-top: 10px;
    padding: 15px 42px;
    background: #4f725d;
    color: #fff;
    border: none;
    border-radius: 999px;
    font: 600 16px/1 'Manrope', system-ui, sans-serif;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    box-shadow: 0 6px 16px rgba(79,114,93,.25);
}
.zwe-thanks__close:hover  { background: #3a5746; }
.zwe-thanks__close:active { transform: translateY(1px); background: #2f4a3a; }
@media (max-width: 580px) {
    .zwe-thanks { padding: 44px 22px 36px; gap: 18px; }
    .zwe-thanks__icon { width: 96px; height: 96px; }
    .zwe-thanks__icon svg { width: 80px; height: 80px; }
    .zwe-thanks__title { font-size: 24px; }
    .zwe-thanks__text  { font-size: 16px; }
    .zwe-thanks__close { font-size: 15px; padding: 14px 36px; }
}

/* Блокировка скролла body когда открыто */
body.zwe-modal-open { overflow: hidden; }

/* ── ПК (≥581px): центрированная модалка ──────────────── */
@media (min-width: 581px) {
    .zwe-modal__dialog {
        max-width: 680px;
        width: calc(100% - 40px);
        margin: 0 auto;
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -48%);
        border-radius: 22px;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        opacity: 0;
        transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .18s ease;
    }
    .zwe-modal.is-open .zwe-modal__dialog {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* ── Мобайл (≤580px): bottom-sheet ──────────────── */
@media (max-width: 580px) {
    .zwe-modal__dialog {
        position: absolute; left: 0; right: 0; bottom: 0;
        max-height: 78vh;
        max-height: 78dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        transform: translateY(100%);
        transition: transform .26s cubic-bezier(.2,.7,.2,1);
    }
    .zwe-modal.is-open .zwe-modal__dialog { transform: translateY(0); }
    .zwe-modal__dialog::before {
        content: '';
        display: block;
        width: 44px; height: 4px;
        background: rgba(0,0,0,.18);
        border-radius: 999px;
        margin: 10px auto 0;
    }
    .zwe-modal__body { padding: 18px 18px 24px; }
    .zwe-modal__close { top: 10px; right: 10px; }
}