/**
 * Ninja Forms Integration Styles
 * CSS für Booking Notifications und Flatpickr Date Picker
 * 
 * @package UrlaubMitKids
 */

/* ===============================================
   Booking Notification Styling
   =============================================== */

.umk-booking-notification {
    background: #e5fdff !important;
    border-left: 4px solid #61aeb7 !important;
    padding: 15px !important;
    margin: 20px 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.umk-booking-notification h4 {
    color: #61aeb7 !important;
    margin: 0 0 10px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.umk-booking-notification p {
    color: #61aeb7 !important;
    margin: 5px 0 !important;
    font-size: 14px;
}

.umk-booking-notification p:last-child {
    color: #6c757d !important;
    font-size: 13px;
    margin-top: 10px !important;
}

/* Success message for transferred booking data */
.umk-booking-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #61aeb7;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.umk-booking-success h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.umk-booking-success p {
    margin: 5px 0;
}

/* Enhanced styling for auto-filled form fields */
.ninja-forms-field.umk-auto-filled {
    background-color: #f8f9fa;
    border-color: #61aeb7;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
}

/* ===============================================
   Flatpickr Customizations
   =============================================== */

/* Flatpickr: Monatsnamen oben sichtbar, aber keine Dropdowns/Eingaben */
.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month select {
  display: none !important;
}

.flatpickr-current-month .cur-month {
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  margin-top: 2px;
}

.flatpickr-rContainer {
    width: 100%;
}

/* Flatpickr Theme Colors */
.flatpickr-months .flatpickr-month, 
.flatpickr-weekdays, 
span.flatpickr-weekday, 
.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange, 
.flatpickr-day.selected.inRange, 
.flatpickr-day.startRange.inRange, 
.flatpickr-day.endRange.inRange, 
.flatpickr-day.selected:focus, 
.flatpickr-day.startRange:focus, 
.flatpickr-day.endRange:focus, 
.flatpickr-day.selected:hover, 
.flatpickr-day.startRange:hover, 
.flatpickr-day.endRange:hover, 
.flatpickr-day.selected.prevMonthDay, 
.flatpickr-day.startRange.prevMonthDay, 
.flatpickr-day.endRange.prevMonthDay, 
.flatpickr-day.selected.nextMonthDay, 
.flatpickr-day.startRange.nextMonthDay, 
.flatpickr-day.endRange.nextMonthDay {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ===============================================
   Mobile Responsive Styles
   =============================================== */

/* Mobile: Monatsnamen explizit anzeigen */
@media (max-width: 768px) {
  .flatpickr-current-month .cur-month {
    display: inline-block !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin: 0 !important;
    color: #333 !important;
  }
  
  .flatpickr-current-month {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* Responsive Flatpickr für Mobile */
@media (max-width: 768px) {
  .flatpickr-calendar {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 14px !important;
  }
  
  .flatpickr-calendar .flatpickr-month {
    height: auto !important;
    padding: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .flatpickr-calendar .flatpickr-current-month {
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
  }
  
  .flatpickr-calendar .flatpickr-current-month .cur-month {
    display: inline-block !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin: 0 !important;
  }
  
  .flatpickr-calendar .flatpickr-weekday {
    font-size: 12px !important;
    padding: 8px 0 !important;
  }
  
  .flatpickr-calendar .flatpickr-day {
    height: 32px !important;
    line-height: 32px !important;
    max-width: 32px !important;
    font-size: 13px !important;
  }
  
  .flatpickr-calendar .flatpickr-days {
    width: 100% !important;
  }
  
  /* Navigation Buttons größer auf Mobile */
  .flatpickr-calendar .flatpickr-prev-month,
  .flatpickr-calendar .flatpickr-next-month {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ===============================================
   Desktop Styles
   =============================================== */

/* Desktop: Zwei Monate nebeneinander optimieren */
@media (min-width: 769px) {
  .flatpickr-calendar.hasTime.noCalendar,
  .flatpickr-calendar.hasTime {
    width: auto !important;
  }
  
  .flatpickr-calendar .flatpickr-months {
    display: flex !important;
  }
  
  .flatpickr-calendar .flatpickr-month {
    flex: 1 !important;
  }
}