* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden; /* Prevent scrolling */
    background-color: transparent; /* Allow embedding context to show if needed, or set to black */
}

.widget-container {
    position: relative;
    width: 100%;
    height: 85px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background-color: #5b0a91;
    /* Clean up stacking context */
    z-index: 0;
}

/* Fallback Background Image */
.fallback-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('background.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Fallback Artwork Image */
.fallback-artwork {
    position: absolute;
    bottom: 0;
    left: 10px;
    height: 100%; /* Fit to widget height */
    width: auto;
    max-width: 60%; /* Prevent covering the button */
    object-fit: contain;
    object-position: left bottom;
    z-index: 1;
    pointer-events: none;
}

/* Video Background - Sits on top of fallbacks */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2; /* Higher than images so it covers them when loaded */
    opacity: 0.8; /* Slight transparency to mix with background color if needed, or set to 1 */
}

/* Content Overlay */
.content {
    position: relative;
    z-index: 3; /* Highest z-index to sit on top of everything */
    display: flex;
    justify-content: flex-end; /* Push button to the right */
    align-items: center;
    width: 100%;
}

/* CTA Button with Bubble Effect & Neon Stroke */
.cta-button {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    color: black;
    
    position: relative;
    display: inline-block;
    padding: 12px 26px; /* Maintain padding for text */
    border-radius: 20px;
    
    /* REMOVED overflow: hidden to let the border shine OUTSIDE */
    /* overflow: hidden; */ 
    
    transition: transform 0.1s ease;
    margin: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    /* Border is created by padding + ::before/::after layering */
    background: transparent; 
    z-index: 1; /* Create stacking context */
}

/* Static container for the rotating gradient - Keeps the border shape */
.neon-border {
    position: absolute;
    inset: -1.5px; /* Extends outside the button */
    border-radius: 22px; /* Slightly larger radius than button */
    overflow: hidden; /* Clips the huge spinning square to the button shape */
    z-index: -2; /* Behind the bubble container */
}

/* The Rotating Gradient - Spins inside the static container */
.neon-border::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%; /* Massive square to cover all angles */
    padding-bottom: 200%; /* Aspect ratio hack for square */
    
    background: conic-gradient(
        transparent 0deg, 
        transparent 80deg, 
        #ff00ff 100deg, /* Neon Pink Stroke */
        transparent 140deg,
        transparent 260deg,
        #00ff00 280deg, /* Neon Green Stroke */
        transparent 320deg
    );
    
    animation: rotate-border 4s linear infinite;
}

/* New container to clip bubbles inside the button shape */
.bubble-container {
    position: absolute;
    inset: 0;
    border-radius: 20px; /* Match button radius */
    overflow: hidden;
    z-index: -1;
    background: white; /* Background color lives here now */
}

/* Removed old .cta-button::before implementation */

@keyframes rotate-border {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.cta-button:active {
    transform: scale(0.95);
}

.cta-text {
    position: relative;
    z-index: 5; /* Ensure text sits on top of bubbles */
    color: black;
    pointer-events: none;
}

/* Bubbles */
.bubble {
    position: absolute;
    bottom: -20px; /* Start further down to accommodate blur */
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px); /* Moderate blur so they are visible but soft */
    /* Opacity is handled by keyframes, but setting a default valid value is good practice */
    opacity: 0; 
    
    /* Animation settings */
    animation: rise-bubble 5s infinite ease-in;
}

/* Variable bubble sizes, colors, and delays - Evenly Distributed */
.bubble:nth-child(1) { width: 100px; height: 100px; left: -10%; background: #FF00FF; animation-duration: 4s; animation-delay: 0s; } /* Magenta (Far Left) */
.bubble:nth-child(2) { width: 100px; height: 100px; left: 10%; background: #00FFFF; animation-duration: 6s; animation-delay: 0.5s; } /* Cyan */
.bubble:nth-child(3) { width: 100px; height: 100px; left: 25%; background: #FFFF00; animation-duration: 5s; animation-delay: 1.0s; } /* Yellow */
.bubble:nth-child(4) { width: 150px; height: 150px; left: 40%; background: #ffa1fa; animation-duration: 5.5s; animation-delay: 0.2s; } /* Bright Red/Orange */
.bubble:nth-child(5) { width: 80px; height: 80px; left: 55%; background: #00FF00; animation-duration: 4.5s; animation-delay: 0.8s; } /* Lime Green */
.bubble:nth-child(6) { width: 100px; height: 100px; left: 70%; background: #ffc18a; animation-duration: 6.2s; animation-delay: 1.2s; } /* Hot Pink */
.bubble:nth-child(7) { width: 150px; height: 150px; left: 85%; background: #00CCFF; animation-duration: 5.8s; animation-delay: 0.4s; } /* Sky Blue */
.bubble:nth-child(8) { width: 100px; height: 100px; left: 5%; background: #9D00FF; animation-duration: 5.2s; animation-delay: 1.5s; } /* Electric Purple (Left gap fill) */
.bubble:nth-child(9) { width: 150px; height: 150px; left: 95%; background: #FF9900; animation-duration: 6.5s; animation-delay: 0.3s; } /* Neon Orange (Far Right) */
.bubble:nth-child(10) { width: 80px; height: 80px; left: 35%; background: #c4a5ff; animation-duration: 5.0s; animation-delay: 0.9s; } /* Neon Rose (Middle gap fill) */

@keyframes rise-bubble {
    0% {
        bottom: -30%; /* Start well below the button */
        transform: translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.05; /* Fade in gently as it enters */
    }
    20% {
        opacity: 0.1; /* Max opacity reached once fully inside */
    }
    80% {
        opacity: 0.07; /* maintain visibility */
    }
    90% {
        opacity: 0.05; /* Start fading out before exit */
    }
    100% {
        bottom: 130%; /* Exit well above the button */
        transform: translateX(-10px);
        opacity: 0; /* Fully invisible at exit */
    }
}