/*
 * SE7 WhatsApp — els botons flotants.
 *
 * ELS COLORS ELS POSA QUI CONFIGURA, per botó, amb dues variables que escriu
 * el pintor: `--se7wa-color` (el fons) i `--se7wa-icona` (el dibuix de dins).
 * Aquí no hi ha cap color de marca escrit a mà.
 *
 * LA FORMA RODONA ÉS UNA EXCEPCIÓ DECIDIDA. La casa fa cantonades vives per
 * defecte, però un botó flotant rodó a la cantonada és una convenció que la
 * gent reconeix sense llegir res, i trencar-la aquí costaria clics. Qui vulgui
 * el quadrat de la sèrie el té a l'ajust «Forma»; el TAULER sí que va quadrat.
 */

.se7wa {
	--se7wa-color: #25D366;
	--se7wa-icona: #fff;
	--se7wa-mida: 56px;
	--se7wa-marge: 20px;
}

/* ── El grup d'una posició, i els botons a dins ──────────────────────────
   EL QUE ES FIXA A LA PANTALLA ÉS EL GRUP. La primera versió fixava cada botó
   pel seu compte i dos botons a la mateixa posició queien exactament al mateix
   lloc, l'un tapant l'altre. Al grup s'apilen amb el seu espai. */

.se7wa-grup {
	position: fixed;
	z-index: 99990;
	display: flex;
	flex-direction: column-reverse;
	gap: 12px;
}

.se7wa-grup--baix-dreta    { bottom: var(--se7wa-marge); right: var(--se7wa-marge); align-items: flex-end; }
.se7wa-grup--baix-esquerra { bottom: var(--se7wa-marge); left: var(--se7wa-marge); align-items: flex-start; }
.se7wa-grup--mig-dreta     { top: 50%; right: var(--se7wa-marge); transform: translateY(-50%); align-items: flex-end; }
.se7wa-grup--mig-esquerra  { top: 50%; left: var(--se7wa-marge); transform: translateY(-50%); align-items: flex-start; }

/* Dins del botó, el mateix ordre invers: el llançador a baix i el tauler i el
   reclam per damunt, que és on hi ha lloc. L'alineació s'hereta del grup. */
.se7wa-boto {
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	align-items: inherit;
}

.se7wa-llancador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: var(--se7wa-mida);
	height: var(--se7wa-mida);
	padding: 0;
	border: 0;
	background: var(--se7wa-color);
	color: var(--se7wa-icona);
	cursor: pointer;
	text-decoration: none;
	/* Una ombra dura i desplaçada, no un difuminat: és el que fa la casa quan
	   cal separar una cosa del fons. */
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .18);
	transition: transform .15s ease;
}

.se7wa-boto--rodo .se7wa-llancador { border-radius: 50%; }
.se7wa-boto--quadrat .se7wa-llancador { border-radius: 0; }

/* El text del botó només hi és per als lectors de pantalla: la icona ja diu
   què és, i un botó flotant amb text tapa mitja pantalla al mòbil. */
.se7wa-llancador__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (hover: hover) {
	.se7wa-llancador:hover { transform: translate(-1px, -1px); }
}

.se7wa-llancador:focus-visible {
	outline: 3px solid var(--se7wa-color);
	outline-offset: 3px;
}

/* ── El tauler dels contactes ────────────────────────────────────────────── */

.se7wa-tauler {
	width: 280px;
	max-width: calc(100vw - var(--se7wa-marge) * 2);
	background: #fff;
	color: #111;
	border: 1px solid rgba(0, 0, 0, .12);
	box-shadow: 4px 4px 0 rgba(0, 0, 0, .12);
}

/* Tancat de sèrie NOMÉS quan el motor hi és: la classe la posa el JavaScript.
   Sense JavaScript el tauler surt obert i els enllaços van igual. */
.se7wa--amb-motor .se7wa-tauler { display: none; }
.se7wa--amb-motor .se7wa-tauler.es-obre { display: block; }

.se7wa-tauler__titol {
	margin: 0;
	padding: 12px 14px;
	background: var(--se7wa-color);
	color: var(--se7wa-icona);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.se7wa-llista { margin: 0; padding: 0; list-style: none; }

.se7wa-contacte + .se7wa-contacte { border-top: 1px solid rgba(0, 0, 0, .1); }

.se7wa-contacte__enllac {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) {
	.se7wa-contacte__enllac:hover { background: rgba(0, 0, 0, .05); }
}

.se7wa-contacte__enllac:focus-visible {
	outline: 3px solid var(--se7wa-color);
	outline-offset: -3px;
}

.se7wa-contacte__marca {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--se7wa-color);
}

.se7wa-contacte__marca .se7wa-icona { width: 22px; height: 22px; }

.se7wa-contacte__qui { display: flex; flex-direction: column; min-width: 0; }
.se7wa-contacte__nom { font-size: 14px; font-weight: 600; }
.se7wa-contacte__carrec { font-size: 12px; opacity: .7; }

/* ── El reclam: la bafarada del costat del botó ──────────────────────────── */

.se7wa-reclam {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 240px;
	background: #fff;
	color: #111;
	border: 1px solid rgba(0, 0, 0, .12);
	/* La mateixa ombra dura de la casa que el tauler. */
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .12);
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
}

.se7wa-reclam[hidden] { display: none; }

.se7wa-reclam__text { padding: 9px 2px 9px 12px; }

.se7wa-reclam__tanca {
	flex: 0 0 auto;
	width: 34px;
	align-self: stretch;
	border: 0;
	background: none;
	color: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	opacity: .55;
}

@media (hover: hover) {
	.se7wa-reclam__tanca:hover { opacity: 1; }
}

.se7wa-reclam__tanca:focus-visible {
	outline: 3px solid var(--se7wa-color);
	outline-offset: -3px;
}

/* ── On es veu cada cosa ─────────────────────────────────────────────────── */

@media (max-width: 782px) {
	.se7wa-boto--v-escriptori,
	.se7wa-contacte--v-escriptori { display: none; }
}

@media (min-width: 783px) {
	.se7wa-boto--v-mobil,
	.se7wa-contacte--v-mobil { display: none; }
}

/* Qui no vulgui moviment, que no en tingui. */
@media (prefers-reduced-motion: reduce) {
	.se7wa-llancador { transition: none; }
	.se7wa-llancador:hover { transform: none; }
}

/* Imprimir un botó flotant no té cap sentit. */
@media print {
	.se7wa { display: none; }
}