/**
 * ORENO - Premium Flatpickr Theme
 * Consolidated & Cleaned version (cloned from AssurPro Solutions)
 */

/* --- Main Container --- */
.flatpickr-calendar {
  box-sizing: border-box !important;
  width: 320px !important;
  border-radius: 15px !important;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.08) !important;
  background: #FFFFFF !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-family: "Inter", sans-serif !important;
  border: none !important;
}

/* --- Header: Toolbar Style --- */
.flatpickr-months {
  background: #FFFFFF !important;
  border-bottom: 1px solid #efefef !important;
  padding: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.flatpickr-rContainer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.flatpickr-current-month {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #19181a !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.flatpickr-monthDropdown-months {
  font-weight: 700 !important;
  color: #19181a !important;
}

.flatpickr-prev-month, .flatpickr-next-month {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  background: #f8f7fa !important;
  border: none !important;
  border-radius: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: auto !important;
  margin: 0 !important;
  transition: 0.2s !important;
}

.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
  background-color: #f8f7fa !important;
  color: var(--brand-primary) !important;
  box-shadow: inset 0px 0px 0px 1.5px var(--brand-primary) !important;
}

/* --- Weekdays --- */
.flatpickr-weekdays {
  padding: 12px 18px 0 !important;
  background: transparent !important;
}

span.flatpickr-weekday {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #19181a !important;
}

/* --- Days Grid --- */
.flatpickr-innerContainer {
  padding: 0 18px 12px !important;
}

.dayContainer {
  padding: 0 !important;
  gap: 2px !important;
  width: 294px !important;
  min-width: 294px !important;
}

.flatpickr-day {
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;
  max-width: 40px !important;
  border-radius: 15px !important;
  border: none !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: #19181a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: 0.3s !important;
}

/* Today State */
.flatpickr-day.today {
  border: 1.5px solid var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

/* Selected State */
.flatpickr-day.selected {
  background-color: var(--brand-primary) !important;
  color: #f8f7fa !important;
  font-weight: 700 !important;
  box-shadow: 0px 4px 10px color-mix(in srgb, var(--brand-primary) 35%, transparent) !important;
}

/* Hover State */
.flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) {
  background-color: #f8f7fa !important;
  color: var(--brand-primary) !important;
  box-shadow: inset 0px 0px 0px 1.5px var(--brand-primary) !important;
}

/* Disabled/Other Month */
.flatpickr-day.flatpickr-disabled, 
.flatpickr-day.prevMonthDay, 
.flatpickr-day.nextMonthDay {
  color: #a5a5a5 !important;
  background: transparent !important;
}

/* --- Time Selection (Horizontal) --- */
.flatpickr-time {
  border-top: 1px solid #efefef !important;
  background: #f8f7fa !important;
  padding: 20px 15px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important; /* Allow label to wrap but inputs stay side-by-side */
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  height: auto !important;
  max-height: none !important;
}

.flatpickr-time::before {
  content: "CHOISIR L'HEURE" !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #64748b !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.05em !important;
}

.flatpickr-time .numInputWrapper {
  flex: 0 0 65px !important;
  height: 45px !important;
  background: #FFFFFF !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important;
}

.flatpickr-time input {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #19181a !important;
}

.flatpickr-time .flatpickr-time-separator {
  flex: 0 0 auto !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
}

.flatpickr-time .numInputWrapper:hover {
  box-shadow: inset 0px 0px 0px 1.5px var(--brand-primary) !important;
}

.flatpickr-time .numInputWrapper span {
  display: none !important;
}

/* --- Footer Buttons (Year/Today) --- */
.goto-buttons {
  border-top: 1px solid #efefef !important;
  padding: 12px 8px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #FFFFFF !important;
}

.btn {
  background: #f8f7fa !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  color: #19181a !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  transition: 0.3s !important;
  cursor: pointer !important;
}

.btn:hover {
  background-color: #f8f7fa !important;
  color: var(--brand-primary) !important;
  box-shadow: inset 0px 0px 0px 1.5px var(--brand-primary) !important;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .flatpickr-calendar {
    width: 280px !important; /* Smaller but still fixed */
  }
  
  .dayContainer {
    width: 260px !important;
    min-width: 260px !important;
  }

  .flatpickr-day {
    width: 35px !important;
    height: 35px !important;
  }

  /* Keep side-by-side if possible but allow scroll */
  .flex-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
}


/* --- Inline Mode (Calendly Style) --- */
.flatpickr-calendar.inline {
  box-shadow: none !important;
  border: none !important;
  width: 100% !important;
  max-width: 450px !important;
  background: transparent !important;
}

.flatpickr-calendar.inline .flatpickr-innerContainer {
  padding: 0 !important;
}

.flatpickr-calendar.inline .dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}/* --- Time Slots (Calendly Style) --- */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

#time-slots-side {
  max-height: 500px;
}

.slot-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
}

/* Animations extra */
.animate-in {
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.slide-in-from-right {
  animation-name: slideInFromRight;
}
@keyframes slideInFromRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .flatpickr-calendar {
    width: 100% !important;
    min-width: 100% !important;
  }
  
  #calendar-side {
    padding: 20px 10px !important;
  }

  #time-slots-side {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #efefef !important;
    padding: 20px !important;
  }

  .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    justify-content: space-around !important;
  }
  
  .flatpickr-day {
    width: calc(100% / 7.5) !important;
    max-width: none !important;
    aspect-ratio: 1;
    height: auto !important;
  }
}

/* Animation */
.flatpickr-calendar.animate.open {
  animation: calendarFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes calendarFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}