/**
 * Estilos para o Carrossel de Loterias
 * Segue o padrão visual estabelecido para cada loteria
 */

/* Container principal do carrossel */
#carousel-container {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    /* ⚡ NOVO: Eliminar espaço vazio entre container e wrapper */
    height: auto !important; /* ⚡ AJUSTA automaticamente à altura do conteúdo */
    min-height: 0 !important; /* ⚡ SEM altura mínima */
    display: flex !important; /* ⚡ FLEX para ajustar altura */
    flex-direction: column !important; /* ⚡ COLUNA para empilhar */
    /* ⚡ NOVO: Prevenir overflow horizontal */
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.carousel-wrapper {
    width: 100%;
    max-width: 100vw; /* ⚡ NOVO: Limitar largura máxima */
    margin: 0; /* SEM CENTRALIZAÇÃO */
    padding: 0; /* PADDING ZERO - sem espaços vazios */
    background: transparent; /* 100% TRANSPARENTE */
    border-radius: 0; /* SEM BORDAS ARREDONDADAS - ajuste perfeito */
    box-shadow: none; /* SEM SOMBRA */
    backdrop-filter: none; /* SEM DESFOQUE */
    border: none; /* SEM BORDA */
    /* POSICIONAMENTO COMO HEADER DA PÁGINA */
    position: relative;
    z-index: 999; /* Abaixo do menu (que tem z-index: 1000) */
    /* ⚡ NOVO: Prevenir overflow horizontal */
    overflow-x: hidden !important;
}

/* Container dos slides */
.carousel-slides {
    display: flex;
    gap: 5px; /* ⚡ REDUZIDO AINDA MAIS: 10px → 5px para menos espaço vazio */
    overflow-x: hidden; /* ⚡ MUDADO: hidden para permitir animação */
    scroll-behavior: smooth;
    padding: 0; /* ⚡ ZERO PADDING - sem espaços vazios */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    /* ⚡ NOVO: Permitir animação infinita */
    width: max-content; /* Permite que o conteúdo se estenda para animação */
    will-change: transform; /* Otimiza a animação */
}

.carousel-slides::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

/* Slide individual */
.carousel-slide {
    width: 127px; /* AUMENTADO +10%: 115px → 127px */
    height: 105px; /* AUMENTADO +10%: 95px → 105px */
    border-radius: 15px; /* Ajustado proporcionalmente */
    padding: 8px 12px 4px 12px; /* ⚡ REDUZIDO AO MÁXIMO: 15px → 8px, 22px → 12px, base 8px → 4px */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0; /* Impede que as caixas encolham */
    /* ⚡ NOVO: Garantir que a caixa seja sempre visível */
    opacity: 1;
    will-change: transform;
}

.carousel-slide:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.carousel-slide.active {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Conteúdo do slide */
.slide-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly; /* DISTRIBUI espaço uniformemente */
    gap: 2px; /* PEQUENO espaçamento entre elementos */
    padding: 2px 0; /* PEQUENO padding para folga */
}

/* Label superior (data/status) - TERCEIRA LINHA */
.slide-label {
    background: rgba(255, 255, 255, 0.9);
    color: #1A1D25;
    padding: 3px 6px; /* Padding com folga */
    border-radius: 8px; /* Ajustado */
    font-size: 10px; /* REDUZIDO 1px: 11px → 10px */
    font-weight: normal; /* REMOVIDO bold - texto normal */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px; /* Ajustado para o novo tamanho */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    align-self: center; /* CENTRALIZADO */
    margin: 0 auto; /* CENTRALIZADO */
    order: 3; /* TERCEIRA LINHA */
    line-height: 1.2;
}

/* Valor principal - SEGUNDA LINHA */
.slide-value {
    text-align: center;
    margin: 2px 0; /* Espaço vertical para folga */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row; /* VALOR E UNIDADE EM UMA LINHA */
    gap: 2px; /* Pequeno espaço entre valor e unidade */
    order: 2; /* SEGUNDA LINHA */
}

