@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --font_1: 'Inter', sans-serif;  
  --color1:#F4F2F7; 
  --color1Hover:#7E61AC;
  --color2:#fff;
  --color3: #E8E0F0;  
}

/* ================= КАЛЕНДАРЬ ================= */
.calendar-wrapper {
  background:var(--color2);
  border-radius: 20px;
  padding:30px 20px 40px;
  font-family: var(--font_1) !important;  
}

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

.calendar-wrapper .calendar-header .month-arrow {
  border-radius: 3px;
  width:40px;
  height:40px;
  display:flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
  transition:all .3s;
}

.calendar-wrapper .calendar-header .month-arrow:hover {
  background: var(--color1);
}

.calendar-wrapper .calendar-header .month-arrow:after {
  content:'\f104';
  font-family:'Inter', 'FontAwesome', sans-serif;
  font-size:16px;
  font-weight:500;
  color:var(--color1Hover);
}

.calendar-wrapper .calendar-header .month-arrow.arrow-right:after {
  content:'\f105'
}

.calendar-wrapper .calendar-header .today-date {
  font-family:'Inter', sans-serif;
  font-size:20px;
  font-weight:500;
}

/* дни недели */
.calendar-body .week-days {
  font-family:'Inter', sans-serif;
  font-size:16px;
  opacity:.8;
  margin-bottom:30px
}

/* сетка */
.calendar-body > div {
  display:flex;
  flex-wrap: wrap;
  text-align:center;
  gap:30px 0
}

.calendar-body > div > div {
  width:calc(100% / 7);
  position:relative;
}

/* дни */
.calendar-body .days {
  font-family:'Inter', sans-serif;
  font-size:16px;
}

/* база для всех дней */
.calendar-body .days > div {
  position: relative;
  z-index: 1;
}

/* неактивные */
.calendar-body .days > div.another {
  opacity:.3
}

/* ================= СОБЫТИЯ В КАЛЕНДАРЕ ================= */

/* текст — тёмный */
.calendar-body .days > div.event {
  color: var(--color-text-1);
  cursor:pointer;
}

/* фон события */
.calendar-body .days > div.event:before {
  content:'';
  position:absolute;
  width:40px;
  height:40px;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border-radius: 3px;
  background:var(--color1);
  z-index: -1;
}

/* hover */
.calendar-body .days > div.event:hover {
  color: var(--color-text-1);
}

.calendar-body .days > div.event:hover:before {
  background:var(--color3);
}

/* ================= СЕГОДНЯ ================= */
.calendar-body .days > div.today {
  color: var(--color1Hover);
}

.calendar-body .days > div.today:before {
  content:'';
  position:absolute;
  width:40px;
  height:40px;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border-radius: 3px;
  border: 1px solid var(--color1Hover);  
  background:#FFF;    
  z-index:-1;
}

/* если сегодня И событие */
.calendar-body .days > div.today.event:before {
  background:var(--color1Hover);
}

.calendar-body .days > div.today.event {
  color:#fff;
}

/* ================= СОБЫТИЯ В ПЛАШКЕ ================= */
.calendar-events h3{
  margin-top:40px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;  
  margin-bottom:20px;
}

.calendar-events a {
  background:var(--color1);
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:10px;
  border-radius:10px;
  padding:10px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  text-decoration:none;
  transition:all .3s;
  pointer-events:none;
}

.calendar-events a[href*='/'] {
  pointer-events: all;
}

.calendar-events a:hover {
  background:var(--color3);
  color: var(--color-text-1);  
}

/* дата */
.calendar-events .event-date {
  order: 1;
  color: var(--color1Hover);
  font-weight: 500;
  margin-right: 10px;
}

/* время */
.calendar-events .event-time {
  order: 2;
  color: var(--color1Hover);
  font-weight: 500;
}

/* название */
.calendar-events .event-name {
  order: 3;
  flex: 0 0 100%;
  color: var(--color-text-1);
  margin-top: 6px;
}

/* hover текста */
.calendar-events a:hover .event-date,
.calendar-events a:hover .event-time {
  color: var(--color-text-1);
}

.calendar-events a:hover .event-name {
  color: var(--color-text-1);
}


/* ================= АДАПТИВ ================= */
@media(max-width:400px) {
  .calendar-wrapper {
    padding:20px 15px 30px;
  }
  
  .calendar-body .week-days,
  .calendar-body .days,
  .calendar-events a{
    font-size:12px;
  }
  
  .calendar-wrapper .calendar-header .today-date,
  .calendar-events h3 {
    font-size:16px;
  }
  
  .calendar-body .days > div.today:before,
  .calendar-body .days > div.event:before,
  .calendar-wrapper .calendar-header .month-arrow{
    width:30px;
    height:30px;
  }
}