/* style.css - v26.1 - Checkmark animado, destaque de voto, melhorias de design */
:root {
    --pa-radius      : 12px;
    --pa-radius-sm   : 8px;
    --pa-primary-soft: rgba(99, 179, 237, 0.12);
    --pa-trans-quick : 0.2s ease;
    --pa-trans-slow  : 1.2s cubic-bezier(0.1, 0.5, 0.1, 1);
}

/* ══════════════════════════════════════════════════════
   0. VISIBILIDADE
══════════════════════════════════════════════════════ */
.pa-poll-content { display: block !important; }
.pa-poll-loading  { display: none  !important; }

/* ══════════════════════════════════════════════════════
   1. CRONÔMETRO
══════════════════════════════════════════════════════ */
.pa-timer-wrapper {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    background      : #f8fafc;
    padding         : 14px 20px;
    border-radius   : var(--pa-radius);
    margin-bottom   : 20px;
    border          : 1px solid #edf2f7;
}
.pa-timer-label { font-size:11px; text-transform:uppercase; font-weight:800; letter-spacing:1px; color:#64748b; }
.pa-countdown   { font-family:'Courier New',monospace; font-size:1.3rem; font-weight:900; color:var(--pa-primary); }

/* ══════════════════════════════════════════════════════
   2. BADGES E ESTADOS
══════════════════════════════════════════════════════ */
.pa-status-badge   { display:inline-block; padding:6px 14px; border-radius:20px; font-size:10px; font-weight:800; text-transform:uppercase; margin-bottom:12px; }
.pa-status-voted   { background:#38a169; color:#fff; box-shadow:0 2px 4px rgba(56,161,105,.2); }
.pa-status-closed  { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; width:100%; text-align:center; box-sizing:border-box; }
.pa-closed .pa-poll-item { cursor:default !important; transform:none !important; border-color:#e2e8f0 !important; }

.pa-poll-stats { display:none; }
.pa-voted .pa-poll-stats,
.pa-closed .pa-poll-stats { display:flex !important; }

/* ══════════════════════════════════════════════════════
   3. CARDS
══════════════════════════════════════════════════════ */
.pa-poll-list { display:flex; flex-direction:column; }

.pa-poll-item {
    position      : relative;
    display       : flex;
    align-items   : stretch;
    background    : #ffffff;
    margin-bottom : 12px;
    min-height    : 100px;
    border-radius : var(--pa-radius);
    border        : 2px solid #e2e8f0;
    cursor        : pointer;
    overflow      : hidden;
    transition    : transform var(--pa-trans-quick), border-color var(--pa-trans-quick), box-shadow var(--pa-trans-quick);
    z-index       : 1;
}
.pa-poll-item:hover { border-color:var(--pa-primary); transform:translateX(4px); box-shadow:0 4px 16px rgba(0,0,0,.07); }
.pa-voted .pa-poll-item { cursor:default; transform:none !important; }

/* Destaque ao selecionar (antes de confirmar) */
.pa-poll-item.selected {
    border-color     : var(--pa-primary) !important;
    background-color : var(--pa-primary-soft);
    box-shadow       : 0 0 0 2px var(--pa-primary);
    transform        : translateX(4px) !important;
}

/* ══════════════════════════════════════════════════════
   4. ITEM VOTADO (.pa-my-vote) — destaque permanente
══════════════════════════════════════════════════════ */
.pa-poll-item.pa-my-vote {
    border-color : var(--pa-primary) !important;
    background   : var(--pa-primary-soft);
    box-shadow   : 0 0 0 2px var(--pa-primary), 0 4px 16px rgba(0,0,0,.06) !important;
    animation    : pa-vote-pulse .55s ease both;
}
@keyframes pa-vote-pulse {
    0%   { box-shadow: 0 0 0 0   transparent; }
    50%  { box-shadow: 0 0 0 6px rgba(81,0,148,.18); }
    100% { box-shadow: 0 0 0 2px var(--pa-primary), 0 4px 16px rgba(0,0,0,.06); }
}

/* ══════════════════════════════════════════════════════
   5. CHECKMARK SVG ANIMADO
══════════════════════════════════════════════════════ */
.pa-check-icon {
    width          : 0;
    height         : 22px;
    stroke         : var(--pa-primary);
    flex-shrink    : 0;
    opacity        : 0;
    overflow       : hidden;
    transition     : width .38s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
    margin-left    : 8px;
    pointer-events : none;
    align-self     : center;
    display        : inline-block;
    vertical-align : middle;
}
.pa-poll-item.pa-my-vote .pa-check-icon { width:26px; opacity:1; }

/* Animação do traço (desenho do check) */
.pa-check-icon polyline {
    stroke-dasharray  : 30;
    stroke-dashoffset : 30;
    transition        : stroke-dashoffset .42s ease .12s;
}
.pa-poll-item.pa-my-vote .pa-check-icon polyline { stroke-dashoffset: 0; }

/* Bolinha de fundo do check */
.pa-poll-item.pa-my-vote::after {
    content        : '';
    position       : absolute;
    right          : 14px;
    top            : 50%;
    transform      : translateY(-50%) scale(0);
    width          : 34px;
    height         : 34px;
    border-radius  : 50%;
    background     : var(--pa-primary);
    opacity        : 0;
    animation      : pa-pop-in .42s cubic-bezier(.34,1.56,.64,1) forwards;
    pointer-events : none;
    z-index        : 3;
}
@keyframes pa-pop-in {
    from { transform:translateY(-50%) scale(0); opacity:0; }
    to   { transform:translateY(-50%) scale(1); opacity:.13; }
}

/* ══════════════════════════════════════════════════════
   6. IMAGEM E FRAME
══════════════════════════════════════════════════════ */
.pa-poll-img-frame {
    width       : 100px;
    flex-shrink : 0;
    overflow    : hidden;
    border-right: 1px solid #edf2f7;
    background  : #f1f5f9;
    display     : flex;
    align-self  : stretch;
}
.pa-poll-img { width:100% !important; height:100% !important; object-fit:cover !important; display:block; transition:transform .4s ease; }
.pa-poll-item:hover .pa-poll-img { transform:scale(1.04); }

/* ══════════════════════════════════════════════════════
   7. DETALHES (nome + % + check)
══════════════════════════════════════════════════════ */
.pa-poll-details {
    flex           : 1;
    padding        : 0 15px;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    z-index        : 2;
    min-width      : 0;
    pointer-events : none;
    position       : relative;
}
.pa-poll-name  { font-size:clamp(.85rem,2.5vw,1.1rem); font-weight:700; color:#2d3748; line-height:1.2; padding:10px 0; word-break:break-word; flex:1; min-width:0; }
.pa-poll-stats { display:flex; align-items:center; flex-shrink:0; margin-left:10px; }
.pa-poll-perc  { font-size:clamp(1rem,3vw,1.4rem); font-weight:900; color:var(--pa-primary); white-space:nowrap; }

/* ══════════════════════════════════════════════════════
   8. BARRA DE PROGRESSO
══════════════════════════════════════════════════════ */
.pa-progress-fill {
    position:absolute; left:0; top:0; bottom:0; width:0;
    background:var(--pa-primary); opacity:.13;
    transition:width var(--pa-trans-slow);
    z-index:0; pointer-events:none;
}
.pa-poll-item.pa-my-vote .pa-progress-fill { opacity:.22; }

/* ══════════════════════════════════════════════════════
   9. BOTÕES
══════════════════════════════════════════════════════ */
.pa-btn-confirm, .pa-btn-reset {
    width:100%; padding:15px; border-radius:var(--pa-radius);
    background:var(--pa-primary); color:#fff; border:none;
    font-size:1rem; font-weight:700; cursor:pointer;
    margin-top:10px; text-transform:uppercase; letter-spacing:.5px;
    transition:opacity .2s, transform .15s;
}
.pa-btn-confirm:hover, .pa-btn-reset:hover { opacity:.88; transform:translateY(-1px); }

/* ══════════════════════════════════════════════════════
   10. RODAPÉ
══════════════════════════════════════════════════════ */
.pa-total-box  { margin-top:25px; text-align:right; padding-top:15px; border-top:1px solid #f1f5f9; }
.pa-total-label { font-size:10px; color:#94a3b8; font-weight:700; text-transform:uppercase; }
.pa-total-count { font-size:1.2rem; font-weight:800; color:#475569; margin-left:5px; }

.pa-btn-share { flex:1; min-width:80px; text-align:center; padding:10px 5px; border-radius:var(--pa-radius-sm); color:#fff !important; text-decoration:none !important; font-size:12px; font-weight:700; transition:opacity .2s, transform .15s; }
.pa-btn-share:hover { opacity:.85; transform:translateY(-1px); }
.pa-btn-share.wa { background:#25D366; }
.pa-btn-share.fb { background:#1877F2; }
.pa-btn-share.tw { background:#000; }

/* ══════════════════════════════════════════════════════
   11. DISCLAIMER
══════════════════════════════════════════════════════ */
.pa-poll-disclaimer { font-size:12px; font-style:italic; color:#64748b; margin-top:20px; padding:10px 5px 0; text-align:left; line-height:1.5; opacity:.8; border-top:1px solid #f1f5f9; }

/* ══════════════════════════════════════════════════════
   12. GRUPOS
══════════════════════════════════════════════════════ */
.pa-group-container { margin-top:30px; margin-bottom:15px; }
.pa-group-title { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:#475569; margin-bottom:15px; display:flex; align-items:center; gap:12px; }
.pa-group-title::after { content:''; flex:1; height:2px; background:linear-gradient(to right,#edf2f7,transparent); }

/* ══════════════════════════════════════════════════════
   13. ANIMAÇÃO AO REVELAR RESULTADOS
══════════════════════════════════════════════════════ */
.pa-voted .pa-poll-item { animation:pa-fade-in .45s ease both; }
@keyframes pa-fade-in { from{opacity:.7;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════════
   14. RESPONSIVIDADE
══════════════════════════════════════════════════════ */
@media (max-width:480px) {
    .pa-poll-img-frame { width:80px; }
    .pa-poll-item      { min-height:80px; }
    .pa-check-icon     { height:18px; }
    .pa-poll-item.pa-my-vote .pa-check-icon { width:22px; }
}