:root {
    /* Primary Colors */
    --primary-color: #0d6efd;
    --primary-color-light: #69a5ff;
    --primary-color-subtle-bg: rgba(13, 110, 253, 0.1);
    --primary-color-subtle-bg-light: rgba(13, 110, 253, 0.05);
    --primary-color-shadow: rgba(13, 110, 253, 0.3);
    
    /* Base Colors */
    --white: #fff;
    --white-subtle-bg: rgba(252, 253, 255, 0.9);
    --white-transparent-80: rgba(255, 255, 255, 0.8);
    --white-transparent-50: rgba(255, 255, 255, 0.5);
    --white-transparent-20: rgba(255, 255, 255, 0.2);
    --black: #000;
    --black-subtle-bg: rgba(0, 0, 0, 0.05);
    --black-transparent-10: rgba(0, 0, 0, 0.1);
    --black-shadow: rgba(0, 0, 0, 0.15);
    --black-shadow-medium: rgba(0, 0, 0, 0.2);
    
    /* Text Colors */
    --text-dark: #212529;
    --placeholder-text: #6c757d;
    --orange-text: orangered;
    
    /* Success Colors */
    --success-color: #198754;
    --success-color-light: #20c997;
    --success-shadow: rgba(25, 135, 84, 0.4);
    --success-shadow-strong: rgba(25, 135, 84, 0.7);
    --success-subtle-bg: rgba(25, 135, 84, 0.25);
    
    /* Danger/Error Colors */
    --danger-color: #dc3545;
    --danger-shadow: rgba(220, 53, 69, 0.4);
    --danger-subtle-bg: rgba(220, 53, 69, 0.25);
    --danger-subtle-bg-light: rgba(220, 53, 69, 0.15);
    --danger-bg-light: #fff5f5;
    
    /* Loading Colors */
    --loading-border: rgba(255, 77, 77, 0.3);
    
    /* Filter Button Colors */
    --filter-btn-bg: #e9ecef;
    --filter-btn-text: #005ca3;
    --filter-btn-hover-bg: #005EB8;
    
    /* Buskasher Brand Colors */
    --buskasher-grad-start: #005EB8;
    --buskasher-grad-end: #08305e;
    
    /* Card & Border Colors */
    --card-image-bg: #f8f9fa;
    --border-color: #dee2e6;
    --scrollbar-track: #e9ecef;
    
    /* Certifier Colors */
    --color-bka: #000;
    --color-bdk: #198754;
    --color-lkb: #ffc107;
    --color-lkb-text: #000;
    --color-mekor: #003366;
    
    /* Special Product Info Colors (Pessach & Yashan) */
    --pessach-color: #0d47a1;
    --pessach-bg: rgba(13, 71, 161, 0.1);
    --yashan-color: #d84315;
    --yashan-bg: rgba(216, 67, 21, 0.1);
    
    /* Dark Theme Colors */
    --dark-bg: #19191c;
    --dark-buskasher-grad-start: #0f2b45;
    --dark-buskasher-grad-end: #1e1e22;
    --dark-text: #e0e0e0;
    --dark-modal-bg: #2d2d2d;
    --dark-border: #404040;
    --dark-input-bg: #3a3a3a;
    --dark-input-bg-focus: #404040;
    --dark-input-border: #2a2a2a;
    --dark-search-input-bg: #35353a;
}

/* Estilos para mensagem de erro de email */
#registerEmailError {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-control.is-invalid {
    border-color: var(--danger-color);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 0.25rem var(--danger-subtle-bg);
}

body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: .8rem;
    line-height: 1.45;
}

#containerBuskasherLogoDesktop {
    width: 250px;
}

#containerBuskasherLogoMobile {
  width: 150px;
}

#searchBarContainer {
    border-radius: 10px;
    transition: 0.3s ease-in-out;
    background-color: var(--white);
    overflow: hidden;
}

#searchBarContainer > .input-group-text,
#searchBarContainer > .form-control,
#searchBarContainer > .btn {
    border: none;
}

#searchBarContainer > .btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

#searchBarContainer > .form-control:focus {
    box-shadow: none;
}

#searchBarContainer > #filterModalButton {
    border-left: 1px solid var(--border-color);
}

#searchInput.form-control {
    background-color: transparent;
}

#searchInput.form-control:focus {
    box-shadow: none;
    outline: none;
}

#searchInput::placeholder {
    color: var(--placeholder-text);
}

.certifier-filter {
    transition: 0.15s ease-in-out;
}

.certifier-filter.checked {
    border: 1px solid var(--primary-color) !important;
    background-color: var(--primary-color-subtle-bg) !important;
}

#desktopFilters > .certifier-filter.checked {
    border: 1px solid var(--primary-color-light) !important;
    background-color: var(--white-subtle-bg) !important;
}

#desktopFilters > .start {
    border-radius: 10px 0 0 10px;
}

#desktopFilters > .end {
    border-radius: 0 10px 10px 0;
}

#tabelaProdutos th {
    text-align: center;
    vertical-align: middle;
}

/* Adicionar bordas entre as linhas da tabela */
#tabelaProdutos tbody tr {
    border-bottom: 1px solid #dee2e6;
}

#tabelaProdutos tbody tr:last-child {
    border-bottom: none;
}

.product-details-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.product-details-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    flex-shrink: 0;
}

.product-details-info {
    text-align: left;
}

.product-details-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.product-details-meta {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

.dt-center {
    text-align: center;
    vertical-align: middle;
}

.certifier-col {
    width: 120px !important;
}

.badge-src {
    font-size: .75rem;
}

.dt-column-order {
    display: none !important;
}

.text-orange {
    color: var(--orange-text);
}

.text-pessach {
    color: var(--pessach-color) !important;
    font-weight: 500;
}

.text-yashan {
    color: var(--yashan-color) !important;
    font-weight: 500;
}

.bg-pessach {
    background-color: var(--pessach-bg);
    padding: 0.5rem;
    border-radius: 0.25rem;
    border-left: 3px solid var(--pessach-color);
}

.bg-yashan {
    background-color: var(--yashan-bg);
    padding: 0.5rem;
    border-radius: 0.25rem;
    border-left: 3px solid var(--yashan-color);
}

.bg-bka {
    background: var(--color-bka);
    color: var(--white) !important;
}

.bg-bdk {
    background: var(--color-bdk);
    color: var (--white) !important;
}

.bg-lkb {
    background: var(--color-lkb);
    color: var(--color-lkb-text) !important;
}

.bg-mekor {
    background: var(--color-mekor);
    color: var(--white) !important;
}

.border-bka {
    border-left: 5px solid var(--color-bka) !important;
}

.border-bdk {
    border-left: 5px solid var(--color-bdk) !important;
}

.border-lkb {
    border-left: 5px solid var(--color-lkb) !important;
}

.border-mekor {
    border-left: 5px solid var(--color-mekor) !important;
}

#btnTop {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    line-height: 1;
    z-index: 1080;
}

/* ===== BOTÃO DE AÇÕES FLUTUANTE (LADO ESQUERDO) ===== */
#btnActions {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1080;
    display: none;
}

/* Botão principal circular */
#btnActionsMain {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    padding: 0;
    position: relative;
    z-index: 2;
}

