/* ==========================================================================
   Calendário Inline e Estilização Customizada do Flatpickr (Minimalista e Sem Sombras)
   ========================================================================== */

.imovel-calendar-section {
  width: 100%;
}

.calendar-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.inline-calendar-container {
  width: 100%;
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-start;
}

/* Limpar datas */
.calendar-footer-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1023px) {
  .calendar-footer-actions {
    justify-content: flex-start;
  }
}

.btn-clear-dates {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-dark);
  cursor: pointer;
}

.btn-clear-dates:hover {
  color: var(--color-text-dark);
}

.flatpickr-calendar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 684px !important; /* Aumentado de 650px para 684px */
  font-family: var(--font-body) !important;
}

/* Afastar os meses no modo multi-month e remover o divisor vertical */
.flatpickr-calendar.multiMonth {
  width: 684px !important; /* Espaço exato para 2 meses de 322px + gap de 40px (2.5rem) = 684px */
  max-width: 700px !important;
}

.flatpickr-calendar.multiMonth .flatpickr-days {
  width: 684px !important; /* Sobrescreve o inline width do JS */
  display: flex !important;
}

/* Setas de navegação de meses (Anterior e Próximo) - Estilo Airbnb */
.flatpickr-prev-month,
.flatpickr-next-month {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  width: 14px !important;
  height: 14px !important;
  fill: var(--color-text-dark) !important;
  transition: fill 0.2s ease !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--color-text-dark) !important;
}

/* Força a visibilidade dos seletores mesmo quando desativados, aplicando a cor de indisponível */
.flatpickr-prev-month.flatpickr-disabled,
.flatpickr-next-month.flatpickr-disabled {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: none !important;
  cursor: default !important;
}

.flatpickr-prev-month.flatpickr-disabled svg,
.flatpickr-next-month.flatpickr-disabled svg {
  fill: var(--color-text-light) !important;
}

/* Forçar largura fixa de 322px em cada bloco para aproximar as datas lateralmente */
.flatpickr-calendar.multiMonth .flatpickr-month {
  min-width: 322px !important;
  max-width: 322px !important;
}
.flatpickr-calendar.multiMonth .flatpickr-weekdaycontainer {
  min-width: 322px !important;
  max-width: 322px !important;
}
.flatpickr-calendar.multiMonth .dayContainer {
  min-width: 322px !important;
  max-width: 322px !important;
}

/* Margem de afastamento entre os blocos (mês esquerdo e mês direito) */
.flatpickr-calendar.multiMonth .flatpickr-month + .flatpickr-month {
  margin-left: 40px !important; /* 2.5rem */
}
.flatpickr-calendar.multiMonth
  .flatpickr-weekdaycontainer
  + .flatpickr-weekdaycontainer {
  margin-left: 40px !important; /* 2.5rem */
}
.flatpickr-calendar.multiMonth .dayContainer + .dayContainer {
  margin-left: 40px !important; /* 2.5rem */
  border-left: none !important;
  box-shadow: none !important; /* Remove o divisor vertical */
}

/* Caso a versão do Flatpickr renderize os spans de dias da semana soltos de 1 a 14 */
.flatpickr-calendar.multiMonth .flatpickr-weekdays {
  margin-bottom: 2px;
  display: flex !important;
  width: 100% !important;
}
.flatpickr-calendar.multiMonth .flatpickr-weekday {
  min-width: 46px !important; /* Aumentado de 42.28px para 46px (322px / 7 = 46px) */
  max-width: 46px !important;
}
.flatpickr-calendar.multiMonth .flatpickr-weekday:nth-child(8) {
  margin-left: 40px !important; /* 2.5rem */
}

