/* Wspólny wygląd przycisków CTA (decyzja Jana 26.09.2026).
   Gradient i hover jak w przycisku „Dalej” kreatora (.dw-next w wizard.css).
   Ładowany po wszystkich arkuszach strony, dlatego wygrywa z flow.css i stylami głównej.
   Spark i Cally mają własne kolory produktu i tego pliku nie ładują. */
:root {
  --cta-grad: linear-gradient(180deg, #22C55E, #16A34A);
  --cta-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 28px -16px rgba(22,163,74,.75);
}

body .action-pill-primary,
body .section-bar-cta,
.btn-glow-hero,
.btn-glow,
.mo-btn,
.dg-cta-btn,
body footer.ft .btn-glow,
.mobile-cta button {
  background: var(--cta-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--cta-shadow) !important;
  transition: filter .18s, transform .18s !important;
}

body .action-pill-primary:hover,
body .section-bar-cta:hover,
.btn-glow-hero:hover,
.btn-glow:hover,
.mo-btn:hover,
.dg-cta-btn:hover,
body footer.ft .btn-glow:hover,
.mobile-cta button:hover {
  background: var(--cta-grad) !important;
  filter: brightness(1.07);
  transform: translateY(-1px);
}

/* Ikony w przyciskach: półprzezroczyste białe tło zamiast ciemnego */
.btn-glow-hero-icon,
.btn-glow-icon,
body footer.ft .btn-glow .btn-glow-icon,
.mo-btn > span,
.dg-cta-arw {
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
}
.btn-glow-hero-icon svg path,
.mo-btn > span svg { stroke: #fff; }

/* Kropka w mobilnym CTA głównej: biała na zielonym */
.mobile-cta button .mc-dot { background: #fff !important; box-shadow: none !important; }

.btn-glow-hero:focus-visible,
body .action-pill-primary:focus-visible,
.btn-glow:focus-visible { outline: 3px solid #4ADE80; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  body .action-pill-primary:hover, .btn-glow-hero:hover, .btn-glow:hover, .mo-btn:hover, .dg-cta-btn:hover { transform: none; }
}

/* flow.css na telefonie wybiela przyciski w menu, stopce i przyklejonym CTA regułą z !important
   (selektor :is(.nav-bar, .mobile-cta, ...) button[onclick*="openModal"]). Ten selektor jest mocniejszy. */
body :is(.nav-bar, .mobile-cta, footer, .cta-action) .action-pill-primary[onclick*="openModal"] {
  background: var(--cta-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--cta-shadow) !important;
}
/* Przycisk w menu ma klasę .hidden na telefonie, a .action-pill ją nadpisywała i menu łamało się na dwie linie */
@media (max-width: 639px) {
  body .nav-right .action-pill.hidden { display: none !important; }
  .mobile-cta-text span { white-space: nowrap; }
}