#btnActionsMain:hover {
    transform: scale(1.1);
}

#btnActionsMain #mainActionIconI {
    transition: transform 0.3s ease;
}

#btnActions.expanded #mainActionIconI {
    transform: rotate(90deg);
}

/* Painel expandido */
#btnActionsPanel {
    position: absolute;
    bottom: 56px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.25s ease;
    pointer-events: none;
}

#btnActions.expanded #btnActionsPanel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Botões do painel */
.action-panel-btn {
    white-space: nowrap;
    border-radius: 10px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    background-color: #fff !important;
    border: 1px solid #0d6efd !important;
    color: #0d6efd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease !important;
    display: flex;
    align-items: center;
}

.action-panel-btn:hover {
    background-color: #0d6efd !important;
    color: #fff !important;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.35);
}

.action-panel-btn:active {
    transform: scale(0.97);
}

/* ===== BANNER DE WEBPAGE (SUBCERTIFICADORA OU COMÉRCIO) ===== */
.webpage-banner-clickable {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.webpage-banner-clickable:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0.95;
}

.webpage-banner-clickable:active {
    transform: scale(0.98);
}

/* ===== MODAL DE LISTA DE COMÉRCIOS ===== */

#businessListModal .modal-body {
    /* Altura mínima para evitar jumps durante o carregamento */
    min-height: 70vh;
    max-height: 70vh;
}

#businessListLoadingIndicator {
    /* Loading centralizado e com tamanho fixo */
    min-height: 70vh;
    animation: fadeIn 0.5s ease-in-out;
}

#businessListLoadingIndicator i {
    /* Animação do spinner */
    animation: spin 1s linear infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===== DATATABLE CUSTOM STRIPED ROWS ===== */

/* Desabilitar striping padrão do DataTables */
#tabelaProdutos th{
    border: 0 !important; 
}

/* Coloração alternada customizada - linhas pares */
#tabelaProdutos tbody tr.even {
    background-color: #f3f3f3 !important;
}

/* Coloração alternada customizada - linhas ímpares */
#tabelaProdutos tbody tr.odd {
    background-color: #ffffff !important;
}

/* Garantir que TDs sejam transparentes */
#tabelaProdutos tbody tr td {
    background-color: transparent !important;
    border: none !important; /* Remover todas as bordas dos TDs */
}

/* Hover sobrescreve a cor alternada */
#tabelaProdutos tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    cursor: pointer;
}

#tabelaProdutos tbody tr:hover td {
    background-color: transparent !important;
    border: none !important; /* Remover todas as bordas dos TDs */
}

/* Tema escuro */
body.dark-theme #tabelaProdutos tbody tr.even {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

body.dark-theme #tabelaProdutos tbody tr.odd {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

body.dark-theme #tabelaProdutos tbody tr td {
    background-color: transparent !important;
}

body.dark-theme #tabelaProdutos tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme #tabelaProdutos tbody tr:hover td {
    background-color: transparent !important;
}

/* ===== END DATATABLE CUSTOM STRIPED ROWS ===== */

#modal-product-image {
    max-width: 150px;
    height: 150px;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

.modal-body-container {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

#viewModeSelector .btn.active {
    background-color: var(--white);
    color: var(--text-dark);
    border-color: var(--white);
}

#viewModeSelector .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.prod-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.prod-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem var(--black-shadow);
}

.prod-card .prod-img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    padding: 1rem;
    background-color: var(--card-image-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.prod-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#filterModalButton {
    transition: background-color 0.2s ease-in-out;
}

#filterModalButton {
    background-color: var(--filter-btn-bg);
    color: var(--filter-btn-text);
}

#filterModalButton:hover {
    background-color: var(--filter-btn-hover-bg);
    color: var(--white);
}

.bg-buskasher {
    background: linear-gradient(to bottom, var(--buskasher-grad-start), var(--buskasher-grad-end));
}

#tabelaProdutos .details-col {
    width: 90% !important;
}

#tabelaProdutos .certifier-col {
    width: 10% !important;
}

#productDetailModal .modal-content {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

#productDetailModal .modal-content.prod-card {
    background-clip: padding-box;
    background-color: var(--bs-card-bg, white);
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    outline: 0;
}

#productDetailModal .btn-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    background-color: var(--white-transparent-80);
    border-radius: 50%;
    padding: 0.4rem;
    box-shadow: 0 0 5px var(--black-shadow-medium);
}

#productDetailModal .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#modal-alerts-container .alert {
    font-size: 0.75rem;
    line-height: 1.3;
}

#productDetailModal .prod-img {
    height: 250px;
    max-width: 100%;
    padding: 1.5rem;
}

#productDetailModal .prod-card {
    cursor: default !important;
}

#productDetailModal .prod-card:hover {
    transform: translateY(0px) !important;
    box-shadow: 0 !important;
}

#sidebarNav.offcanvas {
    width: 30vw;
    max-width: 300px;
    border-right: none;
}

#sidebarNav .offcanvas-header {
    border-bottom: 1px solid var(--white-transparent-20);
}

#sidebarNav .offcanvas-footer {
    border-top: 1px solid var(--white-transparent-20);
    background-color: var(--black-transparent-10);
}

#sidebarNav .nav-link {
    color: var(--white);
    opacity: 0.8;
    transition: opacity 0.2s;
    font-size: 0.9rem;
}

#sidebarNav .nav-link:hover {
    opacity: 1;
}

#sidebarNav #viewModeSelector .btn.active {
    background-color: var(--white);
    color: var(--text-dark);
    border-color: var(--white);
}

.offcanvas-footer #viewModeSelector .btn {
    flex-grow: 1;
}

.user-indicator {
    width: 38px;
    height: 38px;
    border: 1px solid var(--white-transparent-50);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: transparent;
}

.user-indicator {
    width: 38px;
    height: 38px;
    border: 1px solid var(--white-transparent-50);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: transparent;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.user-indicator:hover {
    background-color: var(--white);
    color: var(--text-dark);
}

@media (max-width: 767px) {
    #searchInput::placeholder {
        font-size: 0.8rem;
    }
    .product-details-img {
        width: 70px;
        height: 70px;
    }
    #sidebarNav.offcanvas {
        width: 85vw;
        max-width: none;
    }
    .navbar-brand.d-md-none {
        margin-left: 0;
        margin-right: auto;
    }
}

@media (min-width: 768px) {
    #filterModalButton {
        width: 7%;
        display: none;
    }
    .navbar {
        top: 0;
        z-index: 1000;
    }
    #productDetailModal .modal-dialog.modal-dialog-card {
        max-width: 340px;
    }
}

/* ===== MODALS STYLES ===== */

/* Modals Gerais */
.modal-content {
    border-radius: 1rem;
    overflow: hidden;
}

.modal-header {
    padding: 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
}

/* Modal de Perfil */
#profileAvatar {
    box-shadow: 0 0.25rem 0.5rem var(--black-transparent-10);
    transition: transform 0.3s ease;
}

#profileAvatar:hover {
    transform: scale(1.05);
}

/* Lista de Certificadoras Favoritas */
#favoriteCertifiersList {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--scrollbar-track);
}

