/* ==========================================
   PRICING CARD EXPIRED STATE - BEM Modifier
   ========================================== */

/**
 * Expired State Modifier for Pricing Cards
 * Applies visual indicators to show that a pricing tier or refund period has expired
 * 
 * Usage: Add .pricing-card--expired to pricing cards and .refund-policy__item--expired to refund items
 */

/* Modifier: Expired Pricing Card */
.pricing-card--expired {
    opacity: 0.5;
    position: relative;
}

/* Add X pattern - First diagonal line (top-left to bottom-right) */
.pricing-card--expired::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        transparent 0%,
        transparent calc(50% - 2px),
        rgba(255, 255, 255, 0.3) calc(50% - 1px),
        rgba(255, 255, 255, 0.3) calc(50% + 1px),
        transparent calc(50% + 2px),
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* Add X pattern - Second diagonal line (top-right to bottom-left) */
.pricing-card--expired::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom left,
        transparent 0%,
        transparent calc(50% - 2px),
        rgba(255, 255, 255, 0.3) calc(50% - 1px),
        rgba(255, 255, 255, 0.3) calc(50% + 1px),
        transparent calc(50% + 2px),
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* Prevent hover effects on expired cards */
.pricing-card--expired:hover {
    transform: none;
    cursor: not-allowed;
}

/* Modifier: Expired Refund Policy Item */
.refund-policy__item--expired {
    opacity: 0.5;
    position: relative;
}

/* Add X pattern - First diagonal line (top-left to bottom-right) */
.refund-policy__item--expired::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        transparent 0%,
        transparent calc(50% - 2px),
        rgba(255, 255, 255, 0.3) calc(50% - 1px),
        rgba(255, 255, 255, 0.3) calc(50% + 1px),
        transparent calc(50% + 2px),
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* Add X pattern - Second diagonal line (top-right to bottom-left) */
.refund-policy__item--expired::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom left,
        transparent 0%,
        transparent calc(50% - 2px),
        rgba(255, 255, 255, 0.3) calc(50% - 1px),
        rgba(255, 255, 255, 0.3) calc(50% + 1px),
        transparent calc(50% + 2px),
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .pricing-card--expired::before {
        animation: none;
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .pricing-card--expired::before {
        background: linear-gradient(
            to bottom right,
            transparent 0%,
            transparent calc(50% - 1.5px),
            rgba(255, 255, 255, 0.3) calc(50% - 0.5px),
            rgba(255, 255, 255, 0.3) calc(50% + 0.5px),
            transparent calc(50% + 1.5px),
            transparent 100%
        );
    }
}