/* NetGonet Wideo. Kolor przycisku: --ngw-kolor, proporcje filmu: --ngw-proporcje, zaokrąglenie: --ngw-promien.
   Rozmiar przycisku od szerokości ekranu (vw), bez container-type: ten zerował szerokość w układach „dopasuj do treści”. */
.ngw {
	position: relative; overflow: hidden; width: 100%; max-width: 100%;
	aspect-ratio: var(--ngw-proporcje, 1.7778); border-radius: var(--ngw-promien, 12px);
	background: #0b0d12; isolation: isolate; margin-block: 0 1.5em;
}
/* Elementor (widżet shortcode w kontenerze flex) daje widżetowi szerokość „dopasuj do treści”; film rozciąga go na całą kolumnę. */
.elementor-widget:has(.ngw) { width: 100%; max-width: 100%; align-self: stretch; }
.elementor-shortcode:has(.ngw) { width: 100%; }
.ngw-okladka { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: opacity .5s ease; }
.ngw.ngw-gra .ngw-okladka { opacity: 0; pointer-events: none; }
.ngw-ramka, .ngw-ramka iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ngw-ramka { z-index: 1; }
.ngw-podglad .ngw-ramka iframe, .ngw-tlo .ngw-ramka iframe { pointer-events: none; }
.ngw.ngw-odtwarzacz .ngw-ramka { z-index: 3; }

.ngw button.ngw-graj, .ngw button.ngw-graj:hover, .ngw button.ngw-graj:focus, .ngw button.ngw-graj:active {
	/* Motyw i Elementor stylują każdy <button> (tło, ramka, cień, wielkie litery); tu wszystko ustawiamy od nowa. */
	position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 1.2vw, 18px);
	width: 100%; height: 100%; min-height: 0; max-width: none; padding: 0; border: 0; border-radius: 0; margin: 0; cursor: pointer;
	color: #fff; font: inherit; font-size: 16px; line-height: 1.3; text-transform: none; letter-spacing: normal; box-shadow: none; transform: none;
	background-color: transparent; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35) 100%);
}
.ngw-ikona {
	display: grid; place-items: center; width: clamp(84px, 8vw, 132px); height: auto; aspect-ratio: 10 / 7; border-radius: clamp(14px, 1.3vw, 22px);
	background: var(--ngw-kolor, #f22e4b); box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
	transition: transform .15s ease, filter .15s ease;
}
.ngw-ikona svg { width: 42%; height: auto; margin-left: 4%; }
.ngw-napis {
	padding: 8px 18px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-weight: 600; font-size: clamp(14px, 1.3vw, 19px); line-height: 1.3; max-width: 90%;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.ngw button.ngw-graj:hover .ngw-ikona { transform: scale(1.06); filter: brightness(1.06); }
.ngw button.ngw-graj:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.ngw button.ngw-graj:focus-visible .ngw-ikona { box-shadow: 0 0 0 4px #fff, 0 8px 24px rgba(0, 0, 0, .3); }
/* Telefon: duży, łatwy do trafienia kciukiem przycisk (min. 72 px szerokości), krótszy napis-pigułka. */
@media (max-width: 600px) {
	.ngw-ikona { width: 76px; }
	.ngw-napis { font-size: 14px; padding: 6px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ngw-okladka, .ngw-ikona { transition: none; } }

/* --- Presety --- */
/* NetGonet: czerwony prostokątny przycisk (jak dotychczasowe filmy na landingach). Domyślne style wyżej. */

/* Ciemny landing (np. mini-aplikacje): ramka i cień karty, okrągły pomarańczowy przycisk z pulsującą poświatą, napis-pigułka. */
.ngw-preset-ciemny { border: 1px solid rgba(137, 137, 190, .3); box-shadow: 0 24px 60px rgba(1, 7, 26, .55); }
.ngw-preset-ciemny button.ngw-graj, .ngw-preset-ciemny button.ngw-graj:hover { background: radial-gradient(ellipse at center, rgba(1, 7, 26, .15) 0%, rgba(1, 7, 26, .55) 100%); background-color: transparent; }
.ngw-preset-ciemny .ngw-ikona { width: clamp(80px, 7.5vw, 124px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 4px 35px rgba(1, 7, 26, .5), 0 0 0 0 color-mix(in srgb, var(--ngw-kolor) 55%, transparent); animation: ngw-puls 2.4s ease-out infinite; }
.ngw-preset-ciemny .ngw-napis { font-family: 'Plus Jakarta Sans', inherit; background: rgba(18, 18, 18, .6); border: 1px solid rgba(137, 137, 190, .3); backdrop-filter: blur(6px); }
@keyframes ngw-puls { 70% { box-shadow: 0 4px 35px rgba(1, 7, 26, .5), 0 0 0 18px transparent; } 100% { box-shadow: 0 4px 35px rgba(1, 7, 26, .5), 0 0 0 0 transparent; } }

/* Akademia: okrągły niebieski przycisk z białą obwódką, jaśniejsza nakładka. */
.ngw-preset-akademia .ngw-ikona { width: clamp(80px, 7.5vw, 120px); aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; }
.ngw-preset-akademia .ngw-napis { background: #fff; color: #1a202c; text-shadow: none; }

/* Minimalny: przezroczysty okrąg z rozmyciem, bez przyciemnienia filmu. */
.ngw-preset-minimal button.ngw-graj, .ngw-preset-minimal button.ngw-graj:hover { background: none; background-color: transparent; }
.ngw-preset-minimal .ngw-ikona { width: clamp(76px, 7vw, 112px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .8); backdrop-filter: blur(8px); box-shadow: none; color: var(--ngw-kolor); }
.ngw-preset-minimal .ngw-napis { background: none; padding: 0; }

@media (max-width: 600px) {
	.ngw-preset-ciemny .ngw-ikona, .ngw-preset-akademia .ngw-ikona, .ngw-preset-minimal .ngw-ikona { width: 72px; }
	.ngw-preset-akademia .ngw-ikona { border-width: 3px; }
}
@media (prefers-reduced-motion: reduce) { .ngw-preset-ciemny .ngw-ikona { animation: none; } }

.ngw-noscript { position: absolute; inset: auto 0 0 0; z-index: 5; padding: 10px; color: #fff; background: rgba(0, 0, 0, .6); }
.ngw-uwaga { padding: 10px 12px; border: 1px dashed #b42318; color: #b42318; }