/* ============================================================
   SIDEBAR & WIDGET CONTAINER
   ============================================================ */
.profilegrid-sidebar-column {
    width: 100%; 
    height: 100%; 
    position: relative;
}

.sticky-sidebar-inner {
    display: flex; 
    flex-direction: column; 
    gap: 25px;
    width: 100%; 
    position: -webkit-sticky;
    position: sticky; 
    top: 90px; 
    z-index: 100;
}

.sticky-sidebar-inner::-webkit-scrollbar { display: none; }

.sidebar-widget {
    background-color: #fff; 
    border: 1px solid #e9ecef;
    border-radius: 16px; 
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); 
    width: 100%;
}

.widget-title {
    margin: 0 0 20px; 
    font-size: 18px; 
    font-weight: 700; 
    color: #222;
    border-bottom: 2px solid #f0f0f0; 
    padding-bottom: 10px;
}

/* ============================================================
   LIST ITEMS (COMMON FOR BOTH)
   ============================================================ */
.entity-list, .trending-list {
    list-style: none; 
    padding: 0; 
    margin: 0;
    display: flex; 
    flex-direction: column; 
    gap: 12px; /* Gap thoda kam kiya */
}

.entity-list-item, .trending-list-item {
    background-color: #fff; 
    border: 1px solid #f0f0f0;
    border-radius: 10px; /* Thoda sleek radius */
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.entity-list-item:hover, .trending-list-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.entity-list-item a, .trending-list-item a {
    display: flex; 
    align-items: center; 
    gap: 12px; /* Image aur text ke beech ka gap kam kiya */
    text-decoration: none; 
    color: inherit; 
    padding: 10px 12px; /* Padding thodi compact ki */
    width: 100%; /* Ensure full width */
    box-sizing: border-box;
}

/* ============================================================
   UPDATED IMAGE STYLES (SMALL SQUARE)
   ============================================================ */
.entity-image {
    width: 38px;  /* Size chota kiya (pehle 50px tha) */
    height: 38px;
    border-radius: 8px; /* Square with rounded corners */
    object-fit: cover; 
    border: 1px solid #eee;
    flex-shrink: 0; /* Image ko shrinking se bachata hai */
}

/* ============================================================
   TEXT LAYOUT (MAGIC FIX FOR ONE LINE)
   ============================================================ */
.entity-info, .trending-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;      /* Bachi hui jagah lega */
    min-width: 0; /* CRITICAL: Flexbox mein text overflow rokne ke liye zaroori hai */
}

.entity-name, .trending-name {
    font-weight: 700; 
    color: #222; 
    font-size: 14px; /* Font size thoda adjust kiya taaki lamba naam fit ho */
    line-height: 1.2; 
    margin-bottom: 2px;
    
    /* ONE LINE MAGIC */
    white-space: nowrap;  /* Text ko doosri line mein jane se rokta hai */
    overflow: hidden;     /* Extra text ko chupata hai */
    text-overflow: ellipsis; /* Lambe naam ke aage '...' lagata hai taaki clean dikhe */
    display: block;
}

.trending-profession, .entity-profession-sub {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ============================================================
   RIGHT SIDE META BOXES (DAYS / BOOSTS)
   ============================================================ */
.trending-meta, .birthday-meta {
    margin-left: auto; 
    text-align: center; 
    padding: 5px 8px; /* Compact Padding */
    border-radius: 8px; /* Match Image Radius */
    background-color: #ff396a; 
    min-width: 55px;
    flex-shrink: 0; /* Box ko shrinking se bachata hai */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.trending-count, .birthday-count {
    display: block; 
    font-weight: 700; 
    color: #fff;
    font-size: 12px; 
    line-height: 1;
}

.boost-label, .birthday-label {
    display: block; 
    font-size: 9px; 
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase; 
    line-height: 1;
    margin-top: 3px;
}

.birthday-meta.is-today {
    background-color: #28a745;
    animation: celebratory-pulse 2s infinite;
}

/* ============================================================
   TRENDING NUMBERS & LEGACY
   ============================================================ */
.trending-list { counter-reset: trending-counter; }
.trending-list-item { counter-increment: trending-counter; }

.trending-list-item a::before {
    content: counter(trending-counter);
    font-weight: 700; 
    font-size: 16px; 
    color: #ccc;
    min-width: 18px; 
    text-align: center;
}

.trending-list-item:nth-child(1) a::before { color: #FFD700; }
.trending-list-item:nth-child(2) a::before { color: #C0C0C0; }
.trending-list-item:nth-child(3) a::before { color: #CD7F32; }

/* ============================================================
   FANS ALSO VIEWED / RELATED CELEBS FIX
   (Compact Stars & Grid)
   ============================================================ */
.sidebar-widget .rank-badge {
    width: 28px !important;
    height: 28px !important;
}

.sidebar-widget .rank-badge__number {
    font-size: 9px !important;
}

.related-celebs-grid {
    gap: 12px !important; /* Cards ke darmiyan gap kam kiya */
}

/* ============================================================
   DECEASED & MISC STYLES
   ============================================================ */
/* Deceased Styles */
.entity-list-item.is-deceased .entity-image { filter: grayscale(100%); }
.entity-list-item.is-deceased:hover .entity-image { filter: grayscale(0%); }
.entity-list-item.is-deceased .entity-meta {
    background-color: #6c757d; 
    color: #fff; 
    font-size: 10px; 
    padding: 4px 8px; 
    border-radius: 12px;
}

/* Ad & Mobile */
.widget-ad { text-align: center; border: none; padding: 0; }

@keyframes celebratory-pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

@media (max-width: 991px) {
    .profilegrid-sidebar-column { 
        flex: 0 0 100% !important; 
        margin-top: 30px; 
        position: static !important; 
    }
    .sticky-sidebar-inner { position: static !important; }
}