.mosbvp-poll{
    direction:rtl;
    max-width:760px;
    margin:32px auto;
    padding:24px;
    background:#fff;
    border:1px solid #ececf3;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    font-family:inherit;
}

.mosbvp-heading{
    text-align:center;
    margin-bottom:20px;
}

.mosbvp-heading h3{
    margin:0 0 8px;
    font-size:23px;
    line-height:1.6;
}

.mosbvp-heading p{
    margin:0;
    color:#666;
}

.mosbvp-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.mosbvp-card{
    appearance:none;
    -webkit-appearance:none;
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    min-width:0;
    padding:0;
    overflow:hidden;
    background:#fff;
    border:2px solid #eee;
    border-radius:18px;
    cursor:pointer;
    text-align:right;
    font-family:inherit;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.mosbvp-card:hover{
    transform:translateY(-3px);
    border-color:#b9a8ff;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.mosbvp-card:focus-visible{
    outline:3px solid rgba(121,80,242,.22);
    outline-offset:2px;
}

.mosbvp-card:disabled{
    cursor:default;
}

.mosbvp-card-media{
    position:relative;
    display:block;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:#f4f4f7;
}

.mosbvp-card-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.mosbvp-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:54px;
    font-weight:900;
    color:#7b61ff;
    background:linear-gradient(135deg,#f7f5ff,#fff1f8);
}

.mosbvp-check{
    position:absolute;
    top:10px;
    left:10px;
    width:32px;
    height:32px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#6f4ef2;
    color:#fff;
    font-weight:900;
    opacity:0;
    transform:scale(.7);
    transition:.2s;
}

.mosbvp-card.mosbvp-selected{
    border-color:#7950f2;
    background:#faf9ff;
}

.mosbvp-card.mosbvp-selected .mosbvp-check{
    opacity:1;
    transform:scale(1);
}

.mosbvp-card-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:13px 13px 11px;
}

.mosbvp-label{
    min-width:0;
    font-size:17px;
    font-weight:800;
    color:#222;
}

.mosbvp-result{
    flex:0 0 auto;
    font-size:15px;
    font-weight:800;
    color:#6f4ef2;
    opacity:0;
    transition:.2s;
}

.mosbvp-bar{
    height:6px;
    background:#eee;
    opacity:0;
    transition:.2s;
}

.mosbvp-bar-fill{
    display:block;
    height:100%;
    width:0;
    background:#7950f2;
    transition:width .65s ease;
}

.mosbvp-show-results .mosbvp-result,
.mosbvp-show-results .mosbvp-bar{
    opacity:1;
}

.mosbvp-footer{
    text-align:center;
    margin-top:16px;
}

.mosbvp-message{
    min-height:24px;
    font-weight:800;
}

.mosbvp-total{
    margin-top:2px;
    font-size:13px;
    color:#777;
}

.mosbvp-loading{
    opacity:.7;
    pointer-events:none;
}

@media(max-width:620px){
    .mosbvp-poll{
        padding:17px 12px;
        border-radius:17px;
    }

    .mosbvp-grid{
        gap:8px;
    }

    .mosbvp-heading h3{
        font-size:19px;
    }

    .mosbvp-card{
        border-radius:13px;
    }

    .mosbvp-card-bottom{
        padding:10px 8px 8px;
        flex-direction:column;
        gap:3px;
        text-align:center;
    }

    .mosbvp-label{
        font-size:14px;
    }

    .mosbvp-result{
        font-size:13px;
    }

    .mosbvp-check{
        width:27px;
        height:27px;
        top:7px;
        left:7px;
    }
}

@media(max-width:420px){
    .mosbvp-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* =========================================================
 * Text-only poll layout
 * Automatically used when none of the options has an image.
 * ========================================================= */

.mosbvp-text-layout{
    max-width:680px;
}

.mosbvp-text-layout .mosbvp-grid{
    grid-template-columns:1fr;
    gap:10px;
}

.mosbvp-text-layout .mosbvp-card{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    grid-template-rows:auto 6px;
    align-items:center;
    min-height:64px;
    border:1px solid #e4e4ea;
    border-radius:14px;
    background:#fff;
    overflow:hidden;
    text-align:right;
}

.mosbvp-text-layout .mosbvp-card:hover{
    transform:none;
    border-color:#a995ff;
    box-shadow:0 5px 14px rgba(0,0,0,.05);
}

.mosbvp-text-layout .mosbvp-text-check{
    grid-column:1;
    grid-row:1;
    width:26px;
    height:26px;
    margin-right:12px;
    border:2px solid #d6d6de;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:transparent;
    background:#fff;
    font-size:14px;
    font-weight:900;
    transition:.2s;
}

.mosbvp-text-layout .mosbvp-card-bottom{
    grid-column:2;
    grid-row:1;
    padding:15px 16px;
    min-width:0;
}

.mosbvp-text-layout .mosbvp-label{
    font-size:16px;
    line-height:1.7;
}

.mosbvp-text-layout .mosbvp-result{
    min-width:48px;
    text-align:left;
}

.mosbvp-text-layout .mosbvp-bar{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
}

.mosbvp-text-layout .mosbvp-card.mosbvp-selected{
    border-color:#7950f2;
    background:#faf9ff;
}

.mosbvp-text-layout .mosbvp-card.mosbvp-selected .mosbvp-text-check{
    border-color:#7950f2;
    background:#7950f2;
    color:#fff;
}

.mosbvp-text-layout .mosbvp-card:disabled:not(.mosbvp-selected){
    opacity:.82;
}

@media(max-width:620px){
    .mosbvp-text-layout .mosbvp-grid{
        grid-template-columns:1fr;
    }

    .mosbvp-text-layout .mosbvp-card{
        grid-template-columns:38px minmax(0,1fr);
        min-height:58px;
    }

    .mosbvp-text-layout .mosbvp-card-bottom{
        flex-direction:row;
        text-align:right;
        padding:13px 12px;
    }

    .mosbvp-text-layout .mosbvp-label{
        font-size:15px;
    }

    .mosbvp-text-layout .mosbvp-text-check{
        margin-right:9px;
        width:24px;
        height:24px;
    }
}