/* =============================================================================
   App store badges — rendered by templates/marketing/includes/_app_store_badges.html
   Loaded by base.html (app shell), marketing_base.html, and auth_base.html
   so badges look identical on every surface (landing, auth, help, etc.).
============================================================================= */
.app-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.app-badges-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ink-mid);
    margin: 0 0 14px;
    font-family: var(--font-body);
}

.app-badge {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 8px;
    transition: transform var(--ease-default), opacity var(--ease-default);
    line-height: 0;
}

.app-badge:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.app-badge img {
    display: block;
    height: 40px;
    width: auto;
}

/* "Coming soon" placeholder for the Android badge until PLAY_STORE_URL ships. */
.app-badge--coming-soon {
    position: relative;
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(1);
}

.app-badge--coming-soon:hover {
    transform: none;
    opacity: 0.55;
}

.app-badge-soon {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--accent-text, #2f3a2c);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    line-height: 1.2;
}

/* Variant: hero — paired with the primary above-the-fold CTA. */
.app-badges--hero {
    margin-top: 18px;
    margin-bottom: 22px;
}

.app-badges--hero .app-badges-row {
    justify-content: center;
}

.app-badges--hero .app-badge img {
    height: 48px;
}

/* Variant: cta — beneath the "Start Free" button on banners. */
.app-badges--cta {
    margin-top: 18px;
    justify-content: center;
}

.app-badges--cta .app-badges-row {
    justify-content: center;
}

/* Variant: footer — sits inside the brand column above social links. */
.app-badges--footer {
    margin-bottom: 24px;
}

/* Mobile menu placement — badges sit at the very bottom under auth buttons. */
.mobile-menu .app-badges {
    margin-top: 16px;
    justify-content: center;
}

.mobile-menu .app-badges-row {
    justify-content: center;
}

@media (max-width: 640px) {
    .app-badge img {
        height: 36px;
    }

    .app-badges--hero .app-badge img {
        height: 42px;
    }
}

/* "Take Pensio with you" card on the in-app help page. Mirrors the
   .pwa-install-card visual (left-border accent + tinted background) so
   the two cards read as siblings rather than competing surfaces. */
.native-app-card {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--primary-light);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--primary);
}

.native-app-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.35rem;
}

.native-app-card-header svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.native-app-card-body {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}