/**
Theme Name: Astra Child
Author:
Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar, .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-below-header-bar, .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-above-header-bar {
	padding-left: 16px;
    padding-right: 16px;
}

h1 strong, h1 b,
h2 strong, h2 b,
h3 strong, h3 b,
h4 strong, h4 b,
h5 strong, h5 b,
h6 strong, h6 b
{
	color: #FC7800;
}

.hero-subtitle {
	display: inline-block;
}

@media(max-width: 767px){
	#hero {
		background: linear-gradient(180deg, #FAFAFA 0%, #F5EDE2 50%, #E2D3C1 85%, #E2D3C1 100%);
	}
}

.text-science {
	min-width: 100px;
}

#section-counter .elementor-counter-number-wrapper {
	align-items: end;
}

#section-counter .elementor-counter-number-suffix {
	color: #FC7800;
	font-size: 45px;
	line-height: 55px;
	letter-spacing: -2%;	
}

#section-counter .elementor-counter-title {
	text-align: center;
}

@media(max-width: 1024px){
	#section-counter .elementor-counter-number-suffix {
		font-size: 30px;
		line-height: 35px;
		letter-spacing: -3%;
	}
	
	#section-counter .elementor-counter-title {
		text-align: center;	
	}
}

.e-n-accordion-item[open] .e-n-accordion-item-title {
	border-bottom: 0 !important;
}

#custom-acc .e-n-accordion-item[open] .e-n-accordion-item-title {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

#custom-acc .e-n-accordion-item {
	box-shadow: 0px 28px 17px 0px #3C3C3C08;
	border-radius: 30px;
	border: 1px solid #CBB29880;
}

#custom-acc .e-n-accordion-item:hover {
	border: 1px solid #FC7800;
}

#custom-acc .e-n-accordion-item-title {
	position: relative;
}

#custom-acc .e-n-accordion-item-title[data-accordion-index="2"],
#custom-acc .e-n-accordion-item-title[data-accordion-index="3"],
#custom-acc .e-n-accordion-item-title[data-accordion-index="4"],
#custom-acc .e-n-accordion-item-title[data-accordion-index="5"] {
	padding-top: 64px;
}

#custom-acc .e-n-accordion-item-title-text::before {
	position: absolute;
    top: 22px;
    left: 30px;
    counter-increment: accordion;
    content: counter(accordion, decimal-leading-zero);
    margin-right: 20px;
	font-family: Sora;
	font-weight: 500;
	font-size: 20px;
	line-height: 27px;
	letter-spacing: -1%;
	color: #FC7800;
}

#custom-acc .e-n-accordion {
    counter-reset: accordion;
}

/* Styl etykiety */
#custom-acc .e-n-accordion-item-title-text::after {
	position: absolute;
    top: 22px;
    left: 90px;
	display: block;
    width: fit-content;
    padding: 4px 11px;
	background-color: #FC78001A;
    border: 1px solid #FC7800;
    border-radius: 20px;
	font-weight: 700;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0;
	color: #FC7800;
}

#custom-acc .e-n-accordion-item-title[data-accordion-index="2"] .e-n-accordion-item-title-text::after {
    content: "Dane";
}

#custom-acc .e-n-accordion-item-title[data-accordion-index="3"] .e-n-accordion-item-title-text::after {
    content: "Diagnoza";
}

#custom-acc .e-n-accordion-item-title[data-accordion-index="4"] .e-n-accordion-item-title-text::after {
    content: "Decyzja";
}

#custom-acc .e-n-accordion-item-title[data-accordion-index="5"] .e-n-accordion-item-title-text::after {
    content: "Domknięcie";
}

#custom-acc span.e-n-accordion-item-title-icon {
    position: absolute !important;
    top: 22px;
    right: 30px;
}

#custom-acc p:has(+ ul),
#custom-acc ul {
	margin: 0;
}

.elementor-widget-n-accordion .e-n-accordion-item .e-n-accordion-item-title-icon span>svg {
	fill: transparent !important;
}

