"Join for Free" Bar for Visitors

$wpide_join_text = 'Get members-only articles and resources.';

add_action( 'wp_footer', function () use ( $wpide_join_text ) {
    if ( is_user_logged_in() || ! empty( $_COOKIE['wpide_join_dismissed'] ) ) {
        return;
    }

    $links = '<a href="' . esc_url( wp_login_url( home_url( add_query_arg( array() ) ) ) ) . '">Log in</a>';

    if ( get_option( 'users_can_register' ) ) {
        $links = '<a href="' . esc_url( wp_registration_url() ) . '" style="font-weight:600">Join for free</a> · ' . $links;
    }
    ?>
    <div id="wpide-join-bar" role="region" aria-label="Membership invitation" style="position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;flex-wrap:wrap;gap:.5em 1em;align-items:center;justify-content:center;padding:10px 48px 10px 16px;background:#1d2327;color:#fff;font-size:15px">
        <span><?php echo esc_html( $wpide_join_text ); ?></span>
        <span class="wpide-join-links"><?php echo wp_kses_post( $links ); ?></span>
        <button type="button" aria-label="Dismiss" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:22px;cursor:pointer">×</button>
    </div>
    <style>#wpide-join-bar a{color:inherit;text-decoration:underline}</style>
    <script>
    (function () {
        var bar = document.getElementById('wpide-join-bar');
        bar.querySelector('button').addEventListener('click', function () {
            document.cookie = 'wpide_join_dismissed=1; max-age=' + (30 * 86400) + '; path=/; SameSite=Lax';
            bar.remove();
        });
    })();
    </script>
    <?php
} );