/* app/static/css/button_system.css */
:root {
    --vida-blue: #0056b3;
    --vida-blue-hover: #004a9c;
    --vida-green: #16a34a;
    --vida-green-hover: #128a3f;
    --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),
.cart-dropdown .btn-abrir-carrinho {
    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),
.cart-dropdown .btn-abrir-carrinho :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,
.cart-dropdown .btn-abrir-carrinho 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-primary, .btn-info, .btn-comprar-agora, .btn-amazon-offer, .btn-abrir-carrinho, .btn-empty-cart, .update-button),
.auth-page .auth-submit,
.client-panel-page :where(.btn-save, .btn-detalhes-solid, .btn-pedido, .btn-promo, .btn-padrao),
.cart-dropdown .btn-abrir-carrinho {
    border-color: var(--vida-blue) !important;
    background: var(--vida-blue) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.public-conversion-page :where(.btn-primary, .btn-info, .btn-comprar-agora, .btn-amazon-offer, .btn-abrir-carrinho, .btn-empty-cart, .update-button):hover,
.auth-page .auth-submit:hover,
.client-panel-page :where(.btn-save, .btn-detalhes-solid, .btn-pedido, .btn-promo, .btn-padrao):hover,
.public-conversion-page :where(.btn-primary, .btn-info, .btn-comprar-agora, .btn-amazon-offer, .btn-abrir-carrinho, .btn-empty-cart, .update-button):focus-visible,
.auth-page .auth-submit:focus-visible,
.client-panel-page :where(.btn-save, .btn-detalhes-solid, .btn-pedido, .btn-promo, .btn-padrao):focus-visible,
.cart-dropdown .btn-abrir-carrinho:hover,
.cart-dropdown .btn-abrir-carrinho:focus-visible {
    border-color: var(--vida-blue-hover) !important;
    background: var(--vida-blue-hover) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.public-conversion-page :where(.btn-success, .btn-finalizar-compra),
.checkout-page #finalizar-pedido-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-compra):hover,
.public-conversion-page :where(.btn-success, .btn-finalizar-compra):focus-visible,
.checkout-page #finalizar-pedido-btn.btn-success:hover,
.checkout-page #finalizar-pedido-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-carrinho {
    border: 0 !important;
    background: var(--vida-light-blue) !important;
    color: var(--vida-blue) !important;
}

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

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

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

.checkout-page .payment-option-card:has(input[type="radio"]:checked),
.checkout-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;
}

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

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

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