/*
    Mobile Gallery v1.0
    gallery.css

    Используется:
    /mobile-gallery/gallery.php
*/



.mg-slide video {
				object-fit: contain;
				display: block;
				background: #000;
				width: 100%;
				max-height: 40vh;
				top:-50px;
				}

/*-------------------------------------------   IPHONE grosses Bild --------------------------------------*/
@media screen and (min-width: 401px) {
										.mg-audio-btn {
														width: 60px;
														height: 60px;
														font-size: 28px;
														bottom: 50px;
														}
									}






/*---------------------------------------------   ANDROID klein Bild --------------------------------------*/
@media screen and (max-width: 400px) {
										.mg-audio-btn {
														width: 50px;
														height: 50px;
														font-size: 22px;
														bottom: 30px;
														}
									}
@media (max-width: 480px) {
							.mg-audio-btn {
											width: 50px;
											height: 50px;
											font-size: 22px;
											bottom: 30px;
										}
						}

/* ==================================
   Галерея
================================== */


.mg-gallery {
			width:100%;
			max-width:100vw;
			position:relative;
			overflow:hidden;
			background:#ffffff;
			user-select:none;
			-webkit-user-select:none;
			touch-action:pan-y;
			}


/* ==================================
   Слайдер
================================== */


.mg-slider {
			display:flex;
			width:100%;
			height:auto;
			transition:transform .35s ease;
			will-change:transform;
			}


/* ==================================
   Один слайд
================================== */


.mg-slide {
			position: relative !important;
			min-width:100%;
			width:100%;
			display:flex;
			justify-content:center;
			align-items:center;
			overflow:hidden;
			}



/* ==================================
   Фото
================================== */


.mg-slide img {
				width:100%;
				height:auto;
				max-height:75vh;
				object-fit:contain;
				display:block;
				opacity:0;
				transition:
					opacity .35s ease,
					transform .3s ease;
				-webkit-user-drag:none;
				}



/* активное фото */

.mg-slide.active img {
						opacity:1;
						}


/* ==================================
   Точки
================================== */


.mg-dots {
			position:absolute;
			left:50%;
			bottom:12px;
			transform:translateX(-50%);
			display:flex;
			gap:7px;
			padding:5px 10px;
			border-radius:20px;
			background:rgba(0,0,0,.25);
			}



/* одна точка */

.mg-dot {
		width:8px;
		height:8px;
		border-radius:50%;
		background:rgba(255,255,255,.65);
		cursor:pointer;
		transition:
			transform .25s ease,
			background .25s ease;
		}



/* активная точка */

.mg-dot.active {
				background:#ffffff;
				transform:scale(1.35);
				}



/* ==================================
   Fullscreen
================================== */


.mg-fullscreen {
				position:fixed;
				z-index:99999;
				top:0;
				left:0;
				width:100vw;
				height:100vh;
				background:rgba(0,0,0,.95);
				display:none;
				justify-content:center;
				align-items:center;
				overflow:hidden;
				touch-action:none;
				}



/*
    открытое состояние
*/

.mg-fullscreen.show {
					display:flex;
					}



/* ==================================
   Большое фото
================================== */


.mg-full-image {
				max-width:100%;
				max-height:100%;
				object-fit:contain;
				transform-origin:center center;
				user-select:none;
				-webkit-user-drag:none;
				will-change:transform;
				}



/* ==================================
   Кнопка закрытия
================================== */


.mg-close {
			position:absolute;
			top:15px;
			right:20px;
			z-index:10;
			width:40px;
			height:40px;
			border-radius:50%;
			display:flex;
			justify-content:center;
			align-items:center;
			color:white;
			background:rgba(0,0,0,.45);
			font-size:28px;
			line-height:1;
			cursor:pointer;
			font-family:Arial,sans-serif;
			}



/* ==================================
   КНОПКА ЗВУКА В FULLSCREEN
================================== */

.mg-audio-btn {
				position: absolute;
				left: 15%;
				top: 80%;
				transform: translateX(-50%);
				z-index: 10;
				border-radius: 50%;
				display: flex;  /* скрыта по умолчанию */
				justify-content: center;
				align-items: center;
				background: rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(10px);
				border: 2px solid rgba(255, 255, 255, 0.3);
				cursor: pointer;
				color: white;
				transition: all 0.3s ease;
				user-select: none;
				-webkit-tap-highlight-color: transparent;
			}

.mg-audio-btn:hover {
					background: rgba(255, 255, 255, 0.3);
					transform: translateX(-50%) scale(1.1);
					}

.mg-audio-btn:active {
						transform: translateX(-50%) scale(0.9);
						}

.mg-audio-btn.visible {
						display: flex;
						}

/* ==================================
   КОНТЕНТ В FULLSCREEN
================================== */

.mg-full-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.mg-full-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.mg-full-video {
				max-width: 100%;
				max-height: 100%;
				width: auto;
				height: auto;
				object-fit: contain;
				background: #000;
				margin: auto;  /* ← ДОБАВИТЬ ДЛЯ ЦЕНТРИРОВАНИЯ */
				position: absolute;
				top: -50px;
				bottom: 0;
				left: 0;
				right: 0;
				}

/* ==================================
   АДАПТИВ ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ
================================== */







/* ==================================
   УВЕЛИЧЕННАЯ ГАЛЕРЕЯ (FULLSCREEN)
================================== */

.mg-gallery.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.95);
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mg-gallery.fullscreen .mg-slider {
    height: 100vh;
    align-items: center;
}

.mg-gallery.fullscreen .mg-slide {
    height: 100vh;
    align-items: center;
}

.mg-gallery.fullscreen .mg-slide img {
    max-height: 90vh;
    width: auto;
    max-width: 95vw;
    object-fit: contain;
}

.mg-gallery.fullscreen .mg-slide video {
    width: auto;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
	margin-top: -50px;  /* ← поднимаем видео вверх */
}

.mg-gallery.fullscreen .mg-dots {
    bottom: 30px;
    background: rgba(0, 0, 0, 0.6);
}

.mg-gallery.fullscreen .mg-dot {
    width: 12px;
    height: 12px;
}

/* Кнопка закрытия */
.mg-fullscreen-close {
    position: fixed;  /* ← fixed, всегда в одном месте экрана */
    top: 20px;
    right: 20px;
    z-index: 100000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: none;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.mg-fullscreen-close.visible {
    display: flex;
}

.mg-fullscreen-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}