/* Header fixo com transição */
.blink-soft {
   animation: blink 1.5s infinite ease-in-out;
}

/* icone certificado na pagina de produto */
.icon-medal-certificate{
   margin-left: -10px;
   margin-top: 6px;
   background: #ffffff;
}

.first-letter-up::first-letter {
   text-transform: uppercase;
}

.mostrar_senha{
   cursor: pointer;
}

#midia1 {
   /* ajusta a posição quando âncora é clicada */
   scroll-margin-top: 100px;
}

.text-indigo{
   color: rgb(73, 107, 185) !important;
}
.border-indigo {
   border-color: rgb(73, 107, 185) !important;
}

@keyframes blink {
   0% {
      opacity: 1;
   }

   50% {
      opacity: 0.05;
   }

   100% {
      opacity: 1;
   }
}


header {
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 1000;
   transition: all 0.3s ease;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0);
   border-bottom: #ed9393 solid 3px;
}

/* Espaço para compensar o header fixo */
body {
   padding-top: 80px;
   /* Ajuste conforme a altura inicial do seu header */
}

/* Header normal (estado inicial) */
.navbar-brand img {
   max-height: 60px;
   transition: all 0.3s ease;
}

.navbar {
   padding: 15px 0;
   transition: all 0.3s ease;
}

/* Header compacto após rolagem */
header.scrolled {
   background-color: #ffffff;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   border-bottom: #eec7c7 solid 1px;
}

header.scrolled .navbar-brand img {
   max-height: 40px;
}

header.scrolled .navbar {
   padding: 5px 0;
}

/* Ajuste responsivo */
@media (max-width: 992px) {
   body {
      padding-top: 70px;
      /* Menor para dispositivos móveis */
   }

   .navbar-brand img {
      max-height: 50px;
   }

   header.scrolled .navbar-brand img {
      max-height: 35px;
   }
}

/* Ajustes para layout mobile do navbar */
@media (max-width: 991.98px) {
   /* Garante que o logo e botão hamburger estejam em linha */
   .navbar > .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
   }

   /* Ajusta o tamanho do logo em mobile */
   .navbar-brand img {
      max-height: 45px;
   }

   /* Para que o conteúdo do menu apareça em coluna quando expandido */
   #navbarContent {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 15px;
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
      z-index: 1000;
   }

   /* Ajuste para os ícones no mobile */
   #navbarContent .d-flex.align-items-center {
      margin-top: 15px;
      justify-content: center;
   }

   /* Ajusta espaçamento dos itens do menu */
   .navbar-nav .nav-item {
      margin-bottom: 8px;
   }
}

/* Ajustes para o header fixo em mobile */
@media (max-width: 991.98px) {
   header.scrolled .navbar-brand img {
      max-height: 35px; /* Tamanho reduzido quando rolado */
   }

   /* Menor transição para o menu mobile para experiência mais fluida */
   header.scrolled .navbar {
      padding: 8px 0;
   }
}

/* Ajuste para o container do carrossel de banners */
#banners {
   margin-top: 0;
   /* Remover margem superior que poderia causar espaço indesejado */
}

#navbarContent ul li{
   margin-right: 25px
}

#banners {
   height: 500px;
   overflow: hidden;
   position: relative;
}

#banners .carousel-item{
   height: 500px;
}

.fas.fa-search {
   cursor: pointer;
   transition: transform 0.2s ease-in-out;
}

.fas.fa-search:hover {
   transform: scale(1.2);
}

#searchContainer {
   position: relative;
   padding: 15px 0;
}

#searchContainer div.w-75{
   margin: 0 auto;
}

#searchContainer .search-input {
   border: none;
   border-bottom: 3px solid #ff0000;
   border-radius: 0;
   background-color: transparent;
   padding: 10px 5px;
   font-size: 1.1rem;
   box-shadow: none;
}

#searchContainer .search-input:focus {
   outline: none;
   box-shadow: none;
   border-bottom: 3px solid #ff0000;
   background-color: transparent;
}

#searchContainer .search-button, #searchContainer .close-search {
   cursor: pointer;
   font-size: 1.2rem;
}

.close-search {
   color: #666;
}

#searchContainer .search-button {
   color: #ff0000;
}