#favoriteCertifiersList::-webkit-scrollbar {
    width: 8px;
}

#favoriteCertifiersList::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

#favoriteCertifiersList::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

#favoriteCertifiersList::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-light);
}

/* Checkbox Customizado */
.certifier-checkbox {
    cursor: pointer;
}

.certifier-checkbox:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Campos Editáveis */
#profileName[contenteditable="true"],
#profileEmailText[contenteditable="true"] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
    padding: 4px 8px;
    background-color: var(--primary-color-subtle-bg-light);
    cursor: text;
}

#profileName[contenteditable="true"]:focus,
#profileEmailText[contenteditable="true"]:focus {
    background-color: var(--primary-color-subtle-bg);
}

/* Botões de edição */
#btnEditName,
#btnEditEmail,
#btnEditAvatar {
    transition: all 0.2s ease;
}

#btnEditName:hover,
#btnEditEmail:hover {
    transform: scale(1.1);
}

#btnEditAvatar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px var(--black-shadow-medium);
}

/* Botões de ação (salvar e cancelar) */
#btnSaveName,
#btnSaveEmail {
    transition: all 0.2s ease;
}

#btnSaveName:hover,
#btnSaveEmail:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px var(--success-shadow);
}

#btnCancelName,
#btnCancelEmail {
    transition: all 0.2s ease;
}

#btnCancelName:hover,
#btnCancelEmail:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px var(--danger-shadow);
}

/* Animação de fade para troca de botões */
#nameEditButtons,
#nameActionButtons,
#emailEditButtons,
#emailActionButtons {
    transition: opacity 0.2s ease;
}

/* Botões de Tema */
.btn-check:checked + .btn-outline-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Animações suaves para transição de views */
#profileView, #preferencesView {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Inputs com ícones */
.modal-body input.form-control {
    padding-left: 0.75rem;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modal-body input.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem var(--primary-color-subtle-bg);
}

/* Botões dos modais */
.modal-body .btn,
.modal-footer .btn {
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.modal-body .btn:hover,
.modal-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--black-shadow);
}

/* Links nos modais */
.modal-footer a,
.modal-body a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.modal-footer a:hover,
.modal-body a:hover {
    text-decoration: underline;
}

/* Responsividade para modais */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
    
    #profileAvatar {
        width: 120px !important;
        height: 120px !important;
    }
}

/* Tema Escuro (placeholder para futura implementação) */
body.dark-theme {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

body.dark-theme .bg-buskasher{
    background: linear-gradient(to bottom, var(--dark-buskasher-grad-start), var(--dark-buskasher-grad-end));
}

body.dark-theme .modal-content {
    background-color: var(--dark-modal-bg);
    color: var(--dark-text);
}

body.dark-theme .modal-header {
    border-bottom-color: var(--dark-border);
}

body.dark-theme .modal-footer {
    border-top-color: var(--dark-border);
}

body.dark-theme .form-control {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-input-border);
    color: var(--dark-text);
}

body.dark-theme .form-control:focus {
    background-color: var(--dark-input-bg-focus);
    border-color: var(--primary-color);
    color: var(--dark-text);
}

body.dark-theme #searchBarContainer > .input-group-text, body.dark-theme #searchBarContainer > body.dark-theme .form-control, body.dark-theme #searchBarContainer {
    background-color: var(--dark-search-input-bg);
}

body.dark-theme .certifier-filter {
    transition: 0.15s ease-in-out;
    background-color: var(--dark-bg);
}

body.dark-theme .certifier-filter.checked {
    border: 1px solid var(--primary-color) !important;
    background-color: var(--primary-color-subtle-bg) !important;
}

/* Filtros desktop no tema escuro - específico para não ser sobrescrito */
body.dark-theme #desktopFilters > .certifier-filter.checked {
    background-color: rgba(13, 110, 253, 0.3) !important;
    border-color: var(--primary-color-light) !important;
}

body.dark-theme #desktopFilters > .certifier-filter.checked span.fw-semibold {
    color: var(--primary-color-light) !important;
}

body.dark-theme .modal-footer{
    background-color: var(--dark-bg) !important;
}

body.dark-theme .fw-semibold{
    color: var(--dark-bg);
}

/* Sobrescrever bg-light no tema escuro */
body.dark-theme .bg-light,
body.dark-theme .bg-light.bg-opacity-10 {
    background-color: var(--dark-modal-bg) !important;
}

/* Sobrescrever bg-light em modal footers e headers */
body.dark-theme .modal-footer.bg-light,
body.dark-theme .modal-header.bg-light {
    background-color: var(--dark-modal-bg) !important;
}

/* Sobrescrever bg-light em card headers */
body.dark-theme .card-header.bg-light {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
}

/* Sobrescrever bg-light em elementos gerais */
body.dark-theme .p-3.bg-light,
body.dark-theme .card.bg-light,
body.dark-theme .card-body.bg-light,
body.dark-theme div.bg-light {
    background-color: var(--dark-input-bg) !important;
}

body.dark-theme .text-dark {
    color: var(--dark-text) !important;
}

body.dark-theme .text-muted {
    color: #a0a0a0 !important;
}

body.dark-theme .border,
body.dark-theme .border-bottom {
    border-color: var(--dark-border) !important;
}

body.dark-theme .card {
    background-color: var(--dark-modal-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

body.dark-theme .table {
    color: var(--dark-text);
    background-color: transparent;
}

body.dark-theme .table thead th {
    display: none;
}

body.dark-theme .table tbody tr {
    background-color: transparent !important;
}

body.dark-theme .table tbody td {
    color: var(--dark-text);
    background-color: transparent !important;
    border: none !important; /* Remover todas as bordas dos TDs */
}

/* DataTable no tema escuro - coloração alternada */
body.dark-theme #tabelaProdutos tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

body.dark-theme #tabelaProdutos tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

body.dark-theme #tabelaProdutos tbody tr td {
    background-color: transparent !important;
    border: none !important; /* Remover todas as bordas dos TDs */
}

body.dark-theme #tabelaProdutos tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme #tabelaProdutos tbody tr:hover td {
    background-color: transparent !important;
}

/* Remover efeito striped do tema claro */
body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent !important;
}

body.dark-theme .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: transparent !important;
}

/* Estilos específicos do DataTable no tema escuro */
body.dark-theme .dataTables_wrapper {
    color: var(--dark-text);
}

body.dark-theme .dataTables_info,
body.dark-theme .dataTables_paginate {
    color: var(--dark-text);
}

body.dark-theme .dataTables_paginate .paginate_button {
    color: var(--dark-text) !important;
}

body.dark-theme .dataTables_paginate .paginate_button:hover {
    background: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-theme .dataTables_paginate .paginate_button.current {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

body.dark-theme .dataTables_paginate .paginate_button.disabled {
    color: #6c757d !important;
}

/* Container da tabela responsiva */
body.dark-theme .table-responsive {
    background-color: transparent;
}

/* Bordas entre linhas da tabela no tema escuro */
body.dark-theme #tabelaProdutos tbody tr {
    border-bottom: 1px solid #444;
}

body.dark-theme #tabelaProdutos tbody tr:last-child {
    border-bottom: none;
}

