/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 10 2026 | 00:14:55 */
/* ==========================================================
   NOTE.radio V2 — CHART TRACKLIST / TOP 3 — COMPACT
   Stage 4A.3 — Header Button + Position Hover Fix

   Elementor widget class:
   ntr-v2-chart-top3

   Final compact order:
   POSITION + ARTWORK | TITLE / ARTIST | VOTE ↑↓
   ========================================================== */

.ntr-v2-home .ntr-v2-chart-top3 {
    width: 100%;
    min-width: 0;
}


/* ==========================================================
   01. BASE
   ========================================================== */

.ntr-v2-home .ntr-v2-chart-top3,
.ntr-v2-home .ntr-v2-chart-top3 .elementor-widget-container,
.ntr-v2-home .ntr-v2-chart-top3 .proradio-chart-tracklist {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.ntr-v2-home .ntr-v2-chart-top3 .elementor-widget-container {
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;
}

.ntr-v2-home .ntr-v2-chart-top3 .proradio-chart-tracklist {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   02. TRACK CARD
   ========================================================== */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-track {
    list-style: none !important;

    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: var(--ntr-surface-2) !important;
    border: 1px solid var(--ntr-border) !important;
    border-radius: var(--ntr-radius-md, 14px) !important;

    box-shadow: none !important;
}

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-track:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   03. MAIN ROW
   POSITION + IMAGE | TITLE / ARTIST | VOTE
   ========================================================== */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-table {
    display: grid !important;

    grid-template-columns:
        112px
        minmax(0, 1fr)
        42px !important;

    grid-template-areas:
        "position titles vote" !important;

    align-items: center !important;

    column-gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 70px !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    background: transparent !important;
}


/* explicit native Pro.Radio placement */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-table > .proradio-position {
    grid-area: position !important;
}

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-table > .proradio-titles {
    grid-area: titles !important;
}

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-table > .proradio-chartvote {
    grid-area: vote !important;
}


/* hide Pro.Radio cart/download/action icon */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-table > .proradio-action {
    display: none !important;
}


/* ==========================================================
   04. POSITION + ARTWORK
   ========================================================== */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-position {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 42px 62px !important;
    grid-template-rows: 62px !important;

    align-items: center !important;

    gap: 8px !important;

    width: 112px !important;
    min-width: 112px !important;
    height: 62px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: transparent !important;
}


/* position */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-position .proradio-capfont {
    position: static !important;

    grid-column: 1 !important;
    grid-row: 1 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ntr-text-primary) !important;
    background: var(--ntr-surface-3) !important;

    border: 1px solid var(--ntr-border) !important;
    border-radius: 9px !important;

    font-family: "Outfit", sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    text-shadow: none !important;

    z-index: 2 !important;
}


/* first place */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-track:first-child
.proradio-position .proradio-capfont {
    color: #fff !important;
    background: var(--ntr-accent) !important;
    border-color: var(--ntr-accent) !important;
}


/* Pro.Radio native hover hides the position number and reveals a play icon.
   In this compact Top3 component the current position must remain visible. */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-track:hover
.proradio-position .proradio-capfont,
.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-track:hover
.proradio-chart-table .proradio-position p {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--ntr-text-primary) !important;
    transform: none !important;
}

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-track:first-child:hover
.proradio-position .proradio-capfont,
.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-track:first-child:hover
.proradio-chart-table .proradio-position p {
    color: #fff !important;
    background: var(--ntr-accent) !important;
    border-color: var(--ntr-accent) !important;
}

/* Keep Pro.Radio hover play glyph suppressed. */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-track:hover
.proradio-chart-table .proradio-position > i {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


/* artwork */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-position img.proradio-chart-cover {
    position: static !important;

    grid-column: 2 !important;
    grid-row: 1 !important;

    display: block !important;

    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;

    opacity: 1 !important;

    border-radius: 9px !important;

    z-index: 1 !important;
}


/* hide native play overlay */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-position > i.material-icons {
    display: none !important;
}


/* ==========================================================
   05. TITLE + ARTIST
   ========================================================== */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-titles {
    display: flex !important;

    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    gap: 3px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;
}


/* title */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-titles > .proradio-cutme-t {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ntr-text-primary) !important;

    font-family: "Outfit", sans-serif !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* artist */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-titles > .proradio-itemmetas {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ntr-text-secondary) !important;

    font-family: "Outfit", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* Hide Chart History metadata in the Top3 compact widget.
   History still exists and remains available on the full chart. */

.ntr-v2-home .ntr-v2-chart-top3
.ntr-chart-history-meta {
    display: none !important;
}


/* ==========================================================
   06. NATIVE CHARTVOTE
   ========================================================== */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    width: 42px !important;
    min-width: 42px !important;
    height: 58px !important;

    margin: 0 !important;
    padding: 0 0 0 7px !important;

    overflow: visible !important;

    background: transparent !important;

    border: 0 !important;
    border-left: 1px solid var(--ntr-border) !important;
    border-radius: 0 !important;
}


/* hide numeric vote score */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote-number {
    display: none !important;
}


/* vote buttons */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote .proradio-chartvote-link {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    clear: none !important;

    width: 32px !important;
    height: 25px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ntr-text-secondary) !important;
    background: var(--ntr-surface-3) !important;

    border: 1px solid var(--ntr-border) !important;
    border-radius: 7px !important;

    line-height: 1 !important;

    cursor: pointer !important;
}


