/* Smart Popup Manager — Frontend Popup Styles */

/* ── Overlay contenedor (nunca tiene opacity propia) ── */
.spm-overlay {
	display:         none; /* oculto por defecto; JS aplica display:flex al mostrarlo */
	position:        fixed;
	inset:           0;
	z-index:         99999;
	align-items:     center;
	justify-content: center;
	padding:         20px;
	box-sizing:      border-box;
}

/* Fondo semitransparente independiente — su opacity no afecta al popup */
.spm-overlay__bg {
	position:       absolute;
	inset:          0;
	opacity:        0;
	transition:     opacity .3s ease;
	pointer-events: none; /* los clicks al área vacía los recibe el overlay padre */
	z-index:        0;
}
.spm-overlay.spm-is-visible .spm-overlay__bg { opacity: 1; }

/* ── Popup box (z-index > 0 para quedar sobre el fondo) ── */
.spm-popup {
	position:       relative;
	z-index:        1;
	width:          100%;
	border-radius:  12px;
	overflow:       hidden;
	box-shadow:     0 20px 60px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.15);
	display:        flex;
	flex-direction: column;
	transition:     transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}

/* ── Animaciones de entrada (solo afectan al popup, nunca al fondo) ── */

/* Fade */
.spm-popup--anim-fade                          { opacity: 0; }
.spm-overlay.spm-is-visible .spm-popup--anim-fade { opacity: 1; }

/* Slide-up */
.spm-popup--anim-slide-up {
	opacity:   0;
	transform: translateY(40px);
}
.spm-overlay.spm-is-visible .spm-popup--anim-slide-up {
	opacity:   1;
	transform: translateY(0);
}

/* Zoom */
.spm-popup--anim-zoom {
	opacity:   0;
	transform: scale(.85);
}
.spm-overlay.spm-is-visible .spm-popup--anim-zoom {
	opacity:   1;
	transform: scale(1);
}

/* ── Cerrar ── */
.spm-popup__close {
	position:       absolute;
	top:            12px;
	right:          12px;
	z-index:        10;
	width:          32px;
	height:         32px;
	border-radius:  50%;
	background:     rgba(0,0,0,.12);
	color:          #fff;
	border:         none;
	font-size:      20px;
	line-height:    1;
	cursor:         pointer;
	display:        flex;
	align-items:    center;
	justify-content: center;
	transition:     background .2s;
	padding:        0;
}
.spm-popup__close:hover { background: rgba(0,0,0,.35); }

/* ── Imagen — posición arriba (default) ── */
.spm-popup--img-top {
	flex-direction: column;
}
.spm-popup--img-top .spm-popup__img {
	width:  100%;
	flex-shrink: 0;
	max-height: 300px;
	overflow: hidden;
}
.spm-popup--img-top .spm-popup__img-el {
	width:      100%;
	height:     100%;
	max-height: 300px;
	object-fit: cover;
	display:    block;
}

/* ── Imagen — posición izquierda ── */
.spm-popup--img-left {
	flex-direction: row;
}
.spm-popup--img-left .spm-popup__img {
	width:       40%;
	min-width:   200px;
	flex-shrink: 0;
}
.spm-popup--img-left .spm-popup__img-el {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}
.spm-popup--img-left .spm-popup__body { flex: 1; }

/* ── Imagen — posición derecha ── */
.spm-popup--img-right {
	flex-direction: row-reverse;
}
.spm-popup--img-right .spm-popup__img {
	width:       40%;
	min-width:   200px;
	flex-shrink: 0;
}
.spm-popup--img-right .spm-popup__img-el {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}
.spm-popup--img-right .spm-popup__body { flex: 1; }

/* ── Cuerpo ── */
.spm-popup__body {
	padding:        32px;
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

.spm-popup__title {
	font-size:   24px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	margin:      0 !important;
	color:       inherit !important;
}

.spm-popup__text {
	font-size:   15px;
	line-height: 1.65;
	margin:      0;
	color:       inherit;
}
.spm-popup__text a { color: inherit; text-decoration: underline; }

.spm-popup__btn {
	display:         inline-block;
	padding:         13px 28px;
	background:      #111;
	color:           #fff !important;
	border-radius:   8px;
	font-size:       14px;
	font-weight:     700;
	letter-spacing:  .5px;
	text-decoration: none !important;
	text-align:      center;
	align-self:      flex-start;
	transition:      background .2s, transform .15s;
	border:          none;
	cursor:          pointer;
}
.spm-popup__btn:hover {
	background: #333;
	transform:  translateY(-1px);
}

/* ── Modo solo imagen ── */
.spm-popup--image-only {
	background:     transparent !important;
	border-radius:  12px;
	overflow:       hidden;
	display:        block;
	line-height:    0;
	box-shadow:     0 20px 60px rgba(0,0,0,.3);
}
.spm-popup__img-link,
.spm-popup__img-only-wrap {
	display:     block;
	line-height: 0;
}
.spm-popup--image-only .spm-popup__img-el {
	width:      100%;
	height:     auto;
	display:    block;
	max-height: 90vh;
	object-fit: contain;
}
/* Con enlace: solo cursor pointer, sin efecto de opacidad */
.spm-popup--image-only a.spm-popup__img-link {
	cursor: pointer;
}
/* Sin enlace: cursor normal */
.spm-popup--image-only .spm-popup__img-only-wrap {
	cursor: default;
}

/* ── Protección contra estilos globales del tema ── */
/* Neutraliza cualquier hover de opacity/filter que el tema aplique a imgs y links */
#spm-overlay img,
#spm-overlay a img,
#spm-overlay .spm-popup__img img,
#spm-overlay .spm-popup__img-el {
	opacity:    1 !important;
	filter:     none !important;
	transition: none !important;
}
/* Excepción: el botón CTA mantiene sus propios hover effects (background + transform) */
#spm-overlay .spm-popup__btn {
	transition: background .2s, transform .15s !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
	.spm-popup--img-left,
	.spm-popup--img-right {
		flex-direction: column;
	}
	.spm-popup--img-left  .spm-popup__img,
	.spm-popup--img-right .spm-popup__img {
		width:      100%;
		min-width:  0;
		max-height: 220px;
	}
	.spm-popup__body { padding: 24px 20px; }
	.spm-popup__title { font-size: 20px !important; }
}