#google-calendar { font-size: 14px;  }
.calendar-container { display: flex; flex-direction: column; }
.calendar-header-days { display: grid; grid-template-columns: repeat(7, 1fr); /* 7 columns for 7 days */ text-align: center; font-weight: bold; background-color: #f9f9f9; padding: 10px 0; border-bottom: 1px solid #ddd; }
.calendar-day { padding: 2px; font-size: 15px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); /* 7 columns for 7 days */ gap: 0px; }
.calendar-cell { border: 1px solid #ddd; padding: 10px; position: relative; }
.calendar-header { display: flex; justify-content: center; align-items: center; margin-bottom: 1rem; font-size: 40px; }
.calendar-controls { display: flex; justify-content: space-between; margin-bottom: 15px; }
#prev-month:hover { cursor: w-resize; }
#next-month:hover { cursor: e-resize; }
.calendar-cell { border: 0.5px solid #ddd; padding: 8px 5px 0 0; min-height: 90px; position: relative; }
.day-number { text-align: center; }
.calendar-cell.empty { background-color: #f9f9f9; }
.calendar-cell ul { list-style: none; padding: 0; margin: 5px 0 0 0; border-radius: 6px; box-sizing: border-box; }
.event-item::before { content: ""; display: none; width: 3px; background-color: #046c9f; position: absolute; height: 100%; z-index: 10; left: 0; }
.calendar-cell ul li { padding: 3px; word-break: break-word; border-radius: 3px; position: relative; overflow: hidden; margin: 0 0 3px;}
.event-item { font-size: 14px; color: #ffffff; cursor: pointer; font-weight: 400; line-height: 1;}
.event-item:hover { text-decoration: underline; }

/* popup start */
#event-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */ display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
#event-popup.show { opacity: 1; visibility: visible; }
.popup-content { background: #fff; padding: 50px; border-radius: 8px; max-width: 600px; width: 90%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); text-align: center; position: relative; }
.popup-content h2 { margin: 0 0 10px; font-size: 1.5em; }
.popup-content p { margin: 0 0 1rem; font-size: 1em; color: #555; }
.close-btn { position: absolute; top: 10px; right: 10px; padding: 0; background: none; border: none; font-size: 1.5em; color: #555; cursor: pointer; }
.close-btn:hover { color: #000; }
.today-date .day-number { background-color: rgb(11 87 208); border-radius: 50%; color: #fff; text-align: center; width: 24px; height: 24px; margin: 0 auto; line-height: 28px; }
.booked-event ul li.event-item { background-color: rgb(213, 0, 0); }
.price-event ul li.event-item { background-color: rgb(51, 182, 121); }

@media (max-width: 767px) {
    .popup-content {padding: 20px;}
    .calendar-header {font-size: 30px;}
    .event-item, .calendar-day {font-size: 12px;}
}

.calendar-cell.past-date {
    cursor: default !important;
}



.calendar-cell.past-date .event-item,
.calendar-cell.past-date .past-event {
    cursor: default !important;
    pointer-events: none !important;
}


#prev-month.disabled,
#prev-month:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}