/* =====================================================
   ALLFONE ENGINE - DESIGN GRÁFICO VISUAL DOS RANKINGS
   ===================================================== */

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

/* 1. ESTRUTURA GERAL DA PÁGINA */
.af-ranking-page {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 background: var(--bg-light);
 min-height: 100vh;
 padding: 60px 20px;
 color: var(--text-main);
}

.af-ranking-container {
 max-width: 1200px;
 margin: auto;
}

.af-ranking-title {
 text-align: center;
 font-size: 2.2rem;
 margin-bottom: 20px;
 color: #111;
 font-weight: 700;
}

/*texto por baixo do título página rankings*/
.af-ranking-desc {
 text-align: justify;
 max-width: 900px;
 margin: 0 auto 30px auto;
 margin-bottom: 40px;
 line-height: 1.6;
 color: var(--text-muted);
 font-size: 1rem;
}

/* 2. NAVEGAÇÃO POR ABAS — scroll horizontal (como .rec-categories) */
.af-tabs-navigation {
 display: flex;
 justify-content: flex-start;
 gap: 10px;
 margin-bottom: 20px;
 flex-wrap: nowrap;
 overflow-x: auto;
 overflow-y: hidden;
 padding-bottom: 8px;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 scrollbar-color: var(--allfone-purple) var(--border-card);
}

.af-tabs-navigation::-webkit-scrollbar {
 height: 6px;
}

.af-tabs-navigation::-webkit-scrollbar-track {
 background: var(--border-card);
 border-radius: 3px;
}

.af-tabs-navigation::-webkit-scrollbar-thumb {
 background: var(--allfone-purple);
 border-radius: 3px;
}

.af-tab-link {
 padding: 8px 16px;
 background: #ffffff;
 color: var(--text-main);
 text-decoration: none;
 font-weight: 600;
 border-radius: 20px;
 font-size: 0.85rem;
 transition: all 0.2s ease;
 border: 1px solid var(--border-card);
 box-shadow: none;
 white-space: nowrap;
 flex-shrink: 0;
}

.af-tab-link:hover {
 background: var(--allfone-purple);
 color: #ffffff;
 border-color: var(--allfone-purple);
}

.af-tab-link.is-active {
 background: var(--allfone-purple);
 color: #ffffff;
 border-color: var(--allfone-purple);
}

/* 3. TABELA DE RANKINGS E PROPORÇÕES DE COLUNAS */
.af-ranking-table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 0;
 background: #ffffff;
 border-radius: 12px;
 border: 1px solid var(--border-card);
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
 overflow: visible;
}

.af-ranking-table tbody,
.af-ranking-table tr,
.af-ranking-table td {
 overflow: visible;
}

.af-ranking-table th {
 /*background: var(--bg-light);
 color: var(--text-main);*/
 background: var(--allfone-purple) !important; /* 🌟 Mudado de var(--bg-light) para o roxo oficial */
 color: #ffffff !important;                    /* 🌟 Texto em branco para contraste perfeito */
 padding: 12px 18px;
 text-align: left;
 font-weight: 700;
 font-size: 0.85rem;
 letter-spacing: 0.3px;
 border-bottom: 1px solid var(--border-card);
}

.af-ranking-table td {
 padding: 16px 18px;
 border-bottom: 1px solid var(--border-card);
 vertical-align: middle;
 background: #ffffff;
}

.af-ranking-table tbody tr:last-child td {
 border-bottom: none;
}

/* Cantos arredondados — alinhado ao .rec-row (12px) */
.af-ranking-table thead tr:first-child th:first-child {
 border-top-left-radius: 11px;
}

.af-ranking-table thead tr:first-child th:last-child {
 border-top-right-radius: 11px;
}

.af-ranking-table tbody tr:last-child td:first-child {
 border-bottom-left-radius: 11px;
}

.af-ranking-table tbody tr:last-child td:last-child {
 border-bottom-right-radius: 11px;
}

