.calendar-box {
  margin-bottom: 20px;
}
.calendar-view {
  margin-bottom: 10px;
}
.calendar-view .cal-calendar-box {
  width: 254px;
  padding: 1rem;
}

.calendar-view .cal-buttons-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.calendar-view .cal-buttons-container .cal-label-container {
  display: inline-block;
  flex: 1;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  color: #333336;
  line-height: 18px;
  text-transform: capitalize;
}

.calendar-view .cal-prev-button,
.calendar-view .cal-next-button {
  background: transparent;
  border: none;
  padding: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-view .cal-prev-button svg,
.calendar-view .cal-next-button svg {
  display: block;
}

.calendar-view .cal-year-dropdown {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  padding: 5px 20px;
}

.calendar-view .cal-weeks-wrapper.cal-header {
  margin-bottom: 5px;
}

.calendar-view .cal-week {
  display: flex;
  gap: 5px;
  margin: 0;
}

.calendar-view .cal-week .cal-day.cal-header {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #434343;
  line-height: 14px;
  text-transform: none;
  padding: 4px;
  border-radius: 4px;
  background: none;
  float: none;
}

.calendar-view .cal-day {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  margin: 0;
  border: none;
}

.calendar-view .cal-day span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #434343;
  line-height: 14px;
  border-radius: 30px;
  background: #ffffff;
}

.calendar-view .cal-week.cal-start-on-monday .cal-day:nth-child(6):not(.cal-disabled) span,
.calendar-view .cal-week.cal-start-on-monday .cal-day:nth-child(7):not(.cal-disabled) span {
  color: #FF2D2D;
}

.calendar-view .cal-day.cal-today span {
  background: #2047cf;
  color: #ffffff;
  font-weight: 600;
}

.calendar-view .cal-day.cal-today span::after {
  display: none;
}

.calendar-view .cal-day.cal-selected span {
  background: #2047cf;
  color: #ffffff;
}

.calendar-view .cal-week .cal-day[disabled="disabled"] span {
  color: #9E9E9E;
  cursor: not-allowed;
}

.calendar-view .cal-day.cal-disabled span {
  color: #9E9E9E;
}

.calendar-view .cal-day.has-event span {
  position: relative;
}

.calendar-view .cal-day.has-event span::after {
  content: '';
  position: absolute;
  top: 0px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #40a737;
  border: 1px solid #ecf3fb;
}

.calendar-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #aaaaaa;
  line-height: 14px;
}

.calendar-hint .hint-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #40a737;
  border: 1px solid #ecf3fb;
  flex-shrink: 0;
}

.calendar-view .cal-today-button {
  display: none;
}

.calendar-view .cal-weeks-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.calendar-view .cal-week.cal-highlight {
  border-radius: 0;
}

.calendar-view .cal-week .cal-day.cal-highlight span {
  color: #434343;
}

.calendar-view .cal-months-wrapper .cal-month span {
  display: inline-block;
  padding: 10px;
  text-transform: capitalize;
  margin-bottom: 10px;
}

/* Кликабельные дни: курсор-указатель и плавный ховер (кроме заголовков и недоступных). */
.calendar-view .cal-day:not(.cal-header):not(.cal-disabled):not([disabled]) {
  cursor: pointer;
}

.calendar-view .cal-day span {
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.calendar-view .cal-day:not(.cal-header):not(.cal-disabled):not([disabled]):not(.cal-today):not(.cal-selected):hover span {
  background: #ecf3fb;
  color: #2047cf;
  box-shadow: inset 0 0 0 1px #dbe1f7;
}

/* Активный день (сегодня/выбранный) — текст всегда белый, даже если это выходной.
   Селектор по специфичности не ниже правила выходных (nth-child(6/7)), плюс !important. */
.calendar-view .cal-weeks-wrapper .cal-week .cal-day.cal-today:not(.cal-disabled) span,
.calendar-view .cal-weeks-wrapper .cal-week .cal-day.cal-selected:not(.cal-disabled) span,
.calendar-view .cal-day.cal-today span,
.calendar-view .cal-day.cal-selected span {
  color: #ffffff !important;
}