/* PWA notices shared by the website and the app (Views/Shared/_Pwa.cshtml, js/pwa.js).
   Colours come from the page's tokens (site.css / app.css), so the banner follows the
   light or dark theme; the fallbacks are the light values. */

.pwa-offline {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 200;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
    background: #8a6d1f;
    color: #fff;
    font: 600 0.8rem/1.35 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: center;
}

.pwa-install {
    position: fixed;
    z-index: 150;
    inset-inline: 12px;
    inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
    max-inline-size: 456px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px 12px 12px;
    border-radius: 18px;
    background: var(--color-bg, #fff);
    color: var(--color-ink, #1a1a2e);
    box-shadow: 0 14px 40px rgba(26, 26, 46, 0.22);
    border: 1px solid var(--color-line, #e8e9ef);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.pwa-install.is-in { transform: none; opacity: 1; }
/* Above the app's tab bar, and above the contact bar on the app's listing screen. */
.has-tabs .pwa-install { inset-block-end: calc(76px + env(safe-area-inset-bottom, 0px)); }
body:has(.contact-bar) .pwa-install { inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px)); }

.pwa-install__icon { flex: none; inline-size: 48px; block-size: 48px; border-radius: 12px; border: 1px solid var(--color-line, #e8e9ef); }
.pwa-install__text { flex: 1; min-inline-size: 0; display: grid; gap: 2px; font-size: 0.8rem; line-height: 1.35; color: var(--color-text-muted, #6f6f84); }
.pwa-install__text strong { font-size: 0.9rem; color: var(--color-ink, #1a1a2e); }
.pwa-install__share { display: inline-block; inline-size: 16px; block-size: 16px; vertical-align: -3px; color: #0a84ff; }
.pwa-install__btn {
    flex: none;
    border: 0;
    border-radius: 12px;
    padding: 10px 16px;
    background: #1a1a2e;
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.pwa-install__close {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9a9aac;
    cursor: pointer;
}
.pwa-install__close svg { inline-size: 18px; block-size: 18px; }

@media (prefers-reduced-motion: reduce) {
    .pwa-install { transition: none; }
}

/* A navy button would vanish on the dark banner: gold, like the site's main buttons. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pwa-install__btn { background: #c9a84c; color: #1a1a2e; }
}
:root[data-theme="dark"] .pwa-install__btn { background: #c9a84c; color: #1a1a2e; }

/* Cookie notice for Google Analytics (js/consent.js): a small card at the bottom. */
.consent {
    position: fixed;
    inset-inline: 12px;
    inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 190;
    max-inline-size: 560px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--color-bg, #fff);
    color: var(--color-text, #23233a);
    border: 1px solid var(--color-line, #e8e9ef);
    box-shadow: 0 14px 40px rgba(26, 26, 46, 0.22);
    font: 0.85rem/1.45 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.consent__text { flex: 1 1 260px; margin: 0; }
.consent__text a { color: inherit; }
.consent__actions { display: flex; gap: 8px; margin-inline-start: auto; }
.consent__btn {
    border: 1px solid var(--color-line, #e8e9ef);
    border-radius: 10px;
    padding: 9px 16px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.consent__btn--primary { background: #1a1a2e; border-color: #1a1a2e; color: #fff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .consent__btn--primary { background: #c9a84c; border-color: #c9a84c; color: #1a1a2e; }
}
:root[data-theme="dark"] .consent__btn--primary { background: #c9a84c; border-color: #c9a84c; color: #1a1a2e; }