/* #region zone:flights.v3-detail-style — รายละเอียดใช้ระยะและปุ่มร่วมกับรุ่นสาม */
[data-ui='v3'] #detail {
  font: 15px/1.5 var(--f3-sans);
}
[data-ui='v3'] #summary {
  padding: 20px;
  gap: var(--u-space-4);
  background: var(--f3-card);
  border: 0;
  box-shadow: none;
  border-radius: var(--u-radius-card);
}
[data-ui='v3'] .sum-head {
  grid-template-columns: var(--f3-logo-large) minmax(0, 1fr);
  column-gap: var(--f3-logo-gap);
}
[data-ui='v3'] #d-logo .airline-mark {
  width: var(--f3-logo-large);
  height: var(--f3-logo-large);
}
[data-ui='v3'] #d-logo {
  width: var(--f3-logo-large);
  height: var(--f3-logo-large);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
}
html[data-ui='v3'] #summary .sum-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--u-space-2);
}
[data-ui='v3'] #flight-alert-detail {
  order: 1;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  margin-bottom: 0;
  align-self: center;
}
[data-ui='v3'] .sum-head #d-status {
  display: inline-flex;
  align-self: center;
}
[data-ui='v3'] #flight-alert-detail svg {
  width: 20px;
  height: 20px;
}
[data-ui='v3'] #d-flight,
[data-ui='v3'] .summary .times b,
[data-ui='v3'] .stat b,
[data-ui='v3'] .phase time {
  font-family: var(--f3-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
[data-ui='v3'] #d-flight {
  font-size: var(--u-text-xl);
  font-weight: 600;
}
[data-ui='v3'] .summary .route b {
  font: 300 36px/1.1 var(--f3-sans);
  letter-spacing: -0.04em;
}
[data-ui='v3'] .summary .times b {
  font-size: var(--u-text-2xl);
}
[data-ui='v3'] .sum-ident small,
[data-ui='v3'] .sum-meaning,
[data-ui='v3'] .summary .times :is(small, em),
[data-ui='v3'] .summary .route small {
  font-size: var(--u-text-sm);
  color: var(--f3-muted);
}
[data-ui='v3'] #d-status i {
  display: none;
}
[data-ui='v3'] #detail #back {
  grid-column: 1 / -1;
  justify-self: start;
  position: static;
  width: auto;
  height: 44px;
  padding: 0 18px;
  white-space: nowrap;
}
[data-ui='v3'] .f3-detail-footer {
  grid-column: 1 / -1;
}
[data-ui='v3'] #detail #back .back-text {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}
[data-ui='v3'] .globe-info {
  top: auto;
  bottom: 16px;
  right: 16px;
}
[data-ui='v3'] .ontime-stats {
  color: var(--f3-muted);
  font-size: var(--u-text-xs);
}
[data-ui='v3'] .ontime-stats p {
  font-weight: 400;
}
[data-ui='v3'] .summary .f3-route-note {
  margin: 0;
  font-size: var(--u-text-sm);
  color: var(--f3-muted);
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
[data-ui='v3'] #details-later {
  color: var(--f3-muted);
  font-size: var(--u-text-sm);
}
[data-ui='v3'] #globe-info {
  background: var(--f3-pop);
  color: var(--f3-ink);
}
@media (min-width: 1024px) {
  [data-ui='v3'] #detail {
    grid-template-areas:
      'back back'
      'summary hero'
      'stats hero'
      'later later'
      'details details'
      'footer footer';
    grid-template-rows: auto auto 1fr auto auto auto;
  }
  [data-ui='v3'] #back {
    grid-area: back;
  }
  [data-ui='v3'] .f3-detail-footer {
    grid-area: footer;
  }
}
/* #endregion */