/* FB-Style Voting — frontend */
.fbv-poll {
    max-width: 520px;
    margin: 1.5em 0;
    padding: 1.25em;
    border: 1px solid #dadde1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1c1e21;
    box-sizing: border-box;
}
.fbv-poll *, .fbv-poll *::before, .fbv-poll *::after { box-sizing: border-box; }

.fbv-poll__header { margin-bottom: 0.8em; }
.fbv-poll__title {
    margin: 0 0 0.25em 0;
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.3;
}
.fbv-poll__question {
    margin: 0;
    color: #65676b;
    font-size: 0.95em;
}

.fbv-poll__options {
    list-style: none;
    margin: 0 0 0.75em 0;
    padding: 0;
}

.fbv-option {
    position: relative;
    margin: 0 0 0.5em 0;
    padding: 0.6em 0.8em;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    background: #f7f8fa;
    transition: background .15s ease, border-color .15s ease;
    overflow: hidden;
}
.fbv-option:hover { background: #f0f2f5; border-color: #d0d2d7; }
.fbv-option--voted { border-color: #1877f2; background: #e7f3ff; }
.fbv-option--pending {
    opacity: .75;
    border-style: dashed;
}
.fbv-option--new-flash {
    animation: fbv-flash .9s ease;
}
@keyframes fbv-flash {
    0%   { background: #fff4ce; }
    100% { background: #f7f8fa; }
}

.fbv-option__label {
    display: flex;
    align-items: center;
    gap: 0.6em;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.fbv-option__label input {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: #1877f2;
    flex: 0 0 auto;
}
.fbv-option__text {
    flex: 1 1 auto;
    font-size: 0.95em;
    word-break: break-word;
}
.fbv-option__meta {
    flex: 0 0 auto;
    font-size: 0.85em;
    color: #65676b;
    font-variant-numeric: tabular-nums;
}
.fbv-option__percent { font-weight: 600; color: #1c1e21; }
.fbv-option__votes { margin-left: 0.3em; }

.fbv-option__bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: transparent;
    z-index: 1;
}
.fbv-option__bar-fill {
    height: 100%;
    background: #1877f2;
    transition: width .4s ease;
}

.fbv-add-option { margin: 0.5em 0 0.75em 0; }
.fbv-add-option__trigger {
    background: none;
    border: 1px dashed #bcbec2;
    border-radius: 8px;
    padding: 0.55em 0.8em;
    width: 100%;
    text-align: left;
    color: #65676b;
    cursor: pointer;
    font-size: 0.9em;
    transition: background .15s ease, color .15s ease;
}
.fbv-add-option__trigger:hover { background: #f0f2f5; color: #1877f2; }

.fbv-add-option__form {
    display: flex;
    gap: 0.4em;
    margin-top: 0.4em;
}
.fbv-add-option__input {
    flex: 1 1 auto;
    padding: 0.55em 0.75em;
    border: 1px solid #ced0d4;
    border-radius: 8px;
    font-size: 0.95em;
    min-width: 0;
}
.fbv-add-option__input:focus {
    outline: none;
    border-color: #1877f2;
    box-shadow: 0 0 0 3px rgba(24,119,242,.15);
}
.fbv-add-option__submit {
    padding: 0.55em 1em;
    background: #e4e6eb;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.fbv-add-option__submit:hover { background: #d8dadf; }

.fbv-poll__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    margin-top: 0.5em;
    flex-wrap: wrap;
}
.fbv-poll__submit {
    padding: 0.6em 1.5em;
    background: #1877f2;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}
.fbv-poll__submit:hover { background: #166fe5; }
.fbv-poll__submit:active { transform: translateY(1px); }
.fbv-poll__submit:disabled { background: #bcc0c4; cursor: not-allowed; }

.fbv-poll__total {
    color: #65676b;
    font-size: 0.85em;
}

.fbv-poll__message {
    min-height: 1.4em;
    margin-bottom: 0.5em;
    font-size: 0.9em;
}
.fbv-poll__message--error   { color: #d73a49; }
.fbv-poll__message--success { color: #1a7f37; }
.fbv-poll__message--info    { color: #1877f2; }

.fbv-error {
    padding: 0.75em 1em;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    color: #611a15;
}

/* ----------------------- Closed State ----------------------- */

.fbv-poll__closed-badge {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0.3em 0.75em;
    background: #f0f2f5;
    border: 1px solid #dadde1;
    border-radius: 999px;
    font-size: 0.8em;
    color: #65676b;
    font-weight: 500;
}

.fbv-poll--closed .fbv-option {
    cursor: default;
}
.fbv-poll--closed .fbv-option:hover {
    background: #f7f8fa;
    border-color: #e4e6eb;
}
.fbv-poll--closed .fbv-option__label {
    cursor: default;
    padding-left: 0;
}
.fbv-poll--closed .fbv-option__bar-fill {
    background: #65676b;
}

/* Dynamic hide — when admin closes a poll via live update the DOM elements
   may still exist until next page load. CSS ensures no interaction. */
.fbv-poll--closed .fbv-poll__submit,
.fbv-poll--closed .fbv-add-option,
.fbv-poll--closed input[type="checkbox"],
.fbv-poll--closed input[type="radio"] {
    display: none !important;
}

@media (max-width: 480px) {
    .fbv-poll { padding: 1em; }
    .fbv-option__meta { font-size: 0.8em; }
    .fbv-poll__actions { flex-direction: column; align-items: stretch; }
    .fbv-poll__submit { width: 100%; }
    .fbv-poll__total { text-align: center; }
}