/**
 * Botón flotante lateral de reseñas (WC Reviews Showcase).
 *
 * Todo el posicionamiento/tamaño/color se resuelve mediante CSS custom
 * properties (--wcrs-btn-*) impresas dinámicamente por PHP en un bloque
 * <style> inline (ver templates/floating-button.php), con overrides por
 * breakpoint ya resueltos del lado del servidor. Este archivo solo define
 * la ESTRUCTURA: qué hace cada propiedad con esas variables.
 *
 * Aislamiento: todo selector usa el prefijo .wcrs-floating-button para no
 * colisionar con clases del tema ni de otros plugins/widgets flotantes
 * (WhatsApp, chat, carrito).
 */

.wcrs-floating-button {
	/*
	 * !important en posición/z-index: el wrapper se reubica por JS como
	 * hijo directo de <body> (ver public/js/floating-button.js) para no
	 * quedar atrapado dentro de un contenedor del tema/page builder con
	 * "transform" u "overflow:hidden" (lo que rompe position:fixed). Aun
	 * así, algunos temas (WoodMart incluido) traen reglas globales de
	 * mayor especificidad sobre position/top/right/z-index para sus
	 * propios elementos flotantes (WhatsApp, carrito, etc.); !important
	 * asegura que la posición configurada en el panel siempre gane.
	 */
	position: fixed !important;
	top: var(--wcrs-btn-top, 50dvh) !important;
	bottom: var(--wcrs-btn-bottom, auto) !important;
	left: var(--wcrs-btn-left, auto) !important;
	right: var(--wcrs-btn-right, 0) !important;
	z-index: var(--wcrs-btn-z, 999990) !important;
	/* El corrimiento vertical (centrar el botón sobre el porcentaje
	   configurado, ver WCRS_Button::build_device_vars()) y la escala por
	   dispositivo van en la MISMA declaración transform: una segunda
	   declaración transform no se combina con la primera, se la
	   reemplaza por completo. */
	transform: var(--wcrs-btn-v-shift, translateY(0)) scale(var(--wcrs-btn-scale, 1));
	transform-origin: var(--wcrs-btn-transform-origin, center right);
	display: inline-flex !important;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
	line-height: 0; /* evita que el <style> inline anterior afecte el flujo. */
}

/* El wrapper posiciona; el trigger es el elemento visual/interactivo real. */
.wcrs-floating-button__trigger {
	all: unset; /* reset defensivo: evita heredar estilos de <button> del tema. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	background-color: var(--wcrs-btn-bg, #6d28d9);
	color: var(--wcrs-btn-text, #ffffff);
	border-style: solid;
	border-color: var(--wcrs-btn-border-color, transparent);
	border-width: var(--wcrs-btn-border-width, 0);
	border-radius: var(--wcrs-btn-radius, 10px);
	padding: var(--wcrs-btn-padding, 14px) calc(var(--wcrs-btn-padding, 14px) * 0.75);
	min-width: var(--wcrs-btn-width, 44px);
	font-family: var(--wcrs-btn-font-family, inherit);
	font-size: var(--wcrs-btn-font-size, 14px);
	font-weight: var(--wcrs-btn-font-weight, 600);
	line-height: var(--wcrs-btn-line-height, 1.2);
	letter-spacing: var(--wcrs-btn-letter-spacing, 0.5px);
	opacity: var(--wcrs-btn-opacity, 1);
	box-shadow: var(--wcrs-btn-shadow, none);
	transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
	text-decoration: none;
	white-space: nowrap;
}

.wcrs-floating-button__trigger:hover,
.wcrs-floating-button__trigger:focus-visible {
	background-color: var(--wcrs-btn-hover, #5b21b6);
}

/* Foco visible accesible: outline propio que no depende del tema. */
.wcrs-floating-button__trigger:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.45);
}

.wcrs-floating-button__trigger:active {
	transform: scale(0.97);
}

.wcrs-floating-button__icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--wcrs-btn-icon, #ffffff);
}
.wcrs-floating-button__icon svg {
	width: 100%;
	height: 100%;
}

/* --- Orientación vertical (comportamiento predeterminado) --- */
.wcrs-floating-button--vertical .wcrs-floating-button__trigger {
	flex-direction: column;
}
.wcrs-floating-button--vertical .wcrs-floating-button__text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* --- Orientación horizontal (alternativa configurable) --- */
.wcrs-floating-button--horizontal .wcrs-floating-button__trigger {
	flex-direction: row;
}

/* --- Botón de cerrar (X) --- */
.wcrs-floating-button__close {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	color: #333333;
	border-radius: 50%;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.wcrs-floating-button__close:hover,
.wcrs-floating-button__close:focus-visible {
	background-color: #f3f4f6;
}
.wcrs-floating-button__close:focus-visible {
	outline: 2px solid #6d28d9;
	outline-offset: 1px;
}

/* Estado oculto (cerrado por el usuario, controlado por floating-button.js). */
.wcrs-floating-button.is-hidden {
	display: none;
}

/* ---------------------------------------------------------------------
 * ANIMACIONES — únicamente definidas dentro de la media query
 * prefers-reduced-motion: no-preference. Los visitantes con reducción de
 * movimiento activada en su sistema NUNCA reciben estas animaciones,
 * sin necesidad de detección por JavaScript.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.wcrs-floating-button--anim-pulse .wcrs-floating-button__trigger {
		animation: wcrs-btn-pulse 2.6s ease-in-out infinite;
	}
	.wcrs-floating-button--anim-glow .wcrs-floating-button__trigger {
		animation: wcrs-btn-glow 2.6s ease-in-out infinite;
	}
	.wcrs-floating-button--anim-slide-in .wcrs-floating-button__trigger {
		animation: wcrs-btn-slide-in 0.5s ease-out both;
	}
	.wcrs-floating-button--anim-bounce .wcrs-floating-button__trigger {
		animation: wcrs-btn-bounce 2.4s ease-in-out infinite;
	}

	@keyframes wcrs-btn-pulse {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.05); }
	}
	@keyframes wcrs-btn-glow {
		0%, 100% { box-shadow: var(--wcrs-btn-shadow, none); }
		50% { box-shadow: 0 0 16px 2px var(--wcrs-btn-bg, #6d28d9); }
	}
	@keyframes wcrs-btn-slide-in {
		from { transform: translateX(var(--wcrs-btn-slide-offset, 40px)); opacity: 0; }
		to { transform: translateX(0); opacity: var(--wcrs-btn-opacity, 1); }
	}
	@keyframes wcrs-btn-bounce {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-6px); }
	}
}

/* ---------------------------------------------------------------------
 * RESPONSIVE
 * El posicionamiento/escala por dispositivo ya llega resuelto vía
 * variables CSS con sus propios breakpoints (ver
 * WCRS_Button::build_css_vars_block()). Aquí solo se cubren ajustes
 * estructurales que no dependen de configuración del admin: evitar que
 * el botón provoque scroll horizontal y mantenerlo utilizable en pantallas
 * angostas.
 * ------------------------------------------------------------------- */
@media (max-width: 782px) {
	.wcrs-floating-button {
		max-width: calc(100vw - 16px);
	}
	.wcrs-floating-button__trigger {
		max-width: 100%;
	}
}
