/* sacchetto.css — «Il tuo sacchetto magico» (erbe.love/sacchetto). Usa le variabili di em2026.css. */

.sac-testa .sac-cielo-oggi { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px;
  border: 1px solid #e6c58955; border-radius: 999px; color: var(--moonlight); font-size: 14px; }
.sac-testa .sac-cielo-oggi img { width: 28px; height: 28px; }

.sac-pagina { padding: 56px 0 90px; }
.sac-modulo { display: grid; gap: 22px; }

.sac-passo { display: grid; grid-template-columns: 54px 1fr; gap: 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-soft); }
.sac-numero { margin: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-size: 22px; color: var(--paper); background: var(--ink); }
.sac-passo h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 4px 0 18px; }
.sac-passo h2 em { color: var(--gold); }

.sac-intenti { display: grid; gap: 18px; }
.sac-gruppo { border: 0; padding: 0; margin: 0; }
.sac-gruppo legend, .sac-scelta legend { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep);
  font-weight: 700; margin-bottom: 10px; padding: 0; }
.sac-scelta legend small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.sac-gruppo { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.sac-gruppo legend { grid-column: 1 / -1; }

.sac-intento { position: relative; cursor: pointer; }
.sac-intento input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sac-intento span { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); transition: border-color .2s, background .2s, box-shadow .2s; }
.sac-intento strong { display: block; font-family: var(--serif); font-size: 18px; color: var(--ink); font-weight: 600; }
.sac-intento small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.sac-intento:hover span { border-color: var(--gold); }
.sac-intento input:checked + span { border-color: var(--ink); background: var(--sage); box-shadow: inset 0 0 0 1px var(--ink); }
.sac-intento input:focus-visible + span, .sac-chip input:focus-visible + span, .sac-spunta input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.sac-da-guida, .sac-invito-guida { margin: -6px 0 18px; padding: 12px 14px; background: var(--lavender); border-radius: var(--radius); font-size: 15px; }
.sac-da-guida span { color: var(--gold-deep); }
.sac-invito-guida a, .sac-da-guida a { color: var(--ink); font-weight: 700; }

.sac-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sac-campo span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 8px; }
.sac-campo input, .sac-campo select, .sac-parola input { width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--paper); color: var(--ink); }

.sac-scelta { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.sac-scelta legend { width: 100%; }
.sac-scelta > div { display: flex; flex-wrap: wrap; gap: 8px; }
.sac-chip { position: relative; cursor: pointer; }
.sac-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sac-chip span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper);
  font-size: 14.5px; color: var(--text); transition: background .2s, border-color .2s; }
.sac-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sac-evita .sac-chip input:checked + span { background: var(--terracotta); border-color: var(--bad); color: var(--bad); text-decoration: line-through; }

/* data di nascita e segno coi simboli (27/10/2026) */
.sac-nascita-tre { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; }
.sac-nascita-nota { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.sac-segni { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sac-segni legend { grid-column: 1 / -1; }
.sac-segno { position: relative; cursor: pointer; }
.sac-segno input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sac-segno span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 9px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--paper); font-size: 12.5px; color: var(--text); transition: background .2s, border-color .2s; }
.sac-segno b { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", "DejaVu Sans", serif; font-weight: 400; font-size: 26px;
  line-height: 1; color: var(--gold-deep); }
.sac-segno input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sac-segno input:checked + span b { color: var(--gold); }
.sac-segno input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 560px) { .sac-segni { grid-template-columns: repeat(4, 1fr); } }

.sac-spunte { display: grid; gap: 8px; margin-bottom: 18px; }
.sac-spunta { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 15.5px; }
.sac-spunta input { width: 18px; height: 18px; accent-color: var(--ink); }

.sac-invia { text-align: center; margin: 6px 0 0; }
.sac-invia .button { font-size: 15px; padding: 17px 26px; }

