/* ════════════════════════════════════════════════════════════
   Profile Preview Panel  (.sn-pfp-*)
   ════════════════════════════════════════════════════════════

   The right-side "See Profile" slider. Opened from:
     • communities/members-list.phtml   (community members)
     • business_profiles/followers.phtml (business followers)

   The same shell also carries the "See Business" preview (.sn-bizp-*, at the
   foot of this file), whose fragment comes from xhr/business_preview.php.

   The overlay/panel shell and the JS that fills it live in
   themes/sunshine/layout/container.phtml; the content is a small,
   purpose-built read-only fragment returned by
   xhr/community_member_preview.php — NOT the real profile page — so this
   styling is self-contained and doesn't fight the full profile page's CSS.

   This lives in its own file, loaded alongside the panel markup in
   container.phtml, because the panel is global. It used to sit in
   style_members.css, which only the community members page loads — so the
   panel rendered completely unstyled anywhere else it was opened from.
   Anything panel-specific belongs here, not in a page stylesheet.
   ════════════════════════════════════════════════════════════ */

.sn-pfp { display: flex; flex-direction: column; }

.sn-pfp-banner {
    width: 100%;
    height: 150px;
    background-color: #eef1f5;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.sn-pfp-header {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 0 20px;
    margin-top: -22px;
    flex-wrap: wrap;
    gap: 10px;
}
.sn-pfp-avatar {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(16,24,40,0.2);
    background: #e5e7eb;
    overflow: hidden;
}
.sn-pfp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sn-pfp-name {min-width: 0;display: flex;flex-direction: column; gap: 6px;}
.sn-pfp-name h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    word-break: break-word;
}

/* Profile-completion badge — rightmost on the name line */
.sn-pfp-completion-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 100%;
}

/* Reject / Accept / Verify / Message — the exact same buttons and classes used
   on the members list (.request-accept-reject, .verification-buttons, .btn-glossy);
   this wrapper only handles spacing/wrapping, no button-level redesign. */
.sn-pfp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 4px;
}
.sn-pfp-actions .request-accept-reject,
.sn-pfp-actions .verification-buttons {
    display: flex;
    gap: 8px;
}

/* Message tooltip above the button in the See Profile panel */
.sn-pfp-actions .btn-glossy {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.sn-pfp-actions [tooltip]::before {
    content: "" !important;
    bottom: calc(100% + 2px) !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    border: 5px solid transparent !important;
    border-top-color: #333 !important;
    border-bottom-width: 0 !important;
    border-left-color: transparent !important;
    transform: translateX(-50%) !important;
    z-index: 100 !important;
}

.sn-pfp-actions [tooltip]::after {
    bottom: calc(100% + 7px) !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 99 !important;
}

.sn-pfp-actions [tooltip]:hover::before,
.sn-pfp-actions [tooltip]:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) !important;
}

.sn-pfp-section { padding: 14px 20px; border-top: 1px solid #eef0f3; }
.sn-pfp-section:first-of-type { border-top: none; padding-top: 18px; }
.sn-pfp-section h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
}
.sn-pfp-value {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
    white-space: pre-line;
}
.sn-pfp-empty { margin: 0; font-size: 12.5px; color: #9ca3af; font-style: italic; }

.sn-pfp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-pfp-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.sn-pfp-exp-item { padding: 10px 0; border-bottom: 1px solid #f1f2f4; }
.sn-pfp-exp-item:last-child { border-bottom: none; padding-bottom: 0; }
.sn-pfp-exp-item:first-child { padding-top: 0; }
.sn-pfp-exp-title { font-size: 13px; font-weight: 700; color: #111827; }
.sn-pfp-exp-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
.sn-pfp-exp-dates { font-size: 11.5px; color: #9ca3af; margin-top: 2px; }
.sn-pfp-exp-desc { margin: 6px 0 0; font-size: 12.5px; color: #4b5563; line-height: 1.5; white-space: pre-line; }
/* ════════════════════════════════════════════════════════════
   Business preview  (.sn-bizp-*)

   The "See Business" variant of the panel — community Business Members and
   Business Verification Requests lists. Reuses the shell above (.sn-pfp,
   .sn-pfp-banner, .sn-pfp-section, .sn-pfp-value, .sn-pfp-tag-pill) and only
   adds what a business needs and a person does not: a squared logo tile and an
   owner card.
   ════════════════════════════════════════════════════════════ */

.sn-bizp-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 20px 16px;
}

/* Squircle rather than the circle a person gets — a wordmark reads better in one,
   and it tells the two panels apart at a glance. Only the tile laps onto the
   banner; lifting the whole header row put the name over the photo. */
.sn-bizp-logo {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    margin-top: -48px;
    border-radius: 16px;
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .18);
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sn-bizp-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sn-bizp-identity { min-width: 0; padding-top: 2px; }
.sn-bizp-identity h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.sn-bizp-title { word-break: break-word; }
.sn-bizp-identity h3 svg,
.sn-bizp-identity h3 img { flex-shrink: 0; }
.sn-bizp-tagline {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
    word-break: break-word;
}
.sn-bizp-identity .sn-pfp-tag-pill { margin-top: 8px; }

/* About is rich text now (TinyMCE), so it arrives as real block markup —
   pre-line would double every gap the <p> tags already create. */
.sn-bizp-about { white-space: normal; }
.sn-bizp-about p { margin: 0 0 8px; }
.sn-bizp-about p:last-child { margin-bottom: 0; }
.sn-bizp-about ul,
.sn-bizp-about ol { margin: 0 0 8px; padding-left: 20px; }
.sn-bizp-about img { max-width: 100%; height: auto; }
.sn-bizp-about a { color: #2563eb; }

.sn-bizp-owner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.sn-bizp-owner:hover { background: #f9fafb; border-color: #e2e6ea; text-decoration: none; }
.sn-bizp-owner-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #e5e7eb;
}
.sn-bizp-owner-meta { display: flex; flex-direction: column; min-width: 0; }
.sn-bizp-owner-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
}
.sn-bizp-owner-handle { font-size: 12px; color: #9ca3af; }

@media (max-width: 480px) {
    .sn-bizp-header { gap: 12px; }
    .sn-bizp-logo { width: 72px; height: 72px; border-radius: 14px; margin-top: -40px; }
}