/*
 * Popup vaccino antinfluenzale — tutto ciò che lo stile in linea di popup.html
 * non può dire da solo. Il resto della grafica sta nel markup, preso dal design.
 */

/* Dal <helmet> del design, verbatim: i nomi sono richiamati dagli stili in linea. */
@keyframes pvFade{from{opacity:0}to{opacity:1}}
@keyframes pvUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* La base che nel canvas il popup eredita: carattere e colore dal contenitore della pagina
   del design, il resto da colors_and_type.css (html, body del design system). Sul sito
   erediterebbe quella del tema: 17px, grigio, un'altra interlinea. */
.grpv { font-family: 'Raleway', -apple-system, sans-serif; color: #0F2A3A; font-size: 16px; line-height: 1.5; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Dal <helmet> del design (*, a, a:hover), ristretti al popup: sul sito varrebbero ovunque. */
.grpv, .grpv * { box-sizing: border-box; }
.grpv a { color: #0087BD; text-decoration: none; }
.grpv a:hover { color: #014D6B; }

/* style-hover del design. Lo stile in linea batte qualunque selettore: serve !important. */
.grpv .grpv-hover-chiudi:hover { background: #E6F0F7 !important; }
.grpv .grpv-hover-cta:hover { background: #014D6B !important; color: #fff !important; }

/* Difese dal tema Hub, che dà carattere, maiuscole e spaziature proprie a titoli e pulsanti. */
.grpv h2, .grpv p, .grpv button, .grpv a { font-family: inherit; text-transform: none; }

/* Mentre è aperto la pagina sotto non scorre, e i pulsanti che galleggiano spariscono
   (stessa regola della modale di prenotazione e dell'assistente). */
body.grpv-aperto { overflow: hidden; }
body.grpv-aperto .gr-maps-circle,
body.grpv-aperto .gr-whatsapp-circle,
body.grpv-aperto .lqd-stickybar-wrap,
body.grpv-aperto #grm-launcher { display: none !important; }

/*
 * Telefono: la variante "Verticale" del design (prop `layout`), con i valori di
 * renderVals(). Sotto i 660px la "Affiancato" va a capo e la foto resta larga
 * 260px con un vuoto accanto: è il punto in cui il design stesso passa all'altra.
 */
@media (max-width: 659px) {
	.grpv .grpv-card { max-width: 500px !important; flex-direction: column !important; flex-wrap: nowrap !important; }
	.grpv .grpv-foto { flex: 0 1 auto !important; min-width: auto !important; min-height: auto !important; height: 220px !important; }
	/* La X si appoggia all'angolo della foto: sopra il testo copriva la fine del titolo. */
	.grpv .grpv-testo { position: static !important; }
}