/* ═════════════════════════════════════════════════════════════════════
   PWA INSTALL PROMPT — Installation Experience layouts
   Namespace: .pwa-is-*   Variant: .pwa-is--<layout>
   Loaded by storefront/partials/pwa-install-sheet and the admin preview
   (admin/pwa → Install tab). Keys live in App\Support\PwaInstallLayout.

   Tokens: --is-bg  --is-text  --is-accent  --is-radius  (set inline)
           --is-tabbar  height of the mobile tab bar the prompt sits above
           --is-drag    live swipe offset written by the sheet script
═════════════════════════════════════════════════════════════════════ */
.pwa-is {
    --is-tabbar: calc(var(--mob-bn-h, 68px) + env(safe-area-inset-bottom, 0px));
    --is-drag: 0px;
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    pointer-events: none;
    color: var(--is-text);
    font-family: var(--sf-font-body, -apple-system, 'Inter', sans-serif);
}
.pwa-is.is-open { display: block; }
/* Only the panel (and a modal scrim) take pointer events: non-modal layouts
   leave the page underneath fully usable. */
.pwa-is.is-open .pwa-is-panel { pointer-events: auto; }

/* Backdrop / scrim (modal layouts only) */
.pwa-is-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .35s ease;
}
.pwa-is.is-open .pwa-is-backdrop { opacity: 1; }
.pwa-is[data-modal="1"].is-open .pwa-is-backdrop { pointer-events: auto; }
.pwa-is[data-modal="0"] .pwa-is-backdrop { display: none; }

/* Panel */
.pwa-is-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--is-bg);
    border-radius: var(--is-radius) var(--is-radius) 0 0;
    padding: 28px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 40px rgba(0,0,0,.18);
    max-width: 540px;
    margin: 0 auto;
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.32,.72,0,1), opacity .35s ease;
    will-change: transform;
}
.pwa-is.is-open .pwa-is-panel { transform: translateY(var(--is-drag)); }

/* Drag handle */
.pwa-is-handle {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,.15);
    margin: -16px auto 16px;
}

/* Close */
.pwa-is-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,.06);
    border: none;
    color: var(--is-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
}
.pwa-is-close:hover { background: rgba(0,0,0,.1); }

/* Header */
.pwa-is-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    padding-right: 36px;
}
.pwa-is-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--is-accent), color-mix(in srgb, var(--is-accent) 75%, black));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.pwa-is-icon img { width: 100%; height: 100%; object-fit: cover; }
.pwa-is-text { flex: 1; min-width: 0; }
.pwa-is-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 4px;
    line-height: 1.25;
    letter-spacing: -.2px;
    color: var(--is-text);
}
.pwa-is-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--is-text);
    opacity: .7;
    margin: 0;
}

/* Benefits */
.pwa-is-benefits {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pwa-is-benefits[hidden] { display: none; }
.pwa-is-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--is-text);
}
.pwa-is-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--is-accent) 12%, transparent);
    color: var(--is-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Actions */
.pwa-is-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pwa-is-cta {
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), filter .2s, box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
}
.pwa-is-cta--primary {
    background: var(--is-accent);
    color: #fff;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--is-accent) 30%, transparent);
}
.pwa-is-cta--primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.pwa-is-cta--primary:active { transform: scale(.97); }
.pwa-is-cta--ghost {
    background: transparent;
    color: var(--is-text);
    opacity: .75;
}
.pwa-is-cta--ghost:hover { opacity: 1; background: rgba(0,0,0,.04); }

/* Trust indicator */
.pwa-is-trust {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    font-size: 10.5px;
    color: var(--is-text);
    opacity: .55;
    margin: 14px 0 0;
    letter-spacing: .2px;
}
.pwa-is-trust[hidden] { display: none; }

/* ═════════════════════════════════════════════════════════════════════
   LAYOUT VARIANTS
═════════════════════════════════════════════════════════════════════ */

/* ── Bottom Sheet: the base look above (full width, handle, scrim) ── */

