/* ===== Botão ===== */
.gmp-btn{
	display:inline-block;
	padding:12px 24px;
	background:#111;
	color:#fff;
	border-radius:8px;
	text-decoration:none;
	font-weight:600;
	line-height:1.2;
	cursor:pointer;
	transition:opacity .2s ease;
}
.gmp-btn:hover{opacity:.85;color:#fff;}

/* trava o scroll da página quando o popup está aberto */
body.gmp-lock{overflow:hidden !important;}

/* ===== Modal (tela cheia à prova de tema) ===== */
.gmp-modal{
	position:fixed !important;
	inset:0 !important;
	width:100vw !important;
	height:100vh !important;
	height:100dvh !important;
	margin:0 !important;
	z-index:2147483000 !important;
	display:flex;
	align-items:center;
	justify-content:center;
}
.gmp-modal[hidden]{display:none;}
.gmp-modal *{box-sizing:border-box;}

/* reset forte: neutraliza estilos de botão/link do tema (some com o "rosinha") */
.gmp-modal button{
	margin:0;
	padding:0;
	border:0 !important;
	outline:0 !important;
	background:transparent;
	font:inherit;
	color:#fff !important;
	text-decoration:none !important;
	text-shadow:none !important;
	box-shadow:none !important;
	-webkit-appearance:none;
	appearance:none;
	cursor:pointer;
}

.gmp-modal__backdrop{
	position:absolute;
	inset:0;
	background:rgba(10,10,12,.93);
}

.gmp-modal__inner{
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:row;
	gap:16px;
	padding:24px;
}

/* ===== Área principal (imagem grande) ===== */
.gmp-stage{
	position:relative;
	flex:1 1 auto;
	min-width:0;
	min-height:0;
	display:flex;
	align-items:center;
	justify-content:center;
}
.gmp-main{
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.gmp-main__img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;      /* nunca corta */
	display:block;
	border-radius:4px;
	box-shadow:0 10px 40px rgba(0,0,0,.5);
	background:#fff;
	animation:gmp-fade .25s ease;
}
@keyframes gmp-fade{from{opacity:0}to{opacity:1}}

/* ===== Miniaturas (coluna lateral) ===== */
.gmp-thumbs{
	flex:0 0 120px !important;
	display:flex;
	flex-direction:column;
	gap:12px;
	overflow-y:auto;
	overflow-x:hidden;
	padding:2px;
	scrollbar-width:thin;
}
.gmp-thumb{
	flex:0 0 auto;
	width:100%;
	aspect-ratio:1/1.414;   /* proporção A4 */
	border:2px solid transparent !important;
	border-radius:6px;
	background:#fff;
	overflow:hidden;
	opacity:.55;
	transition:opacity .2s ease,border-color .2s ease;
}
.gmp-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.gmp-thumb:hover{opacity:.85;}
.gmp-thumb.is-active{
	opacity:1;
	border-color:#fff !important;
}

/* ===== Botão fechar ===== */
.gmp-close{
	position:absolute;
	top:16px;
	right:18px;
	z-index:10;
	width:58px;
	height:58px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:rgba(0,0,0,.55) !important;
	font-size:38px;
	line-height:1;
	transition:background .2s ease,transform .1s ease;
}
.gmp-close:hover{background:rgba(255,255,255,.25) !important;}
.gmp-close:active{transform:scale(.92);}

/* ===== Setas ===== */
.gmp-nav{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:6;
	width:60px;
	height:60px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:rgba(0,0,0,.45) !important;
	font-size:42px;
	line-height:1;
	transition:background .2s ease;
}
.gmp-nav:hover{background:rgba(255,255,255,.25) !important;}
.gmp-nav:active{transform:translateY(-50%) scale(.92);}
.gmp-nav--prev{left:12px;}
.gmp-nav--next{right:12px;}

/* esconde setas se só tem 1 imagem */
.gmp-modal[data-count="1"] .gmp-nav,
.gmp-modal[data-count="1"] .gmp-thumbs{display:none;}

/* ===== Mobile: miniaturas embaixo ===== */
@media (max-width:768px){
	.gmp-modal__inner{
		flex-direction:column;
		padding:14px;
		padding-top:70px;   /* espaço pro botão fechar */
		gap:12px;
	}
	.gmp-thumbs{
		flex:0 0 88px !important;
		flex-direction:row;
		overflow-x:auto;
		overflow-y:hidden;
	}
	.gmp-thumb{
		width:auto;
		height:100%;
	}
	.gmp-close{
		width:50px;
		height:50px;
		font-size:34px;
		top:12px;
		right:12px;
	}
	.gmp-nav{
		width:50px;
		height:50px;
		font-size:34px;
	}
	.gmp-nav--prev{left:6px;}
	.gmp-nav--next{right:6px;}
}