/* =========================
   PROFILE.CSS (Profile page)
   Avatar = 120px
   Ring only when has stories:
     unread = gradient
     seen   = grey
   No stories => no ring, keep inner white border
   ========================= */

.profile-cover-bg{
    height:200px;
}

.card-img{
    border-radius: 0px!important;
}

/* Avatar holder sizing (profile) */
.avatar-holder{
    width: 120px !important;
    height: 120px !important;
    display: inline-flex;
    align-items: flex-start;
    border-radius: 50% !important;
    margin-top: -60px !important;
    margin-left: 5px !important;

    /* IMPORTANT: don't clip the ring */
    overflow: visible !important;
}

/* The action buttons opposite the avatar (Edit / QR / Share, or Follow /
   Message / Share on someone else's profile) sat flush against the right
   edge, so they were not inset the way the avatar is on the left. The class
   is specific to this row -- .d-flex.flex-row is used all over the site, and
   putting the margin on that would have moved unrelated layouts. */
.fx-profile-actions-row {
    margin-right: 5px !important;
}

/* Legacy safety if a raw img is used directly */
.avatar-holder > img{
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: transparent !important;
    object-fit: cover;
}

/* Ring anchor */
.profile-avatar-wrap{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;

    /* IMPORTANT: don't clip the ring */
    overflow: visible !important;
}

/* Outer ring (hidden unless has stories) */
.profile-avatar-wrap::before{
    content: "";
    position: absolute;
    inset: -3px;                 /* slim ring thickness */
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;

    opacity: 0;
    background: transparent;
}

/* Show ring when stories exist */
.profile-avatar-wrap.profile-has-stories::before{
    opacity: 1;
}

/* Unread */
.profile-avatar-wrap.profile-has-stories.profile-stories-unseen::before{
    background: linear-gradient(45deg, #ff7a00, #ff0069, #d300c5);
}

/* Seen */
.profile-avatar-wrap.profile-has-stories.profile-stories-seen::before{
    background: #d7dce1;
}

/* Avatar image (always keep the inner white border) */
.profile-avatar-img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;

    position: relative;
    z-index: 2;

    border: 2px solid #fff;
    background: #fff;
}

/* Online indicator */
.profile-avatar-wrap .online-indicator {
    position: absolute;
    z-index: 3;
    right: 10px;
    bottom: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #28a745;
    border: 2px solid #fff;
}

/* Description spacing (your original) */
.description-content p{ margin-bottom: .5rem; }
.description-content p:last-child{ margin-bottom: 5px; }
.description-content p{ margin-bottom: 0.3rem; }

/* Cursor only when user has stories */
.profile-avatar-wrap.profile-has-stories,
.profile-avatar-wrap.profile-has-stories *{
    cursor: pointer;
}

.has-stories-pointer { cursor: pointer; }

/* ===== Highlights row ===== */
.profile-highlights {
    /*margin-top: 6px;*/
    /*margin-bottom: 8px;*/
}

.profile-highlights-swiper .swiper-slide {
    width: auto;
}

.profile-highlight-item {
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-highlight-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 2px solid #d7dce1; /* like IG highlight ring */
    background: #fff;
}

.profile-highlight-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-highlight-label {
    max-width: 64px;
    font-size: 11px;
    line-height: 1.1;
    margin-top: 6px;
    text-align: center;
    color: #6c757d;
}

/* =========================
   Highlights preloader
   ========================= */

/* Highlights wrapper uses same skeleton, but tighter */
.profile-highlights-skeleton .stories-swiper-skeleton {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 12px;
}

/* If your feed skeleton has its own spacing that looks too big */
.profile-highlights-skeleton .stories-swiper-skeleton__item {
    width: 72px; /* optional */
}

.profile-highlights-swiper{
    position: relative; /* keep this always */
}

/* reserve space only while loading */
#profile-highlights.is-loading .profile-highlights-swiper{
    min-height: 92px; /* tweak if you want */
}

