/*
 * POP C FINAL STATUS POLISH
 *
 * IMPORTANT:
 * Does NOT change menu card layout, image, hover,
 * positioning, height or backend availability logic.
 */


/* ==========================================================
   BADGES
   ========================================================== */

.popc-live-badges {
    gap: 7px !important;
    margin-bottom: 9px !important;
}

.popc-live-badge {
    padding: 5px 10px !important;
    border-radius: 999px !important;

    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    text-shadow: none !important;
}


/* Food Trailer */
.popc-live-badge.trailer {
    background: rgba(255,255,255,.95) !important;
    color: #292929 !important;
    border: 1px solid rgba(220,220,220,.95) !important;
}


/* Available */
.popc-live-badge.available {
    background: #e8f7ed !important;
    color: #176d39 !important;
    border: 1px solid #c9e8d3 !important;
}


/* Unavailable */
.popc-live-badge.unavailable {
    background: #fff0dd !important;
    color: #995100 !important;
    border: 1px solid #efcfaa !important;
}


/* ==========================================================
   STATUS MESSAGE
   ========================================================== */

.popc-live-next {
    line-height: 1.5 !important;
    margin-bottom: 11px !important;
}


/*
 * Add some useful personality when the trailer item
 * is unavailable, without changing backend data.
 */
.popc-live-order:has(.popc-live-disabled) .popc-live-next::after {
    content: " Catch us at our next Food Trailer stop — schedule coming soon.";

    display: block;

    margin-top: 4px;

    font-size: 11px;
    line-height: 1.45;

    opacity: .88;
}


/* On dark hover make the message readable */
.menu_card:hover .popc-live-next,
.menu_card:hover .popc-live-next::after {
    color: rgba(255,255,255,.88) !important;
}


/* ==========================================================
   REMOVE DUPLICATE "NOT AVAILABLE"
   Badge already communicates availability.
   Bottom pill becomes "Check Back Soon".
   ========================================================== */

.popc-live-disabled {
    font-size: 0 !important;

    min-width: 138px !important;

    padding: 10px 18px !important;

    border-radius: 999px !important;

    background: #f3f5f7 !important;
    border: 1px solid #d7dce2 !important;

    color: #5f6873 !important;

    cursor: default !important;

    text-shadow: none !important;
}


.popc-live-disabled::after {
    content: "Check Back Soon";

    font-size: 13px;
    line-height: 1;
    font-weight: 700;

    color: #5f6873;

    text-shadow: none;
}


/* Cleaner appearance over the dark hover image */
.menu_card:hover .popc-live-disabled {
    background: rgba(255,255,255,.95) !important;
    border-color: rgba(255,255,255,.80) !important;
}

.menu_card:hover .popc-live-disabled::after {
    color: #343a40 !important;
}


/* ==========================================================
   AVAILABLE ORDER BUTTON
   ========================================================== */

.popc-live-order .popc-order-button {
    color: #111 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.popc-live-order .popc-order-button *,
.popc-live-order .popc-order-button:hover *,
.popc-live-order .popc-order-button:focus * {
    color: #111 !important;
    text-shadow: none !important;
}


/* Mobile */
@media (max-width: 767px) {

    .popc-live-order:has(.popc-live-disabled) .popc-live-next::after {
        font-size: 10px;
    }

    .popc-live-disabled::after {
        font-size: 12px;
    }
}