/* Обёртка FAB + dial */
.btn-contact-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
}
@media(min-width: 768px) {
    .btn-contact-wrap {
        right: 40px;
        bottom: 20px;
    }
}

/* Кнопка FAB (чёрная круглая) */
.btn-contact {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: none;
    background: #000; color: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn-contact:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.btn-contact:active { transform: translateY(0); }

/* 2) Плавно прячем конверт при открытии меню */
.btn-contact__icon { transition: opacity .14s ease; }
.btn-contact[aria-expanded="true"] .btn-contact__icon { opacity: 0; }

/* 3) Рисуем крестик псевдо-элементами (цвет берётся из currentColor) */
.btn-contact::before,
.btn-contact::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;         /* длина «палочки» крестика */
    height: 2px;         /* толщина линий */
    margin-left: -11px;  /* половина ширины */
    margin-top: -1px;    /* половина высоты */
    background: currentColor;
    border-radius: 1px;
    opacity: 0;
    transform: scale(.9) rotate(0deg);
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: none; /* чтобы не мешать кликам */
}

/* 4) Когда меню раскрыто — показываем крестик */
.btn-contact[aria-expanded="true"]::before {
    opacity: 1;
    transform: scale(1) rotate(45deg);
}
.btn-contact[aria-expanded="true"]::after {
    opacity: 1;
    transform: scale(1) rotate(-45deg);
}



/* SVG на FAB */
.btn-contact__icon svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    fill: none;
    position: relative;
    top: 1px;        /* подбери 1–3px по вкусу */
    display: block;  /* убирает лишние «просветы» */
}

/* ===== Speed-dial (две КРУГЛЫЕ кнопки) ===== */
.btn-dial {
    position: absolute;
    right: 4px;
    bottom: 64px; /* 56 + 8 */
    display: grid;
    gap: 8px;
    transform: translateY(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}
.btn-dial[hidden] { display: grid; } /* сохраняем layout */

.btn-contact[aria-expanded="true"] + .btn-dial {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* КРУГЛЫЕ мини-кнопки */
.btn-dial__item {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: none;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    cursor: pointer;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-dial__item:hover { filter: brightness(.96); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.btn-dial__item:active { transform: translateY(0); }

/* Цвета */
.btn-dial__item--wa   { background: #25D366; } /* WhatsApp зелёный */
.btn-dial__item--form { background: #1E88E5; } /* синяя круглая для формы */

/* Иконка внутри синей кнопки */
.btn-dial__item--form svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    fill: none;
}

/* ===== Оверлей/модалка — как у тебя было ===== */
.btn-contact__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 1001;
    display: none;
    align-items: center; justify-content: center;
}
.btn-contact__overlay[aria-hidden="false"] { display: flex; }
.btn-contact__overlay[hidden] { display: none !important; }

.btn-contact__modal {
    position: relative;
    min-height: 652.5px;      /* подгони под твою форму: 380–480 обычно ок */
    overflow: hidden;       /* чтобы не мигали внутренние скроллы при вставке */
    background: #fff; color: #111;
    border-radius: 12px;
    padding: 24px;
    max-width: 420px; width: 100%;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

.btn-contact__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 30px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    flex-shrink: 0;
}

.btn-contact__close:active {
    background: #f5f5f5;
    color: #333;
}

.btn-dial__item--messenger {
    background: transparent; /* или #f5f5f5 если хочешь светлый фон */
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* WhatsApp — с обрезкой */
.btn-dial__item--wa {
    background: #25D366;
    padding: 0;
    overflow: hidden; /* обрезаем всё что выходит */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Увеличиваем картинку WhatsApp внутри */
.btn-dial__item--wa .btn-dial__icon-img {
    width: 105%; /* или 115%, 120% — подбери */
    height: 105%;
    object-fit: cover; /* заполняет всю область */
}