/* OpenHours.css */

/* Basic container styling */
.contact-us-container {
    /* Keep the original padding as this container likely controls the grey box visuals. */
    /* Based on image_29a99e.png, the panel-body is likely the direct parent giving 15px padding. */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px; /* Keep this for the container's own padding */

    max-width: 450px; /* Adjust this to fit your overall page layout */
    font-family: Arial, sans-serif;
    color: #333;
}

/* Adjust this to counteract the parent's (panel-body's) 15px padding */
.opening-hours {
    padding-left: 0; /* Ensure no extra padding is added here */
    margin-left: -15px; /* <--- CRITICAL: Use a negative margin to pull the content left. */
                       /* This value directly counters the 15px padding from the 'panel-body'. */
                       /* If the 'Contact Details' content has 0 left padding, this should align it. */
                       /* If 'Contact Details' has a small internal padding (e.g., 5px), you might need -10px here (15px - 10px = 5px effective padding). */
}

.opening-hours p {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 15px;
    color: #555;
    font-weight: bold;
}

/* Flexbox for each individual line (e.g., "Monday to Friday: 8am to 6pm Open") */
.opening-hours .hour-line {
    display: flex;
    justify-content: space-between; /* Pushes 'day' to the left, 'time-status-group' to the right */
    align-items: baseline; /* Aligns text along the baseline for clean look */
    margin-bottom: 8px; /* Space between each line of hours */

    /* This width was fine-tuned for the gap. Keep it as is unless gap changes. */
    width: 280px; /* Adjust this if the gap between day and time/status is still off */
}

/* Styling for the day name (e.g., "Monday to Friday:") */
.opening-hours .day {
    flex-shrink: 0; /* Prevents the day text from shrinking */
    margin-right: 5px; /* Keeps the gap tight after the day name */
    color: #333;
    white-space: nowrap; /* Ensures the day text doesn't wrap to the next line */
}

/* Flexbox container for the time and status to keep them grouped together on the right */
.opening-hours .time-status-group {
    display: flex;
    align-items: baseline;
    gap: 10px; /* Fixed gap between the time and the status text */
    flex-shrink: 0; /* Prevents this entire group from shrinking too much */
}

/* Styling for the time (e.g., "8am to 6pm") */
.opening-hours .time {
    color: #333;
    white-space: nowrap; /* Prevents the time text from wrapping */
}

/* Styling for the dynamic status indicator ("Open" / "Closed") */
.opening-hours .status-indicator {
    font-weight: bold;
    min-width: 60px; /* Ensures enough space for "Closed" or "Open" to prevent wrapping */
    text-align: left; /* Aligns the status text within its own space */
    transition: opacity 0.3s ease-in-out; /* Smooth visual transition for visibility changes */

    visibility: hidden; /* By default, hide the status indicator for ALL lines */
    opacity: 0; /* Ensures a smooth fade-in/out effect when shown/hidden */
}

/* Colors for "Open" and "Closed" status */
.status-indicator.open {
    color: #28a745; /* Green color for 'Open' */
}

.status-indicator.closed {
    color: #dc3545; /* Red color for 'Closed' */
}

/* This class is dynamically added by JavaScript to make the status visible */
/* ONLY for the line that corresponds to the current day of the week */
.status-indicator.is-current-day {
    visibility: visible;
    opacity: 1; /* Makes it fully opaque (visible) */
}