/* Licata in Comune 2.5.2 — onboarding PWA aderente al viewport visibile su mobile */
.pwa-onboarding-overlay,
.pwa-onboarding-overlay *,
.pwa-onboarding-overlay *::before,
.pwa-onboarding-overlay *::after{box-sizing:border-box}
.pwa-onboarding-overlay{
    position:fixed;
    left:var(--pwa-viewport-offset-left,0px);
    right:auto;
    top:var(--pwa-viewport-offset-top,0px);
    width:var(--pwa-viewport-width,100vw);
    max-width:var(--pwa-viewport-width,100vw);
    height:var(--pwa-viewport-height,100dvh);
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:12px;
    background:rgba(2,23,42,.62);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px)
}
.pwa-onboarding-overlay[hidden]{display:none!important}
.pwa-onboarding-card{
    position:relative;
    width:min(440px,calc(100% - 2px));
    min-width:0;
    max-width:calc(100% - 2px);
    max-height:calc(var(--pwa-viewport-height,100dvh) - 24px);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    border:1px solid rgba(255,255,255,.72);
    border-radius:22px;
    padding:18px 18px 12px;
    background:#fff;
    box-shadow:0 24px 70px rgba(0,29,55,.32);
    color:#07395f;
    text-align:left;
    scrollbar-width:thin
}
.pwa-onboarding-close{
    position:absolute;
    top:9px;
    right:9px;
    z-index:4;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#eef4f8;
    color:#244c69;
    font-size:1.25rem;
    line-height:1;
    cursor:pointer
}
.pwa-onboarding-icon{
    display:block;
    width:56px;
    height:56px;
    margin:0 0 9px;
    border-radius:16px;
    box-shadow:0 8px 22px rgba(0,82,150,.18)
}
.pwa-onboarding-kicker{
    display:block;
    margin:0 42px 4px 0;
    color:#0872c9;
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.07em;
    text-transform:uppercase
}
.pwa-onboarding-card h2{
    margin:0 40px 7px 0;
    color:#063b68;
    font-size:clamp(1.28rem,5.1vw,1.75rem);
    line-height:1.08
}
.pwa-onboarding-card>p{
    margin:0 0 9px;
    color:#50677a;
    font-size:.9rem;
    line-height:1.38
}
.pwa-onboarding-benefits{
    display:grid;
    gap:5px;
    margin:9px 0 10px;
    padding:0;
    list-style:none
}
.pwa-onboarding-benefits li{
    position:relative;
    min-height:20px;
    padding-left:27px;
    color:#183f5e;
    font-size:.87rem;
    font-weight:700;
    line-height:1.28
}
.pwa-onboarding-benefits li::before{
    content:'✓';
    position:absolute;
    left:0;
    top:-1px;
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#dff6eb;
    color:#08764c;
    font-size:.72rem;
    font-weight:900
}
.pwa-onboarding-actions{
    position:sticky;
    bottom:-1px;
    z-index:3;
    display:grid;
    gap:3px;
    margin:0 -4px;
    padding:7px 4px max(3px,env(safe-area-inset-bottom));
    background:linear-gradient(to bottom,rgba(255,255,255,.88),#fff 18px)
}
.pwa-onboarding-actions .btn{
    width:100%;
    min-height:46px;
    margin:0;
    border-radius:12px;
    font-size:.96rem
}
.pwa-onboarding-actions .pwa-later{
    min-height:32px;
    border:0;
    background:transparent;
    color:#526a7c;
    font:inherit;
    font-size:.86rem;
    font-weight:750;
    cursor:pointer
}
.pwa-onboarding-help{
    margin:7px 0 0;
    padding:9px 11px;
    border-radius:10px;
    background:#eef7ff;
    color:#234f70;
    font-size:.82rem;
    line-height:1.35
}
.pwa-onboarding-status{
    min-height:18px;
    margin:6px 0 0!important;
    color:#4e687c;
    font-size:.84rem!important;
    font-weight:650
}
.pwa-onboarding-status.is-error{color:#a72424}
.pwa-onboarding-status.is-success{color:#08764c}
body.pwa-onboarding-open{overflow:hidden;touch-action:none}
html:has(body.pwa-onboarding-open){overflow:hidden}
.pwa-onboarding-card,
.pwa-onboarding-card>*{min-width:0;max-width:100%}
.pwa-onboarding-card h2,
.pwa-onboarding-card p,
.pwa-onboarding-benefits li{overflow-wrap:anywhere}

@media (max-width:520px){
    .pwa-onboarding-overlay{
        align-items:flex-end;
        padding:8px 8px max(8px,env(safe-area-inset-bottom))
    }
    .pwa-onboarding-card{
        width:calc(100% - 2px);
        min-width:0;
        max-width:420px;
        max-height:calc(var(--pwa-viewport-height,100dvh) - 16px - env(safe-area-inset-bottom));
        padding:15px 14px 8px;
        border-radius:20px 20px 12px 12px
    }
}

@media (max-height:720px){
    .pwa-onboarding-card{padding-top:12px}
    .pwa-onboarding-icon{width:48px;height:48px;margin-bottom:6px;border-radius:14px}
    .pwa-onboarding-kicker{font-size:.62rem}
    .pwa-onboarding-card h2{font-size:1.28rem;margin-bottom:5px}
    .pwa-onboarding-card>p{font-size:.82rem;margin-bottom:6px}
    .pwa-onboarding-benefits{margin:6px 0 7px;gap:3px}
    .pwa-onboarding-benefits li{font-size:.8rem;min-height:18px;padding-left:24px}
    .pwa-onboarding-benefits li::before{width:18px;height:18px}
    .pwa-onboarding-actions .btn{min-height:43px}
}

@media (max-height:560px){
    .pwa-install-card .pwa-onboarding-benefits li:last-child,
    .pwa-push-card .pwa-onboarding-benefits li:last-child{display:none}
    .pwa-onboarding-card>p{display:none}
}