/**
 * WP WhatsApp Float Button — Estilos del botón frontend
 *
 * Arquitectura de layout:
 * ─────────────────────────────────────────────────────────
 * El contenedor .wpwab-container usa flexbox.
 * El tooltip es un sibling del botón, NUNCA position: absolute.
 *
 * Posición bottom-right:
 *   flex-direction: row → [tooltip] [botón]
 *   El tooltip queda a la IZQUIERDA del botón.
 *
 * Posición bottom-left:
 *   flex-direction: row-reverse → [botón] [tooltip]
 *   El tooltip queda a la DERECHA del botón.
 *
 * Variables CSS (inyectadas inline desde PHP):
 *   --wpwab-color             Color de fondo del botón
 *   --wpwab-color-hover       Color de fondo en hover/focus
 *   --wpwab-icon-color        Color del ícono SVG
 *   --wpwab-icon-color-hover  Color del ícono en hover/focus
 *   --wpwab-offset-y          Separación desde el borde inferior
 *   --wpwab-offset-x          Separación desde el borde lateral
 *
 * @package WPWhatsAppButton
 * @since   1.0.0
 */

/* ──────────────────────────────────────────────
   Contenedor principal — posición fija
   ────────────────────────────────────────────── */

.wpwab-container {
	position: fixed;
	bottom: var(--wpwab-offset-y, 20px);
	z-index: 999999;
	display: flex;
	align-items: center;
	gap: 12px;
	/* Transición de opacidad para el retardo de aparición */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	/* Evitar que page builders metan estilos raros */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Estado visible — JS agrega esta clase */
.wpwab-container.wpwab-visible {
	opacity: 1;
	visibility: visible;
}

/* ── Posición derecha ── */
.wpwab-position-right {
	right: var(--wpwab-offset-x, 20px);
}

/* ── Posición izquierda ── */
.wpwab-position-left {
	left: var(--wpwab-offset-x, 20px);
}

/* ──────────────────────────────────────────────
   Posición del tooltip respecto al botón
   ─────────────────────────────────────────────
   El tooltip es un sibling del botón dentro de un flex container.
   En el HTML, el botón (<a>) va PRIMERO y el tooltip (<span>) DESPUÉS.
   La dirección del flex determina dónde aparece el tooltip.

   - left:   tooltip a la izquierda  → row-reverse (invierte: tooltip queda primero)
   - right:  tooltip a la derecha    → row (orden natural: botón, tooltip)
   - top:    tooltip arriba          → column-reverse (invierte: tooltip queda arriba)
   - bottom: tooltip abajo           → column (orden natural: botón arriba, tooltip abajo)

   NUNCA se usa position: absolute para el tooltip.
   ────────────────────────────────────────────── */

/* Tooltip a la izquierda del botón */
.wpwab-tooltip-left {
	flex-direction: row-reverse;
}

/* Tooltip a la derecha del botón */
.wpwab-tooltip-right {
	flex-direction: row;
}

/* Tooltip arriba del botón */
.wpwab-tooltip-top {
	flex-direction: column-reverse;
	align-items: center;
}

/* Tooltip abajo del botón */
.wpwab-tooltip-bottom {
	flex-direction: column;
	align-items: center;
}

/* ──────────────────────────────────────────────
   Botón interno (link)
   ────────────────────────────────────────────── */

.wpwab-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--wpwab-color, #25D366);
	color: var(--wpwab-icon-color, #fff);
	text-decoration: none;
	cursor: pointer;
	border: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	animation: wpwab-pulse 2s infinite;
	flex-shrink: 0;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

/* ── Contenedor del ícono SVG ── */
.wpwab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

/* ── Tamaños ── */
.wpwab-size-small .wpwab-inner {
	width: 48px;
	height: 48px;
}

.wpwab-size-small .wpwab-icon svg {
	width: 24px;
	height: 24px;
}

.wpwab-size-medium .wpwab-inner {
	width: 60px;
	height: 60px;
}

.wpwab-size-medium .wpwab-icon svg {
	width: 30px;
	height: 30px;
}

.wpwab-size-large .wpwab-inner {
	width: 72px;
	height: 72px;
}

.wpwab-size-large .wpwab-icon svg {
	width: 36px;
	height: 36px;
}

/* ── Estados interactivos ── */
.wpwab-inner:hover,
.wpwab-inner:focus-visible {
	background-color: var(--wpwab-color-hover, #1DA851);
	color: var(--wpwab-icon-color-hover, #fff);
	transform: scale(1.1);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
	animation: none;
}

.wpwab-inner:focus-visible {
	outline: 3px solid var(--wpwab-color-hover, #1DA851);
	outline-offset: 3px;
}

.wpwab-inner:active {
	transform: scale(0.95);
	animation: none;
}

/* ──────────────────────────────────────────────
   Tooltip — sibling en flex, nunca absolute
   ────────────────────────────────────────────── */

.wpwab-tooltip {
	background-color: #fff;
	color: #1a1a1a;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	flex-shrink: 0;
	pointer-events: none;
}

/* ──────────────────────────────────────────────
   Animación de pulso
   ────────────────────────────────────────────── */

@keyframes wpwab-pulse {
	0% {
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(37, 211, 102, 0.4);
	}
	70% {
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 0 0 14px rgba(37, 211, 102, 0);
	}
	100% {
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

/* ──────────────────────────────────────────────
   Accesibilidad: reducir movimiento
   ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.wpwab-inner {
		animation: none;
	}

	.wpwab-container {
		transition: none;
	}
}

/* ──────────────────────────────────────────────
   Visibilidad responsive
   ────────────────────────────────────────────── */

@media (max-width: 768px) {
	.wpwab-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 769px) {
	.wpwab-hide-desktop {
		display: none !important;
	}
}