/* =============================================================================
 * БЭКАП / канон: кнопка «Сохранить» и confirm «Да» / «Нет»
 * Классы: .okkwork-btn-108_1988.okkwork-save-btn
 * HTML:   <button type="button" class="okkwork-btn-108_1988 okkwork-save-btn">Сохранить</button>
 *
 * Снимок: 2026-06-16
 * Источник: stage2-surface-unify.css (вариант 14 — градиент зелёный → синий)
 * Подключать ПОСЛЕ okkwork-stagecards-next.css и okkwork-modal-frame.css
 * ============================================================================= */

:root {
  --okkwork-save-btn-grad: linear-gradient(135deg, #2eb97a 0%, #0658a2 100%);
  --okkwork-save-btn-shadow: 0 8px 20px rgba(6, 88, 162, 0.22);
}

/* —— «Сохранить» —— */
.okkwork-save-btn-backup,
html body .okkwork-save-wrap .okkwork-btn-108_1988.okkwork-save-btn,
html body .okkwork-save-btn.okkwork-btn-108_1988,
html body button.okkwork-save-btn,
.okkwork-save-wrap .okkwork-btn-108_1988.okkwork-save-btn,
.okkwork-save-btn.okkwork-btn-108_1988,
button.okkwork-save-btn {
  appearance: none;
  margin: 0;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  white-space: nowrap;
  border: none !important;
  border-radius: 12px !important;
  background: var(--okkwork-save-btn-grad) !important;
  background-color: transparent !important;
  background-image: var(--okkwork-save-btn-grad) !important;
  color: rgba(255, 255, 255, 1) !important;
  font-size: 13px;
  font-family: "Rubik-SemiBold", "Rubik-Medium", Rubik, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.25;
  text-align: center;
  box-shadow: var(--okkwork-save-btn-shadow) !important;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.okkwork-save-btn-backup:hover,
html body .okkwork-save-wrap .okkwork-btn-108_1988.okkwork-save-btn:hover,
html body .okkwork-save-btn.okkwork-btn-108_1988:hover,
html body button.okkwork-save-btn:hover,
.okkwork-save-wrap .okkwork-btn-108_1988.okkwork-save-btn:hover,
.okkwork-save-btn.okkwork-btn-108_1988:hover,
button.okkwork-save-btn:hover {
  background: var(--okkwork-save-btn-grad) !important;
  background-image: var(--okkwork-save-btn-grad) !important;
  filter: brightness(1.05) !important;
  transform: translateY(-1px);
}

.okkwork-save-btn-backup:active,
html body .okkwork-save-wrap .okkwork-btn-108_1988.okkwork-save-btn:active,
html body .okkwork-save-btn.okkwork-btn-108_1988:active,
html body button.okkwork-save-btn:active,
.okkwork-save-wrap .okkwork-btn-108_1988.okkwork-save-btn:active,
.okkwork-save-btn.okkwork-btn-108_1988:active,
button.okkwork-save-btn:active {
  background: var(--okkwork-save-btn-grad) !important;
  background-image: var(--okkwork-save-btn-grad) !important;
  filter: brightness(0.97) !important;
  transform: translateY(0);
}

.okkwork-save-btn-backup:focus-visible,
html body .okkwork-save-wrap .okkwork-btn-108_1988.okkwork-save-btn:focus-visible,
html body .okkwork-save-btn.okkwork-btn-108_1988:focus-visible,
html body button.okkwork-save-btn:focus-visible,
.okkwork-save-wrap .okkwork-btn-108_1988.okkwork-save-btn:focus-visible,
.okkwork-save-btn.okkwork-btn-108_1988:focus-visible,
button.okkwork-save-btn:focus-visible {
  outline: 2px solid rgba(6, 88, 162, 0.55) !important;
  outline-offset: 2px;
}

/* —— Этап 3: «Выбрать» — тот же градиент, что у «Сохранить» —— */
html body .okkwork-scoring-select-btn.okkwork-save-btn,
html body .okkwork-scoring-select-btn.okkwork-btn-108_1988.okkwork-save-btn,
html body .okkwork-scoring-select-btn.okkwork-save-btn.Pixso-frame-219_565,
html body .okkwork-scoring-select-btn.okkwork-save-btn.Pixso-frame-219_584,
html body .okkwork-scoring-select-btn.okkwork-save-btn.Pixso-frame-219_470,
.okkwork-scoring-select-btn.okkwork-save-btn.okkwork-btn-108_1988 {
  appearance: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  white-space: nowrap !important;
  border: none !important;
  border-radius: 12px !important;
  background: var(--okkwork-save-btn-grad) !important;
  background-color: transparent !important;
  background-image: var(--okkwork-save-btn-grad) !important;
  color: rgba(255, 255, 255, 1) !important;
  font-size: 13px !important;
  font-family: "Rubik-SemiBold", "Rubik-Medium", Rubik, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
  text-align: center !important;
  box-shadow: var(--okkwork-save-btn-shadow) !important;
  cursor: pointer !important;
  transition: transform 120ms ease, filter 120ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}

html body .okkwork-scoring-select-btn.okkwork-save-btn:hover,
html body .okkwork-scoring-select-btn.okkwork-btn-108_1988.okkwork-save-btn:hover,
.okkwork-scoring-select-btn.okkwork-save-btn.okkwork-btn-108_1988:hover {
  background: var(--okkwork-save-btn-grad) !important;
  background-image: var(--okkwork-save-btn-grad) !important;
  filter: brightness(1.05) !important;
  transform: translateY(-1px);
}

html body .okkwork-scoring-card.okkwork-scoring-card--selected .okkwork-scoring-select-btn.okkwork-save-btn,
.okkwork-scoring-card.okkwork-scoring-card--selected .okkwork-scoring-select-btn.okkwork-save-btn.okkwork-btn-108_1988 {
  background: var(--okkwork-save-btn-grad) !important;
  background-image: var(--okkwork-save-btn-grad) !important;
  filter: brightness(1.08) !important;
}

html body .okkwork-scoring-select-btn.okkwork-save-btn:active,
html body .okkwork-scoring-select-btn.okkwork-btn-108_1988.okkwork-save-btn:active,
.okkwork-scoring-select-btn.okkwork-save-btn.okkwork-btn-108_1988:active {
  background: var(--okkwork-save-btn-grad) !important;
  background-image: var(--okkwork-save-btn-grad) !important;
  filter: brightness(0.97) !important;
  transform: translateY(0);
}

html body .okkwork-scoring-select-btn.okkwork-save-btn:focus-visible,
html body .okkwork-scoring-select-btn.okkwork-btn-108_1988.okkwork-save-btn:focus-visible,
.okkwork-scoring-select-btn.okkwork-save-btn.okkwork-btn-108_1988:focus-visible {
  outline: 2px solid rgba(6, 88, 162, 0.55) !important;
  outline-offset: 2px !important;
}

html body .okkwork-scoring-select-btn.okkwork-save-btn .Pixso-paragraph-219_566,
.okkwork-scoring-select-btn.okkwork-save-btn .Pixso-paragraph-219_566 {
  color: rgba(255, 255, 255, 1) !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 0 0 20px !important;
}

html body .okkwork-scoring-select-btn.okkwork-save-btn .Pixso-paragraph-219_585,
html body .okkwork-scoring-select-btn.okkwork-save-btn .Pixso-paragraph-219_471,
.okkwork-scoring-select-btn.okkwork-save-btn .Pixso-paragraph-219_585,
.okkwork-scoring-select-btn.okkwork-save-btn .Pixso-paragraph-219_471 {
  color: rgba(255, 255, 255, 1) !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
}

/* —— Confirm «Да» / «Нет» — только stage 1 (stage 2/4 — okkwork-modal-frame.css) —— */
.okkwork-stage1-confirm__actions button {
  appearance: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  white-space: nowrap !important;
  font-family: "Rubik-SemiBold", "Rubik-Medium", Rubik, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
  border-radius: 12px !important;
  border: none !important;
  background: var(--okkwork-save-btn-grad) !important;
  background-color: transparent !important;
  background-image: var(--okkwork-save-btn-grad) !important;
  color: rgba(255, 255, 255, 1) !important;
  cursor: pointer !important;
  box-shadow: var(--okkwork-save-btn-shadow) !important;
  transition: transform 120ms ease, filter 120ms ease !important;
}

.okkwork-stage1-confirm__actions button:hover {
  background: var(--okkwork-save-btn-grad) !important;
  background-image: var(--okkwork-save-btn-grad) !important;
  filter: brightness(1.05) !important;
  transform: translateY(-1px);
}

.okkwork-stage1-confirm__actions button:active {
  background: var(--okkwork-save-btn-grad) !important;
  background-image: var(--okkwork-save-btn-grad) !important;
  filter: brightness(0.97) !important;
  transform: translateY(0);
}

.okkwork-stage1-confirm__actions button:focus-visible {
  outline: 2px solid rgba(6, 88, 162, 0.55) !important;
  outline-offset: 2px !important;
}