/* =========================================================
   Fleet grid (reservation-2) styling
   motors-child / css/shop-grid.css
   ========================================================= */

/* Clickable card affordance */
.mc-fleet-clickable {
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.mc-fleet-clickable:hover {
    box-shadow: 0 8px 30px rgba(20,20,40,.12);
    transform: translateY(-2px);
}

/* New meta block (availability + price + CTA) */
.mc-fleet-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

/* Availability badge */
.mc-fleet-avail {
    font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 100px; letter-spacing: .2px;
}
.mc-fleet-in  { color: #16893f; background: rgba(22,137,63,.12); }
.mc-fleet-out { color: #b06a00; background: rgba(241,135,0,.14); }

/* Monthly price */
.mc-fleet-price {
    display: flex; align-items: baseline; gap: 5px;
    color: #1a1a2e;
}
.mc-fleet-prefix { font-size: 13px; color: #6b7280; font-weight: 600; }
.mc-fleet-amount { font-size: 24px; font-weight: 800; color: #f18700; letter-spacing: -.5px; }
.mc-fleet-suffix { font-size: 13px; color: #6b7280; font-weight: 600; }

/* CTA button */
.mc-fleet-cta {
    display: inline-block;
    background: #f18700; color: #fff !important;
    padding: 10px 22px; border-radius: 10px;
    font-weight: 700; font-size: 14px; text-decoration: none;
    transition: background .15s ease;
}
.mc-fleet-cta:hover { background: #d4770a; color: #fff !important; }

/* Make sure any leftover pay-buttons stay hidden even if JS is slow */
.stm_single_class_car .stm_rent_prices { display: none !important; }