/* =========================================================
   CelebIsland "Obsidian and Emerald" reskin -- Phase 4: profile page
   Scoped to the real timeline/content.phtml markup. Every class here is
   Wondertag's own (or the shared ci- design system already loaded
   site-wide) -- no markup was invented, only restyled.
   ========================================================= */

/* ---- Cover ---- */
.tag_cover_sec_bg { border-radius: 0 0 var(--ci-r-xl) var(--ci-r-xl); overflow: hidden; background: var(--ci-panel); }
.tag_cover_bg_grad { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, var(--ci-ink) 100%) !important; opacity: .92; }
.tag_cover_sec_bg .ci-cover-anim { position: absolute; inset: 0; background: var(--ci-panel); }
.tag_cover_sec_bg .ci-cover-anim .ci-anim__grid { opacity: .5; }

/* ---- Header card (avatar, name, badges, buttons) ---- */
.tag_page_name_hdr, .card.hovercard { background: var(--ci-surface) !important; border: 1px solid var(--ci-line-soft); border-radius: var(--ci-r-xl) !important; box-shadow: var(--ci-shadow-card); }
.user-avatar img#updateImage-0, .event-info-cont-small > .user-avatar img { border-radius: 50%; border: 3px solid var(--ci-ink); box-shadow: 0 0 0 2px var(--ci-green); background: var(--ci-panel); }
.tag_page_name_hdr h3 { font-family: var(--ci-font-display); font-weight: 600; color: var(--ci-bone); font-size: 28px; letter-spacing: -.01em; margin: 12px 0 2px; display: flex; align-items: center; gap: 8px; }
.tag_page_name_hdr .event_cdown { color: var(--ci-text-4); font-size: 14px; font-weight: 500; }
.pro-badge { border-radius: var(--ci-r-pill) !important; font: 800 11px var(--ci-font-body) !important; padding: 3px 10px !important; }
/* 2026-09-27: site-wide contrast audit -- this badge's background is
   whatever per-tier color the admin configured (inline style, e.g. light
   blue for VIP here), and "inherit" pulled in the legacy white text color
   from style.css, which reads poorly against a light/medium badge color
   (measured ~2.15:1 for the VIP tier). Dark text reads reliably across the
   light/medium accent colors these badges use in practice, matching the
   same fix already applied to this badge inside post headers. */
.pro-badge a { color: #07080C !important; }
.wow_user_page_btns { gap: 10px; margin-top: 16px !important; }
.wow_user_page_btns .btn { border-radius: var(--ci-r-pill) !important; font-weight: 700 !important; }

/* ---- Tabs ---- */
.user-bottom-nav { border-top: 1px solid var(--ci-line-soft); margin-top: 8px; }
.user-bottom-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
.user-bottom-nav ul li a { color: var(--ci-text-3) !important; font-weight: 700 !important; font-size: 14px; padding: 14px 16px !important; border-bottom: 2px solid transparent !important; }
.user-bottom-nav ul li a:hover { color: var(--ci-bone) !important; }
.user-bottom-nav ul li a.active, .user-bottom-nav ul li.active a { color: var(--ci-green-text) !important; border-bottom-color: var(--ci-green) !important; }
.user-bottom-nav ul li a span { color: var(--ci-text-4); font-weight: 600; margin-left: 4px; }

/* ---- Sidebar: About / info blocks ---- */
.sidebar.rightcol .page-margin.wow_content, .col-lg-3.sidebar .wow_content { background: var(--ci-surface) !important; border: 1px solid var(--ci-line-soft); border-radius: var(--ci-r-lg) !important; box-shadow: none !important; }
.event_info_blocks { display: flex; flex-direction: column; gap: 14px; }
.event_info_blocks > div { display: flex; align-items: center; gap: 10px; color: var(--ci-text-2); font-size: 14px; }
.event_info_blocks svg { color: var(--ci-text-4); flex-shrink: 0; }
.event_info_blocks a { color: var(--ci-bone); font-weight: 600; }
.tag_usr_prof_about { color: var(--ci-text-2); line-height: 1.6; }
.tag_profile_search { background: var(--ci-surface-2) !important; border: 1px solid var(--ci-line) !important; color: var(--ci-bone) !important; border-radius: var(--ci-r-pill) !important; }

/* ---- Sidebar: Photos widget ---- */
.photo-data img, .event_photos img { border-radius: var(--ci-r-md) !important; object-fit: cover; }
.wo_page_hdng { color: var(--ci-bone) !important; font-weight: 700; }
.wo_page_hdng svg { color: var(--ci-green-text) !important; }

/* ---- Main column ---- */
.middlecol .page-margin { display: flex; flex-direction: column; gap: 14px; }

/* ---- Profile completion bar (own profile only) ---- */
.profile-completion-bar.wow_content { background: var(--ci-surface) !important; border: 1px solid var(--ci-line-soft); border-radius: var(--ci-r-lg) !important; box-shadow: none !important; color: var(--ci-bone); }
.profile-completion-bar .hdr h4, .profile-completion-bar .hdr { color: var(--ci-bone) !important; }
.profile-completion-bar .body a { background: var(--ci-surface-2) !important; border: 1px solid var(--ci-line) !important; color: var(--ci-text-2) !important; border-radius: var(--ci-r-pill) !important; }

/* ---- Country flag next to the profile name (real country_id -> ISO flag) ---- */
.ci-country-flag { font-size: 16px; line-height: 1; vertical-align: middle; margin-left: 4px; cursor: default; }