/**
Theme Name: Astra Child Ofertas
Author: Fernando Castro
Author URI: https://fernandopvcastro.com.br
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child-ofertas
Template: astra
*/

/* ==========================================================================
   1. CONFIGURAÇÕES GLOBAIS E RESETS (DARK MODE)
   ========================================================================== */
:root {
    --bg-principal: #121212; /* Fundo da página (Preto fosco) */
    --bg-card: #1e1e1e; /* Fundo dos blocos e cards */
    --bg-header-footer: #0d0d0d; /* Fundo do topo e rodapé */
    --borda-suave: #2c2c2c; /* Cor das divisórias e bordas */
    --texto-principal: #ffffff; /* Títulos e textos de alta relevância */
    --texto-secundario: #b3b3b3; /* Parágrafos e descrições menores */

    /* Identidade Visual Inspirada no Mercado Livre */
    --amarelo-ml: #fff159; /* Cor principal de conversão (CTA) */
    --amarelo-hover: #e6d850; /* Estado de hover do botão */
    --verde-sucesso: #00a650; /* Badges de % OFF e Frete Grátis */
}

/* Força o background escuro em todo o HTML e Body do Astra */
body,
html {
    background-color: var(--bg-principal) !important;
    color: var(--texto-secundario) !important;
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--texto-principal) !important;
    font-weight: 700;
}

a {
    color: var(--amarelo-ml);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--amarelo-hover);
}

/* ==========================================================================
   2. ESTILIZAÇÃO DO HEADER (MENU SUPERIOR)
   ========================================================================== */
.main-header-bar,
.site-header,
header {
    background-color: var(--bg-header-footer) !important;
    border-bottom: 1px solid var(--borda-suave) !important;
}

/* Força os links do menu do Astra a ficarem brancos */
header .main-header-menu a,
header .menu-link {
    color: var(--texto-principal) !important;
    font-size: 14px;
    font-weight: 500;
}

header .main-header-menu a:hover {
    color: var(--amarelo-ml) !important;
}

/* Botão de Destaque no Menu (Grupo do WhatsApp) */
header .menu-item-whatsapp a {
    background-color: #25d366 !important; /* Verde oficial do WhatsApp */
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 20px;
    font-weight: 600;
}

header .menu-item-whatsapp a:hover {
    background-color: #20ba56 !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* ==========================================================================
   3. CONTAINER PRINCIPAL E SEÇÃO HERO
   ========================================================================== */
.site-content,
#content {
    background-color: var(--bg-principal) !important;
    padding: 20px 0;
}

/* Seção de introdução/título do site */
.hero-section {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(
        180deg,
        var(--bg-header-footer) 0%,
        var(--bg-principal) 100%
    );
    border-bottom: 1px solid var(--borda-suave);
    margin-bottom: 24px;
}

.hero-section h1 {
    color: var(--amarelo-ml) !important;
    font-size: 32px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* ==========================================================================
   4. AJUSTES COMPLEMENTARES NOS FILTROS (MANTENDO O MODO ESCURO)
   ========================================================================== */
.vitrine-filters-container {
    background: transparent !important; /* Remove o fundo cinza claro anterior */
    padding: 16px 12px;
}

.search-wrapper input {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--borda-suave) !important;
    color: var(--texto-principal) !important;
}

.search-wrapper input::placeholder {
    color: #666666;
}

.filter-pill {
    background: var(--bg-card) !important;
    border: 1px solid var(--borda-suave) !important;
    color: var(--texto-secundario) !important;
}

.filter-pill.active {
    background: var(--amarelo-ml) !important;
    color: #000000 !important;
    border-color: var(--amarelo-ml) !important;
    font-weight: 600;
}

/* ==========================================================================
   5. ESTILIZAÇÃO DO RODAPÉ (FOOTER)
   ========================================================================== */
.site-footer,
footer {
    background-color: var(--bg-header-footer) !important;
    border-top: 1px solid var(--borda-suave) !important;
    padding: 24px 20px !important;
    color: #666666 !important;
}

footer a {
    color: var(--texto-secundario);
    font-size: 13px;
}

footer a:hover {
    color: var(--texto-principal);
}

.footer-legal-text {
    font-size: 11px;
    line-height: 1.5;
    color: #555555;
    margin-top: 16px;
    text-align: center;
}

.site-content {
    background-color: #1e1e1e; /* Cor de fundo do site */
    color: #ffffff; /* Cor do texto */
    font-family: "Inter", sans-serif;
}
@media (min-width: 922px) {
    .site-content .ast-container {
        flex-direction: column;
    }
}
.entry-title {
    color: #fff; /* Amarelo do Mercado Livre */
    font-size: 32px;
    margin-bottom: 16px;
}
.legal-container {
    max-width: 100%;
    margin: 40px auto;
    padding: 24px;
    background-color: #1e1e1e; /* Casando com o fundo dos cards */
    border: 1px solid #2c2c2c;
    border-radius: 8px;
    font-family: "Inter", sans-serif;
}
.legal-title {
    color: #fff159; /* Amarelo do Mercado Livre */
    font-size: 28px;
    margin-bottom: 4px;
}
.legal-updated {
    color: #888888;
    font-size: 13px;
    margin-bottom: 24px;
}
.legal-subtitle {
    color: #ffffff;
    font-size: 18px;
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 600;
}
.legal-text {
    color: #e5e5e5;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Container e Grid */
.archive-ofertas-header {
    margin: 30px 0 20px;
    text-align: center;
}

.grid-ofertas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Card Individual */
.card-oferta {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.card-oferta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.card-oferta__thumb {
    position: relative;
    padding: 12px;
    background: #fafafa;
    text-align: center;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-oferta__thumb img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/* Badges */
.badge-desconto {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #00a650;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 1;
}

/* Informações */
.card-oferta__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-oferta__title {
    font-size: 0.95rem;
    line-height: 1.35;
    margin: 0 0 10px;
    height: 2.7em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-oferta__title a {
    color: #333;
    text-decoration: none;
}

.card-oferta__prices {
    margin-top: auto;
    margin-bottom: 12px;
}

.preco-antigo {
    display: block;
    font-size: 0.8rem;
    color: #999;
    text-decoration: line-through;
}

.preco-atual {
    font-size: 1.25rem;
    font-weight: 700;
    color: #222;
}

/* Botões */
.btn-afiliado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffe600; /* Amarelo característico Mercado Livre */
    color: #2d3277;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
    text-align: center;
}

.btn-afiliado:hover {
    background: #edd600;
    color: #2d3277;
}

/* Layout Single */
.single-oferta-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 0;
}

@media (min-width: 768px) {
    .single-oferta-wrap {
        grid-template-columns: 450px 1fr;
    }
}

.single-oferta__pricing {
    margin: 20px 0;
}

.single-oferta__pricing .preco-destaque {
    font-size: 2rem;
    font-weight: 700;
    color: #00a650;
    display: block;
}

.btn-afiliado--lg {
    font-size: 1.1rem;
    padding: 14px 24px;
}