/* Modal styles */
 .modal {
    display: none; /* Hidden by default */
    position:absolute; /*
    z-index: 100; /* Sit above other elements */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Black background with transparency */
}

.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
}

/* Calendar styles */
#calendarBody td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
    width: 80px;
    height: 80px;
    vertical-align: top;
    cursor: pointer;
}

.booked {
    background-color: #e74c3c; /* Red for booked dates */
    color: white;
    pointer-events: none; /* Prevent clicking */
    cursor: not-allowed;
}

.available {
    background-color: #2ecc71; /* Green for available dates */
    color: white;
}

.day-number {
    font-size: 20px;
}

.day-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* Style the calendar table */
#calendar table {
    width: 100%;
    border-collapse: collapse; /* Ensure table borders collapse */
}

#calendarBody td {
    padding: 8px;  /* Reduce padding for smaller cells */
    text-align: center;
    border: 1px solid #ccc; /* Light border for each cell */
    width: 50px;   /* Reduce the width of the cells */
    height: 50px;  /* Reduce the height of the cells */
    vertical-align: top;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth hover effect */
}

/* Style available days */
.available {
    background-color: #2ecc71; /* Green background for available days */
    color: white;              /* White text */
    border-radius: 6px;        /* Rounded corners (smaller radius) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slight shadow */
}

.available:hover {
    background-color: #27ae60; /* Darker green on hover */
}

/* Style booked days */
.booked {
    background-color: #e74c3c; /* Red background for booked days */
    color: white;
    border-radius: 6px;        /* Rounded corners (smaller radius) */
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.15); /* Subtle shadow */
    pointer-events: none;      /* Disable clicking on booked days */
    cursor: not-allowed;
}

/* Style the day number */
.day-number {
    font-size: 16px;           /* Slightly smaller font size */
    font-weight: bold;
}

/* Style the labels for booked and available */
.booked-label, .available-label {
    font-size: 10px;           /* Smaller font for the label */
    margin-top: 4px;           /* Slightly less space between number and label */
}

/* Style the modal calendar container */
.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    width: 70%;    /* Make the modal narrower */
    max-width: 500px;  /* Limit the max width */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
}

/* Close button in the modal */
.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
    color: #888;
}

.close-btn:hover {
    color: #333;
}

/* Style the previous and next month buttons */
#prevMonth, #nextMonth {
    padding: 8px;   /* Slightly smaller padding for buttons */
    font-size: 14px; /* Slightly smaller font size */
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: background-color 0.3s;
}

#prevMonth:hover, #nextMonth:hover {
    background-color: #ddd; /* Slightly darker on hover */
}

/* Style the input and button container */
.input-group {
    display:flex;    align-items: center; /* Vertically center the button and input */
    gap: 5px; /* Remove space between the input and button */
    
    
}

.input-group input {
    
    padding: 8px; /* Add some padding to the input field */
    font-size: 16px; /* Adjust font size */
    border: 1px solid #ccc;
    margin: 5px;
    border-radius: 4px 0 0 4px; /* Rounded corners on the left side */
}

/* Style the buttons next to the input fields */
.input-group button {
    padding: 8px 12px; /* Adjust padding for the button */
    font-size: 14px;
    background-color: #2ecc71; /* Green background for buttons */
    color: white;
    border: none;
    border-radius: 0 4px 4px 0; /* Rounded corners on the right side */
    cursor: pointer;
    transition: background-color 0.3s;
}

.input-group button:hover {
    background-color: #27ae60; /* Darker green on hover */
}

/* Mobile-responsive adjustments using media queries */
@media only screen and (max-width: 768px) {
    /* Adjust table cell size for smaller screens */
    #calendarBody td {
        width: 40px;
        height: 40px;
        padding: 6px;
    }

    /* Adjust the modal size on smaller devices */
    .modal-content {
        width: 100%;  /* Full width with some margin on smaller screens */
        margin-top: 20px;
        padding: 10px;   /* Slightly less padding for mobile */
    }

    /* Adjust font sizes for day numbers and labels on mobile */
    .day-number {
        font-size: 14px; /* Smaller font size for the day numbers */
    }

    .booked-label, .available-label {
        font-size: 10px; /* Smaller font for labels */
    }

    /* Adjust button font size and padding for mobile */
    #prevMonth, #nextMonth {
        padding: 6px;
        font-size: 12px;  /* Make buttons smaller on mobile */
    }

    /* Ensure the close button stays visible and accessible */
    .close-btn {
        font-size: 18px;
    }
    #calendar table {
       background-color: #f6f7f6;
        width: 100%;
       
    }
    .modal {
        display: none; /* Hidden by default */
        position:absolute; /*
        z-index: 100; /* Sit above other elements */
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        background-color: rgba(0, 0, 0, 0.7); /* Black background with transparency */
    }
 
}

@media only screen and (max-width: 480px) {
    /* Further reduce size for very small screens */
    #calendarBody td {
        width: 35px;
        height: 35px;
        padding: 5px;
    }

    /* Modal content will cover nearly the full screen */
    .modal-content {
        width: 80%; /* Wider modal for mobile */
        margin-top: 20px;
        
       
        overflow-y: auto; /* Allow vertical scrolling on small screens */
    }
    #calendar table {
        background-color: #eaefec;
        margin-right: 50px ;
        width: 100%;
        padding-right: 50px;
        
     }
    #prevMonth, #nextMonth {
        padding: 5px;
        font-size: 11px;
    }

    .modal {
        display: none; /* Hidden by default */
        position:absolute; /*
        z-index: 100; /* Sit above other elements */
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        background-color: rgba(0, 0, 0, 0.7); /* Black background with transparency */
    }
}