/* Container principal com layout flexível */
.configurador-manual {
    display: flex;
    flex-wrap: wrap;
    /* Permite quebrar em telas menores */
    gap: 20px;
    margin-top: 25px;
}

/* Coluna da imagem e das opções */
.imagem-container {
    flex: 1 1 55%;
    /* Ocupa 55% do espaço */
    min-width: 300px;
}

.opcoes-container {
    flex: 1 1 40%;
    /* Ocupa 40% do espaço */
    min-width: 280px;
}

/* O segredo do empilhamento */
.pilha-de-imagens {
    position: relative;
    /* O PAI tem que ser relativo */
    width: 100%;
    max-width: 600px;
    /* Ajuste o tamanho máximo */
    margin: 0 auto;
}

.pilha-de-imagens img {
    width: 100%;
    height: auto;
}

/* TODAS as camadas ficam ABSOLUTAS, presas no topo e na esquerda do pai */
.camada-base,
.camada-sobreposta {
    position: absolute;
    top: 0;
    left: 0;
}

/* A base precisa ficar visível, mas as outras camadas ficam por cima */
.camada-base {
    position: static;
    /* A base fica no fluxo normal para definir o tamanho do container */
}


/* Estilo das opções e amostras */
.grupo-de-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.amostra {
    border: 2px solid #ccc;
    padding: 5px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.amostra:hover {
    border-color: #0073aa;
    transform: scale(1.05);
}

.amostra.selecionado {
    border-color: #005a87;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.amostra img {
    width: 60px;
    /* Tamanho da imagem da amostra */
    height: 60px;
    display: block;
}

.amostra span {
    font-size: 12px;
    display: block;
    margin-top: 4px;
}

/* AJUSTE FINO: Diminui o título do grupo */
.configurador-manual .opcoes-container h2 {
    font-size: 1.2em;
    /* O padrão é 2em. Ajuste este valor como preferir (ex: 18px, 1.1em, etc) */
    margin-top: 10px;
    /* Adiciona um respiro em cima */
    margin-bottom: 15px;
    /* Aumenta o espaço para as opções abaixo */
}

/* AJUSTE FINO: Estilos do Loader */

/* A camada escura semi-transparente que cobre a imagem */
.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    /* Fundo branco com 70% de opacidade */
    z-index: 10;

    /* Centraliza o spinner no meio */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Começa escondido */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Classe que ativa o loader */
.loader-overlay.ativo {
    opacity: 1;
    visibility: visible;
}

/* O spinner giratório */
.loader-spinner {
    border: 5px solid #f3f3f3;
    /* Cinza claro */
    border-top: 5px solid #b19777;
    /* Bege */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

/* Animação de rotação */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* AJUSTE FINO: Estilo para o botão de remover seleção */
.amostra-remover {
    /* Removemos os estilos que centralizavam o texto para dar espaço ao "quadradinho" */
    background-color: transparent;
    /* Fundo agora é transparente como os outros */
    padding: 5px;
    /* Padding padrão das outras amostras */
    height: auto;
    /* Altura automática como as outras */
    min-width: 70px;
    box-sizing: border-box;
}

/* Oculta a tag de imagem (que não existe, mas garante a consistência) */
.amostra-remover img {
    display: none;
}

/* Estiliza o texto "Nenhum" */
.amostra-remover span {
    margin-top: 4px;
    /* Retorna a margem padrão */
    font-weight: normal;
    /* Retorna o peso da fonte padrão */
    color: #555;
}

/* AQUI ESTÁ A MÁGICA: O QUADRADINHO DESENHADO COM CSS */
.amostra-remover::before {
    content: '';
    /* Essencial para que o pseudo-elemento apareça */
    display: block;
    /* Faz com que ele se comporte como uma imagem */
    width: 60px;
    /* Largura igual à das outras imagens de amostra */
    height: 60px;
    /* Altura igual à das outras imagens de amostra */
    margin: 0 auto;
    /* Centraliza o quadradinho */
    border: 1px solid #ddd;
    /* Borda sutil */
    background-color: #fff;
    /* Fundo branco */

    /* A linha diagonal vermelha, criada com um gradiente */
    background-image: linear-gradient(to top right,
            transparent calc(50% - 0.5px),
            #e14d43 50%,
            transparent calc(50% + 0.5px));
}

/* Mantém o efeito hover, mas agora no fundo do botão todo */
.amostra-remover:hover {
    background-color: transparent;
}