/* il risultato */
.sac-esito { margin-top: 46px; scroll-margin-top: 20px; }
.sac-ricetta { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.sac-ricetta-testa { position: relative; background: var(--night); color: var(--paper); padding: 34px 34px 30px; }
.sac-ricetta-testa .eyebrow { color: var(--moonlight); margin: 0 0 12px; padding-right: 70px; }
.sac-ricetta-testa h2 { color: var(--paper); font-size: clamp(28px, 3.4vw, 44px); margin: 0; outline: none; }
.sac-ricetta-testa h2 em { color: var(--moonlight); }
.sac-ricetta-testa p:last-child { color: #dedfd2; margin: 10px 0 0; }
.sac-luna { position: absolute; top: 26px; right: 30px; width: 56px; height: 56px; }

.sac-blocco { padding: 26px 34px; border-top: 1px solid var(--line); }
.sac-blocco > .eyebrow { margin: 0 0 12px; }
.sac-due { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.sac-due > div > .eyebrow { margin: 0 0 12px; }
.sac-erbe { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sac-erba { padding: 16px 18px; background: var(--paper); border-left: 3px solid var(--gold); border-radius: var(--radius); }
.sac-ruolo { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.sac-erba h3 { margin: 4px 0 6px; font-size: 24px; color: var(--ink); }
.sac-erba h3 small { font-family: var(--sans); font-size: 14px; color: var(--muted); font-weight: 400; }
.sac-profumo { margin: 0 0 6px; font-size: 15px; color: var(--text); }
.sac-perche { margin: 0; padding-left: 18px; font-size: 15px; color: var(--text); }
.sac-perche li { margin: 2px 0; }
.sac-guida-fuori { margin: 14px 0 0; padding: 12px 14px; background: var(--lavender); border-radius: var(--radius); font-size: 15px; }
.sac-luna-testo p:last-child { font-family: var(--serif); font-size: 19px; color: var(--ink); margin: 0; }

.sac-parola { display: block; max-width: 360px; margin: 6px 0 18px; }
.sac-parola span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 6px; }

.sac-cartellini { display: flex; flex-wrap: wrap; gap: 18px; }
.sac-cartellino { position: relative; width: 250px; min-height: 150px; padding: 22px 18px 16px 40px; background: #fbf6e9;
  border: 1px dashed var(--line-strong); border-radius: 6px 22px 22px 6px; font-size: 14px; color: var(--ink); }
.sac-foro { position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--card); }
.sac-cartellino ul { list-style: none; margin: 0 0 10px; padding: 0; font-family: var(--serif); font-size: 16px; line-height: 1.35; }
.sac-cartellino ul em { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.sac-avviso { margin: 0; font-size: 12px; line-height: 1.35; }
.sac-data { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.sac-retro { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.sac-parola-retro { margin: 0; font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--ink); overflow-wrap: anywhere; }
.sac-guida-retro { margin: 6px 0 0; font-size: 13px; color: var(--gold-deep); letter-spacing: .08em; text-transform: uppercase; }
.sac-fino { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

.sac-attenzioni { margin: 0; padding-left: 18px; font-size: 15px; }
.sac-attenzioni li { margin: 4px 0; }
.sac-rito h3 { margin: 0 0 8px; font-size: 24px; }
.sac-libro-azioni { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sac-presto { font-style: italic; color: var(--muted); }

.sac-azioni { display: flex; flex-wrap: wrap; gap: 12px; padding: 26px 34px 4px; border-top: 1px solid var(--line); margin: 0; }
.sac-condiviso { padding: 8px 34px 0; margin: 0; font-size: 14px; color: var(--ok); overflow-wrap: anywhere; }
.sac-ricetta > .fine-print { padding: 14px 34px 26px; margin: 0; }
.sac-vuoto { padding: 28px; }

/* il disegno del sacchetto e le illustrazioni del Diario (24/10/2026 sera) */
.sac-visuale { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: center; padding: 24px 34px; border-top: 1px solid var(--line); background: var(--paper); }
.sac-visuale-sola { grid-template-columns: 1fr; justify-items: center; }
.sac-tela { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; mix-blend-mode: multiply; }
.sac-ingredienti { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-start; }
.sac-ingredienti figure { margin: 0; width: 120px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sac-ingredienti img { width: 120px; height: 120px; object-fit: contain; mix-blend-mode: multiply; display: block; }
.sac-ingredienti figcaption { font-family: var(--serif); font-size: 16px; color: var(--ink); line-height: 1.2; }
.sac-ingredienti figcaption span { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin: 4px 0 2px; }
.sac-erba { display: flex; gap: 14px; align-items: flex-start; }
.sac-erba-img { width: 84px; height: 84px; object-fit: contain; mix-blend-mode: multiply; flex: 0 0 auto; }
.sac-fonte { font-size: 12.5px; color: var(--muted); font-style: italic; }
.sac-campione { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin: 0 6px -2px 0; border: 1px solid #0002; }
.sac-pietra .sac-erba { background: var(--paper); padding: 16px 18px; border-left: 3px solid var(--gold); border-radius: var(--radius); }
.sac-sapevi { background: var(--lavender); }
.sac-sapevi p { margin: 0 0 6px; font-size: 15.5px; }

/* il passo 4: chiederlo via email (24/10/2026) */
.sac-sotto { margin: -6px 0 16px; font-size: 15px; color: var(--muted); }
.sac-sotto a { color: var(--ink); font-weight: 700; }
.sac-consensi { display: grid; gap: 10px; }
.sac-consenso { align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.sac-consenso input { margin-top: 3px; flex: 0 0 auto; }
.sac-consenso a { color: var(--ink); }
.sac-errore { margin: 0; padding: 12px 16px; border-left: 3px solid var(--bad); background: #f8e6e2; color: var(--bad); border-radius: var(--radius); font-size: 15px; }
.sac-suggerimento { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; }
.sac-conferma-testo { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 0 0 12px; }
.sac-salvato-nota { margin: 0; padding: 12px 34px; background: var(--sage); color: var(--ink); font-size: 15px; }
.sac-salvato-nota a { color: var(--ink); font-weight: 700; }
.sac-salvato + .sac-salvato { margin-top: 34px; }

/* come nasce */
.sac-come { margin-top: 70px; }
.sac-come h2 em { color: var(--gold); }
.sac-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 20px 0; }
.sac-tre h3 { font-size: 21px; margin: 0 0 6px; }
.sac-tre p { margin: 0; font-size: 15.5px; }

@media (max-width: 760px) {
  .sac-pagina { padding: 32px 0 60px; }
  .sac-passo { grid-template-columns: 1fr; padding: 22px 18px; gap: 6px; }
  .sac-numero { width: 34px; height: 34px; font-size: 18px; }
  .sac-gruppo { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sac-intento span { padding: 10px 11px; }
  .sac-intento strong { font-size: 15px; line-height: 1.25; }
  .sac-intento small { font-size: 12.5px; line-height: 1.3; }
  .sac-ricetta-testa { padding: 26px 18px 22px; }
  .sac-luna { top: 20px; right: 16px; width: 40px; height: 40px; }
  .sac-blocco, .sac-azioni { padding-left: 18px; padding-right: 18px; }
  .sac-condiviso, .sac-ricetta > .fine-print { padding-left: 18px; padding-right: 18px; }
  .sac-due, .sac-tre { grid-template-columns: 1fr; gap: 18px; }
  .sac-cartellino { width: 100%; }
  .sac-visuale { grid-template-columns: 1fr; padding: 18px; }
  .sac-ingredienti figure { width: 96px; }
  .sac-ingredienti img { width: 96px; height: 96px; }
}

/* in stampa: solo il sacchetto e il cartellino, da ritagliare */
@media print {
  body.sac-stampa-uno .sac-ricetta:not(.sac-da-stampare), body.sac-stampa-uno .sac-salvato-testa,
  .giardino-menu, .em-pagehead, .sac-giardino-nuovo { display: none !important; }
  body.sac-stampa-uno .sac-salvato { margin: 0 !important; }
  .em-header, .em-footer, .skip, .sac-testa, .sac-modulo, .sac-come, .no-stampa, #em-cookie, .cookie-banner { display: none !important; }
  body { background: #fff; }
  .sac-pagina { padding: 0; width: 100%; }
  .sac-esito { margin: 0; }
  .sac-ricetta { box-shadow: none; border: 0; }
  .sac-ricetta-testa { background: #fff; color: #000; padding: 0 0 12px; border-bottom: 1px solid #999; }
  .sac-ricetta-testa h2, .sac-ricetta-testa h2 em, .sac-ricetta-testa .eyebrow, .sac-ricetta-testa p:last-child { color: #000; }
  .sac-luna { display: none; }
  .sac-blocco { padding: 12px 0; break-inside: avoid; }
  .sac-erba { background: #fff; border-left-color: #000; }
  .sac-parola { display: none; }
  .sac-cartellino { background: #fff; border: 1px dashed #000; }
  .sac-ricetta > .fine-print { padding: 8px 0 0; }
}