/* ═══════════════════════════════════════════════════════════════
   Einfache Umfragen + Gewinnspiel v3 – Frontend CSS
   Blogarise-kompatibel | Zentriert | Responsive
═══════════════════════════════════════════════════════════════ */

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

:root {
    --sp-accent:      #f5c842 !important;
    --sp-accent-dark: #d4a800 !important;
    --sp-surface:     #1a1a1a !important;
    --sp-border:      #2a2a2a !important;
    --sp-text:        #f0f0f0 !important;
    --sp-muted:       #888 !important;
    --sp-success:     #3ecf8e !important;
    --sp-error:       #f87171 !important;
    --sp-radius:      14px !important;
    --sp-transition:  0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    --sp-gs-overlay-bg: rgba(0,0,0,0.75) !important;
}

/* ── Wrapper – zentriert ──────────────────────────────────────── */
.sp-poll-wrap {
    background: var(--sp-surface) !important;
    background-color: #1a1a1a !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: 20px !important;
    padding: 36px !important;
    max-width: 560px !important;
    margin: 32px auto !important;
    font-family: 'DM Sans', sans-serif !important;
    color: var(--sp-text) !important;
    box-shadow: 0 0 0 1px #ffffff08, 0 12px 50px rgba(0,0,0,0.55) !important;
    position: relative !important;
    overflow: hidden !important;
}

.sp-poll-wrap::before,
.sp-poll-wrap::after {
    content: '' !important;
    position: absolute !important;
    pointer-events: none !important;
}

.sp-poll-wrap::before {
    top: -70px; right: -70px !important;
    width: 220px; height: 220px !important;
    background: radial-gradient(circle, rgba(245,200,66,0.13) 0%, transparent 70%) !important;
}

.sp-poll-wrap::after {
    bottom: -60px; left: -60px !important;
    width: 180px; height: 180px !important;
    background: radial-gradient(circle, rgba(62,207,142,0.07) 0%, transparent 70%) !important;
}

/* ── Badge ────────────────────────────────────────────────────── */
.sp-poll-badge {
    display: inline-block !important;
    background: rgba(245,200,66,0.12) !important;
    background-color: rgba(245,200,66,0.12) !important;
    color: var(--sp-accent) !important;
    -webkit-text-fill-color: #f5c842 !important;
    border: 1px solid rgba(245,200,66,0.25) !important;
    border-radius: 30px !important;
    padding: 4px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
}

/* ── Frage ────────────────────────────────────────────────────── */
.sp-poll-wrap .sp-question {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 0 24px 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    letter-spacing: -0.02em !important;
}

/* ── Formular ─────────────────────────────────────────────────── */
.sp-poll-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* ── Optionen ─────────────────────────────────────────────────── */
.sp-poll-wrap .sp-option {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    background: #111 !important;
    background-color: #111 !important;
    border: 1.5px solid var(--sp-border) !important;
    border-radius: var(--sp-radius) !important;
    cursor: pointer !important;
    transition: border-color var(--sp-transition), background var(--sp-transition), transform var(--sp-transition) !important;
    font-size: 0.97rem !important;
    font-weight: 500 !important;
    color: var(--sp-text) !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    user-select: none !important;
    margin: 0 !important;
}

.sp-poll-wrap .sp-option:hover {
    border-color: var(--sp-accent) !important;
    background: #1e1a06 !important;
    background-color: #1e1a06 !important;
    transform: translateX(3px) !important;
}

.sp-poll-wrap .sp-option input[type="radio"],
.sp-poll-wrap .sp-option input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important; height: 20px !important; min-width: 20px !important;
    border: 2px solid #444 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: pointer !important;
    transition: border-color var(--sp-transition), background var(--sp-transition) !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.sp-poll-wrap .sp-option input[type="checkbox"] {
    border-radius: 6px !important;
}

.sp-poll-wrap .sp-option input[type="radio"]:checked,
.sp-poll-wrap .sp-option input[type="checkbox"]:checked {
    border-color: var(--sp-accent) !important;
    background: var(--sp-accent) !important;
    background-color: #f5c842 !important;
}

.sp-poll-wrap .sp-option input[type="radio"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50%; left: 50% !important;
    transform: translate(-50%,-50%) !important;
    width: 7px; height: 7px !important;
    background: #111 !important;
    background-color: #111 !important;
    border-radius: 50% !important;
}

