/* Pricing Page Specific Styles */

body { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Badge Styles - Modern and Eye-catching */
.popular-badge {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
}

.popular-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 3s infinite;
    z-index: 1;
}

.premium-badge {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
}

.premium-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 3s infinite 1s;
    z-index: 1;
}

/* Shimmer animation */
@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Badge hover effects */
.popular-badge:hover,
.premium-badge:hover {
    transform: translateY(-2px) scale(1.05) !important;
    transition: all 0.3s ease !important;
}

.popular-badge:hover {
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6) !important;
}

.premium-badge:hover {
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.6) !important;
}

/* Badge text styling to ensure visibility */
.popular-badge,
.premium-badge {
    position: relative;
    z-index: 2;
}

.popular-badge::after,
.premium-badge::after {
    content: attr(data-text);
    position: relative;
    z-index: 3;
}