/* reset native icon geometry */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote .proradio-chartvote-link > i {
    display: block !important;

    width: 12px !important;
    height: 12px !important;

    margin: 0 !important;
    padding: 0 !important;
}


.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote .proradio-chartvote-link > i::before {
    content: "" !important;

    display: block !important;

    width: 8px !important;
    height: 8px !important;

    margin: 2px auto 0 !important;

    border: 2px solid currentColor !important;
    border-width: 2px 2px 0 0 !important;

    transform: rotate(-45deg) !important;
}


/* UP vote */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote .proradio-chartvote-link.qt-up {
    color: var(--ntr-accent) !important;
    transform: none !important;
}


/* DOWN vote */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote .proradio-chartvote-link.qt-down {
    color: var(--ntr-text-secondary) !important;
    transform: rotate(180deg) !important;
}


.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote .proradio-chartvote-link:not(.disabled):hover {
    color: #fff !important;
    background: var(--ntr-accent) !important;
    border-color: var(--ntr-accent) !important;
}


.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote.disabled .proradio-chartvote-link,
.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote .proradio-chartvote-link.disabled {
    opacity: .4 !important;
    cursor: not-allowed !important;
}


/* ==========================================================
   07. COLLAPSIBLE PLAYER
   Keep native Pro.Radio player functionality if opened.
   ========================================================== */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chart-track > .collapsible-body {
    margin: 0 !important;
    padding: 8px 10px !important;

    background: var(--ntr-surface) !important;

    border: 0 !important;
    border-top: 1px solid var(--ntr-border) !important;
}


/* ==========================================================
   08. STATIC FULL-LIST CTA
   IMPORTANT:
   The native Pro.Radio "link to single chart" must be OFF.
   This button is a separate Elementor Button widget linking to
   the permanent NOTE20 page.
   Elementor widget class:
   ntr-v2-chart-full-link
   ========================================================== */

.ntr-v2-home .ntr-v2-chart-full-link {
    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Elementor button */

.ntr-v2-home .ntr-v2-chart-full-link
.elementor-button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 7px 14px !important;

    color: #fff !important;
    background: var(--ntr-accent) !important;

    border: 1px solid var(--ntr-accent) !important;
    border-radius: 999px !important;

    box-shadow: none !important;

    font-family: "Outfit", sans-serif !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1 !important;

    text-transform: uppercase !important;
    text-decoration: none !important;

    white-space: nowrap !important;

    transition:
        filter .18s ease,
        transform .18s ease !important;
}


.ntr-v2-home .ntr-v2-chart-full-link
.elementor-button:hover {
    color: #fff !important;
    background: var(--ntr-accent) !important;
    border-color: var(--ntr-accent) !important;

    filter: brightness(.94) !important;
}


.ntr-v2-home .ntr-v2-chart-full-link
.elementor-button:active {
    transform: translateY(1px) !important;
}


/* Optional header wrapper around NOTE20 heading + static CTA */

.ntr-v2-home .ntr-v2-chart-header {
    display: flex !important;

    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}


/* Native Pro.Radio single-chart link must not be used in this component.
   This is a safety fallback in case the widget option is accidentally enabled. */

.ntr-v2-home .ntr-v2-chart-top3
p.aligncenter {
    display: none !important;
}


/* ==========================================================
   09. VERY NARROW RAIL
   ========================================================== */

@media (max-width: 1200px) {

    .ntr-v2-home .ntr-v2-chart-top3
    .proradio-chart-table {
        grid-template-columns:
            96px
            minmax(0, 1fr)
            38px !important;

        column-gap: 6px !important;

        min-height: 64px !important;

        padding: 7px 8px !important;
    }


    .ntr-v2-home .ntr-v2-chart-top3
    .proradio-position {
        grid-template-columns: 38px 52px !important;
        grid-template-rows: 52px !important;

        gap: 6px !important;

        width: 96px !important;
        min-width: 96px !important;
        height: 52px !important;
    }


    .ntr-v2-home .ntr-v2-chart-top3
    .proradio-position .proradio-capfont {
        width: 38px !important;
        height: 44px !important;

        font-size: 16px !important;
    }


    .ntr-v2-home .ntr-v2-chart-top3
    .proradio-position img.proradio-chart-cover {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
    }


    .ntr-v2-home .ntr-v2-chart-top3
    .proradio-titles > .proradio-cutme-t {
        font-size: 13px !important;
    }


    .ntr-v2-home .ntr-v2-chart-top3
    .proradio-titles > .proradio-itemmetas {
        font-size: 10px !important;
    }


    .ntr-v2-home .ntr-v2-chart-top3
    .proradio-chartvote {
        width: 38px !important;
        min-width: 38px !important;

        padding-left: 6px !important;
    }


    .ntr-v2-home .ntr-v2-chart-top3
    .proradio-chartvote .proradio-chartvote-link {
        width: 30px !important;
        height: 24px !important;
    }
}


/* ==========================================================
   11. ACCESSIBILITY
   ========================================================== */

.ntr-v2-home .ntr-v2-chart-top3
.proradio-chartvote-link:focus-visible,
.ntr-v2-home .ntr-v2-chart-full-link
.elementor-button:focus-visible {
    outline: 2px solid var(--ntr-accent) !important;
    outline-offset: 2px !important;
}