#price-business {
  border: 2px solid transparent;
  border-radius: 30px;
  background-image: 
    linear-gradient(#171717, #171717),
    linear-gradient(180deg, #FC7800 0%, transparent 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

#highlight {
	position: absolute;
	top: -15px;
}

@media(max-width: 767px){
	.line-timeline {
		position: absolute;
		left: 48%;
		transform: rotate(90deg) translateY(50%);
		height: 45px;
        width: 45px;
	}
	
	.line-timeline img {
		width: 45px;
	}
}

.pulse-icon .elementor-icon-list-icon {
    animation: pulsowanie 1.4s infinite;
}

@keyframes pulsowanie {
    /* 100ms pauzy na pełnym rozmiarze */
    0%, 7.14% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    /* 600ms zmniejszania (ease-out), potem 100ms pauzy */
    50%, 57.14% {
        transform: scale(0.5);
        animation-timing-function: ease-out;
    }
    /* 600ms powiększania (ease-out) */
    100% {
        transform: scale(1);
    }
}

#clients-logos .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

.price-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.price-box:hover {
  transform: translateY(-10px) !important;
}

.ast-primary-header-bar {
	backdrop-filter: blur(50px);
    background: #F5EDE280;
}

.ast-header-button-1 .ast-custom-button {
	text-align: center;
	box-shadow: 0px 16px 17px 0px rgba(252, 119.99999999999991, 0, 0.2);
}

.ast-footer-copyright, .ast-footer-html-1 a {
	font-family: 'Sora', sans-serif, Arial;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
	color: #3C3C3C;
}

#footer_menu a {
	text-decoration: none !important;
}

#footer_menu .elementor-icon-list-items {
	margin: 0;
}

#footer_menu .elementor-icon-list-item {
	margin-top: 20px;
	margin-bottom: 20px;
}

@media(min-width: 767px) {
	#footer_menu .elementor-icon-list-item:last-child {
		margin-right: 0;
	}
}

