/* ---- The in-app browser variant of the "Open in the app" strip (owner, GATE 1 2026-10-12; doc/meta-integration-keys.md).
   #nmfOpenApp in Views/Shared/_footer.cshtml, filled and shown by deeplinks.js showInAppBar: inside Instagram's, Facebook's
   or Messenger's own browser on a phone, while MetaInfo:InAppBrowserBar:Enabled is on. The same strip and the same box
   (footer-revamp.css: fixed to the bottom, its constant size, the page's room under it); only its content changes:
     Android  "Open in the app" + "Open in your browser" (outlined, the second choice);
     iPhone   the hint "Tap ··· then Open in browser" + "Get the app".
   Every rule is scoped to the strip, so a page where the strip stays hidden is unchanged. */

/* Each part stays hidden until deeplinks.js shows it, whatever display a rule below gives it. The strip's own text and
   button are hidden the same way while the in-app content shows (one bar, never both contents). */
.nmf-openapp .nmf-openapp-iab[hidden],
.nmf-openapp .nmf-iab-btn[hidden],
.nmf-openapp .nmf-iab-hint[hidden],
.nmf-openapp .nmf-openapp-text[hidden],
.nmf-openapp .nmf-openapp-btn[hidden] {
    display: none !important;
}

.nmf-openapp .nmf-openapp-iab {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* iPhone: how to leave the in-app browser. Takes the room left by the button; a long text wraps (the strip grows through
   its min-height, as for the strip's own text). */
.nmf-openapp .nmf-iab-hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.3;
}

/* The two Android buttons share the row. 13px keeps "Open in your browser" on one line from about 380px wide; on a
   narrower phone a label wraps instead of pushing the close button off (the strip grows through its min-height). */
.nmf-openapp .nmf-iab-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #3C50E0;
    border-radius: 9999px;
    background: #3C50E0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.nmf-openapp .nmf-iab-btn:hover,
.nmf-openapp .nmf-iab-btn:focus-visible {
    border-color: #2a3bbf;
    background: #2a3bbf;
    color: #fff;
}

/* "Open in your browser": the second choice, outlined on the strip's navy. */
.nmf-openapp .nmf-iab-btn.nmf-iab-browser {
    border-color: rgba(255, 255, 255, 0.6);
    background: transparent;
}

.nmf-openapp .nmf-iab-btn.nmf-iab-browser:hover,
.nmf-openapp .nmf-iab-btn.nmf-iab-browser:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* "Get the app" next to the hint keeps its one line. */
.nmf-openapp .nmf-iab-btn.nmf-iab-getapp {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Phones narrower than 360px: as the strip's own rule (footer-revamp.css), a little tighter. */
@media (max-width: 359.98px) {
    .nmf-openapp .nmf-openapp-iab {
        gap: 6px;
    }

    .nmf-openapp .nmf-iab-btn {
        padding-inline: 8px;
    }
}