/* Estilos personalizados para o plugin Sorteio */

/* Dropzone com borda tracejada, transição e layout clean */
.dropzone {
  border: 2px dashed #ced4da;
  border-radius: 0.25rem;
  transition: background-color 0.3s ease, opacity 0.5s ease;
  padding: 2rem;
  min-height: 150px;
  width: 100%;
  position: relative;
}

/* Conteúdo centralizado na dropzone */
.dropzone .dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6c757d;
}

/* Animação sutil para o texto padrão */
.default-text {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Animações para detectar autofill */
@keyframes onAutoFillStart {
  from { opacity: 0.99; }
  to { opacity: 1; }
}

@keyframes onAutoFill {
  from { opacity: 0.99; }
  to { opacity: 1; }
}

@keyframes -webkit-autofill {
  from { opacity: 0.99; }
  to { opacity: 1; }
}

/* Estilos para campos com autofill */
input:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 0.001s;
}

input:not(:-webkit-autofill) {
  animation-name: onAutoFill;
  animation-duration: 0.001s;
}

/* Pré-visualização: imagem com efeito hover */
.img-thumbnail {
  transition: transform 0.3s ease;
}
.img-thumbnail:hover {
  transform: scale(1.05);
}

/* Badge de remoção */
.remove-upload {
  font-size: 0.9rem;
}

/* Custom prefix para manter a personalização dos campos */
.custom-prefix {
  min-width: 48px;
  text-align: center;
  background-color: #e9ecef;
  border-right: 1px solid #ced4da;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}

/* Garante centralização horizontal do modal */
.modal-dialog {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Animações para os alerts success (se ainda usar) */
@keyframes slideIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes slideOut {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}
.slide-in {
  animation: slideIn 0.5s ease-out forwards;
}
.slide-out {
  animation: slideOut 0.5s ease-in forwards;
}

/* Estilo para a descrição do sorteio exibida via shortcode [descricao] */
.sorteio-description {
    color: #fff; /* Cor padrão branca, mas sem !important para permitir sobrescrita */
}

/* Permitir que elementos dentro da descrição tenham suas próprias cores */
.sorteio-description a,
.sorteio-description h1,
.sorteio-description h2,
.sorteio-description h3,
.sorteio-description h4,
.sorteio-description h5,
.sorteio-description h6,
.sorteio-description span,
.sorteio-description strong,
.sorteio-description em,
.sorteio-description b,
.sorteio-description i {
    color: inherit; /* Herda a cor do elemento pai por padrão */
}

/* Garantir que links possam ter sua própria cor */
.sorteio-description a {
    color: #0073aa; /* Cor padrão para links */
}

.sorteio-description a:hover {
    color: #00a0d2; /* Cor ao passar o mouse */
}

/* Estilos para o histórico de entradas */
.list-container {
    max-width: 500px;
    margin: 0 auto;
}

#historico-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#historico-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 4px;
    background-color: #f3f4f6;
    border-radius: 5px;
    font-size: 14px;
}

#historico-list .item-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
    flex: 1;
}

#historico-list .item-value {
    color: #16a34a;
    font-weight: 600;
    white-space: nowrap;
}

/* Opacity para itens 6-10 */
#historico-list li:nth-child(6) { opacity: 0.8; }
#historico-list li:nth-child(7) { opacity: 0.6; }
#historico-list li:nth-child(8) { opacity: 0.4; }
#historico-list li:nth-child(9) { opacity: 0.2; }
#historico-list li:nth-child(10) { opacity: 0.1; }

/* Ajustes responsivos */
@media (max-width: 480px) {
    #historico-list li {
        padding: 6px 10px;
    }
}