/* =====================================================================
   STOPKA + pływające: „do góry”, WhatsApp
   ===================================================================== */
.stopka { position: relative; overflow-x: clip; padding: 90px 0 0; border-top: 1px solid var(--linia); background: rgba(0, 0, 0, .25); }
/* po linii nad stopką przepływa świecący czerwony błysk – 2 razy po wjechaniu stopki na ekran (stoi, gdy stopki nie widać) */
.stopka::before { content: ""; position: absolute; left: 0; top: -1px; width: min(280px, 20vw); height: 2px; pointer-events: none; opacity: 0;
	background: linear-gradient(90deg, transparent, #ff3b2a 35%, #ffd3c7 50%, #ff3b2a 65%, transparent); box-shadow: 0 0 14px rgba(255, 59, 42, .75), 0 0 4px rgba(255, 59, 42, .9); }
@media (prefers-reduced-motion: no-preference) { .stopka::before { animation: stopka-blysk 9s cubic-bezier(.45, 0, .55, 1) 2 1.5s; } }
html.js .stopka:not(.na-ekranie)::before { animation-play-state: paused; }
.stopka.od-nowa::before { animation-name: none; }
@keyframes stopka-blysk { 0% { transform: translateX(-100%); opacity: 0; } 6% { opacity: 1; } 50% { opacity: 1; } 56%, 100% { transform: translateX(100vw); opacity: 0; } }
html[data-theme="light"] .stopka { background: #0b141c; color: #fff; --tekst: #fff; --tekst-2: #c3ced8; --tekst-3: #8796a4; --linia: rgba(255, 255, 255, .1); }
.stopka__siatka { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 50px; }
.stopka__logo { display: block; width: 170px; margin-bottom: 22px; color: #fff; transition: color .3s; }
.stopka p, .stopka li { color: var(--tekst-2); font-size: 15px; }
.stopka__naglowek { margin: 0 0 18px; font: var(--h-waga) 16px var(--font-h); letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.stopka ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.stopka a { text-decoration: none; }
.stopka a:hover { color: var(--czerwony); }
/* menu w stopce: po najechaniu z lewej wysuwa się świecąca czerwona kreska, a link odsuwa się */
.stopka ul a { position: relative; display: inline-block; transition: padding-left .4s cubic-bezier(.2, .8, .2, 1), color .3s; }
.stopka ul a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; margin-top: -1px; background: linear-gradient(90deg, #ff3b2a, var(--czerwony-2)); box-shadow: 0 0 8px rgba(255, 59, 42, .7); transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.stopka ul a:hover, .stopka ul a:focus-visible { padding-left: 22px; color: #fff; }
.stopka ul a:hover::before, .stopka ul a:focus-visible::before { width: 12px; }
.stopka__adres { margin-bottom: 18px; }
.stopka__adres b { display: block; color: #fff; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
/* telefon i e-mail czerwonym akcentem; po najechaniu białe */
.stopka__adres a { color: #ff4a3d; font-weight: 600; transition: color .25s; overflow-wrap: anywhere; }
.stopka__adres a:hover { color: #fff; }
.stopka__kropka { margin: 0 8px; color: var(--tekst-3); }
.stopka__social { display: flex; gap: 10px; margin-top: 24px; }
/* ikonki sociali po najechaniu w kolorach marek */
.stopka__social .ikonka { transition: border-color .25s, color .25s, background-color .25s, box-shadow .25s; }
.stopka__social .ikonka--fb:hover, .stopka__social .ikonka--fb:focus-visible { border-color: #1877f2; background: #1877f2; color: #fff; box-shadow: 0 0 20px rgba(24, 119, 242, .55); }
.stopka__social .ikonka--wa:hover, .stopka__social .ikonka--wa:focus-visible { border-color: #25d366; background: #25d366; color: #fff; box-shadow: 0 0 20px rgba(37, 211, 102, .5); }
.wa-logo .wa-logo__sluchawka { fill: currentColor; stroke: none; }
.stopka__dol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; margin-top: 70px; padding: 26px 0 30px; border-top: 1px solid var(--linia); color: var(--tekst-3); font-size: 13.5px; }
.stopka__dol, .stopka__dol p, .stopka__dol li, .stopka__dol a { font-size: 13px; } /* dolny pasek mniejszym pismem (p i li w stopce mają 15 px) */
.stopka__dol nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.stopka__dol a[aria-current] { color: var(--tekst); }

/* ---------- WhatsApp (pływający) ---------- */
.wa-plywajacy { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #25d366; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	transition: bottom .4s cubic-bezier(.2, .8, .2, 1); }
.wa-plywajacy svg { width: 30px; height: 30px; fill: #fff; }
/* gdy pojawia się „do góry”, WhatsApp podnosi się nad niego */
html.z-gora .wa-plywajacy { bottom: 98px; }
@media (prefers-reduced-motion: no-preference) {
	.wa-plywajacy::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: puls 2.4s ease-out 3 1s; opacity: 0; } /* 3 pulsy po wejściu na stronę i spokój */
}
@keyframes puls { from { transform: scale(1); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- „Do góry”: obwódka wypełnia się wg postępu przewijania (--pp) ---------- */
@property --pp { syntax: "<number>"; inherits: false; initial-value: 0; }
.do-gory { position: fixed; right: 30px; bottom: 30px; z-index: 40; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
	border: 0; background: rgba(8, 14, 20, .82); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
	opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s, transform .35s cubic-bezier(.2, .8, .2, 1), visibility .35s, background .25s; }
.do-gory::before { content: ""; position: absolute; inset: 0; padding: 2px; pointer-events: none;
	background: conic-gradient(#ff3b2a calc(var(--pp, 0) * 360deg), rgba(255, 255, 255, .14) 0);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.do-gory svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.do-gory.widoczny { opacity: 1; visibility: visible; transform: none; }
html[data-theme="light"] .do-gory { background: rgba(255, 255, 255, .9); color: #0a131b; }
html[data-theme="light"] .do-gory::before { background: conic-gradient(#e3262b calc(var(--pp, 0) * 360deg), rgba(9, 19, 27, .14) 0); }
/* czerwony stan tylko przy myszy (i z klawiatury). Na telefonie dotknięcie zostawia :hover na stałe – w jasnym motywie
   strzałka robiła się biała na białym tle (user 13.11) */
.do-gory:focus-visible, html[data-theme="light"] .do-gory:focus-visible { background: linear-gradient(135deg, #e3262b, #8e0505); color: #fff; box-shadow: 0 10px 28px rgba(227, 38, 43, .45); }
@media (hover: hover) and (pointer: fine) {
	.do-gory:hover, html[data-theme="light"] .do-gory:hover { background: linear-gradient(135deg, #e3262b, #8e0505); color: #fff; box-shadow: 0 10px 28px rgba(227, 38, 43, .45); }
	.do-gory:hover svg { transform: translateY(-3px); }
}

@media (max-width: 1200px) { .stopka__siatka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .stopka__siatka { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 600px) { .do-gory { right: 32px; bottom: 32px; width: 44px; height: 44px; } html.z-gora .wa-plywajacy { bottom: 92px; } }

/* ---------- Pasek kontaktu na telefonie: Zadzwoń · WhatsApp · Wyceń auto (html.z-paskiem z wspolne.js) ---------- */
.pasek-tel { display: none; }
@media (max-width: 760px) {
	.pasek-tel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: flex; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: var(--nag-tlo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--linia); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
		transform: translateY(110%); visibility: hidden; transition: transform .4s cubic-bezier(.2, .8, .2, 1), visibility .4s; }
	html.z-paskiem .pasek-tel { transform: none; visibility: visible; }
	.pasek-tel__el { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 46px; padding: 0 6px; border: 1px solid var(--linia);
		color: var(--tekst); font: 600 14px/1 var(--font-h); letter-spacing: .3px; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
	.pasek-tel__el span { overflow: hidden; text-overflow: ellipsis; }
	.pasek-tel__el svg { flex: none; width: 19px; height: 19px; }
	.pasek-tel__el--tel svg { fill: none; stroke: var(--czerwony); stroke-width: 1.8; stroke-linejoin: round; }
	.pasek-tel__el--wa { flex: 1.1; border-color: rgba(37, 211, 102, .55); }
	.pasek-tel__el--wa svg { fill: #25d366; }
	.pasek-tel__el--zamow { flex: 1.2; border: 0; background: linear-gradient(135deg, #e3262b, #a50606); color: #fff; box-shadow: 0 6px 18px rgba(227, 38, 43, .35);
		clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
	.pasek-tel__el:active { transform: scale(.97); }
	/* gdy pasek jest na ekranie: pływający WhatsApp zbędny, „do góry” nad paskiem */
	.wa-plywajacy { transition: bottom .4s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility .3s; }
	html.z-paskiem .wa-plywajacy { opacity: 0; visibility: hidden; }
	.do-gory { transition: opacity .35s, transform .35s cubic-bezier(.2, .8, .2, 1), visibility .35s, background .25s, bottom .4s cubic-bezier(.2, .8, .2, 1); }
	html.z-paskiem .do-gory { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) { .pasek-tel__el { font-size: 13px; gap: 5px; padding: 0 5px; } .pasek-tel__el--tel svg, .pasek-tel__el--wa svg { width: 17px; height: 17px; } }