/* Proporções Estritas do Mockup OpenOffice */
.af-col-medalha { width: 6%; text-align: center; font-size: 24px; }
.af-col-smartphone { width: 28%; }
.af-col-destaque { width: 20%; }
.af-col-score { width: 14%; }
.af-col-data { width: 8%; text-align: center; }
.af-col-preco { width: 12%; text-align: center; }
.af-col-acoes {
 width: 12%;
 text-align: center;
 position: relative; /* Âncora do menu .af-caixa-rivais (position: absolute) */
 overflow: visible;
}

.af-ranking-table tr:has(.af-caixa-rivais.is-open) {
 position: relative;
 z-index: 10;
}

/* 4. MINIATURAS AMPLIADAS PARA IMPACTO (CORRIGIDO) */
.af-product-cell-wrapper {
 display: flex !important;
 flex-direction: row !important;
 align-items: center !important;
 gap: 16px !important;
 width: 100%;
}

/* Contentor de 68px para o smartphone respirar */
.af-product-thumbnail-box {
 width: 90px;
 height: 120px;
 max-width: 90px;
 max-height: 120px;
 min-width: 68px !important;
 min-height: 68px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 background: var(--bg-light);
 border-radius: 8px;
 overflow: hidden !important;
 border: 1px solid var(--border-card);
}

.af-product-img {
 width: 100% !important;
 height: 100% !important;
 max-width: 100% !important;
 max-height: 100% !important;
 object-fit: contain !important; /* Não deixa distorcer o telemóvel */
 display: block !important;
}

.af-img-fallback {
 font-size: 24px;
 color: var(--allfone-purple);
}

.af-product-info-box {
 display: flex !important;
 flex-direction: column !important;
 align-items: flex-start !important;
 justify-content: center !important;
}

.af-model-title {
 font-size: 1.4rem;
 color: #111;
 display: block;
 margin-bottom: 4px;
 font-weight: 700;
}

.af-brand-sub {
 color: var(--text-muted);
 text-transform: uppercase;
 font-size: 0.75rem;
 letter-spacing: 0.5px;
 font-weight: 600;
}

.af-desc-sub {
 margin: 6px 0 0 0;
 font-size: 0.9rem;
 color: var(--text-muted);
 line-height: 1.5;
}

