/* app/static/css/button_system.css */
:root {
    --vida-blue: #0056b3;
    --vida-blue-hover: #004a9c;
    --vida-green: #0f7a35;
    --vida-green-hover: #0b7132;
    --vida-gray: #6c757d;
    --vida-gray-hover: #5d666e;
    --vida-light-blue: #e7f1ff;
    --vida-light-blue-hover: #d8eaff;
}

:where(.public-conversion-page, .auth-page, .client-panel-page) :where(.btn, .auth-submit, .btn-elite, .btn-detalhes-solid, .btn-voltar-painel, .btn-acao-notif),
.content-panel-dropdown .btn-abrir-painel-conteudo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-decoration: none !important;
}

:where(.public-conversion-page, .auth-page, .client-panel-page) :where(.btn, .auth-submit, .btn-elite, .btn-detalhes-solid, .btn-voltar-painel, .btn-acao-notif) :where(span, strong, small, i),
.content-panel-dropdown .btn-abrir-painel-conteudo :where(span, strong, small, i) {
    color: inherit !important;
}

:where(.public-conversion-page, .auth-page, .client-panel-page) :where(.btn, .auth-submit, .btn-elite, .btn-detalhes-solid, .btn-voltar-painel, .btn-acao-notif) svg,
.content-panel-dropdown .btn-abrir-painel-conteudo svg {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    vertical-align: middle !important;
}





.public-conversion-page :where(.btn-success, .btn-finalizar-leitura),
.fluxo-editorial-page #finalizar-registro-btn.btn-success {
    border-color: var(--vida-green) !important;
    background: var(--vida-green) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.public-conversion-page :where(.btn-success, .btn-finalizar-leitura):hover,
.public-conversion-page :where(.btn-success, .btn-finalizar-leitura):focus-visible,
.fluxo-editorial-page #finalizar-registro-btn.btn-success:hover,
.fluxo-editorial-page #finalizar-registro-btn.btn-success:focus-visible {
    border-color: var(--vida-green-hover) !important;
    background: var(--vida-green-hover) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.public-conversion-page :where(.btn-secondary, .btn-light-secondary) {
    color: #ffffff !important;
}

.public-conversion-page .btn-secondary {
    border-color: var(--vida-gray) !important;
    background: var(--vida-gray) !important;
}

