/* Общая кнопка «Сохранить» внизу экрана (замечание владельца 2026-09-29).
   Появляется, когда в карточке есть что сохранить, — как нижняя полоса
   «Сохранить / Отменить» в карточке Битрикса. Жёлтая — цвет выбрала владелец. */

.save-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  /* Над липкой шапкой карточки и выпадашками, под модальными окнами. */
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 8px 10px 8px 16px;
  background: var(--crm-surface, #e9f1f9);
  border: 1px solid var(--crm-border, #bed2e4);
  border-radius: var(--crm-radius-lg, 12px);
  box-shadow: 0 6px 24px rgba(21, 40, 60, .22);
}

.save-bar[hidden] {
  display: none;
}

.save-bar__note {
  font-size: 13px;
  color: var(--crm-text-muted, #616b78);
  white-space: nowrap;
}

.save-bar__save {
  height: 38px;
  padding: 0 26px;
  border: 1px solid #e0b000;
  border-radius: var(--crm-radius, 8px);
  background: #ffc900;
  /* Тёмная надпись на жёлтом: белая на нём не читается. */
  color: #1e2937;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
}

.save-bar__save:hover:not(:disabled) {
  background: #ffb800;
}

.save-bar__save:disabled {
  opacity: .7;
  cursor: progress;
}

.save-bar__cancel {
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--crm-radius, 8px);
  background: none;
  color: var(--crm-text-muted, #616b78);
  font-size: 13px;
  cursor: pointer;
}

.save-bar__cancel:hover {
  color: var(--crm-text, #333b44);
  background: var(--crm-field-bg, #d6e6f3);
}

/* Полоса не должна закрывать последние строки страницы. */
body.has-save-bar {
  padding-bottom: 72px;
}

@media (max-width: 640px) {
  .save-bar__note {
    display: none;
  }
}