/* Estilos básicos para o modal de seleção de paletas */


.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto; /* Para rolagem se houver muitas paletas */
    text-align: center;
}

.palette-preview {
    width: 100%;
    height: 30px;
    display: flex;
    border-radius: 4px;
    overflow: hidden;
}

.palette-preview span {
    flex: 1;
    height: 100%;
}

.palette-name {
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
}

.palette-status {
    font-size: 0.8em;
    padding: 3px 6px;
    border-radius: 3px;
    margin-top: 5px;
}

.palette-status.free {
    background-color: #d4edda;
    color: #155724;
}

.palette-status.locked {
    background-color: #f8d7da;
    color: #721c24;
}

.palette-status.purchased {
    background-color: #cce5ff;
    color: #004085;
}

.modal-close-btn {
    margin-top: 20px;
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}
 .hidden {
    display: none !important; /* Use !important para garantir que não seja sobrescrita */
    visibility: hidden !important; /* Adicione também para robustez */
}   




/* --- Modal Overlay --- */
.modal-overlay {
    position: fixed; /* Fixado na viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro semi-transparente */
    display: flex; /* Usar flexbox para centralizar o conteúdo do modal */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Garante que o modal fique acima de outros elementos */
    opacity: 0; /* Começa invisível */
    visibility: hidden; /* Começa escondido, para não ser clicável */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transição suave */
}

.modal-overlay.active {
    opacity: 1; /* Torna visível quando a classe 'active' é adicionada */
    visibility: visible;
}

/* --- Conteúdo do Modal --- */
.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%; /* Ocupa 90% da largura da tela */
    max-width: 900px; /* Mas não mais que 900px em telas grandes */
    height: 90%; /* Ocupa 90% da altura da tela */
    max-height: 800px; /* Mas não mais que 800px */
    display: flex;
    flex-direction: column; /* Organiza o conteúdo em coluna (título, galeria) */
    position: relative;
    overflow: hidden; /* Garante que nada transborde da caixa principal do modal */
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

/* --- Botão de Fechar o Modal --- */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2em;
    cursor: pointer;
    color: #888;
}
.close-button:hover {
    color: #333;
}



/* --- Galeria de Imagens DENTRO do Modal --- */
.image-gallery-modal {
    flex-grow: 1; /* Faz a galeria ocupar todo o espaço vertical disponível no modal */
    overflow-y: auto; /* Habilita scroll vertical APENAS dentro da galeria do modal */
    padding-right: 10px; /* Para dar espaço para a barra de rolagem, se aparecer */
    padding-bottom: 10px; /* Espaço na parte inferior para o scroll */

    display: grid;
    /* Padrão para o modal: 3 colunas em telas menores, min-width de 100px por item */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
    gap: 15px; /* Espaçamento ligeiramente maior entre os itens */
    background-color: transparent; /* A cor de fundo já está no modal-content */
    padding: 0; /* Remove padding que talvez viesse de outra regra de .image-gallery */
}

/* Media Queries para a galeria do modal (mais colunas em telas maiores) */
@media (min-width: 600px) {
    .image-gallery-modal {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* A partir de 600px, tenta 4 colunas */
    }
}
@media (min-width: 900px) {
    .image-gallery-modal {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* A partir de 900px, tenta 5 colunas */
    }
}

