/* ============================================================
   Business PC V2 — BUTTONS (PHASE 3)
   Единая система кнопок: Primary / Secondary + состояния
   normal/hover/active/focus-visible/disabled + размер sm.
   Базовый класс `.btn` зарезервирован системой; страничные кнопки
   (карточки, корзина, админка, модалки) переведены на .btn--*
   (модификаторы зон см. ниже — 1:1 с прежними стилями).
   Подключать после ui/icons.css, до site.css.
   ============================================================ */

/* Базовый класс. Модификаторы: .btn--primary|secondary.
   Размер: .btn--sm (по умолчанию md). */
.btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 11px 16px;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    /* Рамка видна всегда: владелец попросил убрать «прозрачные» границы,
       заменив на --color-border. Токен --color-border определён в ui/tokens.css. */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.3s ease,
        opacity 0.25s ease,
        transform 0.2s ease;
}
.btn:active { transform: translateY(0); }

.btn--sm { padding: 6px 12px; font-size: var(--font-size-sm); }

/* Размер/макет под кнопки страничных зон (1:1 с legacy):
   --caps — заглавные + разрядка (карточка, корзина, модалки);
   --block — на всю ширину контейнера;
   --pad-md / --pad-lg — чуть иные отступы под корзину/модалку. */
.btn--caps {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.btn--block { width: 100%; }
.btn--grow { flex: 1 1 auto; }
.btn--pad-xs { padding: 11px 14px; font-size: 0.8rem; }
.btn--pad-md { padding: 11px 16px; font-size: 0.82rem; }
.btn--pad-lg { padding: 14px 16px; font-size: 0.85rem; }
.btn--pad-xl { padding: 12px 24px; font-size: 0.82rem; }

/* КАНОН CTA «В корзину» и кнопки сравнения (один вид везде).
   Цвета через fallback: витрина --nv-*, иначе базовые.
   Страницы НЕ переопределяют — только раскладка родителя. */
.btn--tall {
    height: 46px;
    padding: 0 20px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 10px;
}

/* Иконка-квадрат (сравнение на карточке) */
.btn--icon-lg {
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 10px;
}
.btn--icon-lg svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Иконка, заливающаяся при наведении/в добавленном состоянии
   (кнопка сравнения — КАНОН, один вид везде). */
.btn--icon-fill {
    background: var(--nv-panel, var(--color-surface));
    color: var(--nv-tx-2, var(--color-text));
    border-color: var(--nv-line, var(--color-primary));
}
.btn--icon-fill:hover {
    background: var(--nv-ink, var(--color-primary));
    color: var(--nv-on-ink, var(--color-bg));
    border-color: var(--nv-ink, var(--color-text));
    transform: translateY(-1px);
}
.btn--icon-fill:active { transform: translateY(0); }
.btn.btn--icon-fill.is-added {
    background: var(--nv-ink, var(--color-primary));
    color: var(--nv-on-ink, var(--color-bg));
    border-color: var(--nv-ink, var(--color-text));
}
.btn.btn--icon-fill.is-added:hover { background: var(--nv-ink-hover, var(--color-primary-hover)); }

/* Текстовая ссылка-кнопка («Все характеристики», КАНОН) */
.btn--text {
    align-self: flex-start;
    margin-top: 14px;
    padding: 0;
    gap: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--nv-tx-2, var(--color-text-secondary));
    background: transparent;
    border: 0;
    border-radius: 0;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.btn--text:hover {
    color: var(--nv-tx, var(--color-text));
    text-decoration: none;
}
.btn--text:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}
.btn--text svg { width: 12px; height: 12px; }

/* Эффекты наведений (1:1 с legacy):
   --fade — плавное осветление (кнопки корзины/админки);
   --shadow — подъём с тенью (CT-кнопки на пустых состояниях). */
.btn--fade:hover { opacity: 0.85; }
.btn--shadow:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}

/* Нажатие: лёгкое сжатие (как в legacy site.css для главных кнопок) */
.btn--press:active { transform: scale(0.97); }

/* ---------- Админка (1:1 с прежними .btn-a / .login-btn) ---------- */
.btn--admin {
    gap: 6px;
    padding: 9px 16px;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
}
.btn--admin-sm { padding: 6px 12px; font-size: 0.74rem; }

.btn--admin-dark {
    background: var(--adm-rail, var(--black));
    border-color: var(--adm-rail, var(--black));
    color: #ffffff;
}
.btn--admin-dark:hover { background: #26272e; border-color: #26272e; color: #ffffff; }

.btn--admin-light {
    background: var(--adm-surface, var(--white));
    border-color: var(--adm-line, var(--border));
    color: var(--adm-ink, var(--black));
}
.btn--admin-light:hover { background: #f6f6f8; border-color: #d8d8de; }

.btn--admin-danger {
    background: var(--adm-surface, var(--white));
    border-color: var(--adm-line, var(--border));
    color: #c0392b;
}
.btn--admin-danger:hover { background: #fdf3f2; border-color: #f0c9c4; color: #a93226; }

/* ---------- Варианты (КАНОН) ---------- */
.btn--primary {
    color: var(--nv-on-ink, #ffffff);
    background: var(--nv-ink, var(--color-primary));
    border-color: var(--nv-ink, var(--color-primary));
}
.btn--primary:hover {
    background: var(--nv-ink-hover, var(--color-primary-hover));
    border-color: var(--nv-ink-hover, var(--color-primary-hover));
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(16, 17, 20, 0.22);
}
.btn--primary:active { transform: translateY(0); }
.btn--primary.is-added {
    background: var(--nv-panel, var(--color-surface));
    border-color: var(--nv-ink, var(--color-primary));
    color: var(--nv-ink, var(--color-primary));
}

.btn--secondary {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-border);
}
.btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---------- Состояния ---------- */
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* Добавлено в корзину/сравнение (state карточек) */
.btn.is-added {
    background: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-primary);
}