/* ===========================================================================
 * rank-pills.css — unified visual language for ranking position and trend
 * indicators across the site (homepage, rankings list, profile hero, listings).
 *
 * One family, four variants — all share pill shape, Remix Icon glyphs, and the
 * same up=green / down=red / neutral=gray color semantics. The icon distinguishes
 * *type* (position vs views), color distinguishes *direction*.
 *
 *   .rank-pill--lg      — homepage + /en/ranking (two deltas side by side)
 *   .rank-pill--hero    — profile cover (frosted-glass overlay w/ absolute + delta)
 *   .rank-pill--sm      — listings (compact brand-blue, absolute + inline delta)
 *   .rank-pill--new     — attention badge (kept loud; uses brand radial gradient)
 *
 * Color tokens are inherited from the site palette (--rb-brand, --rb-green,
 * --rb-red, --rb-text) so dark-mode overrides in profile_dark.php still apply.
 * ========================================================================= */


/* ---------------------------------------------------------------------------
 * Container + base shared structure
 * ------------------------------------------------------------------------- */
.rank-pills {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    vertical-align: middle;
    line-height: 1.2;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.rank-pill-icon,
.rank-pill-brand-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}
.rank-pill-value { font-weight: 600; }
.rank-pill-label {
    color: var(--rb-text, #6f7d95);
    font-size: 0.85em;
    font-weight: 500;
    margin-left: 2px;
}

/* Inline delta chip — sits inside an absolute-position pill (hero, sm variants)
   to show the trend arrow + number. Rendered as a mini-pill so up/down color
   reads at a glance without overwhelming the parent. */
.rank-pill-delta {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.9em;
    font-weight: 600;
    padding: 1px 6px 1px 3px;
    border-radius: 999px;
    margin-left: 4px;
}
.rank-pill-delta i { font-size: 1.1em; line-height: 1; }


/* ---------------------------------------------------------------------------
 * Direction color tokens — applied via rank-pill--up / --down / --neutral on
 * the parent (for lg), or rank-pill-delta--up / --down / --neutral on the
 * inline delta chip (for hero and sm).
 * ------------------------------------------------------------------------- */
.rank-pill--up {
    background: rgba(54, 179, 126, 0.12);
    color: #36b37e;
    border: 1px solid rgba(54, 179, 126, 0.28);
}
.rank-pill--down {
    background: rgba(235, 87, 87, 0.12);
    color: #eb5757;
    border: 1px solid rgba(235, 87, 87, 0.28);
}
.rank-pill--neutral {
    background: rgba(111, 125, 149, 0.1);
    color: #6f7d95;
    border: 1px solid rgba(111, 125, 149, 0.22);
}

.rank-pill-delta--up {
    background: rgba(54, 179, 126, 0.9);
    color: #fff;
}
.rank-pill-delta--down {
    background: rgba(235, 87, 87, 0.9);
    color: #fff;
}
.rank-pill-delta--neutral {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}


/* ---------------------------------------------------------------------------
 * Size L — homepage + /en/ranking delta pills
 * ------------------------------------------------------------------------- */
.rank-pill--lg {
    padding: 4px 12px 4px 8px;
    font-size: 13px;
}
.rank-pill--lg .rank-pill-icon { font-size: 15px; }


/* ---------------------------------------------------------------------------
 * Size Hero — profile cover frosted-glass chip with absolute + delta.
 * Same glass treatment as the old .profile-rank-chip so dark mode and cover
 * contrast stay identical; the delta mini-pill sits inside using translucent
 * white so it reads against any cover image.
 * ------------------------------------------------------------------------- */
.rank-pill--hero {
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    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);
}
.rank-pill--hero: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;
}
.rank-pill--hero .rank-pill-brand-icon {
    vertical-align: -3px;
}
/* Hero delta mini-pill is slightly softer than the lg variant because it sits
   on the frosted glass, not on a page background. */
.rank-pill--hero .rank-pill-delta {
    padding: 1px 6px 1px 3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ---------------------------------------------------------------------------
 * Size S — listings thumbnail overlay. Positioned top-left of the creator
 * card, mirroring the wishlist heart on top-right. Uses the same frosted-glass
 * treatment as .rank-pill--hero (white-18% + blur + text-shadow) so both
 * overlay contexts share identical visual DNA — a visitor sees the hero chip
 * on a profile and the same chip on every listing card.
 * Caller (model_row_2.php) places the pill with inline position + z-index.
 * ------------------------------------------------------------------------- */
.rank-pill--sm {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    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);
    letter-spacing: 0.2px;
}
.rank-pill--sm:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.rank-pill--sm .rank-pill-icon { font-size: 13px; opacity: 0.95; }
/* Delta keeps its solid green/red fill (set by .rank-pill-delta--up/--down) —
   reads cleanly against the frosted glass and preserves the trend cue. */
.rank-pill--sm .rank-pill-delta {
    margin-left: 5px;
    padding: 1px 6px 1px 2px;
}


/* ---------------------------------------------------------------------------
 * NEW badge — still the attention-grabber, now consistent with the family.
 * Uses the brand radial gradient (same as the hero avatar glow ring) so it
 * reads as a premium / branded cue rather than a generic highlight.
 * ------------------------------------------------------------------------- */
.rank-pill--new {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff;
    background: radial-gradient(100% 100% at 53.13% 0%, #31e7fa 0%, #4477ff 52.6%, #db74ff 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(219, 116, 255, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.rank-pill--new:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(219, 116, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}