/* ==========================================================================
   Buttons — единый источник правды для всех кнопок проекта
   ========================================================================== */

/* ===== Base button ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 12px;
  border: 0;

  background: var(--mkf-accent, #2563eb);
  color: #fff;

  font-weight: 700;
  line-height: 1;

  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    0 2px 6px rgba(0,0,0,.08);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform .12s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.btn:hover{
  transform: translateY(-1px);
  filter: brightness(.96);

  box-shadow:
    0 14px 32px rgba(0,0,0,.12),
    0 4px 10px rgba(0,0,0,.10);
}

.btn:active{
  transform: translateY(0);
  filter: brightness(.90);

  box-shadow:
    0 8px 18px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.10);
}

.btn:focus-visible{
  outline: none;
  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    0 2px 6px rgba(0,0,0,.08),
    0 0 0 3px rgba(255,255,255,.85),
    0 0 0 6px rgba(37,99,235,.35);
}

.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow:
    0 6px 14px rgba(0,0,0,.08),
    0 2px 6px rgba(0,0,0,.06);
}

/* ===== Variants ===== */

/* Ghost — вторичная кнопка */
.btn--ghost{
  background: transparent;
  border: 1px solid var(--mkf-border);
  color: var(--mkf-on-surface);

  box-shadow: none;

  transition:
    transform .12s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.btn--ghost:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.03);
  border-color: color-mix(in srgb, var(--mkf-border) 70%, #000);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.btn--ghost:active{
  transform: translateY(0);
  background: rgba(0,0,0,.05);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

.btn--ghost:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.85),
    0 0 0 6px rgba(37,99,235,.25);
}

/* Outline — контурная (если используешь) */
.btn-outline{
  background: transparent;
  border: 1px solid var(--mkf-accent, #2563eb);
  color: var(--mkf-accent, #2563eb);
  box-shadow: none;

  transition:
    transform .12s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.btn-outline:hover{
  transform: translateY(-1px);
  background: rgba(37,99,235,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.btn-outline:active{
  transform: translateY(0);
  background: rgba(37,99,235,.10);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

.btn-outline:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.85),
    0 0 0 6px rgba(37,99,235,.25);
}

/* Убираем подчеркивание для ссылок-кнопок */
a.btn{
  text-decoration: none;
  color: inherit;
}
a.btn:hover{
  text-decoration: none;
}

/* Белый текст для основной ссылки-кнопки */
a.btn:not(.btn--ghost):not(.btn-outline){
  color: #fff;
}