/* =========================================
   Pricing Pages Styles (Centralized)
   Moved from Views/Home/Index.cshtml and
   Views/UserSubscriptions/Index.cshtml
   ========================================= */

.pricing-hero-section {
    position: relative;
}
.pricing-header {
                position: relative;
                padding-bottom: 20px;
                margin-bottom: 40px;
            }
            .pricing-header::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 4px;
                background: linear-gradient(90deg, #3b82f6, #ec4899);
                border-radius: 2px;
            }
            .home-pricing-card {
                background: #ffffff;
                border-radius: 24px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
                overflow: hidden;
                position: relative;
                z-index: 1;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
            }
            .home-pricing-card:hover {
                transform: translateY(-12px) scale(1.02);
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
                border-color: rgba(79, 70, 229, 0.3);
                z-index: 2;
            }
            .home-pricing-card::before {
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0;
                height: 6px;
                background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
                opacity: 0;
                transition: opacity 0.4s ease;
            }
            .home-pricing-card:hover::before {
                opacity: 1;
            }
            .home-pricing-card.free-plan::before {
                background: linear-gradient(90deg, #10b981, #34d399);
                opacity: 1;
            }
            .home-pricing-card.free-plan {
                border-color: rgba(16, 185, 129, 0.3);
                box-shadow: 0 10px 25px rgba(16, 185, 129, 0.08);
            }
            .home-pricing-card.promo-discount {
                border-color: rgba(37, 99, 235, 0.45);
                background: linear-gradient(125deg, #e6f0ff 0%, #f4f9ff 38%, #dbeafe 68%, #f0f9ff 100%);
                background-size: 220% 220%;
                box-shadow: 0 14px 30px rgba(37, 99, 235, 0.15);
                animation: homePricingDiscountFlow 8s ease-in-out infinite, homePricingDiscountFloat 4.8s ease-in-out infinite;
            }
            .home-pricing-card.promo-special {
                border-color: rgba(217, 119, 6, 0.5);
                background: linear-gradient(132deg, #fff3bf 0%, #ffe08a 34%, #fff6cf 60%, #ffd36a 100%);
                background-size: 240% 240%;
                box-shadow: 0 16px 34px rgba(180, 83, 9, 0.18);
                animation: homePricingSpecialFlow 6s ease-in-out infinite, homePricingSpecialPulse 2.8s ease-in-out infinite;
            }
            .home-pricing-card.promo-discount::after,
            .home-pricing-card.promo-special::after {
                content: '';
                position: absolute;
                inset: -42% -18%;
                pointer-events: none;
                opacity: 0.55;
                z-index: 0;
                mix-blend-mode: soft-light;
                transform: translate3d(-28%, 0, 0) rotate(7deg);
                animation: homePricingGlowShift 10s ease-in-out infinite;
            }
            .home-pricing-card.promo-discount::after {
                background: linear-gradient(110deg, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0.78) 48%, rgba(191, 219, 254, 0) 78%);
            }
            .home-pricing-card.promo-special::after {
                background:
                    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.75) 0 2px, transparent 3px),
                    radial-gradient(circle at 76% 36%, rgba(255, 255, 255, 0.6) 0 2px, transparent 3px),
                    radial-gradient(circle at 58% 72%, rgba(254, 240, 138, 0.55) 0 2px, transparent 3px),
                    linear-gradient(110deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.95) 45%, rgba(253, 230, 138, 0) 76%);
                animation: homePricingSpecialSparkle 5.2s linear infinite;
            }
            .home-pricing-card.promo-discount .card-body,
            .home-pricing-card.promo-special .card-body {
                position: relative;
                z-index: 1;
            }
            .home-pricing-card.promo-discount {
                color: #0f172a;
            }
            .home-pricing-card.promo-special {
                color: #3f2a00;
            }
            .home-pricing-card.promo-discount .text-secondary,
            .home-pricing-card.promo-discount .text-muted {
                color: #1e3a5f !important;
                opacity: 1 !important;
            }
            .home-pricing-card.promo-special .text-secondary,
            .home-pricing-card.promo-special .text-muted {
                color: #5b3a00 !important;
                opacity: 1 !important;
            }
            .home-pricing-card.promo-discount .pricing-price,
            .home-pricing-card.promo-special .pricing-price {
                background: none;
                -webkit-text-fill-color: currentColor;
                color: inherit;
				text-shadow:0 0 15px #ff0
            }
            .home-pricing-card.promo-discount .original-price-strike {
                color: #365a88;
            }
            .home-pricing-card.promo-special .original-price-strike {
                color: #7a5b23;
            }
            .home-pricing-card.promo-special .special-offer-inline {
                background: rgba(217, 119, 6, 0.14);
                color: #9a3412;
            }
            .home-pricing-card.promo-special:hover {
                box-shadow: 0 28px 56px rgba(180, 83, 9, 0.28);
            }
            .home-pricing-card.promo-discount .special-offer-inline {
                background: rgba(37, 99, 235, 0.12);
                color: #1d4ed8;
            }
            .pricing-price {
                font-size: 3.2rem;
                font-weight: 800;
                letter-spacing: -1.5px;
                background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                line-height: 1;
            }
            .free-plan .pricing-price {
                background: linear-gradient(135deg, #059669 0%, #10b981 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .pricing-badge {
                position: absolute;
                top: 18px;
                left: 18px;
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                color: white;
                padding: 8px 14px;
                border-radius: 999px;
                font-size: 0.8rem;
                font-weight: 800;
                box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
                line-height: 1;
                z-index: 10;
            }
            html[dir="rtl"] .pricing-badge {
                left: auto;
                right: 18px;
            }
            .special-offer-badge {
                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
                box-shadow: 0 10px 20px rgba(245, 158, 11, 0.22);
                animation: homeSpecialBadgePulse 1.9s ease-in-out infinite, homeSpecialBadgeFloat 3.4s ease-in-out infinite;
            }
            .discount-offer-badge {
                background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
                box-shadow: 0 10px 20px rgba(37, 99, 235, 0.24);
            }
            .home-pricing-card.has-badge .card-body {
                padding-top: 4.75rem !important;
            }
            .special-offer-inline {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.4rem;
                margin-top: 0.75rem;
                padding: 0.45rem 0.9rem;
                border-radius: 999px;
                background: rgba(245, 158, 11, 0.12);
                color: #b45309;
                font-size: 0.9rem;
                font-weight: 700;
            }
            .plan-feature-icon {
                width: 32px;
                height: 32px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background: rgba(59, 130, 246, 0.1);
                color: #3b82f6;
                margin-left: 12px;
                font-size: 1rem;
                transition: all 0.3s ease;
            }
            html[dir="rtl"] .plan-feature-icon {
                margin-left: 0;
                margin-right: 12px;
            }
            .home-pricing-card:hover .plan-feature-icon {
                background: #3b82f6;
                color: white;
                transform: scale(1.1);
            }
            .free-plan .plan-feature-icon {
                background: rgba(16, 185, 129, 0.1);
                color: #10b981;
            }
            .home-pricing-card.free-plan:hover .plan-feature-icon {
                background: #10b981;
                color: white;
            }
            .home-pricing-btn {
                border-radius: 14px;
                font-weight: 600;
                font-size: 1.1rem;
                padding: 14px 24px;
                transition: all 0.3s ease;
                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                border: none;
                color: white;
                box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
            }
            .home-pricing-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
                color: white;
            }
            .free-plan .home-pricing-btn {
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2);
            }
            .free-plan .home-pricing-btn:hover {
                box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4);
            }
            .plan-type-title {
                position: relative;
                display: inline-block;
                padding: 0 20px;
                background: #e2e8f0;
                z-index: 1;
                color: #475569;
                font-weight: 700;
            }
            .plan-type-divider {
                position: relative;
                text-align: center;
                margin: 60px 0 40px;
            }
            .plan-type-divider::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                height: 1px;
                background: #cbd5e1;
                z-index: 0;
            }
            @keyframes homePricingGlowShift {
                0%, 100% {
                    transform: translate3d(-30%, 0, 0) rotate(7deg);
                    opacity: 0.5;
                }
                50% {
                    transform: translate3d(28%, 0, 0) rotate(7deg);
                    opacity: 0.75;
                }
            }
            @keyframes homePricingDiscountFlow {
                0%, 100% { background-position: 0% 50%; }
                50% { background-position: 100% 50%; }
            }
            @keyframes homePricingSpecialFlow {
                0%, 100% { background-position: 0% 50%; }
                50% { background-position: 100% 50%; }
            }
            @keyframes homePricingSpecialPulse {
                0%, 100% { transform: translateY(0); box-shadow: 0 16px 34px rgba(180, 83, 9, 0.18); }
                50% { transform: translateY(-2px); box-shadow: 0 22px 42px rgba(180, 83, 9, 0.28); }
            }
            @keyframes homePricingDiscountFloat {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-1.5px); }
            }
            @keyframes homePricingSpecialSparkle {
                0% {
                    background-position: -34% 0, 130% 30%, 50% 120%, -25% 0;
                    opacity: 0.5;
                }
                50% {
                    background-position: 50% -8%, 72% 58%, 40% 42%, 50% 0;
                    opacity: 0.88;
                }
                100% {
                    background-position: 130% -22%, 15% 98%, 30% 0, 130% 0;
                    opacity: 0.5;
                }
            }
            @keyframes homeSpecialBadgePulse {
                0%, 100% { box-shadow: 0 10px 20px rgba(245, 158, 11, 0.22); }
                50% { box-shadow: 0 14px 28px rgba(245, 158, 11, 0.38); }
            }
            @keyframes homeSpecialBadgeFloat {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-2px); }
            }

