/* Custom Animations & Accent Color Overrides */
/* This file provides the features that Tailwind CDN's config provided */

/* Accent Color CSS Variables - Set by PHP or fallback to indigo */
:root {
    --primary-color: #4f46e5;
    --niza-primary: var(--primary-color);
}

/* Primary Color Utilities */
.text-primary-50 {
    color: color-mix(in srgb, var(--primary-color), white 90%) !important;
}

.text-primary-100 {
    color: color-mix(in srgb, var(--primary-color), white 70%) !important;
}

.text-primary-400 {
    color: color-mix(in srgb, var(--primary-color), white 20%) !important;
}

.text-primary-500 {
    color: var(--primary-color) !important;
}

.text-primary-600 {
    color: var(--primary-color) !important;
}

.text-primary-700 {
    color: color-mix(in srgb, var(--primary-color), black 15%) !important;
}

.bg-primary-50 {
    background-color: color-mix(in srgb, var(--primary-color), transparent 90%) !important;
}

.bg-primary-100 {
    background-color: color-mix(in srgb, var(--primary-color), transparent 70%) !important;
}

.bg-primary-400 {
    background-color: color-mix(in srgb, var(--primary-color), white 20%) !important;
}

.bg-primary-500 {
    background-color: var(--primary-color) !important;
}

.bg-primary-600 {
    background-color: var(--primary-color) !important;
}

.bg-primary-700 {
    background-color: color-mix(in srgb, var(--primary-color), black 15%) !important;
}

.border-primary-100 {
    border-color: color-mix(in srgb, var(--primary-color), transparent 85%) !important;
}

.border-primary-500 {
    border-color: var(--primary-color) !important;
}

.border-primary-600 {
    border-color: var(--primary-color) !important;
}

.border-t-primary-600 {
    border-top-color: var(--primary-color) !important;
}

.ring-primary-100 {
    --tw-ring-color: color-mix(in srgb, var(--primary-color), transparent 70%);
}

.ring-primary-500 {
    --tw-ring-color: var(--primary-color);
}

.from-primary-50 {
    --tw-gradient-from: color-mix(in srgb, var(--primary-color), transparent 90%);
}

.from-primary-500,
.from-primary-600 {
    --tw-gradient-from: var(--primary-color);
}

.to-primary-500,
.to-primary-700 {
    --tw-gradient-to: var(--primary-color);
}

.via-primary-400 {
    --tw-gradient-via: color-mix(in srgb, var(--primary-color), white 20%);
}

.shadow-primary-500\/20 {
    --tw-shadow-color: color-mix(in srgb, var(--primary-color), transparent 80%);
}

.shadow-primary-500\/25 {
    --tw-shadow-color: color-mix(in srgb, var(--primary-color), transparent 75%);
}

.shadow-primary-500\/30 {
    --tw-shadow-color: color-mix(in srgb, var(--primary-color), transparent 70%);
}

.hover\:bg-primary-50:hover {
    background-color: color-mix(in srgb, var(--primary-color), transparent 90%) !important;
}

.hover\:bg-primary-100:hover {
    background-color: color-mix(in srgb, var(--primary-color), transparent 70%) !important;
}

.hover\:bg-primary-500:hover {
    background-color: var(--primary-color) !important;
}

.hover\:bg-primary-600:hover {
    background-color: var(--primary-color) !important;
}

.hover\:bg-primary-700:hover {
    background-color: color-mix(in srgb, var(--primary-color), black 15%) !important;
}

.hover\:text-primary-600:hover {
    color: var(--primary-color) !important;
}

.hover\:text-primary-700:hover {
    color: color-mix(in srgb, var(--primary-color), black 15%) !important;
}

.focus\:ring-primary-500:focus {
    --tw-ring-color: var(--primary-color);
}

.focus\:border-primary-500:focus {
    border-color: var(--primary-color) !important;
}

/* Custom Animations */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Fire Dance Animation for Hot Plans */
@keyframes fireDrop {
    0% {
        height: 0%;
        opacity: 0;
    }

    50% {
        height: 60%;
        opacity: 0.6;
    }

    100% {
        height: 50%;
        opacity: 0.4;
    }
}

.animate-fire-dance {
    animation: fireDrop 2s ease-out forwards;
}

/* Pulse Ring Animation for Popular Plans */
@keyframes pulseRing {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
}

.animate-popular-pulse {
    animation: pulseRing 2s infinite;
}

/* Deal Bounce Animation */
@keyframes dealBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.animate-deal-bounce {
    animation: dealBounce 2s infinite;
}

/* Slow Pulse */
.animate-pulse-slow {
    animation: pulse 3s ease-in-out infinite;
}

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Glass Effect */
.glass {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Niza Theme Buttons */
.niza-button,
button.bg-slate-900,
a.bg-slate-900 {
    background: linear-gradient(135deg, var(--niza-primary) 0%, color-mix(in srgb, var(--niza-primary), black 15%) 100%) !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.2);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}

.niza-button:hover,
button.bg-slate-900:hover,
a.bg-slate-900:hover {
    transform: scale(1.05) rotate(-1deg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--niza-primary), black 10%) 0%, color-mix(in srgb, var(--niza-primary), black 25%) 100%) !important;
}

/* Box Shadow Soft */
.shadow-soft {
    box-shadow: 0 20px 40px -15px rgba(24, 24, 27, 0.08);
}

/* Box Shadow Glow */
.shadow-glow {
    box-shadow: 0 0 30px color-mix(in srgb, var(--primary-color), transparent 60%);
}