/**
 * ISG Sidebanner
 *
 * mba | Portado del CSS del modulo isg_sidebanner de PrestaShop.
 * mba | Cambios respecto al original:
 * mba |  - Sin @import de Google Fonts: bloqueaba el pintado y era una peticion a
 * mba |    terceros antes de aceptar cookies. Ahora hereda la tipografia del tema.
 * mba |  - Medidas configurables via variables CSS inyectadas desde PHP.
 * mba |  - Soporte para lateral izquierdo ademas del derecho.
 * mba |  - El paso de centrado a lateral se hace con un fundido, porque animar
 * mba |    top/left/right a la vez producia un salto brusco.
 */

#isg-sidebanner {
	/* mba | Valores de reserva: PHP los sobreescribe con los del panel de ajustes */
	--isg-width: 320px;
	--isg-offset: 140px;
	--isg-z: 999999;
	--isg-handle: 42px;
	/* mba | Aire que queda al otro lado de la pantalla cuando el aviso esta desplegado
	   en movil. Solo se usa dentro de la consulta de medios de mas abajo. */
	--isg-gap: 20px;
	/* mba | Separacion inferior efectiva. En movil se recorta (ver consulta de medios)
	   y hay reglas que necesitan ese valor ya resuelto, no el bruto de --isg-offset. */
	--isg-bottom: var(--isg-offset);
	--isg-ease: cubic-bezier(0.25, 1, 0.5, 1);

	position: fixed;
	z-index: var(--isg-z);
	background: #ffffff;
	box-sizing: border-box;
	font-family: inherit;
	line-height: 0;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	opacity: 1;
	transition:
		transform 0.55s var(--isg-ease),
		opacity 0.35s ease,
		box-shadow 0.35s ease;
}

/* mba | Mientras el JavaScript no decide, el bloque no existe visualmente */
#isg-sidebanner[hidden],
.isg-sidebanner-overlay[hidden] {
	display: none !important;
}

#isg-sidebanner *,
.isg-sidebanner-overlay * {
	box-sizing: border-box;
}

/* mba | Corta la transicion durante un fotograma para recolocar sin que se vea */
#isg-sidebanner.isg-noanim,
.isg-sidebanner-overlay.isg-noanim {
	transition: none !important;
}

/* ==========================================
   CORTINA DE FONDO
   ========================================== */
.isg-sidebanner-overlay {
	--isg-z: 999999;

	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: calc(var(--isg-z) - 1);
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.45s ease-in-out;
}

.isg-sidebanner-overlay.is-fading {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================
   ESTADO: CENTRADO
   ========================================== */
#isg-sidebanner.is-centered {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%) scale(1);
	width: 90%;
	max-width: 1316px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* mba | Fotograma de entrada: el aviso se presenta creciendo, no de golpe */
#isg-sidebanner.is-centered.is-entering {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.94);
}

/* mba | Fotograma de salida antes de saltar al lateral */
#isg-sidebanner.is-centered.is-leaving {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.93);
}

/* ==========================================
   ESTADOS LATERALES
   ========================================== */
#isg-sidebanner.is-minimized,
#isg-sidebanner.is-expanded {
	top: auto;
	bottom: var(--isg-bottom);
	width: var(--isg-width);
	max-width: 92vw;
	border: 0;
}

#isg-sidebanner.is-minimized {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

#isg-sidebanner.is-expanded {
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28);
}

/* mba | Lateral derecho */
#isg-sidebanner.isg-pos-right.is-minimized,
#isg-sidebanner.isg-pos-right.is-expanded {
	right: 0;
	left: auto;
	border-radius: 12px 0 0 12px;
}

#isg-sidebanner.isg-pos-right.is-minimized {
	/* mba | Solo asoma el ancho de la pestana */
	transform: translateX(calc(100% - var(--isg-handle)));
}

#isg-sidebanner.isg-pos-right.is-expanded {
	transform: translateX(0);
}

/* mba | Lateral izquierdo: mismo comportamiento en espejo */
#isg-sidebanner.isg-pos-left.is-minimized,
#isg-sidebanner.isg-pos-left.is-expanded {
	left: 0;
	right: auto;
	border-radius: 0 12px 12px 0;
}

#isg-sidebanner.isg-pos-left.is-minimized {
	transform: translateX(calc(-100% + var(--isg-handle)));
}

#isg-sidebanner.isg-pos-left.is-expanded {
	transform: translateX(0);
}

/**
 * mba | Guino al pasar el raton: el aviso se asoma un poco mas para invitar al clic.
 *
 * mba | Va encerrado en una consulta de puntero fino a proposito. En pantalla tactil
 * mba | no hay raton, pero el navegador deja el foco puesto en la pestana despues de
 * mba | pulsarla, con lo que :focus-within se quedaba activo y el panel permanecia
 * mba | asomado 13px de mas en lugar de volver a ras del borde.
 */
@media (hover: hover) and (pointer: fine) {
	#isg-sidebanner.isg-pos-right.is-minimized:hover,
	#isg-sidebanner.isg-pos-right.is-minimized:focus-within {
		transform: translateX(calc(100% - var(--isg-handle) - 13px));
	}

	#isg-sidebanner.isg-pos-left.is-minimized:hover,
	#isg-sidebanner.isg-pos-left.is-minimized:focus-within {
		transform: translateX(calc(-100% + var(--isg-handle) + 13px));
	}
}

/* mba | Punto de partida al entrar por el lateral: completamente fuera de pantalla */
#isg-sidebanner.isg-pos-right.is-entering {
	transform: translateX(100%);
	opacity: 0;
}

#isg-sidebanner.isg-pos-left.is-entering {
	transform: translateX(-100%);
	opacity: 0;
}

