@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════════
   AWESOME POLL v1.3  —  WP-hardened
════════════════════════════════════════════ */

.apoll-wrap, .apoll-wrap * {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
}

.apoll-wrap {
    position: relative !important;
    max-width: 560px !important;
    width: 100% !important;
    margin: 32px auto !important;
    padding: 0 !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* ── Card ── */
.apoll-wrap .apoll-inner {
    background: #0D0C18 !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 20px !important;
    padding: 32px 28px 28px !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: hidden !important;
    width: 100% !important;
}
.apoll-wrap .apoll-inner::before {
    content: '' !important; display: block !important;
    position: absolute !important; top: -100px !important; right: -100px !important;
    width: 300px !important; height: 300px !important;
    background: radial-gradient(circle, rgba(124,111,255,.28) 0%, transparent 70%) !important;
    pointer-events: none !important; z-index: 0 !important;
}
.apoll-wrap .apoll-inner::after {
    content: '' !important; display: block !important;
    position: absolute !important; bottom: -80px !important; left: -80px !important;
    width: 240px !important; height: 240px !important;
    background: radial-gradient(circle, rgba(255,107,107,.2) 0%, transparent 70%) !important;
    pointer-events: none !important; z-index: 0 !important;
}

/* ── Badge ── */
.apoll-wrap .apoll-header {
    margin: 0 0 22px !important; padding: 0 !important;
    position: relative !important; z-index: 3 !important;
}
.apoll-wrap .apoll-badge {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    background: rgba(124,111,255,.2) !important;
    border: 1px solid rgba(124,111,255,.5) !important;
    border-radius: 30px !important; padding: 5px 14px !important;
    margin: 0 0 14px !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 11px !important; font-weight: 800 !important;
    letter-spacing: 2.5px !important; color: #c4bfff !important;
    text-decoration: none !important; text-transform: uppercase !important; line-height: 1 !important;
}
.apoll-wrap .apoll-badge::before {
    content: '' !important; display: inline-block !important;
    width: 7px !important; height: 7px !important;
    background: #c4bfff !important; border-radius: 50% !important; flex-shrink: 0 !important;
    animation: apoll-pulse 1.6s ease-in-out infinite !important;
}
@keyframes apoll-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.3; transform:scale(.6); }
}

/* ── Question ── */
.apoll-wrap .apoll-inner .apoll-question,
.apoll-wrap h2.apoll-question {
    font-family: 'Syne', sans-serif !important;
    font-size: clamp(20px, 5vw, 26px) !important;
    font-weight: 800 !important; line-height: 1.28 !important;
    color: #FFFFFF !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: none !important;
    text-shadow: none !important; text-decoration: none !important;
    letter-spacing: -.3px !important;
}

/* ── Choice wrappers ── */
.apoll-wrap .apoll-choices-a,
.apoll-wrap .apoll-choices-b {
    position: relative !important; z-index: 3 !important;
    margin: 0 !important; padding: 0 !important;
}

/* ── OR divider ── */
.apoll-wrap .apoll-or-divider {
    display: flex !important; align-items: center !important;
    gap: 10px !important; margin: 12px 0 !important; padding: 0 !important;
    position: relative !important; z-index: 3 !important;
}
.apoll-wrap .apoll-or-divider span {
    font-family: 'DM Sans', sans-serif !important; font-size: 10px !important;
    font-weight: 700 !important; letter-spacing: 3px !important;
    color: #6B69A0 !important; flex-shrink: 0 !important;
}
.apoll-wrap .apoll-or-divider::before,
.apoll-wrap .apoll-or-divider::after {
    content: '' !important; display: block !important; flex: 1 !important;
    height: 1px !important; background: rgba(255,255,255,.1) !important;
}

/* ══ BUTTONS ══ */
.apoll-wrap .apoll-btn {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important; min-height: 62px !important;
    padding: 16px 22px !important; border-radius: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    font-weight: 700 !important; line-height: 1.3 !important;
    cursor: pointer !important;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1),
                box-shadow .22s ease, background .18s ease, border-color .18s ease !important;
    position: relative !important; overflow: hidden !important;
    text-align: left !important; text-shadow: none !important;
    text-decoration: none !important; outline: none !important;
    appearance: none !important; -webkit-appearance: none !important; margin: 0 !important;
}
.apoll-wrap .apoll-btn::before {
    content: '' !important; display: block !important;
    position: absolute !important; inset: 0 !important;
    opacity: 0 !important; transition: opacity .22s !important; border-radius: 12px !important;
}
.apoll-wrap .apoll-btn-a {
    background: rgba(124,111,255,.16) !important;
    border: 2px solid rgba(124,111,255,.65) !important;
    color: #E0DCFF !important;
}
.apoll-wrap .apoll-btn-a::before {
    background: linear-gradient(135deg, rgba(124,111,255,.34), rgba(159,122,255,.16)) !important;
}
.apoll-wrap .apoll-btn-a:hover, .apoll-wrap .apoll-btn-a:focus {
    border-color: #9F7AFF !important; color: #FFFFFF !important;
    background: rgba(124,111,255,.3) !important;
    transform: translateY(-3px) scale(1.012) !important;
    box-shadow: 0 10px 34px rgba(124,111,255,.42) !important;
}
.apoll-wrap .apoll-btn-a:hover::before { opacity: 1 !important; }
.apoll-wrap .apoll-btn-b {
    background: rgba(255,107,107,.14) !important;
    border: 2px solid rgba(255,107,107,.6) !important;
    color: #FFD0D0 !important;
}
.apoll-wrap .apoll-btn-b::before {
    background: linear-gradient(135deg, rgba(255,107,107,.3), rgba(255,154,154,.15)) !important;
}
.apoll-wrap .apoll-btn-b:hover, .apoll-wrap .apoll-btn-b:focus {
    border-color: #FF8080 !important; color: #FFFFFF !important;
    background: rgba(255,107,107,.27) !important;
    transform: translateY(-3px) scale(1.012) !important;
    box-shadow: 0 10px 34px rgba(255,107,107,.4) !important;
}
.apoll-wrap .apoll-btn-b:hover::before { opacity: 1 !important; }
.apoll-wrap .apoll-btn .apoll-btn-label {
    position: relative !important; z-index: 1 !important; color: inherit !important; flex: 1 !important;
}
.apoll-wrap .apoll-btn .apoll-btn-arrow {
    position: relative !important; z-index: 1 !important; font-size: 20px !important;
    color: inherit !important; opacity: 0 !important; transform: translateX(-6px) !important;
    transition: opacity .18s, transform .18s !important; flex-shrink: 0 !important; margin-left: 8px !important;
}
.apoll-wrap .apoll-btn:hover .apoll-btn-arrow { opacity: 1 !important; transform: translateX(0) !important; }
.apoll-wrap .apoll-btn.apoll-chosen-a {
    border-color: #9F7AFF !important; background: rgba(124,111,255,.3) !important;
    color: #FFFFFF !important; box-shadow: 0 0 28px rgba(124,111,255,.35) !important;
}
.apoll-wrap .apoll-btn.apoll-chosen-b {
    border-color: #FF8080 !important; background: rgba(255,107,107,.25) !important;
    color: #FFFFFF !important; box-shadow: 0 0 28px rgba(255,107,107,.3) !important;
}

