/* =========================================================
   Music FM — Community Polls
========================================================= */

.mf-polls-page{
    direction:rtl;
    padding-top:18px;
    padding-bottom:90px;
    color:#111827;
}

.mf-polls-page *{box-sizing:border-box}
.mf-polls-page a{text-decoration:none}

.mf-polls-hero{
    min-height:410px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    align-items:center;
    gap:38px;
    padding:50px;
    overflow:hidden;
    border:1px solid rgba(20,124,255,.20);
    border-radius:3px;
    background:
        radial-gradient(circle at 12% 16%,rgba(89,199,255,.20),transparent 30%),
        linear-gradient(135deg,#071832 0%,#0a2e61 100%);
    color:#fff;
}

.mf-polls-hero-content>span{
    min-height:29px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:2px;
    background:rgba(255,255,255,.07);
    color:#8edcff;
    font-size:10px;
    font-weight:950;
}

.mf-polls-hero h1{
    margin:16px 0 12px;
    color:#fff;
    font-size:clamp(46px,5.2vw,70px);
    line-height:1.02;
    font-weight:950;
    letter-spacing:-1.8px;
}

.mf-polls-hero h1 em{
    color:#62ceff;
    font-style:normal;
}

.mf-polls-hero p{
    max-width:720px;
    margin:0;
    color:rgba(255,255,255,.80);
    font-size:16px;
    line-height:1.82;
    font-weight:730;
}

.mf-polls-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:22px;
}

.mf-polls-actions a{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border:1px solid #147cff;
    border-radius:2px;
    background:#147cff;
    color:#fff;
    font-size:11px;
    font-weight:950;
}

.mf-polls-actions a:nth-child(2){
    border-color:rgba(255,255,255,.17);
    background:rgba(255,255,255,.07);
}

.mf-polls-hero-side{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    align-items:center;
    gap:18px;
    padding:22px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:3px;
    background:rgba(255,255,255,.055);
}

