.calendar {
    width: 350px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.calendar-header button {

    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px 10px;

}

.calendar-weekdays {

    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;

}

.calendar-days {

    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;

}

.calendar-day {

    position: relative;

    aspect-ratio: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 6px;

    cursor: pointer;

}

.calendar-day:hover {

    background: #e8f1ff;

}

.calendar-today {

    background: #1f77b4;
    color: white;
    font-weight: bold;

}

.calendar-blank {

    aspect-ratio: 1;

}

.calendar-container {

    position: relative;

    display: inline-block;

}

.calendar-button {

    padding: 10px 18px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    background: #700070;

    color: white;

    font-weight: 600;

}

.calendar-panel {

    display: none;

    position: absolute;

    top: 50px;

    left: 0;

    z-index: 1000;

    background: white;

    border-radius: 8px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);

    padding: 10px;

}

.calendar-panel.open {

    display: block;

}

.calendar-no-data::after {

    content: "⚠";

    position: absolute;

    top: 2px;

    right: 3px;

    font-size: 12px;

    color: #d32f2f;

    font-weight: bold;

}