/* Elementos de produtos na tabela */
body.dark-theme .product-details-container {
    color: var(--dark-text);
}

body.dark-theme .product-details-name {
    color: var(--dark-text);
}

body.dark-theme .product-details-meta {
    color: #a0a0a0;
}

/* Cores de texto especiais no tema escuro */
body.dark-theme .text-orange {
    color: #ff9800;
}

body.dark-theme .text-primary {
    color: var(--primary-color-light) !important;
}

/* Alertas mantêm suas cores originais no tema escuro */
body.dark-theme .alert-warning {
    background-color: #664d03;
    border-color: #ffc107;
    color: #ffcd39;
}

body.dark-theme .alert-info {
    background-color: #055160;
    border-color: #0dcaf0;
    color: #6edff6;
}

body.dark-theme .alert-danger {
    background-color: #58151c;
    border-color: #dc3545;
    color: #ea868f;
}

body.dark-theme .alert-success {
    background-color: #0a3622;
    border-color: #198754;
    color: #75b798;
}

/* Outros alertas genéricos no tema escuro */
body.dark-theme .alert:not(.alert-warning):not(.alert-info):not(.alert-danger):not(.alert-success) {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

body.dark-theme .dropdown-menu {
    background-color: var(--dark-modal-bg);
    border-color: var(--dark-border);
}

body.dark-theme .dropdown-item {
    color: var(--dark-text);
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item:focus {
    background-color: var(--dark-input-bg);
    color: var(--dark-text);
}

body.dark-theme .dropdown-divider {
    border-color: var(--dark-border);
}

body.dark-theme .nav-link {
    color: var(--dark-text);
}

body.dark-theme .nav-link:hover {
    color: var(--primary-color-light);
}

/* Offcanvas no tema escuro */
body.dark-theme .offcanvas {
    background-color: var(--dark-modal-bg);
    color: var(--dark-text);
}

body.dark-theme .offcanvas-header {
    border-bottom-color: var(--dark-border);
}

body.dark-theme .offcanvas-body {
    background-color: var(--dark-modal-bg);
}

/* Badges no tema escuro - manter cores originais mas ajustar contraste */
body.dark-theme .badge {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Input groups no tema escuro */
body.dark-theme .input-group-text {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-input-border);
    color: var(--dark-text);
}

/* Listas no tema escuro */
body.dark-theme .list-group-item {
    background-color: var(--dark-modal-bg);
    border-color: var (--dark-border);
    color: var(--dark-text);
}

body.dark-theme .list-group-item:hover {
    background-color: var(--dark-input-bg);
}

/* Tooltips e popovers no tema escuro */
body.dark-theme .tooltip-inner {
    background-color: var(--dark-input-bg);
    color: var (--dark-text);
}

body.dark-theme .popover {
    background-color: var(--dark-modal-bg);
    border-color: var(--dark-border);
}

body.dark-theme .popover-header {
    background-color: var (--dark-input-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

body.dark-theme .popover-body {
    color: var(--dark-text);
}

/* Modal de detalhes do produto no tema escuro */
body.dark-theme #productDetailModal .modal-content.prod-card {
    background-color: var(--dark-modal-bg) !important;
    color: var(--dark-text);
}

/* NÃO sobrescrever border-color para manter as cores das certificadoras */
body.dark-theme #productDetailModal .modal-content.prod-card.border-bka,
body.dark-theme #productDetailModal .modal-content.prod-card.border-bdk,
body.dark-theme #productDetailModal .modal-content.prod-card.border-lkb,
body.dark-theme #productDetailModal .modal-content.prod-card.border-mekor {
    border-left-width: 5px !important;
    border-left-style: solid !important;
}

/* Manter as cores originais das borders de certificadoras no tema escuro */
body.dark-theme .modal-content.border-bka {
    border-left-color: var(--color-bka) !important;
}

body.dark-theme .modal-content.border-bdk {
    border-left-color: var(--color-bdk) !important;
}

body.dark-theme .modal-content.border-lkb {
    border-left-color: var(--color-lkb) !important;
}

body.dark-theme .modal-content.border-mekor {
    border-left-color: var(--color-mekor) !important;
}

body.dark-theme #productDetailModal .card-body {
    background-color: var(--dark-modal-bg);
    color: var (--dark-text);
}

body.dark-theme #productDetailModal .prod-img {
    background-color: var(--dark-input-bg);
    border-bottom-color: var(--dark-border);
}

body.dark-theme #productDetailModal .btn-close {
    background-color: rgba(58, 58, 58, 0.9);
    opacity: 1;
    filter: invert(1);
}

body.dark-theme #productDetailModal #modal-product-name {
    color: var(--dark-text);
}

/* Cards de produtos no tema escuro */
body.dark-theme .prod-card {
    background-color: var (--dark-modal-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

body.dark-theme .prod-card .prod-img {
    background-color: var(--dark-input-bg);
    border-bottom-color: var(--dark-border);
}

body.dark-theme .prod-card .card-body {
    background-color: var(--dark-modal-bg);
    color: var(--dark-text);
}

body.dark-theme .prod-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* Elementos de texto nos cards de produto no tema escuro */
body.dark-theme .prod-card h5,
body.dark-theme .prod-card p,
body.dark-theme .prod-card .card-body * {
    color: var(--dark-text);
}

body.dark-theme .prod-card .card-title {
    color: var(--dark-text);
}

/* Manter cores dos alertas nos cards */
body.dark-theme .prod-card .alert-danger {
    background-color: #58151c;
    border-color: #dc3545;
    color: #ea868f;
}

body.dark-theme .prod-card .alert-warning {
    background-color: #664d03;
    border-color: #ffc107;
    color: #ffcd39;
}

body.dark-theme .prod-card .alert-info {
    background-color: #055160;
    border-color: #0dcaf0;
    color: #6edff6;
}

/* ===== END MODALS STYLES ===== */

/* ===== BUTTON LOADING & PROGRESS STYLES ===== */

/* Botão de submit com loading */
.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 3px solid var(--loading-border);
    border-radius: 50%;
    border-top-color: var(--white);
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Botão com barra de progresso no hover */
#goToLoginBtn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

#goToLoginBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#goToLoginBtn:not(:disabled) {
    cursor: pointer;
}

#goToLoginBtn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--primary-color-shadow);
}

#goToLoginBtn.btn-success {
    animation: pulse 0.5s ease-in-out;
}

#goToLoginBtn.btn-success:hover {
    box-shadow: 0 4px 12px var(--success-shadow);
}

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

.btn-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    width: 0%;
    background: linear-gradient(90deg, var(--success-color), var(--success-color-light), var(--success-color));
    background-size: 200% 100%;
    transition: width 2s linear, opacity 0.3s ease;
    border-radius: 0 0 0.375rem 0.375rem;
    z-index: 0;
    box-shadow: 0 0 15px var(--success-shadow-strong);
    animation: shimmer 1s linear infinite;
    opacity: 1;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

#goToLoginBtn.btn-hovering:not(:disabled) .btn-progress-bar {
    width: 100%;
}

#goToLoginBtn .btn-text {
    position: relative;
    z-index: 1;
}

