/* BLACKLUX BOOKING CALCULATOR — RITOCCHI PER IL TELEFONO (0.9.194)
 *
 * [stated] "il prezzo scontato e al limite non si vede bene, sempre da cellulare".
 *
 * COM ERA. Nel foglio principale, sotto i 780 px, la riga del prezzo diventa
 * larga quanto la scheda e viene spinta tutta a destra:
 *     .blx-price{grid-column:1/-1; display:flex; justify-content:flex-end}
 * Cosi prezzo vecchio sbarrato, prezzo nuovo e pulsante finiscono uno accanto
 * all altro, schiacciati contro il bordo. Il prezzo vecchio, per giunta, e
 * scritto in grigio chiarissimo (#8da0a7) con la riga sopra: piccolo, sbiadito
 * e attaccato al bordo, quindi si legge male o resta tagliato.
 *
 * COM E ADESSO. Sul telefono la riga del prezzo va a capo quando serve, ha
 * dello spazio fra le voci e non tocca piu il bordo. Il prezzo vecchio resta
 * sbarrato ma si legge: colore piu deciso e corpo leggermente piu grande.
 * Il prezzo nuovo resta quello in evidenza, come deve essere.
 *
 * PERCHE UN FILE A PARTE. Il foglio del calcolatore e minificato su una riga
 * sola: metterci le mani vuol dire rischiare di rompere qualcosa che funziona.
 * Questo file si carica DOPO e ritocca solo cio che serve. Per tornare indietro
 * basta toglierlo.
 */

@media (max-width: 780px) {

	/* La colonna del prezzo respira: puo andare a capo, ha spazio fra le voci
	   e un margine dal bordo della scheda. */
	.blx-booking .blx-price {
		flex-wrap: wrap !important;
		align-items: baseline !important;
		justify-content: flex-end !important;
		gap: 6px 12px !important;
		padding-right: 2px !important;
		max-width: 100% !important;
	}

	/* Il prezzo vecchio: sbarrato, ma leggibile. Prima era #8da0a7, quasi
	   invisibile su fondo bianco a quel corpo. */
	.blx-booking .blx-price del {
		display: inline-block !important;
		color: #6b8089 !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		text-decoration-thickness: 1.5px !important;
		opacity: 1 !important;
		flex: 0 0 auto !important;
	}

	/* Il prezzo vero resta il protagonista e non va mai a capo a meta. */
	.blx-booking .blx-price strong {
		display: inline-block !important;
		font-size: 21px !important;
		line-height: 1.2 !important;
		flex: 0 0 auto !important;
	}

	/* Il pulsante Scegli va sulla sua riga, largo e comodo da premere: prima
	   stava in fila con i due prezzi e li stringeva contro il bordo. */
	.blx-booking .blx-price button {
		flex: 1 0 100% !important;
		margin-top: 10px !important;
		padding: 13px 15px !important;
		min-height: 46px !important;
	}
}

/* Sotto i 400 px (telefoni stretti) i due prezzi stanno uno sopra l altro,
   allineati a destra: e l unico modo perche nessuno dei due venga tagliato. */
@media (max-width: 400px) {
	.blx-booking .blx-price {
		justify-content: flex-end !important;
		text-align: right !important;
	}
	.blx-booking .blx-price del,
	.blx-booking .blx-price strong {
		flex: 1 0 100% !important;
		text-align: right !important;
	}
	.blx-booking .blx-price del { margin-bottom: 2px !important; }
}