/**
 * Voltr {% date_input %} — scoped styles for pages without company_base.css.
 * Company portal already styles input[type="date"] globally; this file is for
 * public/volunteer layouts that only load Flatpickr + this sheet.
 */

.voltr-date-field input[type="date"],
.voltr-date-field .form-control[type="date"],
.voltr-date-field input.flatpickr-input,
.voltr-date-field .form-control.flatpickr-input {
  border: 1px solid rgba(107, 33, 168, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
  color: #6b21a8;
  font-weight: 600;
  padding-right: 2.6rem;
}

.voltr-date-field .flatpickr-wrapper {
  position: relative;
  display: block;
}

.voltr-date-field .date-input-wrap {
  position: relative;
  display: block;
}

.voltr-date-field .date-input-wrap .flatpickr-input,
.voltr-date-field .date-input-wrap input[type="date"] {
  padding-right: 2.8rem !important;
}

.voltr-date-field .date-input-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #6b21a8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.voltr-date-field .date-input-icon i {
  font-size: 1.05rem;
}

.voltr-date-field input[type="date"]:focus,
.voltr-date-field .form-control[type="date"]:focus,
.voltr-date-field input.flatpickr-input:focus,
.voltr-date-field .form-control.flatpickr-input:focus {
  border-color: #6b21a8;
  box-shadow: 0 0 0 3px rgba(107, 33, 168, 0.14);
}

.flatpickr-calendar {
  border: 1px solid rgba(107, 33, 168, 0.18);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(30, 27, 75, 0.16);
  font-size: 0.9rem;
  color: #4b5563;
}

.flatpickr-months,
.flatpickr-weekdays {
  background: linear-gradient(135deg, #6b21a8 0%, #be185d 100%);
}

.flatpickr-current-month {
  background: transparent !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.flatpickr-current-month .numInputWrapper {
  background: transparent !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays {
  height: 40px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-weekday,
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.flatpickr-current-month .cur-month,
.flatpickr-current-month .numInputWrapper input.cur-year,
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  color: #fff !important;
  fill: #fff !important;
}

.flatpickr-current-month .numInputWrapper input.cur-year {
  background: transparent !important;
}

.flatpickr-weekdays .flatpickr-weekday {
  color: #fff !important;
}

.flatpickr-day {
  color: #4b5563;
  border-radius: 8px;
  height: 34px;
  line-height: 34px;
  max-width: 34px;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #b6b2c3;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  border-color: transparent;
  color: #fff;
}

.flatpickr-day.today {
  border-color: #7c3aed;
  color: #6b21a8;
}

.flatpickr-day:hover {
  background: rgba(124, 58, 237, 0.1);
}