/* ============================================================
   Component: Кнопки в новой стилистике (BEM)
   Классы: .gk-btn, модификаторы --primary/--secondary/--ghost/--cta
   ============================================================ */

.gk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gk-space-2);
    height: 50px;
    padding: 0 var(--gk-space-6);
    border-radius: var(--gk-radius-lg);
    font-size: var(--gk-font-size-body);
    font-weight: var(--gk-font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--gk-transition-default);
    background: var(--gk-color-brand);
    color: var(--gk-color-text-inverse);
    box-shadow: var(--gk-shadow-button);
}

.gk-btn:hover {
    background: var(--gk-color-brand-hover);
    transform: translateY(-2px);
    box-shadow: var(--gk-shadow-button-hover);
}

.gk-btn--secondary {
    background: var(--gk-color-surface-soft);
    color: var(--gk-color-text-body);
    box-shadow: none;
}

.gk-btn--secondary:hover {
    background: var(--gk-color-surface-soft-hover);
    color: var(--gk-color-brand);
    transform: none;
    box-shadow: none;
}

.gk-btn--ghost {
    background: none;
    color: var(--gk-color-accent-blue);
    box-shadow: none;
    height: auto;
    padding: 0;
}

.gk-btn--ghost:hover {
    background: none;
    color: var(--gk-color-accent-blue-hover);
    gap: var(--gk-space-3);
    transform: none;
    box-shadow: none;
}

/* --- Legacy bridge: .create-btn — основная кнопка действия в личном кабинете --- */
.create-btn.btn,
a.create-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 var(--gk-space-6);
    border-radius: var(--gk-radius-lg);
    background: var(--gk-color-brand);
    color: var(--gk-color-text-inverse) !important;
    font-size: var(--gk-font-size-body);
    font-weight: var(--gk-font-weight-semibold);
    text-decoration: none;
    border: none;
    box-shadow: var(--gk-shadow-button);
    transition: all var(--gk-transition-default);
    margin-bottom: var(--gk-space-10);
}

.create-btn.btn:hover,
a.create-btn:hover {
    background: var(--gk-color-brand-hover);
    transform: translateY(-2px);
    box-shadow: var(--gk-shadow-button-hover);
}

.create-btn img {
    filter: brightness(0) invert(1);
}