/* ═══════════════════════════════════════════════════
   MOBILE FIXES v3 - MOMENTUM90
   Naprawione: odstępy, listy, liczby, tytuły
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   FOOTER - UJEDNOLICONE STYLE (desktop + mobile)
   ═══════════════════════════════════════════════════ */
.footer,
.legal-footer {
  padding: 40px 20px !important;
  background: #f9f9f9 !important;
  text-align: center !important;
}

.footer .footer-links,
.legal-footer .footer-links {
  margin-bottom: 12px !important;
  font-size: 14px !important;
}

.footer .footer-links a,
.legal-footer .footer-links a {
  color: #666 !important;
  text-decoration: none !important;
  margin: 0 8px !important;
}

.footer .footer-links a:hover,
.legal-footer .footer-links a:hover {
  text-decoration: underline !important;
}

.footer .footer-links span,
.legal-footer .footer-links span {
  color: #ccc !important;
}

.footer > p,
.footer .copyright,
.legal-footer > p,
.legal-footer .copyright {
  font-size: 14px !important;
  color: #666 !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
}

/* Pierwszy element w footerze (linki) - bez margin-top */
.footer > .footer-links:first-child,
.legal-footer > .footer-links:first-child {
  margin-top: 0 !important;
}

@media (max-width: 768px) {

  /* BLOKUJ HORIZONTAL SCROLL */
  html, body {
    overflow-x: hidden !important;
  }

  /* ─────────────────────────────────────────────────
     PRICING - Mobile optimizations
     ───────────────────────────────────────────────── */
  .pricing-buttons {
    gap: 8px !important;
  }

  .pricing-cta {
    font-size: 14px !important;
    padding: 14px 16px !important;
  }

  .pricing-cta-raty {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }

  .turbo-discount-badge {
    font-size: 12px !important;
    padding: 8px 12px !important;
    line-height: 1.4 !important;
  }

  .turbo-discount-badge .old-price {
    display: inline !important;
  }

  /* Comparison table mobile - 4 columns */
  .comparison-row.price .comparison-cell {
    font-size: 12px !important;
  }

  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ─────────────────────────────────────────────────
     STICKY HEADER - TYLKO dla .sticky-header class
     NIE dla innych elementów!
     ───────────────────────────────────────────────── */
  .sticky-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 60px !important;
    padding: 8px 12px !important;
    z-index: 1000 !important;
  }

  /* BODY PADDING - tylko jeśli jest sticky header */
  body.has-sticky-header {
    padding-top: 65px !important;
  }

  /* ─────────────────────────────────────────────────
     POWIADOMIENIA - lepsze pozycjonowanie
     ───────────────────────────────────────────────── */
  .notification-popup,
  .social-proof-popup {
    position: fixed !important;
    bottom: 90px !important;
    left: 10px !important;
    right: auto !important;
    width: auto !important;
    max-width: 280px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    z-index: 997 !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
  }

  /* ═══════════════════════════════════════════════════
     1. ODSTĘPY MIĘDZY SEKCJAMI - ZNACZNIE ZWIĘKSZONE
     ═══════════════════════════════════════════════════ */
  section, .section {
    padding: 48px 16px !important;
    margin-bottom: 0 !important;
  }

  /* Sekcje z tłem - większe odstępy */
  .hero-section {
    padding: 50px 16px 60px !important;
  }

  .stats-compact,
  .stats-section {
    padding: 40px 16px !important;
  }

  .urgency-section,
  .story-section,
  .workshop-section,
  .testimonials-section,
  .for-section,
  .faq-section,
  .signup-section {
    padding: 50px 16px !important;
  }

  .final-cta-section {
    padding: 50px 16px !important;
  }

  /* Boksy wewnątrz sekcji */
  .urgency-box,
  .story-box,
  .workshop-box,
  .signup-box {
    padding: 36px 24px !important;
    margin-top: 0 !important;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ═══════════════════════════════════════════════════
     2. LISTY W KARTACH - UJEDNOLICONE: 15px, 1.5
     ═══════════════════════════════════════════════════ */

  /* Reset wszystkich list */
  ul, ol,
  .hero-bullets,
  .workshop-list,
  .checklist {
    font-family: inherit !important;
  }

  /* Wszystkie elementy list - ujednolicone */
  li,
  ul li,
  ol li,
  .hero-bullets li,
  .workshop-item,
  .workshop-item span,
  .checklist-item,
  .for-card p,
  .card li,
  .box li,
  [class*="card"] li,
  [class*="box"] li,
  section li,
  .section li {
    font-size: 15px !important;
    line-height: 1.5 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    margin-bottom: 14px !important;
  }

  /* Checkmarki w listach */
  .hero-bullets li::before,
  .workshop-item .check {
    font-size: 1.2rem !important;
  }

  /* Strong/bold w listach */
  li strong,
  li b,
  .workshop-item strong,
  .hero-bullets li strong,
  .card li strong,
  .card li b,
  [class*="card"] li strong,
  [class*="card"] li b,
  ul li strong,
  ul li b {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
  }

  /* ═══════════════════════════════════════════════════
     3. LICZBY - NIE ŁAMAĆ (white-space: nowrap)
     ═══════════════════════════════════════════════════ */

  /* Klasa pomocnicza dla liczb */
  .nowrap,
  .no-break {
    white-space: nowrap !important;
  }

  /* Liczby z spacjami - nie łam */
  span.number,
  .price,
  .amount,
  .stat-number,
  .counter-number,
  .logo-stat-number,
  [class*="number"],
  [class*="price"],
  [class*="amount"],
  [class*="stat"] .number {
    white-space: nowrap !important;
  }

  /* ═══════════════════════════════════════════════════
     4. TYTUŁY (h1, h2) - WIĘKSZY MARGIN-TOP
     ═══════════════════════════════════════════════════ */
  h1, .h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin-top: 36px !important;
    margin-bottom: 18px !important;
  }

  h2, .h2,
  .section-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-top: 40px !important;
    margin-bottom: 16px !important;
  }

  h3, .h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-top: 32px !important;
    margin-bottom: 14px !important;
  }

  /* Tytuły w środku sekcji - większy odstęp od góry */
  section h2:not(:first-child),
  .section h2:not(:first-child),
  .container h2:not(:first-child) {
    margin-top: 44px !important;
  }

  /* Pierwszy nagłówek w sekcji/boksie - bez margin-top */
  section > h1:first-child,
  section > h2:first-child,
  section > h3:first-child,
  .section > h1:first-child,
  .section > h2:first-child,
  .card > h2:first-child,
  .card > h3:first-child,
  .box > h2:first-child,
  .box > h3:first-child,
  [class*="card"] > h2:first-child,
  [class*="card"] > h3:first-child,
  [class*="box"] > h2:first-child,
  [class*="box"] > h3:first-child,
  .workshop-box > h2:first-child,
  .story-box > h3:first-child,
  .urgency-box > h3:first-child {
    margin-top: 0 !important;
  }

  /* ─────────────────────────────────────────────────
     CZCIONKI - poprawione proporcje
     ───────────────────────────────────────────────── */

  /* Podtytuł / lead - większy niż zwykły tekst */
  .subtitle,
  .lead,
  .intro,
  .hero-subtitle,
  .section-subtitle,
  h1 + p,
  h2 + p,
  [class*="subtitle"],
  [class*="lead"],
  [class*="intro"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }

  p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }
  
  /* ─────────────────────────────────────────────────
     TIMELINE - napraw overflow
     ───────────────────────────────────────────────── */
  .timeline,
  .roadmap,
  [class*="timeline"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .timeline-content {
    max-width: calc(100vw - 100px) !important;
    word-wrap: break-word !important;
  }
  
  .timeline h3,
  .timeline-title {
    font-size: 16px !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  .timeline-badge,
  .day-badge {
    width: 50px !important;
    height: 50px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }
  
  /* ─────────────────────────────────────────────────
     TABELE - scroll zamiast ukrywania
     ───────────────────────────────────────────────── */
  .table-wrapper,
  .pricing-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  table {
    min-width: 100% !important;
  }
  
  table td,
  table th {
    padding: 10px 8px !important;
    font-size: 13px !important;
  }
  
  /* ─────────────────────────────────────────────────
     STICKY CTA BUTTON NA DOLE
     ───────────────────────────────────────────────── */
  .sticky-cta,
  .sticky-button {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 16px !important;
    z-index: 998 !important;
    background: white !important;
  }
  
  /* Miejsce na sticky button */
  footer {
    padding-bottom: 90px !important;
  }
  
  /* ─────────────────────────────────────────────────
     KARTY I BOKSY
     ───────────────────────────────────────────────── */
  .card,
  .box,
  [class*="card"] {
    padding: 18px 16px !important;
    margin-bottom: 16px !important;
  }
  
  /* ─────────────────────────────────────────────────
     FORMULARZE - zapobiegaj zoom iOS
     ───────────────────────────────────────────────── */
  input,
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px !important;
  }
  
  button,
  .btn,
  a.button {
    font-size: 15px !important;
    min-height: 48px !important;
    padding: 14px 24px !important;
  }
  
  /* ─────────────────────────────────────────────────
     ALERT/WARNING BOXES - nie psuj layoutu
     ───────────────────────────────────────────────── */
  .alert,
  .warning,
  .notice,
  [class*="alert"],
  [class*="warning"] {
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  
  /* ─────────────────────────────────────────────────
     COLLAPSE/EXPAND BUTTON
     ───────────────────────────────────────────────── */
  .collapse-btn,
  .expand-btn,
  [class*="collapse"],
  [class*="expand"] {
    z-index: 50 !important;
  }

  /* ═══════════════════════════════════════════════════
     5. PRICING CARDS — KOMPAKTOWE NA MOBILE
     ═══════════════════════════════════════════════════ */

  .pricing-section {
    padding: 30px 12px !important;
  }

  .pricing-section .section-title {
    margin-bottom: 8px !important;
  }

  .pricing-section .section-subtitle {
    margin-bottom: 20px !important;
    font-size: 14px !important;
  }

  .pricing-grid {
    gap: 16px !important;
  }

  .pricing-card {
    padding: 18px 16px !important;
    margin-bottom: 0 !important;
  }

  .pricing-card.featured {
    transform: none !important;
  }

  .pricing-badge {
    top: -12px !important;
    padding: 5px 14px !important;
    font-size: 0.7rem !important;
  }

  .turbo-discount-badge {
    font-size: 11px !important;
    padding: 6px 10px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  .pricing-name {
    font-size: 1.1rem !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
  }

  .pricing-old-price {
    font-size: 0.95rem !important;
    margin-bottom: 2px !important;
  }

  .pricing-price {
    font-size: 1.8rem !important;
    margin-bottom: 2px !important;
  }

  .pricing-save {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
  }

  .pricing-installment {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
  }

  .pricing-features {
    margin-bottom: 14px !important;
  }

  .pricing-features li {
    padding: 5px 0 5px 24px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-bottom: 0 !important;
  }

  .pricing-features li::before {
    font-size: 0.9rem !important;
  }

  .pricing-buttons {
    gap: 6px !important;
  }

  .pricing-cta {
    padding: 12px 14px !important;
    font-size: 13px !important;
    min-height: 42px !important;
  }

  .pricing-cta-raty {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
  }

  .pricing-note {
    margin-top: 8px !important;
    font-size: 0.75rem !important;
  }

  /* ═══════════════════════════════════════════════════
     6. TABELA PORÓWNAWCZA — HORIZONTAL SCROLL NA MOBILE
     ═══════════════════════════════════════════════════ */

  .comparison-section {
    padding: 30px 8px !important;
  }

  .comparison-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding-bottom: 4px !important;
  }

  .comparison-table {
    min-width: 340px !important;
    font-size: 12px !important;
  }

  .comparison-header {
    grid-template-columns: 1.5fr 0.6fr 0.6fr 0.6fr !important;
  }

  .comparison-header-cell {
    padding: 10px 4px !important;
    font-size: 10px !important;
  }

  .comparison-header-cell:first-child {
    padding-left: 8px !important;
    font-size: 10px !important;
  }

  .comparison-row {
    grid-template-columns: 1.5fr 0.6fr 0.6fr 0.6fr !important;
  }

  .comparison-cell {
    padding: 8px 4px !important;
    font-size: 11px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
  }

  .comparison-cell.feature {
    font-size: 11px !important;
    line-height: 1.3 !important;
    padding-left: 8px !important;
    padding-right: 2px !important;
  }

  .check-icon {
    font-size: 0.95rem !important;
  }

  .cross-icon {
    font-size: 0.85rem !important;
  }

  .comparison-row.price .comparison-cell {
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .comparison-badge-container {
    gap: 2px !important;
    margin-bottom: -10px !important;
    padding-right: 4px !important;
  }

  .comparison-badge-popularne,
  .comparison-badge-vip {
    font-size: 7px !important;
    padding: 2px 6px !important;
  }

  /* ═══════════════════════════════════════════════════
     7. AI BOKSY — PROSTOKĄTY (ikona + tekst obok siebie)
     ═══════════════════════════════════════════════════ */

  .ai-section {
    padding: 30px 16px !important;
  }

  .ai-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .ai-card {
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    margin: 0 0 12px 0 !important;
    max-height: none !important;
    gap: 2px 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    clear: both !important;
    position: relative !important;
  }

  .ai-card:last-child {
    margin-bottom: 0 !important;
  }

  .ai-card:hover {
    transform: none !important;
  }

  .ai-card-icon {
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    font-size: 1.6rem !important;
    margin-bottom: 0 !important;
    width: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    line-height: 1 !important;
    align-self: center !important;
  }

  .ai-card-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
    color: var(--color-text-primary) !important;
  }

  .ai-card-comparison {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .ai-time-old {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .ai-arrow {
    font-size: 12px !important;
  }

  .ai-time-new {
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    line-height: 1.3 !important;
  }

  /* ═══════════════════════════════════════════════════
     8. FAQ - UJEDNOLICONE Z RESZTĄ STRONY
     ═══════════════════════════════════════════════════ */

  /* Sekcja FAQ */
  .faq-section {
    padding: 50px 16px !important;
  }

  /* Kontener FAQ */
  .faq-container {
    padding: 0 !important;
  }

  /* Pojedynczy element FAQ */
  .faq-item {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
  }

  /* Pytanie FAQ */
  .faq-question {
    padding: 16px 18px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  }

  /* Ikona FAQ (+) */
  .faq-icon {
    font-size: 1.3rem !important;
    flex-shrink: 0 !important;
    margin-left: 12px !important;
  }

  /* Odpowiedź FAQ */
  .faq-answer {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .faq-answer-content {
    padding: 0 18px 16px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #666 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  }

  .faq-answer-content p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }

  .faq-answer-content p:last-child {
    margin-bottom: 0 !important;
  }

  /* Tytuł sekcji FAQ */
  .faq-section h2,
  .faq-section .section-title {
    font-size: 22px !important;
    margin-bottom: 24px !important;
    text-align: center !important;
  }
}

/* ═══════════════════════════════════════════════════
   MAŁE TELEFONY (max-width: 375px)
   ═══════════════════════════════════════════════════ */

@media (max-width: 375px) {
  h1, .h1 {
    font-size: 24px !important;
  }

  h2, .h2 {
    font-size: 20px !important;
  }

  h3, .h3 {
    font-size: 16px !important;
  }

  .subtitle,
  .lead,
  h1 + p,
  h2 + p {
    font-size: 15px !important;
  }

  p, li {
    font-size: 14px !important;
  }

  section, .section {
    padding: 20px 14px !important;
  }

  /* FAQ na małych telefonach */
  .faq-question {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  .faq-answer-content {
    padding: 0 16px 14px !important;
    font-size: 14px !important;
  }

  .faq-answer-content p {
    font-size: 14px !important;
  }

  /* Pricing na małych telefonach */
  .pricing-features li {
    font-size: 12px !important;
    padding: 4px 0 4px 22px !important;
  }

  .pricing-price {
    font-size: 1.6rem !important;
  }

  .pricing-cta {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  .pricing-cta-raty {
    font-size: 11px !important;
  }

  /* Comparison na małych telefonach */
  .comparison-cell.feature {
    font-size: 10px !important;
  }

  .comparison-cell {
    font-size: 10px !important;
    padding: 6px 3px !important;
  }

  /* AI cards na małych telefonach */
  .ai-card-title {
    font-size: 12px !important;
  }

  .ai-time-old,
  .ai-time-new {
    font-size: 12px !important;
  }
}