.flatpickr-months {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.flatpickr-month {
  color: var(--color-text-dark) !important;
  font-weight: 500 !important;
  fill: var(--color-text-dark) !important;
}

.flatpickr-current-month input.cur-year {
  font-weight: 500 !important;
}

.flatpickr-current-month {
  font-size: 1rem !important;
  pointer-events: none !important;
}

/* Oculta setas verticais de ano no Flatpickr */
.flatpickr-current-month .numInputWrapper span {
  display: none !important;
}

/* Insere a preposição " de " entre o nome do mês e o ano */
.flatpickr-current-month .cur-month::after {
  content: " de" !important;
}

.flatpickr-weekday {
  font-weight: 500 !important;
  color: var(
    --color-text-muted
  ) !important; /* Mesma cor da data indisponível */
  font-size: 14px !important; /* 2px maior que o padrão */
}

.flatpickr-day {
  color: var(--color-text-dark) !important;
  font-weight: 500 !important;
  border-radius: 50%;
  border: 1px solid transparent !important;
  margin: 1px auto !important;
  max-width: 42px !important; /* Retornado para 42px elegante */
  height: 42px !important;
  line-height: 40px !important;
  font-size: 14px;
}

.flatpickr-day:hover {
  background: transparent !important;
  border-color: var(--color-text-dark) !important;
  color: var(--color-text-dark) !important;
  border-radius: 50% !important;
}

/* Check-in e Checkout (Bolinhas) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  color: var(--white) !important;
  border-color: transparent !important;
}

.flatpickr-day.startRange {
  background:
    radial-gradient(circle, var(--color-primary) 19px, transparent 20px)
      no-repeat center,
    linear-gradient(to right, transparent 50%, var(--white) 50%) !important;
  background-size:
    42px 42px,
    100% 100% !important;
  border-radius: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Check-out: bolinha marrom centralizada e fundo cinza claro estendendo-se para a esquerda */
.flatpickr-day.endRange {
  background:
    radial-gradient(circle, var(--color-primary) 19px, transparent 20px)
      no-repeat center,
    linear-gradient(to right, var(--white) 50%, transparent 50%) !important;
  background-size:
    42px 42px,
    100% 100% !important;
  border-radius: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Se for data única selecionada, remove os fundos laterais */
.flatpickr-day.startRange.endRange {
  background: radial-gradient(
      circle,
      var(--color-primary) 19px,
      transparent 20px
    )
    no-repeat center !important;
  background-size: 42px 42px !important;
  border-radius: 50% !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Intervalo Selecionado (Bloco Reto Contínuo) */
.flatpickr-day.inRange {
  background: var(
    --color-bg-canvas
  ) !important; /* Cor de destaque institucional sutil */
  color: var(--color-text-dark) !important; /* Texto escuro do dia */
  border-radius: 0 !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Desativa a sombra de conexão padrão do Flatpickr que vaza ao selecionar datas adjacentes */
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  box-shadow: none !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--color-text-light) !important;
  background: transparent !important;
  cursor: default !important; 
  border-radius: 50% !important;
}

@media (max-width: 1023px) {
  .inline-calendar-container {
    justify-content: center !important;
  }

  .flatpickr-calendar {
    width: 100% !important;
    max-width: 343px !important;
    margin: 0 auto !important;
  }

  .flatpickr-months {
    max-width: 343px !important;
    margin: 0 auto 1rem auto !important;
  }

  .flatpickr-month {
    min-width: 100% !important;
    max-width: 343px !important;
  }

  .flatpickr-weekdaycontainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 343px !important;
  }

  .flatpickr-weekdays {
    width: 100% !important;
    max-width: 343px !important;
    display: flex !important;
  }

  .flatpickr-weekday {
    min-width: 49px !important; /* 343px / 7 = 49px */
    max-width: 49px !important;
  }

  .flatpickr-days {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 343px !important;
    display: flex !important;
  }

  .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 343px !important;
  }

  .flatpickr-day {
    max-width: 49px !important;
    height: 49px !important;
    line-height: 47px !important;
  }

  .flatpickr-day.startRange,
  .flatpickr-day.endRange {
    background-size: 49px 49px, 100% 100% !important;
  }

  .flatpickr-day.startRange.endRange {
    background-size: 49px 49px !important;
  }

  /* Oculta os dias do mês passado e do próximo mês no calendário mobile */
  .flatpickr-day.prevMonthDay,
  .flatpickr-day.nextMonthDay {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}