/* ==========================================================================
   ⚜️ CLEAN TECH CLASSIFICADOS CSS - ARQUIVO 100% CORRIGIDO (SEM IMPORTANT)
   ========================================================================== */

html, body { height: 100%; margin: 0; padding: 0; }

body { 
    background-color: #f1f5f9; /* Fundo cinza-claro moderno idêntico ao de cadastro */
    color: #1e293b; 
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    box-sizing: border-box; 
    -webkit-font-smoothing: antialiased;
}

.feed-classificados { 
    width: 100%; 
    max-width: 680px; 
    margin: 40px auto; 
    padding: 0 20px; 
    box-sizing: border-box; 
    flex: 1 0 auto; 
}

.feed-classificados .feed-header { 
    margin-bottom: 25px; 
    border-bottom: 1px solid #cbd5e1; 
    padding-bottom: 20px; 
    text-align: center; 
}

.feed-classificados .feed-header h2 { 
    font-size: 22px; 
    font-weight: 800; 
    color: #0f172a; 
    margin: 0 0 8px 0; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.feed-classificados .feed-header p { 
    font-size: 14px; 
    color: #64748b; 
    margin: 0; 
}

/* 🎛️ BARRA DE FILTROS LIMPA E MODERNA */
.classificados-filtros-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    overflow-x: auto; 
    padding-bottom: 8px;
    scrollbar-width: none; 
}
.classificados-filtros-bar::-webkit-scrollbar { display: none; } 

.classificados-filtros-bar .filter-btn {
    white-space: nowrap;
    background-color: #ffffff;
    color: #475569;
    text-decoration: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.classificados-filtros-bar .filter-btn:hover { 
    background-color: #f8fafc; 
    color: #0f172a; 
    border-color: #94a3b8; 
}
.classificados-filtros-bar .filter-btn.active { 
    background: #ff2a5f; 
    color: #ffffff; 
    border-color: #ff2a5f; 
    box-shadow: 0 4px 12px rgba(255, 42, 95, 0.25);
}

/* 🃏 O Card Avançado em Branco Premium */
.feed-item-card { 
    background-color: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 20px; 
    padding: 26px; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); 
    box-sizing: border-box; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}
.feed-item-card:hover { 
    transform: translateY(-2px); 
    border-color: #cbd5e1; 
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08); 
}

/* Linha Superior Interna (Tag + Localização) */
.card-top-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
    width: 100%; 
}

