/**
 * AdSense Styles - CLS-Safe Layout Reservations
 * Phase 4: Performance Optimization
 */

/* ============================================
   AD SLOT BASE STYLES (CLS Prevention)
   ============================================ */

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  border: 1px dashed #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
}

.ad-slot::before {
  content: 'Advertisement';
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ad-slot[data-loaded="true"]::before {
  display: none;
}

/* ============================================
   SLOT 1: Above Tool (Responsive Banner)
   Max 30% viewport height, tool stays visible
   ============================================ */

.ad-slot-header {
  width: 100%;
  min-height: 90px;
  max-height: 30vh;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .ad-slot-header {
    min-height: 120px;
  }
}

@media (min-width: 1024px) {
  .ad-slot-header {
    min-height: 150px;
  }
}

/* ============================================
   SLOT 2: Below Tool (High CTR Zone)
   ============================================ */

.ad-slot-below-tool {
  width: 100%;
  min-height: 250px;
  margin-top: 30px;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .ad-slot-below-tool {
    min-height: 280px;
  }
}

/* ============================================
   SLOT 3: In-Content (Between FAQ & Related)
   ============================================ */

.ad-slot-in-content {
  width: 100%;
  min-height: 250px;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* ============================================
   SLOT 4: Mobile Sticky Anchor
   Fixed bottom, safe-area aware
   ============================================ */

.ad-slot-anchor {
  display: none;
}

@media (max-width: 767px) {
  .ad-slot-anchor {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    min-height: 60px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    z-index: 999;
    /* Safe area for mobile browsers (notch, home indicator) */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Add bottom padding to body to prevent content overlap */
  body.has-anchor-ad {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
  }
}

/* ============================================
   TRUST SIGNAL STYLES
   ============================================ */

.trust-signal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  margin: 20px 0;
  font-size: 14px;
  color: #166534;
  text-align: center;
}

.trust-signal .icon {
  font-size: 18px;
}

/* ============================================
   RESPONSIVE AD ADJUSTMENTS
   ============================================ */

@media (max-width: 480px) {
  .ad-slot-header {
    min-height: 60px;
  }
  
  .ad-slot-below-tool,
  .ad-slot-in-content {
    min-height: 200px;
  }
}

/* ============================================
   PRINT STYLES (Hide Ads)
   ============================================ */

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