/* ============================================================
   Raccordo tra la grafica di Cartomanzia Italia (/style.css) e l'app di ricarica (app.css).
   Caricato per ultimo da tema/head.php, solo sulle pagine pubbliche della ricarica.
   Testata, menu e piè di pagina restano quelli del sito: qui si sistema solo il riquadro dell'app.
   ============================================================ */

/* L'app sta dentro la colonna dei contenuti del sito: niente margini e larghezze proprie */
.tema-sito main.app-main { flex: none; padding: 0; width: 100%; }
.tema-sito .app-main .container { width: 100%; max-width: none; margin: 0; }

/* Carattere e colore del testo come nel resto del sito; dimensioni dell'app (il sito usa testi molto grandi) */
.tema-sito .app-main { font-family: inherit; font-size: 16px; line-height: 1.55; color: var(--color1, #1f1f1f); text-align: left; }
.tema-sito .app-main h1, .tema-sito .app-main h2, .tema-sito .app-main h3 { font-family: inherit; font-weight: bold; color: var(--color1, #1f1f1f); }
.tema-sito .app-main h1 { text-align: center; }
.tema-sito .app-main h2, .tema-sito .app-main h3 { text-align: left; }

/* Il sito imposta i paragrafi a 1.5rem senza margini: dentro l'app tornano normali.
   :where() tiene bassa la priorità, così valgono ancora le regole più precise di app.css (p.lead, .note, .help...). */
:where(.app-main) p { font-size: 1rem; margin: 0 0 1em; }
:where(.app-main) p:last-child { margin-bottom: 0; }
.tema-sito .app-main p.lead { margin-top: 0; text-align: center; }

/* Riquadro: un po' più largo e con meno spazio attorno sugli schermi piccoli */
.tema-sito .app-main .narrow { max-width: 560px; }
.tema-sito .app-main .card { border-color: var(--color5, #ddd); }
@media screen and (max-width: 600px) {
    .tema-sito .app-main .card { padding: 20px 16px; border-radius: 14px; }
    .tema-sito .app-main .opt { padding: 12px; }
}

/* Pacchetti su una riga sola (minuti a sinistra, prezzo a destra): con cinque tagli la pagina resta corta */
.tema-sito .app-main label.opt { display: flex; margin: 0; font-size: 1rem; font-weight: normal; }
.tema-sito .app-main .opts { gap: 12px; margin-top: 14px; }

/* Casella del consenso ben visibile e facile da toccare */
.tema-sito .app-main input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--plum); }