#searchContainer .search-toggle {
   cursor: pointer;
   transition: transform 0.2s ease-in-out;
}

#searchContainer .search-toggle:hover {
   transform: scale(1.2);
}

footer {
   background-color: #212529;
}

footer h5 {
   font-size: 1.1rem;
   font-weight: 600;
   position: relative;
   padding-bottom: 10px;
}

footer h5::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   height: 2px;
   width: 50px;
   background-color: #dc3545;
}

footer .social-icons a {
   display: inline-flex;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background-color: rgba(255,255,255,0.1);
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
}

footer .social-icons a:hover {
   background-color: #dc3545;
   transform: translateY(-3px);
}

footer ul li a {
   transition: all 0.3s ease;
   position: relative;
   padding-left: 15px;
}

footer ul li a::before {
   content: '›';
   position: absolute;
   left: 0;
   transition: all 0.3s ease;
}

footer ul li a:hover {
   color: #dc3545 !important;
   padding-left: 20px;
}

footer ul li a:hover::before {
   color: #dc3545;
   left: 5px;
}

footer .input-group .form-control:focus {
   box-shadow: none;
   border-color: #ced4da;
}

footer .input-group .btn {
   background-color: #dc3545;
   border-color: #dc3545;
}

footer .input-group .btn:hover {
   background-color: #c82333;
   border-color: #bd2130;
}

footer hr {
   background-color: rgba(255,255,255,0.1);
   opacity: 1;
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #dc3545;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: #c82333;
    color: #fff;
    transform: translateY(-3px);
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .back-to-top {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .whatsapp-button {
        bottom: 80px; /* Ajuste para não ficar muito próximo do botão voltar ao topo */
    }
}

/* Estilo para o ícone de carrinho */
.cart-icon {
   position: relative;
   font-size: 1.2rem;
   color: #333;
   text-decoration: none;
}

.cart-icon:hover {
   color: #c70c00;
}

/* Estilo para o contador de itens no carrinho */
.cart-count {
   font-size: 0.7rem;
   font-weight: bold;
   width: 18px;
   height: 18px;
   top: -8px;
   right: -10px;
   border: 2px solid white;
}

/* Animação quando um item é adicionado ao carrinho */
@keyframes cartBounce {
   0% { transform: scale(1); }
   50% { transform: scale(1.3); }
   100% { transform: scale(1); }
}

.cart-bounce {
   animation: cartBounce 0.5s;
}

/* Estilo para o alert de adicionado ao carrinho */
.alert-purple {
   background-color: #c9b0f7;
}


/* estilo personalizado para o alert do bootstrap */
.alert-custom {
   font-size: 1.25rem;
}

/* Estilos para o Carrinho Offcanvas */
#cartOffcanvas {
   width: 380px;
   max-width: 90vw;
}

.cart-item-img {
   width: 30px;
   height: 30px;
   object-fit: cover;
   border-radius: 4px;
}

.cart-item-img2 {
   width: 60px;
   height: 60px;
   object-fit: cover;
   border-radius: 4px;
}

#cartItems .table-striped tbody tr:nth-of-type(odd) {
   background-color: #f00f00;
   /* sua cor personalizada */
}

.table-striped{
   --bs-table-striped-bg: #f9f9f9;
   /* roxinho claro */
   --bs-table-striped-color: #000;
   /* cor do texto nas linhas striped */

}

#cartItems table td i{
   opacity: 0.65 ;
   cursor: pointer ;
}

#cartItems table td i:hover {
   opacity: 1;
}

.cart-item-title {
   text-transform: capitalize;
   padding-top: 0 !important;
}

#cartItems .img-prod{
   width: 30px;
}
#cartItems .text-prod{
   width: calc(80% - 30px);
}
#cartItems .trash-prod{
   width: 30px
}


.cart-quantity-btn {
   width: 28px;
   height: 28px;
   padding: 0;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.cart-quantity {
   width: 30px;
   text-align: center;
   border: none;
   background: transparent;
}

.btn-remove {
   color: #dc3545;
   background: transparent;
   border: none;
   padding: 0;
}

.btn-remove:hover {
   color: #bb2d3b;
}

/* Animação para o item removido */
.cart-item-removing {
   opacity: 0;
   transform: translateX(30px);
   transition: all 0.3s ease;
}

/* Estilo para botão de checkout */
#checkoutBtn {
   transition: all 0.3s ease;
}

