/* ==================== ESTILOS PARA ANUNCIOS ====================
   No intrusivos, responsivos, integrados al diseño GTA/SAMP */

.ad-display {
    margin: 15px 0;
    animation: adFadeIn 0.5s ease-in;
}

.ad-container {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
    border: 1px solid rgba(255, 107, 0, 0.2);
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 107, 0, 0.05);
}

.ad-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
}

.ad-wrapper iframe,
.ad-wrapper img {
    border-radius: 2px;
}

/* ==================== POSICIONAMIENTO POR FORMATO ====================*/

/* Banner Horizontal (728x90) - Header */
#ad_728_90 {
    width: 100%;
    margin: 10px 0;
}

#ad_728_90 .ad-container {
    display: flex;
    justify-content: center;
    min-height: 110px;
}

/* Sidebar Vertical (300x600) - Derecha */
#ad_300_600 {
    width: 100%;
    margin: 15px 0;
}

#ad_300_600 .ad-container {
    min-height: 620px;
}

/* Contenido Mediano (300x250) */
#ad_300_250 {
    width: 100%;
    margin: 15px 0;
}

#ad_300_250 .ad-container {
    min-height: 270px;
}

/* ==================== RESPONSIVE DESIGN ====================*/

@media (max-width: 1024px) {
    .ad-display {
        margin: 12px 0;
    }
    
    #ad_300_600 {
        margin: 12px 0;
    }
    
    #ad_300_600 .ad-container {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .ad-container {
        padding: 6px;
    }
    
    /* En móvil, reduce tamaños */
    #ad_728_90 .ad-container {
        min-height: 90px;
    }
    
    #ad_300_600 {
        display: none; /* Oculta sidebar en móvil */
    }
    
    #ad_300_250 .ad-container {
        min-height: 250px;
    }
}

@media (max-width: 480px) {
    .ad-display {
        margin: 8px 0;
    }
    
    .ad-container {
        padding: 4px;
        border: 1px solid rgba(255, 107, 0, 0.1);
    }
}

/* ==================== ANIMACIONES ====================*/

@keyframes adFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efecto hover sutil */
.ad-container:hover {
    border-color: rgba(255, 107, 0, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(255, 107, 0, 0.08);
}

/* ==================== MODO OSCURO INTEGRADO ====================*/

body.dark-mode .ad-container {
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%);
    border-color: rgba(255, 107, 0, 0.15);
}

/* ==================== INTEGRACIÓN CON DISEÑO EXISTENTE ====================*/

/* Para que los anuncios se vean nativos en tu panel */
.ad-container {
    font-family: 'Outfit', sans-serif;
    color: white;
}

.ad-wrapper iframe {
    max-width: 100%;
    height: auto;
}

/* Asegurar que los anuncios no rompan el layout */
.ad-display {
    word-wrap: break-word;
    overflow: hidden;
}

/* Minimizar cambios de layout */
.ad-container {
    contain: layout style paint;
}

/* ==================== PRINT STYLES ====================*/

@media print {
    .ad-display,
    .ad-container {
        display: none !important;
    }
}