:root {
    --primary: #dc3545;
    --secondary: #6c757d;
    --dark: #212529;
    --light: #f8f9fa;
}

.btn.btn-primary {
    width: 150px !important;
}

/* Seletores mais específicos e várias propriedades para cobrir casos */
form input[type="submit"].btn.btn-primary,
input[type="submit"].btn.btn-primary,
.btn.btn-primary[type="submit"],
.btn.btn-primary.btn-block,
.btn.btn-primary {
  display: inline-block !important;        /* evita comportamento estranho de flex/block */
  box-sizing: border-box !important;       /* inclui padding na largura */
  width: 150px !important;                 /* largura desejada */
  min-width: 150px !important;             /* impede override por min-width */
  max-width: 150px !important;             /* impede override por max-width */
  flex: 0 0 150px !important;              /* cobre casos em que o botão está num container flex */
  -webkit-flex: 0 0 150px !important;
  -ms-flex: 0 0 150px !important;
  padding-left: 12px !important;           /* ajusta padding se necessário (opcional) */
  padding-right: 12px !important;
  background-color: #135aa2 !important;

}

.btn-confirmar {
    padding: 0.1rem 0.1rem !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #135aa275 0%, #135aa2 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px #0056b385 !important;
    margin-bottom: 0.5rem !important;
}


/* Navbar container spacing on mobile */
@media (max-width: 576px) {
  .navbar .container,
  .navbar .container-fluid,
  .navbar.menu .container {
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
  }
}

/* Mobile navbar layout adjustments */
@media (max-width: 991.98px) {
  /* Header container */
  .header .container {
    padding: 0.5rem 1rem;
  }
  
  /* Logo styling */
  .header .navbar-brand {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }
  
  .header .navbar-brand img {
    max-height: 40px;
    width: auto;
  }
  
  /* Mobile cart button */
  #mobileCartButton {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #333;
    padding: 0.5rem;
    position: relative;
  }
  
  /* Cart badge styling */
  .cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(25%, -25%);
  }
  
  /* Mobile menu toggle button */
  .navbar-toggler {
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    color: #333;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  
  .navbar-toggler:hover {
    color: var(--primary);
  }
  
  .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
  }
  
  /* Mobile menu */
  #mobileNavbar {
    position: fixed;
    top: 0;
    left: -280px; /* Escondido à esquerda */
    width: 280px;
    height: 100vh;
    background: #fff;
    margin: 0;
    padding: 1rem 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1060;
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
  }
  
  #mobileNavbar.show {
    left: 0; /* Mostra o menu deslizando da esquerda */
  }
  
  /* Cabeçalho do menu móvel */
  .mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .close-menu {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
  }
  
  .close-menu:hover {
    color: #333;
  }
  
  /* Overlay para escurecer o fundo quando o menu estiver aberto */
  .menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
  }
  
  .menu-overlay.show {
    display: block;
  }
  
  #mobileNavbar .navbar-nav {
    width: 100%;
  }
  
  #mobileNavbar .nav-item {
    width: 100%;
  }
  
  #mobileNavbar .nav-link {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    color: #333 !important;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  #mobileNavbar .nav-link:hover {
    background-color: #f8f9fa;
    color: var(--primary);
    padding-left: 2rem;
  }
  
  #mobileNavbar .nav-link i {
    width: 24px;
    text-align: center;
    margin-right: 10px;
    font-size: 1.1em;
  }
  
  /* Hide desktop navigation on mobile */
  .d-none.d-lg-block {
    display: none !important;
  }
}

/* Desktop styles */
@media (min-width: 992px) {
  /* Hide mobile elements on desktop */
  .d-lg-none {
    display: none !important;
  }
  
  /* Ensure desktop navigation is visible */
  .d-none.d-lg-block {
    display: block !important;
  }
  
  /* Cart button styling for desktop */
  #cartButton {
    white-space: nowrap;
  }
  
  #cartCountText {
    margin-left: 0.25rem;
  }
}
  /* Custom container to stack elements vertically */
  .navbarNav {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }

  /* Bootstrap nav list stays horizontal on mobile */
  .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .navbar-nav .nav-item {
    flex: 0 0 auto;
  }


