/* ===========================================================================
 * profile.css — critical, render-blocking styles for /{username} pages.
 *
 * Only rules that affect the initial above-the-fold layout live here. Anything
 * inside a hidden modal or triggered after user interaction lives in
 * /assets/css/profile-deferred.css (preload + onload swap).
 *
 * Loaded from index.php head, only when $profile is in scope.
 * Loads BEFORE profile_dark.php (inline <style> at bottom of body, !important).
 * ========================================================================= */


/* ---------------------------------------------------------------------------
 * Blurred avatar background (fills viewport behind the profile content).
 * Critical: otherwise the <img> would render in-flow at natural size and
 * push the layout before the rule lands.
 * ------------------------------------------------------------------------- */
.profile-bg-blur {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.profile-bg-blur img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    filter: blur(10px) brightness(0.7) saturate(1.2);
    opacity: 0.5;
    position: absolute;
    top: 0; left: 0;
    transition: filter 0.3s;
    pointer-events: none;
}

/* Soft brand-tinted fallback background for profiles without an avatar (light theme only). */
.profile-bg-fallback {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(49, 231, 250, 0.18), transparent 60%),
        radial-gradient(900px 500px at 10% 110%, rgba(219, 116, 255, 0.14), transparent 60%),
        linear-gradient(160deg, #eef2ff 0%, #f6f8ff 45%, #ffffff 100%);
}

/* Brand-color cover when the header image is missing. Mid-tone pastel so badges
   and icons placed on top (views, ranking position, etc.) have enough contrast. */
