/* ============================================
   AIBE Prep - Pricing Page Specific Styles
   Location: assets/css/pricing.css
   ============================================ */

/* ============================================
   ENHANCED FEATURED PLANS
   ============================================ */

/* Gold Plan - Popular (Yellow/Gold theme) */
.pricing-card.silver {
    border-color: var(--color-secondary);    
}

.pricing-card.popular {
    border-color: var(--color-secondary);    
}

.pricing-card.popular:hover {
    border-color: var(--color-secondary-dark);    
}

/* Platinum Plan - Best Value (Silver/Platinum theme) */
.pricing-card.best-value {
    border-color: #c0c0c0;
    box-shadow: 0 10px 40px rgba(192, 192, 192, 0.4);
    border-width: 3px;    
}

.pricing-card.best-value:hover {
    transform: scale(1.08);
    box-shadow: 0 15px 50px rgba(192, 192, 192, 0.6);
    border-color: #a8a8a8;
}

/* ============================================
   BADGE STYLING
   ============================================ */

/* Popular badge (Gold) */
.badge-plan {
    background: var(--color-secondary);
    color: var(--color-text-white);
}

/* Best Value badge (Platinum/Silver) */
.badge-best-value {
    background: linear-gradient(135deg, #e5e4e2, #c0c0c0);
    color: var(--color-text-white);
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    padding: 6px 18px;
}

/* ============================================
   PRICING CARD ENHANCEMENTS
   ============================================ */

/* Add subtle pulse animation to Best Value plan */
@keyframes subtle-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 40px rgba(192, 192, 192, 0.4);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 15px 50px rgba(192, 192, 192, 0.5);
    }
}

.pricing-card.best-value {
    animation: subtle-pulse 3s ease-in-out infinite;
}

/* Stop animation on hover */
.pricing-card.best-value:hover {
    animation: none;
}

/* Highlight effect on Best Value card */
.pricing-card.best-value::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;    
    border-radius: 15px;
    z-index: -1;
    opacity: 0.5;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .pricing-card.best-value {
        animation: none; /* Disable animation on mobile for performance */
    }
    
    .badge-plan,
    .badge-best-value {
        font-size: 0.75rem;
        padding: 4px 12px;
    }
    
    .pricing-card.best-value::before {
        display: none; /* Remove glow effect on mobile */
    }
}