/* PWA — installatiecomponent en startpagina's. Gebruikt de bestaande thema-variabelen (licht/donker). */
.pwa-install[hidden], .pwa-install__nojs { display: none; }
.pwa-install:not([hidden]) { display: block; }
noscript .pwa-install__nojs { display: block; margin: 8px 0; font-size: .85rem; }

.pwa-install__btn {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
    padding: 8px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
    background: var(--surface, #fff); color: var(--text, #1a1a1a);
    font: inherit; text-align: left; cursor: pointer;
}
.pwa-install__btn:hover { border-color: var(--primary, #1E5A50); }
.pwa-install__btn:focus-visible, .pwa-dialog__close:focus-visible { outline: 2px solid var(--primary, #1E5A50); outline-offset: 2px; }
.pwa-install__icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--primary, #1E5A50); }
.pwa-install__text { display: flex; flex-direction: column; min-width: 0; }
.pwa-install__title { font-weight: 600; font-size: .9rem; }
.pwa-install__sub { font-size: .75rem; color: var(--text-light, #666); }
.pwa-install--sidebar { margin-bottom: 10px; }
/* Inlogschermen. Voldoende hoog scherm: vaste balk onderaan met gereserveerde ruimte (klasse pwa-has-bar, gezet door pwa.js
   zolang de ingang zichtbaar is) zodat geen veld of link bedekt wordt. Laag scherm (korte viewport, bv. 320x360): de balk staat
   gewoon ná de inlogkaart in de paginastroom en bedekt dus nooit iets. Standalone/verborgen ingang: geen balk, geen extra ruimte. */
.pwa-install--auth { max-width: 420px; margin: 0 auto; padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.pwa-install--auth .pwa-install__btn { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
@media (min-height: 561px) {
    .pwa-install--auth { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding-top: 0; }
    html.pwa-has-bar .auth-wrapper,
    html.pwa-has-bar .portal-auth-wrapper { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

.pwa-dialog {
    margin: auto; inset: 0; /* de globale reset (* { margin: 0 }) haalt anders de centrering weg */
    width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
    padding: 18px 20px; border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
    background: var(--surface, #fff); color: var(--text, #1a1a1a);
}
.pwa-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.pwa-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pwa-dialog__head h2 { margin: 0; font-size: 1.15rem; }
.pwa-dialog__close { min-width: 44px; min-height: 44px; border: 0; background: none; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.pwa-dialog__lead { margin: 4px 0 12px; color: var(--text-light, #666); font-size: .9rem; }
.pwa-dialog__foot { margin-top: 14px; text-align: right; }
.pwa-panel h3 { margin: 12px 0 6px; font-size: .95rem; }
.pwa-panel ol { margin: 0 0 0 20px; padding: 0; }
.pwa-panel li, .pwa-panel p { margin: 4px 0; font-size: .9rem; line-height: 1.45; }
.pwa-panel[hidden] { display: none; }

.pwa-page { text-align: left; }
.pwa-page .auth-title { text-align: center; }
.pwa-page__lead { text-align: center; color: var(--text-light, #666); font-size: .9rem; margin: 0 0 12px; }
.pwa-page__actions { margin-top: 16px; text-align: center; }
.pwa-choice { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.pwa-choice__btn { display: flex; align-items: center; justify-content: center; min-height: 52px; text-decoration: none; }

/* Logo op de PWA-pagina's (start/installeren): nooit breder dan de kaart, verhouding behouden */
.pwa-page .auth-logo { max-width: 100%; height: auto; object-fit: contain; }