/* ── Flatpickr Custom Theme — FazTrip ─────────────────────────────────────
   Estilo tipo booking/travel: 2 meses en desktop, colores de marca.
   Depende de: flatpickr.min.css
───────────────────────────────────────────────────────────────────────── */

/* Contenedor principal */
.flatpickr-calendar {
  background: #ffffff;
  border: none;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(10, 27, 61, 0.18), 0 6px 20px rgba(10, 27, 61, 0.08);
  font-family: inherit;
  padding: 20px 24px 24px;
  width: 320px;
  animation: ft-cal-in 0.18s ease;
}

@keyframes ft-cal-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dos meses en desktop */
.flatpickr-calendar.multiMonth {
  width: 648px;
}

/* Quitar la flechita del popover */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none;
}

/* ── Cabecera del mes ──────────────────────────────────────────── */
.flatpickr-months {
  padding-bottom: 12px;
  align-items: center;
}

.flatpickr-month {
  height: auto;
  color: #0A1B3D;
}

.flatpickr-current-month {
  font-size: 15px;
  font-weight: 700;
  color: #0A1B3D;
  padding: 0;
  position: static;
  width: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: 15px;
  font-weight: 700;
  color: #0A1B3D;
  background: transparent;
  border: none;
  padding: 0 2px;
  appearance: none;
  -webkit-appearance: none;
}

.flatpickr-current-month input.cur-year {
  font-size: 15px;
  font-weight: 700;
  color: #0A1B3D;
}

/* Flechas prev/next */
.flatpickr-prev-month,
.flatpickr-next-month {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #0A1B3D;
  transition: background 0.15s;
  top: 16px;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: #f3f4f6;
  color: #0A1B3D;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: #0A1B3D;
  width: 14px;
  height: 14px;
}

/* ── Nombres de días ───────────────────────────────────────────── */
.flatpickr-weekdays {
  margin-bottom: 4px;
}

span.flatpickr-weekday {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Separador entre meses (multiMonth) ───────────────────────── */
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer + .dayContainer {
  border-left: 1px solid #f0f0f5;
  box-shadow: none;
}

/* ── Celdas de día ─────────────────────────────────────────────── */
.flatpickr-day {
  height: 38px;
  line-height: 38px;
  max-width: 38px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  color: #0A1B3D;
  border: none;
  transition: background 0.12s, color 0.12s;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #fef2f3;
  color: #CE1126;
  border: none;
}

/* Hoy */
.flatpickr-day.today {
  border: 2px solid #CE1126 !important;
  font-weight: 700;
  color: #CE1126;
  background: transparent;
}

.flatpickr-day.today:hover {
  background: #CE1126;
  color: #fff;
}

/* Días fuera del mes */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #d1d5db;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: #f9fafb;
  color: #d1d5db;
}

/* Días deshabilitados */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  background: transparent;
  color: #e5e7eb;
  cursor: not-allowed;
}

/* ── Rango seleccionado ────────────────────────────────────────── */

/* Días dentro del rango */
.flatpickr-day.inRange {
  background: rgba(206, 17, 38, 0.09);
  border-color: transparent;
  border-radius: 0;
  color: #0A1B3D;
  box-shadow: -5px 0 0 rgba(206, 17, 38, 0.09), 5px 0 0 rgba(206, 17, 38, 0.09);
}

/* Inicio y fin del rango: círculo rojo sólido */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #CE1126;
  border-color: #CE1126;
  color: #fff;
  border-radius: 50%;
  font-weight: 600;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #a90e1f;
  border-color: #a90e1f;
  color: #fff;
}

/* Transición continua: fondo del rango llega hasta el círculo */
.flatpickr-day.startRange.inRange,
.flatpickr-day.startRange + .inRange,
.flatpickr-day.endRange.inRange {
  border-radius: 50%;
}

.flatpickr-day.startRange {
  box-shadow: 5px 0 0 rgba(206, 17, 38, 0.09);
}

.flatpickr-day.endRange {
  box-shadow: -5px 0 0 rgba(206, 17, 38, 0.09);
}

/* Un solo día seleccionado */
.flatpickr-day.selected.startRange.endRange {
  box-shadow: none;
}

/* ── Responsive: 1 mes en móvil ───────────────────────────────── */
@media (max-width: 767px) {
  .flatpickr-calendar.multiMonth {
    width: 300px;
  }

  .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer + .dayContainer {
    display: none;
  }

  .flatpickr-calendar.multiMonth .flatpickr-months .flatpickr-month:last-child {
    display: none;
  }
}