/**
 * @file
 * Custom styles for Flatpickr date picker.
 */

/* Calendar container */
.flatpickr-calendar {
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  font-family: Ubuntu, sans-serif !important;
  padding-top: 20px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 20px !important;
  width: 100% !important;
  max-width: 320px !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Month header */
.flatpickr-months {
  background-color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  color: #0862AD !important;
  padding: 20px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}

/* Month dropdown */
.flatpickr-current-month {
  font-weight: bold !important;
  margin: 0 !important;
  text-align: left !important;
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  font-size: 16px !important;
  color: #0862AD !important;
  padding: 0 !important;
  position: static !important;
  height: auto !important;
  left: auto !important;
  transform: none !important;
}

/* Custom month-year display */
.month-year-display {
  font-weight: 700 !important;
  color: #0862AD !important;
  font-size: 16px !important;
  text-align: left !important;
}

/* Hide original elements */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
  display: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-weight: bold !important;
  font-size: 16px !important;
  color: #0862AD !important;
  padding: 0 !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border: none !important;
  background: transparent !important;
}

/* Hide year input */
.numInputWrapper {
  display: none !important;
}

/* Navigation arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  cursor: pointer !important;
  height: 30px !important;
  position: static !important;
  top: auto !important;
  width: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  color: #0862AD !important;
  font-size: 30px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  padding: 0 !important;
  fill: #0862AD !important;
  opacity: 1 !important;
}

/* Structure the header with month/year on left and arrows on right */
.flatpickr-month {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  position: relative !important;
  align-items: center !important;
}

/* Custom container for navigation buttons */
.nav-buttons-container {
  display: flex !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Custom navigation buttons */
.custom-nav-button {
  background: none !important;
  border: none !important;
  color: #0862AD !important;
  font-size: 24px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 10px !important;
  display: inline-block !important;
  text-align: center !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-weight: bold !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Hide original navigation buttons */
.flatpickr-months .flatpickr-prev-month:not(.custom-nav-button), 
.flatpickr-months .flatpickr-next-month:not(.custom-nav-button) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #0862AD !important;
  width: 12px !important;
  height: 6px !important;
}

/* Weekday headers */
.flatpickr-weekdays,
.flatpickr-weekdaycontainer {
  background-color: #fff !important;
  display: flex !important;
  width: 100% !important;
  padding: 0 !important;
  height: 40px !important;
  align-items: center !important;
}

span.flatpickr-weekday {
  color: #0862AD !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  padding: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: none !important;
  background-color: #fff !important;
  width: 38.67px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 2% !important;
  margin: 0 !important;
}

/* Days container */
.flatpickr-days {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  overflow: hidden !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-around !important;
  padding: 0 !important;
}

/* Date cells */
.flatpickr-day {
  background-color: transparent !important;
  border: none !important;
  color: #2E2E2E !important;
  display: inline-block !important;
  font-family: Ubuntu, sans-serif;
  font-weight: 400 !important;
  font-size: 14px !important;
  height: 32px !important;
  line-height: 19px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  width: 32px !important;
  border-radius: 0 !important;
  max-width: 32px !important;
  padding-top: 1.7% !important;
}

/* Hover state */
.flatpickr-day:hover {
  background-color: #f0f0f0 !important;
  color: #0862AD !important;
}

/* Selected date */
.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-color: #67B5FE !important;
  color: #fff !important;
  font-weight: 400 !important;
  border-color: #67B5FE !important;
  border-radius: 0 !important;
}

/* Today's date */
.flatpickr-day.today {
  border-color: #DCDFE2 !important;
  background-color: #DCDFE2 !important;
  color: #2E2E2E !important;
}

/* Days from other months */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #DCDFE2 !important;
  font-weight: 400 !important;
}

/* Custom buttons container */
.flatpickr-buttons {
  background-color: transparent !important;
  border-top: none !important;
  margin: 0 !important;
  padding: 15px !important;
  text-align: center !important;
  display: flex !important;
  justify-content: space-between !important;
}

/* Button styling - match the image design */
button.flatpickr-cancel {
  background-color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  color: #0862AD !important;
  cursor: pointer !important;
  font-size: 16px !important;
  margin: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 140% !important;
  min-width: 120px !important;
  text-transform: none !important;
  width: 45% !important;
  text-align: center !important;
}

button.flatpickr-save {
  background-color: #0862AD !important;
  border: none !important;
  border-top-right-radius: 20px !important;
  border-bottom-left-radius: 20px !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 16px !important;
  margin: 0 !important;
  padding-top: 12px !important;
  padding-right: 24px !important;
  padding-left: 24px !important;
  padding-bottom: 12px !important;
  min-width: 120px !important;
  text-transform: none !important;
  width: 45% !important;
  text-align: center !important;
}

.coh-style-webform input.sanepar-datepicker,
.coh-style-webform input[type="date"] {  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 4H5C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4Z' stroke='%230862AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 16H16.002V16.002H16V16Z' stroke='%230862AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16H12.002V16.002H12V16Z' stroke='%230862AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 16H8.002V16.002H8V16Z' stroke='%230862AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 12H16.002V12.002H16V12Z' stroke='%230862AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 12H12.002V12.002H12V12Z' stroke='%230862AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 12H8.002V12.002H8V12Z' stroke='%230862AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 8H20' stroke='%230862AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 2V4' stroke='%230862AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 2V4' stroke='%230862AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
}