.casa-av-calendar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
@media (max-width: 1024px) { .casa-av-calendar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .casa-av-calendar { grid-template-columns: repeat(2, 1fr); } }
.casa-av-month { border: 1px solid #f5f5f5; padding: 0.2%; }
.casa-av-month table { width: 100%; border-collapse: collapse; border-bottom: 1px solid #ddd; margin: 0; }
.casa-av-month thead th { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; line-height: 2.6em; text-align: center; text-transform: uppercase; color: #555; background: none; }
.casa-av-month tbody th,
.casa-av-month tbody td { background: #d3d3d3; color: #333; font-size: 12px; font-weight: 400; line-height: 20px; height: 20px; padding: 0; text-align: center; }
.casa-av-month tbody td { border-top: 1px solid #ddd; }
.casa-av-month td.casa-av-booked { background: #69b2ff; color: #fff; }

/* Booked day with a note: dark corner triangle, dotted number, pink (#ff0076) with the note below on hover (as on the original site). */
.casa-av-month td.casa-av-has-note { position: relative; cursor: help; outline: none; }
.casa-av-month td.casa-av-has-note::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 8px 8px 0; border-color: transparent #0d3b78 transparent transparent; }
.casa-av-day-num { text-decoration: underline dotted; text-underline-offset: 2px; }
.casa-av-month td.casa-av-has-note:hover,
.casa-av-month td.casa-av-has-note:focus { background: #ff0076; }
.casa-av-note { display: none; position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 2px; padding: 3px 8px; background: #000; color: #fff; font-size: 14px; line-height: 20px; white-space: nowrap; text-align: left; pointer-events: none; }
/* Days near the end of the week open the note to the left so it stays inside the calendar. */
.casa-av-month td.casa-av-has-note:nth-child(n+5) .casa-av-note { left: auto; right: 0; }
.casa-av-month td.casa-av-has-note:hover .casa-av-note,
.casa-av-month td.casa-av-has-note:focus .casa-av-note { display: block; }