.main-value {
    display: inline; /* MUDADO para inline para ficar na mesma linha */
    font-size: 10px; /* REDUZIDO 1px: 11px → 10px */
    font-weight: bold; /* ADICIONADO: valor em negrito para destaque */
    line-height: 1.2;
    text-shadow: 0.6px 0.6px 1.2px rgba(0, 0, 0, 0.3);
}

.unit {
    display: inline; /* MUDADO para inline para ficar na mesma linha */
    font-size: 5px; /* REDUZIDO 0.5px: 5.5px → 5px */
    font-weight: bold; /* ADICIONADO: unidade também em negrito para destaque */
    opacity: 0.9;
    margin-top: 0; /* REMOVIDO margin-top para ficar na mesma linha */
}

/* Nome da loteria - PRIMEIRA LINHA */
.slide-name {
    text-align: center;
    font-size: 10px; /* REDUZIDO 1px: 11px → 10px */
    font-weight: normal; /* REMOVIDO bold - texto normal */
    text-transform: uppercase; /* JÁ ESTÁ EM CAPSLOCK */
    letter-spacing: 0.3px; /* Ajustado para o novo tamanho */
    line-height: 1.2;
    padding: 3px 6px; /* Padding com folga */
    background: rgba(255, 255, 255, 0.15); /* Fundo um pouco mais visível */
    border-radius: 6px; /* Ajustado proporcionalmente */
    backdrop-filter: blur(3px); /* Ajustado proporcionalmente */
    margin: 0 auto; /* CENTRALIZADO */
    align-self: flex-start; /* MUDADO: alinha no topo */
    order: 1; /* PRIMEIRA LINHA */
}

/* Navegação automática - sem controles manuais */
.carousel-navigation {
    display: none; /* Esconde toda a navegação manual */
}

/* Botões de navegação - escondidos */
.nav-btn {
    display: none;
}

/* Indicadores - escondidos */
.carousel-indicators {
    display: none;
}

/* Mensagem de erro */
.carousel-error {
    text-align: center;
    padding: 40px;
    color: #EF4444;
}

.carousel-error button {
    background: #00E38C;
    color: #1A1D25;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.carousel-error button:hover {
    background: #00D1A0;
    transform: translateY(-2px);
}

