body {
    background: #f5f5f5;
    font-family: Arial;
}
.slot.available {
    cursor: pointer;
    background-color: #e6ffe6;
}
.slot.unavailable,
.slot.not-available {
    background-color: #f8d7da;
    color: #721c24;
    pointer-events: none;
}
.slot.booked-by-user {
    background-color: #cce5ff;
    color: #004085;
    font-weight: bold;
}
.slot.selected {
    background-color: #ffeeba !important;
    font-weight: bold;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.calendar-day {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    background: white;
}
.slot {
    border-radius: 6px;
    margin: 4px 0;
    padding: 5px;
    text-align: center;
}
.booking-form textarea,
.booking-form input,
.booking-form button {
    margin-bottom: 10px;
}
.summary-box {
    width: 100%;
    height: 60px;
    resize: none;
    background: #e9ecef;
    padding: 10px;
}
.legend .slot {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}
.legend span {
    margin-right: 15px;
}
.week-nav {
    float: right;
}

@media (max-width: 768px) {
    .calendar-grid {
        grid-template-columns: 1fr !important;
    }
    .calendar-day {
        margin-bottom: 10px;
    }
}