/* ============================================================
   availability.css — fase 12
   Prominent "niet beschikbaar" overlay op /cars listing-kaarten
   + status box + disabled knop styling op /cars/car/details/<slug>.
   Gebruikt design-tokens.css var(--a22-*) met hardcoded hex fallbacks.
   ============================================================ */

/* ---------- Listing card: unavailable badge ---------- */

/* wraplisting krijgt .car-unavailable via inline JS na pageload
   (detectie via aanwezigheid van .car-unavail-btn binnen de kaart). */
.wraplisting.car-unavailable {
    opacity: 0.78;
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1);
}
.wraplisting.car-unavailable:hover {
    opacity: 1;
}
.wraplisting.car-unavailable .img_list {
    position: relative;
    filter: grayscale(18%);
    transition: filter 0.3s;
}
.wraplisting.car-unavailable:hover .img_list {
    filter: grayscale(0%);
}
.wraplisting.car-unavailable .img_list::before {
    content: attr(data-unavail-label);
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px 6px;
    background: #DC2626;
    color: #FFFFFF;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(15,15,15,0.18);
    pointer-events: none;
}

/* Upgrade bestaande inline-styled car-unavail-btn naar design-token look */
.car-unavail-btn {
    background-color: #FEF2F2 !important;
    color: #991B1B !important;
    border: 1px solid rgba(220,38,38,0.25) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
.car-unavail-btn i { margin-right: 6px; }

/* ---------- Detail page: AJAX availability status ---------- */

.availability-status {
    display: none;
    margin: 14px 0 18px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.5;
}
.availability-status.status-ok,
.availability-status.status-no,
.availability-status.status-err {
    display: block;
}
.availability-status.status-ok {
    background: rgba(92,122,106,0.12);
    color: #41594C;
    border: 1px solid rgba(92,122,106,0.22);
}
.availability-status.status-no {
    background: rgba(220,38,38,0.08);
    color: #991B1B;
    border: 1px solid rgba(220,38,38,0.22);
}
.availability-status.status-err {
    background: rgba(184,147,90,0.12);
    color: #78591F;
    border: 1px solid rgba(184,147,90,0.30);
}
.availability-status::before {
    font-weight: 700;
    margin-right: 6px;
}
.availability-status.status-ok::before { content: "\2713"; } /* ✓ */
.availability-status.status-no::before { content: "\2715"; } /* ✕ */
.availability-status.status-err::before { content: "!"; }

/* Detail reserveer button: disabled state */
.btn-reserve-availability[disabled],
.btn-reserve-availability.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.btn-reserve-availability .btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: a22-spin 0.8s linear infinite;
    vertical-align: -2px;
}
.btn-reserve-availability.is-checking .btn-spinner { display: inline-block; }
@keyframes a22-spin { to { transform: rotate(360deg); } }