/* ==========================================================================
   calc-popup.css — авто-popup калькулятора (Фаза 5)
   Отдельный файл, НЕ правит styles.css (минимизация blast radius).
   Цвета/радиусы/шрифты подобраны под существующий дизайн vmeste.life:
   - розовый #e3388b / #cb1d71 (кнопка button_4)
   - тёмный #463e52
   - фон инпутов #fbfbfb, рамка #e2e2e2
   ========================================================================== */

.calc-popup {
    display: none;
    position: fixed;
    inset: 0;            /* верх/право/низ/лево = 0 */
    z-index: 9999;
    background: rgba(43, 38, 50, 0);
    /* плавное появление оверлея */
    transition: background 0.3s ease;
    /* блокируем прокрутку фона (тело скрыто JS через overflow) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    box-sizing: border-box;
}

.calc-popup.calc-popup--open {
    background: rgba(43, 38, 50, 0.55);
}

.calc-popup__card {
    position: relative;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%) scale(0.94);
    background: #fff;
    border-radius: 14px;
    padding: 32px 32px 28px;
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(43, 38, 50, 0.35);
    opacity: 0;
    /* плавное появление карточки: opacity + transform */
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'PT Sans', Arial, sans-serif;
    color: #463e52;
}

.calc-popup.calc-popup--open .calc-popup__card {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.calc-popup__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #837c8d;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
    padding: 0;
    z-index: 2;
}
.calc-popup__close:hover {
    color: #463e52;
    background: rgba(70, 62, 82, 0.08);
}
.calc-popup__close:focus-visible {
    outline: 2px solid #e3388b;
    outline-offset: 2px;
}

.calc-popup__title {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    margin: 0 0 10px;
    padding-right: 20px; /* чтобы не налезало на крестик */
}

.calc-popup__price {
    text-align: center;
    font-size: 16px;
    margin-bottom: 4px;
    color: #463e52;
}
.calc-popup__price span {
    color: #e3388b;
    font-weight: 700;
    font-size: 24px;
}

.calc-popup__subtitle {
    text-align: center;
    font-size: 14px;
    color: #837c8d;
    margin: 0 0 18px;
    line-height: 1.4;
}

/* === Задача 1: поля popup во всю ширину === */
/* styles.css делает .form .form-group = display:inline-block → поля узкие.
   Здесь перебиваем для popup: форма на всю ширину карточки (max-width 440px). */
.calc-popup__form .form-group,
.calc-popup__form .field-callbackform-name,
.calc-popup__form .field-callbackform-phone {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    box-sizing: border-box;
}
.calc-popup__form .form__input,
.calc-popup__input {
    /* .form__input уже даёт стили с сайта; дополняем margin + полная ширина */
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
}

.calc-popup__agree {
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 16px;
}
.calc-popup__agree a {
    color: #e3388b;
}

.calc-popup__submit {
    /* button_4 даёт ширину 210px и pill; на мобильном — растягиваем */
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
}

/* ---- Адаптив ---- */
@media only screen and (max-width: 480px) {
    .calc-popup__card {
        padding: 24px 18px 20px;
        top: 0;
        transform: scale(0.94);
        margin-top: 40px;
    }
    .calc-popup.calc-popup--open .calc-popup__card {
        transform: scale(1);
    }
    .calc-popup__title { font-size: 19px; }
    .calc-popup__price span { font-size: 22px; }
}

/* ---- Уважение к настройкам пользователя ---- */
@media (prefers-reduced-motion: reduce) {
    .calc-popup,
    .calc-popup__card,
    .calc-popup__close {
        transition: none !important;
    }
}

/* ==========================================================================
   Задача 3b — questionForm2 → вид popup (rounded, ширина, заголовок)
   Fancybox открывает #question2 в .fancybox-content; стилизуем и контейнер,
   и саму форму. Селекторы по id — нулевое влияние на #questionForm (без суффикса).
   ========================================================================== */
#question2.popup {
    max-width: 440px;
    width: calc(100% - 40px);
    margin: 0 auto;
    border-radius: 14px;
    padding: 32px 32px 28px;
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(43, 38, 50, 0.35);
    background: #fff;
}
/* fancybox оборачивает popup в .fancybox-content — не даём ему обрезать тень/радиус */
.fancybox-content #question2.popup {
    padding: 32px 32px 28px;
}
#question2 .form__header {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    margin: 0 0 18px;
}

