/* Top Bar Banner - Simple and Clean */
.custom-topbar-banner {
    width: 100% !important;
    background: linear-gradient(90deg, #4CAF50, #45a049) !important;
    color: #ffffff !important;
   
    border: none !important;
    margin: 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    font-family: Arial, sans-serif !important;
    text-align: center !important;
    /* NO POSITION PROPERTY */
}

/* Gradient backgrounds */
.custom-topbar-banner.gradient-bg {
    background: linear-gradient(90deg, var(--color1, #4CAF50), var(--color2, #45a049)) !important;
}

.topbar-banner-container {
    display: flex !important;
    animation: scrollTopbar 30s linear infinite !important;
    white-space: nowrap !important;
    width: 100% !important;
}

.topbar-banner-item {
    padding: 0 20px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 100% !important;
}

.topbar-banner-content {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
}

/* Icons styling */
.topbar-banner-content i {
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
}

.topbar-icon {
    height: 20px !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important;
}

.topbar-text {
    font-weight: 500 !important;
}

/* Scrolling animation */
@keyframes scrollTopbar {
    0% {
        transform: translateX(100%) !important;
    }
    100% {
        transform: translateX(-100%) !important;
    }
}

/* Pause on hover */
.topbar-banner-container:hover {
    animation-play-state: paused ;
}

/* Static banner (no scrolling) */
.topbar-banner-container.static {
    animation: none !important;
    justify-content: center !important;
}

/* Standard Banners */
.custom-banner {
    border: 2px solid #007bff !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    background: #f8f9fa !important;
    border-radius: 5px !important;
}

.banner-image img {
    max-width: 100% !important;
    height: auto !important;
}

.banner-content h3 {
    margin-top: 0 !important;
    color: #333 !important;
}

.banner-text {
    color: #666 !important;
    line-height: 1.5 !important;
}

/* Modern Emoji Icons - Better visibility */
.icon-truck:before { content: "🚚" !important; font-style: normal !important; }
.icon-credit-card:before { content: "💳" !important; font-style: normal !important; }
.icon-gift:before { content: "🎁" !important; font-style: normal !important; }
.icon-star:before { content: "⭐" !important; font-style: normal !important; }
.icon-heart:before { content: "❤️" !important; font-style: normal !important; }
.icon-shield:before { content: "🛡️" !important; font-style: normal !important; }
.icon-phone:before { content: "📞" !important; font-style: normal !important; }
.icon-envelope:before { content: "✉️" !important; font-style: normal !important; }
.icon-clock:before { content: "⏰" !important; font-style: normal !important; }
.icon-tag:before { content: "🏷️" !important; font-style: normal !important; }

/* Additional icons */
.icon-truck:before { content: "🚛" !important; }
.icon-credit-card:before { content: "💳" !important; }
.icon-gift:before { content: "🎁" !important; }
.icon-star:before { content: "⭐" !important; }
.icon-heart:before { content: "❤️" !important; }
.icon-shield:before { content: "🛡️" !important; }
.icon-phone:before { content: "📞" !important; }
.icon-envelope:before { content: "✉️" !important; }
.icon-clock:before { content: "⏰" !important; }
.icon-tag:before { content: "🏷️" !important; }
.icon-check:before { content: "✅" !important; }
.icon-warning:before { content: "⚠️" !important; }
.icon-info:before { content: "ℹ️" !important; }
.icon-lock:before { content: "🔒" !important; }
.icon-unlock:before { content: "🔓" !important; }
.icon-trending:before { content: "📈" !important; }
.icon-fire:before { content: "🔥" !important; }

/* Responsive */
@media (max-width: 768px) {
    .custom-topbar-banner {
        padding: 10px 0 !important;
    }
    
    .topbar-banner-content {
        font-size: 12px !important;
        gap: 8px !important;
    }
    
    .topbar-banner-item {
        padding: 0 15px !important;
    }
    
    .topbar-banner-content i {
        font-size: 16px !important;
        width: 20px !important;
        height: 20px !important;
    }
}