.poll-wrapper {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(74, 158, 255, 0.1);
border-radius: 10px;
padding: 14px;
margin: 12px 0;
transition: all 0.3s ease;
}
.poll-title {
font-size: 15px;
font-weight: 600;
color: #ffffff;
margin: 0 0 12px 0;
}
.poll-option {
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
}
.poll-option:hover:not(.poll-option-voted):not(.poll-option-disabled) {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(74, 158, 255, 0.5);
}
.poll-option-voted {
border-color: #4a9eff;
background: rgba(74, 158, 255, 0.1);
}
.poll-option-disabled {
cursor: not-allowed;
opacity: 0.7;
}
.poll-option-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, rgba(74, 158, 255, 0.2), rgba(74, 158, 255, 0.05));
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 6px;
z-index: 0;
}
.poll-option-text {
color: #ffffff;
font-size: 14px;
font-weight: 500;
position: relative;
z-index: 1;
flex: 1;
word-break: break-word;
overflow-wrap: break-word;
}
.poll-option-stats {
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
margin-left: auto;
}
.poll-option-percentage {
color: #4a9eff;
font-size: 14px;
font-weight: 700;
}
.poll-option-votes {
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}
.poll-option-check {
color: #4a9eff;
font-size: 16px;
position: relative;
z-index: 1;
}
.poll-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
padding-top: 8px;
}
.poll-total-votes {
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
}
.poll-time-left {
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
}
.poll-time-left.poll-ended {
color: #ff6b6b;
}
.poll-time-left.poll-ending-soon {
color: #f59e0b;
}
.poll-winner-badge {
background: linear-gradient(135deg, #4a9eff, #3b8eef);
color: #000;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
position: relative;
z-index: 1;
}
.poll-remove-vote {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #ef4444;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.poll-remove-vote:hover {
background: rgba(239, 68, 68, 0.2);
border-color: #ef4444;
transform: translateY(-1px);
}
.poll-loading {
text-align: center;
padding: 20px;
color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 640px) {
.poll-wrapper {
padding: 12px;
margin: 10px 0;
}
.poll-title {
font-size: 14px;
margin: 0 0 10px 0;
}
.poll-option {
padding: 8px 10px;
margin-bottom: 6px;
gap: 4px;
min-height: auto;
}
.poll-option-text {
font-size: 13px;
width: 100%;
}
.poll-option-stats {
justify-content: flex-start;
margin-left: 0;
gap: 6px;
}
.poll-option-percentage {
font-size: 13px;
}
.poll-option-votes {
font-size: 11px;
}
.poll-option-check {
font-size: 14px;
margin-left: 6px;
}
.poll-winner-badge {
font-size: 10px;
padding: 2px 6px;
margin-left: 6px;
}
.poll-footer {
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-top: 4px;
padding-top: 8px;
}
.poll-total-votes {
font-size: 12px;
}
.poll-time-left {
font-size: 12px;
}
.poll-remove-vote {
font-size: 11px;
padding: 3px 8px;
}
}