.callback-widget {
            display: none; /* Скрыть окно виджета по умолчанию */
            position: fixed;
            bottom: 20px; /* немного выше кнопки */
            right: 20px;
            width: 300px; /* Установите нужную ширину окна */
            max-width: 90vw; /* Максимальная ширина для мобильных устройств */
            background-color: #e0e0e0;
            border: 1px solid #ccc;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 9999999; /* обязательно ставим на передний план */
            overflow: hidden; /* Скрыть переполнение */
        }
        
        .callback-widget h3 {
            text-align: center; /* Центрируем заголовок */
        }

        .callback-widget .close-button {
            cursor: pointer;
            float: right; /* Крестик справа */
            font-size: 30px;
            color: Black; /* Цвет крестика */
        }

        .callback-widget .close-button:hover {
            color: #333; /* Цвет при наведении */
        }

        .callback-widget input {
            width: 100%; /* Полная ширина для ввода */
            color: black;

            margin-bottom: 5px;
            padding: 10px;


            box-sizing: border-box; /* Учитывать паддинги и границы в ширине */
        }

        .callback-widget button {
            width: 100%; /* Полная ширина для кнопки */
            padding: 10px;
            background-color: #0a0804;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .callback-widget button:hover {
            background-color: black;
        }

.callback-button {
  z-index: 9999999;
  position: fixed;
  bottom: 30px;
  right: 30px;

  /* Указываем ширину и высоту кнопки */
  width: 64px;
  height: 64px;

  /* Определяем масштабирование фонового изображения */
  background-size: cover;

  /* Устанавливаем курсор указатель */
  cursor: pointer;

  /* Определяем стили для состояния наведения курсора */
  &:hover {
    /* Увеличиваем размер кнопки при наведении */
    transform: scale(1.1);
  }

  /* Определяем стили для состояния нажатия */
  &:active {
    /* Уменьшаем размер кнопки при нажатии */
    transform: scale(0.9);
  }
}
        .notice {
            color: gray; /* Серый цвет текста */
            font-size: 0.8em; /* Мелкий размер шрифта */
            text-align: center; /* Центрируем текст */
            margin-top: 10px; /* Отступ от верхнего элемента */
        }
    .centered-span {
        display: block; /* Чтобы span вел себя как блок */
        font-size: 22px; /* Установите нужный размер шрифта */
        font-weight: bold; /* Жирный шрифт */
        text-align: center; /* Центрирование текста */
        margin: 10px 0; /* Отступы сверху и снизу */
        color: black;
    }
#responseMessage {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    padding: 15px;
    border-radius: 5px;
    z-index: 9999999; /* Позволяет подниматься над другими элементами */
    transition: opacity 0.5s ease; /* Плавный переход */
}

.success {
    background-color: #d4edda; /* Цвет фона для успеха */
    color: #155724; /* Цвет текста для успеха */
    border: 1px solid #c3e6cb; /* Граница для успеха */
}

.error {
    background-color: #f8d7da; /* Цвет фона для ошибки */
    color: #721c24; /* Цвет текста для ошибки */
    border: 1px solid #f5c6cb; /* Граница для ошибки */
}