/* ARQUIVO: css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');

:root {
    --brand-orange: #ff751f;
    --brand-orange-hover: #e66a1c;
    --slate-dark: #0f172a;
    --bg-light: #f4f4f4;
    --premium-gold: #f59e0b;
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-light); 
    color: #1e293b; 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased;
}

/* Utilitários de Scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    scroll-behavior: smooth; 
}

/* Componentes de Interface */
.titulo-secao { 
    font-size: 15px; 
    font-weight: 600; 
    color: var(--slate-dark); 
    margin-bottom: 12px; 
    text-transform: uppercase; 
    letter-spacing: -0.5px; 
    border-left: 4px solid var(--brand-orange); 
    padding-left: 10px; 
}

/* NOVO: Classe para o Card de Anúncio Impulsionado */
.card-impulsionado {
    @apply border-2 border-orange-500 shadow-xl shadow-orange-100 scale-[1.01] transition-all duration-300;
}

/* NOVO: Badge de Destaque (Fogo/Premium) */
.badge-destaque-btn { 
    @apply absolute top-2 right-2 z-10 bg-orange-500 text-white text-[9px] font-black px-2 py-1 rounded-lg uppercase italic shadow-sm flex items-center gap-1;
}

.badge-premium { 
    position: absolute; 
    top: 8px; 
    right: 8px; 
    background: linear-gradient(45deg, #fbbf24, #f59e0b); 
    color: #fff; 
    font-size: 9px; 
    font-weight: 900; 
    padding: 2px 8px; 
    border-radius: 99px; 
    text-transform: uppercase; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
    z-index: 10; 
    display: flex; 
    align-items: center; 
    gap: 3px; 
}

/* Classes para imagens fantasmas */
img:not([src]), img[src=""] { opacity: 0 !important; }

/* Customização de Banners de Categoria */
.banner-categoria-card {
    @apply flex items-center bg-white rounded-xl overflow-hidden shadow-md border border-slate-100 hover:shadow-lg transition-all h-40 md:h-48;
}

.btn-rolo-orange {
    @apply bg-[#ff751f] text-white font-black rounded-lg uppercase italic transition-colors hover:bg-[#e66a1c];
}