.feed-item-badge { 
    background-color: #fff1f5; 
    color: #ff2a5f; 
    font-size: 11px; 
    font-weight: 800; 
    padding: 5px 12px; 
    border-radius: 6px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.card-top-row .feed-item-location { 
    font-size: 13px; 
    color: #64748b; 
    font-weight: 600; 
}

.feed-item-title { 
    font-size: 19px; 
    font-weight: 700; 
    color: #0f172a; 
    margin: 0 0 8px 0; 
    line-height: 1.4; 
}

/* Bloco de Destaque para o Preço */
.feed-item-price {
    font-size: 22px;
    font-weight: 800;
    color: #16a34a; 
    margin-bottom: 15px;
    letter-spacing: -0.02em;
    font-family: inherit;
}

/* 📝 DESCRIÇÃO CORRIGIDA (COR E ESPAÇAMENTO ATUALIZADOS) */
.feed-item-description { 
    font-size: 14.5px; 
    line-height: 1.6; 
    color: #475569; /* Tom cinza grafite elegante */
    margin: 12px 0 24px 0; 
}

/* 🎯 CONTAINER UNIFICADO DOS BOTÕES DE AÇÃO */
.feed-item-actions {
    display: flex;
    flex-direction: column; 
    gap: 10px;              
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Estilo unificado compartilhado pelos botões */
.btn-feed {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    width: 100%;
    padding: 14px 10px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;  
    border-radius: 8px;     
    box-sizing: border-box;
    letter-spacing: 0.5px; 
    transition: all 0.2s ease;
}

/* 1. Botão de Ligar */
.btn-phone { 
    background-color: #f1f5f9; 
    color: #334155; 
    border: 1px solid #cbd5e1; 
}
.btn-phone:hover { 
    background-color: #e2e8f0; 
    color: #0f172a; 
    border-color: #94a3b8; 
}

/* 2. Botão do WhatsApp */
.btn-whatsapp { 
    background-color: #22c55e; 
    color: #ffffff; 
}
.btn-whatsapp:hover {
    background-color: #16a34a;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

/* 3. Botão de Cobrar Pix */
.btn-cobrar-pix { 
    background-color: #1e1f22; 
    color: #ffffff; 
}
.btn-cobrar-pix:hover {
    background-color: #2b2d31;
}

/* 📋 RODAPÉ DO CARD CORRIGIDO COM LINHA DIVISÓRIA */
.feed-item-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-top: 1px solid #e2e8f0; /* Linha sutil superior ativa */
    padding-top: 14px; 
    margin-top: 15px; 
}

.feed-item-footer .info-id,
.feed-item-footer .info-date { 
    font-size: 12px; 
    color: #94a3b8; 
    font-weight: 500; 
}

/* 🧭 CONTAINER DE NAVEGAÇÃO DA PÁGINA HOME */
body .feed-classificados div.feed-navigation-box { 
    text-align: center; 
    margin-top: 50px; 
    margin-bottom: 30px;
    display: flex; 
    justify-content: center; 
    gap: 16px; 
}


/* ==========================================================================
   ⚜️ CLEAN TECH CLASSIFICADOS CSS - PART 2 (HIGIENIZADA)
   ========================================================================== */

/* Força a cor branca em todos os pseudostados da tag a encadeada pelo body (Primeiro botão de navegação) */
body .feed-classificados div.feed-navigation-box a:first-child,
body .feed-classificados div.feed-navigation-box a:first-child:link,
body .feed-classificados div.feed-navigation-box a:first-child:visited,
body .feed-classificados div.feed-navigation-box a:first-child:hover,
body .feed-classificados div.feed-navigation-box button:first-child,
body .feed-classificados div.feed-navigation-box input:first-child {
    display: inline-block; 
    background: linear-gradient(135deg, #ff2a5f 0%, #ff578a 100%);
    color: #ffffff; 
    text-decoration: none; 
    font-size: 14px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    padding: 15px 32px; 
    border: none; 
    border-radius: 12px; 
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(255, 42, 95, 0.35); 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-family: inherit;
}

body .feed-classificados div.feed-navigation-box a:first-child:hover,
body .feed-classificados div.feed-navigation-box button:first-child:hover,
body .feed-classificados div.feed-navigation-box input:first-child:hover {
    background: linear-gradient(135deg, #e01f50 0%, #ff477e 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 42, 95, 0.5);
    color: #ffffff;
}

/* Força a cor grafite no segundo botão encadeado pelo body (Voltar para a Home) */
body .feed-classificados .btn-back-home,
body .feed-classificados div.feed-navigation-box a:last-child,
body .feed-classificados div.feed-navigation-box a:last-child:link,
body .feed-classificados div.feed-navigation-box a:last-child:visited,
body .feed-classificados div.feed-navigation-box button:last-child,
body .feed-classificados div.feed-navigation-box input:last-child { 
    display: inline-block; 
    background-color: #ffffff;
    color: #0f172a; 
    text-decoration: none; 
    font-size: 14px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    padding: 15px 32px; 
    border: 2px solid #cbd5e1; 
    border-radius: 12px; 
    box-sizing: border-box;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    font-family: inherit;
}

body .feed-classificados .btn-back-home:hover,
body .feed-classificados div.feed-navigation-box a:last-child:hover,
body .feed-classificados div.feed-navigation-box button:last-child:hover,
body .feed-classificados div.feed-navigation-box input:last-child:hover { 
    background-color: #f8fafc; 
    color: #ff2a5f; 
    border-color: #cbd5e1; 
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Rodapé Corporativo Escuro Premium */
.rodape-site { 
    background: #0f172a; 
    color: #94a3b8; 
    padding: 40px 20px; 
    text-align: center; 
    font-size: 13px; 
    border-top: 1px solid #1e293b; 
    width: 100%; 
    box-sizing: border-box; 
    flex-shrink: 0; 
    margin-top: auto; 
}
.rodape-site .rodape-links-legais a { 
    color: #38bdf8; 
    text-decoration: none; 
    font-weight: 600; 
}
.rodape-site .rodape-links-legais a:hover { 
    color: #ffffff; 
}
.rodape-site p { 
    margin: 15px 0; 
    color: #f1f5f9; 
}
.rodape-site .rodape-aviso { 
    font-size: 12px; 
    color: #64748b; 
    max-width: 800px; 
    margin: 20px auto 0 auto; 
    line-height: 1.6; 
    border-top: 1px solid #1e293b; 
    padding-top: 15px; 
    text-align: justify; 
}

/* 📱 Responsividade Mobile Inteligente */
@media (max-width: 768px) {
    .feed-classificados { 
        padding: 0 12px; 
        margin: 20px auto; 
    }
    .feed-classificados .feed-item-card { 
        padding: 18px; 
        border-radius: 16px; 
    }
    /* Mantém o empilhamento vertical correto sem amassar o texto interno */
    .feed-classificados .feed-item-actions { 
        flex-direction: column; 
        gap: 10px; 
    }
    .feed-classificados .feed-navigation-box { 
        flex-direction: column; 
        gap: 12px; 
    }
    body .feed-classificados .btn-back-home,
    body .feed-classificados div.feed-navigation-box a,
    body .feed-classificados div.feed-navigation-box button,
    body .feed-classificados div.feed-navigation-box input { 
        width: 100%; 
        text-align: center; 
        box-sizing: border-box;
    }
}



/* Caixa de foto proporcional unificada para os classificados */
.feed-item-card .classificados-media-wrapper {
    width: 100%; 
    height: auto; 
    max-height: 320px; 
    overflow: hidden; 
    border-radius: 8px; 
    margin-bottom: 18px; 
    border: 1px solid #1e1e24; 
    background-color: #0c0c0e;
}

.classificados-media-wrapper .classificados-media-img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
}

/* Customização do botão de link secundário do feed de anúncios */
.feed-navigation-box .btn-anunciar-classificado-link {
    border-color: #8b7355; 
    color: #b3a495;
}