/* ==========================================================================
   0. GLOBAL VARIABLES & LAYOUT OVERRIDES
   ========================================================================== */
:root {
    --pt-rank-grey:   #6c757d;
    --pt-rank-green:  #27ae60;
    --pt-rank-blue:   #2980b9;
    --pt-rank-purple: #8e44ad;
    --pt-rank-gold:   #f1c40f;
    --pt-rank-black:  #2c3e50;
    --pt-bg-light:    #f9f9f9;
    --pt-border:      #eee;
    --pt-rank-teal:   #1abc9c;
}


/* 2. Add the Badge Class */
.pt-tier-badge.pt-badge-teal { 
    background-color: var(--pt-rank-teal) !important; 
}

/* 3. Add the Progress Bar Fill Class */
.pt-progress-fill.pt-badge-teal { 
    background-color: var(--pt-rank-teal); 
}

/* Add this to Section 7 of your CSS */

.pt-text-desktop { 
    display: inline; 
}

.pt-text-mobile { 
    display: none; /* Hide mobile text by default on desktop */
}


/* Force Full Width on Profile Page */
body.pt-public-profile-page .grid-container,
body.pt-public-profile-page .site-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Main Wrapper */
.pt-profile-wrapper {
    background-color: var(--pt-bg-light);
    padding: 40px 0;
    min-height: 80vh;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Inner Container (Strict 1200px) */
.pt-profile-wrapper .pt-container {
    width: 100%;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: hidden; /* Prevents slider overflow */
}

/* ==========================================================================
   1. PROFILE HEADER & IDENTITY
   ========================================================================== */
.pt-profile-header {
    background: #fff;
    border: 1px solid var(--pt-border);
    border-radius: 4px;
    padding: 40px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* Avatar Column */
.pt-profile-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.pt-profile-avatar img {
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 150px;
    height: 150px;
    object-fit: contain;
}

/* Info Column */
.pt-profile-info { flex-grow: 1; }

.pt-profile-name {
    margin: 0 0 10px 0;
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #000;
    line-height: 1.2;
}

.pt-profile-bio {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    max-width: 700px;
    margin-top: 15px;
}

.pt-joined-date {
    display: block;
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

/* Garage & Meta Pills */
.pt-profile-garage {
    background: #f4f4f4;
    padding: 10px 15px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 700;
    margin-top: 15px;
    font-size: 0.9rem;
}
.pt-garage-label {
    text-transform: uppercase;
    color: #888;
    margin-right: 5px;
    font-size: 0.8rem;
}

.pt-stat-link {
    background: #f5f5f5;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    display: inline-block;
    transition: background 0.2s;
}
.pt-stat-link:hover { background: #e0e0e0; }

/* ==========================================================================
   2. RANKS, BADGES & PROGRESS BAR
   ========================================================================== */

/* Rank Row Layout */
.pt-rank-row {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 450px;
    margin-bottom: 15px;
    gap: 10px;
    flex-wrap: wrap; /* Safety wrap for small screens */
    position: relative; /* Context for tooltips if needed */
}

/* 1. Tier Badge (The Pill) */
.pt-tier-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: #fff !important; 
    padding: 3px 10px;
    border-radius: 50px; 
    line-height: 1.2;
    letter-spacing: 0.5px;
    white-space: nowrap !important;
}

/* 2. Verified Badge */
.pt-verified-badge {
    background-color: #f7d82f;
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 50px; 
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
}

/* 3. Reputation Text (Trigger) */
.pt-rep-trigger {
    display: inline-block;
    margin-left: auto; /* Pushes to right */
}

.pt-fire-score {
    font-size: 1.1rem;
    font-weight: 800;
    color: #000;
    cursor: help;
    white-space: nowrap;
    border-bottom: 1px dashed #999;
    padding-bottom: 2px;
}

/* 5. Progress Bar (Darker Version) */
.pt-progress-container {
    width: 100%;
    max-width: 450px;
    margin-bottom: 20px;
}

.pt-progress-bar {
    height: 12px;
    background: #e0e0e0; /* Darker grey base */
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.pt-progress-fill {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.pt-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
}

/* ==========================================================================
   3. BUTTONS (Header Follow / Message / Archive)
   ========================================================================== */
.pt-follow-btn.profile-main-btn {
    background-color: #d00;
    color: #ffffff;
    border: 1px solid #b00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    width: 150px; 
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pt-follow-btn.profile-main-btn:hover { background-color: #b00; border-color: #900; }
.pt-follow-btn.profile-main-btn.following { background-color: transparent; color: #333; border: 1px solid #ddd; }
.pt-follow-btn.profile-main-btn.following:hover { background-color: #fff0f0; color: #d00; border-color: #d00; }

.pt-archive-btn {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #000;
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    background: transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-top: auto;
    text-align: center;
}
.pt-archive-btn:hover { background: #000; color: #fff; }

/* ==========================================================================
   4. CARDS & GRID SLIDER (Builds, Market, Reviews)
   ========================================================================== */
.pt-section-title {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 3px solid #000;
    padding-bottom: 15px;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

/* Grid Container */
.pt-slider-container { position: relative; width: 100%; }

.pt-public-builds-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    align-items: stretch;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 25px;
    padding-right: 5px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar Style */
.pt-public-builds-grid::-webkit-scrollbar { height: 8px; }
.pt-public-builds-grid::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.pt-public-builds-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.pt-public-builds-grid::-webkit-scrollbar-thumb:hover { background: #000; }

/* Universal Card Style */
.pt-public-build-card, .pt-review-card {
    flex: 0 0 300px;
    width: 300px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.pt-public-build-card:hover, .pt-review-card:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

/* Simple, Bold Vehicle Name */
.pt-build-vehicle-name {
    margin-top: auto; /* Pins it to the bottom of the card */
    font-size: 0.75rem;
    font-weight: 800;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 8px; /* Breathing room from title */
    line-height: 1.2;
}

/* Thumbnail */
.pt-build-thumb {
    width: 100%;
    height: 180px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    padding: 10px; /* Adds breathing room for product images */
}

.pt-build-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.pt-public-build-card:hover .pt-build-img { transform: scale(1.05); }

/* Details Section */
.pt-build-details { 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}

.pt-build-details h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #000;
    line-height: 1.3;
}

/* Status Pill */
.pt-status-pill {
    align-self: flex-start;
    font-size: 0.6rem;
    padding: 4px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 12px;
    color: #fff;
    background: #000; 
}
.pt-status-planning { background-color: #6c757d; }
.pt-status-wrenching { background-color: #d63384; }
.pt-status-tuning { background-color: #0dcaf0; color:#000; }
.pt-status-track { background-color: #ffc107; color:#000; }
.pt-status-broken { background-color: #dc3545; }
.pt-status-completed { background-color: #198754; }

/* Navigation Arrows */
.pt-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #000;
    transition: all 0.2s ease;
}
.pt-scroll-btn:hover { background: #000; color: #fff; }
.pt-scroll-left { left: -20px; }
.pt-scroll-right { right: -20px; }

/* ==========================================================================
   5. REVIEW CARD SPECIFICS (Preserved Styling)
   ========================================================================== */
.pt-review-card .pt-build-thumb {
    background-color: #fff; /* White background for product images */
}

/* Star Rating (SVG Clip Path) */
.pt-star-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 12px;
}
.pt-star-rating .star-icon {
    width: 14px; 
    height: 14px;
    background-color: #e0e0e0;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.pt-star-rating .star-icon.full { background-color: #f7d82f !important; }

/* Review Snippet */
.pt-review-snippet {
    font-size: 0.85rem;
    color: #555;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 15px;
    flex-grow: 1; /* Pushes date to bottom */
}

/* Review Date */
.pt-review-date {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: auto;
    border-top: 1px solid #f5f5f5;
    padding-top: 10px;
    display: block;
}

/* ==========================================================================
   6. CONNECTION CARDS (Follow/Unfollow Button Logic)
   ========================================================================== */

/* 1. Default "Follow" State (Black Button) */
.pt-connection-card .pt-follow-btn {
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    font-weight: 700;
    text-transform: capitalize; /* "Follow" instead of "FOLLOW" */
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* 2. Active "Unfollow" State (White Bg, Grey Border) */
.pt-connection-card .pt-follow-btn.following {
    background-color: #fff !important;      /* White Background */
    color: #333 !important;                 /* Dark Grey/Black Text */
    border: 1px solid #ccc !important;      /* Light Grey Border */
    box-shadow: none !important;
}

/* 3. Hover State for Unfollow (Red warning) */
.pt-connection-card .pt-follow-btn.following:hover {
    color: #d00 !important;
    border-color: #d00 !important;
    background-color: #fff !important;
}

/* ==========================================================================
   7. UTILITY & COLOR CLASSES
   ========================================================================== */
.pt-tier-badge.pt-badge-grey    { background-color: var(--pt-rank-grey) !important; }
.pt-tier-badge.pt-badge-green   { background-color: var(--pt-rank-green) !important; }
.pt-tier-badge.pt-badge-blue    { background-color: var(--pt-rank-blue) !important; }
.pt-tier-badge.pt-badge-purple { background-color: var(--pt-rank-purple) !important; }
.pt-tier-badge.pt-badge-gold    { background: linear-gradient(135deg, #f1c40f, #f39c12) !important; color: #000 !important; }
.pt-tier-badge.pt-badge-black   { background: linear-gradient(135deg, #2c3e50, #000000) !important; }

.pt-progress-fill.pt-badge-grey    { background-color: var(--pt-rank-grey); }
.pt-progress-fill.pt-badge-green   { background-color: var(--pt-rank-green); }
.pt-progress-fill.pt-badge-blue    { background-color: var(--pt-rank-blue); }
.pt-progress-fill.pt-badge-purple { background-color: var(--pt-rank-purple); }
.pt-progress-fill.pt-badge-gold    { background: linear-gradient(90deg, #f1c40f, #f39c12); }
.pt-progress-fill.pt-badge-black   { background: linear-gradient(90deg, #2c3e50, #000); }

/* ==========================================================================
   8. RESPONSIVE (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    .pt-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 20px;
    }
    
    .pt-profile-avatar { margin-bottom: 20px; }
    
    .pt-rank-row { 
        justify-content: center; /* Center rank pills */
        max-width: 100%;
    }
    
    .pt-public-build-card, .pt-review-card {
        flex: 0 0 85%; 
        width: 85%;
    }
    
    .pt-scroll-btn { display: none !important; }
    
    .pt-text-desktop { display: none; }
    .pt-text-mobile { display: inline; }
}



/* ==========================================================================
   9. ARCHIVE BUTTONS REDESIGN (Scoped & Specific)
   ========================================================================== */

/* 1. MAIN BLACK BUTTONS 
   Targets only: Topics (.pt-topic-card) and Marketplace/Builds (.pt-public-build-card).
   Explicitly excludes Tribes (.pt-tribe-card).
*/
.pt-profile-wrapper .pt-topic-card .pt-archive-btn,
.pt-profile-wrapper .pt-public-build-card .pt-archive-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px; 
    
    padding: 10px 24px !important;
    background-color: #000 !important; /* Solid Black */
    color: #fff !important;
    border: 1px solid #000 !important;
    
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    line-height: 1 !important;
    
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-top: auto;
    min-width: 120px;
    cursor: pointer;
}

/* Hover State for Main Buttons */
.pt-profile-wrapper .pt-topic-card .pt-archive-btn:hover,
.pt-profile-wrapper .pt-public-build-card .pt-archive-btn:hover {
    background-color: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* 2. REPLY BUTTONS (Grey Style)
   Targets only: Replies (.pt-reply-card).
   We give these a lighter style so they don't overpower the text.
*/
.pt-profile-wrapper .pt-reply-card .pt-archive-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 6px 16px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    
    background-color: #f5f5f5 !important; /* Light Grey */
    color: #333 !important;
    border: 1px solid #ddd !important;
    border-radius: 50px !important; /* Matches pill shape */
    
    transition: all 0.2s ease !important;
    min-width: auto;
    box-shadow: none;
    margin-top: 0;
}

/* Hover State for Reply Buttons */
.pt-profile-wrapper .pt-reply-card .pt-archive-btn:hover {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


/* =========================================================
   10. TRIBE CARD STYLING (FINAL LAYOUT)
   ========================================================= */

/* 1. Card Container Override */
.pt-profile-wrapper .pt-tribe-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}

.pt-profile-wrapper .pt-tribe-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* 2. Cover Image */
.pt-profile-wrapper .pt-tribe-card .pt-card-cover {
    height: 160px;
    background-size: cover;
    background-position: center;
    position: relative;
    background-color: #333;
}

/* 3. Header Row (Title Left / Badge Right) */
.pt-profile-wrapper .pt-card-header-row {
    display: flex;
    justify-content: space-between; /* This pushes badge to far right */
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 5px;
}

/* Title Styling */
.pt-profile-wrapper .pt-tribe-card h4 {
    margin: 0; 
    font-size: 1.1rem;
    font-weight: 800;
    color: #111;
    line-height: 1.3;
}

/* Badge Styling (Now inline) */
.pt-profile-wrapper .pt-card-badges {
    flex-shrink: 0; 
    /* No position:absolute needed here anymore */
}

.pt-profile-wrapper .pt-badge {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    display: inline-block;
}

.pt-profile-wrapper .pt-badge.public { 
    background: #ecfdf5; 
    color: #047857;      
    border: 1px solid #a7f3d0;
}

.pt-profile-wrapper .pt-badge.private { 
    background: #fffbeb; 
    color: #b45309;      
    border: 1px solid #fcd34d;
}

/* 4. Content Styling */
.pt-profile-wrapper .pt-tribe-card p {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    flex-grow: 1; 
}

/* 5. Member Count & Author Overlay (Bottom of Image) */
.pt-profile-wrapper .pt-member-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* 🏆 FLEXBOX: Space Between */
    display: flex;
    justify-content: space-between; 
    align-items: center;
    
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    padding: 10px 15px;
    font-size: 0.75rem; 
    font-weight: 600;
    box-sizing: border-box; 
}

/* 6. View Button */
.pt-profile-wrapper .pt-tribe-card .pt-archive-btn {
    text-align: center;
    display: block;
    background: #fff;
    color: #d00;
    border: 1px solid #eee;
    padding: 10px 0;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: all 0.2s;
    box-shadow: none;
    margin: 0;
}

.pt-profile-wrapper .pt-tribe-card .pt-archive-btn:hover {
    background: #d00;
    color: #fff;
    border-color: #d00;
}


/* =========================================================
   11. TOOLTIP SYSTEM (UNIFIED & POSITIONED DOWN)
   ========================================================= */

/* 1. The Trigger (The element you hover over) */
.pt-tooltip-trigger {
    position: relative;
    cursor: help;
}

/* 2. The Popup Box (Hidden by Default) */
.pt-tooltip-popup {
    visibility: hidden;
    opacity: 0;
    
    /* Positioning DOWN (To prevent cutting off at top of screen) */
    position: absolute;
    top: 120%; /* Puts it below the element */
    left: 50%;
    transform: translateX(-50%); /* Centers it horizontally */
    z-index: 9999;
    
    /* Appearance */
    background-color: #1a1a1a;
    color: #fff;
    text-align: left;
    border-radius: 8px;
    padding: 15px;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 400;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid #333;
    
    /* Animation */
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    
    /* Sizing */
    width: 220px; /* Standard width */
    white-space: normal;
    text-transform: none;
}

/* Wide Modifier for Ranks Table */
.pt-tooltip-popup.pt-tooltip-wide {
    width: 260px;
}

/* 3. The Arrow (Pointing UP now) */
.pt-tooltip-popup::after {
    content: "";
    position: absolute;
    bottom: 100%; /* Top of tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #1a1a1a transparent; /* Points Up */
}

/* 4. Show on Hover */
.pt-tooltip-trigger:hover .pt-tooltip-popup {
    visibility: visible;
    opacity: 1;
    top: 130%; /* Slight slide down effect */
}

/* 5. Mobile Adjustment (Prevent overflow off screen edge) */
@media (max-width: 500px) {
    /* For the wide rank table, shift it slightly if needed */
    .pt-tooltip-popup.pt-tooltip-wide {
        width: 250px;
    }
    
    /* If the Rep trigger is too far right, shift the tooltip left */
    .pt-rep-trigger .pt-tooltip-popup {
        left: auto;
        right: 0;
        transform: none;
    }
    
    /* Adjust arrow for Rep trigger on mobile */
    .pt-rep-trigger .pt-tooltip-popup::after {
        left: auto;
        right: 20px;
        margin-left: 0;
    }
}

/* 6. Content Styling inside Tooltip */
.pt-tooltip-popup strong {
    color: #fff;
    display: block;
    margin-bottom: 8px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    font-size: 0.85rem;
}

.pt-tooltip-popup em {
    color: #aaa;
    font-size: 0.7rem;
    margin-top: 8px;
    display: block;
}

/* List Styling (For Rep Matrix) */
.pt-tooltip-popup ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-tooltip-popup ul li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #333;
    color: #ccc;
}

.pt-tooltip-popup ul li:last-child {
    border-bottom: none;
}

.pt-tooltip-popup ul li strong {
    color: #f1c40f; /* Gold for points */
    border: none;
    margin: 0;
    padding: 0;
}

/* Table Styling (For Rank Table) */
.pt-tooltip-popup table td {
    padding: 3px 0;
    color: #ccc;
}