/* FINAL OVERRIDE: enforce two-per-row squares on small phones */
@media (max-width: 576px) {
  .links-module .links-square .links-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    grid-template-columns: unset !important;
    width: 100% !important;
    margin: 0 !important;
    column-gap: 0 !important;
    row-gap: 8px !important;
  }
  .links-module .links-square .links-item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  .links-module .links-square .links-item > a,
  .links-module .links-square .links-item > a > img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  .links-module .links-square .links-item > a > img {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Harden small-phone behavior: always two squares per row at <=576px */
@media (max-width: 576px) {
  .links-module .links-square .links-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    column-gap: 0 !important;
    row-gap: 8px !important;
  }
  .links-module .links-square .links-item {
    position: relative !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    height: 0 !important;           /* padding-top square for robust support */
    padding: 0 !important;
    padding-top: 100% !important;   /* enforce 1:1 */
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  .links-module .links-square .links-item > a,
  .links-module .links-square .links-item > a > img {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  .links-module .links-square .links-item > a > img {
    object-fit: cover !important;
    object-position: center center !important;
  }
  /* Ultra-specific fallback to ensure two-per-row */
  #fotolinks .links-item {
    display: block !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-content {
    min-height: calc(100vh - 160px);
    padding: 20px 0;
    display: flex;
    justify-content: flex-start;
    /* justify-content: center; */
    align-items: flex-start !important;
}

.header {
    background-color: rgb(255, 255, 255) !important;
}

.header-btn {
    --bs-btn-color: #135aa2 !important; 
    --bs-btn-border-color: #135aa2 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #135aa2 !important;
    --bs-btn-hover-border-color: #135aa2 !important;
}

.menu {
    background-color: rgb(35, 99, 163) !important;
}

.nav-link {
    color: white !important;
}

.footer {
    color: white !important;
    background-color: rgb(35, 99, 163) !important;
    padding-top: 20px;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
}

.body-login {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2363a3 !important;
}

.login-container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.login-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.5s ease;
}

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

.logo {
    text-align: center;
    margin-bottom: 30px;
}

.logo i {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 10px;
}

.logo h1 {
    color: #333;
    font-size: 1.8rem;
    font-weight: 600;
}


.link-hover-effect {
    text-decoration: none; /* Remove o sublinhado padrão */
    transition: 0.3s;
}

.link-hover-effect:hover {
    text-decoration: underline; /* Adiciona o sublinhado no hover */
}

.item-row {
  border-bottom: 1px solid #cfcfcf !important;
  align-items: center;
  display: grid;
  grid-template-columns: 60px 220px 1fr 100px 60px 120px 60px;
  font-size: 0.85rem;
  background: white;
}

/* Remove Bootstrap row behavior from form-group */
.form-group.row {
    display: flex !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: auto !important;
    margin-bottom: 8px !important;
    padding: 4px 0 !important;
}

/* Ensure form controls take full width */
.form-group.row > [class*="col-"] {
    width: 100% !important;
    display: flex;
    padding-right: 0 !important;
    align-items: center !important;
    min-height: auto !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 0 !important;
    padding-top: 1rem !important;
    justify-content: center;
    flex-direction: row !important;

}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px !important;
    position: relative;
    width: 100%;
}

.navbar {
    position: relative;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-small {
    font-size: small !important;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
}

.form-group label i {
    margin-right: 8px;
    color: #667eea;
}

/* Alvo: O botão de rádio específico */
input[type="radio"]:focus {
    outline: none !important;
    box-shadow: none !important; /* Alguns frameworks usam box-shadow em vez de outline */
}

.form-group input {
    width: 100% !important;
    padding: 12px 15px;
    border: 2px solid #e1e1e1;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-group input:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control {
    min-height: 38px; /* Altura mínima para manter a usabilidade */
    height: auto !important;
}

.form-group.focused label {
    color: #667eea;
}

.page.subtitle {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}


/* Estilo para o formulário de pesquisa */
.page-content.card.card-block.search-form,
.page-content.card.card-block.search-form * {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin: 0 !important;
    text-align: center;
}

.desenho-titulo {
    text-align: center;
    font-size: 0.85rem;
    color: #135aa2;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* No máximo 2 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px !important;           /* Igual ou menor que o container */
    margin-top: 8px;
}


.thumb-wrapper {
    width: 300px;
    aspect-ratio: 16 / 9;      /* quadrado perfeito */
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumb-img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;        /* corta a imagem para caber sem distorcer */
}




.page-content.card.card-block.search-form {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    margin: 20px 0 !important;
    gap: 0px !important
}


/* Estilo para os resultados da pesquisa */
.page-content.card.card-block.search-results,
.page-content.card.card-block.search-results * {
    padding: 0 !important;
}

.page-content.card.card-block.search-results {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap;
    width: 100%;
    margin: 20px 0;
}

/* Ajustes para os itens dentro do formulário */
.search-form .form-group {
    width: 100%;
    margin-bottom: 0;
}

/* Ajustes para os itens de resultado */
.search-results .form-group {
    flex: 1 1 30%;
    min-width: 200px;
    padding: 10px;
    border: 0px !important;
    border-radius: 8px;
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .search-results .form-group {
        flex: 1 1 100%;
    }
}


/* Estilos para o formulário de login */
.login-form,
.login-form * {
    padding: 0 !important;
    margin: 0 !important;
}

.login-form {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.login-form .form-group {
    margin-bottom: 0 !important;
}

.login-form .form-group input {
    width: 100% !important;
    border: 2px solid #e1e1e1; 
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
}

.login-form .btn-login {
    width: 100%;
    padding: 12px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-form .btn-login:hover {
    background: #5a67d8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Esta regra só afeta o título quando ele tiver a classe 'titulo-lowercase' */
.catalogo-titulo.titulo-lowercase {
    text-transform: none !important;
}

/* Opcional: Ajuste específico para o subtítulo dentro deste caso */
.titulo-lowercase .catalogo-subtitulo {
    display: block;
    font-size: 0.85rem;
    font-weight: normal;
    text-transform: none !important;
    margin-top: 5px;
}

/* Estilo para o título do catálogo (O Retângulo) */
.catalogo-titulo {
    display: inline-block;
    background-color: #135aa2 !important;
    color: white;
    padding: 12px 24px !important;
    border-radius: 0.25rem;
    margin-bottom: 1rem !important; /* Unificado */
    letter-spacing: 0.5px;
    font-size: 1.25rem;
    line-height: 1.4; /* Reduzi o line-height para o subtítulo não ficar longe */
    text-align: center;
    min-width: 15vw;
    box-sizing: border-box;
    text-transform: uppercase; /* Mantém apenas o título principal em maiúsculas */
}

/* Estilo para o subtítulo dentro do retângulo */
.catalogo-subtitulo {
    display: block; /* Garante que fique na linha de baixo */
    text-transform: none; /* Remove o uppercase */
    font-size: 0.85rem; /* Diminui o tamanho da letra */
    font-weight: normal; /* Deixa a letra menos grossa que o título */
    margin-top: 5px; /* Pequeno ajuste de espaço entre as linhas */
}

/* Estilo para os grupos de formulário - Sobrescrevendo qualquer estilo anterior */
#sync_form .form-group.row, 
.login-form .form-group.row,
.search-form .form-group.row,
.page-content .form-group.row {
    min-height: auto !important;
    height: auto !important;
    margin-bottom: 15px !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px !important;
}

/* Remove a borda do último item */
#sync_form .form-group.row:last-child,
.login-form .form-group.row:last-child,
.search-form .form-group.row:last-child,
.page-content .form-group.row:last-child {
    border-bottom: none;
    padding-bottom: 4px !important;
}

.login-form .form-group.row .form-control {
    height: 38px !important;
    padding: 6px 12px !important;
}

/* Estilo específico para o subtítulo do catálogo */
.login-form .page-content.card.search-form .page.subtitle {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
    display: block !important;
}

.login-form .page-content.card.search-form .page.subtitle h6 {
    margin: 0 !important;
    padding: 0 !important;
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

/* Ajustes para o formulário de login e resultados em desktop */
@media (min-width: 992px) {
    .login-form {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto;
        padding: 0 15px;
    }

    .login-form .card-block {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Estilos para a seção de resultados da pesquisa */
    .page-content.card-block.search-results {
        width: 100% !important;
        max-width: 100% !important;
        margin: 1.5rem auto !important;
        padding: 1.5rem !important;
        float: none !important;
        display: block !important;
        border-radius: 0.25rem;
        background-color: #fff;
        
    }
    
    /* Apenas a row dentro de search-results terá 50% */
    .page-content.card-block.search-results > .row {
        width: 50% !important;
        max-width: 800px !important;
        margin: 0 auto !important;
        float: none !important;
    }

/* Estilo para o conteúdo dentro da row */
.page-content.card-block.search-results > .row > div {
    padding: 0 15px;
}

/* Ajuste para dispositivos móveis */
@media (max-width: 768px) {
    .page-content.card-block.search-results > .row {
        width: 95% !important;
        max-width: 95% !important;
    }
}

.search-results .form-group {
    margin-bottom: 1.5rem;
}

.search-results .form-control-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    display: block;
}

.search-results .btn-primary {
    min-width: 200px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
}

/* Ajusta o container principal */
    .container {
        max-width: 1200px !important;
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    /* Ajusta as colunas do formulário */
    #sync_form .form-group.row,
    .login-form .form-group.row,
    .search-form .form-group.row,
    .page-content .form-group.row {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-height: auto !important;
        height: auto !important;
        padding: 4px 0 !important;
        margin-bottom: 8px !important;
    }

    /* Estilo para os grupos de formulário - com maior especificidade */
    #sync_form .form-group.row,
    .login-form .form-group.row,
    .search-form .form-group.row,
    .page-content .form-group.row {
        min-height: auto !important;
        height: auto !important;
        margin-bottom: 15px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    #sync_form .form-group.row:last-child,
    .login-form .form-group.row:last-child,
    .search-form .form-group.row:last-child,
    .page-content .form-group.row:last-child {
        border-bottom: none !important;
        margin-bottom: 5px !important;
    }
    
    /* Garante que os inputs ocupem a largura total */
    .form-control {
        max-width: 100% !important;
        width: 100% !important;
    }
}


/* Se precisar de um ícone ao lado */
.catalogo-titulo i {
    margin-right: 0.5rem;
}

/* Estilo para as opções de rádio em linhas separadas */
.radio-option {
    margin-bottom: 5px;
    padding: 5px;
}

.radio-option input[type="radio"] {
    margin-right: 5px;
}

.radio-option label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    font-weight: bold !important;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox input {
    margin-right: 8px;
}

.forgot-password {
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
}

.forgot-password:hover {
    text-decoration: underline;
}

.btn-login {
    width: 100%;
    padding: 12px;
    background: #2363a3;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-login i {
    margin-right: 8px;
}

.login-footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e1e1e1;
}

.login-footer p {
    color: #666;
    font-size: 14px;
}

.login-footer a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
}

.login-footer a:hover {
    text-decoration: underline;
}

.alert {
    padding: 12px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    font-size: 24px !important;
}

.alert-error {
    background: #fee !important;
    border: 1px solid #f5c6cb !important;
    color: #f30018 !important;
}

.alert-error i {
    margin-right: 8px;
}

/* Adicione ao final do seu style.css existente */
.alert-success {
    background: #d4edda !important;
    border: 1px solid #c3e6cb !important;
    color: #00c42e !important !important;
}

.alert-success i {
    margin-right: 8px;
}

/* Responsivo */
@media (max-width: 480px) {
    .login-box {
        padding: 30px 20px;
    }
    
    .form-options {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}

.navbar-brand {
    font-weight: 700;
}

.cart-line {
    height: auto !important;
    min-height: 24px;
}
.cart-title {
    background-color: #135aa2 !important;
    --bs-bg-opacity: 1;
}

/* Estilos específicos para o carrinho */
.cart-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
}

.cart-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    width: 90%;
    max-width: 80vw;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}

/* Limpar o "piso" de 81px da linha do carrinho */
.cart-item-row, 
.cart-item-row td {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 4px !important;    /* Reduz o padding que está a esticar a linha */
    padding-bottom: 4px !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;    /* Reduz o espaço entre linhas do texto */
}

/* Ajustar os botões dentro da tabela para não esticarem a linha */
.cart-item-row .btn {
    padding: 2px 8px !important;
    width: auto !important;         /* Cancela os 150px que definiu no topo */
    min-width: 0 !important;
    height: auto !important;
}

/* Garante que a imagem (agora 16:9) não force a linha para cima */
img.cartproductimg {
    height: 5vh !important; /* Teste com um valor fixo em vez de 5vh para validar */
    display: block;
}

input.cart-line.text-center {
    height: 3vh !important;
}


p.cart-item-description {
    margin-bottom: 0;
}

.modal-header.bg-primary.text-white {
    padding: 1vh;
    background-color: rgb(35, 99, 163) !important;
}

.modal-footer {
    padding: 2vh !important;
}

button.btn.btn-secondary {
    margin-right: 0.5vh !important
}

button.btn.btn-success {
    margin-left: 0.5vh !important;
    background-color: #135aa2 !important;
}


.status-stock {
    color: #28a745;
}

.status-encomenda {
    color: #dc3545;
}

.cart-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background-color: #e74c3c !important;
    color: white !important;
    border-radius: 20px !important; /* Aumentado para garantir o arredondado */
    
    /* Tamanho e Ajuste */
    min-width: 18px !important; 
    height: 18px !important;
    width: auto !important; /* Permite que cresça se necessário */
    padding: 0 5px !important;
    
    /* Tipografia e Alinhamento */
    font-size: 10px !important; /* Um pouco menor para caber melhor */
    font-weight: bold !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Garantias Visuais */
    white-space: nowrap !important;
    box-sizing: border-box !important;
    z-index: 10 !important; /* Garante que fique por cima */
}


.social-icons {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 15px;
}

.social-icons li a {
    color: white; /* cor dos ícones */
    font-size: 24px;
    transition: transform 0.3s;
}

.social-icons li a:hover {
    transform: scale(1.2);
    color: #dc3545; /* muda cor ao passar o mouse */
}



/* ============================== */
/* NAVBAR MAIS FINA */
/* ============================== */

/* Reduz o padding da navbar */
.navbar.menu {
    padding-top: 0.3rem;   /* default: 0.5rem */
    padding-bottom: 0.3rem;
    z-index: 100;
}

/* Reduz o padding dos links da navbar */
.navbar-nav .nav-link {
    padding-top: 0.35rem;   /* default: 0.5rem */
    padding-bottom: 0.35rem;
    font-size: 0.95rem;     /* opcional: deixa os links ligeiramente menores */
}

/* Reduz o tamanho do botão toggler para mobile */
.navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
}

/* Dropdowns ajustados */
.dropdown-menu {
    padding: 0.25rem 0;
}


/* ============================== */
/* CORREÇÕES PARA CENTRALIZAÇÃO */
/* ============================== */

/* Estilos para page-content card card-block com display flex */
.page-content.card.card-block {
    display: flex !important;
    flex-direction: row;
    width: 100%;
    margin: 20px 0;
    clear: both;
}

/* Container principal - FORÇAR centralização */
.main-content .container {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    margin-top: 5px !important;
    width: 100%;
}

/* Estilo para text-center py-5 com flex */
.text-center.py-5 {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto;
    padding-top: 10px !important; /* override default ~48px */
    padding-bottom: 10px !important; /* override default ~48px */
}

/* Slideshow - Centralização completa */
.carousel-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-container .row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

.carousel-container .col-12 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

body #fotoCarousel {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

#fotoCarousel,
#fotoCarousel .carousel-inner,
#fotoCarousel .carousel-item {
    height: auto !important;
}

.carousel-image {
    width: 100% !important;
    height: auto !important;
    max-height: 90vh;
    object-fit: contain !important;
    object-position: center;
}

/* Para mobile */
@media (max-width: 768px) {
    .carousel-image {
        height: auto !important;
        max-height: 60vh;
    }
    
    .carousel-container {
        padding: 10px;
    }
}

/* Enforce uniform 16:9 ratio for the main carousel */
#fotoCarousel .carousel-inner {
    aspect-ratio: 3 / 1;
    width: 100%;
}

#fotoCarousel .carousel-item {
    height: 100%;
}

