@use "../../../styles/colors" as colors;
@use "../../../styles/variables" as vars;
@use "../../../styles/fonts" as fonts;

// Summary block (badges + share/buy + last-update + full-route timeline)
// renders just below the day-tabs sticky strip. The block itself is one
// `.frame` card; we add internal vertical spacing between the badges
// row and the timeline so the two don't touch.
.schedule-details__summary {
  display: flex;
  flex-direction: column;
  gap: vars.$space-l;
  margin-bottom: vars.$space-l;

  &-row {
    display: flex;
    align-items: flex-start;
    gap: vars.$space-l;
    flex-wrap: wrap;
  }

  // For connecting itineraries we render one DetailsHeaderBadge per
  // flight in a horizontal row (SU 6188 + SU 6341 with their airline
  // logos), matching Angular's `<details-header-badges>` (plural).
  &-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: vars.$space-l;
    flex: 1 1 auto;
  }

  // Right-side cluster: share + buy buttons stacked above the
  // "Последнее обновление: …" line, mirroring Angular's
  // `.schedule-details-header-right` layout.
  &-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: vars.$space-s;
    flex: 0 0 auto;
  }
}

.schedule-details {
  display: flex;
  flex-direction: column;
  // Each flight card and the Пересадка strip are siblings inside
  // `.schedule-details`. The gap between them shows the dark page
  // background (the `.frame` cards themselves are white), which is
  // what produces the "three separate blocks" look.
  gap: vars.$space-l;

  // Standalone TransferBar between two flight frames — round its
  // corners the same way Angular's `.transfer-bar--separated` does,
  // since it's no longer wrapped in a white card.
  > .transfer-bar {
    border-radius: vars.$border-radius;
  }

  &__header-left {
    display: flex;
    flex-direction: column;
    gap: vars.$space-m;
  }

  // `Вернуться к Расписанию` back link mirrors Angular's
  // `details-back` button. White-translucent pill on the dark
  // header strip.
  &__back {
    display: inline-flex;
    align-items: center;
    gap: vars.$space-s2;
    padding: vars.$space-m 16px;
    background: rgba(255, 255, 255, 0.92);
    color: colors.$blue;
    border-radius: vars.$border-radius;
    font-size: fonts.$font-size-m;
    font-weight: fonts.$font-medium;
    text-decoration: none;
    transition: background-color 0.2s ease;

    &:hover { background: colors.$white; }
  }

  &__back-arrow {
    font-size: fonts.$font-size-l;
    line-height: 1;
  }

  &__flight {
    display: flex;
    flex-direction: column;
    background: colors.$white;
  }

  &__header {
    display: flex;
    align-items: baseline;
    gap: vars.$space-m;
    padding: vars.$space-l vars.$space-xl 0;
  }

  &__flight-number {
    font-size: fonts.$font-size-xl2;
    font-weight: fonts.$font-medium;
    color: colors.$text-color;
    margin: 0;
  }

  &__status {
    color: colors.$light-gray;
    font-size: fonts.$font-size-m;
  }

  &--error,
  &--not-found {
    padding: vars.$space-xl;
    color: colors.$red;
    text-align: center;
  }
}