/* ===== END BUTTON LOADING & PROGRESS STYLES ===== */

/* ===== PASSWORD VALIDATOR STYLES ===== */

/* Container da barra de força */
.password-strength-container {
    margin-top: 0.5rem;
    position: relative;
}

.password-strength-bar-wrapper {
    height: 6px;
    background-color: var(--scrollbar-track);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.25rem;
    width: 100%; /* Barra ocupa toda a largura */
}

.password-strength-bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 3px;
}

.password-strength-text {
    font-size: 0.75rem;
    font-weight: 500;
    display: block;
    margin-top: 0.25rem;
    min-height: 1.2em; /* Ocupa espaço mesmo vazio */
    visibility: visible; /* Sempre visível para ocupar espaço */
}

.password-strength-text:empty::before {
    content: '\00A0'; /* Espaço não-quebrável para manter altura */
    visibility: hidden;
}

/* Feedback de requisitos como POPUP (ACIMA da barra) */
.password-feedback {
    position: absolute;
    bottom: 100%; /* Posiciona acima */
    left: 0;
    right: 0;
    z-index: 1060;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 0.5rem 1rem var(--black-shadow);
    margin-bottom: 0.5rem;
    min-width: 280px;
    display: none; /* Escondido por padrão */
    animation: fadeInUp 0.2s ease-in-out;
}

.password-feedback.show {
    display: block;
}

/* Seta apontando para baixo (para a barra) */
.password-feedback::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--border-color);
}

.password-feedback::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 21px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid white;
    margin-top: -1px;
}

.password-feedback small {
    font-size: 0.75rem;
    line-height: 1.8;
    transition: color 0.2s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mensagem de erro de confirmação - popup ACIMA do input */
.password-mismatch-error {
    position: absolute;
    bottom: 100%; /* Posiciona acima do input */
    left: 0;
    right: 0;
    z-index: 1060;
    background: white;
    border: 1px solid var(--danger-color);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 0.25rem 0.5rem var(--danger-subtle-bg-light);
    margin-bottom: 0.5rem;
    animation: fadeInUp 0.2s ease-in-out;
    display: none;
}

.password-mismatch-error.show {
    display: block;
}

/* Seta apontando para baixo (para o input) */
.password-mismatch-error::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--danger-color);
}

.password-mismatch-error::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 21px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--danger-bg-light);
    margin-top: -1px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos para inputs com validação de senha */
input[type="password"].is-valid {
    border-color: var(--success-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

input[type="password"].is-valid:focus {
    border-color: var(--success-color);
    box-shadow: 0 0 0 0.25rem var(--success-subtle-bg);
}

/* Garantir que o parent tenha position relative para posicionamento do popup */
.password-input-wrapper {
    position: relative;
}

/* ===== END PASSWORD VALIDATOR STYLES ===== */

/* ===== AUTOCOMPLETE STYLES ===== */

/* Wrapper para conter o searchBar e as sugestões */
.autocomplete-wrapper {
    position: relative;
    width: 100%;
}

/* Remover overflow hidden do searchBarContainer para permitir popup externo */
#searchBarContainer.has-autocomplete {
    overflow: visible !important;
}

/* Container de sugestões - Popup abaixo do input */
.autocomplete-suggestions {
    position: absolute;
    top: 100%; /* Posiciona abaixo do input */
    left: 0;
    right: 0;
    z-index: 1060;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    box-shadow: 0 0.5rem 1rem var(--black-shadow);
    margin-top: 0.5rem;
    max-height: 25vh;
    overflow-y: auto;
    display: none;
    animation: fadeInDown 0.2s ease-in-out;
}

.autocomplete-suggestions.show {
    display: block;
}

/* Seta apontando para cima (para o input) */
.autocomplete-suggestions::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--border-color);
}

.autocomplete-suggestions::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 21px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid white;
    margin-bottom: -1px;
}

/* Item de sugestão */
.autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: 0.875rem;
    line-height: 1.4;
    border-radius: 0.25rem;
    margin: 0 0.5rem;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background-color: var(--primary-color-subtle-bg);
}

.autocomplete-item strong {
    color: var(--primary-color);
    font-weight: 600;
}

/* Scrollbar do container de sugestões */
.autocomplete-suggestions::-webkit-scrollbar {
    width: 8px;
}

.autocomplete-suggestions::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

.autocomplete-suggestions::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-light);
}

/* Animação de entrada */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Autocomplete no tema escuro */
body.dark-theme .autocomplete-suggestions {
    background-color: var(--dark-modal-bg);
    border-color: var(--dark-border);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

body.dark-theme .autocomplete-suggestions::after {
    border-bottom-color: var (--dark-modal-bg);
}

body.dark-theme .autocomplete-suggestions::before {
    border-bottom-color: var(--dark-border);
}

body.dark-theme .autocomplete-item {
    color: var(--dark-text);
}

body.dark-theme .autocomplete-item:hover,
body.dark-theme .autocomplete-item.active {
    background-color: var(--dark-input-bg);
}

body.dark-theme .autocomplete-item strong {
    color: var(--primary-color-light);
}

body.dark-theme .autocomplete-suggestions::-webkit-scrollbar-track {
    background: var(--dark-input-bg);
}

/* ===== END AUTOCOMPLETE STYLES ===== */

/* ===== MULTIPLE CERTIFICATIONS BADGES STYLES ===== */

/* Badge wrapper for multiple badges */
.certifier-col {
    line-height: 1.8 !important;
    min-height: 60px !important;
    vertical-align: middle !important;
    padding: 8px !important;
}

/* DataTable cell styling for certifier column */
table.dataTable tbody td.certifier-col {
    display: table-cell;
    vertical-align: middle;
    height: auto;
    padding: 8px 10px;
}

/* Container flex dentro da célula para centralizar os selos */
.certifier-col > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
}

.badge-src {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4em 0.8em;
    white-space: nowrap;
}

/* Espaçamento entre badges múltiplas no modal */
#modal-product-certifier .badge-src {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Espaçamento entre badges nos cards */
.prod-card .badge-src {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Melhorar quebra de linha para múltiplas badges */
.certifier-col,
#modal-product-certifier {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

/* Cards mantêm layout padrão (não aplicar flexbox no card-body) */
.prod-card .card-body {
    /* Texto alinhado à esquerda por padrão */
    text-align: left;
}

/* Container apenas para as badges no rodapé dos cards */
.prod-card .badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: auto;
}

/* Certificações no modal - layout vertical */
#modal-product-certifier {
    flex-direction: column;
    align-items: flex-start;
}

#modal-product-certifier > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Texto explicativo das certificações no modal */
#modal-product-certifier p {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Dark theme para badges */
body.dark-theme .badge-src {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== END MULTIPLE CERTIFICATIONS BADGES STYLES ===== */

/* ===== SESSION EXPIRED MODAL RESPONSIVE ===== */

/* Modal de sessão expirada - centralizado em todas as telas */
#sessionExpiredModal .modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-width: 90vw;
    width: 400px;
}

/* Em tablets e dispositivos menores */
@media (max-width: 991px) {
    #sessionExpiredModal .modal-dialog {
        width: 85vw;
        max-width: 500px;
    }
}

