body.spalert-active .entry-content,
body.spalert-active .page-content {
    filter: blur(12px) !important;
    transition: filter 0.3s ease !important;
    pointer-events: none !important;
}

.spalert-backdrop,
.spalert-modal,
.spalert-modal-header,
.spalert-modal-title,
.spalert-loader-container,
.spalert-loader-bar,
.spalert-modal-text,
.spalert-actions,
.spalert-btn {
    box-sizing: border-box !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin: 0 !important;
}

.spalert-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(7, 9, 12, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 20px !important;
}
@supports (backdrop-filter: blur(8px)) {
    .spalert-backdrop { backdrop-filter: blur(8px) !important; }
}

.spalert-modal {
    position: relative !important;
    width: 100% !important;
    max-width: 540px !important;
    background-color: #0c0e12 !important;

    border: 1px solid var(--spalert-accent, #ff4655) !important;
    border-left: 6px solid var(--spalert-accent, #ff4655) !important;

    padding: 32px 28px 28px 28px !important;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.85) !important;

    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)) !important;
}

.spalert-modal-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    background: transparent !important;
}

.spalert-modal-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    color: var(--spalert-accent, #ff4655) !important;
    flex-shrink: 0 !important;
}
.spalert-modal-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.spalert-modal-title {
    color: var(--spalert-accent, #ff4655) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    background: transparent !important;
}

.spalert-modal-divider {
    height: 1px !important;
    background-color: rgba(var(--spalert-accent-rgb, 255, 70, 85), 0.2) !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.spalert-loader-container {
    width: 130px !important; /* Nem fut végig, fixen kompakt méretű */
    height: 4px !important;
    background: rgba(var(--spalert-accent-rgb, 255, 70, 85), 0.15) !important;
    margin-bottom: 22px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 2px !important;
}
.spalert-loader-bar {
    position: absolute !important;
    left: -50% !important;
    top: 0 !important;
    height: 100% !important;
    width: 40% !important;
    background: var(--spalert-accent, #ff4655) !important;
    box-shadow: 0 0 10px var(--spalert-accent, #ff4655) !important;
    animation: spalert-scan-pulse 2s infinite ease-in-out !important;
}

@keyframes spalert-scan-pulse {
    0% { left: -40%; }
    50% { left: 100%; }
    100% { left: -40%; }
}

.spalert-modal-text {
    color: #cbd5e1 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
    background: transparent !important;
}

.spalert-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    background: transparent !important;
}

.spalert-btn {
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 11px 22px !important;
    border-radius: 4px !important;
    transition: all 0.15s ease !important;
    border: none !important;
}
.spalert-btn:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
}

.spalert-btn-primary {
    background-color: var(--spalert-accent, #ff4655) !important;
    color: #ffffff !important;
}
.spalert-btn-primary:hover {
    filter: brightness(1.15) !important;
    box-shadow: 0 0 12px rgba(var(--spalert-accent-rgb, 255, 70, 85), 0.4) !important;
}
.spalert-btn-primary:active {
    transform: translateY(1px) !important;
}

.spalert-btn-ghost {
    background-color: transparent !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}
.spalert-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

@media (max-width: 480px) {
    .spalert-modal {
        padding: 26px 20px 22px 20px !important;
        clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)) !important; /* Mobilon finomabb törések */
    }
    .spalert-modal-title {
        font-size: 19px !important;
    }
    .spalert-modal-text {
        font-size: 14px !important;
        margin-bottom: 22px !important;
    }
    .spalert-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }
    .spalert-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.spalert-active .entry-content,
    body.spalert-active .page-content,
    .spalert-btn,
    .spalert-loader-bar {
        transition: none !important;
        animation: none !important;
    }
    .spalert-loader-bar {
        left: 0 !important;
        width: 100% !important;
    }
}