/**
 * Food Store Closed Message Position Fix
 * Adjusts the position of the store closed message to be lower on the page
 */

/* Hide the message initially to prevent flash of unstyled content */
.wfs-store-close-msg,
.wfs-store-close-msg-danger {
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out !important;
}

/* Show the message once the page is fully loaded */
html.js-loaded .wfs-store-close-msg,
html.js-loaded .wfs-store-close-msg-danger {
    opacity: 1 !important;
}

/* Reset and completely override the original message container */
.wfs-store-close-msg,
.wfs-store-close-msg-danger {
    margin-top: 50px !important; /* Add space above the message */
    margin-bottom: 20px !important;
    position: relative;
    z-index: 1 !important; /* Lower z-index to ensure it doesn't overlap with Swiper slider */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Create a completely new styling for the message span */
.wfs-store-close-msg span,
.wfs-store-close-msg-danger span {
    /* Reset original styling completely */
    background: none !important;
    
    /* Apply our custom styling */
    display: block !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 16px 20px !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    /*text-align: center !important;*/
    border-radius: 6px !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
}

/* Regular message styling */
.wfs-store-close-msg span {
	background-color: #ffebee !important; /* Light red background (match danger variant) */
	color: #c62828 !important; /* Dark red text */
	border-left: 4px solid #c62828 !important; /* Red accent border */
}

/* Danger variant specific styling */
.wfs-store-close-msg-danger span {
	background-color: #ffebee !important; /* Light red background */
	color: #c62828 !important; /* Dark red text */
	border-left: 4px solid #c62828 !important; /* Red accent border */
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .wfs-store-close-msg,
    .wfs-store-close-msg-danger {
        margin-top: 30px !important; /* Less space on mobile */
    }
    
    .wfs-store-close-msg span,
    .wfs-store-close-msg-danger span {
        padding: 10px !important;
        font-size: 14px;
    }
}