@media(max-width: 1280px) and (min-width: 922px)  {
	.ast-builder-menu-1 .menu-item > .menu-link {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	header .custom-logo-link img {
		max-width: 200px;
		width: 200px;
	}
	
	.ast-header-button-1[data-section*="section-hb-button-"] .ast-builder-button-wrap .ast-custom-button {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media(max-width: 921px) {
	.ast-mobile-header-content {
		border-bottom: 1px solid #CBB298;
	}
	
	.ast-button-wrap .menu-toggle.main-header-menu-toggle {
    	padding: 0;
	}
	
	.ast-header-break-point .ast-primary-header-bar {
		border: none;
	}
	
	.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {
		border-color: #CBB298;
		backdrop-filter: blur(50px);
		background: #F5EDE280;
	}
	
	.site-below-footer-wrap[data-section="section-below-footer-builder"].ast-footer-row-tablet-stack .site-footer-section {
        margin-bottom: 0;
    }
}

@media(max-width: 400px) {
	.ast-logo-title-inline .site-logo-img {
		padding-right: 0;
	}
	
	.ast-header-button-1[data-section*="section-hb-button-"] .ast-builder-button-wrap .ast-custom-button {
		padding: 16px;
	}
}

/* ==========================================================================
   Kalkulator potencjału konwersji
   Wymiary, kolory i typografia wg Figmy: Landing-Szkolenie → "Sekcja: Kalkulator"
   ========================================================================== */

.nnk {
  /* kolory (zmienne z Figmy: kolory/…) */
  --nnk-czarny: #000;
  --nnk-bialy: #fafafa;
  --nnk-bez: #f5ede2;
  --nnk-pomarancz: #fc7800;
  --nnk-pomarancz-25: rgba(252, 120, 0, .25);
  --nnk-ciemny-szary: #3c3c3c;
  --nnk-szary-25: rgba(60, 60, 60, .25);
  --nnk-szary-50: rgba(60, 60, 60, .5);
  --nnk-ciemny-bez-50: rgba(203, 178, 152, .5);

  /* fonty */
  --nnk-sora: "Sora", sans-serif;
  --nnk-inter: "Inter", sans-serif;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 80px;
  padding: 100px 16px;
  background: var(--nnk-czarny);
  color: var(--nnk-bialy);
  -webkit-font-smoothing: antialiased;
}

.nnk *,
.nnk *::before,
.nnk *::after { box-sizing: border-box; }

.nnk p,
.nnk h2 { margin: 0; }

/* przycinanie tekstu do wysokości wersalików, jak w Figmie (text-box-trim) */
.nnk p,
.nnk h2,
.nnk__label,
.nnk__value,
.nnk__revenue-label,
.nnk__revenue-value,
.nnk__status span,
.nnk__status strong,
.nnk__cta span,
.nnk__meter-axis > span,
.nnk__position-you { text-box: trim-both cap alphabetic; }

/* ---------- kolumny ---------- */

.nnk__col {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: stretch;
  min-width: 330px;
  max-width: 580px;
}

.nnk__col--form { gap: 80px; }
.nnk__col--result { gap: 20px; }

/* poświaty (Figma: "poświata", elipsa 477×470, #FC7800 10%, blur 150) */
.nnk__col--form::after,
.nnk__col--result::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 777px;
  height: 770px;
  background: url("/wp-content/uploads/2026/09/poswiata.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.nnk__col--form::after { right: -287px; transform: translateY(-50%); }
.nnk__col--result::before { left: calc(50% - 212.5px); transform: translate(-50%, -50%); }

/* ---------- nagłówek ---------- */

.nnk__heading {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.nnk__eyebrow {
  color: var(--nnk-pomarancz);
  font: 800 15px/20px var(--nnk-sora);
}

.nnk .nnk__title {
  color: var(--nnk-bialy);
  font: 800 45px/55px var(--nnk-sora);
  letter-spacing: -.9px;
  text-transform: none;
}

.nnk__lead {
  color: var(--nnk-bialy);
  font: 500 17px/25px var(--nnk-inter);
}

/* ---------- dane ---------- */

.nnk__data {
  display: flex;
  flex-direction: column;
  gap: 47px;
}

.nnk__field {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.nnk__field--select { gap: 14px; }

.nnk__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nnk__label {
  display: block;
  margin: 0;
  color: var(--nnk-ciemny-bez-50);
  font: 700 13px/20px var(--nnk-sora);
}

.nnk__value {
  color: var(--nnk-bialy);
  font: 500 17px/25px var(--nnk-inter);
  text-align: right;
  white-space: nowrap;
}

.nnk__value--accent { color: var(--nnk-pomarancz); }

/* dropdown */
.nnk__select { position: relative; }

.nnk__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 14px;
  height: 8px;
  transform: translateY(-50%);
  background: url("/wp-content/uploads/2026/09/strzalka.svg") center / contain no-repeat;
  pointer-events: none;
}

.nnk .nnk__select select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 54px 0 20px;
  border: 1px solid var(--nnk-szary-50);
  border-radius: 10px;
  background: var(--nnk-szary-25);
  box-shadow: none;
  color: #fff;
  font: 500 17px/25px var(--nnk-inter);
  cursor: pointer;
}

.nnk .nnk__select select:focus-visible {
  outline: 2px solid var(--nnk-pomarancz);
  outline-offset: 2px;
}

.nnk__select option { background: #111; color: #fff; }

/* suwaki: tor 10px, wypełnienie do środka uchwytu, uchwyt 20px.
   Selektory z wysoką specyficznością i !important, bo motywy oraz Elementor Kit
   stylują globalnie input[type=range] i przywracają natywny (niebieski) wygląd. */
.nnk input[type="range"].nnk__range {
  --nnk-p: .5;
  --nnk-fill: calc(10px + (100% - 20px) * var(--nnk-p));
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 20px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  accent-color: var(--nnk-pomarancz);
  cursor: pointer;
}

.nnk input[type="range"].nnk__range::-webkit-slider-runnable-track {
  -webkit-appearance: none !important;
  height: 10px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background:
    linear-gradient(var(--nnk-pomarancz), var(--nnk-pomarancz)) 0 0 / var(--nnk-fill) 100% no-repeat,
    var(--nnk-szary-50) !important;
  box-shadow: none !important;
}

.nnk input[type="range"].nnk__range::-moz-range-track {
  height: 10px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: var(--nnk-szary-50) !important;
  box-shadow: none !important;
}

.nnk input[type="range"].nnk__range::-moz-range-progress {
  height: 10px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: var(--nnk-pomarancz) !important;
}

.nnk input[type="range"].nnk__range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  margin-top: -5px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--nnk-pomarancz) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
  transition: transform .15s ease;
}

.nnk input[type="range"].nnk__range::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--nnk-pomarancz) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
}

.nnk input[type="range"].nnk__range:hover::-webkit-slider-thumb { transform: scale(1.1); }
.nnk input[type="range"].nnk__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--nnk-pomarancz-25), 0 0 10px rgba(0, 0, 0, .5) !important; }
.nnk input[type="range"].nnk__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--nnk-pomarancz-25), 0 0 10px rgba(0, 0, 0, .5) !important; }

