/*
 * site-runtime.css — the two overlays site-runtime.js builds.
 * ---------------------------------------------------------------------------
 * The notification prompt and the offline notice used to be assembled with
 * `element.style.cssText = '…'` inside fastkart's master.html, with the shop's
 * colours (#3b82f6, #3dcfff) and font (IRANSans) written into the JavaScript.
 * That put two visible dialogs outside the theme system entirely: an owner who
 * changed the accent colour in the panel saw every part of the site follow
 * except these.
 *
 * They are ordinary themed surfaces now. Everything below resolves through the
 * `--theme-*` layer, so all four themes dress them in their own identity, and
 * a theme that wants something different only has to restate these selectors
 * in its own theme-design.css.
 */

.site-runtime-prompt,
.site-runtime-offline {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

/* ── the notification prompt ─────────────────────────────────────────────── */

.site-runtime-prompt {
    background: rgba(0, 0, 0, 0.6);
    padding: var(--ds-space-3, 16px);
}

.site-runtime-prompt__card {
    max-width: 420px;
    width: 100%;
    padding: var(--ds-space-5, 40px) var(--ds-space-4, 24px);
    text-align: center;
    background: var(--theme-surface, #fff);
    color: var(--theme-ink, #1e293b);
    border-radius: var(--theme-radius, 16px);
    box-shadow: var(--theme-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.2));
}

.site-runtime-prompt__title {
    margin: 0 0 var(--ds-space-3, 16px);
    font-size: var(--ds-text-2xl, 1.6rem);
    line-height: var(--ds-leading-tight, 1.25);
    color: inherit;
}

.site-runtime-prompt__body {
    margin: 0 0 var(--ds-space-4, 24px);
    font-size: var(--ds-text-lg, 1.1rem);
    line-height: var(--ds-leading-normal, 1.6);
    color: var(--theme-ink-muted, #475569);
}

.site-runtime-prompt__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3, 16px);
    justify-content: center;
}

.site-runtime-prompt__accept,
.site-runtime-prompt__dismiss,
.site-runtime-offline__retry {
    padding: var(--ds-space-2, 12px) var(--ds-space-5, 32px);
    font: inherit;
    font-size: var(--ds-text-lg, 1.1rem);
    /* A pill is this dialog's own shape decision, not a theme token — there is
       no `--theme-radius-pill`, and asking `--theme-radius` for it would give
       a 12px rectangle. */
    border-radius: 999px;
    cursor: pointer;
    transition: opacity var(--ds-fast, 120ms) var(--ds-ease, ease);
}

.site-runtime-prompt__accept:hover,
.site-runtime-prompt__dismiss:hover,
.site-runtime-offline__retry:hover { opacity: 0.85; }

.site-runtime-prompt__accept,
.site-runtime-offline__retry {
    font-weight: 700;
    border: none;
    /* The label sits on the accent, so it takes the surface colour — the same
       pairing `.ds-button` uses in foundation.css. */
    color: var(--theme-surface, #fff);
    background: var(--theme-accent, #3b82f6);
}

.site-runtime-prompt__dismiss {
    background: transparent;
    color: var(--theme-ink-muted, #64748b);
    border: 1px solid var(--theme-line, #cbd5e1);
}

/* ── the offline notice ──────────────────────────────────────────────────── */

.site-runtime-offline {
    flex-direction: column;
    text-align: center;
    padding: var(--ds-space-3, 16px);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.site-runtime-offline__title {
    margin: 0 0 var(--ds-space-3, 16px);
    font-size: var(--ds-text-3xl, 2.5rem);
    line-height: var(--ds-leading-tight, 1.25);
    color: inherit;
}

.site-runtime-offline__body {
    margin: 0 0 var(--ds-space-4, 32px);
    font-size: var(--ds-text-xl, 1.3rem);
    color: inherit;
}

/* ── the install banner — phase D58 ──────────────────────────────────────── */

/*
 * Sits at the bottom on a phone and bottom-inline-start on a wide screen, so
 * it never covers the mobile bar's centre actions or a desktop chat launcher.
 */
.site-runtime-install {
    position: fixed;
    z-index: 9998;
    inset-inline: var(--ds-space-3, 16px);
    inset-block-end: calc(var(--ds-space-3, 16px) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3, 16px);
    padding: var(--ds-space-3, 16px) var(--ds-space-4, 24px);
    background: var(--theme-surface, #fff);
    color: var(--theme-ink, #1e293b);
    border: 1px solid var(--theme-line, #e2e8f0);
    border-radius: var(--theme-radius-lg, 16px);
    box-shadow: var(--theme-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.18));
}

@media (min-width: 768px) {
    .site-runtime-install {
        inset-inline-end: auto;
        max-width: 420px;
    }
}

.site-runtime-install__body {
    flex: 1 1 14rem;
    margin: 0;
    font-size: var(--ds-text-sm, 0.9rem);
    line-height: var(--ds-leading-snug, 1.5);
    color: var(--theme-ink-muted, #475569);
}

.site-runtime-install__actions {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2, 8px);
}

.site-runtime-install__accept,
.site-runtime-install__dismiss {
    font: inherit;
    font-size: var(--ds-text-sm, 0.9rem);
    padding: var(--ds-space-2, 8px) var(--ds-space-3, 16px);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--ds-fast, 120ms) var(--ds-ease, ease);
}

.site-runtime-install__accept:hover,
.site-runtime-install__dismiss:hover { opacity: 0.85; }

.site-runtime-install__accept {
    font-weight: 700;
    border: none;
    color: var(--theme-surface, #fff);
    background: var(--theme-accent, #0da487);
}

.site-runtime-install__dismiss {
    background: transparent;
    border: none;
    color: var(--theme-ink-muted, #64748b);
    text-decoration: underline;
}

/*
 * An installed app has no "install" to offer, and the offline overlay would
 * be redundant over a page the service worker already replaced.
 */
@media (display-mode: standalone) {
    .site-runtime-install { display: none; }
}