/**
 * MSTR Enhancements - Expired Listing Styles
 *
 * Gray-out effect and "Listing Inactive" overlay for expired trial listings.
 *
 * @package MSTR_Enhancements
 */

/* ==========================================================================
   EXPIRED LISTING GRAY-OUT
   ========================================================================== */

/**
 * Listings by expired-trial users get this class via post_class filter.
 * The gray-out effect makes the listing card appear inactive/unavailable.
 */
.mstr-listing-expired {
    position: relative;
    opacity: 0.45;
    filter: grayscale(100%);
    pointer-events: none;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.mstr-listing-expired::after {
    content: "Listing Inactive";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 10;
}

/* Trial ending soon badge (2 or fewer days remaining). */
.mstr-listing-trial-ending {
    border: 2px solid #f59e0b;
    border-radius: 8px;
}

.mstr-listing-trial-ending::before {
    content: "Trial Ending Soon";
    position: absolute;
    top: 8px;
    right: 8px;
    background: #f59e0b;
    color: #fff;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
}

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

@media (max-width: 600px) {
    .mstr-listing-expired::after {
        font-size: 12px;
        padding: 6px 14px;
    }
}