/* ---------- User Subscriptions ---------- */

.pricing-header {
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 40px;
    }
    .pricing-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, #3b82f6, #ec4899);
        border-radius: 2px;
    }

    .pricing-card {
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        overflow: hidden;
        position: relative;
        z-index: 1;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    }
    .pricing-card:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
        border-color: rgba(79, 70, 229, 0.3);
        z-index: 2;
    }
    .pricing-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 6px;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    .pricing-card:hover::before {
        opacity: 1;
    }
    .pricing-card.free-plan::before {
        background: linear-gradient(90deg, #10b981, #34d399);
        opacity: 1;
    }
    .pricing-card.free-plan {
        border-color: rgba(16, 185, 129, 0.3);
        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.08);
    }
    .pricing-card.promo-discount {
        border-color: rgba(37, 99, 235, 0.45);
        background: linear-gradient(125deg, #e6f0ff 0%, #f4f9ff 38%, #dbeafe 68%, #f0f9ff 100%);
        background-size: 220% 220%;
        box-shadow: 0 14px 30px rgba(37, 99, 235, 0.15);
        animation: pricingDiscountFlow 8s ease-in-out infinite, pricingDiscountFloat 4.8s ease-in-out infinite;
    }
    .pricing-card.promo-special {
        border-color: rgba(217, 119, 6, 0.5);
        background: linear-gradient(132deg, #fff3bf 0%, #ffe08a 34%, #fff6cf 60%, #ffd36a 100%);
        background-size: 240% 240%;
        box-shadow: 0 16px 34px rgba(180, 83, 9, 0.18);
        animation: pricingSpecialFlow 6s ease-in-out infinite, pricingSpecialPulse 2.8s ease-in-out infinite;
    }
    .pricing-card.promo-discount::after,
    .pricing-card.promo-special::after {
        content: '';
        position: absolute;
        inset: -42% -18%;
        pointer-events: none;
        opacity: 0.55;
        z-index: 0;
        mix-blend-mode: soft-light;
        transform: translate3d(-28%, 0, 0) rotate(7deg);
        animation: pricingGlowShift 10s ease-in-out infinite;
    }
    .pricing-card.promo-discount::after {
        background: linear-gradient(110deg, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0.78) 48%, rgba(191, 219, 254, 0) 78%);
    }
    .pricing-card.promo-special::after {
        background:
            radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.75) 0 2px, transparent 3px),
            radial-gradient(circle at 76% 36%, rgba(255, 255, 255, 0.6) 0 2px, transparent 3px),
            radial-gradient(circle at 58% 72%, rgba(254, 240, 138, 0.55) 0 2px, transparent 3px),
            linear-gradient(110deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.95) 45%, rgba(253, 230, 138, 0) 76%);
        animation: pricingSpecialSparkle 5.2s linear infinite;
    }
    .pricing-card.promo-discount .card-body,
    .pricing-card.promo-special .card-body {
        position: relative;
        z-index: 1;
    }
    .pricing-card.promo-discount {
        color: #0f172a;
    }
    .pricing-card.promo-special {
        color: #3f2a00;
    }
    .pricing-card.promo-discount .text-secondary,
    .pricing-card.promo-discount .text-muted {
        color: #1e3a5f !important;
        opacity: 1 !important;
    }
    .pricing-card.promo-special .text-secondary,
    .pricing-card.promo-special .text-muted {
        color: #5b3a00 !important;
        opacity: 1 !important;
    }
    .pricing-card.promo-discount .pricing-price,
    .pricing-card.promo-special .pricing-price {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: inherit;
    }
    .pricing-card.promo-discount .original-price-strike {
        color: #365a88;
    }
    .pricing-card.promo-special .original-price-strike {
        color: #7a5b23;
    }
    .pricing-card.promo-special .special-offer-inline {
        background: rgba(217, 119, 6, 0.14);
        color: #9a3412;
    }
    .pricing-card.promo-special:hover {
        box-shadow: 0 28px 56px rgba(180, 83, 9, 0.28);
    }
    .pricing-card.promo-discount .special-offer-inline {
        background: rgba(37, 99, 235, 0.12);
        color: #1d4ed8;
    }
    .pricing-price {
        font-size: 3.2rem;
        font-weight: 800;
        letter-spacing: -1.5px;
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 1;
    }
    .free-plan .pricing-price {
        background: linear-gradient(135deg, #059669 0%, #10b981 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .pricing-badge {
        position: absolute;
        top: 20px;
        left: 24px;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 10px 16px;
        border-radius: 999px;
        font-size: 0.9rem;
        font-weight: 800;
        box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
        z-index: 10;
        line-height: 1;
        letter-spacing: 0;
    }
    .special-offer-badge {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        box-shadow: 0 10px 20px rgba(245, 158, 11, 0.22);
        animation: specialBadgePulse 1.9s ease-in-out infinite, specialBadgeFloat 3.4s ease-in-out infinite;
    }
    .discount-offer-badge {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.24);
    }
    .pricing-card.has-badge .card-body {
        padding-top: 5.25rem !important;
    }
    .special-offer-inline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        margin-top: 0.75rem;
        padding: 0.45rem 0.9rem;
        border-radius: 999px;
        background: rgba(245, 158, 11, 0.12);
        color: #b45309;
        font-size: 0.9rem;
        font-weight: 700;
    }
    .plan-feature-icon {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        margin-left: 12px;
        font-size: 1rem;
        transition: all 0.3s ease;
    }
    .pricing-card:hover .plan-feature-icon {
        background: #3b82f6;
        color: white;
        transform: scale(1.1);
    }
    .free-plan .plan-feature-icon {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }
    .pricing-card.free-plan:hover .plan-feature-icon {
        background: #10b981;
        color: white;
    }
    .pricing-btn {
        border-radius: 14px;
        font-weight: 600;
        font-size: 1.1rem;
        padding: 14px 24px;
        transition: all 0.3s ease;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        border: none;
        color: white;
        box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
    }
    .pricing-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
        color: white;
    }
    .free-plan .pricing-btn {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2);
    }
    .free-plan .pricing-btn:hover {
        box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4);
    }
    .plan-type-title {
        position: relative;
        display: inline-block;
        padding: 0 20px;
        background: #f8f9fa;
        z-index: 1;
        color: #475569;
        font-weight: 700;
    }
    .plan-type-divider {
        position: relative;
        text-align: center;
        margin: 60px 0 40px;
    }
    .plan-type-divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: #e2e8f0;
        z-index: 0;
    }
    @keyframes pricingGlowShift {
        0%, 100% {
            transform: translate3d(-30%, 0, 0) rotate(7deg);
            opacity: 0.5;
        }
        50% {
            transform: translate3d(28%, 0, 0) rotate(7deg);
            opacity: 0.75;
        }
    }
    @keyframes pricingDiscountFlow {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    @keyframes pricingSpecialFlow {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    @keyframes pricingSpecialPulse {
        0%, 100% { transform: translateY(0); box-shadow: 0 16px 34px rgba(180, 83, 9, 0.18); }
        50% { transform: translateY(-2px); box-shadow: 0 22px 42px rgba(180, 83, 9, 0.28); }
    }
    @keyframes pricingDiscountFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-1.5px); }
    }
    @keyframes pricingSpecialSparkle {
        0% {
            background-position: -34% 0, 130% 30%, 50% 120%, -25% 0;
            opacity: 0.5;
        }
        50% {
            background-position: 50% -8%, 72% 58%, 40% 42%, 50% 0;
            opacity: 0.88;
        }
        100% {
            background-position: 130% -22%, 15% 98%, 30% 0, 130% 0;
            opacity: 0.5;
        }
    }
    @keyframes specialBadgePulse {
        0%, 100% { box-shadow: 0 10px 20px rgba(245, 158, 11, 0.22); }
        50% { box-shadow: 0 14px 28px rgba(245, 158, 11, 0.38); }
    }
    @keyframes specialBadgeFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-2px); }
    }