/* CAIXA DE CONTEÚDO DENTRO DA COLUNA DE DESTAQUES */
.af-destaque-wrapper {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.af-destaque-text {
 font-size: 0.9rem;
 color: var(--text-main);
 line-height: 1.5;
 font-weight: 500;
}

.af-link-analise-box {
 color: var(--allfone-purple);
 font-size: 0.75rem;
 font-weight: 700;
 text-decoration: none;
 display: inline-block;
 transition: color 0.2s ease;
}

.af-link-analise-box:hover {
 color: var(--allfone-purple-hover);
 text-decoration: underline;
}

/* 5. BARRAS DE PROGRESSO DO SCORE */
.af-score-container {
 display: flex;
 flex-direction: column;
 gap: 6px;
 max-width: 160px;
}

.af-score-text {
 font-size: 1rem;
 font-weight: 600;
 color: #111;
}

.af-score-bar-bg {
 width: 100%;
 height: 8px;
 background: var(--border-card);
 border-radius: 4px;
 overflow: hidden;
}

.af-score-bar-fill {
 height: 100%;
 border-radius: 4px;
 background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
 transition: width 0.6s ease;
}

/* 6. COLUNAS INDEPENDENTES DE BOTÕES */
.af-price-label {
 font-size: 0.75rem;
 color: var(--text-muted);
 display: inline-block;
 margin-top: 4px;
}

.af-山区-btn, .af-btn {
 padding: 10px 15px;
 border-radius: 6px;
 text-decoration: none;
 font-size: 0.85rem;
 font-weight: 700;
 display: inline-block;
 text-align: center;
 transition: all 0.2s ease;
 width: 100%;
 box-sizing: border-box;
}

/* 🌟 BOTÃO DE AFILIADO: Destaca com Amarelo para cliques */
.af-btn-afiliado {
 background: #f1c40f !important;
 color: #1e293b !important;
 border: 1px solid #f1c40f !important;
}

.af-btn-afiliado:hover {
 background: #d4ac0d !important;
 border-color: #d4ac0d !important;
 color: #111111 !important;
 transform: translateY(-1px);
}

/* Botão de Comparação (Roxo Interno) */
.af-btn-comparar {
 background: #ffffff;
 color: var(--main-solid);
 border: 2px solid var(--main-solid);
 cursor: pointer;
}

.af-btn-comparar:hover,
.af-btn-comparar.is-open {
 background: var(--main-solid);
 color: #ffffff;
 border-color: var(--main-solid);
 box-shadow: 0 4px 12px rgba(138, 43, 226, 0.15);
}

/* =====================================================
 MENU SUSPENSO DE RIVAIS (CAIXINHA INTERATIVA BETA)
===================================================== */
.af-caixa-rivais {
 position: absolute;
 top: 80%;
 right: 20px;
 background: #ffffff;
 border: 1px solid var(--allfone-purple);
 border-radius: 12px;
 padding: 14px;
 width: 220px;
 box-shadow: 0 10px 25px rgba(138, 43, 226, 0.15);
 z-index: 99;
 display: block !important;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(-10px);
 transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
 visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
 transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.af-caixa-rivais.is-open {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateY(0);
 z-index: 999;
}

.af-caixa-titulo {
 display: block;
 color: var(--text-muted);
 font-size: 0.75rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 margin-bottom: 8px;
 text-align: left;
}

.af-caixa-links {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.af-rival-link {
 display: block;
 padding: 8px 12px;
 background: var(--bg-light);
 color: var(--allfone-purple);
 text-decoration: none;
 font-size: 0.85rem;
 font-weight: 600;
 border-radius: 8px;
 text-align: left;
 transition: all 0.2s ease;
 border: 1px solid var(--border-card);
}

.af-rival-link:hover {
 background: var(--allfone-purple);
 color: #ffffff;
 border-color: var(--allfone-purple);
 transform: translateX(3px);
}

.af-caixa-vazia {
 font-size: 0.75rem;
 color: var(--text-muted);
 font-style: italic;
}

/* ALLFONE ENGINE - BADGES DE SINALIZAÇÃO DE DADOS NO SCORE */
.af-badge-status {
 display: inline-block;
 padding: 2px 6px;
 border-radius: 4px;
 font-size: 10px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.3px;
 margin-top: 4px;
 align-self: flex-start;
 width: max-content;
}

.af-badge-verde {
 background-color: #e6f6ec !important;
 color: #078330 !important;
}

.af-badge-verde-claro {
 background-color: #f0fdf4 !important;
 color: #16a34a !important;
}

.af-badge-amarelo {
 background-color: #fefce8 !important;
 color: #ca8a04 !important;
}

/* Responsivo */
@media (max-width: 1100px) {
 .af-ranking-container {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 scrollbar-color: var(--allfone-purple) var(--border-card);
 padding-bottom: 6px;
 }
 .af-ranking-container::-webkit-scrollbar {
 height: 6px;
 }
 .af-ranking-container::-webkit-scrollbar-track {
 background: var(--border-card);
 border-radius: 3px;
 }
 .af-ranking-container::-webkit-scrollbar-thumb {
 background: var(--allfone-purple);
 border-radius: 3px;
 }
 .af-ranking-table {
 min-width: 980px;
 }
}


/* =====================================================
   RANKING CARD - SUBSTITUIÇÃO DE EMOJIS POR BADGES CSS
   ===================================================== */

/* Base do círculo da medalha */
.af-ranking-medalha {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* 1º Lugar - Ouro Premium */
.af-medal-position-1 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: 1px solid #b45309;
}

/* 2º Lugar - Prata Tecnológica */
.af-medal-position-2 {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important;
    border: 1px solid #475569;
}

/* 3º Lugar - Bronze Elegante */
.af-medal-position-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #a0522d 100%) !important;
    border: 1px solid #8b4513;
}

/* Fallback caso apareçam mais posições no loop */
.af-ranking-top3 li:nth-child(n+4) .af-ranking-medalha {
    background: #e2e8f0 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1;
}