#checkoutBtn:hover {
   box-shadow: 0 4px 8px rgba(220, 53, 69, 0.2);
}

/* Estilos para o contador do carrinho */
.cart-icon {
   position: relative;
   cursor: pointer;
}

.cart-count {
   font-size: 0.7rem;
   font-weight: bold;
   width: 18px;
   height: 18px;
   top: -8px;
   right: -10px;
   border: 2px solid white;
}

/* Animação quando um item é adicionado ao carrinho */
@keyframes cartBounce {
   0% { transform: scale(1); }
   50% { transform: scale(1.3); }
   100% { transform: scale(1); }
}

.cart-bounce {
   animation: cartBounce 0.5s;
}

/* Estilos para o menu fixo */
.sticky-menu {
  position: sticky;
  top: 90px; /* Ajuste conforme a altura do seu header */
  max-height: calc(100vh - 120px); /* Altura máxima para garantir que caiba na tela */
  overflow-y: auto; /* Adiciona rolagem caso o menu seja muito grande */
  transition: top 0.3s ease; /* Transição suave quando header diminui */
}

/* Quando o header estiver compacto (scrolled), ajustar o topo do menu */
.scrolled .sticky-menu {
  top: 70px; /* Valor menor para quando o header estiver compacto */
}

/* Estilo visual para o menu */
.sticky-menu .list-group-item {
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.sticky-menu .list-group-item.active {
  border-left: 3px solid #dc3545;
  background-color: #f8f9fa;
  color: #dc3545;
  font-weight: bold;
}

.sticky-menu .list-group-item:hover:not(.active) {
  border-left: 3px solid #f8d7da;
  background-color: #f8f9fa;
}

/* Ajustes responsivos */
@media (max-width: 767.98px) {
  .sticky-menu {
    position: relative;
    top: 0;
    margin-bottom: 20px;
  }
}

/* Estilos para o botão de WhatsApp */
.whatsapp-button {
   position: fixed;
   bottom: 90px; /* Posição acima do botão "Voltar ao topo" */
   right: 20px;
   width: 60px;
   height: 60px;
   background-color: #25d366;
   color: #fff;
   border-radius: 50%;
   text-align: center;
   font-size: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
   z-index: 1000;
   transition: all 0.3s;
   text-decoration: none;
}

.whatsapp-button:hover {
   background-color: #20ba5a;
   color: #fff;
   transform: scale(1.1);
}

.whatsapp-tooltip {
   position: absolute;
   right: 70px;
   background-color: #333;
   color: #fff;
   padding: 5px 15px;
   border-radius: 20px;
   font-size: 14px;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s;
   white-space: nowrap;
}

.whatsapp-button:hover .whatsapp-tooltip {
   opacity: 1;
   visibility: visible;
}

/* Ajuste responsivo */
@media (max-width: 768px) {
   .whatsapp-button {
      width: 50px;
      height: 50px;
      font-size: 25px;
      bottom: 80px;
   }
}

/* form cartao de credito */
.validacao-cartao{
   clear: both;
}

/* Estilo para o banner de consentimento de cookies */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(33, 37, 41, 0.95);
    color: #fff;
    padding: 1rem 0;
    z-index: 1050;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

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

.cookie-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.cookie-text {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    flex: 1 1 100%;
}

.cookie-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: #ffc107;
}

.cookie-text p {
    margin: 0;
    font-size: 0.95rem;
}

.cookie-text a {
    color: #8ab4f8;
    text-decoration: none;
}