/* Desktop sizing caps */
@media (min-width: 992px) {
    #fotoCarousel .carousel-inner {
        max-height: 70vh;
    }
}

/* Navbar tree (menu.php) as boxed items - desktop default */
.navbar .navbar-nav-tree {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar .navbar-nav-tree .nav-item {
    display: flex;
}

.navbar .navbar-nav-tree .nav-link {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
}

.navbar.menu .navbar-nav-tree .nav-link {
               /* brand text color */
    color: #ffffff !important;
    background: #2363a3;                  /* light box */
    border: 1px solid #2363a3;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    font-weight: 600;
}

/* Estilo base para os links do menu */
.navbar.menu .navbar-nav-tree .nav-link {
    color: #ffffff !important;
    background: #2363a3;
    border: 1px solid #2363a3;
    transition: all 0.2s ease;
}

/* Estilo para hover */
.navbar.menu .navbar-nav-tree .nav-link:hover,
.navbar.menu .navbar-nav-tree .nav-link:focus {
    background: #f8f9fa !important;
    color: #2363a3 !important;
    border-color: #2363a3 !important;
}

/* Estilo para links ativos */
.navbar.menu .navbar-nav-tree .nav-link.active {
    background: #ffffff !important;
    color: #2363a3 !important;
    border-color: #2363a3 !important;
    font-weight: 600 !important;
}

/* Estilo específico para a home - apenas quando estiver na home */
body.home .navbar.menu .navbar-nav-tree .nav-link[href="/"],
body.home .navbar.menu .navbar-nav-tree .nav-link[href="/engine"],
body.home .navbar.menu .navbar-nav-tree .nav-link[href*="index.php"] {
    background: #ffffff !important;
    color: #2363a3 !important;
    border-color: #2363a3 !important;
}

/* Reset para a home quando não estiver ativa */
.navbar.menu .navbar-nav-tree .nav-link[href="/"],
.navbar.menu .navbar-nav-tree .nav-link[href="/engine"],
.navbar.menu .navbar-nav-tree .nav-link[href*="index.php"] {
    background: #2363a3 !important;
    color: #ffffff !important;
}

/* Mobile: stack as column and center */
@media (max-width: 576px) {
  .navbar .navbar-nav-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .navbar .navbar-nav-tree .nav-item {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .navbar .navbar-nav-tree .nav-link {
    width: auto;
  }
}

/* Make the slide image fill the 16:9 box without cropping */
#fotoCarousel .carousel-item .carousel-image {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* use 'cover' if you prefer edge-to-edge with crop */
    object-position: center center !important;
    background: #000; /* optional backdrop for letterboxing */
}

/* Miniaturas centralizadas */
.thumbnail-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.thumbnail {
    width: 80px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.thumbnail:hover, .thumbnail.active {
    border-color: #007bff;
    transform: scale(1.1);
}


/* Sobrescrevendo o estilo do Bootstrap */
.mb-4, 
body .mb-4,
.container .mb-4,
.row .mb-4 {
    margin-bottom: 5px !important;
}

/* ISOLAMENTO PARA MY AREA */

#myarea-exclusive-section .links-img-at img {
    position: absolute;
    top: 50%;             /* Move o topo para o meio */
    left: 50%;            /* Move a esquerda para o meio */
    transform: translate(-50%, -50%); /* Recua 50% da própria imagem para centrar real */
    max-height: 70%;
    object-fit: contain;
    background-color: #fff;
}

/* --- AJUSTE DO TEXTO DESCRITIVO NA MY AREA --- */
#myarea-exclusive-section .texto-descritivo-at {
    font-size: 1rem !important; /* Aumenta o tamanho (pode ajustar o valor) */
    font-weight: 600 !important;   /* Define o negrito extra forte */
    color: #135aa2 !important;       /* Cor mais escura para melhor leitura */
    margin: 15px 0 !important;    /* Espaçamento em volta do texto */
    text-transform: uppercase;    /* Opcional: mantém em maiúsculas como na imagem */
    display: block !important;
}