/* === Задача 3b.1 — ограничить саму .form шириной карточки ===
   styles.css ставит на .popup .form { width:940px; padding:40px 150px 60px }
   (специфичность 0,0,2,0). Т.к. #question2 имеет класс .popup, вложенная .form
   наследует 940px → content-box = 940-300 = 640px → form-group 640px (вылез!),
   кнопка margin:auto центрируется в 640px, а не в 376px контента (сдвиг 180px).
   Селектор #question2 .form (0,1,1,0) ПЕРЕБИВАЕТ .popup .form (0,0,2,0):
   id > class. Прижимаем .form к контентной области карточки (376px). */
#question2 .form,
#question2 #questionForm2 {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;              /* обнуляем 40px 150px 60px из styles.css — padding у карточки */
    background: transparent; /* фон/тень у #question2.popup, не у формы */
    box-sizing: border-box;
}
/* на всякий случай — нейтрализуем media-query .popup .form{width:100%} и пр. */
#question2.popup .form {
    width: 100%;
    padding: 0;
}

#questionForm2 .form-group {
    display: block;
    width: 100%;
    max-width: 100%;         /* теперь 100% = 376px контента карточки */
    margin: 0 0 12px;
    box-sizing: border-box;
}
#questionForm2 .form__input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
}
#questionForm2 .form__submit {
    display: block;
    width: 100%;
    max-width: 280px;        /* центрирование относительно form-group (376px) */
    margin: 0 auto;
    box-sizing: border-box;
}


/* ==========================================================================
   Задача 3c — Нейтрализация fancybox-обёртки ДЛЯ #question2 только (:has)
   fancybox.min.css ставит на .fancybox-content: background:#fff + padding:44px,
   что создаёт ВТОРОЙ белый слой и двойной padding вокруг #question2 (у которого
   уже свой padding:32px + background:#fff). Это искажало геометрию.
   Решение: точечно (через :has(#question2)) обнуляем padding/bg fancybox-обёртки,
   чтобы #question2 сам управлял своей геометрией — идентично popup 15c (.calc-popup).
   overflow НЕ трогаем (visible по умолчанию), чтобы НЕ обрезать box-shadow 0 24px 60px.
   Поддержка :has — все современные браузеры (Chrome 105+, Safari 15.4+, Firefox 121+).
   ========================================================================== */
.fancybox-content:has(#question2) {
    padding: 0 !important;
    background: transparent !important;
}
.fancybox-content #question2.popup {
    padding: 32px 32px 28px;        /* единый padding карточки, как у .calc-popup__card */
}
.fancybox-container:has(.fancybox-content #question2) .fancybox-bg {
    background: rgba(43, 38, 50, 0.55);  /* тот же overlay, что у popup 15c */
}
.fancybox-is-open.fancybox-container:has(.fancybox-content #question2) .fancybox-bg {
    opacity: 1;
}

/* ==========================================================================
   Задача 5 — Пульсация кнопок отправки (popup + questionForm2)
   Привлечение внимания к CTA. Спокойная амплитуда 1.03, период 2.4с.
   Hover/active прерывают анимацию (тактильный отклик).
   ========================================================================== */
@keyframes submitPulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 10px 15px 0 rgba(149, 39, 92, 0.50); }
    50%      { transform: scale(1.03); box-shadow: 0 14px 22px 0 rgba(149, 39, 92, 0.65); }
}
.calc-popup__submit,
#questionForm2 .form__submit {
    animation: submitPulse 2.4s ease-in-out infinite;
    will-change: transform, box-shadow;
    transition: transform 0.15s ease, box-shadow 0.3s ease, background-color 0.2s ease;
    transform-origin: center;
}
.calc-popup__submit:hover,
#questionForm2 .form__submit:hover {
    animation: none;
    transform: scale(1.05);
}
.calc-popup__submit:active,
#questionForm2 .form__submit:active {
    transform: scale(0.96);
}
@media (prefers-reduced-motion: reduce) {
    .calc-popup__submit,
    #questionForm2 .form__submit {
        animation: none !important;
    }
}