/* obecny przychód */
.nnk__revenue {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 30px;
  border: 1px solid var(--nnk-szary-50);
  border-radius: 10px;
  background: var(--nnk-szary-25);
}

.nnk__revenue-label {
  flex: 1 0 0;
  color: var(--nnk-ciemny-bez-50);
  font: 700 13px/20px var(--nnk-sora);
}

.nnk__revenue-value {
  color: var(--nnk-bialy);
  font: 520 20px/27px var(--nnk-sora);
  letter-spacing: -.2px;
  white-space: nowrap;
}

.nnk__hint {
  color: var(--nnk-ciemny-bez-50);
  font: 400 13px/20px var(--nnk-sora);
}

/* ---------- karta wyniku ---------- */

.nnk__card {
  display: flex;
  flex-direction: column;
  gap: 43px;
  padding: 40px;
  border: 2px solid var(--nnk-pomarancz-25);
  border-radius: 20px;
  background: linear-gradient(140.6deg, rgba(252, 120, 0, .15) 0%, rgba(252, 120, 0, 0) 100%);
}

.nnk__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 500px;
  padding: 20px 30px;
  border: 1px solid var(--nnk-szary-50);
  border-radius: 10px;
  background: var(--nnk-szary-25);
  font-size: 13px;
  line-height: 20px;
}

.nnk__status-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.nnk__status-label { color: var(--nnk-ciemny-bez-50); font: 400 13px/20px var(--nnk-sora); }
.nnk__status-main { color: var(--nnk-bialy); font: 700 13px/20px var(--nnk-sora); }
.nnk__status-note { color: var(--nnk-ciemny-bez-50); font: 700 13px/20px var(--nnk-sora); }
.nnk__status-note:empty { display: none; }

.nnk__block {
  display: flex;
  flex-direction: column;
}

.nnk__block--potential { gap: 23px; }
.nnk__block--year { gap: 18px; }
.nnk__block--payback { gap: 8px; }
.nnk__block--cta { gap: 31px; }

.nnk__result-label {
  color: var(--nnk-pomarancz);
  font: 500 17px/25px var(--nnk-inter);
}

.nnk__small-label {
  color: var(--nnk-ciemny-bez-50);
  font: 400 13px/20px var(--nnk-sora);
}

/* kwoty: łamanie tylko między "od –" a "do" */
.nnk__nums {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.nnk__nums > span { white-space: nowrap; text-box: trim-both cap alphabetic; }

.nnk__nums--xl {
  gap: 10px;
  color: #fff;
  font: 800 45px/55px var(--nnk-sora);
  letter-spacing: -.9px;
}

.nnk__nums--md {
  gap: 5px;
  color: var(--nnk-pomarancz);
  font: 700 24px/27px var(--nnk-sora);
  letter-spacing: -0.01em;
}

.nnk .nnk__divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--nnk-pomarancz-25);
}

.nnk__payback {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

.nnk__result-sub {
  color: var(--nnk-bialy);
  font: 500 17px/25px var(--nnk-inter);
}

.nnk__result-sub:empty { display: none; }

.nnk__high-note {
  color: var(--nnk-bialy);
  font: 500 17px/25px var(--nnk-inter);
}

/* CTA (Figma: Przycisk / Primary) */
.nnk .nnk__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 40px;
  border-radius: 30px;
  background: var(--nnk-pomarancz);
  color: var(--nnk-bez);
  font: 800 15px/20px var(--nnk-sora);
  text-align: center;
  text-decoration: none !important;
  filter:
    drop-shadow(0 3px 3.5px rgba(252, 120, 0, .2))
    drop-shadow(0 12px 6px rgba(252, 120, 0, .2))
    drop-shadow(0 28px 8.5px rgba(252, 120, 0, .1))
    drop-shadow(0 49px 10px rgba(252, 120, 0, .02))
    drop-shadow(0 77px 10.5px rgba(252, 120, 0, .01));
  transition: transform .15s ease, background-color .15s ease;
}