/* Imagens das marcas - Centralização completa */
.links-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.links-container .row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

.links-container .col-12 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.links-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    align-items: center;
    width: 100%;
}

.links-item {
    flex: 0 0 auto;
}

.img_contents_menu_links {
    max-width: 200px;
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: grayscale(0%) !important;
    opacity: 0.8;
}


.img_contents_menu_links:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

.carousel-caption {
    background: rgba(0,0,0,0.7);
    border-radius: 5px;
    padding: 10px;
}

.image-info {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

/* ============================== */
/* ESTILOS EXISTENTES MANTIDOS */
/* ============================== */

.contents_menu_fotos {
    width: 100px;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x);
    }
}

.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

/* Dropdown Hover para Desktop */
@media (min-width: 992px) {
    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

.dropdown-menu {
    border: none;
    box-shadow: 0 4px 15px #2c3e50;
    border-radius: 8px;
}

.dropdown-item {
    transition: all 0.2s ease;
    color: #135aa2 !important;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #135aa2 !important;
}

.dropdown-toggle {
    color: #135aa2 !important;
}

/* AREA TECNICA */
.header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    font-weight: bold;
}

.header .subtitle {
    font-size: 1.1em;
    opacity: 0.9;
    margin-bottom: 15px;
}

.contact-info {
    background-color: #e74c3c;
    color: white;
    padding: 15px;
    font-size: 1em;
    border-radius: 0 0 10px 10px;
    margin-bottom: 30px;
}

/* .main-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    margin-top: 20px;
} */

.info-section {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.info-section h2 {
    color: #2c3e50;
    border-bottom: 3px solid #e74c3c;
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-size: 1.8em;
}

/* Estilos do Acordeão */
/* Acordeão simples - sobrescreve o existente */
.accordion {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden;
}

.accordion-header {
  background: #e74c3c;        /* vermelho principal */
  color: #fff;
  padding: 10px 15px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
}

.accordion-header:hover {
  background: #c0392b;        /* tom mais escuro no hover */
}

.accordion-content {
  display: none;
  padding: 15px;
  background: #f8f9fa;
  border-top: 1px solid #ccc;
}

.accordion.active .accordion-content {
  display: block;
}


.tecnic_area_img_contents_menu_links {
    max-width: 200px;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: grayscale(0%) !important;
    opacity: 0.8;
}


.tecnic_area_img_contents_menu_links:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}


/* ============================== */
/* CORREÇÃO EXTRA PARA BOOTSTRAP */
/* ============================== */

/* Sobrescrever possíveis estilos do Bootstrap que impedem centralização */
.container {
    max-width: 1400px !important;
}

.row {
    justify-content: center !important;
    width: 100%;
    padding-top: 5px;
}

.col-12 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* ============================== */
/* ESTILOS PARA AS MARCAS - ENQUADRADAS */
/* ============================== */

.links-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.links-container .row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

.links-container .col-12 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.links-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    align-items: stretch; /* Para que todos os items tenham a mesma altura */
    width: 100%;
}

.links-item.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 90vw;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.5rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin: 0 auto 1.5rem;
    height: 100%;
}

.card {
    /*width: 90vw !important;*/
    max-width: 1400px !important;
}

.links-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 300px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.links-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.links-container {
    padding-bottom: 15px;
    padding-top: 0px;
}


/* Estilo para a seção de informações da pesquisa */
.page-content.card.card-block.search-info {
    background-color: #f8f9fa;
    border-left: 4px solid #4a6cf7;
    border-radius: 0.25rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.search-info h4 {
    color: #2c3e50;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.search-info .d-flex {
    align-items: center;
    padding: 0.5rem 0;
}

.search-info strong {
    color: #495057;
    min-width: 150px;
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .search-info .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .search-info strong {
        margin-bottom: 0.5rem;
    }
}

/* Technical Area Specific Styles */
#fotolinks .links-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly !important;
    gap: 15px;
    padding: 10px 0;
    max-width: 1400px !important;
    margin: 0 auto;
    padding-top: 0px !important;
}

#section-text.text-center.py-5 {
    padding-top: 0 !important;
}
#fotolinks .links-item {
    width: 180px;
    text-align: center;
    margin: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 200px;
}

#fotolinks .links-item:hover {
    border-color: #0056b3;
    box-shadow: 0 2px 8px rgba(0,86,179,0.1);
}

#fotolinks .links-item img {
    max-width: 100px;
    max-height: 60px;
    width: auto;
    height: auto;
    margin-bottom: 5px;
    object-fit: contain;
}

#fotolinks .links-item p {
    margin: 3px 0;
    font-size: 0.85em;
    color: #333;
    line-height: 1.3;
}

#fotolinks .links-item p:first-of-type {
    font-weight: bold;
    color: #0056b3;
    font-size: 0.95em;
    margin-top: auto;
}

#fotolinks .links-item a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.8em;
    margin-top: auto;
    display: block;
}

