/* Banner — kit «LidFly — Бренд и UI Kit 2026», component «Banner» (page 06).
   A short notice inside a card or block: icon, title, text and optional actions.
   Tones: .lf-banner--warning, --info, --danger, --success; without a tone it is neutral.
   Markup: .lf-banner > svg.lf-icon + .lf-banner__body > .lf-banner__title + .lf-banner__text [+ .lf-banner__actions]
   Actions may also follow the body as a sibling; on a phone they move under the text. */
.lf-banner {
  --lf-banner-bg: var(--status-neutral-bg);
  --lf-banner-border: var(--status-neutral-border);
  --lf-banner-accent: var(--color-text-muted);
  --lf-banner-title: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--lf-banner-border);
  border-radius: var(--radius-medium);
  background: var(--lf-banner-bg);
  color: var(--color-text);
}
.lf-banner > .lf-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--lf-banner-accent);
}
.lf-banner__body {
  display: grid;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}
.lf-banner__title {
  font-weight: 600;
  color: var(--lf-banner-title);
}
.lf-banner__text {
  margin: 0;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}
.lf-banner__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.lf-banner__body > .lf-banner__actions { margin-top: var(--space-2); }
.lf-banner--warning {
  --lf-banner-bg: var(--status-warning-bg);
  --lf-banner-border: var(--status-warning-border);
  --lf-banner-accent: var(--status-warning-dot);
  --lf-banner-title: var(--status-warning-fg);
}
.lf-banner--info {
  --lf-banner-bg: var(--color-info-bg);
  --lf-banner-border: var(--color-info-border);
  --lf-banner-accent: var(--color-info-accent);
  --lf-banner-title: var(--color-info-ink);
}
.lf-banner--danger {
  --lf-banner-bg: var(--status-danger-bg);
  --lf-banner-border: var(--status-danger-border);
  --lf-banner-accent: var(--status-danger-dot);
  --lf-banner-title: var(--status-danger-fg);
}
.lf-banner--success {
  --lf-banner-bg: var(--status-success-bg);
  --lf-banner-border: var(--status-success-border);
  --lf-banner-accent: var(--status-success-dot);
  --lf-banner-title: var(--status-success-fg);
}
@media (max-width: 640px) {
  .lf-banner { flex-wrap: wrap; }
  .lf-banner > .lf-banner__actions { flex-basis: 100%; padding-left: calc(20px + var(--space-3)); }
}