.hero__profile .cover {
    background:
        radial-gradient(ellipse at 25% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 75%, rgba(219, 116, 255, 0.25) 0%, transparent 60%),
        linear-gradient(135deg, #7c8ff0 0%, #9784ee 55%, #b27ce8 100%);
}


/* ---------------------------------------------------------------------------
 * Price pill (model subscription price shown in hero)
 * ------------------------------------------------------------------------- */
.price {
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}


/* ---------------------------------------------------------------------------
 * Ranking-position copy chip (visible above the fold)
 * ------------------------------------------------------------------------- */
#copyRanking {
    padding: 10px 20px;
    border-radius: 400px;
    border: 1px solid #e2eef1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}


/* ---------------------------------------------------------------------------
 * Share button inside the hero H1.
 * Critical: base .btn sets color:white, so without this override the icon
 * would flash invisible against the light background.
 * ------------------------------------------------------------------------- */
h1 .btn-share-bio,
.profile-actions-container .btn[aria-label="Share bio"] {
    background: transparent !important;
    color: var(--rb-dark, #183b56) !important;
    box-shadow: none !important;
    padding: 2px 4px !important;
    vertical-align: baseline;
    margin-left: 0 !important;
}
h1 .btn-share-bio i,
.profile-actions-container .btn[aria-label="Share bio"] i { top: -2px; }

/* Hero H1 is click-to-open the share modal. */
h1.share-trigger { cursor: pointer; }


/* ---------------------------------------------------------------------------
 * Hero chrome — chips, location, avatar glow ring, big-avatar layout.
 * All above-the-fold, so critical for CLS.
 * ------------------------------------------------------------------------- */

/* Views chip: same frosted-glass treatment as .rank-pill--hero, placed at the
   bottom-right of the cover on the full-header variant, or pinned top-right next
   to the ranking chip on the big-avatar (disable_header) variant. */
.profile-views-chip {
    position: absolute;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 16px;
    font-size: 10px; font-weight: 500;
    color: #fff !important; text-decoration: none !important;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    z-index: 2;
}
.profile-views-chip:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    color: #fff !important; text-decoration: none !important;
}
.profile-views-chip i { font-size: 13px; line-height: 1; opacity: 0.95; }

.hero__profile .cover { position: relative; }

.profile-location {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.7em; font-weight: 500;
    color: var(--rb-dark, #183b56);
    white-space: nowrap; vertical-align: middle;
}
.profile-location i {
    font-size: 1.1em; line-height: 1;
    background: radial-gradient(100% 100% at 53.13% 0%, #31e7fa 0%, #4477ff 52.6%, #db74ff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.is__dark .profile-location { color: rgba(255, 255, 255, 0.85); }

/* Ranking chip styles now live in /assets/css/rank-pills.css (.rank-pill--hero). */


/* Avatar glow — spinning conic ring behind the avatar.
   Same visual family as the main landing hero (.hero__image-ring). */
.avatar-glow { position: relative; display: inline-block; }
.avatar-glow > img { position: relative; z-index: 2; }
.avatar-glow__ring {
    position: absolute; inset: -11px; z-index: 1;
    border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg, #566ffe, #db74ff, #31e7fa, #566ffe);
    opacity: .55; filter: blur(5px);
    animation: avatarGlowSpin 10s linear infinite;
}
.avatar-glow--big .avatar-glow__ring { inset: -16px; }
/* Full-header variant: avatar is absolute-centered inside .avatar_wrap (6rem) with
   8rem × 8rem + translate(-50%,-50%). Ring sits at the same centerpoint using
   margins (not transform). */
.hero__profile .avatar_wrap > .avatar-glow__ring {
    position: absolute;
    inset: auto;              /* reset base rule's inset BEFORE setting top/left */
    top: 50%; left: 50%;
    border-radius: 50%; pointer-events: none;
    width: 9.5rem; height: 9.5rem; margin: -4.75rem 0 0 -4.75rem;
}
.hero__profile .avatar_wrap > .avatar { z-index: 2; }
@keyframes avatarGlowSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .avatar-glow__ring { animation: none; }
}
@media (max-width: 576px) {
    .avatar-glow__ring { inset: -7px; }
    .avatar-glow--big .avatar-glow__ring { inset: -10px; }
}

/* Big-avatar (disable_header) variant: centered large avatar layout, no cover image. */
.big-avatar-center-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding-top: 20px;
    margin-bottom: 40px;
}
.big-avatar-img {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    object-fit: cover;
    /* Modern soft-lift shadow; no ring so the avatar-glow ring can breathe. */
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.35);
}
.big-avatar-center-wrap h1 {
    margin-top: 30px;
    font-size: 2.2em;
    text-align: center;
}
.big-avatar-follow-wrap { margin-top: 20px; }
@media (max-width: 768px) {
    .big-avatar-img {
        width: 90vw;
        height: 90vw;
        max-width: 380px;
        max-height: 380px;
    }
    .big-avatar-center-wrap {
        min-height: 70vh;
        padding-top: 6vw;
        margin-bottom: 20px;
    }
}


/* ---------------------------------------------------------------------------
 * Profile actions container (follow + share buttons row).
 * Negative margins pull the row up to overlap the cover bottom — critical
 * because layout without these rules shifts the hero by ~100px.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .profile-actions-container {
        margin-top: -60px !important;
        margin-bottom: -40px !important;
    }
}
@media (max-width: 767px) {
    .profile-actions-container {
        margin-top: 8px !important;
        margin-bottom: -10px !important;
    }
}


/* ---------------------------------------------------------------------------
 * Follow / Unfollow button (profile_follow_model.php).
 *
 * Overrides the `.btn i` positioning in style.css:11025 which is aggressive
 * (margin-top:-16px !important; top:-1px; font-size:20px; height:20px;
 * min-width:20px) and intended for a different button layout. Without these
 * overrides the follow icon sits misaligned inside the hero pill.
 * ------------------------------------------------------------------------- */
.btn-follow { display: inline-flex !important; align-items: center !important; justify-content: center; gap: 6px; }
.btn-follow i {
    margin-top: 0 !important;
    top: 0 !important;
    height: auto !important;
    min-width: 0 !important;
    font-size: 1.1em !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    position: static !important;
}
.btn-follow .lbl-follow,
.btn-follow .lbl-following,
.btn-follow .lbl-unfollow { display: none; }
.btn-follow[data-state="not_following"] .lbl-follow { display: inline; }
.btn-follow[data-state="following"] .lbl-following { display: inline; }
.btn-follow[data-state="following"]:hover .lbl-following { display: none; }
.btn-follow[data-state="following"]:hover .lbl-unfollow { display: inline; }


/* ---------------------------------------------------------------------------
 * Sidebar categories row (profile_tab_bio.php — centered flex-wrap)
 * ------------------------------------------------------------------------- */
.menu_categories_no_scroll {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
}


/* ---------------------------------------------------------------------------
 * Collapsible bio (profile_tab_bio.php).
 *
 * Bio renders with class="collapsed" by default — without these rules the
 * <p>/<textarea> would paint at full height first and snap back to 120px
 * when CSS lands, causing visible CLS on every profile page.
 * ------------------------------------------------------------------------- */
.collapsible-bio-textarea.collapsed {
    max-height: 120px;
    overflow: hidden;
    transition: max-height 0.3s;
    resize: none;
}

.collapsible-bio {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #2a3f56;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0;
}
.is__dark .collapsible-bio {
    color: rgba(255, 255, 255, 0.88);
}
.collapsible-bio.collapsed {
    max-height: 120px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s;
    display: block;
    /* Fade the text itself into transparency instead of overlaying a solid
       gradient — works on any background (translucent, dark, light). */
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.bio-toggle-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin: 10px auto 0;
    border-radius: 50%;
    color: #4477ff;
    background: rgba(68,119,255,0.1);
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
.bio-toggle-link:hover {
    background: rgba(68,119,255,0.2);
    transform: translateY(1px);
}
.bio-toggle-link i {
    font-size: 1.3em;
    line-height: 1;
}


/* ---------------------------------------------------------------------------
 * Ranking chart card (profile_ranking_chart.php — only renders on profiles
 * with a cached ranking position).
 * ------------------------------------------------------------------------- */
.rc-card { padding: 22px 26px; }
.rc-headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.rc-rank-num { font-size: 30px; font-weight: 700; color: var(--rb-dark, #183b56); line-height: 1; letter-spacing: -0.02em; }
.rc-rank-label { font-size: 13px; color: var(--rb-text, #6f7d95); }
.rc-trend { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.rc-trend.up   { background: rgba(54,179,126,0.12); color: #36b37e; }
.rc-trend.down { background: rgba(235,87,87,0.12); color: #eb5757; }
.rc-trend i { font-size: 14px; }
.rc-bars { display: grid; grid-template-columns: repeat(12,1fr); gap: 6px; align-items: end; height: 120px; margin-bottom: 8px; }
.rc-bar-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.rc-bar { width: 100%; max-width: 32px; min-height: 3px; border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, rgba(86,111,254,0.35), rgba(68,119,255,0.6));
    transition: transform 0.15s ease; transform-origin: bottom; }
.rc-bar.current { background: radial-gradient(100% 100% at 50% 0%, #31e7fa 0%, #4477ff 55%, #db74ff 100%); box-shadow: 0 4px 10px rgba(86,111,254,0.25); }
.rc-bar.empty { background: rgba(111,125,149,0.14); min-height: 2px; }
.rc-bar-col:hover .rc-bar { transform: scaleY(1.04); }
.rc-labels { display: grid; grid-template-columns: repeat(12,1fr); gap: 6px; font-size: 11px; color: var(--rb-text, #6f7d95); }
.rc-label { text-align: center; }
.rc-label.current { color: var(--rb-brand, #566ffe); font-weight: 700; }
.is__dark .rc-rank-num { color: #fff; }
.is__dark .rc-bar { background: linear-gradient(to top, rgba(86,111,254,0.45), rgba(68,119,255,0.7)); }
.is__dark .rc-bar.empty { background: rgba(255,255,255,0.08); }


/* ---------------------------------------------------------------------------
 * Desktop width cap (the biggest CLS risk if deferred — caps the whole
 * profile layout + footer to 1000px on ≥992px viewports).
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .profile-main-content {
        max-width: 1000px;
        margin: 0 auto;
    }
    .hero__profile .container {
        max-width: 1000px;
    }
    body > .container,
    .profile-main-content .container {
        max-width: 1000px;
    }
    .footer__1 .container {
        max-width: 1000px;
        margin: 0 auto;
    }
}