/**
 * CSS para estilizar o elemento de Natal injetado na categoria Popular
 * 
 * Centraliza e aumenta o tamanho da imagem de Natal
 */

/* Container do elemento de Natal */
._holiday_tumws_45.gameHotHoliday.holidayMobile {
    flex: 1 !important; /* Ocupar o espaço restante */
    position: relative !important; /* Container relativo para absolute da imagem */
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 1rem !important; /* Espaçamento à esquerda */
    margin-right: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 3rem !important; /* Altura mínima para o container */
}

/* Imagem de Natal - maior e centralizada */
._holiday_tumws_45.gameHotHoliday.holidayMobile img.lobby-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 5rem !important; /* 80px - maior para ficar mais visível */
    min-height: 3rem !important; /* 48px - altura mínima */
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Ajustar o container pai para permitir layout em row (linha) */
/* REMOVIDO: Não forçar row aqui, deixar o JavaScript controlar */
/* div[data-v-81a8138b].flex.items-center:has(._holiday_tumws_45) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
} */

/* Wrapper para manter ícone e texto na mesma linha - GARANTIR QUE FICAM JUNTOS */
.popular-content-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    width: auto !important; /* Não ocupar todo o espaço */
    flex-shrink: 0 !important; /* Não encolher */
    flex-wrap: nowrap !important;
}

/* Garantir que o conteúdo (ícone + texto) fique à esquerda e juntos */
div[data-v-81a8138b].flex.items-center:has(._holiday_tumws_45) > .popular-content-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important;
}

/* Garantir que img e h2 dentro do wrapper fiquem na mesma linha */
.popular-content-wrapper img,
.popular-content-wrapper h2 {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Versão alternativa se o :has() não funcionar */
div.flex.items-center:has(._holiday_tumws_45) {
    flex-direction: column !important;
}

/* Para mobile - aumentar ainda mais se necessário */
@media (max-width: 768px) {
    ._holiday_tumws_45.gameHotHoliday.holidayMobile img.lobby-image {
        max-height: 6rem !important; /* 96px em mobile - ainda maior */
        min-height: 4rem !important;
    }
}