.nnk .nnk__cta:hover,
.nnk .nnk__cta:focus-visible {
  background: #ff8a1f;
  color: var(--nnk-bez);
  transform: translateY(-1px);
}

.nnk .nnk__cta:focus-visible { outline: 2px solid var(--nnk-bialy); outline-offset: 3px; }

.nnk__disclaimer {
  color: var(--nnk-ciemny-bez-50);
  font: 400 13px/20px var(--nnk-sora);
}

/* stany A / B / C */
.nnk[data-nnk-stan="A"] .nnk__status { display: none; }
.nnk:not([data-nnk-stan="C"]) .nnk__high-note { display: none; }

/* ---------- pozycja względem branży ---------- */

.nnk__position {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 20px;
  border: 1px solid var(--nnk-szary-50);
  border-radius: 20px;
  background: var(--nnk-szary-25);
}

.nnk__position-you {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.nnk__position-you strong {
  color: var(--nnk-bialy);
  font: 500 17px/25px var(--nnk-inter);
}

.nnk__meter {
  --nnk-pasmo-od: 30%;
  --nnk-pasmo-do: 60%;
  --nnk-znacznik: 40%;
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--nnk-szary-50);
}

.nnk__meter-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--nnk-pasmo-od);
  width: calc(var(--nnk-pasmo-do) - var(--nnk-pasmo-od));
  min-width: 10px;
  border-radius: 5px;
  background: var(--nnk-ciemny-bez-50);
  transition: left .25s ease, width .25s ease;
}

.nnk__meter-marker {
  position: absolute;
  top: 50%;
  left: var(--nnk-znacznik);
  width: 20px;
  height: 20px;
  border: 4px solid var(--nnk-pomarancz-25);
  border-radius: 10px;
  background: var(--nnk-pomarancz) padding-box;
  transform: translate(-50%, -50%);
  transition: left .15s ease;
}

.nnk__meter-axis {
  color: var(--nnk-ciemny-bez-50);
  font: 400 13px/20px var(--nnk-sora);
}

.nnk__meter-axis > span { flex: 1 0 0; }
.nnk__meter-axis > .nnk__meter-band-label { flex: 0 0 auto; white-space: nowrap; text-align: center; }
.nnk__meter-max { text-align: right; }
.nnk__meter-axis strong { font-weight: 700; }

.nnk__source {
  color: var(--nnk-ciemny-bez-50);
  font: 400 11px/16px var(--nnk-sora);
  text-align: center;
}

/* ---------- mobile ---------- */

