.calendar {
      width: 100%;
      max-width: 650px;
    }
    .calendar-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
      margin-top: 10px;
    }
    .day-name, .day {
      text-align: center;
      padding: 10px;
    }
    .day-name {
      font-weight: bold;
      color: #888;
    }
    .day {
      background: #f9f9f9;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
      line-height: 20px;
      padding-bottom: 80%;
      position: relative;
    }
    .day div{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .day.inactive {
      background: #eaeaea;
    }
    .day.inactive:before {
        content: ' ';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: black;
        transform: rotate(45deg);
        top: 50%;
        opacity: 20%;
    }
    .day:hover:not(.today):not(.inactive) {
      background: #e0e0e0;
    }
    .day .day-number{
        font-size: 1.3rem;
        font-weight: bold;
    }
    .day .visitor-rate{
        font-size: 1.3rem;
        font-weight: 100;
    }
    .today p {
      color: white;
    }
    @media (max-width: 600px) {
        .day .visitor-rate{
            font-size: 0.85rem !important;
        }
        .calendar-header {
            flex-direction: column;
            align-items: stretch;
        }
        .calendar-header select {
            width: 100%;
        }
    }