/**
 * modais.css - Estilos para modais SweetAlert2 da aplicação
 * Padroniza a aparência dos modais nos modos claro e escuro
 */

/* Estilos gerais para os modais */
.swal2-popup {
    font-family: 'Inter', sans-serif;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    font-weight: 500;
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-cancel:focus {
    box-shadow: none;
}

.swal2-title {
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.swal2-html-container {
    font-size: 1rem;
    margin-top: 0.5rem;
}

.swal2-icon {
    margin: 1rem auto;
}

/* Estilos para os botões */
.btn-modern {
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.btn-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.swal-buttons-reverse {
    flex-direction: row-reverse;
}

/* Estilos para o modo claro (padrão) */
:root {
    --swal2-white: #ffffff;
    --swal2-black: #212529;
    --swal2-outline-color: rgba(211, 244, 59, 0.5);
}

.swal2-popup {
    background-color: var(--swal2-white);
    color: var(--swal2-black);
}

.swal2-title, .swal2-content {
    color: var(--swal2-black);
}

.swal2-input, .swal2-textarea, .swal2-select {
    border: 1px solid #ddd;
    border-radius: 6px;
}

.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
    border-color: #d3f43b;
    box-shadow: 0 0 0 3px var(--swal2-outline-color);
}

/* Estilos para melhorar interação com radio buttons */
.swal2-container .form-check {
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-bottom: 10px;
    border: 1px solid transparent;
    transform-origin: center;
    transition: all 0.2s ease-in-out;
}

.swal2-container .form-check:hover {
    background-color: rgba(211, 244, 59, 0.1);
    border-color: rgba(211, 244, 59, 0.3);
    transform: translateY(-2px);
}

.swal2-container .form-check:active {
    transform: scale(0.98);
}

.swal2-container .form-check-input {
    cursor: pointer;
}

.swal2-container .form-check-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    width: calc(100% - 25px);
    padding-left: 8px;
}

.swal2-container .form-check-input:checked ~ .form-check-label {
    font-weight: 500;
    color: #000;
}

.swal2-container .form-check.mb-3 {
    margin-bottom: 15px !important;
}

.swal2-container .payment-options {
    margin-bottom: 15px;
}

.swal2-container .form-check-input:checked {
    background-color: #d3f43b;
    border-color: #d3f43b;
}

.swal2-container .form-check:has(.form-check-input:checked) {
    background-color: var(--bs-body-bg);
    border-color: #d3f43b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Transição suave para mudanças na cor de fundo */
.swal2-container .form-check {
    transition: 
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out,
        transform 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
}

/* Estilos para o modo escuro */
.dark-mode .swal2-popup {
    background-color: #2d2b35;
    color: #d3f43b;
    border: 1px solid #374151;
}

/* Cores específicas para os modais Vale, À Vista, Débito e Boleto no modo escuro */
.dark-mode .swal2-popup.modal-vale,
.dark-mode .swal2-popup.modal-avista,
.dark-mode .swal2-popup.modal-debito,
.dark-mode .swal2-popup.modal-boleto,
.dark-mode .swal2-popup.modal-credito {
    background-color: #1f1e24;
    border-color: #374151;
}

.dark-mode .swal2-title,
.dark-mode .swal2-html-container {
    color: #d3f43b;
}

/* Cores específicas para textos dentro dos modais de pagamento */
.dark-mode .swal2-container h6 {
    color: #e5e7eb !important;
}

.dark-mode .swal2-container .h4,
.dark-mode .swal2-container .h5,
.dark-mode .swal2-container .h6 {
    color: #e5e7eb !important;
}

.dark-mode .swal2-container p {
    color: #d1d5db !important;
}
.dark-mode .swal2-container p {
    color: #d1d5db !important;
}

/* Estilo para valor total nos modais de pagamento */
.dark-mode .swal2-container .valor-total-info {
    background-color: #374151;
    border: 1px solid #4B5563;
}

.dark-mode .swal2-container .valor-total-info p.h4 {
    color: #d3f43b !important;
}

/* Estilos para os textos dos radio buttons */
.dark-mode .swal2-container .form-check-label {
    color: #e5e7eb;
}

.dark-mode .swal2-container .form-check-label i {
    color: #d3f43b !important;
}

.dark-mode .swal2-container .form-check-input:checked ~ .form-check-label {
    color: #d3f43b;
}

/* Estilo para as mensagens informativas nos modais */
.dark-mode .swal2-container [id$="Mensagem"] {
    background-color: rgba(211, 244, 59, 0.05);
    border: 1px solid rgba(211, 244, 59, 0.2);
    color: #e5e7eb;
}

.dark-mode .swal2-input,
.dark-mode .swal2-textarea,
.dark-mode .swal2-select {
    background-color: #374151;
    color: #d3f43b;
    border-color: #4B5563;
}

.dark-mode .swal2-input:focus,
.dark-mode .swal2-textarea:focus,
.dark-mode .swal2-select:focus {
    border-color: #d3f43b;
    box-shadow: 0 0 0 3px rgba(211, 244, 59, 0.3);
}

.dark-mode .swal2-checkbox input:checked + .swal2-label {
    color: #d3f43b;
}

.dark-mode .swal2-validation-message {
    background-color: #374151;
    color: #d3f43b;
}

/* Estilos para modo escuro com radio buttons */
.dark-mode .swal2-container .form-check:hover {
    background-color: rgba(211, 244, 59, 0.15);
    border-color: rgba(211, 244, 59, 0.3);
}

.dark-mode .swal2-container .form-check-input:checked ~ .form-check-label {
    color: #d3f43b;
}

.dark-mode .swal2-container .form-check:has(.form-check-input:checked) {
    background-color: rgba(211, 244, 59, 0.2);
    border-color: rgba(211, 244, 59, 0.6);
}

/* Estilos para tipos específicos de modais */
.timeline-popup, 
.invoice-items-popup,
.payment-details-popup,
.events-popup {
    max-width: 90vw;
}

.cart-success-popup {
    padding: 2rem;
}

.cart-success-popup .swal2-title {
    color: #28a745;
    font-weight: 700;
}

.dark-mode .cart-success-popup .swal2-title {
    color: #d3f43b;
}

.cart-success-message {
    margin: 1rem 0;
}

.cart-success-message .product-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cart-success-message .price {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.5rem 0;
}

.cart-success-message .original-price {
    text-decoration: line-through;
    color: #dc3545;
    font-size: 0.9rem;
}

.dark-mode .cart-success-message .original-price {
    color: #f8707a;
}

.cart-success-message .promotional-price {
    font-weight: 700;
    color: #28a745;
    font-size: 1.1rem;
}

.dark-mode .cart-success-message .promotional-price {
    color: #d3f43b;
}

.cart-success-message .total-price {
    font-weight: 700;
    margin-top: 0.5rem;
}

.promotion-applied {
    background-color: rgba(40, 167, 69, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    margin: 0.75rem 0;
    border-left: 4px solid #28a745;
}

.dark-mode .promotion-applied {
    background-color: rgba(211, 244, 59, 0.1);
    border-left-color: #d3f43b;
}

.promotion-info {
    background-color: rgba(23, 162, 184, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    margin: 0.75rem 0;
    border-left: 4px solid #dc3545;
    border-right: 4px solid #dc3545;
}

.dark-mode .promotion-info {
    background-color: rgba(211, 244, 59, 0.1);
    border-left-color: #d3f43b;
}

/* Ajustes específicos de ícones para modo escuro */
.dark-mode .swal2-icon.swal2-info,
.dark-mode .swal2-icon.swal2-question,
.dark-mode .swal2-icon.swal2-warning,
.dark-mode .swal2-icon.swal2-success {
    border-color: #d3f43b;
    color: #d3f43b;
}

.dark-mode .swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #d3f43b;
}

.dark-mode .swal2-icon.swal2-success .swal2-success-ring {
    border: 0.25em solid rgba(211, 244, 59, 0.3);
}

.dark-mode .swal2-icon.swal2-warning {
    color: #d3f43b;
    border-color: #d3f43b;
}

/* Classe para padronizar o texto nos modais */
.texto-padrao {
    color: inherit !important;
}

.dark-mode .texto-padrao {
    color: #ffffff !important;
}

/* Estilo para a mensagem de caracteres restantes */
.dark-mode .swal2-container small.text-muted {
    color: #9ca3af !important;
}

/* Cores para os botões nos modais de pagamento */
.dark-mode .swal2-styled.swal2-confirm {
    background-color: #d3f43b;
    color: #1f1e24;
}

.dark-mode .swal2-styled.swal2-cancel {
    background-color: #4B5563;
    color: #e5e7eb;
}

.dark-mode .swal2-styled.swal2-confirm:hover {
    background-color: #c5e632;
}

.dark-mode .swal2-styled.swal2-cancel:hover {
    background-color: #374151;
}

/* Melhorias visuais para os blocos de informação */
.dark-mode .swal2-container .info-section {
    background-color: #374151;
    border: 1px solid #4B5563;
}

.dark-mode .swal2-container .info-section h6 {
    color: #e5e7eb !important;
}

.dark-mode .swal2-container .info-section p {
    color: #9ca3af !important;
}

/* Estilo para o foco nos elementos interativos */
.dark-mode .swal2-container .form-check:focus-within {
    border-color: #d3f43b;
    box-shadow: 0 0 0 3px rgba(211, 244, 59, 0.3);
}

/* Estilo específico para os valores monetários */
.dark-mode .swal2-container .valor-moeda {
    color: #d3f43b !important;
    font-weight: 600;
}

/* Classe para texto normal em elementos onde a cor seria herdada do modal */
.dark-mode .cor-texto-normal {
    color: #e5e7eb !important;
}

/* Estilos específicos para os modais de pagamento */

/* Modal de Vale */
.dark-mode .swal2-popup.modal-vale .form-check-label i {
    color: #d3f43b !important;
}

.dark-mode .swal2-popup.modal-vale .swal2-title i {
    color: #d3f43b !important;
}

/* Modal de À Vista */
.dark-mode .swal2-popup.modal-avista .payment-options .form-check-label i {
    color: #d3f43b !important;
}

.dark-mode .swal2-popup.modal-avista .payment-options .form-check:hover {
    background-color: rgba(211, 244, 59, 0.15);
}

/* Modal de Débito */
.dark-mode .swal2-popup.modal-debito .info-adicional {
    color: #e5e7eb !important;
    background-color: #374151;
    border: 1px solid #4B5563;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.dark-mode .swal2-popup.modal-debito .info-adicional i {
    color: #d3f43b !important;
}

/* Estilos gerais para valores e textos em todos os modais de pagamento */
.dark-mode .swal2-container .valor-total-info p.h4 {
    color: #d3f43b !important;
    font-weight: 600;
}

.dark-mode .swal2-container .valor-total-info h6 i {
    color: #d3f43b !important;
}

/* Estilos para campos de entrada em modais */
.dark-mode .swal2-container input[type="text"],
.dark-mode .swal2-container input[type="number"],
.dark-mode .swal2-container input[type="date"] {
    background-color: #374151;
    border-color: #4B5563;
    color: #e5e7eb;
}

.dark-mode .swal2-container input[type="text"]:focus,
.dark-mode .swal2-container input[type="number"]:focus,
.dark-mode .swal2-container input[type="date"]:focus {
    border-color: #d3f43b;
    box-shadow: 0 0 0 3px rgba(211, 244, 59, 0.3);
}

/* Classe para texto normal em elementos onde a cor seria herdada do modal */
.dark-mode .cor-texto-normal {
    color: #e5e7eb !important;
}

/* Elementos internos dos modais Vale, À Vista, Débito e Boleto */
.dark-mode .swal2-popup.modal-vale .valor-total-info,
.dark-mode .swal2-popup.modal-avista .valor-total-info,
.dark-mode .swal2-popup.modal-debito .valor-total-info,
.dark-mode .swal2-popup.modal-boleto .valor-total-info {
    background-color: #2d2b35;
    border: 1px solid #4B5563;
}

.dark-mode .swal2-popup.modal-vale .form-check:hover,
.dark-mode .swal2-popup.modal-avista .form-check:hover,
.dark-mode .swal2-popup.modal-debito .form-check:hover,
.dark-mode .swal2-popup.modal-boleto .form-check:hover {
    background-color: rgba(211, 244, 59, 0.1);
}

.dark-mode .swal2-popup.modal-vale .form-check:has(.form-check-input:checked),
.dark-mode .swal2-popup.modal-avista .form-check:has(.form-check-input:checked),
.dark-mode .swal2-popup.modal-debito .form-check:has(.form-check-input:checked),
.dark-mode .swal2-popup.modal-boleto .form-check:has(.form-check-input:checked) {
    background-color: rgba(211, 244, 59, 0.2);
}

.dark-mode .swal2-popup.modal-debito .info-adicional,
.dark-mode .swal2-popup.modal-boleto .info-adicional {
    background-color: #2d2b35;
    border-color: #4B5563;
}

/* Estilo para as mensagens informativas nos modais específicos */
.dark-mode .swal2-popup.modal-vale [id$="Mensagem"],
.dark-mode .swal2-popup.modal-avista [id$="Mensagem"],
.dark-mode .swal2-popup.modal-debito [id$="Mensagem"],
.dark-mode .swal2-popup.modal-boleto [id$="Mensagem"] {
    background-color: #2d2b35;
    border: 1px solid rgba(211, 244, 59, 0.2);
    color: #e5e7eb;
}

/* Estilo para os botões desses modais específicos */
.dark-mode .swal2-popup.modal-vale .swal2-actions button,
.dark-mode .swal2-popup.modal-avista .swal2-actions button,
.dark-mode .swal2-popup.modal-debito .swal2-actions button,
.dark-mode .swal2-popup.modal-boleto .swal2-actions button {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Estilos para o select e options no modal de boleto em modo escuro */
.dark-mode .swal2-popup.modal-boleto select.form-select {
    background-color: #2d2b35;
    color: #e5e7eb;
    border-color: #4a5568;
}

.dark-mode .swal2-popup.modal-boleto select.form-select:focus {
    border-color: #d3f43b;
    box-shadow: 0 0 0 0.25rem rgba(211, 244, 59, 0.25);
}

.dark-mode .swal2-popup.modal-boleto select.form-select option {
    background-color: #2d2b35;
    color: #e5e7eb;
}

/* Estilos para quando nenhuma opção é selecionada no select */
.dark-mode .swal2-popup.modal-boleto select.form-select option:first-child {
    font-style: italic;
    color: #9ca3af;
}

/* Estilos para melhorar a legibilidade dos textos no select */
.dark-mode .swal2-popup.modal-boleto .form-label {
    color: #e5e7eb !important;
}

.dark-mode .swal2-popup.modal-boleto .form-label i {
    color: #d3f43b !important;
}

.dark-mode .swal2-popup.modal-boleto #prazosOptions .form-check {
    border-color: #4a5568;
    background-color: rgba(45, 43, 53, 0.5);
}

.dark-mode .swal2-popup.modal-boleto #prazosOptions .form-check:hover {
    background-color: rgba(211, 244, 59, 0.1);
    border-color: rgba(211, 244, 59, 0.3);
}

.dark-mode .swal2-popup.modal-boleto #prazosOptions .form-check-label span,
.dark-mode .swal2-popup.modal-boleto #prazosOptions .form-check-label small {
    color: #e5e7eb !important;
}

.dark-mode .swal2-popup.modal-boleto #prazosOptions .form-check-label small i {
    color: #d3f43b !important;
}

