/* Подключим шрифт Exo 2 для страниц Работа. Чтобы можно было его применять. */

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 200; /* предположительно Regular */
    src: url('/wp-content/themes/flatsome/assets/fonts/Exo_2/Exo2-Medium.woff2') format('woff');
} 
	
	/**/ 
html body {
    font-family: 'Exo 2', sans-serif;
    font-weight: 200;
	font-size: 20px; 
}

.popup-overlay {
    opacity: 0; /* Окно скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	backdrop-filter: blur(10px); /* Эффект размытия фона */
    justify-content: center;
    align-items: center;
    z-index: 1000;
	background: rgba(0, 0, 0, 0.7);
    pointer-events: none; /* Отключаем взаимодействие, когда окно скрыто */
    transition: opacity 0.3s ease;
}

.popup-content {
    background-color: white;
	color: black;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 750px; /* Задайте фиксированную ширину */
    max-width: 80%; /* Максимальная ширина для мобильных устройств */
	padding-bottom: 5px; /* Уменьшаем внутренний отступ снизу */
	transform: translateY(-50%); /* Начальное положение (вне экрана сверху) */
	opacity: 0; /* Окно полностью прозрачно изначально при загрузке страницы. Если убрать, что при загрузке мы будем его сразу сверху видеть */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Состояние для открытия окна */
.popup-overlay.show {
    opacity: 1;
    pointer-events: auto; /* Включаем взаимодействие, когда окно показано */
}

/* Состояние для открытия окна (анимация сверху вниз) */
.popup-overlay.show .popup-content {
    transform: translateY(0); /* Сдвиг до нормального положения */
    opacity: 1; /* Окно становится видимым */
}

/* Состояние для закрытия окна (анимация вверх) */
.popup-overlay.hide .popup-content {
    transform: translateY(-50%); /* Сдвиг вверх за пределы экрана */
    opacity: 0; /* Окно становится прозрачным */
}

.popup-content h2 {
	color: #555;
    font-size: 22px;
    margin: 0 0 10px; /* Отступ снизу */
}

.popup-content p {
	text-align: left;
	text-align: justify; /* Выравнивание текста по ширине */
    font-size: 20px;
    margin: 0 0 20px; /* Отступ снизу */
}

.close-button-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* добавим выравнивание по центру */
    gap: 20px;
}

.close-button {
    background-color: #0073bd; /* Темно-синий цвет */
    color: white; /* Цвет текста */
    padding: 2px 40px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	margin-right: 0; /* Убираем отступ справа */
	width: auto;
}

.close-button:hover {
    background-color: #003b5c; /* Более темный цвет при наведении */
}

/* Анимация входа */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


@media (max-width: 550px) { 
    /* Заголовок */
    .popup-content h2 {
        font-size: 18px; /* Устанавливаем размер текста заголовка */
    }

    /* Основной текст */
    .popup-content p {
        font-size: 15px; /* Устанавливаем размер текста абзаца */
    }

    /* Кнопка */
    .close-button {
        font-size: 0.8em; /* Устанавливаем размер текста кнопки */
    }
}