/* CS Poll — Frontend Styles */

.cs-poll {
    --cs-bg:        #1e1000;
    --cs-surface:   #2c1a04;
    --cs-border:    #5a3a10;
    --cs-gold:      #c8922a;
    --cs-gold-lt:   #e8b84b;
    --cs-gold-pale: #f5e6c8;
    --cs-muted:     #8a6a3a;
    --cs-bar-bg:    #3d2408;
    --cs-text:      #f0ddb8;
    --cs-radius:    6px;

    background:   var(--cs-surface);
    border:       1px solid var(--cs-border);
    border-top:   3px solid var(--cs-gold);
    border-radius: var(--cs-radius);
    padding:      24px 28px 20px;
    max-width:    480px;
    font-family:  'Georgia', serif;
    color:        var(--cs-text);
    box-shadow:   0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(200,146,42,0.15);
}

/* ── Header ── */
.cs-poll__header { margin-bottom: 20px; }

.cs-poll__eyebrow {
    display:        block;
    font-family:    'DM Sans', sans-serif;
    font-size:      10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--cs-gold);
    margin-bottom:  6px;
}

.cs-poll__title {
    margin:      0 0 10px;
    font-size:   18px;
    font-weight: normal;
    font-style:  italic;
    color:       var(--cs-gold-pale);
    line-height: 1.35;
}

/* ── Countdown ── */
.cs-poll__countdown {
    display:     flex;
    align-items: baseline;
    gap:         6px;
    font-size:   12px;
    color:       var(--cs-muted);
    margin-top:  4px;
}
.cs-poll__countdown-label { font-family: 'DM Sans', sans-serif; letter-spacing: 0.05em; }
.cs-poll__countdown-timer {
    font-family: 'Courier New', monospace;
    color:       var(--cs-gold);
    font-size:   13px;
}

/* ── Closed badge ── */
.cs-poll__closed-badge {
    display:     inline-block;
    margin-top:  6px;
    padding:     3px 10px;
    background:  rgba(90,58,16,0.5);
    border:      1px solid var(--cs-border);
    border-radius: 3px;
    font-family: 'DM Sans', sans-serif;
    font-size:   11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:       var(--cs-muted);
}

/* ── Vote buttons ── */
.cs-poll__vote-form { display: flex; flex-direction: column; gap: 10px; }

.cs-poll__option {
    display:     flex;
    align-items: center;
    gap:         12px;
    background:  var(--cs-bar-bg);
    border:      1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding:     12px 16px;
    cursor:      pointer;
    color:       var(--cs-text);
    font-family: 'Georgia', serif;
    font-size:   15px;
    text-align:  left;
    transition:  background 0.2s, border-color 0.2s, transform 0.1s;
    width:       100%;
}

.cs-poll__option:hover {
    background:   rgba(200,146,42,0.12);
    border-color: var(--cs-gold);
    transform:    translateX(3px);
}

.cs-poll__option:active { transform: translateX(1px); }

.cs-poll__option-dot {
    width:        14px;
    height:       14px;
    border-radius: 50%;
    border:       2px solid var(--cs-gold);
    flex-shrink:  0;
    transition:   background 0.2s;
}

.cs-poll__option:hover .cs-poll__option-dot,
.cs-poll__option.cs-selected .cs-poll__option-dot {
    background: var(--cs-gold);
}

.cs-poll__option-label { flex: 1; }

/* ── Message ── */
.cs-poll__msg {
    font-family: 'DM Sans', sans-serif;
    font-size:   13px;
    padding:     8px 12px;
    border-radius: var(--cs-radius);
    text-align:  center;
}
.cs-poll__msg.error {
    background: rgba(139,32,32,0.25);
    color: #e88;
    border: 1px solid #6b1010;
}

/* ── Results ── */
.cs-poll__results { display: flex; flex-direction: column; gap: 12px; }

.cs-poll__result-row {
    display:     grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap:         4px 10px;
    align-items: center;
}

.cs-poll__result-label {
    grid-column: 1;
    font-size:   14px;
    color:       var(--cs-gold-pale);
}

.cs-poll__result-bar-wrap {
    grid-column: 1;
    height:      6px;
    background:  var(--cs-bar-bg);
    border-radius: 3px;
    overflow:    hidden;
    border:      1px solid var(--cs-border);
}

.cs-poll__result-bar {
    height:       100%;
    background:   linear-gradient(90deg, var(--cs-gold), var(--cs-gold-lt));
    border-radius: 3px;
    min-width:    2px;
    transition:   width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.cs-poll__result-pct {
    grid-column:  2;
    grid-row:     1 / 3;
    font-family:  'Courier New', monospace;
    font-size:    14px;
    color:        var(--cs-gold);
    font-weight:  bold;
    text-align:   right;
    min-width:    38px;
}

.cs-poll__total {
    font-family: 'DM Sans', sans-serif;
    font-size:   11px;
    letter-spacing: 0.06em;
    color:       var(--cs-muted);
    text-align:  right;
    margin-top:  4px;
    text-transform: uppercase;
}

/* ── Animate bars in ── */
@keyframes cs-bar-in {
    from { width: 0 !important; }
}
.cs-poll__result-bar { animation: cs-bar-in 0.7s cubic-bezier(0.4,0,0.2,1) both; }