/* ── Modern Card: elevated floating card, large centred icon, stacked actions ── */
.pwa-is--card .pwa-is-panel {
    margin: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--is-radius);
    padding: 30px 22px 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.08);
}
.pwa-is--card .pwa-is-backdrop { background: rgba(15,23,42,.38); }
.pwa-is--card .pwa-is-handle { display: none; }
.pwa-is--card .pwa-is-head { flex-direction: column; text-align: center; gap: 14px; padding-right: 0; }
.pwa-is--card .pwa-is-icon { width: 76px; height: 76px; border-radius: 22px; font-size: 30px; box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.pwa-is--card .pwa-is-title { font-size: 19px; }
.pwa-is--card .pwa-is-benefits { align-items: flex-start; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }

/* ── Premium Welcome: centred modal moment with a dark scrim, highest emphasis ── */
.pwa-is--welcome .pwa-is-backdrop {
    background: rgba(8,12,24,.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pwa-is--welcome .pwa-is-panel {
    top: 50%; bottom: auto;
    margin: 0 20px;
    max-width: 420px;
    border-radius: calc(var(--is-radius) + 4px);
    padding: 34px 24px 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
    transform: translateY(-50%) scale(.94);
    opacity: 0;
    transition: transform .5s cubic-bezier(.34,1.3,.64,1), opacity .35s ease;
}
.pwa-is--welcome.is-open .pwa-is-panel { transform: translateY(calc(-50% + var(--is-drag))) scale(1); opacity: 1; }
.pwa-is--welcome .pwa-is-handle { display: none; }
.pwa-is--welcome .pwa-is-head { flex-direction: column; text-align: center; gap: 16px; padding-right: 0; margin-bottom: 22px; }
.pwa-is--welcome .pwa-is-icon {
    width: 84px; height: 84px; border-radius: 26px; font-size: 34px;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--is-accent) 10%, transparent), 0 16px 36px rgba(0,0,0,.25);
}
.pwa-is--welcome .pwa-is-title { font-size: 22px; letter-spacing: -.4px; }
.pwa-is--welcome .pwa-is-body { font-size: 14px; }
.pwa-is--welcome .pwa-is-benefits { align-items: flex-start; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.pwa-is--welcome .pwa-is-cta--primary { padding: 16px 22px; border-radius: 14px; }
@media (min-width: 420px) {
    .pwa-is--welcome .pwa-is-panel { margin: 0 auto; left: 0; right: 0; }
}

/* ── Shared "row" chrome for the compact, non-modal layouts ──
   banner · pill · store · compact: icon | text | CTA in a single row,
   no scrim, no handle, no benefits, no trust, no ghost button. */
.pwa-is--banner .pwa-is-panel,
.pwa-is--pill .pwa-is-panel,
.pwa-is--store .pwa-is-panel,
.pwa-is--compact .pwa-is-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: none;
    margin: 0;
}
.pwa-is--banner .pwa-is-handle,   .pwa-is--banner .pwa-is-benefits,   .pwa-is--banner .pwa-is-trust,   .pwa-is--banner .pwa-is-cta--ghost,
.pwa-is--pill .pwa-is-handle,     .pwa-is--pill .pwa-is-benefits,     .pwa-is--pill .pwa-is-trust,     .pwa-is--pill .pwa-is-cta--ghost,
.pwa-is--store .pwa-is-handle,    .pwa-is--store .pwa-is-benefits,    .pwa-is--store .pwa-is-trust,    .pwa-is--store .pwa-is-cta--ghost,
.pwa-is--compact .pwa-is-handle,  .pwa-is--compact .pwa-is-benefits,  .pwa-is--compact .pwa-is-trust,  .pwa-is--compact .pwa-is-cta--ghost {
    display: none !important;
}
.pwa-is--banner .pwa-is-head,
.pwa-is--pill .pwa-is-head,
.pwa-is--store .pwa-is-head,
.pwa-is--compact .pwa-is-head { flex: 1; min-width: 0; margin: 0; padding: 0; }
.pwa-is--banner .pwa-is-actions,
.pwa-is--pill .pwa-is-actions,
.pwa-is--store .pwa-is-actions,
.pwa-is--compact .pwa-is-actions { flex: 0 0 auto; flex-direction: row; }
.pwa-is--banner .pwa-is-close,
.pwa-is--pill .pwa-is-close,
.pwa-is--store .pwa-is-close,
.pwa-is--compact .pwa-is-close { position: static; order: 10; flex: 0 0 auto; width: 28px; height: 28px; background: transparent; opacity: .55; }
.pwa-is--banner .pwa-is-title,
.pwa-is--pill .pwa-is-title,
.pwa-is--store .pwa-is-title,
.pwa-is--compact .pwa-is-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-is--banner .pwa-is-body,
.pwa-is--compact .pwa-is-body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Banner: compact bar docked directly above the tab bar ── */
.pwa-is--banner .pwa-is-panel {
    bottom: var(--is-tabbar);
    border-radius: 0;
    border-top: 1px solid rgba(0,0,0,.08);
    padding: 10px 12px;
    box-shadow: 0 -6px 24px rgba(0,0,0,.08);
}
.pwa-is--banner .pwa-is-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; box-shadow: none; }
.pwa-is--banner .pwa-is-head { gap: 10px; }
.pwa-is--banner .pwa-is-title { font-size: 13.5px; margin-bottom: 1px; }
.pwa-is--banner .pwa-is-body { font-size: 11.5px; }
.pwa-is--banner .pwa-is-cta--primary { padding: 9px 14px; border-radius: 999px; font-size: 10.5px; letter-spacing: .6px; box-shadow: none; }

/* ── Floating Pill: small rounded pill, bottom-centre, stays out of the way ── */
.pwa-is--pill .pwa-is-panel {
    bottom: calc(var(--is-tabbar) + 14px);
    left: 50%; right: auto;
    width: max-content;
    max-width: calc(100% - 24px);
    border-radius: 999px;
    padding: 7px 8px 7px 9px;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.08);
    transform: translate(-50%, 160%);
}
.pwa-is--pill.is-open .pwa-is-panel { transform: translate(-50%, var(--is-drag)); }
.pwa-is--pill .pwa-is-icon { width: 30px; height: 30px; border-radius: 50%; font-size: 13px; box-shadow: none; }
.pwa-is--pill .pwa-is-head { gap: 8px; }
.pwa-is--pill .pwa-is-title { font-size: 13px; font-weight: 700; margin: 0; }
.pwa-is--pill .pwa-is-body { display: none; }
.pwa-is--pill .pwa-is-cta--primary { padding: 8px 14px; border-radius: 999px; font-size: 10.5px; letter-spacing: .6px; box-shadow: none; }
.pwa-is--pill .pwa-is-close { width: 24px; height: 24px; }

