@charset "UTF-8";
/* Calendar Navigation Styles */
.calendar-navi { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }

.prev-month, .next-month { cursor: pointer; margin: 0 20px; font-size: 18px; }

.prev-month.disable { cursor: not-allowed; color: #ccc; }

.year-month { font-weight: bold; font-size: 16px; }

/* Styles for the calendar */
.mdbc-calendar { width: 100%; }

.mdbc-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }

.mdbc-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: bold; background-color: #f0f0f0; }

.mdbc-calendar-cell { padding: 5px; text-align: center; cursor: pointer; position: relative; }

.mdbc-calendar-cell.available { color: orange; }

.mdbc-calendar-cell.unavailable { color: gray; cursor: not-allowed; }

.mdbc-calendar-cell.empty { background-color: #eee; }

.mdbc-calendar-cell.selected { background-color: #ffebcd; /* 選択された開始・終了日 */ }

.mdbc-calendar-cell.in-range { background-color: #cce0ff; /* 期間内の日付 */ }

.mdbc-calendar-cell.today { background-color: #ff9800; /* 好きな色に変更 */ color: white; font-weight: 700; }

.cell-date { font-size: 14px; margin-bottom: 5px; }

.cell-status { font-size: 12px; color: orange; }

.mdbc-calendar-cell.unavailable .cell-status { color: gray; }

.mdbc-calendar-cell.unavailable { background-color: #f0f0f0; /* グレー背景 */ color: #888; /* グレー文字 */ cursor: not-allowed; /* 予約不可のカーソル */ opacity: 0.5; /* 半透明にして無効感を強調 */ }