/* Configura a caixa principal que segura todo o carrossel */
#carouselExampleIndicators {
    width: 100%;                 /* Ocupa toda a largura disponível da tela */
    max-height: 480px;           /* Limita a altura do carrossel para não esticar em telas grandes */
    overflow: hidden;            /* Corta e esconde qualquer pedaço de imagem que passar de 480px */
    background-color: #ebeef0;   /* Define a cor de fundo do contêiner como branca */
    position: relative;          /* Serve de referência para o posicionamento absoluto das bolinhas */
}

/* Aplica o truque para colocar as bolinhas na vertical e no lado direito */
ol#myCarousel-indicators {
    display: flex;               /* Ativa o Flexbox para organizar as bolinhas em linha */
    position: absolute;          /* Desprende a lista do fluxo comum e permite posicionar livremente */
    top: 0;                      /* Alinha ao topo da caixa do carrossel */
    bottom: 0;                   /* Alinha à base da caixa do carrossel */
    margin: auto;                /* Junto com top e bottom zerados, centraliza o bloco verticalmente */
    height: 0px;                 /* Colapsa a altura do bloco para o ponto central de rotação */
    right: 20px;                 /* Afasta as bolinhas a 20px de distância da borda direita */
    left: auto;                  /* Anula o alinhamento padrão à esquerda */
    width: auto;                 /* Permite que o bloco se ajuste ao tamanho das bolinhas */
    
    /* Gira o bloco de bolinhas em 90 graus (o que era linha vira uma coluna vertical) */
    -webkit-transform: rotate(90deg); /* Suporte para navegadores baseados em Webkit (Safari antigo) */
    -moz-transform: rotate(90deg);    /* Suporte para navegador Firefox antigo */
    -ms-transform: rotate(90deg);     /* Suporte para navegador Internet Explorer antigo */
    -o-transform: rotate(90deg);      /* Suporte para navegador Opera antigo */
    transform: rotate(90deg);         /* Padrão oficial moderno para girar o elemento */
}

/* Estilo padrão que o Bootstrap traz para a classe dos indicadores */
.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: 15;                  /* Garante que os botões fiquem acima das fotos do slide */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;      /* Tenta alinhar ao centro (será anulado pela regra do ID acima) */
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;             /* Remove os pontos pretos de lista comuns do HTML */
}

/* Customiza o formato de cada bolinha individual */
#myCarousel-indicators li {
    width: 15px;                  /* Largura do indicador */
    height: 15px;                 /* Altura idêntica à largura para criar um quadrado exato */
    border-radius: 50%;           /* Arredonda os cantos em 50%, transformando o quadrado em círculo */
    background-color: rgba(255, 255, 255, 0.5); /* Cor branca com 50% de transparência para os desativados */
    border: none;                 /* Limpa a borda padrão com clique invisível que o Bootstrap cria */
    transition: all 0.3s ease;    /* Suaviza a transição de cor quando o slide muda */
    margin-right: 6px;            /* Afasta uma bolinha da outra pelo lado direito */
    margin-left: 6px;             /* Afasta uma bolinha da outra pelo lado esquerdo */
}

/* Controla a aparência das fotos dentro do slide */
#carouselExampleIndicators .carousel-item img {
    height: 480px;                /* Força todas as imagens a terem exatamente a mesma altura */
    object-fit: fill;            /* Preenche o espaço cortando sobras, sem achatar ou distorcer a foto */
    object-position: center;  /* Mantém o foco do corte sempre centralizado na imagem */
}

/* Modifica a cor do indicador que representa a foto atual */
#myCarousel-indicators .active {
    background-color: rgb(0, 0, 0) !important; /* Torna a bolinha do slide ativo em preto sólido */
}