/* ──────────────────────────────────────────────────────────────────────────
   nav_quick_panel.css — global styles for the shared right-side quick-nav
   panel (includes/nav_quick_panel.php): Subscribe / The Key / Support /
   Hive Chat / Log Out buttons + Admin pill, with hover title/description
   swap. Scoped to .ph-nav-right.nf-nav-panel so it works inside any
   section header (.nf-section-header, .subs-section-header, ...).
   Typography for .ph-subscribe-title / .ph-subscribe-text comes from
   css/profile_header.css (loaded via includes/page_header_bar.php).
   ────────────────────────────────────────────────────────────────────────── */

.ph-nav-right.nf-nav-panel {
    flex-shrink: 0;
    max-width: 384px;
    text-align: left;
    padding: 1px 0;
    margin-left: auto;
}
/* Let every header hosting the panel wrap at ANY width: when the row fits
   (desktop) nothing changes; when it doesn't (e.g. blogs at tablet widths),
   the panel falls onto its own row instead of overflowing the page. */
.subs-section-header,
.hp-section-header,
.nf-section-header {
    flex-wrap: wrap;
}
.nf-nav-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.nf-nav-panel-info {
    flex: 1 1 auto;
    min-width: 0;
}
.nf-nav-panel .ph-subscribe-text {
    line-height: 1.05;
    margin-bottom: 5px;
}
.nf-nav-panel-buttons {
    display: flex;
    align-items: center;
    gap: 3px;
}
.nf-nav-btn {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 2.04px 8.2px;
    background: #5c74a9;
    color: #fff;
    border: 1px solid #000;
    border-radius: 12px;
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
a.nf-nav-btn,
a.nf-nav-btn:focus {
    color: #fff;
    text-decoration: none;
}
.nf-nav-btn:hover {
    background: #d2d2f4;
    color: #000;
    text-decoration: none;
}
/* Subscribe is highlighted by default; it yields while another button is hovered */
.nf-nav-btn-subscribe,
a.nf-nav-btn-subscribe {
    background: #d2d2f4;
    color: #000;
}
.nf-nav-panel-buttons:hover .nf-nav-btn-subscribe:not(:hover) {
    background: #5c74a9;
    color: #fff;
}
/* The Key resting color while the member's KEY qualification is not approved */
.nf-nav-btn-key.nf-nav-key-unqualified,
a.nf-nav-btn-key.nf-nav-key-unqualified {
    background: #ffbf1f;
    color: #000;
}
.nf-nav-btn-key.nf-nav-key-unqualified:hover {
    background: #d2d2f4;
}
.nf-nav-btn-admin,
a.nf-nav-btn-admin {
    background: #d2d2f4;
    color: #000;
    flex-shrink: 0;
}
.nf-nav-btn-admin:hover {
    background: #fff;
    color: #000;
}
/* Red alert badges (Support count, Hive Chat unread) — bottom-right of the button */
.nf-nav-badge {
    position: absolute;
    right: -5px;
    bottom: -6px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #e23b3b;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px #fff;
}

/* ── Responsive: full-width centered panel on narrow headers ── */
@media (max-width: 992px) {
    .ph-nav-right.nf-nav-panel {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }
    .nf-nav-panel-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
}