/* --- Ajuste no CSS da .image-gallery original (se ainda estiver em uso) --- */
/* Remova as propriedades de max-height e overflow-y da sua classe .image-gallery original, */
/* pois o scroll agora será gerenciado pelo modal. */
.image-gallery {
    /* Mantenha o grid-template-columns e gap que você já tem para a galeria original */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* max-height: 120px; <-- REMOVA ESTA LINHA */
    /* overflow-y: auto; <-- REMOVA ESTA LINHA */
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}
/* Mantenha as media queries para a .image-gallery original, se ela ainda for usada em algum lugar. */
@media (min-width: 600px) {
    .image-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 900px) {
    .image-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Conteúdo do Modal da Paleta de Cores (Especialização) --- */
.color-palette-modal-content {
    max-width: 600px; /* Um pouco menor, já que são apenas cores */
    max-height: 70%; /* Ocupa menos altura também */
    padding: 15px; /* Ajuste o padding se quiser */
}

.color-palette-modal-content h2 {
    margin-bottom: 15px;
    font-size: 1.5em;
}

/* --- Estilos para os blocos de cor (reaproveitar do seu existente) --- */
/* Certifique-se de que sua classe '.color-box' existente esteja estilizada corretamente, exemplo: */
.color-box {
    width: 100%; /* Ocupa a largura total da célula do grid */
    aspect-ratio: 1; /* Mantém o bloco quadrado */
    border: 2px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box; /* Inclui borda e padding no tamanho total */
}

.color-box:hover {
    transform: scale(1.1);
    border-color: #555;
}

/* Cor selecionada (se você tiver uma classe 'selected' ou 'active') */
.color-box.selected {
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px #4CAF50;
}



/* --- Estilos para a Loja Geral (storeModal) --- */
/* O .modal-overlay, .modal-content, .modal-close-btn já devem existir */

.store-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.store-tab-btn {
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent; /* Para o indicador de aba ativa */
    margin: 0 5px;
}

.store-tab-btn:hover {
    color: #007bff;
    border-color: #e0e0e0;
}

.store-tab-btn.active {
    color: #007bff;
    border-color: #007bff; /* Linha azul para indicar a aba ativa */
}

.store-section {
    padding: 15px 0;
}

.store-section.hidden {
    display: none; /* Esconde a seção completamente quando não está ativa */
}

.store-section h3 {
    text-align: center;
    margin-bottom: 15px;
    color: #333;
}

/* O .modal-overlay, .modal-content, .modal-close-btn já devem existir */

.store-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.store-tab-btn {
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent; /* Para o indicador de aba ativa */
    margin: 0 5px;
}

.store-tab-btn:hover {
    color: #007bff;
    border-color: #e0e0e0;
}

.store-tab-btn.active {
    color: #007bff;
    border-color: #007bff; /* Linha azul para indicar a aba ativa */
}

.store-section {
    padding: 15px 0;
}

.store-section.hidden {
    display: none; /* Esconde a seção completamente quando não está ativa */
}

.store-section h3 {
    text-align: center;
    margin-bottom: 15px;
    color: #333;
}



/* Estilo para paleta atualmente selecionada/ativa */
.palette-item.active {
    border: 2px solid #007bff; /* Ou qualquer cor de destaque */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
}

/* Estilo para paletas que o usuário já possui */
.palette-item.owned {
    background-color: #f0f8ff; /* Um fundo levemente diferente */
    /* Talvez um ícone de "check" ou "adquirido" */
}

/* Estilo para paletas premium ainda não adquiridas */
.palette-item.premium-unowned {
    /* Talvez um ícone de "carrinho" ou "moeda" */
}

/* Opcional: Se quiser desabilitar visualmente cliques em paletas já compradas */
.palette-item.owned:not(.active) { /* Se é owned, mas não a paleta ativa */
    opacity: 0.7;
    cursor: default; /* Mostra que não é clicável para compra */
}
/* E se você quiser impedir eventos de clique se for owned e não precisar de re-seleção */
/* O handlePaletteSelection já cuida de não "recomprar" */

/* --- NOVO LAYOUT DE PALETAS UNIFICADAS --- */

/* 1. Container que segura as linhas (Substitui sua .colors-container-modal antiga) */
.colors-container-modal {
    display: flex;
    flex-direction: column;
    /* Uma paleta embaixo da outra */
    /*
    gap: 20px;
     padding: 10px;
     */
    overflow-y: auto;
    /* Rolagem vertical para ver todas as paletas */
    flex-grow: 1;
    text-align: left;
    /* Alinha os nomes à esquerda */
}

/* 2. A Linha da Paleta (Ocupa a largura total) */
.palette-row-container {
    display: flex;
    /* Nome na esquerda, Cores na direita */
    align-items: center;
    width: 100%;
    background: #fcfcfc;
    border-radius: 10px;
    padding: 5px;
    border: 1px solid #eee;
    box-sizing: border-box;
}

/* 3. Célula do Nome (Lado Esquerdo - Fixa) */
.palette-label {
    width: 80px;
    /* Largura fixa para os nomes não "dançarem" */
    min-width: 80px;
    font-size: 8px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
   /* padding-right: 15px; */
    margin-right: 5px;
    border-right: 2px solid #f1c40f;
    /* Detalhe dourado separando o nome */
    line-height: 1.2;
}

/* 4. Célula das Cores (Lado Direito - Rolagem Horizontal) */
.palette-colors-wrapper {
    flex: 1;
    /* Pega o resto do espaço */
    display: flex;
    overflow-x: auto;
    /* Permite rolar as cores para o lado */
    /* gap: 12px; */
    padding: 3px 0;
    /* Suaviza a rolagem no celular */
    -webkit-overflow-scrolling: touch;
}

/* 5. Estilo das Bolinhas de Cor */
.color-swatch {
    width: 32px;
    height: 32px;
    min-width: 32px;
    /* Garante que não fiquem ovais */
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42);
    transition: transform 0.2s;
}

.color-swatch:hover {
    transform: scale(1.1);
    z-index: 2;
}

/* 6. Cores Trancadas */
.color-swatch.locked {
    opacity: 0.3;
    filter: grayscale(0.6);
    cursor: pointer;
}

.lock-icon {
    position: absolute;
    font-size: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Estilização da barra de rolagem horizontal (mais discreta) */
.palette-colors-wrapper::-webkit-scrollbar {
    height: 4px;
}

.palette-colors-wrapper::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}

/* Estilo das Etiquetas no Nome da Paleta */
.palette-label {
    display: flex;
    flex-direction: column;
    /* Nome em cima, etiqueta embaixo */
    gap: 4px;
}

.badge {
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
    font-weight: bold;
    text-transform: uppercase;
}

.badge.free {
    background-color: #2ecc71;
    color: #fff;
}

.badge.pro {
    background-color: #f1c40f;
    color: #000;
}

.badge.unlimited {
    background-color: #9b59b6;
    color: #fff;
}

/* Ajuste para as cores trancadas ficarem bem visíveis */
.color-swatch.locked {
    opacity: 0.2;
    /* Mais transparente para dar ênfase ao bloqueio */
    filter: grayscale(1);
    border: 1px dashed rgba(0, 0, 0, 0.2);
}


/* Container principal que segura todas as paletas */
#colorsContainerModal {
    display: flex;
    flex-direction: column; /* Força uma paleta embaixo da outra */
    width: 100%;
   /* padding: 10px; */
    box-sizing: border-box;
}

.color-swatch.locked {
    position: relative;
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(50%);
}

.color-swatch.locked .lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #666;
    z-index: 1;
}

.color-swatch.locked:hover {
    opacity: 0.8;
}