/* #region zone:flights.v3-hover-style — การ์ดวันและข้อมูลเสริมเมื่อชี้ */
.f3-popover {
  position: absolute;
  z-index: 18;
  width: min(272px, calc(100vw - 48px));
  padding: var(--u-space-3) 14px;
  pointer-events: none;
  font-size: var(--u-text-sm);
  line-height: 1.45;
}
.f3-popover-leg {
  display: grid;
  gap: 2px;
  padding-block: var(--u-space-2);
  margin-top: var(--u-space-2);
  border-top: 1px solid var(--f3-line);
}
.f3-popover-leg b {
  font-weight: 500;
}
.f3-hovering .f3-duty {
  opacity: 0.3;
}
.f3-hovering .f3-duty.f3-highlight {
  opacity: 1;
  height: 6px;
}
.f3-timeline-extra {
  display: grid;
  grid-template-rows: 1fr;
}
.f3-timeline-extra > span {
  overflow: hidden;
}
@media (hover: hover) {
  .f3-card:hover {
    box-shadow: 0 14px 30px -20px rgb(0 0 0 / 0.35);
    transform: translateY(-1px);
  }
  .f3-trip-row:hover {
    background: var(--f3-bg);
    transform: translateY(-1px);
  }
  .f3-timeline-extra {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  .f3-timeline-leg:hover .f3-timeline-extra,
  .f3-timeline-leg:focus-visible .f3-timeline-extra {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}
/* #endregion */

/* #region zone:flights.v3-motion-style — รูปแบบเคลื่อนไหวและโหมดลดการเคลื่อนไหว */
.f3-card,
.f3-trip-row {
  transition:
    box-shadow 250ms var(--f3-ease),
    transform 250ms var(--f3-ease);
}
.f3-timeline-extra {
  transition:
    grid-template-rows 280ms var(--f3-ease),
    opacity 200ms;
}
.f3-popover {
  animation: f3-pop-in 240ms var(--f3-ease);
}
@keyframes f3-pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
.f3-badge {
  display: inline-grid;
  overflow: hidden;
}
.f3-badge > span {
  grid-area: 1 / 1;
}
.f3-number-in {
  animation: f3-number-in 320ms var(--f3-ease);
}
.f3-number-out {
  animation: f3-number-out 320ms var(--f3-ease) forwards;
}
@keyframes f3-number-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes f3-number-out {
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
.f3-ring svg {
  transform-origin: 50% 4px;
  animation: f3-wiggle 700ms var(--f3-ease);
}
@keyframes f3-wiggle {
  15% {
    rotate: 14deg;
  }
  30% {
    rotate: -12deg;
  }
  45% {
    rotate: 8deg;
  }
  60% {
    rotate: -5deg;
  }
  75% {
    rotate: 2deg;
  }
  100% {
    rotate: 0deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ui='v3'] *,
  [data-ui='v3'] *::before,
  [data-ui='v3'] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .f3-card:hover,
  .f3-trip-row:hover,
  .u-btn:active {
    transform: none;
  }
}
/* #endregion */