/*
Theme Name: GeneratePress Child
Theme URI: http://yourwebsite.com
Description: Дочерняя тема для GeneratePress.
Author: Andrey Karpilenko
Author URI: http://abombshelternearby.info
Template: generatepress
Version: 1.0
*/

/* ===============================
   1. Reset / Normalize
   =============================== */

/* ===============================
   2. Базовая типографика
   =============================== */

/* ===============================
   3. Layout и контейнеры
   =============================== */
/* Заголовок сайта */

.site-header {
	height: 50px;
	z-index: 100;
}

.inside-header {
	background-color: var(--base);
	position: fixed;
	width: 100%;
	display: flex;
	flex-direction: row;
	padding: 5px;
	align-items: center;
	/* по вертикали */
	justify-content: space-between;
	/* или flex-start, если не хочешь отступов */
}

.site-branding-container,
.header-widget {
	margin: 0;
}

@media (max-width: 768px) {
	.site-header .header-widget {
		margin-top: 0;
		margin-right: 0;
	}
}

/* Панель для виджетов - кнопок справа от заголовка сайта */
.header-widget {
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	gap: 10px;
	order: 2;
}

/* Кнопка "Поделиться" идет направо
Кнопка используется в кастомном виджете строки заголовка
*/
#nativeShareBtn {
	order: 3;
}

/* Кнопки Поделиться или Справка */
.share-button {
	border: none;
	padding: 0;
	margin: 0px;
	cursor: pointer;
	display: flex;
	align-items: center;
	height: 40px;
	transition: transform 0.2s ease;
}

.share-button img {
	display: block;
	transition: transform 0.2s ease;
}

/* 🔍 Увеличение при наведении (десктоп) */
.share-button:hover img {
	transform: scale(1.2);
}

/* 📱 Увеличение при нажатии (мобильные устройства или клик) */
.share-button:active img {
	transform: scale(1.2);
}

/* Заголовок сайта идет первым */
.site-branding-container {
	order: 1;
}

/* Контейнер содержимого сайта */
#content,
.site-content {
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* Верхний виджет с описанием сайта */
.app-description {
	font-size: 10px;
	color: #888;
	text-align: center;
	max-width: 100%;
	line-height: 1.2;
}

/* Виджеты футера сайта */
#block-21 {
	margin: 0;
}
.footer-widgets-container {
	padding: 5px;
}
.footer-widgets {
	background-color: var(--base);
}
.footer-bar {
	display: flex;
	justify-content: space-between;
	font-size: small;
	padding-bottom: 10px;
}

/* Панель футера сайта */
.site-info {
	display: none;
}

/* ===============================
   4. Компоненты
   =============================== */

/* ===============================
   5. Карта и гео
   =============================== */
/* Корневой контейнер — занимает всё пространство ниже header и выше футера */
#posts-map-container {
	display: flex;
	flex-direction: column;
	height: calc(100dvh - 50px);
	/* 50px — высота header'а */
	box-sizing: border-box;
	overflow: hidden;
	margin: 0px 5px;
}

/* Контейнер с картой и инфо — растягивается */
#map-info-wrapper {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow: auto;
}

/* Карта — можно оставить auto или зафиксировать */
#map {
	flex: 1 1 auto;
	width: 100%;
	min-height: 40%;
	border: 1px solid #ccc;
	border-radius: 10px;
	min-height: 200px;
}

/* infoContainer — под картой, скроллится при необходимости */
#infoContainer {
	/* display: flex; - устанавливается в скрипте */
	display: none;
	flex-direction: column;
	flex: 0 1 auto;
	justify-content: center;
	max-height: 50%;
	overflow-y: auto;
	margin-top: 5px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #fff;
}

@keyframes highlight-fade {
	0% {
		background-color: lightblue;
		/* Начальный цвет подсветки */
	}

	100% {
		background-color: transparent;
		/* Цвет после затухания */
	}
}

.info-highlight {
	animation: highlight-fade 2s ease-in;
}

.info-inline-block {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1em;
	/* расстояние между двумя блоками */
	flex-wrap: wrap;
	/* чтобы на узких экранах не ломалось */
	margin: 0.5em 0;
}

#buttonGoContainer {
	display: inline-flex;
	white-space: nowrap;
	font-size: 1rem;
}

.info-meta {
	display: block;
}

#infoContent,
#infoContent p {
	margin: 0;
	font-size: small;
}

#infoContainerFooter {
	color: white;
	background-color: #4CAF50;
	display: flex;
	flex-shrink: 1;
	margin: auto;
	padding: 5px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 10px;
}

#infoContainerFooter:hover {
	background-color: #008000;
}

/* Контейнер с кнопками "Добавить" и "Установить приложение" */
#map-buttons {
	display: flex;
	/* flex: 1 1 auto; */
	flex-direction: column;
	box-sizing: border-box;
	padding-bottom: 5px;
}

/* Сами кнопки "Добавить" и "Установить приложение" */
.footer-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 5px;
}

/* ===============================
   6. Модальные окна
   =============================== */

/* =============================== */

form #content {
	width: 100%;
	max-width: 100%;
	line-height: 1.5;
	height: 3em;
	margin: 0;
	padding: 5px;
}

.new-post-form-container {
	width: 100%;
	/* 	margin: 10px auto; */
}



form {
	margin-top: 5px;
}

form label {
	/* 	display: block; */
	margin: 10px 0 5px;
}

/* Дополнительные стили для элементов формы */
#new-post-form input,
#new-post-form textarea,
#new-post-form select,
#new-post-form button {
	/*     width: 100%;  /* Все элементы формы растягиваются по ширине */
	margin-bottom: 10px;
	/* Добавляем отступ между элементами */
	padding: 10px;
	/* Увеличиваем отступы внутри элементов для лучшего восприятия */
	border: 1px solid #ccc;
	/* Добавляем границу для всех элементов */
	border-radius: 10px;
	/* Закругляем углы */
}

