/* =========================================================
   Vehicle Availability Status: Active / Reserved
   Additive styles only — does not modify existing selectors.
   ========================================================= */

/* ---- Admin / Vendor dashboard badge ---- */
.dsrent-badge-reserved {
    color: #6b7280 !important;
    background-color: rgba(107, 114, 128, 0.12) !important;
}
.dsrent-dot-reserved {
    color: #6b7280 !important;
}

/* ---- Public site: Reserved car card ---- */
/* Grid view uses .listing-item / .listing-img, list view uses .card / .blog-img */
.listing-item.dsrent-reserved-car,
.card.dsrent-reserved-car {
    position: relative;
}

/* Dim the whole card slightly */
.listing-item.dsrent-reserved-car,
.card.dsrent-reserved-car {
    opacity: 0.95;
}

/* Grey semi-transparent overlay + dimmed image */
.listing-item.dsrent-reserved-car .listing-img,
.card.dsrent-reserved-car .blog-img {
    position: relative;
}
.listing-item.dsrent-reserved-car .listing-img img,
.card.dsrent-reserved-car .blog-img img {
    filter: grayscale(60%);
    opacity: 0.55;
}
.listing-item.dsrent-reserved-car .listing-img::after,
.card.dsrent-reserved-car .blog-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(60, 60, 60, 0.45);
    pointer-events: none;
}

/* Large RESERVED label over the image */
.dsrent-reserved-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: rgba(30, 30, 30, 0.85);
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 16px;
    padding: 6px 18px;
    border-radius: 4px;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
}

/* Reserved badge (replaces category/brand tag look, neutral grey) */
.dsrent-fav-item-reserved {
    background-color: #6b7280 !important;
    color: #fff !important;
}

/* Disable the whole card: block clicks, links, JS handlers */
.listing-item.dsrent-reserved-car,
.listing-item.dsrent-reserved-car *,
.card.dsrent-reserved-car,
.card.dsrent-reserved-car * {
    pointer-events: none;
    cursor: not-allowed;
}
/* Re-enable pointer events only on the overlay message wrapper so text is selectable/readable if needed */
.listing-item.dsrent-reserved-car .dsrent-reserved-message {
    pointer-events: none;
}

/* Reserved button */
.btn.dsrent-btn-reserved,
.btn.dsrent-btn-reserved:hover,
.btn.dsrent-btn-reserved:focus {
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 1;
}

/* Informational message under the card */
.dsrent-reserved-message {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
    text-align: center;
}

/* ---- Responsive: keep label readable on smaller cards ---- */
@media (max-width: 991px) {
    .dsrent-reserved-label {
        font-size: 14px;
        padding: 5px 14px;
    }
}
@media (max-width: 575px) {
    .dsrent-reserved-label {
        font-size: 12px;
        padding: 4px 10px;
        letter-spacing: 0.5px;
    }
}