/**
 * Estilos de los componentes de Brunas Core.
 *
 * Todo cuelga de variables CSS para que el child theme pueda redefinir la
 * paleta sin tocar este archivo.
 */

/* Valores por defecto. El child theme los redefine con la paleta de marca;
   estos existen para que el plugin se vea correcto aunque se use con otro tema.
   El azul es el del logotipo de Brunas (#114086). */
:root {
	--brunas-whatsapp: #25d366;
	--brunas-whatsapp-hover: #1da851;
	--brunas-aviso-bg: #f1f5fb;
	--brunas-aviso-borde: #114086;
	--brunas-aviso-texto: #1a2438;
	--brunas-radio: 12px;
}

/* --------------------------------------------------------------------------
   Barra de anuncio
   -------------------------------------------------------------------------- */

.brunas-anuncio {
	background: var(--brunas-aviso-borde);
	color: #fff;
	padding: 0.6rem 1rem;
	text-align: center;
}

.brunas-anuncio__texto {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Accesos de cabecera: carrito y cuenta
   -------------------------------------------------------------------------- */

.brunas-menu-accion {
	display: flex;
	align-items: center;
}

.brunas-accion {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	gap: 0.45rem;
	line-height: 1;
	padding: 0.5rem 0.85rem;
	position: relative;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.brunas-accion:hover,
.brunas-accion:focus-visible {
	background-color: var(--brunas-aviso-bg);
}

.brunas-accion__icono {
	flex-shrink: 0;
}

/* El carrito lleva insignia con el número; su etiqueta se puede ocultar en
   pantallas chicas sin perder sentido, porque el icono ya comunica. */
.brunas-carrito__contador {
	align-items: center;
	background: var(--brunas-aviso-borde);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 0.72rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	min-width: 1.25rem;
	padding: 0.2rem 0.35rem;
}

@media (max-width: 860px) {
	.brunas-accion__texto {
		/* Oculto a la vista pero legible por lector de pantalla. */
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.brunas-accion {
		padding: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.brunas-accion {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Aviso de días de despacho y cobertura
   -------------------------------------------------------------------------- */

.brunas-aviso-despacho {
	background: var(--brunas-aviso-bg);
	border-left: 4px solid var(--brunas-aviso-borde);
	border-radius: var(--brunas-radio);
	color: var(--brunas-aviso-texto);
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
}

.brunas-aviso-despacho p {
	margin: 0;
}

.brunas-aviso-despacho p + p {
	margin-top: 0.4rem;
}

/* --------------------------------------------------------------------------
   WhatsApp
   -------------------------------------------------------------------------- */

.brunas-whatsapp-flotante {
	align-items: center;
	background: var(--brunas-whatsapp);
	border-radius: 50%;
	bottom: 1.25rem;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	color: #fff;
	display: flex;
	height: 56px;
	inset-inline-end: 1.25rem;
	justify-content: center;
	position: fixed;
	transition: background-color 0.2s ease, transform 0.2s ease;
	width: 56px;
	z-index: 9999;
}

.brunas-whatsapp-flotante:hover,
.brunas-whatsapp-flotante:focus-visible {
	background: var(--brunas-whatsapp-hover);
	color: #fff;
	transform: scale(1.06);
}

.brunas-whatsapp-producto {
	align-items: center;
	background: var(--brunas-whatsapp);
	border-radius: var(--brunas-radio);
	color: #fff;
	display: inline-flex;
	font-weight: 600;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.7rem 1.1rem;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.brunas-whatsapp-producto:hover,
.brunas-whatsapp-producto:focus-visible {
	background: var(--brunas-whatsapp-hover);
	color: #fff;
}

.brunas-whatsapp-icono {
	flex-shrink: 0;
}

/* Quien pidió menos animación no debería recibir el rebote del botón. */
@media (prefers-reduced-motion: reduce) {
	.brunas-whatsapp-flotante,
	.brunas-whatsapp-producto {
		transition: none;
	}

	.brunas-whatsapp-flotante:hover,
	.brunas-whatsapp-flotante:focus-visible {
		transform: none;
	}
}