.flatpickr-calendar {
  --flatpickr_p: 20px;

  position: absolute;
  z-index: var(
    --z-dropdown
  ) !important; /* Ensure it appears above other elements */
  top: calc(100% + 5px) !important; /* Position it directly below the input */
  left: 0 !important;
  padding: var(--flatpickr_p);
  color: var(--c-primary-dark);

  .buttons {
    margin-block-start: 20px;
    display: flex;
    gap: 20px;

    @media (max-width: 576px) {
      order: 1;
      margin-bottom: 1rem;
      gap: 10px;
    }
  }

  .filter-btn {
    color: #646988;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;

    @media (max-width: 576px) {
      padding: 8px 12px;
      font-size: 14px;
    }

    .second-word {
      @media (max-width: 576px) {
        display: none;
      }
    }
  }
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  display: flex;
  width: 34px;
  height: 34px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 4px;

  &:hover {
    color: var(--c-primary-dark);
    background-color: var(--c-gray-100);
  }
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: currentColor;
}

.flatpickr-calendar .flatpickr-months {
  @media (max-width: 576px) {
    order: 2;
  }
}

.flatpickr-current-month span.cur-month {
  margin-left: 0;
}

.flatpickr-wrapper {
  position: relative; /* Create a positioning context for the calendar */
}

.flatpickr-calendar .filter-btn.active {
  background-color: var(--c-primary);
  color: var(--c-white);
}

.flatpickr-calendar .clear-button {
  border: none !important;
  color: var(--c-primary);
  text-transform: uppercase;
  text-align: right;
  margin-block-start: 20px;

  @media (max-width: 576px) {
    order: 5;
  }
}

.flatpickr-calendar .clear-button .filter-btn {
  color: var(--c-primary);
  border: none;
}

.event-dot {
  width: 8px;
  height: 8px;
  background-color: rgb(0, 25, 104, 0.2);
  border-radius: 50%;
  display: inline-block;
  margin: 2px;
  position: absolute;
  inset-block-start: 36px;
}

.endRange .event-dot,
.inRange .event-dot,
.selected .event-dot {
  background-color: rgb(255, 255, 255, 0.75);
}

.flatpickr-innerContainer {
  @media (max-width: 576px) {
    max-width: 90%;
    order: 3;
    margin: auto;
  }
}