/* Em smartphones */
@media (max-width: 576px) {
    #sessionExpiredModal .modal-dialog {
        width: 90vw;
        max-width: none;
    }
}

/* Garantir que o modal fique acima de tudo */
#sessionExpiredModal {
    z-index: 9999 !important;
}

#sessionExpiredModal .modal-backdrop {
    z-index: 9998 !important;
}

/* ===== END SESSION EXPIRED MODAL RESPONSIVE ===== */

/* ===== FILTERS MODAL STYLES ===== */

/* Container de scroll para filtros */
.filter-scroll-container {
    min-height: 20vh;
    max-height: 20vh;
    overflow-y: auto;
}

/* Scrollbar personalizada */
.filter-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.filter-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.filter-scroll-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.filter-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Itens da lista de filtros */
.filter-option {
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
}

.filter-option .form-check-input {
    margin-left: 0 !important;  /* Sobrescrever margin-left negativo do Bootstrap */
    margin-right: 0.5rem;
    flex-shrink: 0;
    position: static !important;  /* Remover posicionamento absoluto do Bootstrap */
}

.filter-option label {
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 0 !important;  /* Remover padding-left do Bootstrap */
}

/* Accordion customizado */
#filtersAccordion .accordion-button {
    border-bottom: none !important;
    box-shadow: none !important;
}

#filtersAccordion .accordion-button:focus {
    box-shadow: none !important;
    outline: none;
}

#filtersAccordion .accordion-button:not(.collapsed) {
    background-color: #e7f1ff;
    color: #0d6efd;
    box-shadow: none !important;
}

#filtersAccordion .accordion-item {
    border: 1px solid #dee2e6;
    border-bottom: none;
    box-shadow: none !important;
}

#filtersAccordion .accordion-item:last-child {
    border-bottom: 1px solid #dee2e6;
}

/* Remover bordas dos elementos internos do accordion */
#filtersAccordion .accordion-collapse {
    border: none !important;
    box-shadow: none !important;
}

#filtersAccordion .accordion-body {
    border: none !important;
    box-shadow: none !important;
}

/* Certificadoras no modal */
#modalCertifiersContainer .certifier-filter {
    transition: all 0.2s ease;
}

#modalCertifiersContainer .certifier-filter:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#noCertifiersMessage {
    font-size: 0.9rem;
}

/* Tema escuro para filtros */
body.dark-theme .filter-scroll-container {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border);
}

body.dark-theme .filter-scroll-container::-webkit-scrollbar-track {
    background: var(--dark-border);
}

body.dark-theme .filter-scroll-container::-webkit-scrollbar-thumb {
    background: #666;
}

body.dark-theme .filter-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #888;
}

body.dark-theme .filter-option label {
    color: var(--dark-text);
}

body.dark-theme #filtersAccordion .accordion-button {
    background-color: var(--dark-input-bg);
    color: var(--dark-text);
    border-color: var(--dark-border);
    border-bottom: none !important;
    box-shadow: none !important;
}

body.dark-theme #filtersAccordion .accordion-button:not(.collapsed) {
    background-color: rgba(13, 110, 253, 0.2);
    color: var(--primary-color-light);
    box-shadow: none !important;
}

body.dark-theme #filtersAccordion .accordion-item {
    background-color: var(--dark-modal-bg);
    border-color: var(--dark-border);
    border: 1px solid var(--dark-border);
    border-bottom: none;
    box-shadow: none !important;
}

body.dark-theme #filtersAccordion .accordion-item:last-child {
    border-bottom: 1px solid var(--dark-border);
}

/* Remover bordas dos elementos internos do accordion no tema escuro */
body.dark-theme #filtersAccordion .accordion-collapse {
    border: none !important;
    box-shadow: none !important;
}

body.dark-theme #filtersAccordion .accordion-body {
    background-color: var(--dark-modal-bg);
    color: var(--dark-text);
    border: none !important;
    box-shadow: none !important;
}

/* Inputs dentro do accordion no tema escuro */
body.dark-theme #filtersAccordion input.form-control {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

body.dark-theme #filtersAccordion input.form-control::placeholder {
    color: #999;
}

body.dark-theme #filtersAccordion input.form-control:focus {
    background-color: var(--dark-input-bg);
    border-color: var(--primary-color-light);
    color: var(--dark-text);
}

/* Botões dentro do accordion no tema escuro */
body.dark-theme #filtersAccordion .btn-outline-primary {
    color: var(--primary-color-light);
    border-color: var(--primary-color-light);
}

body.dark-theme #filtersAccordion .btn-outline-primary:hover {
    background-color: var(--primary-color-light);
    border-color: var(--primary-color-light);
    color: #fff;
}

body.dark-theme #filtersAccordion .btn-outline-secondary {
    color: #999;
    border-color: var(--dark-border);
}

body.dark-theme #filtersAccordion .btn-outline-secondary:hover {
    background-color: var(--dark-border);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

/* Certificadoras no modal - tema escuro */
body.dark-theme #modalCertifiersContainer .certifier-filter {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

body.dark-theme #modalCertifiersContainer .certifier-filter:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

body.dark-theme #noCertifiersMessage {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

/* Certificadoras desktop - tema escuro */
body.dark-theme .certifier-filter {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-theme .certifier-filter.checked {
    background-color: rgba(13, 110, 253, 0.3) !important;
    border-color: var(--primary-color-light) !important;
    color: var(--dark-text) !important;
}

body.dark-theme .certifier-filter:hover {
    background-color: var(--dark-border) !important;
}

body.dark-theme .certifier-filter span.fw-semibold {
    color: var(--dark-text) !important;
}

body.dark-theme .certifier-filter.checked span.fw-semibold {
    color: var(--primary-color-light) !important;
}

/* Responsividade */
@media (max-width: 768px) {
    #filtersModal .modal-dialog {
        max-width: 95%;
    }
    
    #filtersModal .border-end {
        border-right: none !important;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    
    body.dark-theme #filtersModal .border-end {
        border-bottom-color: var(--dark-border) !important;
    }
}

/* Borda vertical no modal - tema claro e escuro */
#filtersModal .border-end {
    border-right-color: #dee2e6 !important;
}

body.dark-theme #filtersModal .border-end {
    border-right-color: var(--dark-border) !important;
}

/* Filtros especiais (Pessach e Yashan) - mesmo visual das certificadoras */
.special-filter {
    transition: 0.15s ease-in-out;
}

.special-filter.checked {
    border: 1px solid var(--primary-color) !important;
    background-color: var(--primary-color-subtle-bg) !important;
}

body.dark-theme .special-filter {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-theme .special-filter.checked {
    background-color: rgba(13, 110, 253, 0.3) !important;
    border-color: var(--primary-color-light) !important;
}

body.dark-theme .special-filter span.fw-semibold {
    color: var(--dark-text) !important;
}

body.dark-theme .special-filter.checked span.fw-semibold {
    color: var(--primary-color-light) !important;
}

/* ===== END FILTERS MODAL STYLES ===== */

#clearSecondaryFiltersBtn:hover{
    background-color: #e1e1e1;
    color: rgb(74, 74, 75);
}