.mf-polls-progress-ring{
    --progress:0;
    width:145px;
    height:145px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:conic-gradient(#59c7ff calc(var(--progress)*1%),rgba(255,255,255,.12) 0);
}

.mf-polls-progress-ring::before{
    content:"";
    grid-area:1/1;
    width:116px;
    height:116px;
    border-radius:50%;
    background:#0a2852;
}

.mf-polls-progress-ring>div{
    position:relative;
    z-index:1;
    grid-area:1/1;
    display:grid;
    justify-items:center;
}

.mf-polls-progress-ring strong{font-size:27px;font-weight:950}
.mf-polls-progress-ring span{margin-top:5px;color:rgba(255,255,255,.62);font-size:9px;font-weight:800}

.mf-polls-user-stats{
    display:grid;
    gap:7px;
}

.mf-polls-user-stats article{
    min-height:58px;
    display:grid;
    align-content:center;
    padding:9px 11px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:2px;
    background:rgba(255,255,255,.04);
}

.mf-polls-user-stats strong{font-size:20px;font-weight:950}
.mf-polls-user-stats span{margin-top:3px;color:rgba(255,255,255,.58);font-size:8px;font-weight:800}

.mf-polls-alert{
    min-height:50px;
    display:flex;
    align-items:center;
    gap:9px;
    margin:12px 0;
    padding:0 15px;
    border-radius:2px;
    font-size:11px;
    font-weight:900;
}

.mf-polls-alert.success{border:1px solid #b7efc8;background:#ecfdf3;color:#067647}
.mf-polls-alert.error{border:1px solid #ffd0d8;background:#fff1f3;color:#b42318}

.mf-polls-overview{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin:12px 0;
}

.mf-polls-overview article{
    min-height:78px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px;
    border:1px solid #dfe7f3;
    border-radius:3px;
    background:#fff;
}

.mf-polls-overview i{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid #d6e6f8;
    border-radius:2px;
    background:#eef6ff;
    color:#147cff;
}

.mf-polls-overview strong{display:block;color:#111827;font-size:20px;font-weight:950}
.mf-polls-overview span{display:block;margin-top:3px;color:#718095;font-size:9px;font-weight:800}

.mf-polls-community-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:12px;
    padding:18px;
    border:1px solid #cfe1f6;
    border-radius:3px;
    background:#f4f9ff;
}

.mf-polls-community-link>div>span{
    color:#147cff;
    font-size:9px;
    font-weight:950;
}

.mf-polls-community-link h2{
    margin:5px 0 4px;
    color:#111827;
    font-size:20px;
    font-weight:950;
}

.mf-polls-community-link p{
    margin:0;
    color:#66758a;
    font-size:10px;
    line-height:1.55;
    font-weight:750;
}

.mf-polls-community-link a{
    min-height:39px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border:1px solid #147cff;
    border-radius:2px;
    background:#147cff;
    color:#fff;
    font-size:10px;
    font-weight:950;
    white-space:nowrap;
}

.mf-polls-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:12px;
    padding:16px;
    border:1px solid #dfe7f3;
    border-radius:3px;
    background:#fff;
}

.mf-polls-toolbar>div:first-child>span{
    color:#147cff;
    font-size:9px;
    font-weight:950;
}

.mf-polls-toolbar h2{
    margin:4px 0 0;
    color:#111827;
    font-size:21px;
    font-weight:950;
}

.mf-polls-filters{
    display:flex;
    gap:5px;
}

.mf-polls-filters button{
    min-height:35px;
    padding:0 11px;
    border:1px solid #dce5ef;
    border-radius:2px;
    background:#fff;
    color:#657389;
    font-family:inherit;
    font-size:9px;
    font-weight:900;
    cursor:pointer;
}

.mf-polls-filters button.is-active{
    border-color:#147cff;
    background:#147cff;
    color:#fff;
}

.mf-polls-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.mf-poll-card{
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid #dfe7f3;
    border-radius:3px;
    background:#fff;
}

.mf-poll-card[hidden]{display:none!important}

.mf-poll-card.is-featured{
    grid-column:1/-1;
    border-color:#b8d5f5;
}

.mf-poll-card>header{
    padding:20px;
    border-bottom:1px solid #e7edf4;
    background:#fbfdff;
}

.mf-poll-heading>span{
    min-height:26px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0 8px;
    border:1px solid #d5e6f8;
    border-radius:2px;
    background:#eef6ff;
    color:#147cff;
    font-size:9px;
    font-weight:950;
}

.mf-poll-card h2{
    margin:10px 0 6px;
    color:#111827;
    font-size:22px;
    line-height:1.25;
    font-weight:950;
}

.mf-poll-card p{
    margin:0;
    color:#68768a;
    font-size:11px;
    line-height:1.65;
    font-weight:750;
}

.mf-poll-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:13px;
}

.mf-poll-meta b{
    min-height:29px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:0 8px;
    border:1px solid #e0e8f1;
    border-radius:2px;
    background:#fff;
    color:#657389;
    font-size:8px;
    font-weight:900;
}

.mf-poll-meta i{color:#147cff}

.mf-poll-form{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:17px;
}

.mf-poll-options{
    display:grid;
    gap:8px;
}

.mf-poll-option{
    position:relative;
    min-height:67px;
    display:grid;
    grid-template-columns:20px minmax(0,1fr) 46px;
    gap:10px;
    align-items:center;
    padding:11px;
    overflow:hidden;
    border:1px solid #dfe7f3;
    border-radius:2px;
    background:#fff;
    cursor:pointer;
}

.mf-poll-option:hover,
.mf-poll-option.is-chosen{
    border-color:#9fc9f7;
    background:#f7fbff;
}

.mf-poll-option.is-selected{
    border-color:#147cff;
    background:#f3f8ff;
}

.mf-poll-option input{
    width:17px;
    height:17px;
    accent-color:#147cff;
}

.mf-poll-option-main{
    min-width:0;
    display:grid;
    gap:3px;
}

.mf-poll-option-main b{
    color:#111827;
    font-size:12px;
    line-height:1.3;
    font-weight:950;
}

.mf-poll-option-main small{
    color:#748197;
    font-size:8px;
    font-weight:800;
}

.mf-poll-percent{
    color:#147cff;
    font-size:13px;
    font-weight:950;
    text-align:left;
}

.mf-poll-bar{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:4px;
    background:#edf2f7;
}

.mf-poll-bar i{
    display:block;
    width:0;
    height:100%;
    background:linear-gradient(90deg,#147cff,#59c7ff);
    transition:width .7s cubic-bezier(.16,1,.3,1);
}

.mf-poll-form footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
    padding-top:15px;
}

.mf-poll-form footer span,
.mf-poll-form footer strong{
    color:#68768a;
    font-size:9px;
    font-weight:900;
}

.mf-poll-form footer strong{color:#087443}

.mf-poll-form footer button,
.mf-poll-form footer a{
    min-height:39px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 12px;
    border:1px solid #147cff;
    border-radius:2px;
    background:#147cff;
    color:#fff;
    font-family:inherit;
    font-size:10px;
    font-weight:950;
    cursor:pointer;
}

.mf-poll-form footer button.is-loading{
    opacity:.62;
    pointer-events:none;
}

.mf-polls-empty{
    grid-column:1/-1;
    padding:42px 18px;
    display:grid;
    justify-items:center;
    gap:7px;
    border:1px solid #dfe7f3;
    border-radius:3px;
    background:#fff;
    text-align:center;
}

.mf-polls-empty i{color:#147cff;font-size:30px}
.mf-polls-empty h2{margin:0;color:#111827;font-size:22px;font-weight:950}
.mf-polls-empty p{max-width:600px;margin:0;color:#718095;font-size:10px;line-height:1.6;font-weight:750}

@media(max-width:980px){
    .mf-polls-hero{
        grid-template-columns:1fr;
    }

    .mf-polls-overview{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:680px){
    .mf-polls-page{
        padding-top:8px;
        padding-bottom:62px;
    }

    .mf-polls-hero{
        margin-inline:-9px;
        min-height:0;
        padding:28px 18px 22px;
        border-right:0;
        border-left:0;
        border-radius:0;
    }

    .mf-polls-hero h1{
        font-size:38px;
        letter-spacing:-1px;
    }

    .mf-polls-hero p{
        font-size:13px;
        line-height:1.72;
    }

    .mf-polls-hero-side{
        grid-template-columns:105px minmax(0,1fr);
        padding:14px;
    }

    .mf-polls-progress-ring{
        width:102px;
        height:102px;
    }

    .mf-polls-progress-ring::before{
        width:81px;
        height:81px;
    }

    .mf-polls-progress-ring strong{
        font-size:20px;
    }

    .mf-polls-progress-ring span{
        display:none;
    }

    .mf-polls-overview{
        gap:6px;
    }

    .mf-polls-overview article{
        min-height:69px;
        padding:9px;
    }

    .mf-polls-overview i{
        width:34px;
        height:34px;
    }

    .mf-polls-community-link,
    .mf-polls-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .mf-polls-community-link a{
        justify-content:center;
    }

    .mf-polls-filters{
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }

    .mf-polls-list{
        grid-template-columns:1fr;
        gap:9px;
    }

    .mf-poll-card.is-featured{
        grid-column:auto;
    }

    .mf-poll-card>header{
        padding:16px;
    }

    .mf-poll-card h2{
        font-size:19px;
    }

    .mf-poll-form{
        padding:14px;
    }

    .mf-poll-option{
        min-height:64px;
        grid-template-columns:19px minmax(0,1fr) 42px;
    }

    .mf-poll-form footer{
        align-items:stretch;
        flex-direction:column;
    }

    .mf-poll-form footer button,
    .mf-poll-form footer a{
        width:100%;
    }
}

@media(prefers-reduced-motion:reduce){
    .mf-polls-page *,
    .mf-polls-page *::before,
    .mf-polls-page *::after{
        animation:none!important;
        transition:none!important;
        transform:none!important;
    }
}


/* Music-game identity */
.mf-polls-hero-content>span::before{
    content:"♫";
    margin-left:6px;
    color:#62ceff;
    font-size:13px;
}

.mf-poll-heading>span{
    letter-spacing:.1px;
}

.mf-poll-card.is-featured .mf-poll-heading>span{
    border-color:#b9d8fb;
    background:#eaf4ff;
}

.mf-polls-community-link{
    position:relative;
    overflow:hidden;
}

.mf-polls-community-link::after{
    content:"♪ ♫ ♪";
    position:absolute;
    left:18px;
    bottom:-4px;
    color:rgba(20,124,255,.10);
    font-size:46px;
    font-weight:950;
    pointer-events:none;
}


/* =========================================================
   Poll vote button text color fix
========================================================= */
.mf-poll-form footer button,
.mf-poll-form footer button span,
.mf-poll-form footer button i{
    color:#fff !important;
}

.mf-poll-form footer button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
}


/* =========================================================
   POLLS — MUSIC FM MASTER HERO
   Desktop: CONTENT RIGHT / STATS LEFT
   Same permanent HERO language as the standardized pages.
========================================================= */

.mf-polls-page .mf-polls-hero{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    direction:rtl !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 245px !important;
    grid-template-areas:"content stats" !important;
    align-items:stretch !important;
    gap:0 !important;

    min-height:390px !important;
    padding:0 !important;

    border:1px solid rgba(20,124,255,.18) !important;
    border-radius:4px !important;

    background:
        radial-gradient(circle at 16% 8%,rgba(89,199,255,.20),transparent 34%),
        radial-gradient(circle at 84% 16%,rgba(20,124,255,.20),transparent 34%),
        linear-gradient(135deg,#071832 0%,#08295b 52%,#031126 100%) !important;

    color:#fff !important;
    box-shadow:
        0 14px 36px rgba(15,35,70,.13),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.mf-polls-page .mf-polls-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 118px
        ) !important;
    opacity:.52 !important;
}

/* ---------- RIGHT CONTENT ---------- */
.mf-polls-page .mf-polls-hero-content{
    grid-area:content !important;
    position:relative !important;
    z-index:2 !important;

    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;

    padding:54px 46px !important;
    direction:rtl !important;
    text-align:right !important;
}

.mf-polls-page .mf-polls-hero-content>span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:flex-start !important;

    width:max-content !important;
    max-width:max-content !important;
    min-height:34px !important;
    padding:0 14px !important;
    margin:0 !important;

    border:0 !important;
    border-radius:3px !important;
    background:#147cff !important;
    color:#fff !important;
    box-shadow:none !important;

    font-size:13px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
}

/* remove the old musical-note pseudo icon from the English kicker */
.mf-polls-page .mf-polls-hero-content>span::before{
    display:none !important;
    content:none !important;
}

.mf-polls-page .mf-polls-hero h1{
    margin:18px 0 14px !important;
    color:#fff !important;
    font-size:58px !important;
    line-height:.98 !important;
    font-weight:950 !important;
    letter-spacing:-1.5px !important;
}

.mf-polls-page .mf-polls-hero h1 em{
    color:#fff !important;
    font-style:normal !important;
}

.mf-polls-page .mf-polls-hero p{
    max-width:760px !important;
    margin:0 !important;
    color:rgba(255,255,255,.78) !important;
    font-size:17px !important;
    line-height:1.72 !important;
    font-weight:800 !important;
}

/* ---------- ACTIONS — same standardized button language ---------- */
.mf-polls-page .mf-polls-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:9px !important;
    margin-top:24px !important;
}

.mf-polls-page .mf-polls-actions a{
    width:auto !important;
    min-width:0 !important;
    min-height:42px !important;
    height:42px !important;
    padding:0 16px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    border:1px solid #147cff !important;
    border-radius:3px !important;
    background:#147cff !important;
    color:#fff !important;
    box-shadow:none !important;

    font-size:13px !important;
    line-height:1 !important;
    font-weight:900 !important;

    transform:none !important;
    translate:none !important;
    scale:1 !important;
    transition:background-color .18s ease,border-color .18s ease,color .18s ease !important;
}

.mf-polls-page .mf-polls-actions a:nth-child(2){
    border-color:rgba(255,255,255,.15) !important;
    background:rgba(255,255,255,.055) !important;
    color:rgba(255,255,255,.88) !important;
}

.mf-polls-page .mf-polls-actions a i{
    font-size:13px !important;
    line-height:1 !important;
}

.mf-polls-page .mf-polls-actions a:hover{
    background:#2689ff !important;
    border-color:#2689ff !important;
    transform:none !important;
}

.mf-polls-page .mf-polls-actions a:nth-child(2):hover{
    border-color:rgba(89,199,255,.27) !important;
    background:rgba(255,255,255,.085) !important;
    color:#fff !important;
}

/* ---------- LEFT STATS — one continuous translucent slab ---------- */
.mf-polls-page .mf-polls-hero-side{
    grid-area:stats !important;
    position:relative !important;
    z-index:2 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:18px 16px !important;

    border-inline-start:1px solid rgba(255,255,255,.045) !important;
    background:transparent !important;
}

.mf-polls-page .mf-polls-hero-stats{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    overflow:hidden !important;
    background:rgba(255,255,255,.035) !important;
}

.mf-polls-page .mf-polls-hero-stats article{
    min-height:84px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    padding:12px 8px !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.085) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-align:center !important;
}

.mf-polls-page .mf-polls-hero-stats article:last-child{
    border-bottom:0 !important;
}

.mf-polls-page .mf-polls-hero-stats strong{
    color:#59c7ff !important;
    font-size:27px !important;
    line-height:1 !important;
    font-weight:950 !important;
}

.mf-polls-page .mf-polls-hero-stats small{
    margin-top:7px !important;
    color:rgba(255,255,255,.70) !important;
    font-size:9.5px !important;
    line-height:1.2 !important;
    font-weight:850 !important;
}

/* Old progress elements are no longer part of the HERO */
.mf-polls-page .mf-polls-progress-ring,
.mf-polls-page .mf-polls-user-stats{
    display:none !important;
}

/* Keep the rest of the page from jumping on hover */
.mf-polls-page .mf-polls-community-link a,
.mf-polls-page .mf-polls-filters button,
.mf-polls-page .mf-poll-form footer button,
.mf-polls-page .mf-poll-form footer a{
    transform:none !important;
}

/* ---------- MOBILE ---------- */
@media(max-width:980px){
    .mf-polls-page .mf-polls-hero{
        display:block !important;
        min-height:0 !important;
    }

    .mf-polls-page .mf-polls-hero-content{
        padding:32px 22px 24px !important;
    }

    .mf-polls-page .mf-polls-hero h1{
        font-size:40px !important;
        line-height:1 !important;
        letter-spacing:-1px !important;
    }

    .mf-polls-page .mf-polls-hero p{
        font-size:15px !important;
        line-height:1.68 !important;
    }

    .mf-polls-page .mf-polls-actions{
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:8px !important;
    }

    .mf-polls-page .mf-polls-actions a{
        width:100% !important;
        height:44px !important;
        min-height:44px !important;
    }

    .mf-polls-page .mf-polls-hero-side{
        display:block !important;
        padding:0 22px 22px !important;
        border:0 !important;
    }

    .mf-polls-page .mf-polls-hero-stats article{
        min-height:70px !important;
    }

    .mf-polls-page .mf-polls-hero-stats strong{
        font-size:21px !important;
    }

    .mf-polls-page .mf-polls-hero-stats small{
        font-size:8.5px !important;
    }
}

@media(max-width:680px){
    .mf-polls-page .mf-polls-hero{
        margin-inline:-9px !important;
        padding:0 !important;
        border-right:0 !important;
        border-left:0 !important;
        border-radius:0 0 4px 4px !important;
    }
}