@media (max-width: 1024px) {
  .nnk__col { min-width: 0; flex-basis: 100%; max-width: 100%;}

  .nnk__eyebrow { font-size: 14px; }

  .nnk .nnk__title {
    font-size: 30px;
    line-height: 35px;
  }

  .nnk__lead {
    font-size: 15px;
    line-height: 23px;
    letter-spacing: -.15px;
  }

  .nnk__card {
    background: linear-gradient(119.4deg, rgba(252, 120, 0, .15) 0%, rgba(252, 120, 0, 0) 100%);
  }

  .nnk__status-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .nnk .nnk__cta { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .nnk *, .nnk *::before, .nnk *::after { transition: none !important; }
}

/* ==========================================================================
   Formularz zapytania — Contact Form 7 w popupie Popup Maker
   Wg Figmy: Landing-Szkolenie → "Formularz kontaktowy" (Krok 1–3, Podziękowanie)
   Wklej do style.css motywu potomnego.
   ========================================================================== */

.nnf {
  --nnf-bialy: #fafafa;
  --nnf-czarny: #000;
  --nnf-szary: #3c3c3c;
  --nnf-szary-50: rgba(60, 60, 60, .5);
  --nnf-szary-25: rgba(60, 60, 60, .25);
  --nnf-bez-25: rgba(203, 178, 152, .25);
  --nnf-bez: #f5ede2;
  --nnf-pomarancz: #fc7800;
  --nnf-pomarancz-25: rgba(252, 120, 0, .25);
  --nnf-blad: #d4584e;
  --nnf-sora: "Sora", sans-serif;
  --nnf-inter: "Inter", sans-serif;
  --nnf-cien-kafelek: 0 3px 7px rgba(60, 60, 60, .05), 0 12px 12px rgba(60, 60, 60, .03), 0 28px 17px rgba(60, 60, 60, .03);
  --nnf-postep: .3333;

  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
  width: 540px;
  max-width: 100%;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid var(--nnf-pomarancz-25);
  border-radius: 20px;
  background: var(--nnf-bialy);
  box-shadow:
    0 3px 7px rgba(60, 60, 60, .2),
    0 12px 12px rgba(60, 60, 60, .1),
    0 28px 17px rgba(60, 60, 60, .05),
    0 49px 20px rgba(60, 60, 60, .02),
    0 77px 21px rgba(60, 60, 60, .01);
  color: var(--nnf-szary);
  font: 400 13px/20px var(--nnf-sora);
  text-align: left;
}

.nnf *,
.nnf *::before,
.nnf *::after { box-sizing: border-box; }

.nnf p { margin: 0; }
.nnf [hidden] { display: none !important; }

/* ---------- nagłówek, postęp ---------- */

.nnf__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nnf__steps { color: var(--nnf-szary-50); }
.nnf__steps strong { margin-right: 6px; color: var(--nnf-czarny); font-weight: 700; }

.nnf .nnf__close {
  flex: 0 0 auto;
  width: 14px !important;
  height: 14px !important;
  min-height: 0 !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M2.046 2.054l9.9 9.9M11.945 2.046l-9.9 9.9' stroke='%233C3C3C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
  box-shadow: none !important;
  cursor: pointer;
}

.nnf__progress {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--nnf-szary-25);
}

.nnf__progress-bar {
  display: block;
  width: calc(var(--nnf-postep) * 100%);
  height: 100%;
  border-radius: 3px;
  background: var(--nnf-pomarancz);
  transition: width .3s ease;
}

.nnf .nnf__line {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--nnf-pomarancz-25);
}

.nnf[data-nnf-krok="dziekujemy"] .nnf__steps,
.nnf[data-nnf-krok="dziekujemy"] .nnf__progress,
.nnf[data-nnf-krok="dziekujemy"] .nnf__line { display: none; }

/* ---------- kroki ---------- */

.nnf__step {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.nnf__group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0 20px;
}

.nnf__group--last { padding-bottom: 40px; }

.nnf .nnf__label {
  display: block;
  margin: 0;
  color: var(--nnf-szary-50);
  font: 700 13px/20px var(--nnf-sora);
}

.nnf__optional { font-weight: 400; }

/* kafelki wyboru (CF7 radio z use_label_element) */
.nnf .wpcf7-form-control-wrap { display: block; }

.nnf .nnf__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.nnf .nnf__tiles--gap10 { gap: 10px; }

.nnf .nnf__tiles--pakiet {
  flex-direction: column;
  gap: 10px;
}

.nnf .nnf__tiles .wpcf7-list-item {
  display: flex;
  flex: 1 0 0;
  min-width: 100px;
  margin: 0;
}

.nnf .nnf__tiles label {
  position: relative;
  display: flex;
  flex: 1;
  margin: 0;
  cursor: pointer;
}

.nnf .nnf__tiles input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.nnf .nnf__tiles .wpcf7-list-item-label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  border: 1px solid var(--nnf-bez-25);
  border-radius: 14px;
  background: var(--nnf-bialy);
  box-shadow: var(--nnf-cien-kafelek);
  color: var(--nnf-szary);
  font: 700 13px/20px var(--nnf-sora);
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.nnf .nnf__tiles label:hover .wpcf7-list-item-label {
  border-color: var(--nnf-pomarancz-25);
  box-shadow: inset 0 0 0 1px var(--nnf-pomarancz-25), var(--nnf-cien-kafelek);
}