/* Responsividade */
@media (max-width: 768px) {
  /* ⚡ NOVO: Regra GLOBAL para eliminar altura excessiva */
  #carousel-container,
  .carousel-wrapper,
  .carousel-slides {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  /* ⚡ NOVO: Eliminar espaçamento entre carrossel e breadcrumb */
  #carousel-container {
    margin-bottom: -25px !important; /* ⚡ NEGATIVO MAIOR: puxa MUITO o breadcrumb para cima */
    padding-bottom: 0 !important;
    height: auto !important; /* ⚡ FORÇA altura automática */
    min-height: 0 !important; /* ⚡ SEM altura mínima */
  }
  
  /* ⚡ NOVO: Garantir que a animação funcione no mobile */
  .carousel-slides {
    animation: scrollLeft 8s linear infinite !important; /* ⚡ VELOCIDADE AUMENTADA: 12s → 8s */
    width: max-content !important; /* ⚡ FORÇA largura para animação */
    overflow-x: hidden !important; /* ⚡ ESCONDE overflow */
    gap: 3px !important; /* ⚡ GAP MÍNIMO para menos espaço vazio */
    padding: 0 !important; /* ⚡ ZERO PADDING */
  }
  
  /* ⚡ NOVO: Garantir que o container do carrossel não ultrapasse os limites */
  #carousel-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }
  
  .carousel-wrapper {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
    padding: 0 !important; /* ⚡ ZERO PADDING */
    margin: 0 !important; /* ⚡ ZERO MARGIN */
  }

  /* ⚡ NOVO: Eliminar espaçamento do breadcrumb */
  .breadcrumbs-container {
    margin-top: -25px !important; /* ⚡ NEGATIVO MAIOR: puxa MUITO o breadcrumb para cima */
    padding-top: 0 !important;
  }
    
    .carousel-slide {
        min-width: 84px !important; /* ⚡ REDUZIDO 30%: 120px → 84px */
        max-width: 98px !important; /* ⚡ REDUZIDO 30%: 140px → 98px */
        height: 77px !important; /* ⚡ REDUZIDO 30%: 110px → 77px */
        padding: 3px 3px 2px 3px !important; /* ⚡ REDUZIDO padding para comprimir */
        flex-shrink: 1;
    }
    
    .slide-content {
        gap: 2px !important; /* ⚡ PEQUENO gap entre elementos para folga */
        padding: 2px 0 !important; /* ⚡ PEQUENO padding para não grudar nas bordas */
        height: 100% !important; /* ⚡ ALTURA TOTAL */
        justify-content: space-evenly !important; /* ⚡ DISTRIBUI espaço uniformemente */
        align-items: center !important; /* ⚡ CENTRALIZA horizontalmente */
    }
    
    .main-value {
        font-size: 14px !important; /* ⚡ REDUZIDO AINDA MAIS: 25px → 14px */
        line-height: 1.1 !important; /* ⚡ Pouco espaço extra */
        text-align: center !important; /* ⚡ CENTRALIZADO */
    }
    
    .unit {
        font-size: 8px !important; /* ⚡ REDUZIDO: 10px → 8px */
        text-align: center !important; /* ⚡ CENTRALIZADO */
    }
    
    .slide-value {
        margin: 2px 0 !important; /* ⚡ MARGEM para folga */
        gap: 2px !important; /* ⚡ Gap entre valor e unidade */
        text-align: center !important; /* ⚡ CENTRALIZADO */
        justify-content: center !important; /* ⚡ CENTRALIZA conteúdo */
        align-items: center !important; /* ⚡ CENTRALIZA verticalmente */
        width: 100% !important; /* ⚡ LARGURA TOTAL para centralizar */
    }
    
    .slide-name {
        font-size: 8px !important; /* ⚡ REDUZIDO 30%: 12px → 8px */
        padding: 3px 4px !important; /* ⚡ PADDING vertical com folga */
        margin: 0 auto !important; /* ⚡ CENTRALIZADO */
        line-height: 1.2 !important;
        text-align: center !important; /* ⚡ CENTRALIZADO */
        align-self: center !important; /* ⚡ CENTRALIZA no flex */
    }
    
    .slide-label {
        font-size: 7px !important; /* ⚡ REDUZIDO 30%: 10px → 7px */
        padding: 3px 4px !important; /* ⚡ PADDING vertical com folga */
        margin: 0 auto !important; /* ⚡ CENTRALIZADO */
        line-height: 1.2 !important;
        text-align: center !important; /* ⚡ CENTRALIZADO */
        align-self: center !important; /* ⚡ CENTRALIZA no flex */
    }
    
    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .indicator {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
  /* ⚡ NOVO: Regra GLOBAL para eliminar altura excessiva */
  #carousel-container,
  .carousel-wrapper,
  .carousel-slides {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* ⚡ NOVO: Eliminar espaçamento entre carrossel e breadcrumb */
  #carousel-container {
    margin-bottom: -35px !important; /* ⚡ NEGATIVO MÁXIMO: puxa AO MÁXIMO o breadcrumb para cima */
    padding-bottom: 0 !important;
    height: auto !important; /* ⚡ FORÇA altura automática */
    min-height: 0 !important; /* ⚡ SEM altura mínima */
  }
  
  /* ⚡ NOVO: Garantir que a animação funcione no mobile pequeno */
  .carousel-slides {
    animation: scrollLeft 6s linear infinite !important; /* ⚡ VELOCIDADE AUMENTADA: 10s → 6s */
    width: max-content !important; /* ⚡ FORÇA largura para animação */
    overflow-x: hidden !important; /* ⚡ ESCONDE overflow */
    gap: 2px !important; /* ⚡ GAP MÍNIMO para menos espaço vazio */
    padding: 0 !important; /* ⚡ ZERO PADDING */
  }
  
  /* ⚡ NOVO: Garantir que o container do carrossel não ultrapasse os limites no mobile pequeno */
  #carousel-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }
  
  .carousel-wrapper {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
    padding: 0 !important; /* ⚡ ZERO PADDING */
    margin: 0 !important; /* ⚡ ZERO MARGIN */
  }

  /* ⚡ NOVO: Eliminar espaçamento do breadcrumb */
  .breadcrumbs-container {
    margin-top: -35px !important; /* ⚡ NEGATIVO MÁXIMO: puxa AO MÁXIMO o breadcrumb para cima */
    padding-top: 0 !important;
  }

    .carousel-slide {
        min-width: 70px !important; /* ⚡ REDUZIDO 30%: 100px → 70px */
        max-width: 84px !important; /* ⚡ REDUZIDO 30%: 120px → 84px */
        height: 70px !important; /* ⚡ REDUZIDO 30%: 100px → 70px */
        padding: 2px 2px 1px 2px !important; /* ⚡ REDUZIDO para comprimir */
        flex-shrink: 1;
    }
    
    .slide-content {
        gap: 2px !important; /* ⚡ PEQUENO gap entre elementos para folga */
        padding: 2px 0 !important; /* ⚡ PEQUENO padding para não grudar nas bordas */
        height: 100% !important; /* ⚡ ALTURA TOTAL */
        justify-content: space-evenly !important; /* ⚡ DISTRIBUI espaço uniformemente */
    }
    
    .main-value {
        font-size: 12px !important; /* ⚡ REDUZIDO AINDA MAIS: 22px → 12px */
        line-height: 1.1 !important; /* ⚡ Pouco espaço extra */
    }
    
    .unit {
        font-size: 7px !important; /* ⚡ REDUZIDO: 8px → 7px */
    }
    
    .slide-value {
        margin: 2px 0 !important; /* ⚡ MARGEM para folga */
        gap: 2px !important; /* ⚡ Gap entre valor e unidade */
    }
    
    .slide-name {
        font-size: 7px !important; /* ⚡ REDUZIDO 30% */
        padding: 2px 3px !important; /* ⚡ PADDING vertical com folga */
        margin: 0px !important;
        line-height: 1.2 !important;
    }
    
    .slide-label {
        font-size: 6px !important; /* ⚡ REDUZIDO: 7px → 6px */
        padding: 2px 3px !important; /* ⚡ PADDING vertical com folga */
        margin: 0px !important;
        line-height: 1.2 !important;
    }
}

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

/* Movimento dinâmico como filme */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-20%); /* ⚡ AJUSTADO: Move 20% para loop perfeito com 5x duplicação */
    }
}

/* ⚡ NOVO: Animação alternativa para garantir continuidade perfeita */
@keyframes scrollLeftPerfect {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.33%);
    }
}

.carousel-slide {
    animation: slideIn 0.5s ease-out;
}

/* Container dos slides com movimento contínuo */
.carousel-slides {
    animation: scrollLeft 25s linear infinite; /* Desktop mais lento: 25s */
    width: max-content; /* Permite que o conteúdo se estenda */
    /* ⚡ NOVO: Garantir que a animação funcione */
    will-change: transform;
}

/* TRANSPARÊNCIA TOTAL - caixas principais sem cores */
.carousel-slide[style*="#930089"],
.carousel-slide[style*="#9ACD32"],
.carousel-slide[style*="#008B8B"],
.carousel-slide[style*="#3B82F6"],
.carousel-slide[style*="#FF8C00"] {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
}