/* Estilo para mensagens de validação */
.dark-mode .swal2-popup.modal-boleto .swal2-validation-message {
    background-color: #2d2b35;
    color: #f87171;
}

/* Continuar com os estilos gerais do modo escuro */
.dark-mode .swal2-input,
.dark-mode .swal2-textarea,
.dark-mode .swal2-select {
    background-color: #374151;
    color: #d3f43b;
    border-color: #4B5563;
}

/* Cores específicas para os modais tipo credito */
.dark-mode .swal2-popup.modal-credito .form-check-label i {
    color: #d3f43b !important;
}

.dark-mode .swal2-popup.modal-credito .form-check:hover {
    background-color: rgba(211, 244, 59, 0.15);
    border-color: rgba(211, 244, 59, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.dark-mode .swal2-popup.modal-credito .form-check:has(.form-check-input:checked) {
    background-color: rgba(211, 244, 59, 0.2);
    border-color: rgba(211, 244, 59, 0.6);
}

.form-check.selected {
    border-color: rgba(211, 244, 59, 0.5);
    box-shadow: 0 0 5px rgba(211, 244, 59, 0.3);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* No modo escuro, ajuste as cores para melhor visibilidade */
.dark-mode .form-check.selected {
    background-color: rgba(211, 244, 59, 0.2);
    border-color: rgba(211, 244, 59, 0.6);
    box-shadow: 0 0 8px rgba(211, 244, 59, 0.4);
}

/* Garantir que os elementos de formulário no modal estejam bem visíveis */
.swal2-container .form-check {
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.swal2-container .form-check-input {
    margin-top: 3px;
}

.swal2-container .form-check-label {
    padding-left: 10px;
    font-size: 1rem;
}

/* Ajuste para a apresentação no modo escuro */
.dark-mode .swal2-container .form-check {
    border-color: #4a5568;
    background-color: rgba(45, 43, 53, 0.5);
}

/* Estilo para os alertas nos modais no modo escuro */
.dark-mode .swal2-container .alert {
    background-color: #2d2b35;
    border-color: #4a5568;
    color: #e5e7eb;
}

.dark-mode .swal2-container .alert-warning {
    background-color: #2d2b35;
    border-left: 4px solid #d3f43b;
    color: #e5e7eb;
}

.dark-mode .swal2-container .alert-warning i {
    color: #d3f43b;
}

.dark-mode .swal2-container .alert-info {
    background-color: #2d2b35;
    border-left: 4px solid #4299e1;
    color: #e5e7eb;
}

.dark-mode .swal2-container .alert-danger {
    background-color: #2d2b35;
    border-left: 4px solid #f56565;
    color: #e5e7eb;
}

.dark-mode .swal2-container .alert-success {
    background-color: #2d2b35;
    border-left: 4px solid #d3f43b;
    color: #e5e7eb;
}

/* Estilos específicos para alertas nos modais de pagamento */
.dark-mode .swal2-popup.modal-vale .alert,
.dark-mode .swal2-popup.modal-avista .alert,
.dark-mode .swal2-popup.modal-debito .alert,
.dark-mode .swal2-popup.modal-boleto .alert,
.dark-mode .swal2-popup.modal-credito .alert {
    background-color: #2d2b35;
    border: 1px solid #4a5568;
    border-left: 4px solid #d3f43b;
    color: #e5e7eb;
    border-radius: 6px;
    padding: 12px 15px;
    margin-top: 10px;
    margin-bottom: 15px;
}
.swal2-popup.modal-vale .alert,
.swal2-popup.modal-avista .alert,
.swal2-popup.modal-debito .alert,
.swal2-popup.modal-boleto .alert,
.swal2-popup.modal-credito .alert {
    background-color: #f8f9fa;
    border-left: 4px solid #d3f43b;
    color: #000000;
    border-radius: 6px;
    padding: 12px 15px;
    margin-top: 10px;
    margin-bottom: 15px;
    border-bottom: none;
    border-right: none;
    border-top: none;
}

.dark-mode .swal2-popup.modal-vale .alert i,
.dark-mode .swal2-popup.modal-avista .alert i,
.dark-mode .swal2-popup.modal-debito .alert i,
.dark-mode .swal2-popup.modal-boleto .alert i,
.dark-mode .swal2-popup.modal-credito .alert i {
    color: #d3f43b;
    margin-right: 8px;
}

.dark-mode .swal2-container .alert.alert-warning,
.dark-mode .swal2-container .alert.alert-info,
.dark-mode .swal2-container .alert.alert-danger,
.dark-mode .swal2-container .alert.alert-success {
    background-color: #2d2b35 !important;
    background-image: none !important;
}

/* Reset qualquer estilo de gradiente ou imagem de fundo */
.dark-mode .payment-options .alert,
.dark-mode .swal2-html-container .alert {
    background-color: #2d2b35 !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.dark-mode {
    color: #1f1e24;
}

.valor-total-info mb-4 {
    background-color: #f8f9fa;
}

/* Estilos padronizados para o componente valor-total-info */
.valor-total-info {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.valor-total-info h6 {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.valor-total-info h6 i {
    color: #D3F43B;
    margin-right: 8px;
}

.valor-total-info p.h4 {
    color: #000000;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* Modo escuro */
.dark-mode .valor-total-info {
    background-color: #2d2b35;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.dark-mode .valor-total-info h6 {
    color: #e5e7eb;
}

.dark-mode .valor-total-info h6 i {
    color: #D3F43B;
}

.dark-mode .valor-total-info p.h4 {
    color: #e5e7eb;
}

/* Estilos específicos para o modal de boleto (mais compacto) */
.swal2-popup.modal-boleto .payment-options .form-check {
    padding: 4px 8px !important;
    margin-bottom: 2px !important;
}

.swal2-popup.modal-boleto .form-check-label {
    font-size: 0.85rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.swal2-popup.modal-boleto .form-check-input {
    margin-top: 0.15rem !important;
    margin-right: 0.3rem !important;
    transform: scale(0.9);
}

.swal2-popup.modal-boleto .valor-total-info {
    margin-bottom: 0.5rem !important;
    padding: 0.5rem !important;
}

.swal2-popup.modal-boleto .valor-total-info h6 {
    margin-bottom: 0.25rem !important;
    font-size: 0.8rem !important;
}

.swal2-popup.modal-boleto #prazosOptions .form-check {
    padding: 2px 5px !important;
    margin-bottom: 2px !important;
}

.swal2-popup.modal-boleto #prazosContainer {
    margin-top: 0.5rem !important;
}

.swal2-popup.modal-boleto #prazosContainer .form-label {
    margin-bottom: 0.25rem !important;
    font-size: 0.8rem !important;
}

.swal2-popup.modal-boleto #prazosOptions .form-check-label {
    font-size: 0.8rem !important;
}

/* Estilos para o modal de boleto compacto */
.swal2-popup.boleto-compact {
    padding: 0.75rem !important;
}

.swal2-popup.boleto-compact .swal2-title {
    font-size: 1.25rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding: 0.25rem 0 !important;
}

.swal2-popup.boleto-compact .swal2-html-container {
    margin-top: 0 !important;
}

.swal2-popup.boleto-compact .payment-options .form-check {
    margin-bottom: 1px !important;
    padding: 3px 5px !important;
}

.swal2-popup.boleto-compact .swal2-actions {
    margin-top: 0.75rem !important;
}

.swal2-popup.boleto-compact .swal2-styled {
    padding: 0.35rem 1rem !important;
    font-size: 0.85rem !important;
}

/* Estilos para a seção de prazos do boleto */
#prazosContainer {
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 1rem !important; /* Ajusta margem superior */
}

.dark-mode #prazosContainer {
    border-color: var(--swal2-border-color, #4a5568);
    background-color: var(--swal2-background-input, #2d2b35); /* Adapta ao tema */
}

#prazosContainer .form-label {
    font-size: 0.9rem; /* Ajusta tamanho da fonte da label */
    margin-bottom: 0.5rem !important; /* Ajusta margem inferior da label */
    color: var(--swal2-content-color, #333); /* Adapta a cor ao tema */
    display: flex;
    align-items: center;
}

.dark-mode #prazosContainer .form-label {
     color: var(--swal2-content-color, #e5e7eb);
}

#prazosContainer .form-label i {
     margin-right: 8px; /* Espaçamento entre ícone e texto */
     color: var(--swal2-icon-color, #D3F43B); /* Cor do ícone */
}

/* Estilos para as opções de prazo dentro do modal de boleto */
#prazosOptions .form-check.custom-radio {
    padding: 0.5rem !important; /* Ajusta padding */
    margin-bottom: 0.5rem !important; /* Ajusta margem */
    border-color: var(--swal2-border-color, #dee2e6); /* Cor da borda padrão */
}

.dark-mode #prazosOptions .form-check.custom-radio {
    border-color: var(--swal2-border-color, #4a5568); /* Cor da borda no modo escuro */
}

/* Novo contêiner dentro de cada opção de prazo */
.prazo-option-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
    /* Adicionado para evitar quebra de linha */
    white-space: nowrap;
}

/* Classe para os detalhes da opção de prazo (nome e valor) */
.prazo-option-details {
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: space-between; /* Distribui espaço igualmente */
    width: 100%; /* Garante que o flexbox ocupe a largura total disponível */
}

#prazosOptions .form-check-label span.fw-bold {

    color: var(--swal2-content-color, #000); /* Cor da small tag no modo claro */
    font-weight: 700; /* Define o peso da fonte como negrito */
    font-size: 0.9rem;
}

.dark-mode #prazosOptions .form-check-label span.fw-bold {
    color: var(--swal2-content-color, #e5e7eb);
}

#prazosOptions .form-check-label small {
    color: var(--swal2-content-color, #000); /* Cor da small tag no modo claro */
    font-weight: 700; /* Define o peso da fonte como negrito */
    font-size: 0.9rem;
}

.dark-mode #prazosOptions .form-check-label small {
     color: var(--swal2-content-color, #d1d5db); /* Cor da small tag no modo escuro */
}

/* Estilos para o ícone de dinheiro nas opções de prazo */
#prazosOptions .form-check-label i.fas.fa-money-bill-wave {
    color: #000; /* Cor do ícone no modo claro */
    font-size: 1.1rem;
    /* Removido width e text-align, pois o flexbox cuidará do alinhamento */
    margin-right: 5px; /* Adiciona um pequeno espaço entre o ícone e a small tag */
}

.dark-mode #prazosOptions .form-check-label i.fas.fa-money-bill-wave {
    color: var(--swal2-content-color, #d1d5db); /* Cor do ícone no modo escuro */
}

/* Estilo para o hover aplicado via JS no código antigo, agora em CSS */
#prazosOptions .form-check:hover {
    background-color: rgba(211, 244, 59, 0.1);
    transition: all 0.3s ease;
    border-color: #d3f43b; /* Borda primária no hover */
}

.dark-mode #prazosOptions .form-check:hover {
    background-color: rgba(211, 244, 59, 0.15); /* Ajuste no modo escuro */
    border-color: rgba(211, 244, 59, 0.5); /* Ajuste da borda no modo escuro */
}

/* Estilo para o select focado aplicado via JS no código antigo, agora em CSS */
#numParcelas:focus {
    border-color: #d3f43b !important; /* Usando !important para garantir precedência se necessário */
    box-shadow: 0 0 0 0.2rem rgba(211, 244, 59, 0.25) !important;
}

.payment-modal .swal2-popup-custom.modal-boleto.boleto-compact {
    padding: 0;
}

/* Ajustes específicos para o modal de boleto se necessário */
.modal-boleto .swal2-html-container {
    overflow-x: hidden; /* Evita overflow horizontal se o conteúdo for largo */
}

.modal-boleto .swal2-actions {
    /* Ajustar espaçamento dos botões se necessário */
    padding: 0 1.25em 1.25em; /* Adiciona padding inferior e lateral aos botões */
}

/* Estilos padronizados para o componente valor-total-info */
.valor-total-info {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.valor-total-info h6 {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.valor-total-info h6 i {
    color: #D3F43B;
    margin-right: 8px;
}

.valor-total-info p.h4 {
    color: #000000;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* Modo escuro */
.dark-mode .valor-total-info {
    background-color: #2d2b35;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.dark-mode .valor-total-info h6 {
    color: #e5e7eb;
}

.dark-mode .valor-total-info h6 i {
    color: #D3F43B;
}

.dark-mode .valor-total-info p.h4 {
    color: #e5e7eb;
}

/* Estilos específicos para o modal de boleto (mais compacto) */
.swal2-popup.modal-boleto .payment-options .form-check {
    padding: 4px 8px !important;
    margin-bottom: 2px !important;
}

.swal2-popup.modal-boleto .form-check-label {
    font-size: 0.85rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.swal2-popup.modal-boleto .form-check-input {
    margin-top: 0.15rem !important;
    margin-right: 0.3rem !important;
    transform: scale(0.9);
}

.swal2-popup.modal-boleto .valor-total-info {
    margin-bottom: 0.5rem !important;
    padding: 0.5rem !important;
}

.swal2-popup.modal-boleto .valor-total-info h6 {
    margin-bottom: 0.25rem !important;
    font-size: 0.8rem !important;
}

.swal2-popup.modal-boleto #prazosOptions .form-check {
    padding: 13px !important;
    margin-bottom: 2px !important;
}

.swal2-popup.modal-boleto #prazosContainer {
    margin-top: 0.5rem !important;
}

.swal2-popup.modal-boleto #prazosContainer .form-label {
    margin-bottom: 0.25rem !important;
    font-size: 0.8rem !important;
}

.swal2-popup.modal-boleto #prazosOptions .form-check-label {
    font-size: 0.8rem !important;
}

/* Estilos para o modal de boleto compacto */
.swal2-popup.boleto-compact {
    padding: 0.75rem !important;
}

