/* ==================================================
   Mobile App Header — native app feel
   Brand: teal #012A2B / #023436 + mint #00C48A→#39E8A0
   ================================================== */
.mobile-app-header {
    display: none;
}

@media (max-width: 991.98px) {
    /* Replace web header with the app-style bar on mobile */
    .site_header {
        display: none;
    }

    /* No footer in the mobile/PWA experience */
    .site_footer {
        display: none;
    }

    body {
        padding-top: calc(66px + env(safe-area-inset-top));
    }

    .mobile-app-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1070;
        padding: env(safe-area-inset-top) 0 0;
        background: rgba(1, 42, 43, 0.92);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        transition: transform 0.35s ease, background 0.3s ease;
    }

    .mobile-app-header_inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 720px;
        margin: 0 auto;
        padding: 10px 16px;
        transition: padding 0.3s ease;
    }

    .mobile-app-brand {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .mobile-app-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

    .mobile-app-logo img {
        width: 40px;
        height: 36px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .mobile-app-title {
        color: #ffffff;
        font-size: 19px;
        font-weight: 800;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .mobile-app-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-app-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        border-radius: 14px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 16px;
        text-decoration: none;
        transition: background 0.2s ease, transform 0.15s ease;
    }

    .mobile-app-action:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.18);
    }

    .mobile-app-action span {
        font-size: 13px;
        font-weight: 700;
    }

    .mobile-app-login {
        background: linear-gradient(160deg, #00C48A 0%, #39E8A0 100%);
        border: 0;
        color: #02211f;
        box-shadow: 0 8px 20px -8px rgba(0, 196, 138, 0.6);
    }

    /* ── Logged-in user avatar ── */
    .mobile-app-avatar {
        width: 34px;
        min-width: 34px;
        max-width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.10);
        border: 1.5px solid rgba(255, 255, 255, 0.2);
        overflow: hidden;
    }

    .mobile-app-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 50%;
    }

    /* ── Scrolled state: compact + solid ── */
    .mobile-app-header.is-scrolled {
        background: rgba(1, 42, 43, 0.98);
        box-shadow: 0 6px 24px -8px rgba(1, 42, 43, 0.5);
    }

    .mobile-app-header.is-scrolled .mobile-app-header_inner {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .mobile-app-header.is-scrolled .mobile-app-logo img {
        width: 34px;
        height: 31px;
    }

    .mobile-app-header.is-scrolled .mobile-app-title {
        font-size: 17px;
    }

    /* ── Hide on scroll down, show on scroll up ── */
    .mobile-app-header.is-hidden {
        transform: translateY(-100%);
    }
}