.nnf .nnf__tiles input:checked + .wpcf7-list-item-label {
  border-color: var(--nnf-pomarancz);
  box-shadow: inset 0 0 0 1px var(--nnf-pomarancz), var(--nnf-cien-kafelek);
}

.nnf .nnf__tiles input:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--nnf-pomarancz);
  outline-offset: 2px;
}

/* pakiety: nazwa | liczba osób | cena */
.nnf .nnf__tiles--pakiet .wpcf7-list-item-label { justify-content: flex-start; text-align: left; }
.nnf__pkg-name { flex: 1 0 0; font-weight: 700; }
.nnf__pkg-size { min-width: 40px; color: var(--nnf-szary-50); font-weight: 400; text-align: center; white-space: nowrap; }
.nnf__pkg-size:empty { display: none; }
.nnf__pkg-price { font-weight: 400; text-align: right; white-space: nowrap; }

/* dropdown branży */
.nnf__select { position: relative; }

.nnf__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 14px;
  height: 8px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' fill='none'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%23FC7800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.nnf .nnf__select select {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block;
  width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 44px 0 20px !important;
  border: 1px solid var(--nnf-szary-25) !important;
  border-radius: 14px !important;
  background: var(--nnf-bialy) !important;
  box-shadow: none !important;
  color: var(--nnf-szary) !important;
  font: 400 13px/20px var(--nnf-sora) !important;
  cursor: pointer;
}

.nnf .nnf__select select:has(option:first-child:checked) { color: var(--nnf-szary-50) !important; }
.nnf .nnf__select select:focus { border-color: var(--nnf-pomarancz) !important; outline: none; }

/* ---------- pola kontaktowe ---------- */

.nnf__fields {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.nnf__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nnf .nnf__field input {
  display: block;
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 1px solid var(--nnf-szary-25) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 0 5px rgba(252, 120, 0, .1) !important;
  color: var(--nnf-szary) !important;
  font: 400 13px/20px var(--nnf-sora) !important;
  outline: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.nnf .nnf__field input::placeholder { color: var(--nnf-szary-25); opacity: 1; }

.nnf .nnf__field input:focus {
  border-color: var(--nnf-pomarancz) !important;
  box-shadow: inset 0 0 0 1px var(--nnf-pomarancz), 0 0 5px rgba(252, 120, 0, .1) !important;
}

.nnf .nnf__field input.wpcf7-not-valid { border-color: var(--nnf-blad) !important; }

.nnf .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  color: var(--nnf-blad);
  font: 400 13px/20px var(--nnf-sora);
}

/* zgoda (CF7 acceptance) */
.nnf__consent {
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding: 20px 0;
}

.nnf .nnf__consent .wpcf7-list-item { display: block; margin: 0; }

.nnf .nnf__consent label {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0;
  cursor: pointer;
}

.nnf .nnf__consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.nnf .nnf__consent .wpcf7-list-item-label {
  display: flex;
  gap: 18px;
  color: var(--nnf-szary-50);
  font: 400 13px/20px var(--nnf-sora);
}

.nnf .nnf__consent .wpcf7-list-item-label::before {
  content: "";
  flex: 0 0 14px;
  height: 14px;
  margin-top: 3px;
  border: 1px solid var(--nnf-szary-25);
  border-radius: 3px;
  background: var(--nnf-bialy);
}

.nnf .nnf__consent input:checked + .wpcf7-list-item-label::before {
  background: var(--nnf-bialy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' rx='2' fill='%23FC7800'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
}

.nnf .nnf__consent input:focus-visible + .wpcf7-list-item-label::before { outline: 2px solid var(--nnf-pomarancz); outline-offset: 2px; }

.nnf .nnf__consent .wpcf7-not-valid-tip { margin-top: 19px; }

/* ---------- przyciski ---------- */

.nnf__buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nnf .nnf__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px 40px !important;
  border: 0 !important;
  border-radius: 30px !important;
  font: 800 15px/20px var(--nnf-sora) !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}

.nnf .nnf__btn--primary {
  flex: 1 0 0;
  background: var(--nnf-pomarancz) !important;
  color: var(--nnf-bez) !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 3px 3.5px rgba(252, 120, 0, .2))
    drop-shadow(0 12px 6px rgba(252, 120, 0, .2))
    drop-shadow(0 28px 8.5px rgba(252, 120, 0, .1))
    drop-shadow(0 49px 10px rgba(252, 120, 0, .02))
    drop-shadow(0 77px 10.5px rgba(252, 120, 0, .01));
}