.swal2-popup.boleto-compact .swal2-title {
    font-size: 1.25rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding: 0.25rem 0 !important;
}

.swal2-popup.boleto-compact .swal2-html-container {
    margin-top: 0 !important;
}

.swal2-popup.boleto-compact .payment-options .form-check {
    margin-bottom: 1px !important;
    padding: 3px 5px !important;
}

.swal2-popup.boleto-compact .swal2-actions {
    margin-top: 0.75rem !important;
}

.swal2-popup.boleto-compact .swal2-styled {
    padding: 0.35rem 1rem !important;
    font-size: 0.85rem !important;
}

/* Estilos para o modal de item já no carrinho */
.swal2-popup.modal-item-duplicado .swal2-title {
    color: var(--swal2-info);
}

.dark-mode .swal2-popup.modal-item-duplicado .swal2-title {
    color: var(--swal2-warning-dark);
}

.swal2-popup.modal-item-duplicado .text-center p strong {
    color: var(--swal2-black);
}

.dark-mode .swal2-popup.modal-item-duplicado .text-center p strong {
    color: var(--swal2-white);
}

.swal2-popup.modal-item-duplicado .swal2-actions .swal2-confirm {
    /* Botão 'Continuar Comprando' */
    background-color: var(--swal2-secondary);
}

.dark-mode .swal2-popup.modal-item-duplicado .swal2-actions .swal2-confirm {
    background-color: var(--swal2-secondary-dark);
    color: var(--swal2-white);
}

.swal2-popup.modal-item-duplicado .swal2-actions .swal2-cancel {
    /* Botão 'Ir para o Carrinho' */
    background-color: var(--swal2-primary);
    color: var(--swal2-black);
}

.dark-mode .swal2-popup.modal-item-duplicado .swal2-actions .swal2-cancel {
     background-color: var(--swal2-primary-dark);
     color: var(--swal2-black);
}

/* Estilos para o modal de estoque insuficiente quando o item já está no carrinho */
.swal2-popup-estoque-insuficiente-carrinho .text-left i {
    color: var(--swal2-warning);
    width: 20px; /* Largura fixa para alinhar os ícones */
    text-align: center;
    margin-right: 8px;
}

.dark-mode .swal2-popup-estoque-insuficiente-carrinho .text-left i {
    color: var(--swal2-warning-dark);
}

.swal2-popup-estoque-insuficiente-carrinho .text-left p {
    margin-bottom: 6px;
    line-height: 1.4;
}

.swal2-popup-estoque-insuficiente-carrinho .text-left strong {
    color: inherit; /* Garante que o strong use a cor do texto pai */
}

.dark-mode .swal2-popup-estoque-insuficiente-carrinho .text-left strong {
     color: inherit;
}

.swal2-popup-estoque-insuficiente-carrinho hr {
    margin-top: 15px;
    margin-bottom: 15px;
    border-color: rgba(0, 0, 0, 0.1);
}

.dark-mode .swal2-popup-estoque-insuficiente-carrinho hr {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Ajustes para os botões específicos deste modal */
.swal2-popup.swal2-popup-estoque-insuficiente-carrinho .swal2-actions .swal2-confirm {
    /* Botão 'Entendi' */
     background-color: var(--swal2-primary);
     color: var(--swal2-black);
}

.dark-mode .swal2-popup.swal2-popup-estoque-insuficiente-carrinho .swal2-actions .swal2-confirm {
    background-color: var(--swal2-secondary-dark);
    color: var(--swal2-white);
}

.swal2-popup.swal2-popup-estoque-insuficiente-carrinho .swal2-actions .swal2-cancel {
    /* Botão 'Ir para o Carrinho' */
    background-color: var(--swal2-primary);
    color: var(--swal2-black);
}

.dark-mode .swal2-popup.swal2-popup-estoque-insuficiente-carrinho .swal2-actions .swal2-cancel {
    background-color: #d3f43b;
    color: #1f1e24;
}

/* Estilos para o modal de confirmação de remoção do carrinho */
.swal2-popup.modal-confirmacao-remocao-carrinho .swal2-actions .swal2-confirm {
    background-color: #6c757d !important; /* Cor secundária para o botão Confirmar */
    color: var(--swal2-cancel-button-color) !important;
}

.swal2-popup.modal-confirmacao-remocao-carrinho .swal2-actions .swal2-confirm:hover {
    background-color: #6c757d !important; /* Cor secundária no hover */
    color: var(--swal2-cancel-button-color) !important;
}

.swal2-popup.modal-confirmacao-remocao-carrinho .swal2-actions .swal2-cancel {
    background-color: #6c757d !important; /* Cor secundária para o botão Cancelar */
    color: var(--swal2-cancel-button-color) !important;
}

.swal2-popup.modal-confirmacao-remocao-carrinho .swal2-actions .swal2-confirm:hover,
.swal2-popup.modal-confirmacao-remocao-carrinho .swal2-actions .swal2-cancel:hover {
    background-color: #6c757d !important; /* Cor secundária no hover */
    color: var(--swal2-cancel-button-color) !important;
}

/* ========================================= */
/* Estilos Específicos para #quantidadeModal */
/* ========================================= */

#quantidadeModal .modal-content,
#quantidadeModal .modal-header,
#quantidadeModal .modal-title,
#quantidadeModal .modal-title small,
#quantidadeModal .modal-body,
#quantidadeModal .form-label {
    max-width: 1200px;
}

#quantidadeModal .modal-content {
    background: #ffffff;
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 900px;
    margin: 1.5rem auto;
}

#quantidadeModal .modal-header {
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.5rem;
    max-width: 900px;
}

#quantidadeModal .modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.4;
    max-width: 900px;
}

#quantidadeModal .modal-title small {
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #ffffff;
    border-radius: 6px;
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 1.0rem;
    justify-content: center;
    max-width: 900px;
}

#quantidadeModal .modal-body {
    padding: 1rem;
    max-width: 900px;
}

#quantidadeModal .form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
    max-width: 900px;
}

#quantidadeModal .input-group {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    max-width: 900px;
}

#quantidadeModal .input-group .btn {
    background-color: #d3f43b;
    border: none;
    color: #000;
    width: 48px;
    height: 53px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#quantidadeModal .input-group .btn:hover {
    background-color: #c2e235;
}

#quantidadeModal .input-group .btn:active {
    transform: scale(0.95);
}

#quantidadeModal #quantidade-input {
    height: 48px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background-color: #ffffff;
    width: 80px;
    padding: 0;
    box-shadow: none;
}

#quantidadeModal .modal-footer {
    border-top: 1px solid #ffffff;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

#quantidadeModal .modal-footer .btn {
    flex: 1;
    padding: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px; /* Altura fixa para os botões */
    line-height: 1;
}

#quantidadeModal .btn-secondary {
    background-color: #f8f9fa;
    color: #333;
    border: 1px solid #dee2e6;
}

#quantidadeModal .btn-secondary:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#quantidadeModal .btn-success {
    background-color: #d3f43b;
    color: #000;
    border: none;
}

#quantidadeModal .btn-success:hover {
    background-color: #c2e235;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(211, 244, 59, 0.3);
}

#quantidadeModal .btn i {
    font-size: 1.1rem;
}

/* Modo escuro */
body.dark-mode #quantidadeModal .modal-footer {
    border-top-color: #374151;
}

body.dark-mode #quantidadeModal .btn-secondary {
    background-color: #2d2b35;
    color: #fff;
    border-color: #2d2b35;
}

body.dark-mode #quantidadeModal .btn-secondary:hover {
    background-color: #4B5563;
}

/* Media query movida para media_queries.css */

#quantidadeModal .product-info {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
    display: block;
}

#quantidadeModal .price-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

#quantidadeModal .regular-price {
    font-size: 1.1rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

#quantidadeModal .total-price {
    color: #333;
    font-weight: bold;
    margin: 0;
}

.dark-mode #quantidadeModal .total-price {
    color: #fff;
    font-weight: bold;
    margin: 0;
}

#quantidadeModal .promotion-info {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;

    margin-top: 1rem;
}

#quantidadeModal .promotion-content {
    text-align: center;
    display: flex;
    flex-direction: column;
}

#quantidadeModal .promotion-content p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: #dc3545;
}

#quantidadeModal .promotion-price {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin: 0.5rem 0 !important;
}

/* Modo escuro */
body.dark-mode #quantidadeModal .product-info {
    color: #e2e8f0;
}

body.dark-mode #quantidadeModal .regular-price {
    color: #9ca3af;
}

body.dark-mode #quantidadeModal .promotion-info {
    background: rgba(220, 53, 69, 0.15);
    border-left-color: #dc3545;
    border-right-color: #dc3545;
}

body.dark-mode #quantidadeModal .promotion-info i,
body.dark-mode #quantidadeModal .promotion-info strong,
body.dark-mode #quantidadeModal .promotion-price,
body.dark-mode #quantidadeModal .promotion-info small {
    color: #ff4d4d;
}

.stock-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 1.0rem;
    justify-content: center;
}

.stock-info i {
    color: #d3f43b;
    font-size: 1rem;
}

.stock-info .stock-value {
    font-weight: 600;
    color: #333;
}

/* Modo escuro */
body.dark-mode .stock-info {
    background-color: #1f1e24;
}

body.dark-mode .stock-info .stock-value {
    color: #fff;
}

#quantidadeModal .input-group {
    margin-bottom: 0;
}

#quantidadeModal .form-group {
    text-align: center;
}

#quantidadeModal .product-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

#quantidadeModal .product-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    justify-content: center;
}

#quantidadeModal .price-line {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 0.7rem;
    justify-content: center;
}

#quantidadeModal .total-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    
    border-radius: 6px;
    
    font-size: 1.0rem;
    justify-content: center;
    margin-top: 0;
    border-top: none;
}

/* Modo escuro */
body.dark-mode #quantidadeModal .product-header,
body.dark-mode #quantidadeModal .price-line,
body.dark-mode #quantidadeModal .total-line {
    background-color: #1f1e24;
    color: #fff;
}

#quantidadeModal .price-info {
    display: none;
    width: 100%;
    margin-top: 12px;
}

#quantidadeModal .price-info.show {
    display: block;
}

#quantidadeModal .btn-close {
    display: none; /* Esconde o botão de fechar */
}

/* Garante que o espaço que seria ocupado pelo botão é removido */
#quantidadeModal .modal-header {
    justify-content: center; /* Centraliza o título */
    padding-right: 1.5rem; /* Mantém o padding consistente */
}

/* Ajustes para o modal */
.modal {
    background-color: transparent !important;
}

.modal-dialog {
    z-index: var(--z-index-modal);
}

/* Modo escuro */
body.dark-mode #quantidadeModal .modal-content {
    background: #2d2b35;
    border: none;
}

body.dark-mode #quantidadeModal .modal-header {
    background-color: #2d2b35;
    border-bottom-color: #1f1e24;
    border: none;
}

body.dark-mode #quantidadeModal .modal-title {
    color: #fff;
}

body.dark-mode #quantidadeModal .modal-title small {
    background-color: #1f1e24;
    color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-mode #quantidadeModal .form-label {
    color: #e2e8f0;
}

body.dark-mode #quantidadeModal #quantidade-input {
    background-color: #2d2b35;
    color: #fff;
}

body.dark-mode #quantidadeModal .modal-body {
    background-color: #2d2b35;
    border: none;
}

body.dark-mode #quantidadeModal .modal-footer {
    border-top-color: #2d2b35;
    background-color: #2d2b35;
    border: none;
}

body.dark-mode #quantidadeModal .product-header,
body.dark-mode #quantidadeModal .price-line,
body.dark-mode #quantidadeModal .total-line {
    background-color: #1f1e24;
    color: #fff;
}

body.dark-mode #quantidadeModal .stock-info {
    background-color: #2d2b35;
    color: #fff;
}

/* Modo escuro */
body.dark-mode #quantidadeModal .modal-footer .btn {
    height: 48px; /* Mantém a mesma altura dos botões no modo escuro */
    line-height: 1;
}

/* ========================================= */
/* Estilos Específicos para Modal Carrinho Vazio */
/* ========================================= */

.empty-cart-modal-content {
    padding: 20px; /* Padding interno */
    text-align: center; /* Centraliza o conteúdo */
}

.empty-cart-modal-content > i {
    color: #d3f43b;
    font-size: 4rem; /* Tamanho do ícone */
    margin-bottom: 20px;
}

.dark-mode .empty-cart-modal-content > i {
    color: var(--swal2-primary-dark); /* Cor do ícone no modo escuro, usando uma cor de destaque */
}

.empty-cart-modal-content h2 {
    font-size: 1.5rem; /* Tamanho do título similar a outros modais */
    font-weight: 600;
    color: var(--swal2-black); /* Cor do título no modo claro */
    margin-bottom: 15px;
}

.dark-mode .empty-cart-modal-content h2 {
    color: var(--swal2-white); /* Cor do título no modo escuro */
}

.empty-cart-modal-content p.lead {
    font-size: 1rem; /* Tamanho do texto similar a outros modais */
    color: var(--swal2-black); /* Cor do texto no modo claro */
    margin-bottom: 25px;
}

.dark-mode .empty-cart-modal-content p.lead {
    color: var(--swal2-white); /* Cor do texto no modo escuro */
}

.empty-cart-modal-content .btn-pedido {
    background-color: #d3f43b; /* Cor de fundo do botão */
    border-color: #d3f43b; /* Cor da borda do botão */
    color: #000; /* Cor do texto do botão */
    padding: 0.5rem 1rem !important; /* Reduzir padding ainda mais e garantir aplicação */
    margin-top: 15px; /* Manter ou ajustar margem superior */
}

.empty-cart-modal-content .btn-pedido:hover {
    background-color: #c2e235; /* Cor de fundo no hover */
    border-color: #c2e235; /* Cor da borda no hover */
}

.dark-mode .empty-cart-modal-content .btn-pedido {
    background-color: #d3f43b; /* Cor de fundo no modo escuro */
    border-color: #d3f43b; /* Cor da borda no modo escuro */
    color: #1f1e24; /* Cor do texto no modo escuro, ajustada para escuro */
}

.dark-mode .empty-cart-modal-content .btn-pedido i {
    color: #1f1e24; /* Ajusta a cor do ícone no modo escuro */
}

.dark-mode .empty-cart-modal-content .btn-pedido:hover {
    background-color: #c2e235; /* Cor de fundo no hover no modo escuro */
    border-color: #c2e235; /* Cor da borda no hover no modo escuro */
    color: var(--swal2-black); /* Cor do texto no hover no modo escuro */
}

