/* O modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.85); /* Leve aumento na opacidade */
    backdrop-filter: blur(8px); /* Intensificar o desfoque */
}

/* Modal Content (a imagem) */
.modal-content {
    margin: auto;
    display: block;
    width: 75%;
    max-width: 650px; /* Aumentar levemente o tamanho máximo */
    border-radius: 20px; /* Bordas um pouco mais arredondadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); /* Sombra mais profunda e suave */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
   
    transform: scale(0.8); /* Ajustar a escala inicial para um efeito mais suave */
}

.modal-content.show {
    opacity: 1; /* Torna visível */
    transform: scale(1); /* Escala normal ao exibir */
}

/* O botão de fechar */
.close {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.close:hover,
.close:focus {
    color: #ff4d4d;
    transform: rotate(90deg); /* Girar ao passar o mouse */
}

/* Estilo para as setas de navegação */
.swiper-button-next, 
.swiper-button-prev {
    color: #fff !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: rgba(0, 0, 0, 0.5) !important; /* Fundo escuro com leve transparência */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
    top: 40% !important; /* Centraliza verticalmente */
    transform: translateY(-50%) !important; /* Centraliza exatamente no meio */
}

.swiper-button-next {
    right: 15px !important; /* Para a seta da direita */
    left: auto !important; /* Desativa a propriedade left na seta da direita */
}

.swiper-button-prev {
    left: 15px !important; /* Para a seta da esquerda */
    right: auto !important; /* Desativa a propriedade right na seta da esquerda */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 0.5) !important; /* Clareia o fundo ao passar o mouse */
    transform: scale(1.15) !important; /* Aumenta levemente ao passar o mouse */
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px !important; /* Tamanho das setas */
    content: ''; /* Removendo o conteúdo padrão */
    border: solid white; /* Cria o triângulo da seta */
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 6px;
}

.swiper-button-next::after {
    transform: rotate(-45deg); /* Gira para criar a seta para a direita */
    -webkit-transform: rotate(-45deg);
}

.swiper-button-prev::after {
    transform: rotate(135deg); /* Gira para criar a seta para a esquerda */
    -webkit-transform: rotate(135deg);
}

/* Novo estilo para o campo de frete */
.shipping-info {
    background-color: #e0f7fa;
    border: 1px solid #00acc1;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    color: #00796b;
    display: none; /* Oculta inicialmente */
}
.shipping-info.active {
    display: block; /* Exibe apenas quando houver conteúdo */
}
.shipping-info p {
    margin: 5px 0;
}
.shipping-info p span {
    font-weight: bold;
}
.shipping-info img {
    vertical-align: middle;
    width: 50px;
    height: auto;
    margin-right: 10px;
}



/* Estilo para o resumo do carrinho */
.cart__totals {
    
     width: 100% !important; /* Ajuste a largura para 100% ou um valor fixo (por exemplo, 400px) */
    max-width: 500px !important; /* Define um valor máximo de largura */
   
    height: 23% !important; /* Permite que a altura seja ajustada automaticamente com base no conteúdo */
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); /* Gradiente suave */
    border: 1px solid #ccc; /* Borda sutil */
    border-radius: 12px; /* Bordas mais arredondadas */
    padding: 15px; /* Mais espaçamento interno */
    margin-bottom: 1px; /* Mais espaçamento inferior */
    font-family: 'Roboto', sans-serif; /* Fonte moderna */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.cart__totals h2 {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #333; /* Cor do título */
    font-weight: 700; /* Mais ênfase no título */
    text-align: center; /* Centralizar o texto do título */
    text-transform: uppercase; /* Texto em maiúsculas */
    letter-spacing: 1.5px; /* Espaçamento entre letras */
    border-bottom: 2px solid #ddd; /* Linha abaixo do título */
    padding-bottom: 1px; /* Espaçamento abaixo do título */
}

.cart__totals-box {
    margin-bottom: 15px;
}

.cart__totals-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 1rem; /* Tamanho da fonte padrão */
}

.cart__totals-item span {
    color: #555; /* Cor do texto das labels */
    font-weight: 500;
}

.cart__totals-item div {
    text-align: right;
}

.cart__totals-item div span {
    display: block;
    font-size: 1.2rem;
    color: #000; /* Cor dos valores */
}

.cart__totals-item:last-child {
    border-bottom: none;
    font-weight: bold;
}

.cart__totals-item:last-child span,
.cart__totals-item:last-child div span {
    color: #007bff; /* Cor destaque para o total */
}

/* Ajustes nos valores do total */
.cart__totals-item div .subtotal-cartao,
.cart__totals-item div .subtotal-pix,
.cart__totals-item div .shipping-cost,
.cart__totals-item div .total-cartao,
.cart__totals-item div .total-pix {
    font-size: 1.1rem;
    font-weight: normal;
    color: #333;
}

.cart__totals-item div .total-cartao,
.cart__totals-item div .total-pix {
    font-weight: bold;
    color: #007bff; /* Destaque para os totais */
}

/* Adição de ícones para cada linha */
.cart__totals-item span:before {
    content: '•';
    color: #007bff;
    margin-right: 8px;
    font-size: 1.2rem;
    vertical-align: middle;
}

