/*
 * PWA Install Coachmark – overlay + card
 * Tokens: reuses --wm-* from wm-app.css and nav.css
 * z-index 950: above bottom-nav (900), below drawer (998)
 */

.wm-pwa-overlay {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(25, 17, 9, 0.36);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.wm-pwa-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.wm-pwa-overlay.is-closing {
    opacity: 0;
    visibility: hidden;
}

/* --- Card --- */
.wm-pwa-card {
    position: relative;
    width: calc(100% - 24px);
    max-width: var(--wm-shell-max, 46rem);
    margin-bottom: calc(var(--wm-bottom-bar-h, 0px) + var(--wm-bottom-bar-gap, 16px) + env(safe-area-inset-bottom, 0px));
    padding: 20px 20px 18px;
    background: rgba(246, 241, 232, 0.92);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
    border: 1px solid var(--wm-panel-border, rgba(206, 170, 103, 0.34));
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 -4px 24px rgba(0, 0, 0, 0.10),
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    box-sizing: border-box;
    transform: translateY(24px);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}

.wm-pwa-overlay.is-visible .wm-pwa-card {
    transform: translateY(0);
    opacity: 1;
}

.wm-pwa-overlay.is-closing .wm-pwa-card {
    transform: translateY(24px);
    opacity: 0;
}

body.wm-has-bottom-nav .wm-pwa-card {
    margin-bottom: calc(var(--wm-bottom-bar-h, 60px) + var(--wm-bottom-bar-gap, 16px) + env(safe-area-inset-bottom, 0px));
}

/* --- Close button --- */
.wm-pwa-card__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--wm-text-soft, rgba(66, 52, 33, 0.88));
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.wm-pwa-card__close:hover,
.wm-pwa-card__close:focus-visible {
    background: rgba(200, 160, 77, 0.12);
    color: var(--wm-gold-3, #a88434);
}

.wm-pwa-card__close:focus-visible {
    outline: 2px solid rgba(200, 160, 77, 0.55);
    outline-offset: 2px;
}

/* --- Title --- */
.wm-pwa-card__title {
    margin: 0 32px 6px 0;
    font-family: "EB Garamond", "Lora", serif;
    font-size: clamp(1.1rem, 2.4vw, 1.3rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--wm-text-main, #2d2419);
}

/* --- Description --- */
.wm-pwa-card__desc {
    margin: 0 0 16px;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--wm-text-soft, rgba(66, 52, 33, 0.88));
}

.wm-pwa-card__desc strong {
    font-weight: 600;
    color: var(--wm-text-main, #2d2419);
}

.wm-pwa-card__help {
    margin: -8px 0 14px;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(82, 63, 38, 0.9);
}

.wm-pwa-card__helpLink {
    color: #7a5a2b;
    text-decoration: underline;
    text-decoration-color: rgba(168, 132, 52, 0.55);
    text-underline-offset: 2px;
}

.wm-pwa-card__helpLink:hover,
.wm-pwa-card__helpLink:focus-visible {
    color: #5f4116;
    text-decoration-color: rgba(168, 132, 52, 0.88);
}

/* --- iOS Share icon --- */
.wm-pwa-share-icon {
    display: inline-block;
    vertical-align: -3px;
    width: 18px;
    height: 18px;
    color: var(--wm-gold-2, #c8a04d);
    margin: 0 2px;
}

/* --- Android menu icon (three dots) --- */
.wm-pwa-menu-icon {
    display: inline-block;
    vertical-align: -3px;
    width: 18px;
    height: 18px;
    color: var(--wm-text-main, #2d2419);
    margin: 0 2px;
}

/* --- Actions row --- */
.wm-pwa-card__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* --- Shared button base --- */
.wm-pwa-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
    box-sizing: border-box;
}

.wm-pwa-card__btn:focus-visible {
    outline: 2px solid rgba(200, 160, 77, 0.55);
    outline-offset: 2px;
}

/* --- Primary CTA (gold gradient) --- */
.wm-pwa-card__btn--primary {
    background: linear-gradient(
        135deg,
        var(--wm-cta-gold-0, #e8c55b),
        var(--wm-cta-gold-1, #d4a83a),
        var(--wm-cta-gold-2, #c49630),
        var(--wm-cta-gold-3, #a88226)
    );
    color: #fff;
    text-shadow: 0 1px 2px rgba(100, 70, 20, 0.28);
    box-shadow: 0 2px 8px rgba(168, 132, 52, 0.25);
}

.wm-pwa-card__btn--primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 3px 12px rgba(168, 132, 52, 0.35);
}

.wm-pwa-card__btn--primary:active {
    filter: brightness(0.96);
    box-shadow: 0 1px 4px rgba(168, 132, 52, 0.2);
}

/* --- Secondary CTA --- */
.wm-pwa-card__btn--secondary {
    background: rgba(200, 160, 77, 0.10);
    color: var(--wm-text-soft, rgba(66, 52, 33, 0.88));
}

.wm-pwa-card__btn--secondary:hover {
    background: rgba(200, 160, 77, 0.18);
    color: var(--wm-text-main, #2d2419);
}

/* --- Responsive --- */
@media (min-width: 768px) {
    .wm-pwa-card {
        max-width: var(--wm-shell-max, 54rem);
        width: calc(100% - 40px);
        padding: 22px 24px 20px;
    }
}

@media (min-width: 1024px) {
    .wm-pwa-card {
        max-width: min(520px, var(--wm-shell-max, 66rem));
        padding: 24px 28px 22px;
    }
}

/* --- Landscape compact --- */
@media (orientation: landscape) and (max-height: 500px) {
    .wm-pwa-card {
        padding: 14px 18px 12px;
    }

    .wm-pwa-card__desc {
        margin-bottom: 10px;
        font-size: 0.85rem;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .wm-pwa-overlay,
    .wm-pwa-card {
        transition: none;
    }
}

/* --- Backdrop-filter fallback --- */
@supports not (backdrop-filter: blur(1px)) {
    .wm-pwa-card {
        background: rgb(246, 241, 232);
    }
}