/* Itinerary offer overlay styles.
   Extracted from styles.css (base + mobile media queries).
   Load after styles.css to preserve cascade. */

#itineraryOverlay.itinerary-overlay {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
#itineraryOverlay.itinerary-overlay:not(.hidden) {
  visibility: visible;
}
#itineraryOverlay.itinerary-overlay.is-open {
  opacity: 1;
}
#itineraryOverlay .itinerary-sheet {
  transform: translateY(16px) scale(0.988);
  opacity: 0;
  transition:
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.24s ease;
}
#itineraryOverlay.itinerary-overlay.is-open .itinerary-sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#itineraryOverlay .timeline-segment {
  opacity: 0;
  transform: translateY(6px);
  animation: itinerarySegmentEnter 0.28s ease forwards;
  animation-delay: calc(var(--segment-enter-index, 0) * 36ms);
}
@keyframes itinerarySegmentEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .itinerary-overlay {
    padding: 8px;
  }
  .itinerary-sheet,
  .duffel-checkout-sheet,
  .duffel-payment-sheet {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 20px;
    padding: 14px;
  }
}

@media (max-width: 640px) {
  .itinerary-sheet {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 18px;
    padding: 12px;
  }
}

@media (max-width: 768px) {
  .itinerary-sheet-head:not(.itinerary-offer-sheet-head) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #itineraryOverlay .itinerary-offer-sheet-head {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 10px;
  }
}