.nnf .nnf__btn--primary:hover,
.nnf .nnf__btn--primary:focus-visible { background: #ff8a1f !important; transform: translateY(-1px); }

.nnf .nnf__btn--back {
  flex: 0 0 auto;
  width: 120px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nnf-szary) !important;
}

.nnf .nnf__btn--back:hover { color: var(--nnf-pomarancz) !important; }
.nnf .nnf__btn:focus-visible { outline: 2px solid var(--nnf-pomarancz); outline-offset: 3px; }

.nnf .nnf__btn--auto { flex: 0 0 auto; width: auto; align-self: center; }

.nnf .wpcf7-spinner { display: none; }
.nnf .nnf__btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.wpcf7-form.submitting .nnf .nnf__btn--primary { opacity: .7; pointer-events: none; }

.nnf__note {
  color: var(--nnf-szary-50);
  text-align: center;
}

.nnf__note strong { font-weight: 700; }

/* komunikat CF7: tylko przy błędzie wysyłki (walidację pokazują pola) */
.wpcf7-form:has(.nnf) .wpcf7-response-output { display: none; }

.wpcf7-form.unaccepted:has(.nnf) .wpcf7-response-output,
.wpcf7-form.failed:has(.nnf) .wpcf7-response-output,
.wpcf7-form.failed:has(.nnf) .wpcf7-response-output,
.wpcf7-form.aborted:has(.nnf) .wpcf7-response-output,
.wpcf7-form.spam:has(.nnf) .wpcf7-response-output {
  display: block;
  margin: 16px auto 0;
  padding: 12px 16px;
  max-width: 540px;
  border: 1px solid var(--nnf-blad, #d4584e);
  border-radius: 14px;
  background: #fff;
  color: #d4584e;
  font: 400 13px/20px "Sora", sans-serif;
}

/* ---------- podziękowanie ---------- */

.nnf__thanks {
  align-items: center;
  text-align: center;
}

.nnf__thanks-icon {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50px;
  background: var(--nnf-pomarancz-25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M1 6.235L6.143 11 13 2' stroke='%23FC7800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.nnf__thanks-title {
  color: var(--nnf-czarny);
  font: 520 20px/27px var(--nnf-sora);
  letter-spacing: -.2px;
}

.nnf__thanks-email {
  color: var(--nnf-pomarancz);
  font-weight: 700;
  word-break: break-all;
}

.nnf__next {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: 400px;
  padding: 40px 0;
}

.nnf__next-title {
  color: var(--nnf-szary);
  font: 500 17px/25px var(--nnf-inter);
}

.nnf .nnf__next-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nnf-krok;
  text-align: left;
}

.nnf .nnf__next-list li {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  counter-increment: nnf-krok;
}

.nnf .nnf__next-list li::before {
  content: counter(nnf-krok);
  display: flex;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: 20px;
  background: var(--nnf-pomarancz-25);
  color: var(--nnf-pomarancz);
  font-weight: 700;
}

/* ---------- Popup Maker: popup bez własnego tła i ramki ---------- */

.pum-container:has(.nnf) {
  width: auto !important;
  max-width: calc(100vw - 32px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pum-container:has(.nnf) .pum-content { padding: 0 !important; }
.pum-container:has(.nnf) .pum-content > :last-child { margin-bottom: 0; }
.pum-container:has(.nnf) > .pum-close { display: none !important; }
.pum-overlay:has(.nnf) { overflow-y: auto; }

/* ---------- mobile (Figma: wersja 360px) ---------- */

@media (max-width: 600px) {
  .nnf { width: 100%; }
  .nnf .nnf__btn--back { width: auto; flex-basis: 72px; }
  .nnf__pkg-size { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nnf *, .nnf *::before, .nnf *::after { transition: none !important; }
}