/**
 * Allfone Engine - Módulo de Recomendações Premium (Visual Clean)
 * Guardar em: assets/recomenda-premium.css
 */

/* 🌟 Bloco :root Removido para Centralização no Core */

/* Correção de Alinhamento: Centraliza o bloco de recomendações com o cabeçalho */
.site-content .col-full {
 max-width: 1200px !important;
 margin-left: auto !important;
 margin-right: auto !important;
 background: #ffffff !important;
 box-shadow: none !important;
 border: none !important;
 padding: 20px !important;
 display: block !important;
}



/* Topo do Cabeçalho - Transforma em Flexbox para empurrar a pesquisa para a direita */
.rec-top-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end; /* Alinha a barra por baixo, junto com a última linha do texto */
 gap: 20px;
 margin-bottom: 30px;
}

/* Agrupa os títulos para não quebrarem o layout */
.rec-header-titles {
 flex: 1;
}

.rec-top-header h1 {
 font-size: 2.2rem;
 font-weight: 700;
 margin: 0 0 5px 0;
 color: #111;
}

.rec-top-header p {
 color: var(--text-muted);
 margin: 0;
 font-size: 1rem;
}

/* Barra de Ações com Filtros e Caixas de Procura */
.rec-action-bar {
 display: flex;
 flex-direction: column; /* Alinha as categorias e a procura verticalmente */
 align-items: stretch; /* Garante que os elementos ocupam a largura total */
 gap: 20px;
 margin-bottom: 35px;
 border-bottom: 1px solid var(--border-card);
 padding-bottom: 25px;
}

/* Força os botões a saltarem de linha em 2 ou 3 linhas sem esmagar o texto */
.rec-categories {
 display: flex;
 flex-wrap: wrap; /* Permite a quebra de linha automática */
 gap: 10px; /* Espaçamento perfeito entre os botões */
 align-items: center;
}

/* Impede terminantemente que o texto dos botões quebre a meio da palavra */
.rec-cat-btn {
 white-space: nowrap;
}

/* Caixa de Procura - Ajustada para o novo alinhamento */
.rec-search-box {
 position: relative;
 width: 100%;
 max-width: 350px; /* Largura ligeiramente menor para ficar elegante à direita */
 margin-bottom: 5px; /* Alinhamento estético com o texto do subtítulo */
}

.rec-search-box input {
 width: 100% !important;
 padding: 10px 15px 10px 40px !important; /* Aumentado para 40px com !important */
 border: 1px solid var(--border-card) !important;
 border-radius: 6px !important;
 font-size: 0.95rem !important;
 background: #f1f5f9 !important;
 box-sizing: border-box !important; /* Garante que o padding não deforma a largura */
}

.rec-search-box i {
 position: absolute;
 left: 12px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--text-muted);
}

.rec-cat-btn {
 background: #ffffff;
 border: 1px solid var(--border-card);
 padding: 8px 16px;
 border-radius: 20px;
 cursor: pointer;
 font-size: 0.85rem;
 font-weight: 600;
 color: var(--text-main);
 display: flex;
 align-items: center;
 gap: 6px;
 transition: all 0.2s;
}

.rec-cat-btn.active, .rec-cat-btn:hover {
 background: var(--allfone-purple);
 color: #ffffff;
 border-color: var(--allfone-purple);
}

.rec-sort-box select {
 padding: 8px 12px;
 border: 1px solid var(--border-card);
 border-radius: 6px;
 font-size: 0.85rem;
 color: var(--text-main);
 background: #ffffff;
}

/* Lista Vertical do Mockup */
.rec-list {
 display: flex;
 flex-direction: column;
 gap: 25px;
 margin-bottom: 50px;
}

/* Linha / Card do Produto */
.rec-row {
 display: grid;
 grid-template-columns: 240px 1fr 200px;
 border: 1px solid var(--border-card);
 border-radius: 12px;
 overflow: hidden;
 background: #ffffff;
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
 transition: transform 0.2s, box-shadow 0.2s;
}

.rec-row:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Bloco Esquerdo: Imagem + Scoring */
.rec-media-block {
 background: #ffffff;
 padding: 20px;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 border-right: 1px solid var(--border-card);
}