/* Efeito de hover nas linhas */
.cart__totals-item:hover {
    background-color: #f0f0f0;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

/* Estilo para as ações de detalhes */
.details__action {
    display: flex;
    gap: 1px;
    margin-top: 15px;
    margin-left: -20px; /* Ajuste o valor para alinhar mais à esquerda */
}

.comprar-agora-btn {
    display: inline-block; /* Garante que se comporte como um botão */
    padding: 8px 10px; /* Espaçamento interno */
    font-size: 16px; /* Tamanho do texto */
    font-weight: bold; /* Negrito */
    color: #fff; /* Cor do texto */
    text-transform: uppercase; /* Texto em maiúsculas */
    text-decoration: none; /* Remove sublinhado */
    background: linear-gradient(to right, #2ecc71, hsl(176, 88%, 27%)); /* Gradiente de fundo */
    border: none; /* Remove bordas */
    border-radius: 25px; /* Borda arredondada */
    cursor: pointer; /* Mostra que é clicável */
    transition: background 0.3s, transform 0.3s; /* Suaviza as animações */
    animation: pulse 3s infinite; /* Adiciona o efeito pulsante */
}

.comprar-agora-btn:hover {
    background: linear-gradient(to right, #27ae60, #2ecc71); /* Gradiente invertido no hover */
    transform: scale(1.05); /* Leve zoom ao passar o mouse */
}

/* Animação de pulsar */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(39, 174, 96, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(39, 174, 96, 0.7);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(39, 174, 96, 0.5);
    }
}

.details__action {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espaçamento entre os botões */
}
/* Container principal para a maior parcela */
.maior-parcela-cartao-container {
    background-color: #f9f9f9; /* Cor de fundo clara para destacar a área */
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra leve para destacar o bloco */
    margin-bottom: 3px;
    text-align: left;
}

/* Estilização do título "Parcelamento no Cartão" */
.maior-parcela-cartao-titulo {
    font-weight: bold;
    color: #555;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
}

/* Ícone ao lado do título */
.maior-parcela-cartao-titulo i {
    margin-right: 8px;
    font-size: 1.5rem;
    color: #2D9CDB;
}

/* Estilização da área onde a maior parcela será exibida */
.maior-parcela-cartao {
    background-color: #e8f5e9;
    padding: 12px;
    border-radius: 5px;
    display: inline-block;
    color: #2e7d32;
    font-weight: bold;
}

/* Estilização do número de parcelas */
.parcela-numero {
    font-size: 1.2rem;
    color: #2e7d32; /* Cor verde para destacar */
    margin-right: 4px;
}

/* Estilização do valor da parcela */
.parcela-valor {
    font-size: 1.2rem;
    color: #2e7d32;
    margin-right: 4px;
}

/* Texto "sem juros" */
.parcela-texto {
    font-size: 1rem;
    color: #555;
    font-weight: normal;
}

.video-link {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 120px;
    right: 40px;
    background-color: #00796b;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 1px 1px 2px #888;
    z-index: 1000;
    cursor: pointer;
    overflow: hidden; /* Para garantir que o vídeo se ajuste à bolinha */
}

.video-link video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para o vídeo preencher a bolinha de forma adequada */
    border-radius: 50%;
}

/* Estilo para o modal de vídeo */
#video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1001;
    justify-content: center;
    align-items: center;
}

#video-modal video {
    max-width: 90%;
    max-height: 90%;
    border-radius: 17px;
}

#video-modal .close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

/* Botões de Ações no Modal de Vídeo */
.video-modal-actions {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Link do Produto */
.product-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 12px;
    width: 300px; /* Definindo uma largura específica */
    height: auto; /* Altura automática, pode ser ajustada */
    position: absolute; /* Posição absoluta para posicionar livremente */
    bottom: 70px; /* Alinhado a 20px do fundo */
    left: -172px; /* Alinhado a 20px da esquerda */
    z-index: 999; /* Garantir que fique acima de outros elementos */
}

/* Estilo da imagem dentro do link do produto */
.product-link img {
    width: 40px;
    height: 70px;
    border-radius: 8px;
    margin-right: 10px;
}

/* Informações do produto */
.product-info {
    color: white;
    display: flex;
    flex-direction: column;
}

/* Estilo do texto das informações do produto */
.product-info span {
    font-size: 14px;
}


/* Botão de WhatsApp (renomeado para whatsapp-link2) */
.whatsapp-link2 {
    position: fixed;
    bottom: 65px;
    right: -175px;
    width: 45px;
    height: 45px;
    background-color: #25d366; /* Cor típica do WhatsApp */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1001;
}

.whatsapp-link2 img {
    width: 55px;
    height: 100px;
}

/* Botão de Instagram */
.instagram-link2 {
    position: fixed;
    bottom: 115px;
    right: -175px;
    width: 45px;
    height: 45px;
    background-color: #ede5e6; /* Cor típica do Instagram */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1001;
}

.instagram-link2 img {
    width: 30px;
    height: 30px;
}



/* Importar uma fonte elegante do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

@keyframes digitalizacao-entrada {
  0% {
    transform: translateX(100%); /* Começa fora da tela à direita */
    opacity: 0; /* Invisível no início */
  }
  50% {
    opacity: 1; /* Fica visível enquanto se move */
  }
  100% {
    transform: translateX(0); /* Chega à posição final */
    opacity: 1; /* Totalmente visível */
  }
}

@keyframes digitalizacao-saida {
  0% {
    transform: translateX(0); /* Começa na posição final */
    opacity: 1; /* Totalmente visível */
  }
  100% {
    transform: translateX(100%); /* Sai para a direita */
    opacity: 0; /* Torna-se invisível ao sair */
  }
}

