/* ============================================================
   Beyond Breakup — Ebook Landing Page Custom CSS
   Design System: Dark + Gold gradient, Inter font
   All classes prefixed bb- to avoid theme conflicts
   ============================================================ */

/* -----------------------------------------------
   1. CSS Custom Properties
   ----------------------------------------------- */
:root {
  --bb-gold: #f59e0b;
  --bb-gold-hover: #fbbf24;
  --bb-gold-gradient: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
  --bb-dark-bg: linear-gradient(165deg, #0a0a0a 0%, #1a1a2e 100%);
  --bb-bg-light: #fafafa;
  --bb-bg-white: #ffffff;
  --bb-bg-gray: #f3f4f6;
  --bb-text-dark: #111111;
  --bb-text-light: #f5f5f5;
  --bb-text-muted: #6b7280;
  --bb-text-dimmed: #9ca3af;
  --bb-border: #e5e7eb;
  --bb-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
  --bb-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
  --bb-radius-card: 12px;
  --bb-radius-large: 16px;
  --bb-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --bb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* -----------------------------------------------
   2. Gold Gradient Text
   ----------------------------------------------- */
.bb-gold-text {
  background: var(--bb-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* -----------------------------------------------
   3. Hero Section
   ----------------------------------------------- */
.bb-hero-section {
  position: relative;
  overflow: hidden;
}

.bb-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(245, 158, 11, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.bb-hero-section > .e-con-inner,
.bb-hero-section > .elementor-element {
  position: relative;
  z-index: 1;
}

/* Hero Badge */
.bb-gold-badge {
  display: inline-block;
  padding: 8px 24px;
  font-family: var(--bb-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--bb-text-light);
  border: 1.5px solid transparent;
  border-radius: 100px;
  background:
    linear-gradient(#0a0a0a, #0a0a0a) padding-box,
    var(--bb-gold-gradient) border-box;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

/* Hero Stats */
.bb-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bb-stat-number {
  font-family: var(--bb-font);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}

.bb-stat-label {
  font-family: var(--bb-font);
  font-size: 14px;
  font-weight: 400;
  color: rgba(245, 245, 245, 0.6);
  margin-top: 2px;
}

/* Floating Book Cover */
.bb-hero-book-float {
  animation: bb-float 6s ease-in-out infinite;
}

.bb-hero-book-float .bb-hero-book-image img,
.bb-hero-book-float img {
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
  border-radius: var(--bb-radius-large);
}

@keyframes bb-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
}

/* Scroll Indicator */
.bb-scroll-indicator {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.bb-scroll-mouse {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(245, 245, 245, 0.3);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.bb-scroll-wheel {
  width: 4px;
  height: 10px;
  background: rgba(245, 245, 245, 0.5);
  border-radius: 2px;
  animation: bb-scroll-anim 2s ease-in-out infinite;
}

@keyframes bb-scroll-anim {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(12px);
  }
}


/* -----------------------------------------------
   4. Section Labels
   ----------------------------------------------- */
.bb-section-label {
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}


/* -----------------------------------------------
   5. Pain Point Cards
   ----------------------------------------------- */
.bb-pain-card {
  box-shadow: var(--bb-shadow-card);
  border: 1px solid var(--bb-border);
  transition: all var(--bb-transition);
  cursor: default;
}

.bb-pain-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bb-shadow-card-hover);
}

.bb-pain-card .elementor-icon {
  color: var(--bb-gold) !important;
}

.bb-pain-card .elementor-icon-box-icon {
  margin-right: 16px;
}


/* -----------------------------------------------
   6. Benefit Cards (Gold Left Border)
   ----------------------------------------------- */
.bb-benefit-card {
  box-shadow: var(--bb-shadow-card);
  border: 1px solid var(--bb-border);
  border-left: 4px solid var(--bb-gold);
  transition: all var(--bb-transition);
  cursor: default;
}

.bb-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bb-shadow-card-hover);
}


/* -----------------------------------------------
   7. Chapter List
   ----------------------------------------------- */
.bb-chapter-list {
  width: 100%;
}

.bb-chapter-item {
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: var(--bb-bg-white);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-card);
  margin-bottom: 12px;
  transition: all var(--bb-transition);
  cursor: default;
}

.bb-chapter-item:hover {
  transform: translateX(6px);
  box-shadow: var(--bb-shadow-card);
  border-color: rgba(245, 158, 11, 0.3);
}

.bb-chapter-item:last-child {
  margin-bottom: 0;
}

.bb-chapter-number {
  font-family: var(--bb-font);
  font-size: 24px;
  font-weight: 800;
  min-width: 52px;
  line-height: 1;
}

.bb-chapter-title {
  font-family: var(--bb-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--bb-text-dark);
  line-height: 1.4;
}


/* -----------------------------------------------
   8. Price Display
   ----------------------------------------------- */
.bb-price-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
}

.bb-price-old {
  font-family: var(--bb-font);
  font-size: 22px;
  font-weight: 400;
  color: rgba(245, 245, 245, 0.4);
  text-decoration: line-through;
}

.bb-price-new {
  font-family: var(--bb-font);
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
}


/* -----------------------------------------------
   9. CTA Button Enhancements
   ----------------------------------------------- */
.bb-cta-button .elementor-button {
  background: var(--bb-gold) !important;
  color: var(--bb-text-dark) !important;
  border: none !important;
  font-weight: 700 !important;
  transition: all var(--bb-transition);
  box-shadow: 0 4px 24px rgba(245, 158, 11, 0.3);
}

.bb-cta-button .elementor-button:hover {
  background: var(--bb-gold-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.45);
}

.bb-cta-button .elementor-button:active {
  transform: translateY(0);
}


/* -----------------------------------------------
   10. Trust Note
   ----------------------------------------------- */
.bb-trust-note p {
  font-size: 13px !important;
  letter-spacing: 0.3px;
}


/* -----------------------------------------------
   11. CTA Section Overlay
   ----------------------------------------------- */
.bb-cta-section {
  position: relative;
  overflow: hidden;
}

.bb-cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(245, 158, 11, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.bb-cta-section > .e-con-inner,
.bb-cta-section > .elementor-element {
  position: relative;
  z-index: 1;
}


/* -----------------------------------------------
   12. Fade-In Animations (Scroll-triggered via IntersectionObserver)
   ----------------------------------------------- */
.bb-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bb-fade-in.bb-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays for cards in a row */
.bb-pain-card:nth-child(1) { transition-delay: 0s; }
.bb-pain-card:nth-child(2) { transition-delay: 0.1s; }
.bb-pain-card:nth-child(3) { transition-delay: 0.2s; }
.bb-pain-card:nth-child(4) { transition-delay: 0.3s; }

.bb-benefit-card:nth-child(1) { transition-delay: 0s; }
.bb-benefit-card:nth-child(2) { transition-delay: 0.15s; }
.bb-benefit-card:nth-child(3) { transition-delay: 0.3s; }

.bb-chapter-item:nth-child(1) { transition-delay: 0s; }
.bb-chapter-item:nth-child(2) { transition-delay: 0.06s; }
.bb-chapter-item:nth-child(3) { transition-delay: 0.12s; }
.bb-chapter-item:nth-child(4) { transition-delay: 0.18s; }
.bb-chapter-item:nth-child(5) { transition-delay: 0.24s; }
.bb-chapter-item:nth-child(6) { transition-delay: 0.30s; }
.bb-chapter-item:nth-child(7) { transition-delay: 0.36s; }
.bb-chapter-item:nth-child(8) { transition-delay: 0.42s; }


/* -----------------------------------------------
   13. Responsive — Tablet (max-width: 1024px)
   ----------------------------------------------- */
@media (max-width: 1024px) {
  .bb-stat-item {
    align-items: center;
    text-align: center;
  }

  .bb-hero-stats {
    justify-content: center;
  }

  .bb-hero-book-float {
    animation: none;
  }

  .bb-price-new {
    font-size: 40px;
  }
}


/* -----------------------------------------------
   14. Responsive — Mobile (max-width: 767px)
   ----------------------------------------------- */
@media (max-width: 767px) {
  .bb-gold-badge {
    font-size: 11px;
    padding: 6px 18px;
    letter-spacing: 1.5px;
  }

  .bb-stat-number {
    font-size: 24px;
  }

  .bb-stat-label {
    font-size: 12px;
  }

  .bb-hero-book-float {
    animation: none;
    margin-top: 2rem;
  }

  .bb-scroll-indicator {
    display: none;
  }

  .bb-chapter-item {
    padding: 1rem 1.25rem;
  }

  .bb-chapter-number {
    font-size: 20px;
    min-width: 40px;
  }

  .bb-chapter-title {
    font-size: 15px;
  }

  .bb-price-wrap {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .bb-price-old {
    font-size: 18px;
  }

  .bb-price-new {
    font-size: 36px;
  }

  .bb-pain-card:hover,
  .bb-benefit-card:hover,
  .bb-chapter-item:hover {
    transform: none;
  }
}


/* -----------------------------------------------
   15. Scroll-based Fade-In Observer (inline script — add via Elementor HTML widget or functions.php)
   Alternatively, paste this in the page's Custom JS:
   ----------------------------------------------- */
/*
<script>
(function() {
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('bb-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });

  document.querySelectorAll('.bb-fade-in').forEach(function(el) {
    observer.observe(el);
  });
})();
</script>
*/


/* -----------------------------------------------
   16. Elementor-specific Overrides
   ----------------------------------------------- */

/* Ensure containers within dark sections inherit properly */
.bb-hero-section .elementor-heading-title,
.bb-cta-section .elementor-heading-title {
  color: var(--bb-text-light);
}

/* Remove default Elementor widget margins where needed */
.bb-hero-section .elementor-widget,
.bb-cta-section .elementor-widget {
  margin-bottom: 0;
}

/* Fix gold text inside headings (span usage) */
.elementor-heading-title .bb-gold-text {
  background: var(--bb-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Ensure icon-box icons get gold color */
.bb-pain-card .elementor-icon i {
  color: var(--bb-gold) !important;
  font-size: 24px;
}

/* Fix text-editor widget spacing in cards */
.bb-benefit-card .elementor-widget-text-editor,
.bb-pain-card .elementor-widget-icon-box {
  margin-bottom: 0;
}

/* Author section book image styling */
.bb-author-section img {
  border-radius: var(--bb-radius-large);
  box-shadow: var(--bb-shadow-card);
}


/* -----------------------------------------------
   17. Print Styles (hide non-essential)
   ----------------------------------------------- */
@media print {
  .bb-scroll-indicator,
  .bb-gold-badge,
  .bb-cta-button {
    display: none;
  }

  .bb-hero-section,
  .bb-cta-section {
    background: #1a1a2e !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .bb-fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
}