/* ===================================================================
 * # font
 *
 * ------------------------------------------------------------------- */


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

@font-face {
    font-family: 'MadeOuterSansBold';
    src: url('../fonts/MADE Outer Sans Bold PERSONAL USE.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OuterSansRegular';
    src: url('../fonts/MADE Outer Sans Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ViceCitySansBold';
    src: url('../fonts/ViceCitySans-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ViceCitySansLight';
    src: url('../fonts/ViceCitySans-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ScandiaBold';
    src: url('../fonts/TT-Scandia-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Restore FontAwesome icons to their correct font-family */
i,
.fa,
.fa-music,
.fa-star,
.fa-eye,
.fa-line-chart {
    font-family: 'FontAwesome' !important;
}

@font-face {
    font-family: mortendBold;
    src: url(../fonts/mortend-mortend-bold-700.otf);
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: mortendRegular;
    src: url(../fonts/mortend-mortend-regular-400.otf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: mortendOutline;
    src: url(../fonts/mortend-mortend-outline-800.otf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: mortendExtraBold;
    src: url(../fonts/mortend-mortend-extra-bold-800.otf);
    font-weight: 800;
    font-style: normal;
}

a:hover {
    text-decoration: none !important;
}

/* ===================================================================
 * # main
 *
 * ------------------------------------------------------------------- */

main {
    background: #FFFFFF;
    color: #000;
    font-family: "Montserrat", sans-serif;
    position: relative;
}

.navbar-nav {
    width: 100%;
    padding: 5px 0px;
    gap: clamp(0rem, -0.4401rem + 1.8779vw, 1.25rem);
}

.navbar-dark .navbar-nav .nav-link,
.strim-live {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
}

.strim-live.active {
    color: #00325c;
}

.strim-live:hover {
    color: #ffd7d3;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
    color: #00325c;

}

.navbar-brand img {
    height: 40px;
}

.bg-ajl {
    background-color: #FF5A4B;
    z-index: 9999;
}

.mb-80 {
    margin-bottom: 80px;
}

.p-top {
    z-index: 99;
    position: relative;
}

.widget {
    position: fixed;
    right: 5px;
    top: 50%;
    z-index: 999999;
}

.widget img {
    height: clamp(5rem, 4.1197rem + 3.7559vw, 7.5rem);
}

.close-btn {
    cursor: pointer;
    position: absolute;
    left: 2px;
    font-weight: bold;
}

/* ===================================================================
 * # content
 *
 * ------------------------------------------------------------------- */

.content {
    /* background: url('../img/bgajl.png'), #f6f6e4; */
    background-color: #FFFFFF;
    padding: 0px 0;
    text-align: left;
    background-size: cover;
    background-position: bottom;
    font-weight: 500;
    position: relative;
}

.content .left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(8.4375rem, 5.2465rem + 13.615vw, 17.5rem);
}

.content .right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(8.4375rem, 5.2465rem + 13.615vw, 17.5rem);
}


h2 {
    display: flex;
    flex: 1;
    width: 100%;
    line-height: 1em;
    font-family: mortendBold;
    gap: 15px;
}

.heading {
    font-size: clamp(1.25rem, 1.118rem + 0.5634vw, 1.625rem);
}

.heading:before,
.heading:after,
.heading-ie span.after,
.heading-ie span.before {
    content: '';
    flex-grow: 1;
    background: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0));
    background-size: 100% 2px;
    background-position: 0% 50%;
    background-repeat: repeat-x;
}

.ajl-border {
    border-top: 10px solid;
    border-image: linear-gradient(to right, rgba(240, 90, 76, 1) 17%, rgba(244, 192, 236, 1) 17%, rgba(244, 192, 236, 1) 34%, rgba(23, 57, 92, 1) 34%, rgba(23, 57, 92, 1) 51%, rgba(152, 218, 165, 1) 51%, rgba(152, 218, 165, 1) 68%, rgba(243, 197, 115, 1) 68%, rgba(243, 197, 115, 1) 85%, rgba(96, 171, 200, 1) 85%) 5;
    z-index: 99999;
    position: relative;

}

.vote-btn {
    border: 5px solid #000;
    box-shadow: 0px 4px 3px 0px #00000073;
    -webkit-mask-image: linear-gradient(45deg, #000 25%, rgba(0, 0, 0, .2) 50%, #000 75%);
    mask-image: linear-gradient(45deg, #000 25%, rgba(0, 0, 0, .2) 50%, #000 75%);
    -webkit-mask-size: 800%;
    mask-size: 800%;
    -webkit-mask-position: 0;
    mask-position: 0;
}


.vote-btn:hover {
    border: 5px solid #00325c;
    transition: mask-position 2s ease, -webkit-mask-position 2s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
}

.vote-list {
    -webkit-mask-image: linear-gradient(45deg, #000 25%, rgba(0, 0, 0, .2) 50%, #000 75%);
    mask-image: linear-gradient(45deg, #000 25%, rgba(0, 0, 0, .2) 50%, #000 75%);
    -webkit-mask-size: 800%;
    mask-size: 800%;
    -webkit-mask-position: 0;
    mask-position: 0;
}


.vote-list:hover {
    transition: mask-position 2s ease, -webkit-mask-position 2s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
}

.news-list {
    background-color: #f6f6e4;
    border: 1px solid;
    position: relative;
    cursor: pointer;
}


.news-list.n-top img {
    height: 280px;
}

.news-list img {
    height: 230px;
    object-fit: cover;
    object-position: top;
}

.news-details {
    text-align: left;
    padding: 10px 15px;
}

.news-details a {
    text-decoration: none;
    color: #000 !important;
    font-weight: 600;
    font-size: 14px;
}

.news-details p {
    font-size: 12px;
}

.news-details h5 {
    height: 85px;
}

.news-list.home img {
    height: 250px;
    object-fit: cover;
    object-position: top;
}

.news-list.home .news-details {
    background: #0000009c;
    position: absolute;
    bottom: 0;
    color: #fff;
}

.news-list.home .news-details h5 {
    height: auto;
}

.strim-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    margin-right: 7px;
}

.vote-wrap {
    box-shadow: 0px 3px 5px #969696;
}

.vote-wrap img {
    opacity: 0.5;
}

.vote-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 15px;
}

.vote-content h4 {
    font-family: mortendBold;
    text-transform: uppercase;
    text-shadow: 2px 1px 1px #d0d0d0;
}

.vote-content a {
    background-color: #18385B;
    color: #fff !important;
    border: 2px solid #000;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 10px;
    font-weight: bold;
    opacity: 1;
    padding: 5px 25px;
}

.vote-content a:hover {
    color: #afeaff !important;
}

.vote-content img {
    opacity: 1;
    height: 80px;
}


/* ===================================================================
 * # footer
 *
 * ------------------------------------------------------------------- */

footer {
    font-size: 18px;
    line-height: 2;
    color: #000000;
    background: #ffffff;
}

footer a {
    color: #000000;
    text-decoration: none;
}

footer a:hover {
    color: #000000;
    text-decoration: none;
}

footer h4 {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 1.4rem;
    line-height: 1.286;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    padding-bottom: 4.2rem;
    color: #000;
    margin-top: 0;
    position: relative;
}

footer h4::after {
    content: "";
    display: block;
    height: 1px;
    width: 120px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    left: 0;
    bottom: 0;
}

.footer_text span {
    color: #000000;
    font-size: 30px;
    font-family: 'Advent Pro', sans-serif;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}

.s-footer__main {
    position: relative;
    background-image: linear-gradient(to right, #1c1423, #4b3b4b, #1f152f);
}

.s-footer__main::before {
    content: "";
    height: 4px;
    background: -moz-linear-gradient(left, #2e1d28, #d48576, #503948, #735cac, #f7f1f6, #8f689d, #cfa1d5, #2e1d28);
    background: -webkit-linear-gradient(left, #2e1d28, #d48576, #503948, #735cac, #f7f1f6, #8f689d, #cfa1d5, #2e1d28);
    background: linear-gradient(left, #2e1d28, #d48576, #503948, #735cac, #f7f1f6, #8f689d, #cfa1d5, #2e1d28);
    width: 100%;
    display: block;
}


.copyright-wrapper span,
.copyright-wrapper p {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    color: #FFFFFF;
    margin-bottom: 0px;
}

@media (max-width:991px) {
    .copyright-wrapper span {
        display: block;
        margin-bottom: 10px;
    }

    .copyright-wrapper {
        text-align: center;
    }

    .dpts {
        justify-content: center;
    }
}

@media (min-width:992px) {
    .footer-row-wrapper {
        margin: 0 7rem;
    }
}

/* -------------------------------------------------------------------
 * ## Navbar 
 * ------------------------------------------------------------------- */
/* 1. The dark sidebar container spanning the full screen height */
.sidebar-container {
    background-color: #232224;
    /* Dark gray background */
    min-height: 100vh;
    padding: 0;
    margin-left: 0 !important;
}

@media (min-width: 992px) {
    .bg-mu {
        padding-left: 0 !important;
    }

    .bg-mu .container-fluid {
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Grid: sidebar + chart share row height; columns scale with viewport */
    .bg-mu .container-fluid > .row.no-gutters {
        display: grid !important;
        grid-template-columns: minmax(200px, 22vw) minmax(0, 1fr) !important;
        column-gap: 16px;
        align-items: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-container.col-lg-3 {
        grid-column: 1;
        width: 100% !important;
        max-width: min(294px, 22vw) !important;
        min-width: 0 !important;
        min-height: 100% !important;
        height: 100%;
        display: flex !important;
        flex-direction: column !important;
        flex: none !important;
        background-color: #232224 !important;
    }

    .sidebar-container .sidebar {
        flex: 1 1 auto;
        min-height: 100%;
        width: 100%;
        background-color: #232224;
    }

    .bg-mu .content-area.col-lg-9 {
        grid-column: 2;
        flex: none !important;
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

}

@media (min-width: 1200px) {
    .bg-mu .container-fluid > .row.no-gutters {
        grid-template-columns: 294px minmax(0, 1fr) !important;
    }

    .sidebar-container.col-lg-3 {
        max-width: 294px !important;
    }
}


/* 2. Sidebar container layout */
.sidebar {
    padding: 40px 0;
    position: static !important;
}

/* 3. The vertical list wrapper */
.sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* ≡ƒæê Align buttons to the left instead of centering */
    padding-left: 24px;
    /* ≡ƒæê Beautifully spaced from the left edge */
}

/* 4. Individual item margins (removing all slants/skews) */
.sidebar-nav li {
    margin-bottom: 12px;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* ≡ƒæê Keep label starting on the left */
    transform: none !important;
    /* Force-removes the old slant */
}

/* 5. Rounded button styling — scales down on narrower sidebars (992+) */
.sidebar-nav label {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 240px;
    min-height: 42px;
    height: auto;
    padding: 8px 14px;
    color: #fff;
    font-family: 'ViceCitySansBold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.2;
    letter-spacing: 0;
    cursor: pointer;
    border-radius: 18px !important;
    margin: 0;
    white-space: nowrap;
    transition: background 0.3s ease;
    transform: none !important;
}

.sidebar-nav label img {
    width: 22px !important;
    height: 22px !important;
    margin-right: 10px !important;
    object-fit: contain;
    flex-shrink: 0;
}

/* 6. Spacing for the icons */
.sidebar-nav label i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    opacity: 0.8;
}

/* 7. Active tab color state (Purple Pill) */
.sidebar-nav li.active {
    background: transparent !important;
    /* Prevents the whole row from turning purple */
    background-color: transparent !important;
}

.sidebar-nav li.active label {
    font-family: 'ViceCitySansBold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    background-color: #8170FD !important;
    color: #fff !important;
    border-radius: 18px !important;
    width: 100%;
    max-width: 180px;
    box-sizing: border-box;
    min-height: 42px;
    height: auto;
    padding: 8px 14px;
    white-space: nowrap;
}

/* Mobile (up to 767px — covers most phones) */
@media (max-width: 767px) {
    .sidebar-nav li.active label {
        width: 100%;
        max-width: 240px;
        min-height: 42px;
        height: auto;
        padding: 8px 14px;
    }
}

/* Small phones specifically (iPhone SE, older Androids) */
@media (max-width: 480px) {
    .sidebar-nav li.active label {
        width: 100%;
        max-width: 240px;
        min-height: 42px;
        height: auto;
        padding: 8px 14px;
    }
}

/**tablet**/
@media (max-width: 768px) {
    .sidebar-nav li.active label {
        width: 100%;
        max-width: 240px;
        min-height: 42px;
        height: auto;
        padding: 8px 14px;
    }
}


/* Sidebar pills: smaller on medium desktops, full Figma size on large screens */
@media (min-width: 992px) and (max-width: 1199px) {
    .sidebar-nav {
        padding-left: clamp(10px, 1.5vw, 18px);
    }

    .sidebar-nav li {
        margin-bottom: 10px;
    }

    .sidebar-nav label,
    .sidebar-nav li.active label {
        font-size: 15px !important;
        min-height: 40px;
        padding: 7px 12px;
        width: 100%;
        max-width: 200px;
        min-height: 42px;
        height: auto;

        
    }
    

    .sidebar-nav label img {
        width: 20px !important;
        height: 20px !important;
        margin-right: 8px !important;
    }
}

@media (min-width: 1200px) {
    .sidebar-nav {
        padding-left: 24px;
    }

    .sidebar-nav label,
    .sidebar-nav li.active label {
        font-size: 20px !important;
        max-width: 247px;
        min-height: 47px;
        padding: 10px 20px;
        border-radius: 20px !important;
    }

    .sidebar-nav label img {
        width: 25px !important;
        height: 25px !important;
        margin-right: 12px !important;
    }
}

/* 8. Light hover effect on non-active labels */
.sidebar-nav li:not(.active) label:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* 9. Muzik Mobile Header & Sliding Sidebar Overrides */
.muzik-mobile-header {
    background-color: #282626;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.muzik-mobile-logo img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.muzik-mobile-hamburger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
}

.muzik-mobile-hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #45D3C4;
    border-radius: 1px;
    transition: all 0.3s ease;
}

@media (max-width: 991px) {

    /* Set section container to relative so the dropdown positions correctly below the header */
    .bg-mu {
        position: relative !important;
    }

    /* Make the mobile Close Button hidden as hamburger is the toggle */
    .sidebar-close {
        display: none !important;
    }

    .bg-mu {
        background: var(--page-bg, #EFF3FE) !important;
        background-image: none !important;
    }

    /* Transform sidebar from side-drawer into a vertical slide-down dropdown */
    .sidebar-container {
        position: absolute !important;
        top: 0 !important;
        /* Positions it right at the top of the section (below the header) */
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        /* Reset the desktop min-height so it can close */
        max-height: 0 !important;
        /* Start completely closed */
        overflow: hidden !important;
        z-index: 1000 !important;
        background-color: #232224 !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease-in-out !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Reveal the sidebar as a vertical dropdown sliding down */
    .sidebar-container.mobile-open {
        max-height: 350px !important;
        /* Gives plenty of room for vertical items */
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .sidebar {
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Content cards should fill the whole horizontal width on mobile */
    .content-area {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Smooth translucent black backdrop behind the vertical dropdown */
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 999 !important;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease !important;
    }

    .sidebar-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* -------------------------------------------------------------------
 * ## footer link list
 * ------------------------------------------------------------------- */
.footer-text-style {
    font-size: 13px;
}

.s-content__linklist {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.s-content__linklist a {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
}

.s-content__linklist a:hover {
    color: #cf3755;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
}

.s-content__linklist li {
    padding-left: 4px 0;
    border-bottom: 0.5px dashed #cecece;
}

.s-content__linklist .active a {
    color: #f28780;
    font-weight: bold;
}

/* -------------------------------------------------------------------
 * ## copyright
 * ------------------------------------------------------------------- */

.s-footer__bottom .s-footer__copyright span {
    display: inline-block;
}

.s-footer__bottom .s-footer__copyright span::after {
    content: "|";
    display: inline-block;
    padding: 0 1rem 0 1.2rem;
    color: rgba(255, 255, 255, 0.1);
}

.s-footer__bottom .s-footer__copyright span:last-child::after {
    display: none;
}

/* Voting area canvas ΓÇö matches page background */
.tabs,
.content {
    background-color: var(--page-bg, #EFF3FE) !important;
    background: var(--page-bg, #EFF3FE) !important;
}

/* Main chart section (beside dark sidebar) */
.bg-mu {
    background-color: var(--page-bg, #EFF3FE);
}

/* Fix: Make vote cards use flex column so the button always sticks to the bottom
   regardless of how much text (song title, penyanyi, lirik, komposer) each card has */
.custom-vote-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-body-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start !important;
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 16px 20px;
    text-align: left;
}

.card-song-meta {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin-bottom: 0 !important;
}

.custom-vote-card .undi-btn {
    margin-top: 16px !important;
    align-self: stretch;
    flex-shrink: 0;
}


@media (max-width: 991px) {
    .custom-vote-card .undi-btn {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* Fix: Use higher specificity than figure.effect-zoe h3 (style.css line 933)
   which was overriding the h3 inside the card and collapsing the title.
   Added !important on font-size and color to guarantee they win. */
.card-song-title,
figure.effect-zoe .card-song-title {
    font-family: 'ViceCitySansBold', sans-serif;
    font-size: 19px !important;
    font-weight: 700;
    color: #282626 !important;
    text-transform: capitalize;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    flex-shrink: 0;
    text-align: left;
    width: 100%;
}

/* Custom premium styling for the voting header bar */
.heading-vote {
    background: linear-gradient(90deg, #8170FD 0%, #45D3C4 100%) !important;
    font-family: 'MadeOuterSansBold', sans-serif !important;
    font-size: 28px !important;
    color: #FFFFFF !important;
    padding: 16px 28px !important;
    border-radius: 20px !important;
    margin-bottom: -15px !important;
    /* Overlaps with the border of bg-vote */
    position: relative !important;
    z-index: 2 !important;
    letter-spacing: 0.5px;
    display: inline-block;
    width: 100% !important;
    text-align: left;
    box-sizing: border-box;
}

/*
 * DESCRIPTION BRACKET WIDTH ΓÇö same width as the purple heading above it.
 * To make narrower ONLY this box: set e.g. --bracket-width-desktop: 800px;
 */
:root {
    --bracket-width-desktop: 95%;
    --bracket-width-mobile: 95%;
}

.bg-vote {
    background: #FFFFFF !important;
    border: 2px solid #2DEBA1 !important;
    border-radius: 20px !important;
    padding: 32px 28px 24px 28px !important;
    position: relative !important;
    z-index: 1 !important;
    text-align: left !important;
    width: var(--bracket-width-desktop);
    max-width: var(--bracket-width-desktop);
    margin: 0 auto 25px auto !important;
    margin-bottom: 25px !important;
    box-sizing: border-box;
}

/* Style the description text inside the container to flow seamlessly */
.bg-vote p.opdesc {
    color: #000000 !important;
    font-family: 'OuterSansRegular', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    display: inline !important;

}

.bg-vote p.opdesc+p.opdesc {
    margin-left: 6px !important;
    /* Horizontal spacing for inline flow on desktop */
}

/* Mobile: smaller centered description (Figma mobile spec) */
@media (max-width: 991px) {
    .bg-vote {
        text-align: center !important;
        width: var(--bracket-width-mobile) !important;
        max-width: var(--bracket-width-mobile) !important;
        padding: 22px 16px 18px 16px !important;
    }

    .bg-vote p.opdesc {
        display: block !important;
        text-align: center !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 18px !important;
        letter-spacing: 0.5px !important;
    }

    .bg-vote p.opdesc+p.opdesc {
        margin-left: 0 !important;
        margin-top: 0.35em !important;
    }

    h3.heading-vote,
    .heading-vote {
        font-size: 22px !important;
        padding: 12px 16px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

.heading-video {
    /* Gradient background */
    background: linear-gradient(to right, #8170FD, #2DEBA1);

    /* Text styling */
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2px;


    /* Padding & layout */
    padding: 12px 40px;
    display: inline-block;
    background: #8170FD;
    border-radius: 50px;
    /* ≡ƒæê Changed to 50px for the perfect pill shape! */
}

/* -------------------------------------------------------------------
 * Layout: sidebar fixed left, center chart only, search icon, mobile spacing
 * ------------------------------------------------------------------- */

@media (min-width: 992px) {
    /* Desktop only (992+): undo mobile dropdown + stretch with chart */
    .bg-mu .sidebar-container {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: min(294px, 22vw) !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: auto !important;
        box-shadow: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*
     * Center the Carta Top 20 block in the space to the RIGHT of the sidebar.
     * Sidebar stays fixed; only the white chart column is balanced.
     */
    .bg-mu .content-area {
        flex: 1 1 0% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .bg-mu .content-area > .tabs {
        flex: 0 1 1180px;
        width: 100%;
        max-width: min(1180px, 100%);
        margin-left: auto;
        margin-right: auto;
        padding-left: clamp(12px, 2vw, 24px);
        padding-right: clamp(12px, 2vw, 24px);
        box-sizing: border-box;
    }

}

@media (min-width: 1200px) {
    .bg-mu .sidebar-container {
        max-width: 298px !important;
    }
}

/* Mobile: full width (no 430px artboard cap) */
@media (max-width: 991px) {

    .bg-mu .container-fluid > .row.no-gutters {
        display: block !important;
    }

    main > div.position-relative:first-of-type,
    .muzik-mobile-header,
    section.bg-mu {
        max-width: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .bg-mu .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Symmetric padding (pl-3 alone was shifting content left) */
    .content-area {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 2-column grid: centered row, equal-height cards per row */
    .row.carta20,
    .row.pencalonan-baru,
    .row.prebiu,
    .row.tersingkir {
        margin-left: -5px;
        margin-right: -8px;
        justify-content: center;
        align-items: stretch !important;
    }

    .row.carta20 > .vote-card-col,
    .row.pencalonan-baru > .vote-card-col,
    .row.prebiu > .vote-card-col,
    .row.tersingkir > .vote-card-col,
    .row.carta20 > [class*="col-"],
    .row.pencalonan-baru > [class*="col-"],
    .row.prebiu > [class*="col-"],
    .row.tersingkir > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-bottom: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .vote-card-col .custom-vote-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .vote-card-col .card-body-content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .vote-card-col .card-song-meta {
        flex: 1 1 auto;
    }

}

/* search.svg: hidden on desktop, visible on mobile/tablet */
@media (min-width: 992px) {
    .menu-bar .right-section .search-menu-item {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .menu-bar .right-section .search-menu-item {
        display: flex !important;
        align-items: center;
    }

    .menu-bar .right-section .search-menu-item .search-inner .search-icon {
        display: flex !important;
    }
}

/* -------------------------------------------------------------------
 * Responsive: sidebar, chart, vote cards — all device widths
 * ------------------------------------------------------------------- */

section.bg-mu {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.sidebar-banner {
    padding-left: clamp(12px, 4vw, 24px);
    padding-right: 12px;
    box-sizing: border-box;
    width: 100%;
}

.sidebar-banner img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.row.carta20,
.row.pencalonan-baru,
.row.prebiu,
.row.tersingkir {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    align-items: stretch !important;
}

.vote-card-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    min-width: 0;
    box-sizing: border-box;
}

.vote-card-col > .custom-vote-card {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 100%;
}

/* Small desktop: 3 cards per row (prevents horizontal cut-off) */
@media (min-width: 992px) and (max-width: 1299px) {

    .row.carta20 > .vote-card-col,
    .row.pencalonan-baru > .vote-card-col,
    .row.prebiu > .vote-card-col,
    .row.tersingkir > .vote-card-col {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* Large desktop: 4 cards per row */
@media (min-width: 1300px) {

    .row.carta20 > .vote-card-col,
    .row.pencalonan-baru > .vote-card-col,
    .row.prebiu > .vote-card-col,
    .row.tersingkir > .vote-card-col {
        flex: 0 0 25%;
        max-width: 25%;
    }
}