#video-text {
  position: fixed;
  bottom: 56px; /* Ajuste conforme necessário */
  right: 99px; /* Ajuste conforme necessário */
  background: #9b9999; /* Cinza mais claro */
  color: #222; /* Texto mais escuro */
  padding: 12px 25px; /* Mais espaço interno */
  border-radius: 12px; /* Bordas arredondadas */
  font-size: 16px; /* Tamanho do texto maior */
  z-index: 1001;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Sombra suave */
  white-space: nowrap; /* Impede que o texto quebre linha */
  overflow: hidden; /* Garante que o texto fique contido no elemento */
  font-family: 'Roboto', sans-serif; /* Fonte elegante */
  animation: digitalizacao-entrada 3s ease-out forwards, digitalizacao-saida 3s ease-in 8s forwards; /* Combina as animações */
}

#dynamic-text {
  display: inline-block;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Efeito de sombra no texto */
  letter-spacing: 1px; /* Espaçamento entre as letras */
  background: -webkit-linear-gradient(45deg, #f3ec78, #af4261); /* Gradiente no texto */
  -webkit-background-clip: text; /* Aplicar gradiente apenas no texto */
  -webkit-text-fill-color: transparent; /* Tornar o gradiente visível */
  color: #222; /* Texto mais escuro para melhor visibilidade */
}

/* Adiciona uma animação para saída pela esquerda */
@keyframes slideOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-150%);
    }
}

.video-exit {
    animation: slideOutLeft 12s forwards;
}

