/**
 * Sistema de Anúncios WP - Estilos Principais
 * Versão: 1.0.0
 */

/* Variáveis CSS */
:root {
    --sawp-primary: #4F46E5;
    --sawp-secondary: #10B981;
    --sawp-accent: #F59E0B;
    --sawp-dark: #1F2937;
    --sawp-light: #F9FAFB;
    --sawp-gray: #6B7280;
    --sawp-border: #E5E7EB;
    --sawp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sawp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sawp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sawp-radius: 8px;
    --sawp-radius-lg: 12px;
    --sawp-transition: all 0.3s ease;
}

/* Reset e estilos base */
.sawp-anuncios-container {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.5;
}

.sawp-anuncios-container *,
.sawp-anuncios-container *::before,
.sawp-anuncios-container *::after {
    box-sizing: inherit;
}

/* Badge Patrocinado */
.sawp-badge-patrocinado {
    position: absolute;
    padding: 4px 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: var(--sawp-shadow-sm);
    pointer-events: none;
}

.sawp-badge-superior-direito {
    top: 12px;
    right: 12px;
}

.sawp-badge-superior-esquerdo {
    top: 12px;
    left: 12px;
}

.sawp-badge-inferior-direito {
    bottom: 12px;
    right: 12px;
}

.sawp-badge-inferior-esquerdo {
    bottom: 12px;
    left: 12px;
}

