/* Basic Reset (optional but good practice) */
body, h1, div {
    margin: 0;
    padding: 0;
}

/* General Body Styling */
body {
    font-family: 'Arial', sans-serif; /* Use a more modern font */
    background-color: #f8f8f8; /* Light background */
    color: #333;
    padding: 20px;
    line-height: 1.6; /* Improve readability */
}

/* Heading Styling */
h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50; /* Darker heading color */
    font-size: 2.5em;  /* Larger heading */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* subtle shadow */
}

/* Calendar Container */
#calendar-container {
    width: 90%; /* Slightly wider */
    max-width: 1000px; /* Limit width on larger screens */
    margin: 0 auto; /* Center the calendar */
    background-color: #fff;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Stronger shadow */
    padding: 30px; /* More padding */
}

/* Calendar Grid */
#calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columns for days of the week */
    gap: 8px; /* Space between cells */
    border: 1px solid #ddd;  /* Lighter border */
    border-radius: 5px;
}

/* Day Names (Header) */
.day-name {
    text-align: center;
    font-weight: bold;
    padding: 10px;
    background-color: #f0f0f0; /* Light gray header */
    color: #555;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Month Names */
.month-name {
    grid-column: span 7; /* Span across all columns */
    text-align: center;
    font-weight: bold;
    padding: 12px;
    background-color: #e9e9e9; /* Even lighter gray for month headers */
    color: #333;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 5px;
}


/* Date Cells */
.date-cell {
    text-align: center;
    padding: 12px;
    border: 1px solid #eee; /* Very light border */
    cursor: default;  /* No need to indicate clickable */
    border-radius: 5px;
    transition: background-color 0.2s ease; /* Smooth background transition */
}

/* Hover effect for date cells (optional) */
.date-cell:hover {
    background-color: #f4f4f4;  /* Light gray hover effect */
}

/* Booked Dates */
.booked {
    background-color: #ff7f7f; /* A more appealing red */
    color: white;
    font-weight: bold;
}

/* Today's Date */
.today {
    font-weight: bold;
    background-color: #a0d468; /* A fresh green color */
    color: white;
}