/* Adicionar estilos para o container do modal no modo escuro para o background */
.dark-mode .swal2-popup {
    background-color: var(--swal2-background-dark, #1f1e24); /* Usa a variável de fundo do SweetAlert para consistência */
    border-color: var(--swal2-border-color-dark, #374151);
}

/* Largura customizada para o modal de quantidade */
#quantidadeModal .modal-dialog {
    max-width: 700px !important;
    width: 95vw;
}

#quantidadeModal .modal-content {
    max-width: 100% !important;
}

/* Media query movida para media_queries.css */

/* SweetAlert2 Custom Styles */
.swal2-container {
    display: flex !important;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;   /* Centraliza verticalmente */
    /* backdrop-filter: blur(10px); */ /* Efeito blur no fundo */
    z-index: var(--z-index-modal-gerenciamento) !important; /* Acima do modal de criação de usuário */
}

.swal2-popup.swal2-toast {
    flex-direction: row;
    align-items: center;
    width: auto;
    padding: 1em;
    overflow-y: hidden;
    z-index: var(--z-index-modal-gerenciamento-content) !important; /* Acima do container principal do SWAL */
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, .4);
    background-color: rgba(255, 255, 255, 0.95);
}

.swal2-actions {
    display: flex; /* Garante layout flexível */
    flex-direction: row; /* Garante que fiquem lado a lado, sobrescreve outras regras */
    gap: 10px; /* Adiciona espaço entre os botões */
    /* Remover ou ajustar margens e padding conforme necessário */
    width: auto; /* Permite que a largura se ajuste ao conteúdo */
    justify-content: center; /* Centraliza os botões dentro da área de ações */
}

/* Reduzindo o tamanho dos botões na área de ações do SweetAlert2 */
.swal2-actions .swal2-styled {
    padding: 0.4em 1em !important; /* Reduz padding vertical e horizontal */
    font-size: 0.9em !important; /* Reduz tamanho da fonte */
    /* Outros ajustes de tamanho podem ser necessários */
}

/* Estilos específicos para o modal de erro de limite de crédito */
.swal2-popup.modal-limite-credito {
    border-color: #374151; /* Usa a cor de borda dos outros modais de pagamento no modo escuro */
    background-color: #ffffff; /* Usa a cor de fundo dos outros modais de pagamento no modo escuro */
    width: 600px; /* Define a largura específica do modal */
    padding: 2rem !important; /* Ajusta o padding com alta prioridade */
    border-radius: 12px !important; /* Garante o raio da borda com alta prioridade */
}

.swal2-popup.modal-limite-credito .list-group-item {
    background-color: #f8f9fa;
    color: #000;
}

.swal2-popup.modal-limite-credito .list-group-item:hover {
    background-color: #f8f9fa;
    color: #000;
}

.dark-mode .swal2-popup.modal-limite-credito {
    border-color: #374151; /* Usa a cor de borda dos outros modais de pagamento no modo escuro */
    background-color: #1f1e24; /* Usa a cor de fundo dos outros modais de pagamento no modo escuro */
    width: 600px; /* Define a largura específica do modal */
    padding: 2rem !important; /* Ajusta o padding com alta prioridade */
    border-radius: 12px !important; /* Garante o raio da borda com alta prioridade */
}

body.dark-mode .swal2-popup.modal-limite-credito .list-group-item {
    background-color: #2d2b35;
    color: #d3f43b;
}

body.dark-mode .swal2-popup.modal-limite-credito .list-group-item:hover {
    background-color: #1f1e24;
    color: #d3f43b;
}

.swal2-popup.modal-limite-credito .swal2-title,
.swal2-popup.modal-limite-credito .swal2-html-container {
    color: var(--swal2-content-color); /* Usa a variável de cor de conteúdo do SweetAlert */
}

.dark-mode .swal2-popup.modal-limite-credito .swal2-title,
.dark-mode .swal2-popup.modal-limite-credito .swal2-html-container {
     color: var(--swal2-content-color); /* Usa a variável de cor de conteúdo do SweetAlert */
}

.swal2-popup.modal-limite-credito .swal2-icon.swal2-error {
    color: var(--danger-color); /* Garante a cor do ícone padrão (vermelho) no modo claro */
}

.dark-mode .swal2-popup.modal-limite-credito .swal2-icon.swal2-error {
    color: var(--danger-color); /* Mantém o ícone de erro vermelho também no modo escuro */
}

/* Se houver um ícone customizado no HTML (como o fas fa-times-circle) */
.swal2-popup.modal-limite-credito .swal2-html-container .fas.fa-times-circle {
    color: var(--danger-color) !important; /* Garante que o ícone personalizado seja vermelho no modo claro */
}

.dark-mode .swal2-popup.modal-limite-credito .swal2-html-container .fas.fa-times-circle {
    color: var(--danger-color) !important; /* Mantém o ícone personalizado vermelho no modo escuro */
}

/* =======================================
   MODAIS DE DUPLICATAS - PAINEL_USUARIOS
   ======================================= */

/* Modal de email duplicado */
.swal2-popup.modal-duplicata-email .swal2-title {
    color: var(--text-primary);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-duplicata-email .swal2-title {
    color: var(--text-primary);
}

.swal2-popup.modal-duplicata-email .swal2-html-container p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
}

.dark-mode .swal2-popup.modal-duplicata-email .swal2-html-container p {
    color: var(--text-primary);
}

