/* ============================================================
   DiTurno — pwa.css
   Pulsante «Installa l'app», riquadro d'invito al telefono e
   riquadro con i passi (iPhone, browser dei social).
   Caricato da includes/pwa_head.php in tutte le pagine: vale sia
   con app.css sia con accesso.css, quindi ogni valore ha la sua
   riserva se la variabile non c'è. Sistema di DESIGN.md.
   ============================================================ */

[data-pwa-installa][hidden],
[data-pwa-invito][hidden] { display: none !important; }

.pwa-ico { width: 16px; height: 16px; flex-shrink: 0; display: block; }

/* ── Pulsante nella barra laterale (fondo, sopra l'utente) ── */
.sb-pwa { padding: 0 10px 10px; flex-shrink: 0; }
.pwa-installa {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 44px; padding: 10px 14px;
    border-radius: var(--rx, 7px);
    border: 1px solid rgba(29,158,117,.32);
    background: var(--teal-d, rgba(29,158,117,.12));
    color: #3cc496;
    font-family: var(--font, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 13px; font-weight: 700; letter-spacing: .1px; cursor: pointer;
    transition: background-color var(--ease, .18s cubic-bezier(.4,0,.2,1)),
                border-color var(--ease, .18s cubic-bezier(.4,0,.2,1)),
                color var(--ease, .18s cubic-bezier(.4,0,.2,1));
}
.pwa-installa:hover { background: rgba(29,158,117,.2); border-color: rgba(29,158,117,.5); color: #6fdcb5; }
.pwa-installa:focus-visible { outline: 2px solid var(--teal, #1D9E75); outline-offset: 2px; }
.pwa-installa svg { width: 15px; height: 15px; }

/* ── Riquadro d'invito in cima al contenuto (solo telefono e tablet) ── */
.pwa-invito {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; align-items: center;
    column-gap: 12px; row-gap: 12px;
    padding: 12px 8px 14px 14px; border-radius: var(--rs, 10px);
    background: linear-gradient(135deg, rgba(29,158,117,.16), rgba(55,138,221,.06));
    border: 1px solid rgba(29,158,117,.28);
    animation: pwa-entra .35s cubic-bezier(.16,1,.3,1) both;
}
.pwa-invito-icona { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; }
.pwa-invito-icona img { width: 40px; height: 40px; display: block; }
.pwa-invito-testo { min-width: 0; }
.pwa-invito-testo strong { display: block; font-size: 14px; font-weight: 700; color: var(--tx, #f0f4ff); line-height: 1.35; }
.pwa-invito-testo span   { display: block; font-size: 13px; color: rgba(240,244,255,.72); line-height: 1.4; margin-top: 2px; }
.pwa-invito-chiudi {
    width: 44px; height: 44px; border-radius: 8px; border: none; background: transparent;
    color: rgba(240,244,255,.72); cursor: pointer;
    display: flex; align-items: center; justify-content: center; align-self: start;
    transition: background-color .18s, color .18s;
}
.pwa-invito-chiudi:hover { background: rgba(255,255,255,.07); color: var(--tx, #f0f4ff); }
.pwa-invito-chiudi:focus-visible { outline: 2px solid var(--teal, #1D9E75); outline-offset: 2px; }
.pwa-invito .pwa-installa {
    grid-column: 1 / -1; margin-right: 6px; width: auto;
    background: linear-gradient(135deg, #13805f, #0d7a5a); border: none; color: #fff;
    box-shadow: 0 0 20px var(--teal-g, rgba(29,158,117,.35)); font-size: 14px;
}
.pwa-invito .pwa-installa:hover { color: #fff; opacity: .92; }
@media (min-width: 769px) { .pwa-invito { display: none !important; } }
@keyframes pwa-entra { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Riquadro con i passi ─────────────────────────────── */
html.pwa-bloccato, html.pwa-bloccato body { overflow: hidden; }

.pwa-dialogo {
    border: none; padding: 0; margin: auto; background: transparent; color: var(--tx, #f0f4ff);
    width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
    overflow: visible;
    font-family: var(--font, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.pwa-dialogo:not([open]) { display: none; }
.pwa-dialogo::backdrop { background: rgba(0,0,0,.65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Riserva per i browser senza showModal */
.pwa-dialogo--aperto {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    width: 100%; max-height: none; background: rgba(0,0,0,.65);
}
.pwa-dialogo-scheda {
    background: #0f1829; border: 1px solid var(--gb2, rgba(255,255,255,.15)); border-radius: 16px;
    padding: 22px; max-height: calc(100dvh - 32px); overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    animation: pwa-sale .28s cubic-bezier(.16,1,.3,1) both;
}
.pwa-dialogo--aperto .pwa-dialogo-scheda { width: min(440px, calc(100vw - 32px)); }
@keyframes pwa-sale { from { opacity: .001; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.pwa-dialogo-testa { display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 14px; align-items: start; }
.pwa-dialogo-icona { width: 48px; height: 48px; border-radius: 12px; display: block; box-shadow: 0 0 20px rgba(29,158,117,.3); }
.pwa-dialogo-testa h2 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; line-height: 1.3; text-wrap: balance; }
.pwa-dialogo-testa p  { font-size: 13.5px; color: rgba(240,244,255,.72); margin-top: 4px; line-height: 1.45; text-wrap: pretty; }
.pwa-dialogo-x {
    width: 44px; height: 44px; margin: -10px -10px 0 0; border-radius: 8px; border: none;
    background: transparent; color: rgba(240,244,255,.72); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.pwa-dialogo-x:hover { background: rgba(255,255,255,.07); color: #f0f4ff; }
.pwa-dialogo-x .pwa-ico { width: 18px; height: 18px; }

.pwa-passi {
    list-style: none; margin: 20px 0 0; padding: 0;
    display: flex; flex-direction: column;
    border: 1px solid var(--gb, rgba(255,255,255,.09)); border-radius: 14px; overflow: hidden;
}
.pwa-passi li {
    display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); gap: 12px; align-items: center;
    padding: 14px 14px 14px 12px; background: rgba(255,255,255,.03);
}
.pwa-passi li + li { border-top: 1px solid var(--gb, rgba(255,255,255,.09)); }
.pwa-passo-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--teal-d, rgba(29,158,117,.12)); color: #3cc496;
    font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.pwa-passo-ico {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(55,138,221,.14); color: #8ec0f0;
    display: flex; align-items: center; justify-content: center;
}
.pwa-passo-ico .pwa-ico { width: 20px; height: 20px; }
.pwa-passo-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pwa-passo-titolo { font-size: 14.5px; color: rgba(240,244,255,.85); line-height: 1.35; }
.pwa-passo-titolo strong { color: #f0f4ff; font-weight: 700; }
.pwa-passo-aiuto { font-size: 12.5px; color: rgba(240,244,255,.68); line-height: 1.4; }

.pwa-dialogo-piede { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.pwa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; padding: 12px 20px; border-radius: 10px;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
    transition: opacity .18s, transform .18s, background-color .18s, border-color .18s;
}
.pwa-btn--pieno { background: linear-gradient(135deg, #13805f, #0d7a5a); color: #fff; box-shadow: 0 0 24px rgba(29,158,117,.35); }
.pwa-btn--pieno:hover { opacity: .92; }
.pwa-btn--vetro { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); color: #f0f4ff; }
.pwa-btn--vetro:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.pwa-btn:focus-visible, .pwa-dialogo-x:focus-visible { outline: 2px solid var(--teal, #1D9E75); outline-offset: 2px; }
.pwa-annuncio { min-height: 0; margin-top: 10px; font-size: 13px; color: #86efac; text-align: center; overflow-wrap: anywhere; }
.pwa-annuncio:empty { display: none; }

/* Telefono: il riquadro sale dal fondo, vicino al pollice (e alla barra di Safari) */
@media (max-width: 640px) {
    .pwa-dialogo { width: 100vw; margin: auto 0 0; max-height: 92dvh; }
    .pwa-dialogo-scheda {
        border-radius: 20px 20px 0 0; border-bottom: none; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
        max-height: 92dvh;
    }
    .pwa-dialogo--aperto { align-items: flex-end; }
    .pwa-dialogo--aperto .pwa-dialogo-scheda { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-invito, .pwa-dialogo-scheda { animation: none; }
    .pwa-installa, .pwa-btn, .pwa-invito-chiudi { transition: none; }
}