.calendar-modal {
 display: none;
position: fixed;
z-index: 9000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.5); /* dark semi-transparent overlay */
justify-content: center;
align-items: center;
padding: 1rem .25rem;
}
.calendar-modal-content {
background: #fff;
max-width: 1200px;
width: 100%;
border-radius: 20px;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
padding: .1rem;
height: auto;
max-height: none; /* Prevents it from growing too tall; or increase to 90vh */
overflow-y: auto; /* Adds scroll if content overflows */
}

.calendar-close-button {
position: absolute;
top: .25rem;
right: 1rem;
font-size: 2rem;
font-weight: bold;
color: #626262;
cursor: pointer;
}
.calendar-close-button:hover {
color: black;
}
.calendar-iframe-wrapper {
position: relative;
width: 100%;
padding-bottom: 55%; /* Adjust for squareness */
overflow: hidden;
border-radius: 15px;
}
.calendar-iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Slightly more than 100 to compensate for scaling */
height: 100%;
border: none;
transform: scale(1); /* Shrinks the calendar to fit panel */
transform-origin: top left;
}
@media (max-width: 768px) {
.calendar-panel {
z-index: 999;
border-top: 350px;
 }
.calendar-iframe-wrapper {
padding-bottom: 125%;
 }
.calendar-iframe-wrapper iframe {
transform: scale(1);
width: 100%;
height: 100%;
 }
}
.calendar-panel .close-button {
top: 0.1rem;
right: 0.1rem;
font-size: 1.5rem;
 }
.calendar-modal {
top: 2rem; /* or however tall your navbar is */
/*height: calc(100% - 4rem); /* adjust height so it doesn't overflow past screen */
 }
/* ANIMATION! Whooo */
@keyframes fadePop {
 0% {
opacity: 0;
transform: scale(0.95);
 }
 100% {
opacity: 1;
transform: scale(1);
 }
}
.calendar-modal {
/* existing styles */
animation: fadeInOverlay 0.3s ease-out;
}
.calendar-modal-content {
animation: fadePop 0.3s ease-out;
}
@keyframes fadeInOverlay {
 0% { opacity: 0; }
 100% { opacity: 1; }
}

/* FIXED: Remove background and padding from memo-wrapper inside calendar modal */
.calendar-modal .memo-wrapper {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
border: none !important;
margin: 0 !important;
}

/* This was for when the Calendar was a subpage instead of a floating panel */
/*.calendar-container {
 display: flex;
 justify-content: center;
 margin-top: 1rem;
}
.calendar-iframe-wrapper {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
}
.calendar-iframe-wrapper iframe {
 width: 100%;
 height: 800px;
 border: 1px solid #777;
}
@media screen and (max-width: 768px) {
 .calendar-iframe-wrapper {
 padding: 0 .01rem;
 }
 .calendar-iframe-wrapper iframe {
 height: 600px;
 }
}
*/
/* File "calendar.css" created on June 10, 2025; Gian Centeno */