/* POPUP */
.gpp[hidden] { display: none !important; }
.gpp { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gpp-overlay { position: absolute; inset: 0; background: rgba(17, 17, 17, .55); opacity: 0; transition: opacity .25s ease; }
.gpp-dialog {
	position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
	background: #fff; color: #111; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
	display: grid; grid-template-columns: 1fr; outline: none;
	opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s ease, transform .25s ease;
}
.gpp-dialog.has-image { max-width: 820px; grid-template-columns: 44% 1fr; }
.gpp.is-open .gpp-overlay { opacity: 1; }
.gpp.is-open .gpp-dialog { opacity: 1; transform: none; }
.gpp-media { background: #f3f3f1; min-height: 100%; }
.gpp-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gpp-body { padding: 32px 28px 24px; }
.gpp-title { margin: 0 32px 6px 0; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.gpp-text { margin: 0 0 18px; font-size: 14px; color: #555; }
.gpp-close {
	position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .92) !important; color: #111 !important; cursor: pointer; padding: 0 !important;
	display: grid; place-items: center; min-height: 0; line-height: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.gpp-close:hover { background: #111 !important; color: #fff !important; }
.gpp-close svg { display: block; pointer-events: none; }
/* Ícono de cerrar dibujado con CSS (independiente de la tipografía del tema) */
.gpp-close { font-size: 0 !important; position: absolute; }
.gpp-close::before, .gpp-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.gpp-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.gpp-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

html.gpp-lock { overflow: hidden; }

@media (max-width: 700px) {
	.gpp { align-items: flex-end; padding: 0; }
	.gpp-dialog, .gpp-dialog.has-image {
		max-width: none; grid-template-columns: 1fr; border-radius: 16px 16px 0 0;
		max-height: 92vh; max-height: 92dvh; transform: translateY(40px);
	}
	.gpp-media { min-height: 0; }
	.gpp-media img { height: 150px; }
	.gpp-body { padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
	.gpp-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.gpp-overlay, .gpp-dialog { transition: none; }
}