@keyframes slide-left {
  from {
    transform: translateX(200%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-left {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-left {
  animation: slide-left 1s ease-out;
}

/* Animação de entrada */
@keyframes slide-right {
  from {
    transform: translateX(-100%); /* Começa fora da tela à esquerda */
    opacity: 0; /* Invisível no início */
  }
  to {
    transform: translateX(0); /* Chega à posição final */
    opacity: 1; /* Totalmente visível */
  }
}

/* Animação de saída */
@keyframes slide-right-exit {
  from {
    transform: translateX(0); /* Começa na posição final */
    opacity: 1; /* Totalmente visível */
  }
  to {
    transform: translateX(180%); /* Sai para a direita */
    opacity: 0; /* Torna-se invisível ao sair */
  }
}

/* Aplicação da animação */
.slide-right {
  animation: slide-right 1s ease-out forwards, slide-right-exit 2s ease-out forwards 15s; 
  /* A animação de saída começa após 15 segundos */
}

.fade-in {
  animation: fade-in 1s ease-in-out;
}

@keyframes slide-top {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-top {
  animation: slide-top 1s ease-out;
}

@keyframes slide-bottom {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-bottom {
  animation: slide-bottom 1s ease-out;
}

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

.pulse {
  animation: pulse 1.5s infinite;
}

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

.rotate {
  animation: rotate 2s linear infinite;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  75% {
    transform: translateX(-10px);
  }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes zoom-in {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.zoom-in {
  animation: zoom-in 1s ease-in-out;
}

@keyframes zoom-out {
  from {
    transform: scale(1.5);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.zoom-out {
  animation: zoom-out 1s ease-in-out;
}

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




/* Estilo para a seção de produtos relacionados */
.custom-related-products .custom-products__container {
    display: flex;                /* Exibe os itens em linha horizontal */
    flex-wrap: nowrap;            /* Impede que os itens quebrem para a linha seguinte */
    overflow-x: auto;             /* Habilita a rolagem horizontal */
    gap: 20px;                    /* Espaçamento entre os produtos */
    padding-bottom: 20px;         /* Espaço extra na parte inferior para evitar sobreposição da rolagem */
}

.custom-related-products .custom-product-item {
      display: flex;    
    flex: 0 0 auto;               /* Impede que os itens encolham ou se estiquem */
    width: 250px;                 /* Largura do item, ajuste conforme necessário */
    min-width: 1890px;             /* Garante o tamanho mínimo para o item */
    background-color: #fff;       /* Cor de fundo do item, pode ser ajustada conforme o layout */
    border-radius: 10px;          /* Borda arredondada para os itens */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombras para destacar os produtos */
    padding: 5px;   /* Espaçamento interno para os produtos */
    gap: 0.4rem;
    
}

.custom-related-products .custom-products__container::-webkit-scrollbar {
    height: 8px;                  /* Ajusta a altura da barra de rolagem */
}

.custom-related-products .custom-products__container::-webkit-scrollbar-thumb {
    background-color: #ccc;       /* Cor da barra de rolagem */
    border-radius: 4px;           /* Bordas arredondadas da barra de rolagem */
}

.custom-related-products .custom-products__container::-webkit-scrollbar-track {
    background-color: #f1f1f1;    /* Cor de fundo da área da barra de rolagem */
}


/* Estilo para o título da seção Produtos Relacionados */
.custom-section__title {
    font-size: 14px; /* Aumenta o tamanho da fonte */
    font-weight: 700; /* Torna o texto mais destacado */
    text-align: center; /* Centraliza o título */
    color: #444; /* Cor elegante e neutra */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
    text-transform: uppercase; /* Converte o texto para maiúsculas */
    letter-spacing: 1px; /* Adiciona espaçamento entre as letras */
    border-bottom: 2px solid #ccc; /* Linha decorativa abaixo do título */
  
    padding-bottom: 5px; /* Espaçamento entre o texto e a linha */
}


.custom-section__title span {
    display: block; /* Força quebra de linha para o span */
    margin-top: 5px; /* Espaço extra entre linhas, se necessário */
    font-size: 15px; /* Tamanho levemente menor para subtítulos */
    color: #088179; /* Destaque em cor específica */
}


.short__description {
    font-size: 13px !important; /* Aumenta o tamanho da fonte para maior legibilidade */
    color: #4a4a4a !important; /* Cor do texto mais suave */
    line-height: 1.8 !important; /* Espaçamento maior entre as linhas para melhorar a leitura */
    font-family: 'Roboto', sans-serif !important; /* Fonte mais moderna */
    margin-bottom: 10px !important; /* Espaço inferior maior para separar de outros conteúdos */
    text-align: justify !important; /* Alinha o texto de forma justificada */
    padding: 20px !important; /* Maior preenchimento ao redor do texto */
    background: linear-gradient(145deg, #f9f9f9, #e0e0e0) !important; /* Gradiente suave no fundo */
    border-radius: 12px !important; /* Bordas arredondadas mais pronunciadas */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important; /* Sombra suave para dar profundidade */
    border: 1px solid #ddd !important; /* Borda sutil */
    transition: all 0.3s ease-in-out !important; /* Animação suave para transições */
     font-weight: bold !important; /* Deixa os links em negrito */
}

.short__description:hover {
    transform: translateY(-5px) !important; /* Animação para levantar a descrição ao passar o mouse */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15) !important; /* Sombra mais forte ao passar o mouse */
}

.short__description a {
    color: #007bff !important; /* Cor atraente para links */
    text-decoration: none !important; /* Remove o sublinhado dos links */
    font-weight: bold !important; /* Deixa os links em negrito */
    transition: color 0.2s ease-in-out !important; /* Animação de cor para os links */
}

.short__description a:hover {
    color: #0056b3 !important; /* Altera a cor do link ao passar o mouse */
    text-decoration: underline !important; /* Sublinha o link ao passar o mouse */
}

.short__description p {
    margin: 10px 0 !important; /* Espaçamento superior e inferior nos parágrafos */
    font-size: 16px !important; /* Tamanho da fonte para os parágrafos */
    color: #666 !important; /* Cor dos parágrafos mais suave */
}


.details__tab-content {
    display: none;
}
.details__tab-content.active-tab {
    display: block;
}

#user-photo {
    width: 50px; /* Define a largura da miniatura */
    height: 50px; /* Define a altura da miniatura */
    object-fit: cover; /* Ajusta a imagem sem distorção */
    border-radius: 50%; /* Torna a imagem circular */
    border: 2px solid #ddd; /* Adiciona uma borda sutil */
    display: none; /* Garante que seja tratada como um bloco */
    margin: 0 auto 10px; /* Centraliza a imagem e adiciona um espaçamento inferior */
}

.reviews__wrapper {
    display: flex;
    
    transition: transform 5s ease; /* Transição suave */
    overflow: hidden; /* Garante que nenhum conteúdo saia dos limites */
}

.review__single {
    flex: 0 0 200px; /* Altura fixa de cada comentário */
    display: flex;
    
    align-items: flex-start; /* Garante alinhamento à esquerda */
    justify-content: center; /* Centraliza verticalmente */
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px; /* Espaçamento entre os comentários */
    background-color: #f9f9f9;
    width: 100%; /* Garante que ocupe todo o espaço do contêiner */
}

.reviews__container {
    width: 100%; /* Garante que o contêiner ocupe a largura total */
    height: 200px; /* Altura consistente com o comentário */
    overflow: hidden; /* Evita que elementos transbordem */
    position: relative;
}


.review__title {
    font-size: 16px;
    font-weight: bold; /* Nome em negrito */
    margin-bottom: 5px;
    color: #333;
}

.review__date {
    font-size: 12px; /* Data menor */
    color: #888; /* Cor mais clara */
    margin-bottom: 8px;
}

.review__description {
    font-size: 14px;
    color: #444; /* Cor do texto */
    line-height: 1.5; /* Espaçamento entre linhas */
    overflow-wrap: break-word; /* Quebra palavras longas */
    word-wrap: break-word; /* Suporte para navegadores antigos */
    word-break: break-word; /* Quebra de palavras */
    max-height: 100px; /* Altura máxima da descrição */
    overflow-y: auto; /* Adiciona rolagem vertical se necessário */
}

.reviews__wrapper {
    display: flex;
    flex-direction: column;
    transition: transform 5s ease; /* Transição suave para cada movimento */
    touch-action: pan-y; /* Permite rolagem vertical no celular */
}


.rating-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Arial, sans-serif;
}

.rating-text {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}



/* Novo estilo para o input */
.rating__input {
    display: flex;
    gap: 5px;
    
}



.rating__input input {
    display: none; /* Esconde os inputs de rádio */
}

/* Estilo para os corações preenchidos */
.fi.fi-rs-heart.filled {
    color: #ff0000; /* Vermelho vibrante */
    font-size: 0.75rem; /* Tamanho do coração */
    margin: 0 3px; /* Espaçamento entre os corações */
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 15px rgba(255, 0, 0, 0.5); /* Brilho vermelho */
    transition: transform 0.3s, text-shadow 0.3s;
}

/* Estilo para os corações vazios */
.fi.fi-rs-heart.empty {
    color: #d3d3d3; /* Cinza para os corações vazios */
    font-size: 0.75rem;
    margin: 0 3px;
    text-shadow: 0 0 5px rgba(211, 211, 211, 0.5);
    transition: transform 0.3s, color 0.3s;
}

/* Efeito ao passar o mouse */
.fi.fi-rs-heart:hover {
    transform: scale(1.2); /* Ampliação ao passar o mouse */
    text-shadow: 0 0 10px rgba(255, 0, 0, 1), 0 0 20px rgba(255, 0, 0, 0.8);
}

/* Geral */
.newsletter {
  padding: 0.5rem;
  text-align: center;
}

.newsletter__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  word-wrap: break-word;
  overflow: visible;
}

.newsletter__title {
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: center;
}

.newsletter__description {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  text-align: center;
  padding: 0 1rem; /* Adiciona espaço interno para telas menores */
}

/* Formulário */
.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.newsletter__input {
  padding: 0.8rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  max-width: 300px;
}

.newsletter__btn {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  background-color: hsl(176, 88%, 27%);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.newsletter__btn:hover {
  background-color: #e5533c;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
  .newsletter__title {
    font-size: 1.1rem; /* Título menor */
  }

  .newsletter__description {
    font-size: 1rem;
    line-height: 1.4;
    padding: 0 1rem; /* Espaço interno nas laterais */
  }

  .newsletter__input,
  .newsletter__btn {
    width: 100%; /* Campo e botão ocupam toda a largura */
    max-width: none; /* Remove limite de largura */
  }
}

 .video-text-box span {
        font-weight: bold; /* Torna o texto em negrito */
        color: #e24aa1; /* Cor azul */
        font-size: 14px; /* Tamanho do texto */
        text-shadow: 1px 1px 2px #000; 
    }

    /* Seção principal */
    .newsletter__success-message,
    .newsletter__error-message {
      display: none; /* começam ocultas */
    }

    /* Seção do cupom */
    #couponContainer {
      margin-top: 10px;
      display: none; /* será exibido via JS quando houver cupom */
      text-align: center;
    }
    #couponCode {
      display: inline-block;
      background-color: #f0f0f0;
      border: 2px dashed #4caf50;
      color: #4caf50;
      font-size: 20px;
      font-weight: bold;
      padding: 10px;
      margin: 10px auto;
      border-radius: 5px;
    }

    /* Botão “Copiar Cupom” */
    #copyButton {
      background-color: #4caf50;
      color: #ffffff;
      padding: 10px 20px;
      border-radius: 5px;
      border: none;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      margin-top: 10px;
    }
    #copyButton:hover {
      background-color: #43a047;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

@media (max-width: 768px) {
    .desktop-carousel {
        display: none;
    }
}
@media (min-width: 769px) {
    .mobile-carousel {
        display: none;
    }
}

/* =========================
   BANNER DE PROMOÇÃO COM DUAS FONTES E ANIMAÇÃO
   ========================= */
.fancy-promo {
  /* Fundo com gradiente */
  background: linear-gradient(135deg, #ffa726, #ff5722);

  /* Layout e espaçamento */
  padding: 1rem;       
  margin: 0.5rem 0;    
  border-radius: 12px;
  position: relative;
  overflow: hidden; 

  /* Fonte base */
  font-family: 'Montserrat', sans-serif;

  /* Sombra */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);

  /* ANIMAÇÃO */
  animation: fancyBannerEntrance 3.1s ease-in-out forwards;
}

/* Título da Promoção (usando Lobster/Pacifico) */
.fancy-promo h3 {
  font-family: 'Pacifico';
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: 0 2px 3px rgba(0,0,0,0.25);

  /* COR BRANCA (mudando do preto para branco) */
  color: #fff;
}

/* Parágrafos (usando Montserrat) */
.fancy-promo p {
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.2;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);

  /* COR ROSA (mudando do branco para rosa) */
  color: #ffe7f3; /* Ex.: pink forte; ajuste se quiser outro tom */
}

/* Destaque para textos em negrito */
.fancy-promo p strong {
  text-decoration: underline;
}

/* Período da promoção */
.fancy-promo .promo-periodo strong {
  text-decoration: underline;
  font-weight: 600;
}

/* Bolinhas de efeito no fundo (opcional) */
.fancy-promo::before,
.fancy-promo::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  z-index: 1;
}

/* Uma bolinha no canto superior esquerdo */
.fancy-promo::before {
  top: -20px;
  left: -20px;
}

/* Outra bolinha no canto inferior direito */
.fancy-promo::after {
  bottom: -20px;
  right: -20px;
}

/* =========================
   KEYFRAMES DA ANIMAÇÃO
   ========================= */
@keyframes fancyBannerEntrance {
  0% {
    transform: translateY(40px) scale(0.95);
    opacity: 0;
  }
  60% {
    transform: translateY(-8px) scale(1.02);
    opacity: 1;
  }
  80% {
    transform: translateY(4px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}


/* =========================
   BANNER DE PROMOÇÃO (BRINDE) COM DUAS FONTES E ANIMAÇÃO
   ========================= */

/* Container principal do brinde */
.fancy-brinde {
  background: linear-gradient(135deg, #ffa726, #ff5722);
  padding: 0rem;
  margin: 1rem auto;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  max-width: 320px;

  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;

  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  animation: fancyBannerEntrance 2s ease-in-out forwards;
}

/* Título do Brinde (usando Pacifico) */
.fancy-brinde h3 {
  font-family: 'Pacifico', cursive;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: 0 2px 3px rgba(0,0,0,0.25);
  color: #fff;
  text-align: center;
}

/* Imagem do brinde */
.fancy-brinde img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #fff;
  margin: 0.5rem auto;
}

/* Parágrafos */
.fancy-brinde p {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.2;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  color: #ffe7f3;
  text-align: center;
}

.fancy-brinde p strong {
  text-decoration: underline;
  color: #ffffff;
}

/* Bolinhas de efeito no fundo (opcional) */
.fancy-brinde::before,
.fancy-brinde::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  z-index: 1;
}

.fancy-brinde::before {
  top: -20px;
  left: -20px;
}

.fancy-brinde::after {
  bottom: -20px;
  right: -20px;
}

/* Keyframes da animação */
@keyframes fancyBannerEntrance {
  0% {
    transform: translateY(40px) scale(0.95);
    opacity: 0;
  }
  60% {
    transform: translateY(-8px) scale(1.02);
    opacity: 1;
  }
  80% {
    transform: translateY(4px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 1) Esconde somente o li que veio do PHP (.pattern-only) */
.color__list > li.pattern-only {
  display: none !important;
}

/* 2) Garante que todo o resto fique visível */
.color__list > li {
  display: block !important;
}


/* BOTÃO FLOUTANTE */
.float-cart-btn {
  position: fixed;
  bottom: 350px; right: 10px;
  background: #ffffff; color: #000000;
  border-radius: 50px;
  padding: 0.75rem 1rem;
  display: flex; align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
}
.float-cart-btn.show {
  opacity: 1; visibility: visible;
}
.float-cart-btn img {
  width: 24px; height: 24px; margin-right: 0.5rem;
}

/* ===========================
   MODAL DE CARRINHO
   =========================== */
.cart-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.cart-modal.hidden {
  display: none;
}
.cart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.cart-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  max-height: 80%;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.cart-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Lista de itens do carrinho */
.cart-modal__list {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}
.cart-modal__list li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.cart-modal__list img {
  width: 40px;
  height: 60px;
  object-fit: cover;
  margin-right: 0.75rem;
  border-radius: 4px;
}
.cart-modal__list button {
  background: #008060;
  border: none;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 0.25rem;
}

/* Botão de checkout/comprar */
.cart-modal__checkout {
  width: 100%;
  background: #185abc;
  color: #fff;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

/* ===========================
   BLOCO DE FRETE DENTRO DO MODAL
   =========================== */
/* Wrapper do CEP e botão */
.cart-modal__shipping {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;   /* empilha verticalmente */
  align-items: flex-start;  /* alinha tudo à esquerda */
  gap: 0.75rem;             /* espaço entre cep, botão e resultados */
}

/* Input de CEP e botão lado a lado */
.cart-modal__shipping > input,
.cart-modal__shipping > button {
  width: 100%;
}
.cart-modal__shipping > .shipping-row {
  display: flex;
  width: 100%;
  gap: 0.5rem;
}
.cart-modal__shipping input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.cart-modal__shipping button {
  padding: 0.5rem 1rem;
  background: #008060;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Área de resultados com scroll interno */
#shipping-result {
  width: 100%;
  margin-top: 0.5rem;

}
#shipping-result .shipping-options {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 250px;
  overflow-y: auto;
}

/* Cada opção de frete */
.shipping-option-label {
  
  align-items: center;   /* alinha rádio, ícone e texto */
  gap: 8px;               /* espaço interno entre elementos */
  margin-bottom: 12px;    /* espaço entre linhas */
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  word-wrap: break-word;  /* permite quebra de texto */
}

/* Ajustes no input */
.shipping-option-label input[type="radio"] {
  flex-shrink: 0;
}

/* Label clicável limpa */
.shipping-option-label label {
  cursor: pointer;
  line-height: 1.2;
  margin: 0;
}

/* Destaque na opção selecionada */
.shipping-option-label input[type="radio"]:checked + label {
  color: #006837;
  font-weight: 600;
}

/* Badge de contagem */
.cart-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #e17055;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* no seu styles_details.css (ou onde você centraliza) */

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

.cart-count.pulse {
  animation: pulse 0.4s ease-in-out;
}

 /* Container da animação */
.fly-box {
  position: absolute;
  width: 40px;
  height: 32px;
  pointer-events: none;
  z-index: 2000;
  transform-origin: center top;
  will-change: transform, opacity;
}

/* Corpo da caixa */
.fly-box .body {
  position: absolute;
  width: 40px;
  height: 24px;
  top: 8px;
  left: 0;
  background: linear-gradient(135deg, #f06, #c0392b);
  border-radius: 4px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.2);
  overflow: hidden;
}

/* Fitas cruzadas */
.fly-box .body::before,
.fly-box .body::after {
  content: "";
  position: absolute;
  background: #ec7063;
}
.fly-box .body::before {
  width: 6px;
  height: 100%;
  left: 17px;
  top: 0;
}
.fly-box .body::after {
  height: 6px;
  width: 100%;
  top: 9px;
  left: 0;
}

/* Tampa da caixa */
.fly-box .lid {
  transform-origin: top center;
  animation: lidOpenCreative 0.6s cubic-bezier(0.68,-0.55,0.27,1.55) forwards, lidCloseCreative 0.6s ease-out forwards 1.0s;
}
.fly-box .lid::before,
.fly-box .lid::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 8px;
  top: -6px;
  background: #ec7063;
  border-radius: 8px 8px 0 0;
  transform-origin: bottom center;
}
.fly-box .lid::before {
  left: 8px;
  transform: rotate(40deg) translateY(2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.fly-box .lid::after {
  right: 8px;
  transform: rotate(-40deg) translateY(2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.fly-box .lid span {
  position: absolute;
  top: -8px;
  left: 13px;
  width: 14px;
  height: 8px;
  background: #c0392b;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Opcional: brilhos que passam pela caixa */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: translateX(-20px) rotate(0deg); }
  50% { opacity: 1; transform: translateX(60px) rotate(45deg); }
}
.fly-box .sparkle {
  position: absolute;
  top: 4px;
  left: 0;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  filter: blur(1px);
  animation: sparkle 1s ease-in-out infinite;
}

/* Tampa abre/fecha criativo */
@keyframes lidOpenCreative {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(-140deg); }
  80% { transform: rotateX(-100deg); }
  100% { transform: rotateX(-120deg); }
}
@keyframes lidCloseCreative {
  0% { transform: rotateX(-120deg); }
  60% { transform: rotateX(30deg); }
  100% { transform: rotateX(0deg); }
}

/* Voo aprimorado */
@keyframes boxFlyEnhanced {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) scale3d(1,1,1) rotate(0deg);
  }
  60% {
    opacity: 1;
    transform: translate3d(var(--fly-x), var(--fly-y),0) scale3d(0.25,0.25,0.25) rotate(15deg);
  }
  80% {
    opacity: 1;
    transform: translate3d(var(--fly-x), var(--fly-y),0) scale3d(0.2,0.2,0.2) rotate(-10deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--fly-x), var(--fly-y),0) scale3d(0.15,0.15,0.15) rotate(0deg);
  }
}

/* Pulso no botão flutuante */
@keyframes pulseCart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Brilho no carrinho */
@keyframes cartGlow {
  0% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  100% { box-shadow: 0 0 12px rgba(255,255,255,0.8); }
}
.cart-glow {
  animation: cartGlow 0.5s ease-in-out forwards;
}

/* Estilo do modal de carrinho */
.cart-modal__panel {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* Itens do carrinho */
.cart-modal__list-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.cart-modal__item-info {
  flex: 1;
  margin: 0 1rem;
}
.cart-modal__item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Botões increment/decrement */
.cart-modal__item-actions button {
 
  border: 1px solid #ccc;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: background 0.2s, opacity 0.2s;
  cursor: pointer;
}
.cart-modal__item-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f5f5f5;
  border-color: #ddd;
}

/* Animação de pulso na quantidade */
@keyframes pulseQty {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.qty-display.updated {
  animation: pulseQty 0.3s ease-out;
}

/* Toast de notificação */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3000;
}
.toast.show {
  opacity: 0.9;
}
.toast.hidden {
  display: none;
}

/* Esconde apenas o campo de quantidade (± e input), mantém o Comprar Agora */
.details__quantity .quantity-container {
  display: none !important;
}

.custom-products__container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* ajuste o espaçamento que preferir */
}

.custom-products__container .product__item {
  flex: 1 1 calc(33.333% - 1rem); /* 3 colunas iguais */
  display: flex;
  flex-direction: column;
}

.custom-products__container .product__item .product__banner img {
  width: 100%;
  height: 230px;       /* altura fixa para todas as imagens */
  object-fit: cover;   /* recorta centrado sem distorcer */
}

.custom-products__container .product__item .product__content {
  flex: 1;             /* faz o corpo do card preencher o resto */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* === Size Chart Modal — Deluxe === */
:root{
  --sc-brand:#0aa07a;
  --sc-ink:#1c2430;
  --sc-muted:#6b7280;
  --sc-line:#e6e9ec;
  --sc-surface:#ffffff;
}

/* ===== Size Chart Modal (isolado) ===== */
.sc-modal{
  /* vars locais (podem ser ajustadas por tema) */
  --sc-brand:#0aa777;
  --sc-ink:#0b1320;
  --sc-line:#e6e9ec;

  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999;
  /* fundo com blur + vinheta suave */
  background: radial-gradient(1200px 600px at 50% 0%, rgba(0,0,0,.22), transparent 60%);
  backdrop-filter: blur(6px);
}
.sc-modal.open{ display:flex; animation:sc-fade .22s ease-out; }

@keyframes sc-fade{ from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)} }

.sc-backdrop{ position:absolute; inset:0; /* captura clique fora do painel */ }

/* Painel */
.sc-panel{
  position:relative;
  background:linear-gradient(180deg,#fff, #fbfcfd);
  width:min(1080px,96vw); max-height:90vh; overflow:hidden;
  border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.25);
  border:1px solid rgba(12,18,28,.06);
  transform:translateY(6px); animation:sc-pop .25s ease-out forwards;
  /* melhora legibilidade de textos finos em alta densidade */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
@keyframes sc-pop{ to{ transform:translateY(0)} }

/* Cabeçalho */
.sc-title{
  margin:0; font:700 1.05rem/1.2 system-ui,Segoe UI,Roboto,Arial;
  color:var(--sc-ink);
  padding:14px 52px 12px 16px;
  border-bottom:1px solid var(--sc-line);
  background:linear-gradient(180deg,#ffffff, #f6f9fb);
  position:sticky; top:0; z-index:2;
}

/* Botão fechar */
.sc-close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--sc-line);
  background:#fff; color:#334155; cursor:pointer; font-size:22px; line-height:1;
  display:grid; place-items:center; transition:transform .12s ease, background .12s, box-shadow .12s, border-color .12s;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.sc-close:hover{ transform:translateY(-1px); background:#f7fafc; border-color:#d8e1ea; box-shadow:0 10px 24px rgba(0,0,0,.10) }
.sc-close:active{ transform:translateY(0) scale(.98) }

/* Conteúdo */
.sc-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:16px; padding:12px;
  overflow:auto; max-height:calc(90vh - 54px);
}
@media (max-width:900px){
  .sc-grid{ grid-template-columns:1fr; gap:12px; }
}

/* Imagem + anotações */
.sc-figure .annot-wrap{ position:relative; display:block; border-radius:14px; overflow:hidden; }
.sc-figure img{
  display:block; width:100%; height:auto;
  border:1px solid var(--sc-line); background:#f9fbfc;
}
.annot-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.annot-svg line{
  stroke:var(--sc-brand); stroke-width:3;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.15));
  stroke-linecap:round;
}
.annot-svg text{
  font:700 12px/1 system-ui,Segoe UI,Roboto,Arial;
  fill:var(--sc-brand);
  paint-order:stroke; stroke:#fff; stroke-width:3px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.12));
  user-select:none;
}

/* Tabela */
.sc-table-wrap{
  border:1px solid var(--sc-line); border-radius:14px; overflow:auto; background:#fff;
  box-shadow: inset 0 1px 0 #fff;
}
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table thead th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg,#f7fafc,#eef3f7);
  color:#0f172a; font-weight:700; text-align:center;
  padding:.65rem .5rem; border-bottom:1px solid var(--sc-line);
}
.table td{
  text-align:center; padding:.6rem .5rem; color:#0f172a;
  border-bottom:1px solid #f0f3f6;
}
.table tbody tr:nth-child(odd){ background:#fbfdff; }
.table tbody tr:hover{ background:#f3f7fb; }

/* Scrollbar (webkit-only) */
.sc-panel ::-webkit-scrollbar{ height:10px; width:10px }
.sc-panel ::-webkit-scrollbar-thumb{ background:#cfd6dd; border-radius:999px; border:2px solid #f3f6f9 }
.sc-panel ::-webkit-scrollbar-thumb:hover{ background:#b9c3cc }

/* Acessibilidade: respeita redução de movimento */
@media (prefers-reduced-motion: reduce){
  .sc-modal.open{ animation:none }
  .sc-panel{ animation:none; transform:none }
}

/* (opcional) dark mode, se o site usar data-theme="dark" no <html> */
html[data-theme="dark"] .sc-panel{
  background:linear-gradient(180deg,#0b1020, #0e1424);
  border-color:rgba(255,255,255,.06);
}
html[data-theme="dark"] .sc-title{ background:linear-gradient(180deg,#0e1424, #0b1020); color:#e6edf5; border-color:rgba(255,255,255,.08) }
html[data-theme="dark"] .table thead th{ background:linear-gradient(180deg,#121a2e,#0f1629); color:#e6edf5; border-color:rgba(255,255,255,.08) }
html[data-theme="dark"] .table td{ color:#d7deea; border-bottom-color:#0f1a2f }
html[data-theme="dark"] .table tbody tr:nth-child(odd){ background:#0b1324 }
html[data-theme="dark"] .table tbody tr:hover{ background:#0f1c33 }



/* Força tema claro em todos os navegadores (inclui webview mobile) */
:root { color-scheme: light; }

/* Botão "Sair" — versão suave/clean (tema claro fixo) */
.logout-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:9999px;
  font-weight:600; font-size:.9rem; line-height:1;
  border:1px solid #d1d5db;          /* cinza claro */
  color:#374151;                      /* cinza suave */
  background:#ffffff;
  text-decoration:none;
  letter-spacing:.01em;
  transition:background-color .2s ease, border-color .2s ease,
             color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.logout-btn svg{ display:block; opacity:.75; transition:opacity .2s ease; }
.logout-btn:hover{
  background:#f5f7fb;                 /* leve realce no hover */
  border-color:#cbd5e1;
  color:#111827;
  box-shadow:0 4px 10px rgba(2,6,23,.08);
  transform:translateY(-1px);
}
.logout-btn:hover svg{ opacity:1; }
.logout-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(2,6,23,.08);
}
.logout-btn:focus-visible{
  outline:2px solid #94a3b8;          /* foco discreto */
  outline-offset:2px;
}

/* Chip do login — leve, sempre claro */
.login-chip{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}

/* Neutraliza dark mode se o navegador tentar forçar */
@media (prefers-color-scheme: dark){
  .logout-btn, .login-chip{
    background:#ffffff !important;
    color:#374151 !important;
    border-color:#e5e7eb !important;
    box-shadow:0 2px 8px rgba(0,0,0,.04) !important;
  }
}

/* Acessibilidade: menos animação se preferir reduzir */
@media (prefers-reduced-motion: reduce){
  .logout-btn{ transition:none; }
}



/* Evita scroll do modal */
#myModal.modal {
  overflow: hidden;
}

/* A imagem do modal: sem transition de transform */
#myModal .modal-content {
                     /* começa invisível (fade-in) */
  transition: opacity .18s ease;      /* só opacidade */
  /* NÃO force transform aqui */
  will-change: transform;
  touch-action: none;                 /* gestos vão para o JS */
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
}

#myModal.open .modal-content { opacity: 1; }

/* Deixe o container sem touch-action (Swiper precisa) */
#myModal .swiper-container {
  overscroll-behavior: contain;
  /* touch-action: none;  <- remova */
}

/* Blur pesado no mobile */
@media (max-width: 768px){
  #myModal.modal { backdrop-filter: none; }
}