.date-input-wrapper {
    position: relative;
    width: 100%;
  }
  .date-input-wrapper .form-input {
     
    padding-right: 50px;
  }
  
   
.date-input-wrapper--year .form-input {
    padding-right: 48px;
}

  
  .date-input-wrapper__icon,
  .date-input-wrapper__steppers {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    height: 100%;
  }
  .date-input-wrapper__steppers {
    gap: 4px;
  }
  .date-input-wrapper__icon .stepper-btn,
  .date-input-wrapper__steppers .stepper-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    font-weight: 500;
    font-size: 20px;
    padding: 10px;
    color: var(--primary-blue-500);
  }

  .date-input-wrapper__icon .stepper-btn{
    border-left: 1px solid var(--neutral-gray-100);
    border-radius: 0 10px 10px 0;
  }
  .date-input-wrapper__icon .stepper-btn img{
    width: 18px;
  }

  /* Year picker dropdown */
  .year-picker-dropdown{
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--neutral-gray-100);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 8px;
    display: none;
    max-height: 240px;
    overflow-y: auto;
    min-width: 160px;
    z-index: 20;
  }
  .year-picker-dropdown.is-open{
    display: block;
  }
  .year-picker-dropdown__item{
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    color: var(--primary-blue-900);
    transition: background-color .15s ease, color .15s ease;
  }
  .year-picker-dropdown__item:hover,
  .year-picker-dropdown__item:focus-visible{
    background: var(--primary-blue-50);
    color: var(--primary-blue-600);
    outline: none;
  }
  
  
   
  .flatpickr-calendar {
    background: var(--white);
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 320px;
    padding: 12px;
  }
  
   
  .flatpickr-months {
    display: flex;
    align-items: center;
    padding: 12px 4px;
  }
  .flatpickr-month {
    flex-grow: 1;
    text-align: center;
  }
  .flatpickr-current-month {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-blue-900);
  }
  .flatpickr-prev-month, .flatpickr-next-month {
    padding: 4px;
  }
  .flatpickr-prev-month svg, .flatpickr-next-month svg {
    width: 16px; height: 16px;
    fill: var(--primary-blue-700);
  }
  
   
  .flatpickr-weekdaycontainer {
    padding: 0 4px;
  }
  .flatpickr-weekday {
    color: var(--neutral-gray-600);
    font-size: 12px;
    font-weight: 500;
  }
  
   
  .dayContainer {
    padding: 0 4px;
  }
  .flatpickr-day {
    font-size: 14px;
    color: var(--primary-blue-900);
    border: none;
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 50%;
  }
  
   
  .flatpickr-day:hover,
  .flatpickr-day.today {
    background-color: var(--light-blue-100);
    color: var(--primary-blue-500);
  }
  
   
  .flatpickr-day.selected {
    background-color: var(--primary-blue-500);
    color: var(--white);
  }
  
   
  .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
    color: var(--neutral-gray-400);
  }