.cookie-text a:hover {
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

@media (min-width: 768px) {
    .cookie-text {
        flex: 1;
        margin-bottom: 0;
    }

    .cookie-buttons {
        flex: 0 0 auto;
    }
}

/* Estilo para o banner de consentimento de cookies */
.cookie-consent {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: rgba(33, 37, 41, 0.95);
   color: #fff;
   padding: 1rem 0;
   z-index: 1050;
   transform: translateY(100%);
   transition: transform 0.3s ease-in-out;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

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

.cookie-content {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
}

.cookie-text {
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
   flex: 1 1 100%;
}

.cookie-icon {
   font-size: 1.5rem;
   margin-right: 1rem;
   color: #ffc107;
}

.cookie-text p {
   margin: 0;
   font-size: 0.95rem;
}

.cookie-text a {
   color: #8ab4f8;
   text-decoration: none;
}

.cookie-text a:hover {
   text-decoration: underline;
}

.cookie-buttons {
   display: flex;
   gap: 0.5rem;
   margin-left: auto;
}

@media (min-width: 768px) {
   .cookie-text {
      flex: 1;
      margin-bottom: 0;
   }

   .cookie-buttons {
      flex: 0 0 auto;
   }
}

/* Estilo para o link do mapa no footer */
footer a[href^="https://maps.google.com"] {
   text-decoration: none;
   transition: color 0.3s ease;
}

footer a[href^="https://maps.google.com"]:hover {
   color: #8ab4f8 !important;
   text-decoration: underline;
}

#newsletterFeedback {
   color: #8ab4f8;
   font-style: italic;
}

#newsletterFeedback.error {
   color: #ff6b6b;
}

#newsletterFeedback.success {
   color: #69db7c;
}

/* Estilo para o banner de consentimento de cookies */
.cookie-consent {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: rgba(33, 37, 41, 0.95);
   color: #fff;
   padding: 1rem 0;
   z-index: 1050;
   transform: translateY(100%);
   transition: transform 0.3s ease-in-out;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

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

.cookie-content {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
}

.cookie-text {
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
   flex: 1 1 100%;
}

.cookie-icon {
   font-size: 1.5rem;
   margin-right: 1rem;
   color: #ffc107;
}

.cookie-text p {
   margin: 0;
   font-size: 0.95rem;
}

.cookie-text a {
   color: #8ab4f8;
   text-decoration: none;
}

.cookie-text a:hover {
   text-decoration: underline;
}

.cookie-buttons {
   display: flex;
   gap: 0.5rem;
   margin-left: auto;
}

@media (min-width: 768px) {
   .cookie-text {
      flex: 1;
      margin-bottom: 0;
   }

   .cookie-buttons {
      flex: 0 0 auto;
   }
}

/* Estilo para o link do mapa no footer */
footer a[href^="https://maps.google.com"] {
   text-decoration: none;
   transition: color 0.3s ease;
}

footer a[href^="https://maps.google.com"]:hover {
   color: #8ab4f8 !important;
   text-decoration: underline;
}

#newsletterFeedback {
   color: #8ab4f8;
   font-style: italic;
}

#newsletterFeedback.error {
   color: #ff6b6b;
}

#newsletterFeedback.success {
   color: #69db7c;
}

/* Estilos para o container de resultados de pesquisa */
.search-results-container {
    position: absolute;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    z-index: 1050;
}

.search-results-container.show {
    max-height: 600px; /* Altura máxima para animação */
    opacity: 1;
}

/* Lista de resultados */
.search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 500px;
    overflow-y: auto;
}

.search-results-list li {
    border-bottom: 1px solid #f0f0f0;
}

.search-results-list li:last-child {
    border-bottom: none;
}

/* Itens de resultado */
.search-result-item {
    display: flex;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: #f8f9fa;
    text-decoration: none;
}

/* Thumbnails de imagem */
.search-result-img {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 12px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-result-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ícones para categorias/itens sem imagem */
.search-result-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 4px;
    margin-right: 12px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 1.5rem;
}

/* Informações do resultado */
.search-result-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.search-result-name {
    font-weight: 500;
    margin-bottom: 2px;
    color: #333;
    font-size: 0.9rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-type {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 2px;
}

.search-result-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0d6efd;
}

/* Link para ver todos os resultados */
.search-see-all {
    padding: 12px 15px;
    background-color: #f8f9fa;
    text-align: center;
    border-top: 1px solid #e9ecef;
}

.search-see-all a {
    text-decoration: none;
    color: #0d6efd;
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-see-all a:hover {
    text-decoration: underline;
}

/* Mensagem de nenhum resultado */
.search-no-results {
    padding: 15px;
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Scrollbar customizada nos resultados */
.search-results-list::-webkit-scrollbar {
    width: 6px;
}

.search-results-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.search-results-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.search-results-list::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}