.swal2-popup.modal-duplicata-email .swal2-html-container strong {
    color: var(--danger-color);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-duplicata-email .swal2-html-container strong {
    color: var(--danger-color);
}

.swal2-popup.modal-duplicata-email .swal2-html-container small {
    font-size: 14px;
    color: var(--text-secondary);
}

.dark-mode .swal2-popup.modal-duplicata-email .swal2-html-container small {
    color: var(--text-secondary);
}

/* Modal de nome duplicado */
.swal2-popup.modal-duplicata-nome .swal2-title {
    color: var(--text-primary);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-duplicata-nome .swal2-title {
    color: var(--text-primary);
}

.swal2-popup.modal-duplicata-nome .swal2-html-container strong {
    color: var(--danger-color);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-duplicata-nome .swal2-html-container strong {
    color: var(--danger-color);
}

/* Modal de CNPJ inválido */
.swal2-popup.modal-cnpj-invalido .swal2-title {
    color: var(--text-primary);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-cnpj-invalido .swal2-title {
    color: var(--text-primary);
}

.swal2-popup.modal-cnpj-invalido .swal2-html-container strong {
    color: var(--danger-color);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-cnpj-invalido .swal2-html-container strong {
    color: var(--danger-color);
}

/* Modal de campos obrigatórios */
.swal2-popup.modal-campos-obrigatorios .swal2-title {
    color: var(--text-primary);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-campos-obrigatorios .swal2-title {
    color: var(--text-primary);
}

.swal2-popup.modal-campos-obrigatorios .swal2-html-container ul {
    list-style: none;
    padding-left: 0;
    margin: 15px 0;
}

.swal2-popup.modal-campos-obrigatorios .swal2-html-container li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    color: var(--text-primary);
}

.dark-mode .swal2-popup.modal-campos-obrigatorios .swal2-html-container li {
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

.swal2-popup.modal-campos-obrigatorios .swal2-html-container li:last-child {
    border-bottom: none;
}

.swal2-popup.modal-campos-obrigatorios .swal2-html-container li strong {
    color: var(--danger-color);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-campos-obrigatorios .swal2-html-container li strong {
    color: var(--danger-color);
}

/* Modal de sem permissão */
.swal2-popup.modal-sem-permissao .swal2-title {
    color: var(--text-primary);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-sem-permissao .swal2-title {
    color: var(--text-primary);
}

.swal2-popup.modal-sem-permissao .swal2-html-container strong {
    color: var(--danger-color);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-sem-permissao .swal2-html-container strong {
    color: var(--danger-color);
}

/* Modal de sucesso na criação de usuário */
.swal2-popup.modal-sucesso-usuario .swal2-title {
    color: var(--text-primary);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-sucesso-usuario .swal2-title {
    color: var(--text-primary);
}

.swal2-popup.modal-sucesso-usuario .swal2-html-container strong {
    color: var(--success-color);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-sucesso-usuario .swal2-html-container strong {
    color: var(--success-color);
}

.swal2-popup.modal-sucesso-usuario .swal2-html-container p.text-muted {
    color: var(--text-secondary) !important;
    font-size: 14px;
}

.dark-mode .swal2-popup.modal-sucesso-usuario .swal2-html-container p.text-muted {
    color: var(--text-secondary) !important;
}

/* Modal de erro na criação de usuário - Z-index máximo para ficar acima de tudo */
.swal2-popup.modal-erro-usuario {
    z-index: var(--z-index-modal-error) !important;
}

.swal2-container:has(.swal2-popup.modal-erro-usuario) {
    z-index: var(--z-index-modal-error) !important;
}

/* Garantir que SweetAlert de erro apareça acima de qualquer modal e backdrop */
body.modal-open .swal2-container:has(.swal2-popup.modal-erro-usuario) {
    z-index: var(--z-index-modal-error) !important;
}

.modal-backdrop ~ .swal2-container:has(.swal2-popup.modal-erro-usuario) {
    z-index: var(--z-index-modal-error) !important;
}

#criarUsuarioModal.show ~ .swal2-container:has(.swal2-popup.modal-erro-usuario) {
    z-index: var(--z-index-modal-error) !important;
}

/* Forçar SweetAlert acima de todos os elementos Bootstrap */
.swal2-container.swal2-center.swal2-backdrop-show:has(.swal2-popup.modal-erro-usuario) {
    z-index: var(--z-index-modal-error) !important;
}

/* Regras adicionais para garantir posicionamento correto */
.swal2-container:has(.swal2-popup.modal-erro-usuario),
.swal2-container.modal-erro-usuario-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: var(--z-index-modal-error) !important;
    pointer-events: none !important;
}

.swal2-popup.modal-erro-usuario {
    position: relative !important;
    z-index: var(--z-index-modal-error) !important;
    pointer-events: auto !important;
}

/* Sobrescrever qualquer z-index do Bootstrap */
body .modal-backdrop {
    z-index: var(--z-index-modal-backdrop) !important;
}
body .modal {
    z-index: var(--z-index-modal) !important;
}
body .modal-dialog,
body .modal-content {
    z-index: var(--z-index-modal) !important;
}

body .swal2-container:has(.swal2-popup.modal-erro-usuario),
body .swal2-container.modal-erro-usuario-container {
    z-index: var(--z-index-modal-error) !important;
}

#quickAccessModal {
    z-index: var(--z-index-modal) !important;
}
#quickAccessModal .modal-dialog {
    z-index: var(--z-index-modal) !important;
}
#quickAccessModal .modal-content {
    z-index: var(--z-index-modal-high) !important;
}

/* Regra universal para todos os SweetAlert de erro */
.swal2-container.swal2-center.swal2-backdrop-show .swal2-popup.modal-erro-usuario {
    z-index: var(--z-index-modal-error) !important;
}

.swal2-popup.modal-erro-usuario .swal2-title {
    color: var(--text-primary);
    font-weight: 600;
}

.dark-mode .swal2-popup.modal-erro-usuario .swal2-title {
    color: var(--text-primary);
}

.swal2-popup.modal-erro-usuario .swal2-html-container p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.dark-mode .swal2-popup.modal-erro-usuario .swal2-html-container p {
    color: var(--text-primary);
}

.swal2-popup.modal-erro-usuario .swal2-html-container small {
    font-size: 14px;
    color: var(--text-secondary);
}

.dark-mode .swal2-popup.modal-erro-usuario .swal2-html-container small {
    color: var(--text-secondary);
}

/* Estilos gerais para modais de duplicatas */
.swal2-popup.modal-duplicata-email,
.swal2-popup.modal-duplicata-nome,
.swal2-popup.modal-cnpj-invalido,
.swal2-popup.modal-campos-obrigatorios,
.swal2-popup.modal-sem-permissao,
.swal2-popup.modal-sucesso-usuario,
.swal2-popup.modal-erro-usuario {
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    background-color: var(--primary-bg);
}

.dark-mode .swal2-popup.modal-duplicata-email,
.dark-mode .swal2-popup.modal-duplicata-nome,
.dark-mode .swal2-popup.modal-cnpj-invalido,
.dark-mode .swal2-popup.modal-campos-obrigatorios,
.dark-mode .swal2-popup.modal-sem-permissao,
.dark-mode .swal2-popup.modal-sucesso-usuario,
.dark-mode .swal2-popup.modal-erro-usuario {
    background-color: var(--primary-bg);
    box-shadow: var(--shadow-medium);
}

/* Media query movida para media_queries.css */



/* =======================================
   MODAL MODERNO DE DETALHES DO CLIENTE - VERSÃO MELHORADA
   ======================================= */

/* Container principal do modal */
.swal2-popup.cliente-modal-moderno-popup {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(211, 244, 59, 0.2);
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Botão de fechar customizado */
.cliente-modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(45, 43, 53, 0.1);
    border: none;
    color: #6c757d;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: var(--z-index-sidebar);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cliente-modal-close-btn:hover {
    background: rgba(211, 244, 59, 0.2);
    color: #2d2b35;
    transform: scale(1.1);
}

/* Container principal do conteúdo */
.cliente-modal-moderno {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

/* Header do modal */
.cliente-header {
    background: linear-gradient(135deg, #d3f43b 0%, #b8e62e 100%);
    padding: 30px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cliente-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.cliente-info {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: var(--z-index-product-manufacturer);
}

.cliente-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.cliente-avatar i {
    font-size: 2.5rem;
    color: #2d2b35;
}

.cliente-avatar .status-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cliente-avatar .status-badge i {
    font-size: 0.8rem;
}

.cliente-detalhes h3 {
    color: #2d2b35;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-indicator {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #2d2b35;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-description {
    font-size: 0.8rem;
    color: rgba(45, 43, 53, 0.8);
    font-weight: 500;
}

/* Botões de ação do header */
.cliente-actions {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: var(--z-index-product-manufacturer);
}

.action-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #2d2b35;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Estatísticas principais */
.cliente-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 30px;
    background: #f8f9fa;
    border-bottom: 1px solid rgba(211, 244, 59, 0.1);
}

.stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(211, 244, 59, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d3f43b, #b8e62e);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}


.stat-card.primary {
    background: linear-gradient(135deg, #d3f43b 0%, #b8e62e 100%);
    color: #2d2b35;
}

.stat-card.primary .stat-icon {
    background: rgba(255, 255, 255, 0.2);
}

.stat-card.primary .stat-icon i {
    color: #2d2b35;
}

.stat-card.highlight {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
}

.stat-card.highlight .stat-icon {
    background: rgba(255, 255, 255, 0.2);
}

.stat-card.highlight .stat-icon i {
    color: #ffffff;
}

.stat-card.highlight .stat-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #d3f43b 0%, #b8e62e 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.stat-icon i {
    font-size: 1.5rem;
    color: #2d2b35;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: inherit;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.stat-subtitle {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
}

/* Conteúdo principal */
.cliente-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 30px;
    flex: 1;
    overflow: hidden;
}

.content-section {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(211, 244, 59, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.section-header {
    padding: 24px 24px 20px 24px;
    border-bottom: 1px solid rgba(211, 244, 59, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title i {
    color: #d3f43b;
    font-size: 1.2rem;
}

.section-title h4 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #2d2b35;
}

.section-badge {
    background: #d3f43b;
    color: #2d2b35;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-actions {
    display: flex;
    gap: 8px;
}

.section-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(211, 244, 59, 0.2);
    color: #6c757d;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-btn:hover {
    background: #d3f43b;
    color: #2d2b35;
    border-color: #d3f43b;
}

/* Grid de usuários */
.usuarios-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.usuario-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(211, 244, 59, 0.1);
    transition: all 0.3s ease;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.usuario-card:hover {
    background: #ffffff;
    border-color: #d3f43b;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateX(4px);
}

.usuario-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.usuario-avatar {
    position: relative;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #d3f43b 0%, #b8e62e 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usuario-avatar.admin {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.usuario-avatar i {
    font-size: 1.2rem;
    color: #2d2b35;
}

.admin-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #f59e0b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.admin-badge i {
    font-size: 0.7rem;
    color: #ffffff;
}

.usuario-status {
    display: flex;
    justify-content: center;
}

.atividade-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.usuario-info {
    flex: 1;
    min-width: 0;
}

.usuario-nome {
    font-weight: 700;
    color: #2d2b35;
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.usuario-email {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.usuario-email i {
    color: #d3f43b;
    font-size: 0.8rem;
}

.usuario-email span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(211, 244, 59, 0.1);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
}

.metric-item i {
    color: #d3f43b;
    font-size: 0.7rem;
}

.metric-value {
    font-weight: 600;
    color: #2d2b35;
}

.metric-label {
    color: #6c757d;
    font-size: 0.7rem;
}

/* Grid de transações */
.transacoes-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.transacao-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(211, 244, 59, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 16px;
}

.transacao-card:hover {
    background: #ffffff;
    border-color: #d3f43b;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateX(4px);
}

.transacao-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transacao-icon i {
    font-size: 1.1rem;
    color: #ffffff;
}

.transacao-info {
    flex: 1;
    min-width: 0;
}

.transacao-codigo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tipo-label {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.codigo-numero {
    font-weight: 700;
    color: #2d2b35;
    font-size: 0.9rem;
}

.transacao-data {
    font-size: 0.8rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 6px;
}

.transacao-data i {
    color: #d3f43b;
    font-size: 0.7rem;
}

.transacao-valor {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.transacao-valor .valor {
    font-weight: 700;
    color: #10b981;
    font-size: 1rem;
}

.transacao-valor .status {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
}

.transacao-valor .status i {
    font-size: 0.6rem;
}

/* Estado vazio */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i {
    font-size: 4rem;
    color: #d3f43b;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

/* Footer */
.cliente-footer {
    background: #f8f9fa;
    border-top: 1px solid rgba(211, 244, 59, 0.1);
    padding: 20px 30px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.periodo-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

.periodo-info i {
    color: #d3f43b;
    font-size: 0.8rem;
}

.footer-actions {
    display: flex;
    gap: 12px;
}

.footer-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid rgba(211, 244, 59, 0.2);
    border-radius: 8px;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.footer-btn:hover {
    background: #d3f43b;
    color: #2d2b35;
    border-color: #d3f43b;
    transform: translateY(-2px);
}

.footer-btn i {
    font-size: 0.8rem;
}

/* Media query movida para media_queries.css */

/* Media query movida para media_queries.css */

/* Media query movida para media_queries.css */

/* Dark Mode */
.dark-mode .swal2-popup.cliente-modal-moderno-popup {
    background: #2d2b35;
    border-color: rgba(211, 244, 59, 0.3);
}

.dark-mode .cliente-header {
    background: linear-gradient(135deg, #d3f43b 0%, #b8e62e 100%);
}

.dark-mode .cliente-avatar {
    background: rgba(45, 43, 53, 0.9);
    border-color: rgba(45, 43, 53, 0.8);
}

.dark-mode .cliente-avatar i {
    color: #d3f43b;
}

.dark-mode .cliente-detalhes h3 {
    color: #2d2b35;
}

.dark-mode .status-indicator {
    color: #2d2b35;
}

.dark-mode .cliente-stats {
    background: #1f1e24;
}

.dark-mode .stat-card {
    background: #2d2b35;
    border-color: rgba(211, 244, 59, 0.3);
}

.dark-mode .stat-card:hover {
    border-color: #d3f43b;
}

.dark-mode .stat-card.primary {
    background: linear-gradient(135deg, #d3f43b 0%, #b8e62e 100%);
}

.dark-mode .stat-card.highlight {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.dark-mode .stat-icon {
    background: linear-gradient(135deg, #d3f43b 0%, #b8e62e 100%);
}

.dark-mode .stat-icon i {
    color: #2d2b35;
}

.dark-mode .stat-value {
    color: #ffffff;
}

.dark-mode .stat-label {
    color: #a8a8a8;
}

.dark-mode .stat-subtitle {
    color: #a8a8a8;
}

.dark-mode .content-section {
    background: #2d2b35;
    border-color: rgba(211, 244, 59, 0.2);
}

.dark-mode .section-header {
    background: #1f1e24;
    border-bottom-color: #1f1e24;
}

.dark-mode .section-title h4 {
    color: #ffffff;
}

.dark-mode .usuario-card,
.dark-mode .transacao-card {
    background: #1f1e24;
    border-color: rgba(211, 244, 59, 0.2);
}

.dark-mode .usuario-card:hover,
.dark-mode .transacao-card:hover {
    background: #2d2b35;
    border-color: #d3f43b;
}

.dark-mode .usuario-nome,
.dark-mode .transacao-codigo .codigo-numero {
    color: #ffffff;
}

.dark-mode .usuario-email,
.dark-mode .transacao-data {
    color: #a8a8a8;
}

.dark-mode .metric-item {
    background: rgba(211, 244, 59, 0.2);
}

.dark-mode .metric-value {
    color: #ffffff;
}

.dark-mode .metric-label {
    color: #a8a8a8;
}

.dark-mode .transacao-valor .valor {
    color: #10b981;
}

.dark-mode .cliente-footer {
    background: #1f1e24;
    border-top-color: rgba(211, 244, 59, 0.2);
}

.dark-mode .periodo-info {
    color: #a8a8a8;
}

.dark-mode .footer-btn {
    background: #2d2b35;
    border-color: rgba(211, 244, 59, 0.3);
    color: #a8a8a8;
}

.dark-mode .footer-btn:hover {
    background: #d3f43b;
    color: #2d2b35;
}

/* Animações */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Correção para elementos de texto no SweetAlert2 no tema claro */
body:not(.dark-mode) .swal2-container p {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-container .text-center p {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-container small {
    color: #666666 !important;
}

body:not(.dark-mode) .swal2-container small.text-muted {
    color: #666666 !important;
}

body:not(.dark-mode) .swal2-container .text-muted {
    color: #666666 !important;
}

body:not(.dark-mode) .swal2-html-container p {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container small {
    color: #666666 !important;
}

body:not(.dark-mode) .swal2-popup p {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-popup small {
    color: #666666 !important;
}

/* Correções específicas para timeline dentro de modais no tema claro */
body:not(.dark-mode) .swal2-html-container .timeline-container {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .timeline-header {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .timeline-content {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .timeline-content div {
    color: #333333 !important;
}

/* Correções específicas para detalhes de pagamento dentro de modais no tema claro */
body:not(.dark-mode) .swal2-html-container .payment-details {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .payment-header {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .payment-header h5 {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .payment-header .text-muted {
    color: #666666 !important;
}

body:not(.dark-mode) .swal2-html-container .payment-parcela {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .parcela-header {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .parcela-numero {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .parcela-valor {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .parcela-info {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .info-item {
    color: #666666 !important;
}

body:not(.dark-mode) .swal2-html-container .payment-total {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .total-header {
    color: #333333 !important;
}

body:not(.dark-mode) .swal2-html-container .total-header span {
    color: #333333 !important;
}

/* ==================== MEDIA QUERIES - MODAIS.CSS ==================== */
/* ==================== SEÇÃO 768PX - TABLETS E MOBILE ==================== */
@media (max-width: 768px) {
    /* Modal de sucesso do carrinho - Tablets */
    .swal2-popup.cart-success-popup {width: 90vw; max-width: 500px; padding: 1.5rem 1rem;}
    .swal2-popup.cart-success-popup .swal2-title {font-size: 1.5rem;}
    .swal2-popup.cart-success-popup .cart-success-message {padding: 0.5rem; margin: 0;}
    .swal2-popup.cart-success-popup .product-details {display: flex; flex-direction: column; gap: 0.5rem; min-width: 100%;}
    .swal2-popup.cart-success-popup .product-name {font-size: 1rem; font-weight: 600; margin: 0;}
    .swal2-popup.cart-success-popup .quantity-added, .swal2-popup.cart-success-popup .quantity-total {font-size: 0.9rem; margin: 0.3rem 0;}
    .swal2-popup.cart-success-popup .precos-modal-sucesso {margin: 0.5rem 0; line-height: 1.4;}
    .swal2-popup.cart-success-popup .preco-cheio {font-size: 0.85rem;}
    .swal2-popup.cart-success-popup .preco-pago {font-size: 0.95rem; font-weight: 500;}
    .swal2-popup.cart-success-popup .preco-total {font-size: 1rem;}
    .swal2-popup.cart-success-popup .promo-msg, .swal2-popup.cart-success-popup .economia-msg {font-size: 0.85rem;}
    .swal2-popup.cart-success-popup .swal2-actions {gap: 0; flex-direction: row; justify-content: center;}
    .swal2-popup.cart-success-popup .swal2-actions button {padding: 0.5rem 1rem; font-size: 0.9rem; min-width: 140px;}
    .swal2-html-container {margin: 0;}

    /* Modal de cliente - Tablets */
    .swal2-popup.cliente-modal-moderno-popup {width: 95vw; margin: 10px; max-height: 95vh;}
    .cliente-header {padding: 20px; flex-direction: column; gap: 20px; text-align: center;}
    .cliente-info {flex-direction: column; gap: 15px;}
    .cliente-avatar {width: 60px; height: 60px;}
    .cliente-avatar i {font-size: 2rem;}
    .cliente-detalhes h3 {font-size: 1.5rem;}
    .cliente-actions {align-self: stretch; justify-content: center;}

    /* Estatísticas do cliente - Tablets */
    .cliente-stats {grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 15px;}
    .stat-card {padding: 15px; text-align: center;}
    .stat-icon {margin: 0 auto 12px auto;}
    .stat-value {font-size: 1.5rem;}

    /* Conteúdo do cliente - Tablets */
    .cliente-content {padding: 20px; gap: 15px;}
    .section-header {padding: 16px; flex-direction: column; gap: 12px; align-items: stretch;}
    .section-title, .section-actions {justify-content: center;}
    .usuario-card, .transacao-card {flex-direction: column; text-align: center; gap: 12px;}
    .usuario-header {flex-direction: row; justify-content: center;}
    .usuario-metrics {justify-content: center;}
    .transacao-valor {text-align: center; align-items: center;}

    /* Footer - Tablets */
    .footer-content {flex-direction: column; gap: 15px; text-align: center;}
    .footer-actions {justify-content: center;}

    /* Modal de quantidade - Tablets */
    #quantidadeModal .modal-dialog {max-width: 90%; margin: 0.5rem auto;}
    #quantidadeModal .modal-content {border-radius: 12px;}
    #quantidadeModal .modal-header, #quantidadeModal .modal-body, #quantidadeModal .modal-footer {padding: 0.75rem 1.25rem;}
    #quantidadeModal .product-info {margin-bottom: 0.5rem;}
    #quantidadeModal .product-application {line-height: 1.3; margin-bottom: 0.4rem;}
    #quantidadeModal .price-line {display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem;}
    #quantidadeModal .total-line {margin: 0.4rem 0;}
    #quantidadeModal .form-group {margin-bottom: 0.5rem;}
    #quantidadeModal .form-label {margin-bottom: 0.3rem;}
    #quantidadeModal .stock-info-with-button {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.4rem;}
    #quantidadeModal .stock-info-text {flex: 1; min-width: 200px;}
    #quantidadeModal button.check-other-stock-modal {white-space: nowrap;}
}

/* ==================== SEÇÃO 576PX - MOBILE MÉDIO ==================== */
@media (max-width: 576px) {
    /* Modal de quantidade - Mobile Médio */
    #quantidadeModal .modal-dialog {margin: 0.3rem; max-width: calc(100% - 0.6rem);}
    #quantidadeModal .modal-content {border-radius: 10px;}
    #quantidadeModal .modal-header {padding: 0.6rem 0.8rem;}
    #quantidadeModal .modal-title {font-size: 1rem; line-height: 1.2;}
    #quantidadeModal .modal-body {padding: 0.8rem;}

    /* Informações do produto - Mobile Médio */
    #quantidadeModal .product-info {font-size: 0.9rem; margin-bottom: 0.5rem;}
    #quantidadeModal .product-header {font-weight: 600; margin-bottom: 0.4rem; line-height: 1.2;}
    #quantidadeModal .product-application {margin-bottom: 0.4rem; line-height: 1.2; font-size: 0.8rem;}
    #quantidadeModal .application-text {font-size: 0.85rem; max-width: 100%; overflow-wrap: break-word; word-wrap: break-word;}

    /* Preços e promoções - Mobile Médio */
    #quantidadeModal .price-line {display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; align-items: center;}
    #quantidadeModal .price-line .promo-message {font-size: 0.8rem; padding: 0.25rem 0.4rem; white-space: nowrap;}
    #quantidadeModal .price-line .promo-message-cheio {width: 100%; margin-bottom: 0.25rem;}
    #quantidadeModal .total-line {font-size: 0.95rem; font-weight: 600; margin-top: 0.4rem; padding: 0.4rem; background-color: rgba(0,0,0,0.03); border-radius: 6px;}
    #quantidadeModal .total-price {color: #333; font-weight: bold; margin: 0; font-size: 0.8rem;}

    /* Controles de quantidade - Mobile Médio */
    #quantidadeModal .form-group {margin-top: 0.5rem;}
    #quantidadeModal .input-group {max-width: 100%; font-size: 0.8rem;}
    #quantidadeModal .input-group .btn {background-color: #d3f43b; border: none; color: #000; width: auto; height: auto; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;}
    #quantidadeModal #quantidade-input {text-align: center; font-size: 1rem; font-weight: 600;}

    /* Informações de estoque - Mobile Médio */
    #quantidadeModal .stock-info-with-button {flex-direction: column; align-items: center; gap: 0.4rem;}
    #quantidadeModal .stock-info-text {font-size: 0.85rem; width: 100%;}
    #quantidadeModal .stock-value {font-weight: 600;}
    #quantidadeModal button.check-other-stock-modal {padding: 0.35rem; font-size: 0.8rem;}

    /* Informações de promoção - Mobile Médio */
    #quantidadeModal .promotion-info {padding: 0.5rem; margin: 0.5rem 0;}
    #quantidadeModal .promotion-content p {margin-bottom: 0.25rem; font-size: 0.8rem;}

    /* Footer e botões - Mobile Médio */
    #quantidadeModal .modal-footer {padding: 0.8rem; gap: 0.4rem;}
    #quantidadeModal .modal-footer .btn {padding: 0.6rem; margin: 0;}

    /* Modais SweetAlert2 - Mobile Médio */
    .swal2-popup[class*="modal-duplicata"], .swal2-popup.modal-cnpj-invalido, .swal2-popup.modal-campos-obrigatorios, .swal2-popup.modal-sem-permissao, .swal2-popup.modal-sucesso-usuario, .swal2-popup.modal-erro-usuario {margin: 10px; width: calc(100% - 20px) !important;}
    .swal2-popup[class*="modal-"] .swal2-html-container p {font-size: 14px;}

    /* Modal de cliente - Mobile Médio */
    .cliente-stats {grid-template-columns: 1fr;}
    .stat-card {padding: 12px;}
    .usuario-metrics {flex-direction: column; align-items: center;}
    .footer-actions {flex-direction: column; width: 100%;}
    .footer-btn {justify-content: center;}
}

/* ==================== SEÇÃO 480PX - MOBILE PEQUENO ==================== */
@media (max-width: 480px) {
    /* Modal de sucesso do carrinho - Mobile Pequeno */
    .swal2-popup.cart-success-popup {width: 95vw; padding: 1rem 0.75rem;}
    .swal2-popup.cart-success-popup .swal2-title {font-size: 1.3rem;}
    .swal2-popup.cart-success-popup .product-name {font-size: 0.9rem;}
    .swal2-popup.cart-success-popup .quantity-added, .swal2-popup.cart-success-popup .quantity-total {font-size: 0.8rem;}
    .swal2-popup.cart-success-popup .precos-modal-sucesso {margin: 0.4rem 0;}
    .swal2-popup.cart-success-popup .preco-cheio {font-size: 0.8rem;}
    .swal2-popup.cart-success-popup .preco-pago {font-size: 0.85rem;}
    .swal2-popup.cart-success-popup .preco-total {font-size: 0.9rem;}
    .swal2-popup.cart-success-popup .promo-msg, .swal2-popup.cart-success-popup .economia-msg {font-size: 0.8rem;}
    .swal2-popup.cart-success-popup .swal2-actions button {width: 100%; min-width: unset;}
}

/* ==================== SEÇÃO 400PX - MOBILE MUITO PEQUENO ==================== */
@media (max-width: 400px) {
    /* Modal de quantidade - Mobile Muito Pequeno */
    #quantidadeModal .modal-dialog {margin: 0.2rem auto; max-width: 98%;}
    #quantidadeModal .modal-header {padding: 0.4rem 0.6rem;}
    #quantidadeModal .modal-title {font-size: 0.95rem;}
    #quantidadeModal .modal-body {padding: 0.6rem 0.6rem 0;}

    /* Informações do produto - Mobile Muito Pequeno */
    #quantidadeModal .product-info {font-size: 0.85rem; margin-bottom: 0.4rem; gap: 0;}
    #quantidadeModal .product-header {font-size: 0.7rem; margin-bottom: 0.3rem; line-height: 1.1;}
    #quantidadeModal .application-text {font-size: 0.8rem;}

    /* Preços e promoções - Mobile Muito Pequeno */
    #quantidadeModal .price-line {gap: 0.3rem; margin-bottom: 0.4rem;}
    #quantidadeModal .price-line .promo-message {font-size: 0.75rem; padding: 0.2rem 0.3rem;}
    #quantidadeModal .total-line {font-size: 0.9rem; margin-top: 0.3rem; padding: 0.3rem;}

    /* Controles de quantidade - Mobile Muito Pequeno */
    #quantidadeModal .form-group {margin-top: 0.4rem;}
    #quantidadeModal .input-group .btn {padding: 0.3rem 0.4rem; font-size: 0.85rem;}
    #quantidadeModal #quantidade-input {font-size: 0.95rem;}

    /* Informações de estoque - Mobile Muito Pequeno */
    #quantidadeModal .stock-info-text {font-size: 0.8rem;}
    #quantidadeModal button.check-other-stock-modal {padding: 0.3rem; font-size: 0.7rem;}

    /* Informações de promoção - Mobile Muito Pequeno */
    #quantidadeModal .promotion-info {padding: 0.4rem; margin: 0.4rem 0;}
    #quantidadeModal .promotion-content p {margin-bottom: 0.2rem; font-size: 0.75rem;}

    /* Footer e botões - Mobile Muito Pequeno */
    #quantidadeModal .modal-footer {padding: 0; gap: 0.3rem;}
    #quantidadeModal .modal-footer .btn {padding: 0.5rem; font-size: 0.85rem; margin: 10px;}
}

/* Estilos para botões desabilitados no modal de quantidade */
#quantidadeModal .btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

#quantidadeModal .btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

/* Efeito visual para botões desabilitados */
#quantidadeModal .btn.disabled:hover,
#quantidadeModal .btn:disabled:hover {
    transform: none;
    box-shadow: none;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

/* Estilos específicos para os botões de quantidade */
#quantidadeModal #aumentar-quantidade.disabled,
#quantidadeModal #diminuir-quantidade.disabled {
    opacity: 0.25;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

#quantidadeModal #aumentar-quantidade:disabled,
#quantidadeModal #diminuir-quantidade:disabled {
    opacity: 0.25;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

/* Efeito hover para botões de quantidade desabilitados */
#quantidadeModal #aumentar-quantidade.disabled:hover,
#quantidadeModal #diminuir-quantidade.disabled:hover,
#quantidadeModal #aumentar-quantidade:disabled:hover,
#quantidadeModal #diminuir-quantidade:disabled:hover {
    transform: none;
    box-shadow: none;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

/* ==================== MODAL CLIENTE INATIVO ==================== */

/* Modal de cliente inativo - Estilo principal */
.swal2-popup.modal-cliente-inativo {
    border-radius: 16px;
    padding: 2rem;
    max-width: 500px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.modal-cliente-inativo-title {
    color: #ffc107 !important;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.modal-cliente-inativo-content {
    text-align: center;
}

.cliente-inativo-content {
    padding: 0;
}

.inativo-header {
    margin-bottom: 1.5rem;
}

.inativo-header h4 {
    color: #333;
    font-weight: 600;
    margin: 0;
    font-size: 1.2rem;
}

.inativo-header h4 strong {
    color: #ffc107;
    font-weight: 700;
}

.inativo-body {
    text-align: left;
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid #ffc107;
}

.inativo-body p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.contact-item i {
    color: #ffc107;
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-details strong {
    color: #333;
    font-weight: 600;
    font-size: 0.9rem;
}

.phone-link {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

.phone-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.contact-details span {
    color: #666;
    font-size: 0.9rem;
}

/* Modo escuro - Modal cliente inativo */
.dark-mode .swal2-popup.modal-cliente-inativo {
    background: #2d2b35;
    border: 1px solid #444;
}

.dark-mode .modal-cliente-inativo-title {
    color: #d3f43b !important;
}

.dark-mode .inativo-header h4 {
    color: #ffffff;
}

.dark-mode .inativo-header h4 strong {
    color: #d3f43b;
}

.dark-mode .inativo-body {
    background: #1f1e24;
    border-left-color: #d3f43b;
}

.dark-mode .inativo-body p {
    color: #d1d5db;
}

.dark-mode .contact-details strong {
    color: #ffffff;
}

.dark-mode .contact-details span {
    color: #a8a8a8;
}

.dark-mode .phone-link {
    color: #60a5fa;
}

.dark-mode .phone-link:hover {
    color: #93c5fd;
}

/* Responsividade - Modal cliente inativo */
@media (max-width: 768px) {
    .swal2-popup.modal-cliente-inativo {
        margin: 10px;
        padding: 1.5rem;
        max-width: calc(100% - 20px);
    }
    
    .modal-cliente-inativo-title {
        font-size: 1.3rem;
    }
    
    .inativo-header h4 {
        font-size: 1.1rem;
    }
    
    .inativo-body {
        padding: 1.25rem;
    }
    
    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .contact-item i {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .swal2-popup.modal-cliente-inativo {
        padding: 1rem;
        margin: 5px;
        max-width: calc(100% - 10px);
    }
    
    .modal-cliente-inativo-title {
        font-size: 1.2rem;
    }
    
    .inativo-header h4 {
        font-size: 1rem;
    }
    
    .inativo-body {
        padding: 1rem;
    }
    
    .contact-info {
        gap: 0.75rem;
    }
}

/* ==================== MODAL CANCELAR PEDIDO ==================== */

.modal-cancelar-pedido-popup {
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
}

.modal-cancelar-pedido-title {
    color: #000000;
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 16px;
    text-align: center;
}

.modal-cancelar-pedido-content {
    color: #333333;
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 24px;
}

.modal-cancelar-pedido-icon {
    margin: 0 auto 16px;
    width: 64px;
    height: 64px;
}

.modal-cancelar-pedido-icon.swal2-icon.swal2-warning {
    border-color: #ffc107;
    color: #ffc107;
}

.modal-cancelar-pedido-icon.swal2-icon.swal2-warning .swal2-icon-content {
    font-size: 2rem;
    font-weight: 700;
}

.modal-cancelar-pedido-actions {
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

.modal-cancelar-pedido-confirm {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 32px;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 140px;
}

.modal-cancelar-pedido-confirm:hover {
    background-color: #c82333;
    border-color: #bd2130;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.modal-cancelar-pedido-confirm:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

.modal-cancelar-pedido-cancel {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 32px;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 140px;
}

.modal-cancelar-pedido-cancel:hover {
    background-color: #5a6268;
    border-color: #545b62;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.modal-cancelar-pedido-cancel:focus {
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25);
}

/* Modo escuro - Modal Cancelar Pedido */
body.dark-mode .modal-cancelar-pedido-popup {
    background-color: #1a1a1a;
    border: 1px solid #333333;
}

body.dark-mode .modal-cancelar-pedido-title {
    color: #ffffff;
}

body.dark-mode .modal-cancelar-pedido-content {
    color: #e5e5e5;
}

body.dark-mode .modal-cancelar-pedido-icon.swal2-icon.swal2-warning {
    border-color: #d3f43b;
    color: #d3f43b;
}

body.dark-mode .modal-cancelar-pedido-confirm {
    background-color: #dc3545;
    border-color: #dc3545;
}

body.dark-mode .modal-cancelar-pedido-confirm:hover {
    background-color: #c82333;
}

body.dark-mode .modal-cancelar-pedido-cancel {
    background-color: #4a5568;
    border-color: #4a5568;
}

body.dark-mode .modal-cancelar-pedido-cancel:hover {
    background-color: #3a4558;
}

/* Responsividade */
@media (max-width: 768px) {
    .modal-cancelar-pedido-popup {
        padding: 24px 20px;
        margin: 20px;
    }

    .modal-cancelar-pedido-title {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .modal-cancelar-pedido-content {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    .modal-cancelar-pedido-icon {
        width: 56px;
        height: 56px;
    }

    .modal-cancelar-pedido-icon.swal2-icon.swal2-warning .swal2-icon-content {
        font-size: 1.75rem;
    }

    .modal-cancelar-pedido-confirm,
    .modal-cancelar-pedido-cancel {
        padding: 10px 24px;
        font-size: 0.95rem;
        min-width: 120px;
    }

    .modal-cancelar-pedido-actions {
        flex-direction: column;
        gap: 10px;
    }

    .modal-cancelar-pedido-confirm,
    .modal-cancelar-pedido-cancel {
        width: 100%;
    }
}

/* ==================== MODAL MOTIVOS CANCELAMENTO ==================== */

.modal-motivo-cancelar-popup {
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
    width: 90%;
    max-width: 500px;
}

.modal-motivo-cancelar-title {
    color: #000000;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 0 0 12px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal-motivo-cancelar-title i {
    color: #000000;
    font-size: 1.3rem;
}

.modal-motivo-cancelar-content {
    padding: 0;
    margin: 0;
}

.modal-motivo-cancelar-icon {
    margin: 0 auto 12px;
}

.modal-motivo-cancelar-popup div:where(.swal2-icon).swal2-warning {
    border-color: #d3f43b;
    color: #d3f43b;
}

.modal-motivo-container {
    text-align: left;
    padding: 0;
}

.modal-motivo-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 18px;
}

.modal-motivo-header-icon {
    font-size: 1.1rem;
    color: #000000;
    flex-shrink: 0;
}

.modal-motivo-header-text {
    color: #000000;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.modal-motivo-list {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 18px;
    padding: 4px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.modal-motivo-list::-webkit-scrollbar {
    width: 8px;
}

.modal-motivo-list::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px;
}

.modal-motivo-list::-webkit-scrollbar-thumb {
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px solid #ffffff;
}

.modal-motivo-list::-webkit-scrollbar-thumb:hover {
    background: #f8f9fa;
}

.modal-motivo-option {
    margin-bottom: 0;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: 10px;
    background-color: #f8f9fa;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 0;
}

.modal-motivo-option:hover {
    border-color: #d3f43b;
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(211, 244, 59, 0.3);
}

.modal-motivo-radio {
    margin-top: 0;
    margin-right: 12px;
    margin-bottom: 0;
    cursor: pointer;
    border: 2px solid #000000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: #f8f9fa;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    border-radius: 50%;
    align-self: center;
    flex: 0 0 18px;
}

.modal-motivo-radio::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #000000;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-motivo-radio:hover {
    border-color: #d3f43b;
    transform: scale(1.08);
    border-width: 2px;
}

.modal-motivo-radio:checked {
    background-color: #d3f43b;
    border-color: #d3f43b;
    border-width: 2px;
    box-shadow: 0 0 0 4px rgba(211, 244, 59, 0.3);
}

.modal-motivo-radio:checked::before {
    transform: translate(-50%, -50%) scale(1);
    background-color: #000000;
}

.modal-motivo-radio:focus {
    box-shadow: 0 0 0 4px rgba(211, 244, 59, 0.4);
    border-color: #d3f43b;
    outline: none;
}

.modal-motivo-label {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #000000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    line-height: 1.4;
    gap: 10px;
    flex: 1;
    padding-left: 0;
    align-self: center;
}

.modal-motivo-option:hover .modal-motivo-label {
    color: #000000;
}

.modal-motivo-radio:checked + .modal-motivo-label {
    color: #000000;
    font-weight: 600;
}

.modal-motivo-option:hover .modal-motivo-radio:checked + .modal-motivo-label {
    color: #000000;
    font-weight: 600;
}

.modal-motivo-icon {
    font-size: 1rem;
    color: #000000;
    transition: all 0.3s ease;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-motivo-option:hover .modal-motivo-icon {
    color: #000000;
    transform: scale(1.1);
}

.modal-motivo-radio:checked ~ .modal-motivo-label .modal-motivo-icon {
    color: #000000;
}

.modal-motivo-option:hover .modal-motivo-radio:checked ~ .modal-motivo-label .modal-motivo-icon {
    color: #000000;
}

.modal-motivo-text {
    flex: 1;
}

.modal-motivo-custom-container {
    margin-top: 18px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(211, 244, 59, 0.15);
}

.modal-motivo-custom-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #000000;
    font-weight: 600;
    font-size: 0.85rem;
}

.modal-motivo-custom-header i {
    color: #000000;
    font-size: 0.9rem;
}

.modal-motivo-input-group {
    margin-bottom: 10px;
}

.modal-motivo-input {
    border-color: #d3f43b;
    border: 2px solid #d3f43b;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    padding: 10px 12px;
    background-color: #ffffff;
    color: #000000;
    border-radius: 8px;
    line-height: 1.4;
    width: 100%;
}

.modal-motivo-input::placeholder {
    color: #000000;
    opacity: 0.5;
}

.modal-motivo-input:focus {
    border-color: #d3f43b;
    box-shadow: 0 0 0 3px rgba(211, 244, 59, 0.2);
    background-color: #ffffff;
    color: #000000;
    outline: none;
}

.modal-motivo-contador {
    font-size: 0.75rem;
    text-align: right;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 8px;
    color: #000000;
    letter-spacing: 0.5px;
    padding-right: 2px;
}

.modal-contador-value {
    font-weight: 700;
    transition: all 0.3s ease;
    color: inherit;
}

.modal-contador-max {
    color: #000000;
    opacity: 0.6;
}

.modal-motivo-contador.modal-contador-success {
    color: #000000;
}

.modal-motivo-contador.modal-contador-success .modal-contador-value {
    color: #000000;
}

.modal-motivo-contador.modal-contador-warning {
    color: #000000;
}

.modal-motivo-contador.modal-contador-warning .modal-contador-value {
    color: #000000;
}

.modal-motivo-contador.modal-contador-danger {
    color: #000000;
}

.modal-motivo-contador.modal-contador-danger .modal-contador-value {
    color: #000000;
}

.modal-motivo-cancelar-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.modal-motivo-cancelar-confirm {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 120px;
    display: inline-block;
    cursor: pointer;
    border: 2px solid #000000;
    box-shadow: none;
    --swal2-confirm-button-background-color: #000000;
    --swal2-action-button-focus-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
}

.modal-motivo-cancelar-confirm:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.modal-motivo-cancelar-confirm:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
    outline: none;
}

.modal-motivo-cancelar-confirm:active {
    transform: translateY(0);
}

.modal-motivo-cancelar-cancel {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 120px;
    display: inline-block;
    cursor: pointer;
    border: 2px solid #6c757d;
    box-shadow: none;
    --swal2-cancel-button-background-color: #6c757d;
    --swal2-action-button-focus-box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.5);
}

.modal-motivo-cancelar-cancel:hover {
    background-color: #5a6268;
    border-color: #545b62;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.modal-motivo-cancelar-cancel:focus {
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25);
    outline: none;
}

.modal-motivo-cancelar-cancel:active {
    transform: translateY(0);
}

/* Modo escuro - Modal Motivos */
body.dark-mode .modal-motivo-cancelar-popup {
    background-color: #1a1a1a;
    border: 1px solid #333333;
}

body.dark-mode .modal-motivo-cancelar-title {
    color: #ffffff;
}

body.dark-mode .modal-motivo-cancelar-title i {
    color: #d3f43b;
}

body.dark-mode .modal-motivo-header {
    background-color: #000000;
    border-color: #d3f43b;
}

body.dark-mode .modal-motivo-header-text {
    color: #ffffff;
}

body.dark-mode .modal-motivo-option {
    background-color: #1a1a1a;
    border-color: #ffffff;
}

body.dark-mode .modal-motivo-option .modal-motivo-label {
    color: #ffffff;
}

body.dark-mode .modal-motivo-option .modal-motivo-icon {
    color: #ffffff;
}

body.dark-mode .modal-motivo-option:hover {
    background-color: #000000;
    border-color: #d3f43b;
}

body.dark-mode .modal-motivo-radio {
    border-color: #ffffff;
    background-color: #1a1a1a;
}

body.dark-mode .modal-motivo-radio::before {
    background-color: #000000;
}

body.dark-mode .modal-motivo-radio:hover {
    border-color: #d3f43b;
}

body.dark-mode .modal-motivo-radio:checked {
    background-color: #d3f43b;
    border-color: #d3f43b;
}

body.dark-mode .modal-motivo-radio:checked::before {
    background-color: #000000;
}

body.dark-mode .modal-motivo-label {
    color: #e5e5e5;
}

body.dark-mode .modal-motivo-option:hover .modal-motivo-label {
    color: #ffffff;
}

body.dark-mode .modal-motivo-radio:checked + .modal-motivo-label {
    color: #000000;
}

body.dark-mode .modal-motivo-option:hover .modal-motivo-radio:checked + .modal-motivo-label {
    color: #d3f43b;
}

body.dark-mode .modal-motivo-icon {
    color: #999999;
}

body.dark-mode .modal-motivo-option:hover .modal-motivo-icon {
    color: #d3f43b;
}

body.dark-mode .modal-motivo-radio:checked ~ .modal-motivo-label .modal-motivo-icon {
    color: #000000;
}

body.dark-mode .modal-motivo-option:hover .modal-motivo-radio:checked ~ .modal-motivo-label .modal-motivo-icon {
    color: #d3f43b;
}

body.dark-mode .modal-motivo-custom-container {
    background-color: #1a1a1a;
    border-color: #d3f43b;
}

body.dark-mode .modal-motivo-custom-header {
    color: #ffffff;
}

body.dark-mode .modal-motivo-input {
    background-color: #1a1a1a;
    border-color: #d3f43b;
    color: #ffffff;
}

body.dark-mode .modal-motivo-input:focus {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #d3f43b;
}

body.dark-mode .modal-motivo-input::placeholder {
    color: #ffffff;
    opacity: 0.5;
}

body.dark-mode .modal-motivo-contador {
    color: #d3f43b;
}

body.dark-mode .modal-motivo-contador.modal-contador-success {
    color: #d3f43b;
}

body.dark-mode .modal-motivo-contador.modal-contador-success .modal-contador-value {
    color: #d3f43b;
}

body.dark-mode .modal-contador-max {
    color: #ffffff;
    opacity: 0.6;
}

body.dark-mode .modal-motivo-list::-webkit-scrollbar-track {
    background: #1a1a1a;
}

body.dark-mode .modal-motivo-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d3f43b 0%, #c3e42b 100%);
    border-color: #1a1a1a;
}

body.dark-mode .modal-motivo-cancelar-confirm {
    background-color: #000000;
    border-color: #000000;
}

body.dark-mode .modal-motivo-cancelar-confirm:hover {
    background-color: #1a1a1a;
}

body.dark-mode .modal-motivo-cancelar-cancel {
    background-color: #4a5568;
    border-color: #4a5568;
}

body.dark-mode .modal-motivo-cancelar-cancel:hover {
    background-color: #3a4558;
}

/* Responsividade - Modal Motivos */
@media (max-width: 768px) {
    .modal-motivo-cancelar-popup {
        width: 95%;
        max-width: 380px;
    }

    .modal-motivo-cancelar-title {
        font-size: 1.1rem;
        padding: 16px 16px 10px;
    }

    .modal-motivo-cancelar-title i {
        font-size: 1.2rem;
    }

    .modal-motivo-cancelar-content {
        padding: 0 16px 16px;
    }

    .modal-motivo-header {
        padding: 10px 14px;
        gap: 8px;
        margin-bottom: 14px;
    }

    .modal-motivo-header-icon {
        font-size: 1rem;
    }

    .modal-motivo-header-text {
        font-size: 0.8rem;
    }

    .modal-motivo-list {
        max-height: 240px;
        gap: 8px;
        padding: 4px;
    }

    .modal-motivo-option {
        padding: 12px 14px;
        min-height: 48px;
    }

    .modal-motivo-radio {
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }

    .modal-motivo-radio::before {
        width: 6px;
        height: 6px;
    }

    .modal-motivo-label {
        font-size: 0.8rem;
        line-height: 1.3;
        gap: 8px;
    }

    .modal-motivo-icon {
        font-size: 0.9rem;
        width: 18px;
    }

    .modal-motivo-custom-container {
        padding: 14px;
        margin-top: 14px;
    }

    .modal-motivo-custom-header {
        font-size: 0.8rem;
        margin-bottom: 10px;
    }

    .modal-motivo-input {
        font-size: 16px;
        padding: 10px 12px;
    }

    .modal-motivo-contador {
        font-size: 0.7rem;
        margin-top: 6px;
    }

    .modal-motivo-cancelar-confirm,
    .modal-motivo-cancelar-cancel {
        padding: 8px 20px;
        font-size: 0.85rem;
        min-width: 100px;
    }

    .modal-motivo-cancelar-actions {
        flex-direction: column;
        gap: 8px;
    }

    .modal-motivo-cancelar-confirm,
    .modal-motivo-cancelar-cancel {
        width: 100%;
    }
}

/* ==================== PEDIDOS COMPLEMENTO - MODAIS DE PAGAMENTO ==================== */

/* Estilos para o alerta de pedidos complemento */
.pedidos-complemento-alert {
    margin-bottom: 1rem;
}

.pedidos-complemento-alert-content {
    font-size: 0.875rem;
}

.pedidos-complemento-title {
    font-size: 0.875rem;
}

.pedidos-complemento-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pedido-complemento-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.badge.pedido-complemento-subtotal {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}
.badge.pedido-complemento-forma {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}
.badge.pedido-complemento-doc {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

/* Estilos específicos para os badges dos pedidos complemento */
.pedido-complemento-doc {
    background-color: #000000;
    color: #ffffff;
}

.pedido-complemento-forma {
    background-color: #000000;
    color: #ffffff;
}

.pedido-complemento-subtotal {
    background-color: #d3f43b;
    color: #000000;
}

/* Modo escuro - Pedidos complemento */
.dark-mode .pedidos-complemento-alert-content {
    background-color: #2d2b35;
    border-color: #4a5568;
    border-left: 4px solid #4299e1;
    color: #e5e7eb;
}

.dark-mode .pedidos-complemento-title {
    color: #e5e7eb;
}

.dark-mode .pedidos-complemento-alert-content i {
    color: #4299e1;
}

/* Modo escuro - Badges dos pedidos complemento */
.dark-mode .pedido-complemento-doc {
    background-color: #000000;
    color: #ffffff;
}

.dark-mode .pedido-complemento-forma {
    background-color: #000000;
    color: #ffffff;
}

.dark-mode .pedido-complemento-subtotal {
    background-color: #d3f43b;
    color: #000000;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    .pedidos-complemento-alert-content {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    .pedidos-complemento-title {
        font-size: 0.8rem;
    }

    .pedido-complemento-item {
        font-size: 0.75rem;
        gap: 0.4rem;
    }

    .badge.pedido-complemento-subtotal {
        font-size: 0.8em;
        padding: 0.3em 0.5em;
    }
    .badge.pedido-complemento-forma {
        font-size: 0.8em;
        padding: 0.3em 0.5em;
    }
    .badge.pedido-complemento-doc {
        font-size: 0.8em;
        padding: 0.3em 0.5em;
    }
}

/* =======================================
   MODAL DE ORÇAMENTOS
   ======================================= */

.swal2-popup.modal-orcamentos-popup {
    padding: 2rem;
}

.modal-orcamentos-content {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
}

.orcamentos-empty-state {
    text-align: center;
    padding: 2rem 1rem;
}

.orcamentos-empty-state i {
    color: #6c757d;
    margin-bottom: 1rem;
}

.orcamentos-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

.orcamento-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
    gap: 1rem;
}

.orcamento-item:hover {
    background: #e9ecef;
    border-color: #d3f43b;
    box-shadow: 0 2px 8px rgba(211, 244, 59, 0.2);
    transform: translateY(-2px);
}

.orcamento-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.orcamento-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.orcamento-numero {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2d2b35;
}

.orcamento-data {
    font-size: 0.75rem;
    color: #6c757d;
}

.orcamento-detalhes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.orcamento-detalhe-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #495057;
}

.orcamento-detalhe-item i {
    color: #6c757d;
    width: 16px;
}

.orcamento-total {
    font-weight: 600;
    color: #28a745;
    font-size: 0.75rem;
}

.orcamento-observacao {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f0f0f0;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #495057;
    border-left: 3px solid #d3f43b;
}

.orcamento-observacao i {
    color: #6c757d;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.orcamento-obs1 {
    flex: 1;
    word-wrap: break-word;
    line-height: 1.4;
}

.orcamento-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    width: 100%;
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid #e9ecef;
}

.btn-orcamento {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-orcamento i {
    font-size: 0.875rem;
}

.btn-orcamento-carregar {
    background: #d3f43b;
    color: #2d2b35;
}

.btn-orcamento-carregar:hover {
    background: #c5e632;
    transform: scale(1.05);
}

.btn-orcamento-excluir {
    background: #dc3545;
    color: #ffffff;
}

.btn-orcamento-excluir:hover {
    background: #c82333;
    transform: scale(1.05);
}

/* Dark Mode - Modal de Orçamentos */
.dark-mode .swal2-popup.modal-orcamentos-popup {
    background: var(--primary-bg);
}

.dark-mode .orcamentos-empty-state i {
    color: #6c757d;
}

.dark-mode .orcamentos-empty-state .text-muted {
    color: #a8a8a8;
}

.dark-mode .orcamento-item {
    background: #1f1e24;
    border-color: #374151;
}

.dark-mode .orcamento-item:hover {
    background: #2d2b35;
    border-color: #d3f43b;
    box-shadow: 0 2px 8px rgba(211, 244, 59, 0.3);
}

.dark-mode .orcamento-numero {
    color: #ffffff;
}

.dark-mode .orcamento-data {
    color: #a8a8a8;
}

.dark-mode .orcamento-detalhe-item {
    color: #e5e7eb;
}

.dark-mode .orcamento-detalhe-item i {
    color: #d3f43b;
}

.dark-mode .orcamento-total {
    color: #10b981;
}

.dark-mode .orcamento-observacao {
    background: #2d2b35;
    color: #e5e7eb;
    border-left-color: #d3f43b;
}

.dark-mode .orcamento-observacao i {
    color: #d3f43b;
}

.dark-mode .orcamento-actions {
    border-top-color: #374151;
}

.dark-mode .btn-orcamento-carregar {
    background: #d3f43b;
    color: #2d2b35;
}

.dark-mode .btn-orcamento-carregar:hover {
    background: #c5e632;
}

.dark-mode .btn-orcamento-excluir {
    background: #dc3545;
    color: #ffffff;
}

.dark-mode .btn-orcamento-excluir:hover {
    background: #c82333;
}

/* Responsividade - Modal de Orçamentos */
@media (max-width: 768px) {
    .swal2-popup.modal-orcamentos-popup {
        width: 95vw !important;
        padding: 1.5rem 1rem;
    }

    .orcamento-item {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .orcamento-actions {
        justify-content: stretch;
        width: 100%;
    }

    .btn-orcamento {
        flex: 1;
        justify-content: center;
    }

    .orcamento-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .orcamento-detalhes {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .swal2-popup.modal-orcamentos-popup {
        padding: 1rem 0.75rem;
    }

    .orcamento-item {
        padding: 1rem;
    }

    .orcamento-numero {
        font-size: 1rem;
    }

    .btn-orcamento {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .btn-orcamento span {
        display: none;
    }

    .btn-orcamento i {
        font-size: 1rem;
    }
}

/* Modal de aviso - Orçamento sem alterações */
.swal2-popup.modal-orcamento-sem-alteracoes {
    padding: 2rem;
}

.dark-mode .swal2-popup.modal-orcamento-sem-alteracoes {
    background: var(--primary-bg);
}

.dark-mode .swal2-popup.modal-orcamento-sem-alteracoes .text-muted {
    color: #a8a8a8;
}

/* =============================================================================
   MODAIS DE ATUALIZAÇÕES
   ============================================================================= */

.modal-atualizacao {
    border-radius: 12px;
}

.modal-atualizacao .swal2-html-container {
    font-size: 0.85em;
}

.modal-atualizacao .swal2-html-container ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.modal-atualizacao .swal2-html-container ul li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: flex-start;
}

.modal-atualizacao .swal2-html-container ul li:last-child {
    border-bottom: none;
}

.modal-atualizacao .swal2-html-container ul li strong {
    color: var(--primary-color);
    margin-right: 8px;
}

.modal-atualizacao #naoMostrarAtualizacoes {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.modal-atualizacao label {
    user-select: none;
}

.modal-atualizacao label:hover {
    opacity: 0.8;
}

.modal-atualizacao-buttons-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 10px 0;
    width: 100%;
}

.modal-atualizacao-btn {
    flex: 0 0 auto;
}

.modal-atualizacao-btn-carrinho {
    background-color: #000000;
    color: #ffffff;
    border: none;
}

.modal-atualizacao-btn-carrinho:hover {
    background-color: #333333;
    color: #ffffff;
}

/* Modo escuro para modais de atualização */
.dark-mode .modal-atualizacao .swal2-html-container ul li {
    border-bottom-color: rgba(255,255,255,0.1);
}

.dark-mode .modal-atualizacao .swal2-html-container ul li strong {
    color: var(--primary-color);
}

.dark-mode .modal-atualizacao label span {
    color: #a8a8a8;
}

/* =============================================================================
   CARROSSEL DE ATUALIZAÇÕES
   ============================================================================= */

.modal-atualizacao-carrossel {
    border-radius: 16px;
    overflow: hidden;
}

.modal-atualizacao-carrossel .swal2-html-container {
    padding: 0;
    margin: 0;
}

/* Título específico do carrossel */
.modal-atualizacao-carrossel .swal2-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
    padding: 20px 20px 0;
}

/* Footer específico do carrossel */
.modal-atualizacao-carrossel .swal2-footer {
    padding: 0;
    margin: 0;
    border-top: none;
}

.atualizacoes-carrossel-container {
    width: 100%;
    max-width: 100%;
}

/* Contador de slides */
.atualizacao-contador {
    text-align: center;
    padding: 10px 15px 8px;
    color: #000;
    font-weight: 600;
    font-size: 0.75rem;
}

.atualizacao-contador .slide-atual {
    font-size: 1rem;
    font-weight: 700;
}

/* Swiper Container */
.atualizacoes-swiper {
    width: 100%;
    height: 320px;
    position: relative;
}

.atualizacao-slide {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atualizacao-content {
    width: 100%;
    max-width: 500px;
    text-align: center;
}

/* Header da atualização */
.atualizacao-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.atualizacao-icon {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.atualizacao-title h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.atualizacao-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--primary-color);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    margin-top: 8px;
}

/* Body da atualização */
.atualizacao-body {
    text-align: left;
    color: var(--text-secondary);
    line-height: 1.6;
}

.atualizacao-body .feature-highlight {
    text-align: center;
}

.atualizacao-body .feature-icon {
    margin-bottom: 15px;
}

.atualizacao-body .benefits-list {
    text-align: left;
}

/* Texto principal da descrição */
.atualizacao-body .lead {
    font-size: 0.8rem;
    font-weight: 400;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.atualizacao-body .benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.atualizacao-body .benefit-item:last-child {
    border-bottom: none;
}

.atualizacao-body .benefit-item span {
    flex: 1;
    font-size: 0.8rem;
}

/* Slides individuais */
.atualizacao-slide {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atualizacao-content {
    width: 100%;
    max-width: 450px;
    text-align: center;
}

/* Wrapper do Swiper - customizações específicas */
.atualizacoes-swiper .swiper-wrapper {
    align-items: center;
}

/* Total de slides no contador */
.atualizacao-contador .total-slides {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Navegação customizada - Sobrescreve estilos padrão do Swiper */
.atualizacoes-swiper .swiper-button-next.atualizacao-nav-next {
    width: 44px;
    height: 44px;
    background: var(--primary-color);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    outline: none;
}
.atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev {
    width: 44px;
    height: 44px;
    background: var(--primary-color);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    outline: none;
}

.atualizacoes-swiper .swiper-button-next.atualizacao-nav-next {
    right: 10px;
    left: auto;
}

.atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev {
    left: 10px;
    right: auto;
}

.atualizacoes-swiper .swiper-button-next.atualizacao-nav-next:hover {
    background: var(--accent-color);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev:hover {
    background: var(--accent-color);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.atualizacoes-swiper .swiper-button-next.atualizacao-nav-next::after {
    display: none;
    content: none;
}
.atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev::after {
    display: none;
    content: none;
}

.atualizacoes-swiper .swiper-button-next.atualizacao-nav-next i {
    font-size: 1.2rem;
    color: #000;
    margin: 0;
    padding: 0;
    display: inline-block;
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
}
.atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev i {
    font-size: 1.2rem;
    color: #000;
    margin: 0;
    padding: 0;
    display: inline-block;
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
}

/* Garantir que os ícones sejam visíveis mesmo quando desabilitados */
.atualizacoes-swiper .swiper-button-next.atualizacao-nav-next.swiper-button-disabled i {
    color: #000;
    opacity: 1;
}
.atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev.swiper-button-disabled i {
    color: #000;
    opacity: 1;
}

/* Paginação customizada */
.atualizacao-pagination {
    bottom: 10px !important;
    text-align: center;
}

.atualizacao-pagination .swiper-pagination-bullet {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    transition: all 0.3s ease;
    opacity: 1;
}

.atualizacao-pagination .swiper-pagination-bullet i {
    font-size: 0.85rem;
    color: rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.atualizacao-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
    transform: scale(1.2);
}

.atualizacao-pagination .swiper-pagination-bullet-active i {
    color: #000;
}

/* Checkbox container */
.atualizacao-checkbox-container {
    padding: 15px;
    border-top: 1px solid rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.02);
}

.atualizacao-checkbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.atualizacao-checkbox-label:hover {
    color: var(--text-primary);
}

.atualizacao-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.checkbox-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Elementos específicos do checkbox */
.atualizacao-checkbox-label input[type="checkbox"] {
    accent-color: var(--primary-color);
}

.atualizacao-checkbox-label .checkbox-text i {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.atualizacao-checkbox-label:hover .checkbox-text i {
    color: var(--primary-color);
}

/* Footer do modal */
.modal-atualizacao-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    background: rgba(0,0,0,0.02);
}

.footer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.footer-info i {
    color: var(--primary-color);
    font-size: 0.8rem;
}

.footer-info span {
    font-style: italic;
}

.footer-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Estados dos botões de ação */
.btn-atualizacao:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn-atualizacao:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-atualizacao i {
    font-size: 0.8rem;
}

.btn-atualizacao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-atualizacao-carrinho {
    background: #000;
    color: white;
}

.btn-atualizacao-carrinho:hover {
    background: #333;
    transform: translateY(-2px);
}

.btn-atualizacao-entendi {
    background: var(--primary-color);
    color: #000;
}

.btn-atualizacao-entendi:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
}

/* Estados de navegação desabilitados */
.atualizacoes-swiper .swiper-button-next.atualizacao-nav-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: translateY(-50%);
    background: var(--primary-color);
}
.atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: translateY(-50%);
    background: var(--primary-color);
}

.atualizacoes-swiper .swiper-button-next.atualizacao-nav-next.swiper-button-disabled:hover {
    background: var(--primary-color);
    transform: translateY(-50%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0.3;
}
.atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev.swiper-button-disabled:hover {
    background: var(--primary-color);
    transform: translateY(-50%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0.3;
}

/* Estados da paginação */
.atualizacao-pagination .swiper-pagination-bullet:hover {
    background: rgba(0,0,0,0.2);
    transform: scale(1.05);
}

.atualizacao-pagination .swiper-pagination-bullet:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Animações de transição */
.atualizacao-slide {
    transition: opacity 0.3s ease;
}

.atualizacao-content {
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modo escuro para carrossel */
.dark-mode .atualizacao-contador {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: #000;
}

.dark-mode .atualizacao-body .benefit-item {
    border-bottom-color: rgba(255,255,255,0.1);
}

.dark-mode .atualizacao-body .lead {
    color: var(--text-secondary);
}

.dark-mode .atualizacao-checkbox-container {
    background: rgba(255,255,255,0.02);
    border-top-color: rgba(255,255,255,0.1);
}

.dark-mode .modal-atualizacao-footer {
    background: rgba(255,255,255,0.02);
}

.dark-mode .modal-atualizacao-carrossel .swal2-title {
    color: var(--text-primary);
}

.dark-mode .footer-info {
    color: var(--text-secondary);
}

.dark-mode .atualizacao-pagination .swiper-pagination-bullet:hover {
    background: rgba(255,255,255,0.2);
}

/* Modo escuro para navegação */
.dark-mode .atualizacoes-swiper .swiper-button-next.atualizacao-nav-next {
    background: var(--primary-color);
    color: #000;
}
.dark-mode .atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev {
    background: var(--primary-color);
    color: #000;
}

.dark-mode .atualizacoes-swiper .swiper-button-next.atualizacao-nav-next:hover {
    background: var(--accent-color);
    color: #000;
}
.dark-mode .atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev:hover {
    background: var(--accent-color);
    color: #000;
}

.dark-mode .atualizacoes-swiper .swiper-button-next.atualizacao-nav-next i {
    color: #000;
}
.dark-mode .atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev i {
    color: #000;
}

.dark-mode .atualizacoes-swiper .swiper-button-next.atualizacao-nav-next.swiper-button-disabled {
    background: var(--primary-color);
    opacity: 0.3;
}
.dark-mode .atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev.swiper-button-disabled {
    background: var(--primary-color);
    opacity: 0.3;
}

.dark-mode .atualizacoes-swiper .swiper-button-next.atualizacao-nav-next.swiper-button-disabled i {
    color: #000;
}
.dark-mode .atualizacoes-swiper .swiper-button-prev.atualizacao-nav-prev.swiper-button-disabled i {
    color: #000;
}

/* Responsividade para carrossel */
@media (max-width: 768px) {
    .modal-atualizacao-carrossel {
        width: 95vw !important;
        margin: 10px;
    }
    
    .atualizacoes-swiper {
        height: 280px;
    }
    
    .atualizacao-slide {
        padding: 12px;
    }
    
    .atualizacao-title h3 {
        font-size: 1rem;
    }
    
    .footer-actions {
        flex-direction: column;
    }
    
    .btn-atualizacao {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .atualizacoes-swiper {
        height: 250px;
    }
    
    .atualizacao-nav-next,
    .atualizacao-nav-prev {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .atualizacao-pagination .swiper-pagination-bullet {
        width: 32px;
        height: 32px;
    }
    
    .atualizacao-slide {
        padding: 8px;
    }
    
    .atualizacao-body .benefit-item span {
        font-size: 0.75rem;
    }
    
    .atualizacao-body .lead {
        font-size: 0.75rem;
    }
    
    .atualizacao-contador {
        padding: 8px 12px 6px;
        font-size: 0.7rem;
    }
}

/* ========================================
   MODAL ESCOLHER AÇÃO CARRINHO
   ======================================== */

.modal-escolher-acao-carrinho {
    padding: 0 !important;
}

.modal-escolher-acao-carrinho .swal2-html-container {
    padding: 0 !important;
    margin: 0 !important;
}

.modal-escolher-acao-carrinho .swal2-content {
    padding: 0 !important;
    margin: 0 !important;
}

.modal-escolher-acao-carrinho .swal2-header {
    padding: 1.5rem 1.5rem 0 1.5rem !important;
}

.modal-escolher-acao-carrinho .swal2-actions {
    padding: 0 1.5rem 1.5rem 1.5rem !important;
    margin: 1rem 0 0 0 !important;
}