/* Shop Closed Styles */

/* Target ONLY menu item and combo images when shop is closed */
.shop-closed .menu-item-image,
.shop-closed .square-container img,
.shop-closed .menu-card img,
.shop-closed .menu-highlight img,
.shop-closed .menu-highlight-img img,
.shop-closed .card-img-top.menu-item-image,
.shop-closed .vegetable-carousel img,
.shop-closed .owl-carousel img {
    filter: grayscale(100%) !important;
    opacity: 0.5 !important;
    -webkit-filter: grayscale(100%) !important;
}

/* Disable all cart and order buttons */
.shop-closed .add-to-cart-btn,
.shop-closed .order-btn,
.shop-closed button[type="submit"].order-button,
.shop-closed .btn-success,
.shop-closed .add-btn,
.shop-closed .qty-decrease,
.shop-closed .qty-increase,
.shop-closed button.btn-primary {
    pointer-events: none !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* Shop Closed Banner */
.shop-closed-banner {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 15px 20px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    animation: pulse 2s infinite;
    line-height: 1.4;
}

/* Push navbar down when shop is closed - Default for all screens */
.shop-closed .fixed-top {
    top: 65px !important;
}

/* Small mobile screens (below 576px) - banner wraps to 3 lines */
@media (max-width: 575px) {
    .shop-closed .fixed-top {
        top: 80px !important;
    }
}

/* Medium mobile to small tablet (576px - 767px) - banner wraps to 2 lines */
@media (min-width: 576px) and (max-width: 767px) {
    .shop-closed .fixed-top {
        top: 65px !important;
    }
}

/* Tablet screens (768px - 991px) - banner is 1 line */
@media (min-width: 768px) and (max-width: 991px) {
    .shop-closed .fixed-top {
        top: 56px !important;
    }
}

/* Desktop/Laptop screens (992px and above) - banner is 1 line */
@media (min-width: 992px) {
    .shop-closed .fixed-top {
        top: 56px !important;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

.shop-closed-banner i {
    margin-right: 10px;
    font-size: 18px;
}

/* Disable all interactive elements when shop is closed */
.shop-closed form button[type="submit"],
.shop-closed .add-to-cart,
.shop-closed .checkout-btn,
.shop-closed .place-order-btn {
    pointer-events: none !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #6c757d !important;
}

/* Ensure cards are positioned relative for overlay */
.shop-closed .card {
    position: relative;
}