/* Kymma Dual Date Picker */
.kymma-dual-datepicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.kymma-dp-field {
  flex: 1;
}

.kymma-dp-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kymma-dp-field label i {
  color: #00B4D8;
  margin-right: 4px;
}

.kymma-dp-input,
.kymma-dp-field .flatpickr-input + input.form-control {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.kymma-dp-input:focus,
.kymma-dp-field .flatpickr-input + input.form-control:focus {
  border-color: #00B4D8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1);
}

.kymma-dp-separator {
  padding-top: 20px;
  color: #999;
  font-size: 14px;
}

/* Flatpickr theme overrides for Kymma */
.flatpickr-calendar {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border: 1px solid #e0e0e0;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #00B4D8 !important;
  border-color: #00B4D8 !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #0096b7 !important;
  border-color: #0096b7 !important;
}

.flatpickr-day.inRange {
  background: rgba(0, 180, 216, 0.1) !important;
  border-color: rgba(0, 180, 216, 0.1) !important;
  box-shadow: -5px 0 0 rgba(0, 180, 216, 0.1), 5px 0 0 rgba(0, 180, 216, 0.1) !important;
}

.flatpickr-day.today {
  border-color: #00B4D8;
}

.flatpickr-day.today:hover {
  background: rgba(0, 180, 216, 0.1);
  border-color: #00B4D8;
}

/* Saturday highlight for charter transition days */
.flatpickr-day.kymma-saturday {
  font-weight: 700;
}

.flatpickr-day.kymma-saturday::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: #00B4D8;
  border-radius: 50%;
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}

/* Partially booked date indicators */
.flatpickr-day.kymma-checkout-only {
  background: linear-gradient(135deg, transparent 50%, #ffe0e0 50%) !important;
}

.flatpickr-day.kymma-checkin-only {
  background: linear-gradient(135deg, #ffe0e0 50%, transparent 50%) !important;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .kymma-dual-datepicker {
    flex-direction: column;
    gap: 10px;
  }

  .kymma-dp-separator {
    display: none;
  }

  .kymma-dp-field {
    width: 100%;
  }
}