/* ===== LAZY LOADING IMAGES STYLES ===== */

/* Imagem com estado inicial */
.lazy-image {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    object-fit: contain;
}

/* Animação de carregamento (shimmer effect) */
.lazy-loading {
    opacity: 0.7;
    position: relative;
}

/* Shimmer overlay usando ::before para não afetar a imagem */
.lazy-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Imagem carregada */
.lazy-loaded {
    opacity: 1;
    animation: fadeIn 0.3s ease-in-out;
}

.lazy-loaded::before {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

/* Dark theme adjustments */
body.dark-theme .lazy-loading::before {
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(0, 0, 0, 0) 100%
    );
    background-size: 200% 100%;
}

/* Placeholder para imagens não encontradas */
img[src*="no-image.png"] {
    opacity: 0.5;
}

/* ===== END LAZY LOADING IMAGES STYLES ===== */

/* ===== BUSINESS MODALS STYLES ===== */

/* Modal de Lista de Comércios */
#businessListModal .table-responsive {
    max-height: 60vh;
    overflow-y: auto;
}

#businessTable {
    table-layout: fixed;
    width: 100% !important;
}

#businessTable thead th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 10;
    vertical-align: middle;
}

#businessTable tbody tr {
    transition: background-color 0.2s ease;
}

#businessTable tbody tr:hover {
    background-color: var(--primary-color-subtle-bg);
}

#businessTable td {
    vertical-align: middle;
}

#businessTable td:first-child {
    text-align: center;
}

/* Badges de certificadoras nos comércios */
.badge.bg-lkb {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge.bg-bka {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}

.badge.bg-mekor {
    background-color: #6610f2 !important;
}

/* Modal de Detalhes do Comércio */
#businessDetailModal .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

#businessDetailLogo {
    box-shadow: 0 2px 8px var(--black-shadow);
}

/* Cards de produtos do comércio */
.business-product-card {
    transition: all 0.2s ease;
    border: 1px solid var(--black-transparent-10);
}

.business-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px var(--black-shadow);
    border-color: var(--primary-color);
}

.business-product-card .card-img-top {
    background-color: var(--white-subtle-bg);
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    #businessListModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    #businessDetailModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    #businessTable {
        font-size: 0.85rem;
    }
    
    #businessTable th,
    #businessTable td {
        padding: 0.5rem 0.25rem;
    }
    
    #businessTable img {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Ocultar colunas em mobile */
    #businessTable th.desktop-only,
    #businessTable td.desktop-only,
    #businessTable thead th.desktop-only,
    #businessTable tbody td.desktop-only {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    
    .business-product-card .card-img-top {
        height: 100px;
    }
}

/* Dark theme para modais de comércios */
body.dark-theme #businessListModal .modal-content,
body.dark-theme #businessDetailModal .modal-content {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-theme #businessListModal .modal-header,
body.dark-theme #businessDetailModal .modal-header {
    background-color: rgba(13, 110, 253, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme #businessTable {
    color: #e0e0e0;
}

body.dark-theme #businessTable thead th {
    background-color: #2d2d2d;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme #businessTable tbody tr {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme #businessTable tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.15);
}

body.dark-theme #businessTable td {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .business-product-card {
    background-color: #2d2d2d;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-theme .business-product-card:hover {
    border-color: var(--primary-color);
    background-color: #333;
}

body.dark-theme .business-product-card .card-img-top {
    background-color: #1a1a1a;
}

body.dark-theme #businessDetailLogo {
    background-color: #2d2d2d;
}

/* ===== END BUSINESS MODALS STYLES ===== */
/* Estilos para Anúncios */

/* Anúncios na DataTable */
.ad-row {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #0d6efd !important;
}

.ad-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    position: relative;
    cursor: pointer;
}

/* Anúncio tipo FULL - apenas imagem */
.ad-container-full {
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.ad-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #0d6efd;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    z-index: 10;
}

.ad-banner-img-full {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.ad-container-full:hover .ad-banner-img-full {
    transform: scale(1.05);
}

.ad-link-full {
    display: block;
    position: relative;
    overflow: hidden;
}

.ad-banner-img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.ad-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ad-title {
    font-weight: 600;
    margin: 0;
    color: #212529;
}

.ad-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
}

.ad-link {
    align-self: flex-start;
}

/* Anúncios em Cards */
.ad-card {
    position: relative;
    border: 2px solid #0d6efd !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Anúncio card tipo FULL */
.ad-card-full {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.ad-card-full .ad-badge-card {
    top: 0.5rem;
    right: 0.5rem;
}

/* Container da imagem ocupando 100% do espaço disponível (em cima) */
.ad-card-full-image-container {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    min-height: 350px;
}

.ad-card-img-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
}

.ad-card-full:hover .ad-card-img-full {
    transform: scale(1.05);
}

/* Footer branco com título preto (embaixo) */
.ad-card-full-footer {
    background: #ffffff;
    padding: 1rem;
    text-align: center;
    flex-shrink: 0;
    border-top: 1px solid #e9ecef;
}

.ad-card-full-title {
    color: #212529;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.ad-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(13, 110, 253, 0.2);
}

.ad-badge-card {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: #0d6efd;
    color: white;
    padding: 0.35rem 0.65rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ad-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.ad-card-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== PRODUCT UPDATE ITEMS - CLICKABLE ===== */

.product-update-clickable {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    outline: none;
}

.product-update-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
    background-color: #f0f4ff !important;
}

.product-update-clickable:hover .product-update-name {
    color: var(--primary-color);
}

.product-update-clickable:hover .product-update-arrow {
    transform: translateX(4px);
    color: var(--primary-color) !important;
}

.product-update-clickable:active {
    transform: translateY(-1px) scale(0.995);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
}

.product-update-clickable:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Dark Theme para Anúncios */
body.dark-theme .ad-row {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

body.dark-theme .ad-container {
    color: var(--dark-text);
}

body.dark-theme .ad-title {
    color: var(--dark-text);
}

body.dark-theme .ad-text {
    color: #adb5bd;
}

body.dark-theme .ad-card {
    background: linear-gradient(135deg, var(--dark-bg) 0%, #2c3e50 100%);
    border-color: #0d6efd !important;
}

body.dark-theme .ad-card-placeholder {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

/* Footer do card full no tema escuro - fundo escuro com texto claro */
body.dark-theme .ad-card-full-footer {
    background: var(--dark-input-bg);
    border-top-color: var(--dark-border);
}

body.dark-theme .ad-card-full-title {
    color: var(--dark-text);
}

.text-orange {
    color: var(--orange-text);
}

/* ===== PRODUCT UPDATES CONTAINER ===== */
#productUpdatesContainer {
    min-height: 200px;
}

/* ===== PRODUCT UPDATES - TEMA ESCURO ===== */
/* Container principal das atualizações */
body.dark-theme #productUpdatesContainer {
    background-color: var(--dark-modal-bg) !important;
    border: 1px solid var(--dark-border);
}

/* Título da seção */
body.dark-theme #productUpdatesContainer h5 {
    color: var(--dark-text);
}

body.dark-theme #productUpdatesContainer .text-primary {
    color: var(--primary-color-light) !important;
}