#fotolinks .links-item a:hover {
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #fotolinks .links-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    #fotolinks .links-item {
        width: 100%;
    }
}

.links-square .links-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.links-square .links-item {
    width: 300px !important;
    height: 300px !important;
    max-width: none !important;
    padding: 0; /* ensure exact 300x300 square */
    overflow: hidden; /* clip image to square (and rounded corners) */
}

.links-square .links-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important; /* center the crop */
    display: block;
}

@media (max-width: 992px) {
    /* Use grid to force two columns on tablets/small screens */
    .links-square .links-inner {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
        justify-items: stretch;
        width: 100%;
        margin: 0 !important;
    }
    .links-container { padding-left: 10px; padding-right: 10px; }
    .links-square .links-item {
        display: block !important; /* avoid flex sizing issues from desktop */
        position: relative;
        width: 100% !important;
        max-width: 100% !important; /* override desktop max-width:300px */
        height: 0 !important;
        padding-top: 100% !important; /* 1:1 square */
        overflow: hidden;
        padding: 0 !important; /* remove desktop padding:20px */
        border: none !important; /* remove any borders */
        background: transparent !important;
        box-shadow: none !important;
    }
    .links-square .links-item > a,
    .links-square .links-item > a > img {
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100% !important;
        height: 100% !important;
        display: block;
    }
    .links-square .links-item > a > img {
        object-fit: cover !important; /* switch to contain if you prefer no crop */
        object-position: center center !important;
        display: block !important;
    }
    /* Avoid layout shifts/overlap from hover effects on mobile/tablet */
    .links-square .links-item:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

@media (max-width: 768px) {
    /* Keep grid and let it control columns */
    .links-square .links-inner {
        gap: 8px;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
        margin: 0 !important;
    }
    .links-container { padding-left: 10px; padding-right: 10px; }
    .links-square .links-item {
        display: block !important;
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0;
        /* Square via padding-top to avoid aspect-ratio overlaps */
        height: 0 !important;
        padding-top: 100% !important; /* 1:1 square */
        max-width: none !important;
        max-height: none !important;
        overflow: hidden;
        background: transparent !important;
        box-shadow: none !important;
    }
    .links-square .links-item > a,
    .links-square .links-item > a > img {
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100% !important;
        height: 100% !important;
        display: block;
    }
    .links-square .links-item > a > img {
        object-fit: cover !important; /* or contain, your choice */
        object-position: center center !important;
        display: block !important;
    }
    .links-square .links-item:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

@media (max-width: 480px) {
    .links-square {
        margin-top: 0;
    }
    /* Keep two per row on small phones as well */
    .links-square .links-inner {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin: 0 !important;
    }
    .links-container { padding-left: 8px; padding-right: 8px; }
    .links-square .links-item {
        display: block !important;
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        height: 0 !important;
        padding-top: 100% !important;
        overflow: hidden;
        background: transparent !important;
        box-shadow: none !important;
    }
    .links-square .links-item > a,
    .links-square .links-item > a > img {
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100% !important;
        height: 100% !important;
        display: block;
    }
    .links-square .links-item > a > img {
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }
    .links-square .links-item:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Switch to flex for mobile/tablet to ensure smooth two-per-row squares */
@media (max-width: 1200px) {
  .links-module .links-square .links-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    column-gap: 0 !important;   /* avoid rounding pushing to one column */
    row-gap: 8px !important;    /* vertical spacing only */
  }
  .links-module .links-square .links-item {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    flex: 0 0 50% !important;   /* exact two columns */
    max-width: 50% !important;
    width: 50% !important;      /* override any width:100% from earlier rules */
    /* native square sizing */
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    padding: 0 !important;      /* remove desktop padding */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  .links-module .links-square .links-item > a,
  .links-module .links-square .links-item > a > img {
    position: static !important; /* no absolute needed with aspect-ratio */
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  .links-module .links-square .links-item > a > img {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Container fixo para as imagens */
.image-container {
    width: 200px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 2px solid #e9ecef;
}

.contents_menu_Area.Tecnica {
    max-width: 180px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain; /* Mantém a proporção sem distorcer */
}

/* Estilos para o texto */

.mb-4 {
    align-self: flex-start;
}

h5.mb-4 {
    font-weight: bold; /* Define o texto em negrito */
    font-size: 1.5rem;  /* Aumenta o tamanho da fonte. Ajuste este valor (1.5rem, 1.6rem, etc.) conforme desejar. */
    /* Você pode adicionar outras propriedades, como cor, se necessário */
    color: #333; 
}


.links-item p {
    margin: 8px 0;
    color: #333;
    line-height: 1.5;
}

.links-item a:last-child p {
    color: #135aa2;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.links-item a:last-child:hover p {
    color: #0d3d6d;
    text-decoration: underline;
}

/* Responsividade para as marcas */
@media (max-width: 768px) {
    .links-inner {
        gap: 30px;
    }
    
    .links-item {
        max-width: 250px;
        padding: 15px;
    }
    
    .image-container {
        width: 180px;
        height: 100px;
    }
    
    .contents_menu_Area.Tecnica {
        max-width: 160px;
        max-height: 80px;
    }
}

@media (max-width: 576px) {
    .links-inner {
        gap: 20px;
        flex-direction: column;
    }
    
    .links-item {
        max-width: 100%;
        padding: 15px;
    }
    
    .image-container {
        width: 160px;
        height: 90px;
    }
    
    .contents_menu_Area.Tecnica {
        max-width: 140px;
        max-height: 70px;
    }
}



/* Forçar fundo transparente no link de download */
/* .link-download,
.link-download:hover,
.link-download:focus,
.link-download:active, */
/* .acordeao-header .link-download,
.acordeao-header.active .link-download,
.anexos-acordeao .link-download {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
} */


/* Final override: ensure two-per-row squares on small phones for links module */
@media (max-width: 576px) {
  .links-module .links-square .links-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 !important;
    column-gap: 0 !important;
    row-gap: 8px !important;
    justify-content: space-between !important;
  }
  .links-module .links-square .links-item {
    box-sizing: border-box !important;
    min-width: 0 !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .links-module .links-square .links-item > a,
  .links-module .links-square .links-item > a > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .links-module .links-square .links-item > a > img {
    object-fit: cover !important;
    object-position: center center !important;
  }
}


html body .container {
    max-width: 1400px !important;
}

page-content.card.card-block.search-form {
    width: 40vw !important;
}

page-content.card.card-block-search-results {
    width: 40vw !important;
}


page-content .page subtitle {
    padding-top: 5px !important;
}

.page-content.card.card-block.search-form,
.page-content.card.card-block.search-info,
.page-content.card.card-block.search-results {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    border: none;
}


.links-inner-at {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center !important;
    gap: 20px;
    padding: 10px;
}

.links-item-at {
    flex: 0 0 200px;   /* largura fixa de cada quadrado */
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}


.links-item-at {
    flex: 0 0 calc(25% - 20px);   /* 4 por linha em desktop */
    max-width: calc(25% - 20px);
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 20px;
    min-height: 250px; /* Altura mínima para os quadrados */
}

/* Quadrado menor para imagem */
.links-img-at {
    /* Adicionar esta linha para limitar o tamanho máximo, mantendo o aspect-ratio de 1/1 */
    max-width: 300px; 
    
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.links-img-at img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;  /* mostra a imagem inteira */
    object-position: center;
    background-color: #fff; /* opcional: fundo branco ou outra cor */
}


/* Texto abaixo da imagem */
.links-text-at {
    padding: 12px;
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.links-text-at .marca {
    font-weight: bold;
    color: #0056b3;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.links-text-at .descricao {
    font-size: 0.7rem;
    color: #333;
    margin-bottom: 6px;
}

.links-text-at .ver-mais {
    display: inline-block;
    color: #0056b3;
    font-weight: 500;
    font-size: 0.75rem;
    text-decoration: none;
}

.links-text-at .ver-mais:hover {
    text-decoration: underline;
}

/* --- ESTILOS PARA CORTE DE TEXTO (TEXTO-DESCRITIVO-AT) --- */

/* 1. Definir o container P para o corte e usar uma altura de linha base */
/* 1. Definir o container P para o corte e usar uma altura de linha base */
.texto-descritivo-at {
    /* Ajuste de Altura da Linha para ser mais robusto */
    --line-height: 1.4em; 
    
    /* Limite a 4 linhas */
    max-height: calc(4 * var(--line-height)); 
    
    overflow: hidden;
    position: relative;
    /* REMOVIDO: padding-right (não necessário sem reticências) */

    /* Adicionar um margem para garantir que não toca no link 'Ver mais »' */
    margin-bottom: 8px; 
    
    /* Impedir o Flexbox de esticar este bloco quando o texto é cortado */
    flex-shrink: 0;
}

/* Responsivo: 2 por linha no mobile */
@media (max-width: 992px) {
    .links-item-at {
        flex: 0 0 calc(33.33% - 15px);
        max-width: calc(33.33% - 15px);
    }
}

@media (max-width: 768px) {
    .links-item-at {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
        min-height: 220px;
    }
}

@media (max-width: 576px) {
    .links-item-at {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
        min-height: 200px;
    }
}

@media (max-width: 400px) {
    .links-item-at {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


.contents_menu_banner2 {
    width: 100%;
    max-width: 1200px;
margin-top: 0px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;}

.img_contents_menu_banner2 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center
}

body {
    background-color: white !important;
}


/* ACORDEAO */

.anexos-acordeao {
  font-family: Arial, sans-serif;
  width: 100%;
  font-family: Arial, sans-serif; 
  padding-top: 1vh;
}

.acordeao-pasta {
    margin: 2px 0;
    border: none !important;
    background: none !important;
}

/* --- CORES DO ACORDEÃO --- */

/* 1º NÍVEL (RAIZ) - Azul Escuro quando ativo */
.acordeao-pasta.pasta-raiz .acordeao-header.active {
    background-color: #003366 !important; /* Azul Escuro */
    color: #ffffff !important;
    font-weight: normal !important;
}

/* NÍVEIS SEGUINTES (SUBPASTAS) - Azul Clarinho quando ativo */
.acordeao-pasta.is-subfolder .acordeao-header.active {
    background-color: #e3f2fd !important; /* Azul Muito Claro */
    color: #003366 !important; /* Texto em azul escuro para contraste */
    border-left: 4px solid #003366; /* Opcional: uma bordinha para destacar */
}

/* Estilo base para os headers (garantir que o hover não atrapalha) */

/* Coloca as pastas de nível 1 (principais) a negrito */
.acordeao-pasta.nivel-1 > .acordeao-header {
    font-weight: bold;
}

/* Garante que todas as subpastas (nível 2, 3, etc.) tenham peso normal */
.acordeao-pasta.subpasta:not(.nivel-1) > .acordeao-header {
    font-weight: normal;
}
.acordeao-header {
    transition: background-color 0.3s ease;
    cursor: pointer;
    padding: 2px !important;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.acordeao-header.active {
  background: #135aa2 !important;
  color: white;
  font-weight: normal !important;
}

.acordeao-header:hover { text-decoration: underline; }

.acordeao-icon {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.acordeao-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 15px;
    background: none !important;
}

.acordeao-content.active { max-height: 1000px; }

.lista-arquivos { list-style: none; padding: 0; margin: 0; }

.item-arquivo {
    display: flex;
    align-items: center;
    padding: 2px 0;
    background: none !important;
}

.item-arquivo:hover { text-decoration: underline; }

.icone-arquivo { margin-right: 6px; width: 20px; text-align: center; }

.info-arquivo {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    font-size: 0.85rem;
}

.detalhes-arquivo { font-size: 0.75rem; color: #555; margin-left: 10px; }

.subpasta { margin-left: 15px; border-left: none !important; }

.pasta-vazia {
    color: #666;
    font-style: italic;
    padding: 4px 0;
}


/* --- ALINHAMENTO ESPECÍFICO PARA A PÁGINA TERMOS.PHP (usando a classe page-termos) --- */

/* 1. Alinha o container principal de conteúdo à esquerda */
.main-content.page-termos {
    text-align: left;
}

/* 2. Garante que o card-body (onde o texto está) anule qualquer centralização herdada */
/* Usar !important para anular regras de centralização do Bootstrap/Global, se existirem */
.main-content.page-termos .card-body {
    text-align: left !important;
}

/* 3. Garante que todos os títulos e parágrafos dentro do card-text respeitem o alinhamento esquerdo */
.main-content.page-termos .card-text h1,
.main-content.page-termos .card-text h3,
.main-content.page-termos .card-text p,
.main-content.page-termos .card-text .lead,
.main-content.page-termos .card-text .ms-4 {
    text-align: left;
}

/* --- ESTILOS DE TAMANHO E COR ESPECÍFICOS PARA A PÁGINA TERMOS.PHP --- */

/* 1. Estilo para a classe 'lead mb-4' */
/* Esta é a primeira linha de texto do termo: "A compra de produtos em E-Commerce..." */
.page-termos .lead.mb-4 {
    font-size: 1.1rem !important; /* Força o tamanho da fonte para 1.1rem */
}

/* 2. Estilo para o título principal 'card-title' (H1) */
/* "Termos e Condições" */
.page-termos .card-title {
    font-size: 1.5rem !important; /* Força o tamanho da fonte para 1.5rem */
}

/* 3. Estilo para as classes 'text-primary mb-3' (os títulos H3) */
/* "1. Objeto", "2. Informação de Produtos...", etc. */
.page-termos .text-primary.mb-3 {
    /* O Bootstrap geralmente define 'text-primary' como azul. Queremos preto. */
    color: #000000 !important; /* Define a cor do texto para preto puro */
    font-size: 1.2rem;
}





/***********************************
* Estilo do loading 
*********************************** */
.loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading.active {
    display: flex;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}






/** PRODUTOS **/

.product-ficha-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 20px;
    margin: 20px 0;
    min-width: -webkit-fill-available;
}

.product-ficha-header {
    border-bottom: 2px solid #135aa2;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.product-ficha-header h1 {
    color: #135aa2;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.product-ficha-header .ref {
    color: #666;
    font-size: 0.9rem;
    margin-top: 5px;
}

.product-image-wrapper {
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;
    background: #f8f9fa;
}

.product-image-wrapper img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
}

.product-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.product-info-card {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    border-left: 4px solid #135aa2;
}

.product-info-card h3 {
    color: #135aa2;
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.spec-row:last-child {
    border-bottom: none;
}

.spec-label {
    font-weight: 500;
    color: #555;
    font-size: larger;
}

.spec-value {
    font-weight: 600;
    color: #333;
    font-weight: bold;
}

.subtotal {
    font-weight: 600;
    color: #333;
    font-size: larger;
    font-weight: bold;
}

.price-section {
    background: #e7f3ff;
    border-radius: 6px;
    padding: 15px;
    margin: 20px 0;
    border: 1px solid #b3d7ff;
}

.price-main {
    font-size: 1.8rem;
    font-weight: 700;
    color: #135aa2;
    margin-bottom: 5px;
}

.price-detail {
    color: #666;
    font-size: 0.9rem;
}

.stock-status {
    /*display: inline-flex;*/
    display: none !important;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 10px 0;
}

.stock-available {
    background: #d4edda;
    color: #155724;
}

.stock-unavailable {
    background: #f8d7da;
    color: #dc3545;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
}

.quantity-input {
    width: 80px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 8px;
    border: 2px solid #ddd;
    border-radius: 4px;
}

.btn-add-cart-ficha {
    background: #28a745;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-add-cart-ficha:hover {
    background: #218838;
    transform: translateY(-2px);
}

.btn-add-cart-ficha i {
    font-size: 1.1rem;
}

.discount-badge {
    background: #17a2b8;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-left: 10px;
}

.regras-desconto {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
    font-size: 0.85rem;
    color: #856404;
}

.regras-desconto strong {
    display: block;
    margin-bottom: 5px;
}

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
}

.product-tag {
    background: #e9ecef;
    color: #495057;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
}

.product-tag.primary {
    background: #cfe2ff;
    color: #084298;
}

.product-tag.success {
    background: #d1e7dd;
    color: #0f5132;
}

@media (max-width: 768px) {
    .product-info-grid {
        grid-template-columns: 1fr;
    }
    
    .product-ficha-header h1 {
        font-size: 1.3rem;
    }
    
    .price-main {
        font-size: 1.5rem;
    }
}





/** CHANGE PASSWORD **/

.password-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 20px;
}

.password-box {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    padding: 30px;
}

.user-info {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.user-avatar {
    width: 80px;
    height: 80px;
    background: rgb(35, 99, 163) !important;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
}

.user-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.user-email {
    color: #666;
    font-size: 18px;
}


.password-strength {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

.password-requirements {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #666;
}

.password-requirements ul {
    margin: 0;
    padding-left: 20px;
}

.password-requirements li {
    margin-bottom: 5px;
}

.password-requirements li.valid {
    color: #28a745;
}

.password-requirements li.valid:before {
    content: "✓ ";
}

.btn-submit {
    background: rgb(35, 99, 163) !important;
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-back {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #667eea;
    text-decoration: none;
}

.btn-back:hover {
    text-decoration: underline;
}
        




/* DataTables Custom Styles */

#customer-datatable_wrapper {
    padding: 0;
}

#customer-datatable th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    padding: 8px 4px !important;
}

#customer-datatable td {
    vertical-align: middle;
}

.dataTables_filter {
    float: right;
    margin-bottom: 10px;
}

.dataTables_length {
    float: left;
    margin-bottom: 10px;
}

.dataTables_info {
    padding-top: 10px;
}

.dataTables_paginate {
    margin-top: 10px;
}

/* Botões de ação */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-pdf {
    cursor: pointer;
}

/* Modal de detalhes */
#detailsModal .form-control-plaintext {
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

/* Pesquisa avançada */
.advanced-search .card-header {
    background-color: #f8f9fa;
    cursor: pointer;
}

.advanced-search .card-header:hover {
    background-color: #e9ecef;
}

/* Responsividade */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
    }
    
    #customer-datatable {
        font-size: 0.9rem;
    }
}


/* Ajustes no container da tabela */
.dataTables_wrapper {
    width: 100% !important;
    overflow-x: hidden !important;
}

.table-responsive {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Remove padding extra do card */
.card-body {
    padding: 0 !important;
}

/* Container estilo "Card" do exemplo */
.datatable-container-custom {
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* Estilo do Cabeçalho para parecer com a Grelha de Peças */
#customer-datatable thead th {
    background: #f8f9fa !important;
    color: #333;
    font-weight: bold;
    text-align: center;
    font-size: 0.85rem;
    border-bottom: 0px solid #ddd !important;
    padding: 10px 5px;
}

/* Estilo das linhas e bordas */
#customer-datatable {
    border-collapse: collapse !important;
    font-size: 0.85rem;
}

#customer-datatable tbody td {
    vertical-align: baseline;
    padding: 2px 2px;
}

/* Remover bordas padrão do Bootstrap que conflitam */
.dataTables_wrapper .row {
    margin-bottom: 15px;
}

.cart-modal-content .mt-3.text-dark {
    font-size: x-large;
}

.cart-modal-content .desconto {
    font-weight: bold;
}

/* .box-desconto {
    border: 1px solid #ff0000; 
    color: #ff0000;
    padding: 2px 6px;
    display: inline-block;
    text-align: center;
    border-radius: 2px;
    font-weight: bold;
} */

/* Box de desconto conforme imagem anterior */
.box-desconto {
    display: inline-block;
    border: 1px solid #ff0000;
    color: #ff0000;
    padding: 1px 4px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 2px;
}

/* Ajustes no Card da Direita */
.product-info-card {
    min-height: 400px; /* Ajuste para alinhar com a altura da imagem */
    display: flex;
    flex-direction: column;
}

/* Estilo do input de quantidade */
.input-group-text {
    padding: 0 5px;
    font-size: 10px;
}

/* Ajuste do Título no Meio */
.product-info-middle h1 {
    letter-spacing: -0.5px;
    color: #333;
    font-size: x-large;
    font-weight: bold;
}

.product-info-middle.p-3 {
    text-align: left;
    font-size: small;
}

.d-flex {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
}

/****************************/


    .custom-form-container {
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        background: #fff;
        padding: 20px;
    }

    .form-title {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        border-left: 4px solid #d9534f; /* Linha vermelha lateral */
        padding-left: 15px;
    }

    .form-title small {
        font-size: 14px;
        font-weight: 400;
    }

    .custom-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #333;
    }

    .custom-input-box {
        background-color: #f8f9fa; /* Cinza claro da imagem */
        border: 1px solid #dee2e6;
        padding: 10px 15px;
        border-radius: 4px;
        min-height: 42px;
        color: #6c757d;
        font-size: 14px;
        display: flex;
        align-items: center;
         width: 100%; /* Garante que a box ocupa toda a largura da coluna definida (12 ou 6) */
    }


    /* Ajuste para o botão de voltar */
    .btn-outline-dark {
        border-radius: 0;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 12px;
        padding: 10px 25px;
    }


.custom-form-group {
    width: 100%;
}

.mb-3 {
    margin-bottom: 0.5rem !important;
}

body .mt-4 {
    margin-top: 25px !important;
    padding: 0px;
}

div#customer-datatable_info {
    font-size: small;
}

a.page-link {
    font-size: small;
}

ul.social-icons.d-flex.justify-content-center.list-unstyled.p-0.mb-3 {
    flex-direction: row;
}








/** LISTA DE ENCOMENDAS **/
/* .col-clicavel:hover {
    text-decoration: underline !important;
    color: #0056b3 !important; 
} */

.odd, .even {
    border-bottom: 1px solid #9a9898bd !important;
}



/* Esta classe agora será aplicada ao SPAN e não ao TD */
.badge_status_PENDENTE, .badge_status_EM_ABERTO {
    background-color: #ecf020 !important;
    color: #000000 !important;
    padding: 1px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    min-width: 80px;
    text-transform: uppercase;
}

.badge_status_ANULADO {
    background-color: hsl(0, 0%, 0%) !important;
    color: #ffffff !important;
    padding: 1px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    min-width: 80px;
    text-transform: uppercase;
}

.badge_status_VENCIDO {
    background-color: hsl(0, 100%, 42%) !important;
    color: #ffffff !important;
    padding: 1px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    min-width: 80px;
    text-transform: uppercase;
}

.badge_status_FECHADO {
    background-color: #28a745 !important;
    color: #ffffff !important;
    padding: 1px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    min-width: 80px;
    text-transform: uppercase;
}

.badge_status_PARCIAL {
    background-color: #6530e0 !important;
    color: #ffffff !important;
    padding: 1px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    min-width: 80px;
    text-transform: uppercase;
}

.saldo_conta_corrente  {
    max-width: 50% !important;
    background-color: #eca363 !important;
    align-items: center !important;
    display: inline-block !important;
    align-content: center !important;
    align-items: center !important;
    padding: 10px !important;
    font-weight:normal  !important;
    border-radius: 4px !important;
}

.saldo_conta_corrente_bold  {
    font-weight: bold !important;
    font-size: larger !important;
}








/** COOKIES **/



/* Cookie Consent Styles */
.cookie-consent {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    padding: 25px;
    z-index: 9999;
    transform: translateY(200%);
    transition: transform 0.4s ease-in-out;
    border-left: 4px solid #0056b3;
}

.cookie-consent.show {
    transform: translateY(0);
}

.cookie-consent .cookie-icon {
    width: 50px;
    height: 50px;
    background: #f0f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.cookie-consent .cookie-icon i {
    font-size: 24px;
    color: #0056b3;
}

.cookie-consent h4 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.cookie-consent p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.cookie-consent .cookie-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-consent .btn-cookie {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    flex: 1;
    min-width: 120px;
}

.cookie-consent .btn-accept {
    background: #0056b3;
    color: white;
}

.cookie-consent .btn-accept:hover {
    background: #004494;
}

.cookie-consent .btn-settings {
    background: #e9ecef;
    color: #495057;
}

.cookie-consent .btn-settings:hover {
    background: #dee2e6;
}

.cookie-consent .btn-link {
    background: transparent;
    color: #6c757d;
    text-decoration: underline;
    flex: 0 0 auto;
}

.cookie-consent .btn-link:hover {
    color: #0056b3;
}

/* Modal de Configurações */
.cookie-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.cookie-modal.active {
    display: flex;
}

.cookie-modal-content {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.cookie-modal-header {
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.cookie-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.cookie-modal-body {
    padding: 20px;
}

.cookie-option {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.cookie-option:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cookie-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cookie-option-title {
    font-weight: 600;
    color: #333;
}

.cookie-option-description {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* Switch toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #0056b3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

input:disabled + .slider {
    background-color: #0056b3;
    opacity: 0.7;
    cursor: not-allowed;
}

.cookie-modal-footer {
    padding: 20px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 480px) {
    .cookie-consent {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }
    
    .cookie-buttons {
        flex-direction: column;
    }
    
    .cookie-consent .btn-cookie {
        width: 100%;
    }
}

/* Seletor específico para os campos de dados na página de checkout */
.customer-data .p-3, 
.customer-data .p-2 {
    padding: .2rem !important;
}

label.form-check-label.h8.mb-0 {
    font-size: 14px;
}

.customer-data {
    padding: 5px !important;
}

.section-card {
    margin-bottom: 10px !important;
    padding: 0.5rem !important;
    padding-bottom: 0px !important;
}

.shipping-option {
    padding: 0.1rem !important;
    margin-bottom: 0.5rem !important;
}

h8 {
    font-size: 0.8rem !important;
}

/* Aplica o tamanho da sua classe h8 ao placeholder do textarea */
textarea.h8::placeholder {
    font-size: 0.8rem !important;
}

/* Garante compatibilidade com Chrome, Edge e Safari */
textarea.h8::-webkit-input-placeholder {
    font-size: 0.8rem !important;
}

/* Garante compatibilidade com Firefox */
textarea.h8::-moz-placeholder {
    font-size: 0.8rem !important;
}

/* Aplica apenas aos títulos h6 dentro desta estrutura */
    .section-card h6, 
    .customer-data h6 {
        margin-bottom: .1rem !important;
    }

.resumo-card h6, 
#enderecosSection h6 {
    font-weight: normal !important;
}

.resumo-card,
.customer-data {
    border-left: none !important;
    padding-bottom: 0.5rem !important;
}

.total-card {
    background: linear-gradient(135deg, #0a58ca00 0%, #0a58ca7a 100%) !important;
    border: 2px solid #0056b3 !important;
}


.option-text {
    text-align: start;
}

/* Aplica apenas aos títulos h6 dentro desta estrutura */
    .section-card h5, 
    .customer-data h5 {
        text-align: start;
        font-size: 1.1rem;
    }

.total-card h4 {
        font-weight: 800;
        font-size: 1.1rem;
    }


    /* Aplica apenas aos títulos h6 dentro desta estrutura */
    .section-card h4, 
    .customer-data h4 {
        text-align: start;
        font-size: 1.2rem;
    }


.customer-data .mb-2 {
    margin-bottom: .1rem !important;
}

/* Aplica apenas o alinhamento para a classe específica dentro de .customer-data */
.table-totals h6.text-end {
    text-align: end !important;
}

.payment-option {
    padding: 0.1rem !important;
    margin-bottom: 0.5rem !important;
}


/** CHECK CREDIT **/


/* Estilos para o popup de bloqueio */
#creditBlockPopup {
    animation: fadeIn 0.3s ease;
}

#creditBlockPopup > div > div {
    animation: slideIn 0.3s ease;
}

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

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

/* Estilo para o loading */
#creditLoading > div {
    animation: fadeIn 0.2s ease;
}

.table-totals h6 {
        text-align: start !important;
    }

    .table-totals td {
            padding-top: 2px !important;
    padding-bottom: 2px !important;
    }


/* Forçar o Azul apenas dentro do checkout */
.checkout-container {
    --bs-success: #135aa2 !important;
    --success: #135aa2 !important;
}

/* Sobrescrever as classes utilitárias do Bootstrap dentro do checkout */
.checkout-container .bg-success, 
.checkout-container .btn-success {
    background-color: #135aa2 !important;
    border-color: #135aa2 !important;
}

.checkout-container .text-success {
    color: #135aa2 !important;
}

.checkout-container .border-success,
.checkout-container .shipping-option.selected {
    border-color: #135aa2 !important;
}

/* Corrigir o Checkbox dos Termos */
.checkout-container .form-check-input:checked {
    background-color: #135aa2 !important;
    border-color: #135aa2 !important;
}

.checkout-container .selected {
    border-color: var(--success) !important;
    background-color: #135aa21c !important;
}

/* Remove qualquer cor de destaque da última linha da tabela de totais */
.table-totals tr:last-child h6 {
    color: inherit !important;
    font-weight: normal !important;
}

/* Garante que o ID específico dos portes não herde o azul do checkout */
#portesValor {
    color: #212529 !important; 
}

/* Remove o azul dos portes e tira o sublinhado se houver */
#portesRow h6, #portesRow td, #portesValor {
    color: #212529 !important; 
    text-decoration: none !important;
}