/**
 * WebDproc — только эти кнопки на сайте (плюс модификаторы размера).
 *
 * База: .wd-btn
 *
 * Варианты (ровно один из списка):
 *   --primary       главное действие (бренд-синий)
 *   --secondary     вторичное / отмена (серый)
 *   --danger        удаление и разрушительные действия
 *   --success       подтверждение / позитивное действие (зелёный)
 *   --outline       контур, нейтральный вторичный CTA
 *   --outline-danger контур «опасного» действия (редко)
 *   --link          текстовая кнопка без «рамки»
 *
 * Модификаторы (несколько можно комбинировать):
 *   --sm | --lg     размер
 *   --block         на всю ширину
 *   --prominent     акцентный CTA (uppercase + как у старых hero-кнопок)
 *   --icon          круглая иконка-кнопка
 *   --icon-sm       маленькая круглая иконка
 *   --icon-lg       крупная круглая иконка (+)
 */

.wd-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin: 0;
    min-height: var(--wd-btn-height);
    padding: 0 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--wd-btn-radius);
    background: transparent;
    font-family: var(--wd-font-sans);
    font-size: 14px;
    font-weight: var(--wd-btn-font-weight);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.wd-btn:focus {
    outline: none;
}

.wd-btn:focus-visible {
    outline: 2px solid var(--wd-btn-primary-bg);
    outline-offset: 2px;
}

/* Текст и иконки на заливке: явный цвет с варианта (не inherit — иначе <a> тянет цвет родителя и теряется контраст) */
.wd-btn svg {
    flex-shrink: 0;
    fill: currentColor;
}

.wd-btn i[class*="fa-"],
.wd-btn .svg-icon {
    color: currentColor;
}

.wd-btn:disabled,
.wd-btn[aria-disabled="true"] {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* Размеры */
.wd-btn--sm {
    min-height: var(--wd-btn-height-sm);
    padding: 0 0.75rem;
    font-size: 0.875rem;
}

.wd-btn--lg {
    min-height: 48px;
    padding: 0 1.5rem;
    font-size: 1rem;
}

.wd-btn--block {
    display: flex;
    width: 100%;
}

/* FAQ и др.: Bootstrap .text-left задаёт выравнивание текста, но flex всё ещё центрировал содержимое */
.wd-btn.text-left {
    justify-content: flex-start;
    text-align: left;
}

/* Мобильные: крупнее кнопки отправки в формах (удобное нажатие) */
@media (max-width: 767.98px) {
    .wd-form .wd-btn,
    .wd-form__actions .wd-btn {
        min-height: 48px;
        padding-left: 1.35rem;
        padding-right: 1.35rem;
        font-size: 16px;
    }

    .wd-form .wd-btn.wd-btn--sm {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 15px;
    }

    .wd-form .wd-btn.wd-btn--lg {
        min-height: 52px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        font-size: 1.0625rem;
    }
}

/* Варианты */
.wd-btn--primary {
    background-color: var(--wd-btn-primary-bg);
    border-color: var(--wd-btn-primary-bg);
    color: var(--wd-btn-primary-fg);
}

.wd-btn--primary:hover,
.wd-btn--primary:focus-visible {
    background-color: var(--wd-btn-primary-bg-hover);
    border-color: var(--wd-btn-primary-bg-hover);
    color: var(--wd-btn-primary-fg);
}

.wd-btn--secondary {
    background-color: var(--wd-btn-secondary-bg);
    border-color: var(--wd-btn-secondary-bg);
    color: var(--wd-btn-secondary-fg);
}

.wd-btn--secondary:hover,
.wd-btn--secondary:focus-visible {
    background-color: var(--wd-btn-secondary-bg-hover);
    border-color: var(--wd-btn-secondary-bg-hover);
    color: var(--wd-btn-secondary-fg);
}

.wd-btn--danger {
    background-color: var(--wd-btn-danger-bg);
    border-color: var(--wd-btn-danger-bg);
    color: var(--wd-btn-danger-fg);
}

.wd-btn--danger:hover,
.wd-btn--danger:focus-visible {
    background-color: var(--wd-btn-danger-bg-hover);
    border-color: var(--wd-btn-danger-bg-hover);
    color: var(--wd-btn-danger-fg);
}

.wd-btn--success {
    background-color: var(--wd-btn-success-bg);
    border-color: var(--wd-btn-success-bg);
    color: var(--wd-btn-success-fg);
}

.wd-btn--success:hover,
.wd-btn--success:focus-visible {
    background-color: var(--wd-btn-success-bg-hover);
    border-color: var(--wd-btn-success-bg-hover);
    color: var(--wd-btn-success-fg);
}

.wd-btn--outline {
    background-color: transparent;
    border-color: #6c757d;
    color: #6c757d;
}

.wd-btn--outline:hover,
.wd-btn--outline:focus-visible {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.wd-btn--outline-danger {
    background-color: transparent;
    border-color: var(--wd-btn-danger-bg);
    color: var(--wd-btn-danger-bg);
}

.wd-btn--outline-danger:hover,
.wd-btn--outline-danger:focus-visible {
    background-color: var(--wd-btn-danger-bg);
    border-color: var(--wd-btn-danger-bg);
    color: var(--wd-btn-danger-fg);
}

.wd-btn--link {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--wd-btn-primary-bg);
    font-weight: inherit;
    text-decoration: none;
}

.wd-btn--link:hover,
.wd-btn--link:focus-visible {
    color: var(--wd-btn-primary-bg-hover);
    text-decoration: underline;
}

.wd-btn--link:focus-visible {
    outline: 2px solid var(--wd-btn-primary-bg);
    outline-offset: 2px;
}

/* Акцентные hero / лидерборд CTA */
.wd-btn--prominent {
    min-width: var(--wd-btn-min-width-marketing);
    min-height: var(--wd-btn-height);
    padding: 0 1.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wd-btn--primary.wd-btn--prominent {
    background-color: var(--wd-btn-primary-bg);
    border-color: var(--wd-btn-primary-bg);
    color: var(--wd-btn-primary-fg);
}

.wd-btn--primary.wd-btn--prominent:hover,
.wd-btn--primary.wd-btn--prominent:focus-visible {
    background-color: var(--wd-btn-primary-bg-hover);
    border-color: var(--wd-btn-primary-bg-hover);
    color: var(--wd-btn-primary-fg);
}

/* Круглые кнопки (дашборд, таблицы) */
.wd-btn--icon {
    width: 2.5rem;
    height: 2.5rem;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
}

.wd-btn--icon-sm {
    width: 2rem;
    height: 2rem;
    min-height: 0;
    font-size: 12px;
}

.wd-btn--icon-lg {
    width: 3rem;
    height: 3rem;
    min-height: 0;
    font-size: 1.25rem;
}