/* Стиль элемента <dialog> */
dialog {
	background-color: transparent;
	box-shadow: -10px 10px 5px rgba(0, 0, 0, 0.5);
}

/* Стили для диалогового окна */
.dialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.dialog-content {
	background: #fff;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	max-width: 400px;
	width: 100%;
}

button {
	padding: 10px 20px;
	border: none;
	cursor: pointer;
	border-radius: 10px;
}

.dialog button {
	display: block;
	margin: auto;
}

#user-registration-form {
	width: 100%;
}

#user-registration-form label {
	width: 100%;
	display: block !important;
	margin-top: 10px;
	/* для отступов между полями */
}

form button[type="submit"] {
	display: block;
	margin: 20px auto;
	/* 20px отступ сверху и снизу, авто для центрирования */
}

.thumbnail {
	height: 100px;
	/* Ширина миниатюры */
	height: auto;
	/* Сохраняет пропорции */
	cursor: pointer;
	/* Указывает, что картинка кликабельна */
}

.thumbnail:hover {
	opacity: 0.8;
	/* Эффект при наведении */
}

/* Стили для фона диалогового окна с картинкой*/
.img-dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	/* Темный полупрозрачный фон */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	/* Выводим поверх других элементов */
}

/* Стили для содержимого окна */
.img-dialog-content {
	position: relative;
	display: flex;
	max-width: 90%;
	/* Ограничиваем ширину окна */
	max-height: 90%;
	/* Ограничиваем высоту окна */
	background: #fff;
	border-radius: 8px;
	padding: 10px;
	box-shadow: -10px 10px 5px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

/* Стили для содержимого окна с картинками */
.img-content {
	max-height: 90%;
	padding: 0;
	margin: 0;
	border-radius: 8px;
	overflow: auto;
}

/* Стили для кнопки закрытия */
.img-dialog-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: white;
	border: none;
	border-radius: 50%;
	padding: 5px 10px;
	font-size: 24px;
	color: red;
	cursor: pointer;
	z-index: 1001;
	/* Поверх содержимого */
}

/* Стили для изображения */
.dialog-image thumbnail {
	width: 50px;
	height: auto;
}

#img-dialog-image {
	border-radius: 4px;
	object-fit: contain;
	margin: auto;
}

/* Маркер местоположения пользователя */
.markerDiv {
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
}

.vibrate {
	animation: vibrate 4s linear infinite;
}

@keyframes vibrate {
	0% {
		transform: translate(0, 0);
	}

	1% {
		transform: translate(5px, 0);
	}

	2% {
		transform: translate(-5px, 0);
	}

	3% {
		transform: translate(0, 0);
	}

	30% {
		transform: translate(0, 0);
	}

	31% {
		transform: translate(-3px, 4px);
	}

	32% {
		transform: translate(3px, -4px);
	}

	33% {
		transform: translate(0, 0);
	}

	40% {
		transform: translate(0, 0);
	}

	41% {
		transform: translate(-4px, -3px)
	}

	42% {
		transform: translate(4px, 3px)
	}

	43% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(0, 0)
	}

	51% {
		transform: translate(0, 5px);
	}

	52% {
		transform: translate(0, -5px);
	}

	53% {
		transform: translate(0, 0)
	}

	100% {
		transform: translate(0, 0);
	}
}

.transparent-circle {
	width: 40px;
	height: 40px;
	background-color: blue;
	border-radius: 50%;
	opacity: 0.1;
	position: absolute;
	top: -20px;
	left: -20px;
}

.white-circle {
	width: 18px;
	height: 18px;
	background-color: white;
	border-radius: 50%;
	position: absolute;
	top: -9px;
	left: -9px;
}

.pulsating-circle {
	width: 14px;
	height: 14px;
	background-color: blue;
	border-radius: 50%;
	position: absolute;
	top: -7px;
	left: -7px;
	animation: pulse-centered 2s infinite;
	/* Задаем анимацию */
}

@keyframes pulse-centered {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.2);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes pulse {
	0% {
		opacity: 0.5;
		transform: scale(1) translateY(0);
	}

	50% {
		opacity: 1;
		transform: scale(1.2) translateY(-5px);
	}

	100% {
		opacity: 0.5;
		transform: scale(1) translateY(0);
	}
}

.pulse {
	animation: pulse 1s infinite;
}

#customConfirm,
#customInfo {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: rgba(0, 0, 0, 0.1); */
	/* Полупрозрачный фон */
	box-shadow: -10px 10px 5px rgba(0, 0, 0, 0.5);
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	/* Убедитесь, что выше карты */
}

.confirm-content {
	max-width: 400px;
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: -10px 10px 5px rgba(0, 0, 0, 0.5);
}

.confirm-header {
	margin-bottom: 10px;
	font-weight: bold;
}

.confirm-body p {
	text-align: left;
	margin: 0;
}

.confirm-footer {
	margin-top: 10px;
	display: flex;
	justify-content: center;
}

.confirm-footer button {
	margin-left: 10px;
	padding: 8px 12px;
	cursor: pointer;
}

.gallery-container {
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	scroll-snap-type: x mandatory;
}

.gallery {
	height: 100%;
	display: inline-block;
	margin: 0;
	scroll-snap-align: start;
}

.gallery img {
	height: 100px;
	scroll-snap-align: start;
	margin-right: 10px;
}

.navigation-button {
	align-content: center;
	text-align: center;
	cursor: pointer;
	margin-right: 5px;
	height: 30px;
	width: 30px;
}