COMPLETE FIX FOR LOGO + COMPANY NAME IN MODALS
==============================================

STEP 1: REPLACE THE CSS (around line 4798-4809)
------------------------------------------------
Replace this:
<style>
container {
	display: flex;
    justify-content: center; /* Centers horizontally */
	width: 350px; /* Define the container size */
	height: 10px;
}
.container img {
	width: auto;   	/* Make the image take the full width of its container */
	height: 100%;  	/* Make the image take the full height of its container */
	max-height: 10vh;
}
</style>

With this:
<style>
/* Container for logo + company name in modals */
.container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    gap: 15px;              /* Space between logo and text */
    width: 100%;            /* Full width for proper centering */
    padding: 20px 0;        /* Vertical padding */
    margin: 0 auto;         /* Center the container itself */
}

.container img {
    width: auto;
    height: 60px;          /* Reasonable logo height */
    max-height: 60px;
    display: block;
}

.container h2 {
    font-size: 32px;
    margin: 0;
    padding: 0;
    color: <?php echo $color_primary; ?>;
    white-space: nowrap;   /* Prevent text wrapping */
}
</style>


STEP 2: UPDATE WELCOME MODAL HTML (around line 4829-4832)
----------------------------------------------------------
Replace this:
		<div class="container">
			<img src="<?php echo $imageURL; ?>lfl-logo-rotating.gif" alt="Loyal Fan Loop logo">
			<h2 style="color: $color_primary; font-size: 32px; margin: 0px; padding: 0px;" id="isPasted">Loyal Fan Loop</h2>
		</div>

With this:
		<div class="container">
			<img src="<?php echo $imageURL; ?>lfl-logo-rotating.gif" alt="Loyal Fan Loop logo">
			<h2>Loyal Fan Loop</h2>
		</div>


STEP 3: UPDATE EXIT MODAL HTML (around line 4860-4863)
-------------------------------------------------------
Replace this:
		<div class="container">
			<img src="<?php echo $imageURL; ?>lfl-logo-rotating.gif" alt="Loyal Fan Loop logo">
			<h2 style="color: $color_primary; font-size: 32px; margin: 0px; padding: 0px;" id="isPasted">Loyal Fan Loop</h2>
		</div>

With this:
		<div class="container">
			<img src="<?php echo $imageURL; ?>lfl-logo-rotating.gif" alt="Loyal Fan Loop logo">
			<h2>Loyal Fan Loop</h2>
		</div>


WHAT WAS WRONG:
===============
1. Missing dot in CSS selector (container instead of .container)
2. Missing align-items: center for vertical alignment
3. Height was 10px (way too small)
4. Width was 350px (too restrictive, now 100%)
5. No gap property for spacing between logo and text
6. Inline style had color in quotes so PHP variable wasn't parsing
7. No padding on container


WHAT THIS FIXES:
================
✓ Logo and text now side-by-side (flexbox with proper alignment)
✓ Centered horizontally in popup (justify-content: center + width: 100%)
✓ Vertically aligned (align-items: center)
✓ Nice spacing between logo and text (gap: 15px)
✓ Color now uses your campaign's primary color
✓ Proper sizing for both logo and text


OPTIONAL ADJUSTMENTS:
=====================
Logo too big/small?
- Change height: 60px to your desired size (try 40px, 50px, 80px, etc.)

Text too big/small?
- Change font-size: 32px in .container h2 (try 24px, 28px, 36px, etc.)

Need more/less space between logo and text?
- Change gap: 15px (try 10px, 20px, 25px, etc.)

Want different vertical spacing?
- Change padding: 20px 0 (first number is top/bottom)


MOBILE RESPONSIVE:
==================
If you need the logo/text to stack on small screens, add this media query
after the container styles:

@media (max-width: 640px) {
    .container {
        flex-direction: column;
        gap: 10px;
    }
    
    .container h2 {
        font-size: 24px;
    }
}