/* Cards de atualização de produto */
body.dark-theme .product-update-item {
    background-color: var(--dark-input-bg) !important;
    border: 1px solid var(--dark-border);
}

/* Texto do produto */
body.dark-theme .product-update-item h6 {
    color: var(--dark-text);
}

body.dark-theme .product-update-item .text-muted {
    color: #999 !important;
}

/* Estado de loading */
body.dark-theme #productUpdatesList .text-center.text-muted {
    color: #999 !important;
}

/* Alertas */
body.dark-theme #productUpdatesList .alert-danger {
    background-color: var(--danger-subtle-bg);
    border-color: var(--danger-color);
    color: var(--dark-text);
}

/* Banner de anúncio especial */
body.dark-theme #specialAnnouncementBanner {
    background-color: var(--dark-input-bg) !important;
    border: 1px solid var(--dark-border);
}

body.dark-theme #specialAnnouncementBanner .text-muted {
    color: #999 !important;
}

/* ===== PRODUCT UPDATES - BADGES INTEGRADOS ===== */
/* Badge de certificadora dentro do badge de ação */
.product-update-item .badge {
    padding: 0.25rem 0.5rem;
    font-weight: 600;
}

/* Garantir que badges de certificadora dentro de ações tenham bom contraste */
.product-update-item .px-3.py-1.rounded .badge {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Botão de ações flutuante - dark theme */
body.dark-theme .action-panel-btn {
    background-color: var(--dark-card-bg, #2b2b2b) !important;
    border-color: #4dabf7 !important;
    color: #4dabf7 !important;
}

body.dark-theme .action-panel-btn:hover {
    background-color: #4dabf7 !important;
    color: #1a1a2e !important;
}

/* ===== POPUP MODAL DE ANÚNCIOS ===== */

/* Estilos Modernos do Popup */
.popup-modern {
    border-radius: 16px !important;
    overflow: hidden;
    position: relative;
}

.popup-header {
    background: linear-gradient(135deg, #005EB8 0%, #08305e 100%) !important;
    padding: 1.5rem 1rem;
    position: relative;
}

.popup-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    pointer-events: none;
}

.popup-header .modal-title {
    font-size: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

.popup-body {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

.popup-body img {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.popup-content {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #495057;
}

.popup-btn-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
    border: none !important;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    transition: all 0.3s ease;
    text-transform: none;
}

.popup-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
    background: linear-gradient(135deg, #0a58ca 0%, #084298 100%) !important;
}

.popup-btn-primary:active {
    transform: translateY(0);
}

.popup-btn-secondary {
    border: 2px solid #adb5bd;
    color: #495057;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: white;
}

.popup-btn-secondary:hover {
    background: #e9ecef;
    border-color: #6c757d;
    color: #212529;
    transform: translateY(-1px);
}

/* Animação de entrada do modal */
#site-popup-modal .modal-dialog {
    animation: popupSlideIn 0.4s ease-out;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== DARK THEME SUPPORT FOR PESSACH & YASHAN ===== */

/* Pessach colors in dark theme */
body.dark-theme .text-pessach {
    color: #64b5f6 !important;
    font-weight: 500;
}

body.dark-theme .bg-pessach {
    background-color: rgba(100, 181, 246, 0.15);
    border-left-color: #64b5f6;
    color: #64b5f6;
}

/* Yashan colors in dark theme */
body.dark-theme .text-yashan {
    color: #ffb74d !important;
    font-weight: 500;
}

body.dark-theme .bg-yashan {
    background-color: rgba(255, 183, 77, 0.15);
    border-left-color: #ffb74d;
    color: #ffb74d;
}

body.dark-theme .product-update-clickable:hover {
    background-color: rgba(13, 110, 253, 0.12) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

body.dark-theme .product-update-clickable:hover .product-update-name {
    color: var(--primary-color-light);
}

body.dark-theme .product-update-clickable:hover .product-update-arrow {
    color: var(--primary-color-light) !important;
}

/* ===== PESSACH FILTER BUTTON ===== */
#btnPessachFilter {
    transition: all 0.3s ease;
    border-radius: 50px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Estado inativo do botão Pessach */
#btnPessachFilter:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
}

#btnPessachFilter:focus:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.2);
}

/* Estado ativo do botão Pessach */
#btnPessachFilter.active {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    border-color: #27ae60;
    color: white !important;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

#btnPessachFilter.active:hover {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    border-color: #229954;
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
}

#btnPessachFilter.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(46, 204, 113, 0.25);
}

/* Dark theme para o botão Pessach */
body.dark-theme #btnPessachFilter {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

body.dark-theme #btnPessachFilter:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

body.dark-theme #btnPessachFilter.active {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
    border-color: #27ae60;
    color: white !important;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

body.dark-theme #btnPessachFilter.active:hover {
    background: linear-gradient(135deg, #1e8449 0%, #186a3b 100%);
    border-color: #1e8449;
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.5);
}

/* ===== RESPONSIVO: PESSACH BUTTON LAYOUT ===== */
/* Estilos para os botões de Pessach (desktop e mobile) */
#btnPessachFilterDesktop,
#btnPessachFilterMobile {
    transition: all 0.3s ease;
    border-radius: 50px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Estados ativos para ambos os botões (light theme) */
#btnPessachFilterDesktop.active,
#btnPessachFilterMobile.active {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    border-color: #27ae60;
    color: white !important;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

#btnPessachFilterDesktop.active:hover,
#btnPessachFilterMobile.active:hover {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    border-color: #229954;
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
}

#btnPessachFilterDesktop.active:focus,
#btnPessachFilterMobile.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(46, 204, 113, 0.25);
}

/* Dark theme para ambos os botões */
body.dark-theme #btnPessachFilterDesktop,
body.dark-theme #btnPessachFilterMobile {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

body.dark-theme #btnPessachFilterDesktop:hover:not(.active),
body.dark-theme #btnPessachFilterMobile:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

body.dark-theme #btnPessachFilterDesktop.active,
body.dark-theme #btnPessachFilterMobile.active {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
    border-color: #27ae60;
    color: white !important;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

body.dark-theme #btnPessachFilterDesktop.active:hover,
body.dark-theme #btnPessachFilterMobile.active:hover {
    background: linear-gradient(135deg, #1e8449 0%, #186a3b 100%);
    border-color: #1e8449;
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.5);
}

/* No desktop: botão na navbar inline */
@media (min-width: 769px) {
    #btnPessachFilterDesktop {
        display: inline-block !important;
    }
    
    #pessachFilterContainer {
        display: none !important;
    }
}

/* No mobile: botão em nova row centralizado */
@media (max-width: 768px) {
    #btnPessachFilterDesktop {
        display: none !important;
    }
    
    #pessachFilterContainer {
        display: flex !important;
        justify-content: center;
        width: 100%;
        margin-top: 0.75rem;
    }
    
    #btnPessachFilterMobile {
        width: auto;
        display: inline-block !important;
    }
}

/* Garantir que display: none funcione quando aplicado via jQuery */
#btnPessachFilterDesktop[style*="display: none"],
#btnPessachFilterMobile[style*="display: none"],
#pessachFilterContainer[style*="display: none"] {
    display: none !important;
}