/* 
 * Pricing Calculator Styles
 * Following strict design tokens
 * @package WPAgent
 */

/* License Options - Enhanced with Tailwind */
.license-option {
    @apply transition-all duration-200 ease-in-out cursor-pointer;
}

.license-option:hover {
    @apply -translate-y-0.5 shadow-md;
}

.license-option.active {
    @apply border-primary-500 bg-neutral-50;
}

/* Promotion Banner Animation */
.promotion-banner {
    animation: pulse-primary 3s infinite;
}

@keyframes pulse-primary {
    0%, 100% {
        background: linear-gradient(to right, #8b5cf6, #7c3aed);
    }
    50% {
        background: linear-gradient(to right, #7c3aed, #8b5cf6);
    }
}

/* Pricing Calculator Expandable */
.pricing-content {
    @apply transition-all duration-500 ease-in-out;
    max-height: 1000px;
    opacity: 1;
}

.pricing-content.collapsed {
    max-height: 0;
    opacity: 0;
}

.pricing-header:hover {
    @apply bg-neutral-50 rounded-lg transition-colors duration-200;
}

.pricing-toggle-icon {
    @apply transition-transform duration-300;
}

.pricing-toggle-icon.rotated {
    @apply rotate-180;
}

/* Enhanced License Option Animations */
.license-option .text-xl {
    @apply transition-all duration-300 transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.license-option:hover .text-xl {
    @apply scale-105;
}

.tco-year-display {
    @apply transition-all duration-400;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.license-option:active {
    @apply -translate-y-0.5;
    transform: translateY(-2px) scale(0.98);
}

.license-option.selecting {
    animation: pulse-select 0.3s ease;
}

@keyframes pulse-select {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Tooltip System - Using design tokens */
.tooltip {
    @apply relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2;
    @apply bg-neutral-800 bg-opacity-90 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap;
    @apply opacity-0 invisible transition-all duration-300 z-50;
}

.tooltip::before {
    content: '';
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-full;
    @apply border-l-transparent border-r-transparent border-l-4 border-r-4;
    border-top: 5px solid #1e293b;
    @apply opacity-0 invisible transition-all duration-300;
}

.tooltip:hover::after,
.tooltip:hover::before {
    @apply opacity-100 visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .license-option {
        @apply mb-2;
    }
    
    .tooltip::after {
        @apply text-sm px-2 py-1;
        max-width: 200px;
        white-space: normal;
        word-wrap: break-word;
    }
}