.rec-media-block img {
 max-width: 100%;
 max-height: 150px;
 object-fit: contain;
}

/* Badge de Scoring Premium - Estilo Neon Allfone */
.rec-score-badge {
 position: absolute;
 bottom: 15px;
 right: 15px;
 background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); /* GRADIENTE ROXO PARA ROSA VIBRANTE */
 color: #ffffff;
 font-weight: 800;
 padding: 6px 12px;
 border-radius: 20px; /* Cantos arredondados estilo pilula, muito mais moderno */
 font-size: 1rem;
 box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35); /* Brilho suave roxo */
}

/* Bloco Central: Informação e Hardware */
.rec-info-block {
 padding: 25px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

.rec-info-block h3 {
 font-size: 1.4rem;
 font-weight: 700;
 margin: 0 0 6px 0;
 color: #111;
}

.rec-info-block .rec-desc {
 font-size: 0.9rem;
 color: var(--text-muted);
 line-height: 1.5;
 margin: 0 0 20px 0;
}

/* GRELHA DE HARDWARE CORRIGIDA: Alinhamento perfeito em flexbox/grid */
.rec-specs-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}

.rec-spec-box {
 background: var(--bg-light);
 border: 1px solid var(--border-card);
 border-radius: 8px;
 padding: 12px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 text-align: left;
 font-size: 0.8rem;
 color: var(--text-muted);
}

.rec-spec-box i {
 font-size: 1.1rem;
 color: var(--allfone-purple);
 margin-bottom: 5px;
}

.rec-spec-box strong {
 color: var(--text-main);
 font-size: 0.95rem;
 margin-top: 2px;
 display: block;
}

/* Bloco Direito: Botões */
.rec-action-block {
 padding: 25px;
 border-left: 1px solid var(--border-card);
 background: #fafafa;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 12px;
}

.rec-btn-action {

 display: block;
 text-align: center;
 padding: 10px 15px;
 border-radius: 6px;
 font-size: 0.85rem;
 font-weight: 700;
 text-decoration: none !important;
 transition: background 0.2s, color 0.2s;
}

.rec-btn-action.rec-btn-outline{
  background: var(--allfone-purple) !important;
  color:#ffffff;

}


.rec-btn-outline {

 border: 1px solid var(--border-card);
color: var(--text-main);
}

.rec-btn-outline:hover {
 background: var(--bg-light);
 border-color: var(--text-muted);
}

/* 🌟 BOTÃO DE AFILIADO: Amarelo estrito apenas no bloco direito */
.rec-action-block .rec-btn-purple {
    background: #f1c40f;
    color: #1e293b;
    border: 1px solid #f1c40f;
}

.rec-action-block .rec-btn-purple:hover {
    background: #d4ac0d;
    border-color: #d4ac0d;
    color: #111111;
}



.rec-action-block .rec-link-footer {
 text-align: center;
 font-size: 0.75rem;
 color: var(--text-muted);
 text-decoration: none;
}

.rec-action-block .rec-link-footer:hover { text-decoration: underline; }

/* Selos de Confiança Inferiores */
.rec-footer-trust {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 border-top: 1px solid var(--border-card);
 padding-top: 30px;
 margin-top: 20px;
}

.rec-trust-item {
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 0.8rem;
 color: var(--text-muted);
 line-height: 1.4;
}

.rec-trust-item i { font-size: 1.5rem; color: var(--allfone-purple); }
.rec-trust-item strong { color: var(--text-main); display: block; }

/* Responsivo */
@media (max-width: 992px) {
 .rec-row { grid-template-columns: 1fr; }
 .rec-media-block { border-right: none; border-bottom: 1px solid var(--border-card); }
 .rec-action-block { border-left: none; border-top: 1px solid var(--border-card); }
 .rec-action-bar { flex-direction: column; align-items: stretch; }
 .rec-categories { overflow-x: auto; padding-bottom: 5px; }
 .rec-footer-trust { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
 .rec-specs-grid { grid-template-columns: repeat(2, 1fr); }
 .rec-footer-trust { grid-template-columns: 1fr; }
}