/* ── SEW PWA Install Prompt ──────────────────────────────
 * Three styles configurable via admin:
 *   1. mini-bar   — thin strip under app-nav (default)
 *   2. banner     — card with icon + text + button
 *   3. snackbar   — floating toast bottom-center
 *
 * z-index stack:
 *   app-nav: 1100
 *   install prompt: 1050 (under app-nav for mini-bar)
 *   FAB: 999999
 * ──────────────────────────────────────────────────────── */

/* ── Shared ──────────────────────────────────────────── */

.sew-pwa-prompt {
    font-family: var(--sew-font-body, 'Inter', sans-serif);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.25s ease;
    pointer-events: none;
}

.sew-pwa-prompt.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Hide when FAB panel open */
body.sewn-panel-open .sew-pwa-prompt { display: none; }

/* ── 1. Mini Bar (default) ───────────────────────────── */

.sew-pwa-prompt--mini {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--sew-coral, #FF6A70);
    color: #fff;
    text-align: center;
    padding: 8px 48px 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.3;
}

/* Sits UNDER app-nav on mobile — peeks out below */
@media (max-width: 782px) {
    body.logged-in .sew-pwa-prompt--mini {
        bottom: 0;
        /* App-nav covers it; mini-bar peeks below app-nav */
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* Desktop: no app-nav, sits at bottom */
@media (min-width: 783px) {
    .sew-pwa-prompt--mini {
        bottom: 0;
    }
}

.sew-pwa-prompt--mini .sew-pwa-prompt__action {
    text-decoration: underline;
    font-weight: 600;
}

.sew-pwa-prompt--mini .sew-pwa-prompt__dismiss {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.sew-pwa-prompt--mini .sew-pwa-prompt__dismiss:hover {
    color: #fff;
}

/* ── 2. Banner ───────────────────────────────────────── */

.sew-pwa-prompt--banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    background: var(--sew-bg-card, #1a1a2e);
    border-top: 1px solid var(--sew-border, rgba(255, 255, 255, 0.1));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 782px) {
    body.logged-in .sew-pwa-prompt--banner {
        bottom: 56px; /* above app-nav */
    }
}

.sew-pwa-prompt--banner .sew-pwa-prompt__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.sew-pwa-prompt--banner .sew-pwa-prompt__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.sew-pwa-prompt--banner .sew-pwa-prompt__text {
    flex: 1;
    min-width: 0;
}

.sew-pwa-prompt--banner .sew-pwa-prompt__text strong {
    display: block;
    color: var(--sew-text-primary, #fff);
    font-size: 14px;
    font-weight: 600;
}

.sew-pwa-prompt--banner .sew-pwa-prompt__text span {
    color: var(--sew-text-secondary, #9ca3af);
    font-size: 12px;
}

.sew-pwa-prompt--banner .sew-pwa-prompt__btn {
    flex-shrink: 0;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--sew-coral, #FF6A70);
    color: #fff;
    border: none;
}

.sew-pwa-prompt--banner .sew-pwa-prompt__btn:hover {
    background: var(--sew-coral-hover, #ff8d92);
}

.sew-pwa-prompt--banner .sew-pwa-prompt__dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--sew-text-secondary, #9ca3af);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

/* ── 3. Snackbar ─────────────────────────────────────── */

.sew-pwa-prompt--snackbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 100%);
    z-index: 1200;
    background: var(--sew-bg-card, #1a1a2e);
    border: 1px solid var(--sew-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 360px;
    width: calc(100% - 32px);
}

.sew-pwa-prompt--snackbar.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

@media (max-width: 782px) {
    body.logged-in .sew-pwa-prompt--snackbar {
        bottom: 72px; /* above app-nav */
    }
}

.sew-pwa-prompt--snackbar .sew-pwa-prompt__text {
    flex: 1;
    color: var(--sew-text-primary, #fff);
    font-size: 13px;
    font-weight: 500;
}

.sew-pwa-prompt--snackbar .sew-pwa-prompt__btn {
    flex-shrink: 0;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: var(--sew-coral, #FF6A70);
    color: #fff;
    border: none;
}

.sew-pwa-prompt--snackbar .sew-pwa-prompt__dismiss {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sew-bg-card, #1a1a2e);
    border: 1px solid var(--sew-border, rgba(255, 255, 255, 0.1));
    color: var(--sew-text-secondary, #9ca3af);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* ── Standalone / PWA mode ────────────────────────────── */
@media all and (display-mode: standalone) {
    .sew-pwa-prompt { display: none !important; }

    /* Hide WP admin bar in standalone mode */
    #wpadminbar { display: none !important; }
    html { margin-top: 0 !important; }

    /* Safe-area insets for notched devices */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* App-nav: account for safe-area */
    .sew-app-nav {
        top: env(safe-area-inset-top);
    }

    /* FAB: respect bottom safe area */
    .sewn-fab {
        bottom: calc(16px + env(safe-area-inset-bottom));
    }

    /* Footer: add bottom safe-area padding */
    .sew-footer,
    .site-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    /* Hide browser-specific UI hints */
    .sew-pwa-share-btn { display: flex; } /* Ensure share btn visible */

    /* Prevent overscroll bounce on iOS */
    html, body {
        overscroll-behavior-y: contain;
    }
}

/* Also target the body class for JS-set standalone */
html.sew-standalone { margin-top: 0 !important; }
html.sew-standalone #wpadminbar { display: none !important; }
html.sew-standalone body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior-y: contain;
}
html.sew-standalone .sew-app-nav {
    top: env(safe-area-inset-top);
}
html.sew-standalone .sewn-fab {
    bottom: calc(16px + env(safe-area-inset-bottom));
}

/* ── Web Share Button ────────────────────────────────── */
.sew-pwa-share-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sew-bg-card, rgba(26,26,46,0.85));
    border: 1px solid var(--sew-border, rgba(255,255,255,0.1));
    color: var(--sew-text-secondary, #9ca3af);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(8px);
    transition: color 0.2s, border-color 0.2s;
    padding: 0;
}
.sew-pwa-share-btn:hover {
    color: var(--sew-coral, #FF6A70);
    border-color: var(--sew-coral, #FF6A70);
}

/* ── Toast ────────────────────────────────────────────── */
.sew-pwa-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--sew-bg-card, #1a1a2e);
    color: #fff;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.sew-pwa-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Offline Stale Banner ────────────────────────────── */
.sew-pwa-stale-banner {
    background: linear-gradient(90deg, #1a1a2e, #2a1a2e);
    border: 1px solid var(--sew-coral, #FF6A70);
    border-radius: 8px;
    padding: 10px 16px;
    margin: 12px 16px;
    font-size: 13px;
    color: var(--sew-text-secondary, #9ca3af);
    text-align: center;
}
.sew-pwa-stale-banner strong {
    color: var(--sew-coral, #FF6A70);
}