/* Container principal do formulário */
.image-updater-container-v5 {
    border: 1px solid #ddd;
    padding: 20px;
    margin-top: 20px;
    background-color: #f9f9f9;
}
.image-updater-container-v5 fieldset {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
}
.image-updater-container-v5 legend {
    font-weight: bold;
    padding: 0 10px;
}

/* Grid para as imagens da galeria */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

/* Container de cada item da galeria */
.gallery-item, .gallery-item-preview {
    border: 1px solid #eee;
    padding: 5px;
    text-align: center;
    background: #fff;
    aspect-ratio: 1 / 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Imagens proporcionais (sem cortes) */
.gallery-item img, .gallery-item-preview img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain; 
}
#main-image-preview img {
    border: 2px dashed #ccc;
    padding: 5px;
    max-width: 150px;
    object-fit: contain;
}


.gallery-item .remove-action {
    display: block;
    margin-top: auto;
    font-size: 0.9em;
    padding-top: 5px;
}

/* Estilo para os previews */
.image-preview {
    margin-top: 15px;
}

#gallery-images-preview {
    border-top: 2px solid #eee;
    padding-top: 15px;
}
.gallery-item-preview img {
    border: 2px dashed #aed581;
}

/* Estilo para o botão quando desativado pelo JavaScript */
#submit-image-update-btn-v5:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}


/* --- INÍCIO DO AJUSTE PARA RESPONSIVIDADE (CELULAR) --- */
@media (max-width: 600px) {

    .image-updater-container-v5 {
        padding: 10px;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    /* --- CORREÇÃO ESTRUTURAL PARA O BOTÃO DE UPLOAD --- */

    /* 1. Selecionamos os containers dos botões de upload */
    .image-item.main-image,
    #image-updater-form-v5 fieldset:has(#new_gallery_images) {
        display: flex;          /* Ativamos o Flexbox */
        flex-direction: column; /* **A MÁGICA**: Força os itens a ficarem em coluna (um embaixo do outro) */
        align-items: flex-start;/* Alinha os itens à esquerda */
        gap: 8px;               /* Adiciona um espaço entre o texto (label) e o botão */
    }

    /* 2. Garantimos que o input de arquivo se comporte bem dentro da nova estrutura */
    input[type="file"] {
        width: 100%;             /* Ocupa toda a largura disponível na sua nova linha */
        max-width: 100%;
        
        /* Corta o texto que não couber, como segurança */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* --- FIM DO AJUSTE PARA RESPONSIVIDADE --- */