/* ==========================================
   ESTADO: CERRADO
   ========================================== */
#isg-sidebanner.is-closing {
	opacity: 0;
	pointer-events: none;
}

#isg-sidebanner.is-centered.is-closing {
	transform: translate(-50%, -50%) scale(0.9);
}

#isg-sidebanner.isg-pos-right.is-closing:not(.is-centered) {
	transform: translateX(105%);
}

#isg-sidebanner.isg-pos-left.is-closing:not(.is-centered) {
	transform: translateX(-105%);
}

/* ==========================================
   COMPONENTES INTERNOS
   ========================================== */
.isg-sidebanner__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease, transform 0.25s ease;
}

#isg-sidebanner.isg-pos-left .isg-sidebanner__close {
	/* mba | En lateral izquierdo la pestana ocupa la derecha, asi que el cierre se mueve */
	right: auto;
	left: 12px;
}

#isg-sidebanner.is-centered .isg-sidebanner__close {
	right: 12px;
	left: auto;
}

.isg-sidebanner__close:hover,
.isg-sidebanner__close:focus-visible {
	background: rgba(0, 0, 0, 0.85);
	transform: scale(1.1);
	outline: none;
}

/* mba | Estando recogido no hay sitio para la aspa */
#isg-sidebanner.is-minimized .isg-sidebanner__close {
	display: none;
}

.isg-sidebanner__content {
	width: 100%;
	height: 100%;
}

.isg-sidebanner__link {
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
	text-decoration: none;
	border: 0;
}

.isg-sidebanner__img {
	width: 100%;
	height: auto;
	display: block;
	max-width: 100%;
	transition: transform 0.45s ease;
}

#isg-sidebanner.is-centered .isg-sidebanner__link:hover .isg-sidebanner__img {
	transform: scale(1.02);
}

/* mba | Deja hueco a la pestana para que no tape la imagen al desplegar */
#isg-sidebanner.isg-pos-right.is-minimized .isg-sidebanner__content,
#isg-sidebanner.isg-pos-right.is-expanded .isg-sidebanner__content {
	padding-left: var(--isg-handle);
}

#isg-sidebanner.isg-pos-left.is-minimized .isg-sidebanner__content,
#isg-sidebanner.isg-pos-left.is-expanded .isg-sidebanner__content {
	padding-right: var(--isg-handle);
}

/* ==========================================
   PESTANA LATERAL
   ========================================== */
.isg-sidebanner__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--isg-handle);
	padding: 0;
	margin: 0;
	border: 0;
	background: #000000;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, background 0.3s ease;
}

#isg-sidebanner.isg-pos-right .isg-sidebanner__handle {
	left: 0;
	right: auto;
}

#isg-sidebanner.isg-pos-left .isg-sidebanner__handle {
	right: 0;
	left: auto;
}

#isg-sidebanner.is-minimized .isg-sidebanner__handle {
	opacity: 1;
	pointer-events: auto;
}

#isg-sidebanner.is-minimized .isg-sidebanner__handle:hover {
	background: #1a1a1a;
}

#isg-sidebanner.is-expanded .isg-sidebanner__handle {
	/* mba | Sigue clicable para poder volver a recogerlo, pero mas discreto */
	opacity: 0.85;
	pointer-events: auto;
}

.isg-sidebanner__handle-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	white-space: nowrap;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 8px;
}

.isg-sidebanner__handle-icon {
	transform: rotate(90deg);
	flex: 0 0 auto;
}

/* ==========================================
   PANTALLAS PEQUENAS
   ========================================== */
@media (max-width: 767px) {
	#isg-sidebanner {
		--isg-handle: 38px;
		/* mba | Nunca dejamos el aviso tan bajo como en escritorio: la pantalla es corta */
		--isg-bottom: min(var(--isg-offset), 90px);
	}

	#isg-sidebanner.is-centered {
		width: 95%;
		border-radius: 12px;
	}

	/**
	 * mba | Desplegado ocupa todo el ancho salvo el aire de --isg-gap, que queda al
	 * mba | lado contrario al que esta anclado. Como la imagen conserva su proporcion,
	 * mba | ese ancho extra la hace mas alta; al estar el bloque anclado por abajo,
	 * mba | el crecimiento va hacia arriba y la pestana no se mueve de sitio.
	 *
	 * mba | Se aplica tambien al estado recogido para que al desplegarse no haya que
	 * mba | animar el ancho, solo el desplazamiento.
	 */
	#isg-sidebanner.is-minimized,
	#isg-sidebanner.is-expanded {
		width: calc(100% - var(--isg-gap));
		max-width: none;
	}

	/**
	 * mba | Red de seguridad: con imagenes muy verticales el bloque podria salirse por
	 * mba | arriba. Limitamos la altura y dejamos que la imagen se ajuste dentro sin
	 * mba | deformarse ni recortarse.
	 */
	#isg-sidebanner.is-minimized .isg-sidebanner__img,
	#isg-sidebanner.is-expanded .isg-sidebanner__img {
		max-height: calc(100vh - var(--isg-bottom) - 24px);
		max-height: calc(100dvh - var(--isg-bottom) - 24px);
		object-fit: contain;
	}
}

/* mba | Respeto a quien pide menos animacion en su sistema operativo */
@media (prefers-reduced-motion: reduce) {
	#isg-sidebanner,
	.isg-sidebanner-overlay,
	.isg-sidebanner__img,
	.isg-sidebanner__close,
	.isg-sidebanner__handle {
		transition-duration: 0.01ms !important;
	}

	#isg-sidebanner.is-centered .isg-sidebanner__link:hover .isg-sidebanner__img {
		transform: none;
	}
}