/* Unique Prefix: nl- to avoid conflicts */
.nl-banner-wrapper {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1100px;
    z-index: 9999;
    display: none; /* Controlled by JS */
    animation: nl-bounce 3s infinite ease-in-out;
}

.nl-banner-container {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
}

.nl-slide {
    display: none;
    position: relative;
    width: 100%;
}

.nl-slide.active {
    display: block;
    animation: nl-fadeIn 0.5s ease;
}

.nl-slide img {
    width: 100%;
    display: block;
    max-height: 120px; /* Long thin rectangular */
    object-fit: cover;
}

.nl-banner-btn {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: #16a34a; /* Neoleaf Green */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.nl-banner-btn:hover { background: #15803d; }

.nl-banner-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #0f172a;
    color: white;
    border: 2px solid white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10001;
}

/* Animations */
@keyframes nl-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-8px); }
}

@keyframes nl-fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}