/**
 * Monetization Components CSS
 * Estilos para widgets de conversión y anuncios alternativos
 * Integrado con el design system existente
 */

/* ===== AD COMPONENTS ===== */

/* PropellerAds Cards */
.propeller-card,
.affiliate-section,
.services-ad {
  transition: transform var(--transition-fast) ease,
              box-shadow var(--transition-fast) ease;
}

.propeller-card:hover,
.affiliate-section:hover,
.services-ad:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Adsterra Footer Banner */
.adsterra-footer-banner {
  border-top: 1px solid var(--color-outline-variant);
  padding-top: var(--space-4);
  margin-top: var(--space-8);
  background: linear-gradient(135deg, var(--color-surface-variant) 0%, var(--color-surface-container) 100%);
}

/* Push Notifications */
.push-subscription {
  border-left: 4px solid var(--color-primary-500);
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
}

/* Professional Services */
.services-ad {
  border: 2px solid var(--color-primary-500);
  background: linear-gradient(135deg, var(--color-surface) 0%, #f8f9ff 100%);
}

/* ===== CONVERSION WIDGETS ===== */

/* Conversion Popup */
.conversion-widget {
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 1040;
  animation: slideInUp var(--animation-duration-medium) ease;
}

.conversion-widget .card {
  max-width: 350px;
}

/* Upgrade Alerts */
.upgrade-alert {
  border-left: 4px solid var(--color-warning-500);
}

/* Feature Comparison */
.feature-comparison {
  border: 2px solid var(--color-primary-500);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-primary-50) 100%);
}

/* Social Proof */
.social-proof {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-variant) 100%);
}

/* Urgency Widget */
.urgency-widget {
  border-left: 4px solid var(--color-danger-500);
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

/* Retargeting Widget */
.retargeting-widget {
  bottom: var(--space-5);
  left: var(--space-5);
  z-index: 1030;
  animation: bounceIn var(--animation-duration-slow) ease;
}

.retargeting-widget .card {
  max-width: 320px;
}

/* ===== ANIMATIONS ===== */

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(var(--space-5));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ===== MONETIZATION OPTIMIZER STYLES ===== */

.monetization-popup.show {
  transform: translateX(0) !important;
}

.sticky-promotion {
  animation: slideDown var(--animation-duration-fast) ease;
}

.infeed-ad {
  animation: fadeInUp var(--animation-duration-medium) ease;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

@media (max-width: 768px) {
  .adsterra-footer-banner .adsense-placeholder {
    max-width: 320px !important;
    min-height: 50px !important;
  }

  .affiliate-section .row > div {
    margin-bottom: var(--space-4);
  }

  .services-ad .row > div {
    text-align: center;
  }

  .conversion-widget,
  .retargeting-widget {
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
  }

  .conversion-widget .card,
  .retargeting-widget .card {
    max-width: 100%;
  }
}

/* ===== MONETIZATION DASHBOARD SPECIFIC ===== */

.metric-card {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
  color: var(--color-on-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast) ease;
}

.metric-card:hover {
  transform: translateY(-5px);
}

.metric-value {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.metric-label {
  opacity: 0.9;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.revenue-chart {
  background: var(--color-surface);
  border-radius: var(--border-radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.strategy-card {
  border-left: 4px solid var(--color-success-500);
  background: var(--color-surface-variant);
}

.alert-revenue {
  background: linear-gradient(45deg, #ffd700 0%, #ff8c00 100%);
  border: none;
  color: var(--color-on-surface);
}

/* ===== UTILITY CLASSES FOR MONETIZATION ===== */

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
}

.bg-gradient-success {
  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-700) 100%);
}

.bg-gradient-warning {
  background: linear-gradient(135deg, var(--color-warning-500) 0%, var(--color-warning-700) 100%);
}

.bg-gradient-info {
  background: linear-gradient(135deg, var(--color-info-500) 0%, var(--color-info-700) 100%);
}

/* Variantes adicionales para métricas */
.metric-card-success {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-card-conversion {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-card-projection {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}