/* Badge Plataforma */
.sawp-plataforma-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.sawp-plataforma-amazon {
    background: linear-gradient(135deg, #FF9900 0%, #FF8800 100%);
    color: white;
    border: 1px solid #FF8800;
}

/* Hotmart - Cor baseada na marca (laranja/vermelho) */
.sawp-plataforma-hotmart {
    background: linear-gradient(135deg, #FF6B35 0%, #FF4500 100%);
    color: white;
    border: 1px solid #FF4500;
}

/* Kiwify - Cor baseada na marca (roxo) */
.sawp-plataforma-kiwify {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: white;
    border: 1px solid #7C3AED;
}

/* Kwai - Cor baseada na marca (laranja forte) */
.sawp-plataforma-kwai {
    background: linear-gradient(135deg, #FF5500 0%, #FF2E00 100%);
    color: white;
    border: 1px solid #FF2E00;
}

.sawp-plataforma-magazineluiza {
    background: linear-gradient(135deg, #FF6B00 0%, #FF5500 100%);
    color: white;
    border: 1px solid #FF5500;
}

.sawp-plataforma-mercadolivre {
    background: linear-gradient(135deg, #FFE600 0%, #FFD900 100%);
    color: #2D3277;
    border: 1px solid #FFD900;
}

/* Mercado Pago - Cor baseada na marca (azul característico) */
.sawp-plataforma-mercadopago {
    background: linear-gradient(135deg, #00B2EA 0%, #0098CD 100%);
    color: white;
    border: 1px solid #0098CD;
}

/* Telegram - Cor oficial (azul claro) */
.sawp-plataforma-telegram {
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: white;
    border: 1px solid #229ED9;
}

/* Temu - Cor baseada na marca (rosa/vermelho vibrante) */
.sawp-plataforma-temu {
    background: linear-gradient(135deg, #FF2E7E 0%, #D5006D 100%);
    color: white;
    border: 1px solid #D5006D;
}

/* TikTok - Cor oficial (preto com detalhe azul) */
.sawp-plataforma-tiktok {
    background: linear-gradient(135deg, #000000 0%, #2D2D2D 100%);
    color: #69C9D0;
    border: 1px solid #69C9D0;
}

/* Shein - Cor baseada na marca (rosa vibrante/vermelho) */
.sawp-plataforma-shein {
    background: linear-gradient(135deg, #FF2A6C 0%, #D9005B 100%);
    color: white;
    border: 1px solid #D9005B;
}

/* Shopee - Cor baseada na marca (laranja característico) */
.sawp-plataforma-shopee {
    background: linear-gradient(135deg, #FF531D 0%, #EE4D30 100%);
    color: white;
    border: 1px solid #EE4D30;
}

/* Shopify - Cor baseada na marca (verde esmeralda característico) */
.sawp-plataforma-shopify {
    background: linear-gradient(135deg, #96BF48 0%, #7FA543 100%);
    color: white;
    border: 1px solid #7FA543;
}

/* WhatsApp - Cor oficial (verde característico) */
.sawp-plataforma-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #1DA851 100%);
    color: white;
    border: 1px solid #1DA851;
}

.sawp-plataforma-outros {
    background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
    color: white;
    border: 1px solid #4B5563;
}

/* Grid Layout (suspenso) */
.sawp-grid {
    display: grid;
    gap: var(--sawp-gap, 20px);
    grid-template-columns: repeat(var(--sawp-columns, 3), 1fr);
}

.sawp-anuncio-item {
    position: relative;
    background: white;
    border-radius: var(--sawp-borda-raio, 8px);
    border: 1px solid var(--sawp-borda-cor, #E5E7EB);
    overflow: hidden;
    transition: var(--sawp-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sawp-com-sombra {
    box-shadow: var(--sawp-shadow);
}

.sawp-com-sombra:hover {
    box-shadow: var(--sawp-shadow-lg);
}

/* Efeitos hover */
.sawp-hover-elevar {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sawp-hover-elevar:hover {
    transform: translateY(-4px);
}

.sawp-hover-zoom .sawp-anuncio-imagem {
    transition: transform 0.5s ease;
}

.sawp-hover-zoom:hover .sawp-anuncio-imagem {
    transform: scale(1.05);
}

.sawp-hover-fade:hover {
    opacity: 0.9;
}

.sawp-hover-shadow:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Link do anúncio */
.sawp-anuncio-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.sawp-anuncio-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Imagem */
.sawp-anuncio-imagem {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    background: #F9FAFB;
}

.sawp-anuncio-imagem img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--sawp-transition);
}

/* Conteúdo */
.sawp-anuncio-conteudo {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.sawp-anuncio-titulo {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sawp-dark);
}

.sawp-anuncio-descricao {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--sawp-gray);
    line-height: 1.5;
    flex-grow: 1;
}

.sawp-anuncio-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

/* Tags */
.sawp-tag {
    display: inline-block;
    padding: 3px 8px;
    background: #EEF2FF;
    color: #4F46E5;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    margin: 2px;
}

/* Layout Conteúdo */
.sawp-conteudo-layout .sawp-anuncio-conteudo-item {
    display: flex;
    background: white;
    border-radius: var(--sawp-borda-raio, 8px);
    border: 1px solid var(--sawp-borda-cor, #E5E7EB);
    overflow: hidden;
    margin-bottom: 20px;
    transition: var(--sawp-transition);
}

.sawp-anuncio-link-conteudo {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.sawp-conteudo-imagem {
    flex: 0 0 200px;
    position: relative;
    overflow: hidden;
}

.sawp-conteudo-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sawp-anuncio-link-conteudo:hover .sawp-conteudo-imagem img {
    transform: scale(1.05);
}

.sawp-conteudo-texto {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.sawp-conteudo-texto h4 {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--sawp-dark);
}

.sawp-conteudo-texto p {
    margin: 0 0 16px 0;
    color: var(--sawp-gray);
    line-height: 1.6;
    flex-grow: 1;
}

.sawp-conteudo-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.sawp-leia-mais {
    color: var(--sawp-primary);
    font-weight: 600;
    font-size: 14px;
}

.sawp-leia-mais:hover {
    text-decoration: underline;
}

/* Layout Galeria */
.sawp-galeria {
    display: grid;
    gap: var(--sawp-gap, 20px);
    grid-template-columns: repeat(var(--sawp-galeria-colunas, 3), 1fr);
}

.sawp-galeria-item {
    position: relative;
    border-radius: var(--sawp-borda-raio, 8px);
    overflow: hidden;
    background: white;
    transition: var(--sawp-transition);
}

.sawp-galeria-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.sawp-galeria-imagem-container {
    position: relative;
    padding-top: 75%; /* 4:3 Aspect Ratio */
    overflow: hidden;
}

.sawp-galeria-imagem-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sawp-galeria-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sawp-galeria-item:hover .sawp-galeria-overlay {
    opacity: 1;
}

.sawp-galeria-item:hover .sawp-galeria-imagem-container img {
    transform: scale(1.1);
}

.sawp-galeria-saiba-mais {
    color: white;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    backdrop-filter: blur(5px);
}

.sawp-galeria-info {
    padding: 16px;
}

.sawp-galeria-info h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sawp-dark);
}

.sawp-galeria-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Carregamento lazy */
.sawp-anuncio-imagem img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sawp-anuncio-imagem img[loading="lazy"].loaded {
    opacity: 1;
}

/* Responsividade */
@media (max-width: 1024px) {
    .sawp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sawp-galeria {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sawp-conteudo-layout .sawp-anuncio-conteudo-item {
        flex-direction: column;
    }
    
    .sawp-conteudo-imagem {
        flex: 0 0 200px;
    }
}

@media (max-width: 768px) {
    .sawp-grid {
        grid-template-columns: 1fr;
    }
    
    .sawp-galeria {
        grid-template-columns: 1fr;
    }
    
    .sawp-conteudo-layout .sawp-anuncio-conteudo-item {
        flex-direction: column;
    }
    
    .sawp-conteudo-imagem {
        flex: 0 0 180px;
    }
    
    .sawp-conteudo-texto {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .sawp-badge-patrocinado {
        font-size: 8px;
        padding: 3px 6px;
    }
    
    .sawp-anuncio-conteudo {
        padding: 16px;
    }
    
    .sawp-anuncio-titulo {
        font-size: 15px;
    }
}

/* Animações */
@keyframes sawpFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sawp-anuncio-item {
    animation: sawpFadeIn 0.5s ease-out;
}

/* Acessibilidade */
.sawp-anuncio-link:focus,
.sawp-carrossel-prev:focus,
.sawp-carrossel-next:focus,
.sawp-carrossel-indicador:focus {
    outline: 2px solid var(--sawp-primary);
    outline-offset: 2px;
}

/* Modo escuro (se suportado) */
@media (prefers-color-scheme: dark) {
    .sawp-anuncio-item,
    .sawp-conteudo-layout .sawp-anuncio-conteudo-item,
    .sawp-galeria-item {
        background: #1F2937;
        border-color: #374151;
        color: #E5E7EB;
    }
    
    .sawp-anuncio-titulo,
    .sawp-conteudo-texto h4,
    .sawp-galeria-info h4 {
        color: #F9FAFB;
    }
    
    .sawp-anuncio-descricao,
    .sawp-conteudo-texto p {
        color: #D1D5DB;
    }
    
    .sawp-anuncio-imagem,
    .sawp-conteudo-imagem,
    .sawp-galeria-imagem-container {
        background: #111827;
    }

    /* Espaçamento após blocos de anúncios */
    .sawp-anuncios-container {
        margin-bottom: 40px !important;
        display: block;
        clear: both;
    }

    /* Espaçamento para placeholder também */
    .sawp-placeholder-container,
    .sawp-carrossel-placeholder,
    .sawp-fade-placeholder,
    .sawp-galeria-placeholder,
    .sawp-conteudo-placeholder,
    .sawp-placeholder-item,
    .sawp-no-results {
        margin-bottom: 40px !important;
    }

    /* Clear fix */
    .sawp-clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
}