/* ═══════════════════════════════════════════════════
   Flatpickr — Cozycore Theme for Casita on the Park
   Overrides the default flatpickr styles
   ═══════════════════════════════════════════════════ */

.flatpickr-calendar {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #FAFAF8;
  border: 2px solid #d4e2db;
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(62, 47, 35, 0.06),
    0 12px 28px rgba(62, 47, 35, 0.12);
  width: 320px;
  padding: 8px;
}

.flatpickr-calendar.inline {
  box-shadow: none;
  border: 2px solid #d4e2db;
}

/* ── Month navigation ─────────────────────────────── */
.flatpickr-months {
  padding: 4px 0 8px;
}

.flatpickr-months .flatpickr-month {
  height: 36px;
}

.flatpickr-current-month {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  color: #2C3E5A;
  font-weight: 400;
  padding-top: 4px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  color: #2C3E5A;
  background: transparent;
}

.flatpickr-current-month input.cur-year {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  color: #2C3E5A;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: #8E9B97;
  padding: 8px 12px;
  transition: fill 0.2s;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  fill: #2C3E5A;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 12px;
  height: 12px;
}

/* ── Weekday headers ──────────────────────────────── */
.flatpickr-weekdays {
  padding: 0 4px;
}

span.flatpickr-weekday {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #8E9B97;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Day cells ────────────────────────────────────── */
.flatpickr-days {
  padding: 0 4px 4px;
}

.dayContainer {
  min-width: 296px;
  max-width: 296px;
}

.flatpickr-day {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #3E2F23;
  border-radius: 8px;
  height: 40px;
  line-height: 40px;
  max-width: 40px;
  margin: 1px;
  border: none;
  transition: background 0.15s, color 0.15s;
}

.flatpickr-day:hover {
  background: #eef3f0;
  border: none;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #D94040;
  color: white;
  border: none;
  font-weight: 600;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #c13636;
  border: none;
}

/* Range between start and end */
.flatpickr-day.inRange {
  background: #f5d6d6;
  color: #3E2F23;
  border: none;
  box-shadow: -5px 0 0 #f5d6d6, 5px 0 0 #f5d6d6;
}

.flatpickr-day.inRange:hover {
  background: #eebfbf;
  border: none;
}

/* Today */
.flatpickr-day.today {
  border: 2px solid #C4955A;
}

.flatpickr-day.today:hover {
  background: #e8d5b8;
  border: 2px solid #C4955A;
}

.flatpickr-day.today.selected {
  border: none;
}

/* Disabled / blocked dates */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #c8cfcc;
  background: transparent;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Previous/next month days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #c8cfcc;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: #eef3f0;
}

/* ── Range mode specific ──────────────────────────── */
.flatpickr-day.startRange {
  border-radius: 8px 0 0 8px;
}

.flatpickr-day.endRange {
  border-radius: 0 8px 8px 0;
}

.flatpickr-day.startRange.endRange {
  border-radius: 8px;
}

/* ── Booking card integration ─────────────────────── */
.booking-field .flatpickr-input {
  cursor: pointer;
}

.booking-field .flatpickr-input::placeholder {
  color: #8E9B97;
}

/* ── Calendar section inline picker ───────────────── */
.calendar-inline-wrap {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.calendar-inline-wrap .flatpickr-calendar {
  border: 2px solid #d4e2db;
  border-radius: 12px;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 480px) {
  .flatpickr-calendar {
    width: 100%;
    min-width: 280px;
  }

  .dayContainer {
    min-width: 100%;
    max-width: 100%;
  }
}