/*
 ZenFM Poll Design
 Datei:
 /poll/css/poll.css
*/


/* =========================
   Hauptbox
========================= */


.zen-poll {

    margin-top:45px;

    padding:35px;

    border-radius:28px;

    background:
    rgba(255,255,255,.10);

    backdrop-filter:
    blur(18px);

    border:
    2px solid rgba(89,255,157,.45);

    box-shadow:

    0 20px 60px rgba(0,0,0,.35),

    0 0 30px rgba(39,200,255,.25);

    animation:
    pollFade .7s ease;

}



/* =========================
   Überschrift
========================= */


.zen-poll h2 {

    text-align:center;

    font-size:2rem;

    margin-bottom:15px;

    color:#59FF9D;

    text-shadow:

    0 0 12px #59FF9D;

}



.poll-question {

    text-align:center;

    font-size:1.15rem;

    margin-bottom:30px;

    line-height:1.6;

}



/* =========================
   Auswahl
========================= */


.poll-options {

    display:grid;

    gap:14px;

}



.poll-option {


    position:relative;

    padding:18px;

    border-radius:18px;

    cursor:pointer;

    background:
    rgba(255,255,255,.08);

    border:

    1px solid
    rgba(255,255,255,.15);

    transition:.25s;

}



.poll-option:hover {


    transform:
    translateY(-3px);

    border-color:#59FF9D;

    box-shadow:

    0 0 20px
    rgba(89,255,157,.35);

}



.poll-option input {

    display:none;

}



.poll-option.selected {


    background:

    linear-gradient(

    120deg,

    rgba(89,255,157,.35),

    rgba(39,200,255,.25)

    );


    border-color:#59FF9D;

}



/* =========================
   Button
========================= */


.poll-button {


    display:block;

    margin:30px auto 10px;

    padding:16px 40px;

    border:0;

    border-radius:50px;

    cursor:pointer;

    font-weight:700;

    font-size:1.1rem;


    color:#053764;


    background:

    linear-gradient(

    90deg,

    #59FF9D,

    #27C8FF

    );


    box-shadow:

    0 0 25px
    rgba(39,200,255,.5);


    transition:.3s;

}



.poll-button:hover {


    transform:
    scale(1.05);


    box-shadow:

    0 0 45px
    rgba(89,255,157,.8);

}



.poll-button:disabled {


    opacity:.5;

    cursor:not-allowed;

}



/* =========================
   Ergebnisse
========================= */


.poll-results {

    margin-top:35px;

}



.poll-result {


    margin-bottom:22px;

}



.poll-result-title {


    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

}



.poll-bar {


    height:18px;

    border-radius:20px;

    overflow:hidden;


    background:

    rgba(0,0,0,.25);

}



.poll-fill {


    height:100%;

    width:0;


    border-radius:20px;


    background:

    linear-gradient(

    90deg,

    #59FF9D,

    #27C8FF

    );


    box-shadow:

    0 0 18px
    #27C8FF;


    transition:

    width .8s ease;

}



/* Sieger */

.poll-winner {


    border:

    1px solid #ffd700;

    padding:15px;

    border-radius:18px;


    box-shadow:

    0 0 25px
    rgba(255,215,0,.45);

}



/* =========================
   Status
========================= */


.poll-message {


    text-align:center;

    margin-top:15px;

    color:#59FF9D;

}



.poll-total {


    text-align:center;

    margin-top:25px;

    opacity:.8;

}



/* =========================
   Animation
========================= */


@keyframes pollFade {


from {

    opacity:0;

    transform:
    translateY(20px);

}


to {

    opacity:1;

    transform:none;

}


}



/* =========================
   Mobile
========================= */


@media(max-width:700px){


.zen-poll {


    padding:25px;

}


.zen-poll h2 {


    font-size:1.5rem;

}


.poll-option {


    padding:15px;

}


.poll-button {


    width:100%;

}


}