/* Tour booking sidebar refinements. Loaded after the main site stylesheet. */

.tour-sidebar {
  position: static;
  top: auto;
  max-height: none;
  overflow: visible;
}

.tour-booking-card {
  overflow: visible;
}

.tour-booking-card-header {
  position: relative;
  padding: 22px 24px 20px;
  border-bottom: 1px solid rgba(30, 29, 73, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  color: var(--primary-color);
  text-align: left;
}

.tour-booking-card-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--secondary-color);
}

.tour-booking-card-header h3 {
  color: var(--primary-color);
}

.tour-booking-eyebrow {
  color: var(--secondary-color);
}

.tour-price-badge {
  color: var(--primary-color);
}

.tour-price-badge span {
  color: var(--premium-muted, #667085);
  opacity: 1;
}

.tour-date-input-wrap {
  position: relative;
}

.tour-date-input-wrap .form-control,
.tour-date-input-wrap .flatpickr-input,
.tour-date-input-wrap .form-control.input {
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding-right: 44px;
  border: 1px solid var(--divider-color, #c7d1e5);
  border-radius: 8px;
  background: #fff;
  color: var(--primary-color);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
}

.tour-date-input-wrap .form-control::placeholder,
.tour-date-input-wrap .flatpickr-input::placeholder {
  color: #727d98;
  font-weight: 500;
}

.tour-date-input-wrap .form-control:focus,
.tour-date-input-wrap .flatpickr-input:focus,
.tour-date-input-wrap .form-control.input:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(181, 0, 97, 0.12);
}

.tour-date-input-wrap > i {
  position: absolute;
  right: 14px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--primary-color);
  pointer-events: none;
}

.tour-date-input-wrap .flatpickr-calendar {
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  min-width: 307px;
  z-index: 20;
}

.flatpickr-calendar {
  font-family: "Open Sans", Arial, sans-serif !important;
  border: 1px solid var(--divider-color, #c7d1e5) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(30, 29, 73, 0.08) !important;
  padding: 6px !important;
}

.tour-date-input-wrap .flatpickr-calendar,
.tour-date-input-wrap .flatpickr-rContainer,
.tour-date-input-wrap .flatpickr-weekdays,
.tour-date-input-wrap .flatpickr-weekdaycontainer,
.tour-date-input-wrap .flatpickr-days,
.tour-date-input-wrap .dayContainer {
  width: 100% !important;
  max-width: none !important;
}

.tour-date-input-wrap .dayContainer {
  min-width: 0 !important;
}

.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--primary-color) !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

.flatpickr-months .flatpickr-month {
  height: 44px;
  color: var(--primary-color);
}

.flatpickr-weekdays {
  background: transparent;
}

.dayContainer {
  justify-content: flex-start;
}

.tour-date-input-wrap .flatpickr-weekday {
  width: 14.2857% !important;
  max-width: none !important;
}

span.flatpickr-weekday {
  color: #727d98;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flatpickr-day {
  width: 14.2857%;
  max-width: none;
  height: 40px;
  flex-basis: 14.2857%;
  border-radius: 8px;
  color: var(--primary-color);
  font-weight: 600;
  line-height: 40px;
}

.flatpickr-day:hover {
  border-color: transparent;
  background: #eef3ff;
}

.flatpickr-day.today {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.flatpickr-day.selected,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover {
  border-color: var(--secondary-color) !important;
  background: var(--secondary-color) !important;
  color: #fff !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #c8ccd4;
  background: transparent;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: #4b5572;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--secondary-color);
}