/* The "add to home screen" card (Pages/Shared/_InstallPrompt.cshtml,
   js/install-prompt.js) — shared by /manager, /admin and the shops' /order and
   /booking apps. It borrows each site's own colours: the order app's tokens
   (order.css) first, then Tabler's (the portals), then the system's. Logical
   properties only, so Arabic mirrors on its own. */

.install-prompt {
    --ip-surface: var(--surface, var(--tblr-bg-surface, Canvas));
    --ip-text: var(--text, var(--tblr-body-color, CanvasText));
    --ip-muted: var(--muted, var(--tblr-secondary, GrayText));
    --ip-line: var(--line, var(--tblr-border-color, GrayText));
    --ip-accent: var(--accent, var(--tblr-primary, #389dcb));
    --ip-accent-text: var(--accent-text, var(--tblr-primary-fg, #ffffff));
    /* The accent as a line or icon on the card: deep enough to read on it. */
    --ip-ink: var(--accent-ink, var(--tblr-primary, #1f6f94));

    position: fixed;
    z-index: 1040;
    inset-inline: max(12px, env(safe-area-inset-left));
    /* Above the order app's bottom tabs (--tabs-h, 0 elsewhere). */
    inset-block-end: calc(var(--tabs-h, 0px) + 12px + env(safe-area-inset-bottom));
    max-inline-size: 480px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 14px;
    align-items: start;
    padding: 16px;
    background: var(--ip-surface);
    color: var(--ip-text);
    border: 1px solid var(--ip-line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgb(0 0 0 / .18);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .2s ease, transform .2s ease;
}
.install-prompt.is-open { opacity: 1; transform: none; }
/* Never over the order app's cart bar (58px) or the booking's sticky bar: the card
   sits above them, so a customer adding products keeps their cart in reach. */
body:has(.order-cartbar:not([hidden])) .install-prompt {
    inset-block-end: calc(var(--tabs-h, 0px) + 84px + env(safe-area-inset-bottom));
}
body:has(.book-bar) .install-prompt {
    inset-block-end: calc(var(--tabs-h, 0px) + 96px + env(safe-area-inset-bottom));
}
.install-prompt[hidden] { display: none; }

.install-prompt-icon { border-radius: 12px; inline-size: 48px; block-size: 48px; }
.install-prompt-text strong { display: block; font-size: 1rem; line-height: 1.3; }
.install-prompt-text p { margin: 4px 0 0; color: var(--ip-muted); font-size: .9rem; line-height: 1.45; }
.install-prompt-share { vertical-align: -4px; margin-inline: 2px; color: var(--ip-ink); }

.install-prompt-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
}
/* Same size, the action at the end (house dialog footer rule). */
.install-prompt-actions button {
    flex: 1 1 0;
    min-block-size: 48px;
    padding: 0 16px;
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.install-prompt-later {
    background: transparent;
    color: var(--ip-text);
    border: 1px solid var(--ip-line);
}
.install-prompt-add {
    background: var(--ip-accent);
    color: var(--ip-accent-text);
    border: 1px solid var(--ip-accent);
}
.install-prompt-add:disabled { opacity: .6; }
.install-prompt button:focus-visible { outline: 2px solid var(--ip-ink); outline-offset: 2px; }

/* One wording at a time. */
.install-prompt[data-mode="ios"] [data-install-android],
.install-prompt[data-mode="android"] [data-install-ios] { display: none; }

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