.public-conversion-page .btn-secondary:hover,
.public-conversion-page .btn-secondary:focus-visible {
    border-color: var(--vida-gray-hover) !important;
    background: var(--vida-gray-hover) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.public-conversion-page .btn-add-painel-conteudo {
    border: 0 !important;
    background: var(--vida-light-blue) !important;
    color: var(--vida-blue) !important;
}

.public-conversion-page .btn-add-painel-conteudo:hover,
.public-conversion-page .btn-add-painel-conteudo:focus-visible {
    background: var(--vida-light-blue-hover) !important;
    color: var(--vida-blue) !important;
    opacity: 1 !important;
}

.fluxo-editorial-page .fluxo-editorial-progress .progress-fill,
.fluxo-editorial-page .fluxo-editorial-progress .step-indicator.active .step-circle,
.fluxo-editorial-page .fluxo-editorial-progress .step-indicator.completed .step-circle {
    background: var(--vida-blue) !important;
    background-color: var(--vida-blue) !important;
}

.fluxo-editorial-page .fluxo-editorial-progress .step-indicator.active .step-label,
.fluxo-editorial-page .fluxo-editorial-progress .step-indicator.completed .step-label {
    color: var(--vida-blue) !important;
}

.fluxo-editorial-page .payment-option-card:has(input[type="radio"]:checked),
.fluxo-editorial-page .payment-option-card:has(input:checked) {
    border-color: var(--vida-blue) !important;
    background: #0d7ff2 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.14) !important;
}

.fluxo-editorial-page .payment-option-card:has(input[type="radio"]:checked) :where(svg, i, span, strong),
.fluxo-editorial-page .payment-option-card:has(input:checked) :where(svg, i, span, strong) {
    color: #ffffff !important;
    stroke: currentColor !important;
}

.fluxo-editorial-page .navigation-buttons .btn::before,
.fluxo-editorial-page .navigation-buttons .btn::after {
    line-height: 1 !important;
    transform: translateY(-1px) !important;
}

.fluxo-editorial-page .btn[disabled],
.public-conversion-page .btn[disabled] {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}


/* =========================================================
   Padrão final de botões Vida Elite
   Conferir/finalizar/pagar: verde.
   Ações gerais: azul.
   Secundários: azul claro/branco.
   ========================================================= */
:root {
    --vida-btn-blue: #0056b3;
    --vida-btn-blue-hover: #004a9c;
    --vida-btn-green: #0f7a35;
    --vida-btn-green-hover: #0b7132;
    --vida-btn-light-blue: #e7f1ff;
    --vida-btn-light-blue-hover: #d8eaff;
    --vida-btn-radius: 5px;
    --vida-btn-height: 42px;
}

.public-conversion-page :where(
    .btn,
    .btn-empty-content-panel,
    .btn-ler-mais,
    .btn-conferir-agora,
    .btn-finalizar-leitura,
    .btn-add-painel-conteudo,
    .update-button,
    .filter-toggle-button,
    .quick-price-button,
    .clear-filters-inline
),
.auth-page :where(.auth-submit),
.client-panel-page :where(.btn, .btn-detalhes-solid, .btn-registro, .btn-promo, .btn-padrao, .btn-acao-notif) {
    min-height: var(--vida-btn-height) !important;
    padding: 0 16px !important;
    border-radius: var(--vida-btn-radius) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.public-conversion-page :where(.btn-block, .btn-conferir-agora, .btn-add-painel-conteudo, .btn-finalizar-leitura) {
    width: 100% !important;
}

/* Ação de compra/conversão */




/* Ação principal comum */
.public-conversion-page :where(
    .btn-primary,
    .btn-info,
    .btn-empty-content-panel,
    .btn-abrir-painel-conteudo,
    .btn-acompanhar-registro,
    .btn-copiar,
    .btn-ler-mais,
    .update-button,
    .filter-toggle-button.is-active,
    .quick-price-button.is-active
),
.auth-page .auth-submit,
.client-panel-page :where(.btn-save, .btn-detalhes-solid, .btn-registro, .btn-promo, .btn-padrao),
.content-panel-dropdown .btn-abrir-painel-conteudo {
    border: 0 !important;
    border-color: var(--vida-btn-blue) !important;
    background: var(--vida-btn-blue) !important;
    color: #ffffff !important;
}

.public-conversion-page :where(
    .btn-primary,
    .btn-info,
    .btn-empty-content-panel,
    .btn-abrir-painel-conteudo,
    .btn-acompanhar-registro,
    .btn-copiar,
    .btn-ler-mais,
    .update-button,
    .filter-toggle-button.is-active,
    .quick-price-button.is-active
):hover,
.public-conversion-page :where(
    .btn-primary,
    .btn-info,
    .btn-empty-content-panel,
    .btn-abrir-painel-conteudo,
    .btn-acompanhar-registro,
    .btn-copiar,
    .btn-ler-mais,
    .update-button,
    .filter-toggle-button.is-active,
    .quick-price-button.is-active
):focus-visible,
.auth-page .auth-submit:hover,
.auth-page .auth-submit:focus-visible,
.client-panel-page :where(.btn-save, .btn-detalhes-solid, .btn-registro, .btn-promo, .btn-padrao):hover,
.client-panel-page :where(.btn-save, .btn-detalhes-solid, .btn-registro, .btn-promo, .btn-padrao):focus-visible,
.content-panel-dropdown .btn-abrir-painel-conteudo:hover,
.content-panel-dropdown .btn-abrir-painel-conteudo:focus-visible {
    background: var(--vida-btn-blue-hover) !important;
    border-color: var(--vida-btn-blue-hover) !important;
    color: #ffffff !important;
}

/* Ação secundária */
.public-conversion-page :where(
    .btn-add-painel-conteudo,
    .btn-secondary,
    .btn-light-secondary,
    .btn-cadastrar-novo-endereco,
    .quick-price-button,
    .clear-filters-inline
) {
    border: 0 !important;
    background: var(--vida-btn-light-blue) !important;
    color: var(--vida-btn-blue) !important;
}

.public-conversion-page :where(
    .btn-add-painel-conteudo,
    .btn-secondary,
    .btn-light-secondary,
    .btn-cadastrar-novo-endereco,
    .quick-price-button,
    .clear-filters-inline
):hover,
.public-conversion-page :where(
    .btn-add-painel-conteudo,
    .btn-secondary,
    .btn-light-secondary,
    .btn-cadastrar-novo-endereco,
    .quick-price-button,
    .clear-filters-inline
):focus-visible {
    background: var(--vida-btn-light-blue-hover) !important;
    color: var(--vida-btn-blue) !important;
}

/* Ações neutras */
.public-conversion-page :where(.clear-filters-button, .brand-toggle-button) {
    border-radius: var(--vida-btn-radius) !important;
    font-weight: 500 !important;
}

/* Remover/excluir continua vermelho somente onde a classe de perigo existir. */
.public-conversion-page :where(.btn-danger, .remove-item, .btn-remover) {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.public-conversion-page :where(.btn-danger, .remove-item, .btn-remover):hover,
.public-conversion-page :where(.btn-danger, .remove-item, .btn-remover):focus-visible {
    background: #c82333 !important;
    border-color: #c82333 !important;
    color: #ffffff !important;
}

.public-conversion-page :where(.btn, .btn-empty-content-panel, .btn-ler-mais, .btn-conferir-agora, .btn-finalizar-leitura, .btn-add-painel-conteudo) :where(span, strong, small, i),
.public-conversion-page :where(.btn, .btn-empty-content-panel, .btn-ler-mais, .btn-conferir-agora, .btn-finalizar-leitura, .btn-add-painel-conteudo) svg {
    color: inherit !important;
    stroke: currentColor !important;
}