/* once loaded, remove the reserved height */
#profile-highlights.is-loaded .profile-highlights-swiper{
    min-height: 0;
}

/* Skeleton overlays the swiper area */
.profile-highlights-skeleton{
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    /* match px-4 (1.5rem) so skeleton aligns with content */
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    /* important: don't turn this into a flex row itself */
    display: block !important;
}


/* When loaded, hide skeleton smoothly */
#profile-highlights.is-loaded .profile-highlights-skeleton{
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease;
}

/* While loading, hide actual slides (optional but nice) */
#profile-highlights.is-loading #profile-highlights-wrapper{
    opacity: 0;
}
#profile-highlights.is-loaded #profile-highlights-wrapper{
    opacity: 1;
    transition: opacity 180ms ease;
}

/* --- Profile social links (lightweight icon chips) --- */
.profile-social-links-row{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-social-chip{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color: inherit;
    text-decoration: none;

    transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease, color .08s ease;
}

.profile-social-chip ion-icon{
    font-size: 18px;
}

.profile-social-chip:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    text-decoration: none;
}

.profile-social-chip .social-media-icon{
    width: 15px;
    height: 15px;
    display: block;
}

/* Brand-ish hover (subtle) */
.profile-social-chip.social-instagram:hover{ border-color:#E1306C; color:#E1306C; }
.profile-social-chip.social-x:hover{ border-color:#111111; color:#111111; }
.profile-social-chip.social-twitter:hover{ border-color:#1DA1F2; color:#1DA1F2; }
.profile-social-chip.social-tiktok:hover{ border-color:#000000; color:#000000; }
.profile-social-chip.social-youtube:hover{ border-color:#FF0000; color:#FF0000; }
.profile-social-chip.social-twitch:hover{ border-color:#9146FF; color:#9146FF; }
.profile-social-chip.social-discord:hover{ border-color:#5865F2; color:#5865F2; }
.profile-social-chip.social-telegram:hover{ border-color:#229ED9; color:#229ED9; }
.profile-social-chip.social-reddit:hover{ border-color:#FF4500; color:#FF4500; }
.profile-social-chip.social-snapchat:hover{ border-color:#FFFC00; color:#111111; }
.profile-social-chip.social-patreon:hover{ border-color:#FF424D; color:#FF424D; }
.profile-social-chip.social-kofi:hover{ border-color:#29ABE0; color:#29ABE0; }
.profile-social-chip.social-buymeacoffee:hover{ border-color:#FFDD00; color:#111111; }
.profile-social-chip.social-linktree:hover{ border-color:#43E660; color:#1a1a1a; }
.profile-social-chip.social-beacons:hover{ border-color:#6C5CE7; color:#6C5CE7; }


/* Spotify profile widget (Swiper) */
.profile-spotify-swiper{
    overflow: hidden;
}

/* Let slides auto-size by width rules below */
.profile-spotify-swiper .swiper-slide{
    flex-shrink: 0;
}

.profile-spotify-swiper .swiper-wrapper{
    align-items: stretch;
}

.profile-spotify-slide{
    height: auto;
}

/* slide widths (work with slidesPerView: 'auto') */
.profile-spotify-slide--artist{
    width: 120px;
}

.profile-spotify-slide--anthem{
    width: 150px;
}

/* shared cover */
.profile-spotify-cover{
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

/* if you ever want anthem taller later, enable this
.profile-spotify-slide--anthem .profile-spotify-cover{
    height: 140px;
}
*/

.profile-spotify-badge{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1db954;
    flex: 0 0 auto;
    display: inline-block;
}

/* Swiper arrows sizing */
.profile-spotify-prev,
.profile-spotify-next{
    --swiper-navigation-size: 16px;
}

/* Pagination wrapper (so bullets appear below, not overlay) */
.swiper-pagination-wrapper{
    margin-top: .5rem;
    text-align: center;
}

.profile-spotify-pagination{
    position: static;
}