/* ── App Store Style: icon, title, subtitle and a pill CTA, like a store listing ── */
.pwa-is--store .pwa-is-panel {
    bottom: calc(var(--is-tabbar) + 12px);
    margin: 0 12px;
    border-radius: var(--is-radius);
    padding: 14px;
    gap: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.06);
}
.pwa-is--store .pwa-is-icon { width: 58px; height: 58px; border-radius: 15px; font-size: 22px; }
.pwa-is--store .pwa-is-title { font-size: 15px; margin-bottom: 2px; }
.pwa-is--store .pwa-is-body {
    font-size: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pwa-is--store .pwa-is-cta--primary {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .8px;
    box-shadow: none;
    background: color-mix(in srgb, var(--is-accent) 12%, transparent);
    color: var(--is-accent);
}
.pwa-is--store .pwa-is-cta--primary:hover { filter: none; background: color-mix(in srgb, var(--is-accent) 18%, transparent); }
.pwa-is--store .pwa-is-close { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; }
.pwa-is--store .pwa-is-actions { padding-right: 14px; }

/* ── Compact Mobile: one dense row, least intrusive on small screens ── */
.pwa-is--compact .pwa-is-panel {
    bottom: var(--is-tabbar);
    border-radius: 0;
    border-top: 1px solid rgba(0,0,0,.08);
    padding: 7px 8px 7px 10px;
    gap: 8px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.pwa-is--compact .pwa-is-icon { width: 28px; height: 28px; border-radius: 7px; font-size: 12px; box-shadow: none; }
.pwa-is--compact .pwa-is-head { gap: 8px; }
.pwa-is--compact .pwa-is-title { font-size: 12.5px; margin: 0; }
.pwa-is--compact .pwa-is-body { display: none; }
.pwa-is--compact .pwa-is-cta--primary { padding: 7px 12px; border-radius: 8px; font-size: 10px; letter-spacing: .5px; box-shadow: none; }
.pwa-is--compact .pwa-is-close { width: 24px; height: 24px; }

/* ═════════════════════════════════════════════════════════════════════
   ANIMATION VARIANTS (bottom-anchored layouts)
═════════════════════════════════════════════════════════════════════ */
.pwa-is-anim-fade:not(.pwa-is--welcome):not(.pwa-is--pill) .pwa-is-panel { transform: translateY(0); opacity: 0; transition: opacity .4s ease; }
.pwa-is-anim-fade:not(.pwa-is--welcome):not(.pwa-is--pill).is-open .pwa-is-panel { opacity: 1; }

.pwa-is-anim-scale:not(.pwa-is--welcome):not(.pwa-is--pill) .pwa-is-panel { transform: translateY(0) scale(.9); opacity: 0; transform-origin: bottom center; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.pwa-is-anim-scale:not(.pwa-is--welcome):not(.pwa-is--pill).is-open .pwa-is-panel { transform: translateY(var(--is-drag)) scale(1); opacity: 1; }

.pwa-is-anim-spring .pwa-is-panel { transition-timing-function: cubic-bezier(.34,1.4,.64,1); transition-duration: .65s; }

/* ═════════════════════════════════════════════════════════════════════
   DESKTOP (no mobile tab bar; ≥901px matches the app-shell breakpoint)
   Skipped inside the admin preview (.is-preview) which emulates a phone.
═════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
    .pwa-is:not(.is-preview) { --is-tabbar: 0px; }

    .pwa-is:not(.is-preview):not(.pwa-is--welcome):not(.pwa-is--pill):not(.pwa-is--store) .pwa-is-panel {
        bottom: 24px;
        left: 50%;
        right: auto;
        width: 480px;
        margin: 0;
        border-radius: var(--is-radius);
        transform: translate(-50%, 200%);
    }
    .pwa-is:not(.is-preview):not(.pwa-is--welcome):not(.pwa-is--pill):not(.pwa-is--store).is-open .pwa-is-panel {
        transform: translate(-50%, var(--is-drag));
    }
    .pwa-is:not(.is-preview).pwa-is--banner .pwa-is-panel,
    .pwa-is:not(.is-preview).pwa-is--compact .pwa-is-panel { border-top: 0; }
    .pwa-is:not(.is-preview).pwa-is--store .pwa-is-panel { left: auto; right: 24px; bottom: 24px; width: 420px; margin: 0; }
    .pwa-is:not(.is-preview) .pwa-is-handle { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pwa-is-panel, .pwa-is-backdrop, .pwa-is-cta {
        transition: none !important;
        animation: none !important;
    }
}