/* Bolla WhatsApp in basso a destra (inc/bolla.php). Bianco e nero del sito, angoli vivi, niente ombre colorate.
   Sta sopra le barre fisse di scheda (z 70) e collezione (z 60), sotto il menu da telefono (90) e il cassetto (96).
   --fiore-bolla-offset lo scrive bolla.js: l'altezza della barra fissa in fondo, quando c'è. */
.fiore-bolla {
	position: fixed; right: 16px; z-index: 80;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--fiore-bolla-offset, 0px));
	display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
	font-family: var(--wp--preset--font-family--sans);
	transition: bottom .3s ease;
}
.fiore-bolla[hidden] { display: none; }
.fiore-bolla.is-nascosta { opacity: 0; transform: translateY(8px); pointer-events: none; }
.fiore-bolla.is-visibile { opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease, bottom .3s ease; }

/* Il bottone: un cerchio nero da 56 px, il glifo bianco. Al passaggio si inverte. */
.fiore-bolla__apri {
	display: inline-flex; align-items: center; justify-content: center; gap: 0;
	min-width: 56px; height: 56px; padding: 0; border-radius: 999px;
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--ink); cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	transition: background-color .2s ease, color .2s ease, padding .2s ease;
}
.fiore-bolla__apri:hover, .fiore-bolla__apri:focus-visible, .fiore-bolla__apri[aria-expanded="true"] {
	background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink);
}
.fiore-bolla__apri:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.fiore-bolla__icona { display: block; flex: 0 0 auto; }
.fiore-bolla__etichetta { display: none; font: 400 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

/* Su computer, al passaggio, il cerchio si allunga in una pillola con l'etichetta. */
@media (min-width: 782px) and (hover: hover) {
	.fiore-bolla__apri:hover .fiore-bolla__etichetta, .fiore-bolla__apri:focus-visible .fiore-bolla__etichetta { display: inline; }
	.fiore-bolla__apri:hover, .fiore-bolla__apri:focus-visible { padding: 0 20px 0 16px; gap: 10px; }
}

/* Il pannello: una carta bianca con il bordo nero, sopra il bottone. */
.fiore-bolla__pannello {
	width: min(360px, calc(100vw - 32px));
	background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
	transform-origin: bottom right;
}
.fiore-bolla__pannello[hidden] { display: none; }
.fiore-bolla__pannello.is-aperto { animation: fiore-bolla-entra .18s ease-out; }
@keyframes fiore-bolla-entra { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

.fiore-bolla__testa { position: relative; padding: 18px 52px 14px 20px; border-bottom: 1px solid var(--wp--preset--color--ink); }
.fiore-bolla__sopra { margin: 0 0 6px; font: 400 11px/1 var(--wp--preset--font-family--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.fiore-bolla__titolo { margin: 0; font: 400 22px/1.15 var(--wp--preset--font-family--serif); color: var(--wp--preset--color--ink); }
.fiore-bolla__titolo span { color: var(--wp--preset--color--muted); }
.fiore-bolla__chiudi {
	position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
	background: none; border: 0; cursor: pointer; font-size: 28px; line-height: 1; color: var(--wp--preset--color--ink);
}
.fiore-bolla__chiudi:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: -4px; }

.fiore-bolla__strade { list-style: none; margin: 0; padding: 0; }
.fiore-bolla__strade li + li { border-top: 1px solid var(--wp--preset--color--line); }
.fiore-bolla__strade a {
	display: grid; gap: 3px; padding: 14px 20px; min-height: 60px;
	color: inherit; text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.fiore-bolla__strade strong { font: 400 17px/1.25 var(--wp--preset--font-family--serif); }
.fiore-bolla__strade span { font-size: 13px; line-height: 1.4; color: var(--wp--preset--color--muted); }
.fiore-bolla__strade a:hover, .fiore-bolla__strade a:focus-visible { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); outline: none; }
.fiore-bolla__strade a:hover span, .fiore-bolla__strade a:focus-visible span { color: var(--wp--custom--on-dark--body, rgba(255, 255, 255, .72)); }

.fiore-bolla__altro {
	display: block; padding: 12px 20px 14px; border-top: 1px solid var(--wp--preset--color--ink);
	font: 400 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--ink); text-decoration: none;
}
.fiore-bolla__altro:hover, .fiore-bolla__altro:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 480px) {
	.fiore-bolla { right: 12px; }
	.fiore-bolla__pannello { width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
	.fiore-bolla, .fiore-bolla.is-visibile, .fiore-bolla__apri { transition: none; }
	.fiore-bolla__pannello.is-aperto { animation: none; }
}

@media print { .fiore-bolla { display: none; } }