/* ════════════════════════════════════════════
   RESULTS
════════════════════════════════════════════ */
.apoll-wrap .apoll-results {
    position: relative !important; z-index: 3 !important;
    /* JS controls display/opacity */
}

.apoll-wrap .apoll-result-row {
    margin-bottom: 20px !important; padding: 0 !important;
}
.apoll-wrap .apoll-result-top {
    display: flex !important; align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important; gap: 8px !important;
}
.apoll-wrap .apoll-result-label {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important; font-weight: 700 !important;
    color: #D8D5F5 !important;
    margin: 0 !important; padding: 0 !important;
    flex: 1 !important; line-height: 1.3 !important;
}
.apoll-wrap .apoll-pct {
    font-family: 'Syne', sans-serif !important;
    font-size: 26px !important; font-weight: 800 !important;
    color: #FFFFFF !important; white-space: nowrap !important;
    line-height: 1 !important; flex-shrink: 0 !important;
    min-width: 60px !important; text-align: right !important;
}

/* Bar container */
.apoll-wrap .apoll-bar-wrap {
    width: 100% !important; display: block !important;
    background: rgba(255,255,255,.1) !important;
    border-radius: 8px !important; height: 12px !important;
    overflow: hidden !important; position: relative !important;
}
/* Bar fill — color set by JS inline style */
.apoll-wrap .apoll-bar {
    display: block !important;
    height: 100% !important; width: 0% !important;
    border-radius: 8px !important;
    /* JS sets background + transition */
}

.apoll-wrap .apoll-result-row.apoll-winner .apoll-result-label { color: #FFFFFF !important; }
.apoll-wrap .apoll-result-row.apoll-winner .apoll-bar-wrap {
    box-shadow: 0 0 12px rgba(124,111,255,.5) !important;
}

.apoll-wrap .apoll-total {
    font-family: 'DM Sans', sans-serif !important; font-size: 13px !important;
    color: #7875A8 !important; text-align: center !important;
    margin: 0 !important; padding: 14px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
}
.apoll-wrap .apoll-total .apoll-total-num {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important; font-size: 16px !important; color: #FFFFFF !important;
}

/* ── Redirect ── */
.apoll-wrap .apoll-redirect-notice {
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 6px !important;
    margin: 16px 0 0 !important;
    background: rgba(78,205,196,.12) !important;
    border: 1px solid rgba(78,205,196,.3) !important;
    border-radius: 10px !important; padding: 13px 18px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important; color: #7BE8E0 !important;
    text-align: center !important; flex-wrap: wrap !important;
}
.apoll-wrap .apoll-countdown {
    font-family: 'Syne', sans-serif !important;
    font-size: 22px !important; font-weight: 800 !important;
    color: #4ECDC4 !important; line-height: 1 !important;
    display: inline-block !important; min-width: 28px !important; text-align: center !important;
}

/* ── Particles ── */
.apoll-wrap .apoll-particle-container {
    position: absolute !important; inset: 0 !important;
    pointer-events: none !important; overflow: hidden !important; z-index: 10 !important;
}
@keyframes apoll-particle-fly {
    0%   { opacity:1; transform:translate(0,0) scale(1); }
    100% { opacity:0; transform:translate(var(--dx),var(--dy)) scale(0); }
}

/* ════════ MOBILE ≤480px ════════ */
@media (max-width: 480px) {
    .apoll-wrap { margin: 16px 0 !important; max-width: 100% !important; }
    .apoll-wrap .apoll-inner { border-radius: 16px !important; padding: 22px 16px 20px !important; }
    .apoll-wrap .apoll-btn { min-height: 56px !important; padding: 14px 16px !important; }
    .apoll-wrap .apoll-pct { font-size: 22px !important; min-width: 52px !important; }
    .apoll-wrap .apoll-result-label { font-size: 13px !important; }
    .apoll-wrap .apoll-bar-wrap { height: 10px !important; }
}