/* Menu mobilne (<= 1024px). Desktop nietknięty — wszystko siedzi w media query. */

/* Własny reset — nie zakładamy, że motyw nadrzędny ustawia border-box. */
.ks-mm,
.ks-mm *,
.ks-mm *::before,
.ks-mm *::after,
#ks-mm-przycisk,
#ks-mm-przycisk * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Dlaczego przycisk jest adresowany przez #id, a nie przez .klasę:

   Hello Elementor resetuje przyciski selektorami ATRYBUTOWYMI —
   button, [type="button"], [type="reset"], [type="submit"] — z różowym
   obramowaniem #c04e9e. Nasz przycisk ma type="button", więc:

       [type="button"]    (0,1,0)   reset motywu nadrzędnego
       .ks-mm-przycisk    (0,1,0)   nasza reguła

   Remis specyficzności, a styl motywu ładuje się PO naszym — więc
   wygrywał reset i przycisk robił się różowy. #ks-mm-przycisk to
   (1,0,0), czyli wygrywa niezależnie od kolejności wczytania.
   !important stoi tylko przy właściwościach, które reset faktycznie
   nadpisuje — nie hurtem.
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {

	/* --- 1. Z nagłówka Elementora zostaje samo logo --- */

	.ks-mm-wlaczone .elementor-location-header .elementor-widget-nav-menu,
	.ks-mm-wlaczone .elementor-location-header .elementor-widget-button,
	.ks-mm-wlaczone .elementor-location-header .elementor-widget-heading,
	.ks-mm-wlaczone .elementor-location-header .elementor-menu-toggle {
		display: none !important;
	}

	/* Kontener, w którym zostały same ukryte widgety, nie ma już rozpychać nagłówka. */
	.ks-mm-wlaczone .elementor-location-header .e-con:not(:has(.elementor-widget-image)):not(:has(.e-con)) {
		display: none !important;
	}

	/* Miejsce pod pływający przycisk. */
	.ks-mm-wlaczone .elementor-location-header .elementor-widget-image {
		max-width: calc(100% - 78px);
	}

	/* Nagłówek NIE klei się do góry — logo ma przewinąć się razem ze stroną
	   i oddać ekran treści. Przyklejony zostaje sam pływający przycisk menu
	   (#ks-mm-przycisk niżej), bo to on musi być pod ręką przez cały czas.

	   Sticky nie pochodzi z tego motywu, tylko z Motion Effects w Elementorze:
	   jego JS dokłada .elementor-sticky--active z position:fixed w atrybucie
	   style, a obok wstawia rozpórkę trzymającą wysokość. Stąd !important —
	   styl inline inaczej nie do ruszenia — i stąd ukrycie rozpórki, żeby po
	   odklejeniu nagłówka nie została po niej dziura.

	   Docelowo lepiej wyłączyć to w panelu (Advanced → Motion Effects →
	   Sticky, lista urządzeń), a te reguły traktować jako zabezpieczenie. */

	.ks-mm-wlaczone .elementor-location-header.elementor-sticky--active,
	.ks-mm-wlaczone .elementor-location-header .elementor-sticky--active {
		position: static !important;
		top: auto !important;
		bottom: auto !important;
		width: auto !important;
		transform: none !important;
	}

	.ks-mm-wlaczone .elementor-location-header .elementor-sticky__spacer {
		display: none !important;
	}

	/* --- 2. Pływający przycisk --- */

	#ks-mm-przycisk {
		position: fixed;
		top: calc(10px + env(safe-area-inset-top, 0px));
		right: calc(12px + env(safe-area-inset-right, 0px));
		z-index: 100001;
		display: grid !important;
		place-items: center;
		width: 52px !important;
		height: 52px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 17px !important;
		background: #0B1B33 !important;
		color: #fff !important;
		box-shadow:
			0 10px 26px rgba(11, 27, 51, 0.30),
			inset 0 0 0 1px rgba(255, 255, 255, 0.10),
			0 0 0 2px rgba(255, 255, 255, 0.90);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background 260ms ease, box-shadow 260ms ease, transform 260ms ease;
	}

	#ks-mm-przycisk:active {
		transform: scale(0.94);
	}

	#ks-mm-przycisk:focus-visible {
		outline: 2px solid #E4A014;
		outline-offset: 3px;
	}

	.ks-mm-burger {
		position: relative;
		display: block;
		width: 22px;
		height: 16px;
	}

	.ks-mm-burger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: #fff;
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease, width 320ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.ks-mm-burger span:nth-child(1) { top: 0; }
	.ks-mm-burger span:nth-child(2) { top: 7px; width: 70%; }
	.ks-mm-burger span:nth-child(3) { top: 14px; }

	/* Stan otwarty: przycisk robi się przezroczysty, kreski składają się w X. */
	.ks-mm-otwarte #ks-mm-przycisk {
		background: rgba(255, 255, 255, 0.10) !important;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	}

	.ks-mm-otwarte .ks-mm-burger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.ks-mm-otwarte .ks-mm-burger span:nth-child(2) {
		opacity: 0;
		width: 0;
	}

	.ks-mm-otwarte .ks-mm-burger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* --- 3. Warstwa panelu --- */

	.ks-mm {
		position: fixed;
		inset: 0;
		z-index: 100000;
		font-family: inherit;
	}

	.ks-mm[hidden] {
		display: none;
	}

	.ks-mm-tlo {
		position: absolute;
		inset: 0;
		background: rgba(5, 11, 22, 0.55);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		opacity: 0;
		transition: opacity 320ms ease;
	}

	.ks-mm-otwarte .ks-mm-tlo {
		opacity: 1;
	}

	.ks-mm-panel {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		width: min(90vw, 400px);
		padding:
			calc(16px + env(safe-area-inset-top, 0px))
			calc(22px + env(safe-area-inset-right, 0px))
			calc(22px + env(safe-area-inset-bottom, 0px))
			24px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background:
			radial-gradient(120% 70% at 100% 0%, rgba(214, 20, 43, 0.30) 0%, rgba(214, 20, 43, 0) 55%),
			radial-gradient(90% 55% at 0% 100%, rgba(228, 160, 20, 0.16) 0%, rgba(228, 160, 20, 0) 60%),
			linear-gradient(160deg, #14294A 0%, #0B1B33 58%, #081326 100%);
		box-shadow: -28px 0 60px rgba(4, 9, 18, 0.45);
		transform: translateX(100%);
		transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.ks-mm-otwarte .ks-mm-panel {
		transform: none;
	}

	/* --- 4. Góra panelu: logo --- */

	.ks-mm-gora {
		display: flex;
		align-items: center;
		min-height: 52px;
		margin-bottom: 26px;
		padding-right: 60px; /* miejsce na przycisk X */
	}

	.ks-mm-logo {
		display: inline-flex;
		align-items: center;
		padding: 9px 14px;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 6px 18px rgba(4, 9, 18, 0.28);
	}

	.ks-mm-logo img {
		display: block;
		width: auto;
		height: 26px;
		max-width: 100%;
	}

	/* --- 5. Pozycje menu --- */

	.ks-mm-nawigacja {
		display: flex;
		flex-direction: column;
		margin-bottom: 26px;
	}

	.ks-mm-link {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 15px 2px;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
		color: #fff;
		font-size: 19px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -0.01em;
		text-decoration: none;
		opacity: 0;
		transform: translateX(22px);
		transition:
			opacity 420ms ease,
			transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
			color 200ms ease;
	}

	.ks-mm-link:first-child {
		border-top: 1px solid rgba(255, 255, 255, 0.10);
	}

	.ks-mm-link:hover,
	.ks-mm-link:focus-visible {
		color: #FBF6EA;
	}

	.ks-mm-link:focus-visible {
		outline: 2px solid #E4A014;
		outline-offset: 2px;
		border-radius: 6px;
	}

	.ks-mm-nr {
		min-width: 20px;
		color: #E4A014;
		font-size: 11px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.14em;
	}

	.ks-mm-tekst {
		flex: 1;
	}

	.ks-mm-strzalka {
		flex: none;
		opacity: 0.30;
		transition: transform 220ms ease, opacity 220ms ease, color 220ms ease;
	}

	.ks-mm-link:hover .ks-mm-strzalka,
	.ks-mm-link:focus-visible .ks-mm-strzalka,
	.ks-mm-link:active .ks-mm-strzalka {
		transform: translateX(4px);
		opacity: 1;
		color: #E4A014;
	}

	/* --- 6. CTA + telefon --- */

	.ks-mm-stopka {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: auto;
		opacity: 0;
		transform: translateY(16px);
		transition:
			opacity 420ms ease,
			transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.ks-mm-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-height: 58px;
		padding: 16px 20px;
		border-radius: 16px;
		background: linear-gradient(180deg, #E01B33 0%, #C21128 100%);
		color: #fff;
		font-size: 17px;
		font-weight: 700;
		letter-spacing: -0.01em;
		text-align: center;
		text-decoration: none;
		box-shadow: 0 12px 26px rgba(214, 20, 43, 0.35);
		transition: transform 200ms ease, box-shadow 200ms ease;
	}

	.ks-mm-cta:hover,
	.ks-mm-cta:focus-visible {
		color: #fff;
		box-shadow: 0 16px 30px rgba(214, 20, 43, 0.45);
	}

	.ks-mm-cta:active {
		transform: translateY(1px) scale(0.99);
	}

	.ks-mm-telefon {
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 58px;
		padding: 12px 18px;
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.06);
		color: #fff;
		text-decoration: none;
		transition: background 200ms ease, border-color 200ms ease;
	}

	.ks-mm-telefon:hover,
	.ks-mm-telefon:focus-visible {
		border-color: rgba(228, 160, 20, 0.55);
		background: rgba(255, 255, 255, 0.10);
		color: #fff;
	}

	.ks-mm-telefon-ikona {
		display: grid;
		place-items: center;
		flex: none;
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background: rgba(228, 160, 20, 0.18);
		color: #E4A014;
	}

	.ks-mm-telefon-tresc {
		display: flex;
		flex-direction: column;
		line-height: 1.25;
	}

	.ks-mm-telefon-tresc strong {
		font-size: 18px;
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	.ks-mm-telefon-tresc small {
		color: rgba(255, 255, 255, 0.60);
		font-size: 12.5px;
		letter-spacing: 0.02em;
	}

	/* --- 7. Wejście elementów po otwarciu (kaskada) --- */

	.ks-mm-otwarte .ks-mm-link,
	.ks-mm-otwarte .ks-mm-stopka {
		opacity: 1;
		transform: none;
		transition-delay: calc(90ms + var(--ks-mm-i, 0) * 45ms);
	}

	/* --- 8. Blokada przewijania tła --- */

	body.ks-mm-blokada {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		overflow: hidden;
	}

	@media (prefers-reduced-motion: reduce) {

		.ks-mm-panel,
		.ks-mm-tlo,
		.ks-mm-link,
		.ks-mm-stopka,
		.ks-mm-burger span {
			transition-duration: 1ms !important;
			transition-delay: 0ms !important;
		}
	}
}

/* Powyżej 1024px nasz przycisk nie istnieje — menu Elementora działa jak dotąd. */
@media (min-width: 1025px) {

	#ks-mm-przycisk,
	.ks-mm {
		display: none !important;
	}
}