.custom-calendar { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #ccc; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 9999; font-family: Arial, sans-serif; padding: 10px; border-radius: 5px; display: none; width: 250px; }
.custom-calendar.active { display: block; }
.cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: bold; }
.cal-header button { background: #f0f0f0; border: 1px solid #ccc; cursor: pointer; padding: 5px 10px; border-radius: 3px; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-day-name { font-weight: bold; font-size: 0.8em; color: #666; padding-bottom: 5px; }
.cal-day { padding: 5px; cursor: pointer; border-radius: 3px; }
.cal-day:hover { background: #e0e0e0; }
.cal-day.disabled { color: #ccc; cursor: not-allowed; background: transparent; }