.sp-poll-wrap .sp-option input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50%; left: 50% !important;
    transform: translate(-50%,-50%) !important;
    font-size: 13px !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.sp-poll-wrap .sp-option:has(input:checked) {
    border-color: var(--sp-accent) !important;
    background: #1e1a06 !important;
    background-color: #1e1a06 !important;
}

/* ── Eigene Antwort ───────────────────────────────────────────── */
.sp-custom-answer {
    margin-top: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.sp-custom-answer label {
    font-size: 0.82rem !important;
    color: var(--sp-muted) !important;
    -webkit-text-fill-color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.sp-custom-input {
    padding: 12px 16px !important;
    background: #111 !important;
    background-color: #111 !important;
    border: 1.5px solid var(--sp-border) !important;
    border-radius: var(--sp-radius) !important;
    color: var(--sp-text) !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    font-size: 0.95rem !important;
    font-family: 'DM Sans', sans-serif !important;
    width: 100% !important;
    box-sizing: border-box !important;
    appearance: none !important;
    margin: 0 !important;
}

.sp-custom-input::placeholder { color: #555 !important; }
.sp-custom-input:focus {
    outline: none !important;
    border-color: var(--sp-accent) !important;
    box-shadow: 0 0 0 3px rgba(245,200,66,0.12) !important;
}

.sp-custom-row { display: flex !important; gap: 6px !important; margin-bottom: 6px !important; }
.sp-remove-custom-btn {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #aaa !important;
    -webkit-text-fill-color: #aaa !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

.sp-add-custom-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px dashed #444 !important;
    color: #888 !important;
    -webkit-text-fill-color: #888 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    text-align: left !important;
    transition: color var(--sp-transition), border-color var(--sp-transition) !important;
    margin: 0 !important;
}

.sp-add-custom-btn:hover {
    color: var(--sp-accent) !important;
    -webkit-text-fill-color: #f5c842 !important;
    border-color: var(--sp-accent) !important;
}

/* ── Submit-Button ────────────────────────────────────────────── */
.sp-poll-wrap .sp-submit-btn {
    margin-top: 8px !important;
    background: var(--sp-accent) !important;
    background-color: #f5c842 !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    border: none !important;
    border-radius: var(--sp-radius) !important;
    padding: 15px 28px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: 'Bricolage Grotesque', sans-serif !important;
    cursor: pointer !important;
    transition: background var(--sp-transition), transform var(--sp-transition), box-shadow var(--sp-transition) !important;
    width: 100% !important;
    text-align: center !important;
    appearance: none !important;
}

.sp-poll-wrap .sp-submit-btn:hover {
    background: #ffe066 !important;
    background-color: #ffe066 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(245,200,66,0.35) !important;
}

.sp-poll-wrap .sp-submit-btn:disabled {
    background: #333 !important;
    background-color: #333 !important;
    color: #666 !important;
    -webkit-text-fill-color: #666 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Nachrichten ──────────────────────────────────────────────── */
.sp-message { margin-top: 8px !important; font-size: 0.88rem !important; min-height: 18px !important; }
.sp-message.error { color: var(--sp-error) !important; -webkit-text-fill-color: #f87171 !important; }
.sp-message.success { color: var(--sp-success) !important; -webkit-text-fill-color: #3ecf8e !important; }

/* ── Notices ──────────────────────────────────────────────────── */
.sp-voted-notice,
.sp-inactive-notice {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 16px !important;
    border-radius: var(--sp-radius) !important;
    margin-bottom: 20px !important;
    font-size: 0.93rem !important;
    font-weight: 500 !important;
}

.sp-voted-notice {
    background: rgba(62,207,142,0.1) !important;
    background-color: rgba(62,207,142,0.1) !important;
    color: var(--sp-success) !important;
    -webkit-text-fill-color: #3ecf8e !important;
    border: 1px solid rgba(62,207,142,0.25) !important;
}

.sp-inactive-notice {
    background: rgba(245,200,66,0.08) !important;
    background-color: rgba(245,200,66,0.08) !important;
    color: var(--sp-accent) !important;
    -webkit-text-fill-color: #f5c842 !important;
    border: 1px solid rgba(245,200,66,0.2) !important;
}

.sp-no-poll {
    color: var(--sp-muted) !important;
    -webkit-text-fill-color: #888 !important;
    font-style: italic !important;
    font-size: 0.9rem !important;
}

/* ── Gewinner-Box ─────────────────────────────────────────────── */
.sp-gewinner-box {
    margin-top: 16px !important;
    padding: 12px 16px !important;
    background: rgba(245,200,66,0.1) !important;
    background-color: rgba(245,200,66,0.1) !important;
    border: 1px solid rgba(245,200,66,0.3) !important;
    border-radius: var(--sp-radius) !important;
    color: var(--sp-accent) !important;
    -webkit-text-fill-color: #f5c842 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-align: center !important;
}

/* ── Ergebnisse ───────────────────────────────────────────────── */
.sp-results { margin-top: 4px !important; }

.sp-total {
    font-size: 0.82rem !important;
    color: var(--sp-muted) !important;
    -webkit-text-fill-color: #888 !important;
    margin: 0 0 18px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.sp-total strong {
    color: var(--sp-accent) !important;
    -webkit-text-fill-color: #f5c842 !important;
}

.sp-result-row { margin-bottom: 14px !important; }

.sp-result-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 6px !important;
}

.sp-result-label {
    font-size: 0.93rem !important;
    color: var(--sp-text) !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    font-weight: 500 !important;
}

.sp-result-pct {
    font-size: 0.82rem !important;
    color: var(--sp-muted) !important;
    -webkit-text-fill-color: #888 !important;
    flex-shrink: 0 !important;
}

.sp-bar-wrap {
    background: #1f1f1f !important;
    background-color: #1f1f1f !important;
    border-radius: 6px !important;
    height: 8px !important;
    overflow: hidden !important;
}

.sp-bar {
    background: linear-gradient(90deg, var(--sp-accent-dark), var(--sp-accent)) !important;
    height: 100% !important;
    border-radius: 6px !important;
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1) !important;
    min-width: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   GEWINNSPIEL-OVERLAY
══════════════════════════════════════════════════════════════ */

.sp-gs-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: var(--sp-gs-overlay-bg) !important;
    background-color: rgba(0,0,0,0.75) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    backdrop-filter: blur(4px) !important;
}

.sp-gs-card {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border: 1px solid rgba(245,200,66,0.25) !important;
    border-radius: 24px !important;
    padding: 44px 40px !important;
    max-width: 480px !important;
    width: 100% !important;
    box-shadow: 0 0 0 1px #ffffff06, 0 24px 80px rgba(0,0,0,0.7) !important;
    position: relative !important;
    overflow: hidden !important;
}

.sp-gs-card::before {
    content: '' !important;
    position: absolute !important;
    top: -80px; right: -80px !important;
    width: 260px; height: 260px !important;
    background: radial-gradient(circle, rgba(245,200,66,0.1) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.sp-gs-icon {
    font-size: 3.5rem !important;
    text-align: center !important;
    margin-bottom: 16px !important;
    animation: sp-gs-float 3s ease-in-out infinite !important;
}

@keyframes sp-gs-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.sp-gs-title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-align: center !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.sp-gs-desc {
    text-align: center !important;
    color: #aaa !important;
    -webkit-text-fill-color: #aaa !important;
    font-size: 0.95rem !important;
    margin: 0 0 28px 0 !important;
    line-height: 1.6 !important;
}

.sp-gs-desc strong {
    color: var(--sp-accent) !important;
    -webkit-text-fill-color: #f5c842 !important;
}

/* ── Ja/Nein Buttons ──────────────────────────────────────────── */
.sp-gs-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.sp-gs-btn-yes {
    background: var(--sp-accent) !important;
    background-color: #f5c842 !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    border: none !important;
    border-radius: var(--sp-radius) !important;
    padding: 16px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    font-family: 'Bricolage Grotesque', sans-serif !important;
    cursor: pointer !important;
    transition: background var(--sp-transition), transform var(--sp-transition), box-shadow var(--sp-transition) !important;
    appearance: none !important;
    margin: 0 !important;
}

.sp-gs-btn-yes:hover {
    background: #ffe066 !important;
    background-color: #ffe066 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(245,200,66,0.4) !important;
}

.sp-gs-btn-no {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #333 !important;
    color: #666 !important;
    -webkit-text-fill-color: #666 !important;
    border-radius: var(--sp-radius) !important;
    padding: 13px !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: border-color var(--sp-transition), color var(--sp-transition) !important;
    appearance: none !important;
    margin: 0 !important;
}

.sp-gs-btn-no:hover {
    border-color: #555 !important;
    color: #aaa !important;
    -webkit-text-fill-color: #aaa !important;
}

/* ── Gewinnspiel-Formular ─────────────────────────────────────── */
.sp-gs-form-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.sp-gs-field label,
.sp-gs-captcha label {
    display: block !important;
    font-size: 0.82rem !important;
    color: #888 !important;
    -webkit-text-fill-color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
}

.sp-gs-captcha label strong {
    color: var(--sp-accent) !important;
    -webkit-text-fill-color: #f5c842 !important;
}

.sp-gs-email,
.sp-gs-captcha-input {
    width: 100% !important;
    padding: 13px 16px !important;
    background: #111 !important;
    background-color: #111 !important;
    border: 1.5px solid #2a2a2a !important;
    border-radius: var(--sp-radius) !important;
    color: #f0f0f0 !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    font-size: 0.97rem !important;
    font-family: 'DM Sans', sans-serif !important;
    box-sizing: border-box !important;
    appearance: none !important;
    margin: 0 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.sp-gs-email:focus,
.sp-gs-captcha-input:focus {
    outline: none !important;
    border-color: var(--sp-accent) !important;
    box-shadow: 0 0 0 3px rgba(245,200,66,0.12) !important;
}

.sp-gs-email::placeholder,
.sp-gs-captcha-input::placeholder { color: #444 !important; }

/* ── DSGVO Consent ────────────────────────────────────────────── */
.sp-gs-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.sp-gs-consent-cb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important; height: 20px !important; min-width: 20px !important;
    border: 2px solid #444 !important;
    border-radius: 6px !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: pointer !important;
    position: relative !important;
    margin: 2px 0 0 0 !important;
    transition: border-color 0.2s, background 0.2s !important;
}

.sp-gs-consent-cb:checked {
    border-color: var(--sp-accent) !important;
    background: var(--sp-accent) !important;
    background-color: #f5c842 !important;
}

.sp-gs-consent-cb:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50%; left: 50% !important;
    transform: translate(-50%,-50%) !important;
    font-size: 13px !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.sp-gs-consent span {
    font-size: 0.82rem !important;
    color: #777 !important;
    -webkit-text-fill-color: #777 !important;
    line-height: 1.5 !important;
}

.sp-gs-consent span a {
    color: var(--sp-accent) !important;
    -webkit-text-fill-color: #f5c842 !important;
    text-decoration: underline !important;
}

/* ── Gewinnspiel Submit ───────────────────────────────────────── */
.sp-gs-submit-btn {
    background: linear-gradient(135deg, #f5c842, #d4a800) !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    border: none !important;
    border-radius: var(--sp-radius) !important;
    padding: 16px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    font-family: 'Bricolage Grotesque', sans-serif !important;
    cursor: pointer !important;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s !important;
    width: 100% !important;
    appearance: none !important;
    margin: 0 !important;
}

.sp-gs-submit-btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(245,200,66,0.4) !important;
}

.sp-gs-submit-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ── GS Messages ──────────────────────────────────────────────── */
.sp-gs-message {
    font-size: 0.9rem !important;
    min-height: 20px !important;
    text-align: center !important;
    font-weight: 500 !important;
}

.sp-gs-message.gs-error {
    color: var(--sp-error) !important;
    -webkit-text-fill-color: #f87171 !important;
}

.sp-gs-message.gs-success {
    color: var(--sp-success) !important;
    -webkit-text-fill-color: #3ecf8e !important;
    font-size: 1.1rem !important;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sp-poll-wrap  { padding: 24px 18px !important; border-radius: 16px !important; }
    .sp-gs-card    { padding: 32px 22px !important; border-radius: 18px !important; }
    .sp-gs-title   { font-size: 1.2rem !important; }
    .sp-gs-icon    { font-size: 2.8rem !important; }
    .sp-poll-wrap .sp-question { font-size: 1.2rem !important; }
}

/* ── Overlay Schließ-Animation ────────────────────────────────── */
@keyframes sp-gs-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.sp-gs-overlay.sp-gs-closing {
    animation: sp-gs-fadeout 0.3s ease forwards !important;
    pointer-events: none !important;
}