/*
 * .gp-app-promo — one-time "New Apple app" announcement modal.
 *
 * Centered dialog + dimmed backdrop, mirroring the cart-drawer overlay
 * conventions (opacity/pointer-events toggle via .is-open). Shown once
 * per browser by app-promo.js (localStorage-gated); closable via the ×,
 * a backdrop click, or Escape.
 *
 * Footer App Store badge lives in footer.css — this file owns the modal.
 */

/* ── Backdrop / centering container ─────────────────────────────────── */
.gp-app-promo-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;                 /* above header + cart drawer (300) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.78);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--gp-dur-slow) var(--gp-ease-standard),
        visibility var(--gp-dur-slow) var(--gp-ease-standard);
}
.gp-app-promo-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Lock body scroll while the modal is up */
body.gp-app-promo-open { overflow: hidden; }

/* ── Dialog card ────────────────────────────────────────────────────── */
.gp-app-promo {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--gp-surface);
    border: var(--gp-border-w) solid var(--gp-border);
    border-top: 3px solid var(--gp-gold);   /* gold accent edge */
    padding: 44px 32px 32px;
    text-align: center;
    box-shadow: var(--gp-shadow-lift);
    transform: translateY(14px) scale(0.98);
    transition: transform var(--gp-dur-slow) var(--gp-ease-out);
}
.gp-app-promo-overlay.is-open .gp-app-promo {
    transform: none;
}

/* ── Close button ───────────────────────────────────────────────────── */
.gp-app-promo__close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: 0;
    color: var(--gp-text-dim);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    transition: color var(--gp-dur-base) var(--gp-ease-standard);
}
.gp-app-promo__close:hover,
.gp-app-promo__close:focus-visible { color: var(--gp-gold); }

/* ── Content ────────────────────────────────────────────────────────── */
.gp-app-promo__eyebrow {
    font-family: var(--gp-font-mono);
    font-size: var(--gp-fs-meta);
    letter-spacing: var(--gp-ls-meta-wide);
    text-transform: uppercase;
    color: var(--gp-gold);
    margin: 0 0 12px;
}

.gp-app-promo__title {
    font-family: var(--gp-font-display);
    font-size: 40px;
    font-weight: 400;
    letter-spacing: var(--gp-ls-display-normal);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--gp-text);
    margin: 0 0 14px;
}

.gp-app-promo__copy {
    font-family: var(--gp-font-body);
    font-size: 15px;
    color: var(--gp-text-dim);
    line-height: var(--gp-lh-body);
    margin: 0 0 24px;
}

/* App Store badge */
.gp-app-promo__badge {
    display: inline-block;
    line-height: 0;
    transition: opacity var(--gp-dur-base) var(--gp-ease-standard);
}
.gp-app-promo__badge:hover { opacity: 0.85; }
.gp-app-promo__badge img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 100%;
}

/* Android note */
.gp-app-promo__note {
    font-family: var(--gp-font-mono);
    font-size: var(--gp-fs-meta-sm);
    letter-spacing: var(--gp-ls-meta);
    text-transform: uppercase;
    color: var(--gp-text-muted);
    line-height: 1.5;
    margin: 22px 0 0;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .gp-app-promo { padding: 38px 22px 26px; }
    .gp-app-promo__title { font-size: 32px; }
    .gp-app-promo__badge img { height: 46px; }
}