/**
 * Hinweis "App installieren" - Verwaltung und Nutzerportal
 * Baustein: shared/views/components/pwa-install.php (Verwaltung: Stil ueber
 * pwa-head.php; Nutzerportal: layouts/public.php, Farben des Mandanten in
 * public-portal.css)
 * Path: /public/assets/css/portal/pwa-install.css
 */

/* Versteckte Hinweise belegen keinen Platz - die Huelle hat selbst keinen
   Abstand, nur ein sichtbarer Hinweis. */
.pwa-install-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 1rem;
}

.pwa-install-banner-ios {
    align-items: flex-start;
}

.pwa-install-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.pwa-install-banner-ios .pwa-install-text {
    align-items: flex-start;
    gap: 15px;
}

.pwa-install-icon {
    font-size: 1.5rem;
}

.pwa-install-banner-ios .pwa-install-icon {
    font-size: 2rem;
    margin-top: 5px;
}

.pwa-install-banner-ios ol {
    padding-left: 20px;
}

/* In der Uebersicht steht der Hinweis oben im Inhalt - dort kein Abstand nach oben */
.dashboard-container > .pwa-install .pwa-install-banner {
    margin-top: 0;
}

@media (max-width: 575.98px) {
    .pwa-install-banner {
        flex-wrap: wrap;
    }
}