/*
	Theme Name:   Savoy Child
	Theme URI:    http://themeforest.net/item/savoy-minimalist-ajax-woocommerce-theme/12537825
	Description:  Savoy child theme
	Author:       NordicMade
	Author URI:   http://www.nordicmade.com
	Template:     savoy
	Version:      1.0
*/


/* Child theme CSS
--------------------------------------------------------------- */


/* ===============================================================
   STRONA GŁÓWNA KATALOGU (front-page.php)
   =============================================================== */

/* Zmienne globalnie (nie tylko na .kt-home) — inaczej przyciski na podstronach
   mają nieokreślone tło (var bez wartości = przezroczyste). */
:root {
	--kt-gap: 30px;
	--kt-muted: #6b7280;
	--kt-heading: #282828;
}


/* --- 1. Slider z banerami --------------------------------------- */

.kt-hero {
	position: relative;
	width: 100%;
	margin: 0 0 55px;
}

.kt-hero-slider {
	position: relative;
	overflow: hidden;
}

.kt-hero-track {
	position: relative;
	/* Wysokość steruje proporcją banera; obraz jest przycinany (cover). */
	height: clamp( 320px, 42vw, 620px );
}

.kt-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease;
	z-index: 1;
}

.kt-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.kt-hero-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Obraz <img> jest pod spodem dla SEO/dostępności; wygląd daje tło. */
.kt-hero-img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

/* Przyciemnienie dla czytelności białego tekstu. */
.kt-hero-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, rgba(6, 20, 40, .72) 0%, rgba(6, 20, 40, .45) 45%, rgba(6, 20, 40, .15) 100% );
}

.kt-hero-caption {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 0;
	transform: translateY( -50% );
	width: min( 640px, 82% );
	padding: 0 clamp( 20px, 6vw, 90px );
	color: #fff;
}

.kt-hero-caption p {
	margin: 0;
	font-size: clamp( 17px, 2.1vw, 27px );
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: .2px;
	text-shadow: 0 1px 20px rgba(0, 0, 0, .35);
}

/* Strzałki */
.kt-hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 4;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur( 4px );
	transition: background .2s ease;
}

.kt-hero-nav:hover { background: rgba(255, 255, 255, .35); }
.kt-hero-prev { left: 18px; }
.kt-hero-next { right: 18px; }

/* Kropki */
.kt-hero-dots {
	position: absolute;
	z-index: 4;
	bottom: 20px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.kt-hero-dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.kt-hero-dot.is-active {
	background: #fff;
	transform: scale( 1.25 );
}

@media (max-width: 768px) {
	.kt-hero { margin-bottom: 35px; }
	.kt-hero-nav { display: none; }
	.kt-hero-caption { width: 88%; }
}


/* --- 2. Informacje kontaktowe ----------------------------------- */

.kt-info {
	margin-bottom: 55px;
}

.kt-info-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var(--kt-gap);
}

.kt-info-item {
	text-align: center;
	padding: 10px 15px;
}

.kt-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: #f4f5f7;
	color: var(--kt-heading);
}

.kt-info-title {
	margin: 0 0 10px;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--kt-heading);
}

.kt-info-item p {
	margin: 0;
	color: var(--kt-muted);
	line-height: 1.7;
}

.kt-info-item a {
	color: var(--kt-heading);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.kt-info-item a:hover { border-color: currentColor; }

/* Wyróżniony link do formularza kontaktowego (akcent w kolorze brandu) */
.kt-info-item .kt-info-cta {
	display: inline-block;
	margin-top: 4px;
	color: #1590d6;
	font-weight: 600;
	border-bottom: 1px solid rgba( 21, 144, 214, .5 );
	transition: color .2s ease, border-color .2s ease;
}

.kt-info-item .kt-info-cta:hover {
	color: #0f6ea6;
	border-bottom-color: #0f6ea6;
}

@media (max-width: 768px) {
	.kt-info-grid { grid-template-columns: 1fr; gap: 34px; }
	.kt-info { margin-bottom: 35px; }
}


/* --- 3. Dwa duże kafelki ---------------------------------------- */

.kt-tiles {
	margin-bottom: 60px;
}

.kt-tiles-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 40px;
}

.kt-tile {
	display: block;
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	transition: transform .35s ease, box-shadow .35s ease;
	/* Efekt przestrzenności — cień + delikatne uniesienie. */
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .08);
}

.kt-tile-inner {
	display: block;
	/* Placeholder pod przyszłe zdjęcie — szary z lekkim gradientem. */
	aspect-ratio: 16 / 10;
	background: linear-gradient( 135deg, #e9ebee 0%, #d6d9dd 100% );
}

/* Kafelek ze zdjęciem serwerowni — obraz dopasowany do rozmiaru kafelka (cover),
   przycięty do jego proporcji. Rozmiar kafelka i efekty hover bez zmian. */
.kt-tile-inner--tab1 {
	background: url( 'assets/images/tab-1.jpg' ) center center / cover no-repeat;
}

.kt-tile-inner--tab2 {
	background: url( 'assets/images/tab-2.jpg' ) center center / cover no-repeat;
}

/* Kafle na podstronie /osprzet-telekomunikacyjny/ */
.kt-tile-inner--osprzet1 {
	background: url( 'assets/images/osprzet-kafelek-1.jpg' ) center center / cover no-repeat;
}

.kt-tile-inner--osprzet2 {
	background: url( 'assets/images/osprzet-kafelek-2.jpg' ) center center / cover no-repeat;
}

/* Czarny pasek z białym napisem nałożony na dół kafelka */
.kt-tile-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 15px 20px;
	background: rgba( 0, 0, 0, .78 );
	color: #fff;
	font-size: clamp( 15px, 1.6vw, 19px );
	font-weight: 600;
	letter-spacing: .3px;
	text-align: center;
	line-height: 1.3;
}

.kt-tile:hover {
	transform: translateY( -6px ) scale( 1.015 );
	box-shadow: 0 22px 48px rgba(0, 0, 0, .18), 0 6px 14px rgba(0, 0, 0, .10);
}

/* Kolumna: kafelek + przycisk pod spodem */
.kt-tile-col {
	display: flex;
	flex-direction: column;
}

.kt-tile-action {
	margin-top: 22px;
	display: flex;
	justify-content: center;
}

/* Przycisk "Zapytaj o produkt" (działa jako <a> i <button>) */
.kt-btn {
	display: inline-block;
	min-width: 220px;
	padding: 14px 34px;
	border: 0;
	border-radius: 4px;
	background: var(--kt-heading, #282828);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.kt-btn:hover,
.kt-btn:focus {
	background: #000;
	color: #fff;
	transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.kt-btn:active { transform: translateY( 0 ); }

/* Przycisk nieaktywny (link do uzupełnienia) */
.kt-btn.is-disabled {
	background: #c9ccd1;
	color: #fff;
	cursor: default;
	pointer-events: none;
	box-shadow: none;
}

@media (max-width: 768px) {
	.kt-tiles-grid { grid-template-columns: 1fr; }
	.kt-tiles { margin-bottom: 40px; }
	.kt-btn { width: 100%; }
}


/* ===============================================================
   STRONA PODRZĘDNA z kafelkami (np. Osprzęt telekomunikacyjny)
   =============================================================== */

.kt-page {
	padding: 50px 15px 70px;
}

.kt-page-head {
	text-align: center;
	margin-bottom: 40px;
}

.kt-page-title {
	margin: 0;
	font-size: clamp( 26px, 3.6vw, 38px );
}

.kt-empty {
	text-align: center;
	color: #6b7280;
	font-size: 16px;
	padding: 40px 0;
}


/* --- Statyczna siatka kategorii (równe kafle, przycisk pod zdjęciem) --- */

.kt-cats {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 34px;
}

.kt-cat-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kt-cat-action {
	margin-top: 16px;
	display: flex;
	justify-content: center;
}

.kt-cat {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, .10 ), 0 3px 8px rgba( 0, 0, 0, .06 );
	transition: box-shadow .35s ease, transform .35s ease;
}

/* Jedna proporcja dla wszystkich kafli — równe zdjęcia */
.kt-cat { aspect-ratio: 4 / 3; }

.kt-cat-photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .5s ease;
}

.kt-cat:hover {
	transform: translateY( -4px );
	box-shadow: 0 18px 40px rgba( 0, 0, 0, .16 ), 0 6px 14px rgba( 0, 0, 0, .10 );
}

.kt-cat:hover .kt-cat-photo {
	transform: scale( 1.06 );
}

/* Czarny pasek z białą nazwą kategorii */
.kt-cat-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 15px 20px;
	background: rgba( 0, 0, 0, .78 );
	color: #fff;
	text-align: center;
	font-size: clamp( 16px, 1.7vw, 20px );
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.3;
}

@media (max-width: 768px) {
	.kt-cats { grid-template-columns: 1fr; gap: 24px; }
	.kt-cat { aspect-ratio: 16 / 9; }
}


/* --- Lista produktów (zdjęcie | nazwa | przycisk) --- */

.kt-prod-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.kt-prod {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 16px 20px;
	border: 1px solid #e6e8eb;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
	transition: box-shadow .25s ease, transform .25s ease;
}

.kt-prod:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
	transform: translateY( -2px );
}

.kt-prod-img {
	flex: 0 0 150px;
	width: 150px;
	height: 104px;
	border-radius: 6px;
	background: linear-gradient( 135deg, #e9ebee 0%, #d6d9dd 100% );
	background-size: cover;
	background-position: center;
}

.kt-prod-name {
	flex: 1 1 auto;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	color: #282828;
}

.kt-prod-action {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	text-align: right;
}

.kt-btn-sm {
	min-width: 0;
	padding: 12px 24px;
	font-size: 12px;
}

.kt-prod-note {
	font-size: 12px;
	color: #6b7280;
}

/* Przycisk ukryty, odsłaniany po najechaniu na CAŁY wiersz.
   Bez bramki @media(hover:hover) — bywa zawodna (np. laptopy dotykowe).
   Reguła :hover działa wszędzie; na dotyku (brak hovera) pokazujemy od razu.
   Używamy opacity (nie display), żeby układ się nie przesuwał. */
.kt-prod .kt-btn-sm {
	opacity: 0;
	transform: translateY( 4px );
	transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.kt-prod:hover .kt-btn-sm {
	opacity: 1;
	transform: translateY( 0 );
}
/* Osobna reguła — gdyby przeglądarka nie znała :focus-within, nie unieważni to hovera. */
.kt-prod:focus-within .kt-btn-sm {
	opacity: 1;
	transform: translateY( 0 );
}
/* Realny dotyk (palec) — przycisk zawsze widoczny. Używamy pointer: coarse,
   bo hover-media bywa błędnie raportowane na laptopach dotykowych. */
@media (pointer: coarse) {
	.kt-prod .kt-btn-sm { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
	.kt-prod {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 16px;
	}
	.kt-prod-img { flex-basis: auto; width: 100%; height: 170px; }
	.kt-prod-action { align-items: stretch; text-align: center; }
	.kt-btn-sm { width: 100%; }
}


/* ===============================================================
   STRONA /kontakt (page-kontakt.php)
   =============================================================== */

.kt-kontakt {
	max-width: 680px;
	margin: 0 auto;
	padding: 50px 15px 70px;
}

.kt-kontakt-head {
	text-align: center;
	margin-bottom: 34px;
}

.kt-kontakt-title {
	margin: 0 0 8px;
	font-size: clamp( 24px, 3.4vw, 34px );
}

.kt-kontakt-sub {
	margin: 0;
	color: #6b7280;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.kt-kontakt-produkt {
	margin: 14px 0 0;
	padding: 10px 16px;
	display: inline-block;
	border-radius: 6px;
	background: #f4f5f7;
	color: #282828;
	font-size: 15px;
}

.kt-kontakt-form .kt-field {
	margin: 0 0 18px;
}

.kt-kontakt-form label {
	display: block;
	font-size: 13px;
	color: #282828;
}

.kt-kontakt-form input[type="text"],
.kt-kontakt-form input[type="email"],
.kt-kontakt-form input[type="tel"],
.kt-kontakt-form textarea {
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid #d6d9dd;
	border-radius: 4px;
	font-size: 15px;
	background: #fff;
}

.kt-kontakt-form textarea { min-height: 150px; resize: vertical; }

.kt-kontakt-form input:focus,
.kt-kontakt-form textarea:focus {
	outline: none;
	border-color: #282828;
}

.kt-kontakt-form .wpcf7-submit {
	min-width: 220px;
	padding: 14px 34px;
	margin-top: 6px;
	border: 0;
	border-radius: 4px;
	background: #282828;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease;
}

.kt-kontakt-form .wpcf7-submit:hover { background: #000; }


/* --- Sekcja "Polecane" na stronie głównej ------------------------ */

/* Uwaga: "auto" po bokach jest konieczne — .nm-row centruje się przez
   margin: 0 auto, a skrót margin z zerami skasowałby to centrowanie.

   Kreska oddzielająca sekcję od tego, co nad nią. Siedzi na .nm-row, więc
   kończy się równo z krawędziami treści — nie ciągnie się przez całą szerokość
   okna. Odstęp nad nią robi margin, pod nią padding, dzięki czemu linia jest
   mniej więcej w połowie przerwy między sekcjami. */
.kt-polecane {
	margin: 60px auto;
	padding-top: 46px;
	border-top: 1px solid #ececec;
}

.kt-section-head {
	margin-bottom: 26px;
	text-align: left;
}

.kt-section-title {
	margin: 0;
	font-size: clamp( 22px, 2.4vw, 30px );
	font-weight: 500;
	letter-spacing: .3px;
}

/* Strzałki slidera Savoy są domyślnie przezroczyste do najechania na slider —
   na stronie głównej chcemy je widoczne od razu, żeby było wiadomo, że da się
   przewijać ręcznie. */
.kt-polecane .slick-prev,
.kt-polecane .slick-next {
	opacity: 1;
	visibility: visible;
}


/* --- Kafelek produktu w siatce sklepu ---------------------------- */

/* WYSOKOŚĆ KAFELKA. Miniatury WooCommerce są u nas nieprzycinane, a katalog
   miesza formaty skrajnie: szafka 1400×1000 obok słupka 1034×1920. Savoy daje
   miniaturze width:100% i height:auto, więc kafelek dziedziczy proporcje
   zdjęcia — jeden pionowy produkt rozpychał wiersz i zrzucał podpisy sąsiadów
   pod spód (widoczne w sliderze "Polecane").

   Zamiast przycinać zdjęcia w Woo (obcięłoby to górę i dół wysokich obudów)
   ustalamy stałe, kwadratowe pole i wpasowujemy w nie obraz w całości.
   Proporcję trzymamy w zmiennej — gdyby kwadrat okazał się za ciasny dla
   pionowych serii, wystarczy zmienić ją tutaj na np. 3 / 4. */
:root {
	--kt-kafelek-proporcja: 1 / 1;
}

/* Celujemy w sam odnośnik ze zdjęciem — w kafelku bywają też inne linki
   (przycisk akcji Savoy), którym proporcja jest niepotrzebna. */
.nm-shop-loop-thumbnail > a.nm-shop-loop-thumbnail-link {
	aspect-ratio: var( --kt-kafelek-proporcja );
	overflow: hidden;
}

.nm-shop-loop-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 50%;
}

/* Obraz pokazywany po najechaniu jest pozycjonowany absolutnie i domyślnie
   kadrowany (cover) — musi trzymać się tej samej reguły, inaczej "przeskakuje"
   względem zdjęcia głównego. */
.nm-shop-loop-thumbnail .nm-shop-hover-image {
	width: 100%;
	object-fit: contain;
}

/* Tło kafelka motyw ustawia na #eee — nie w arkuszu, tylko w <style> z opcji
   motywu, który ląduje w <head> po naszym pliku. Stąd selektor z "body":
   sama klasa przegrałaby kolejnością. Przy wpasowaniu w kwadrat to tło widać
   jako pasy nad i pod zdjęciem, a nasze fotografie są na bieli — dlatego biel. */
body .nm-shop-loop-thumbnail {
	background: #fff;
}

/* Savoy pozycjonuje "Zobacz więcej" absolutnie (top: calc(100% - 23px)),
   zakładając jedną linię tytułu i wiersz z ceną pod spodem. Nasze symbole
   bywają dwu- i trzyliniowe, a cen nie ma — przycisk wchodził na tytuł.
   Wpuszczamy go z powrotem w przepływ, żeby zawsze siedział pod tytułem. */
.nm-products:not(.grid-list) .nm-shop-loop-actions {
	position: relative;
	top: auto;
	margin-top: 8px;
}

/* Rezerwa wysokości była pod cenę ("No price fix" w motywie) — zbędna. */
.nm-products:not(.grid-list) .nm-shop-loop-details {
	min-height: 0;
}

/* Kreska rozdzielająca "Zobacz więcej" i "Zapytaj o produkt" — oba linki mają
   podkreślenie, więc sam odstęp za słabo je rozdziela. */
.nm-shop-loop-actions > a + a::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 2px;
	bottom: 2px;
	border-left: 1px solid #cfcfcf;
}

.nm-shop-loop-actions .kt-loop-zapytaj {
	font-weight: 500;
}

/* Przycisk zapytania na karcie produktu (w miejscu koszyka). */
.kt-single-zapytaj-wrap {
	margin: 22px 0 10px;
}

a.kt-single-zapytaj {
	display: inline-block;
	padding: 13px 30px;
	font-size: 15px;
	line-height: 1.2;
	color: #fff;
	background: #282828;
	border-radius: var( --nm--border-radius-button, 0 );
	transition: background .2s ease;
}

a.kt-single-zapytaj:hover {
	color: #fff;
	background: #000;
}


/* --- Drzewo kategorii w sidebarze sklepu ------------------------- */

/* Podpoziomy startują zwinięte… */
.widget_product_categories .product-categories .children {
	display: none;
}

/* …poza gałęzią oglądanej kategorii (klasy od WooCommerce, działa bez JS)
   oraz tym, co użytkownik rozwinie przełącznikiem. */
.widget_product_categories .product-categories li.current-cat-parent > .children,
.widget_product_categories .product-categories li.current-cat > .children,
.widget_product_categories .product-categories li.kt-open > .children {
	display: block;
}

.widget_product_categories li.cat-parent {
	position: relative;
}

/* Miejsce na przełącznik po lewej stronie nazwy. */
.widget_product_categories li.cat-parent.kt-has-toggle > a {
	padding-left: 18px;
}

.kt-cat-toggle {
	position: absolute;
	left: 0;
	top: 2px;
	width: 16px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 1;
}

/* Strzałka rysowana ramkami — bez zależności od fontu ikon. */
.kt-cat-toggle::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 6px;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	opacity: .55;
	transition: transform .2s ease, opacity .2s ease;
	transform-origin: 2px 50%;
}

.kt-cat-toggle:hover::before {
	opacity: 1;
}

.kt-open > .kt-cat-toggle::before {
	transform: rotate( 90deg );
	opacity: 1;
}


/* --- Ikony social w menu (zamiast listy życzeń) ------------------ */

/* W menu mobilnym ikona stoi przed podpisem — potrzebny odstęp. */
#nm-mobile-menu-secondary-ul .nm-menu-item-social a i {
	margin-right: 8px;
}

/* Stopka: ikony wyśrodkowane w osobnym wierszu pod menu stopki. */
.kt-footer-social {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}

/* Hook renderuje ikony na końcu kolumny — przesuwamy copyright pod nie,
   żeby ikony wypadły tuż pod linkami #nm-footer-bar-menu. */
.nm-footer-bar-left .nm-footer-bar-text {
	order: 1;
}



/* ===============================================================
   TOAST — wynik wysyłki formularza (kt-formularz.js)
   =============================================================== */

/* Kontener jest przezroczysty dla kliknięć — łapią je dopiero same toasty,
   inaczej niewidoczny pas blokowałby treść pod spodem. */
/* Toast siedzi u góry, poniżej przyklejonego nagłówka Savoya — na dole
   nakładał się optycznie na stopkę i ginął, gdy strona była przewinięta
   do końca (a po wysłaniu formularza zwykle jest). */
.kt-toasty {
	position: fixed;
	right: 20px;
	top: 96px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min( 380px, calc( 100vw - 40px ) );
	pointer-events: none;
}

.kt-toast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 14px 15px 18px;
	background: #ffffff;
	color: #282828;
	border-left: 4px solid #6b7280;
	border-radius: 3px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .16 );
	pointer-events: auto;
	opacity: 0;
	transform: translateY( -10px );
	transition: opacity .28s ease, transform .28s ease;
}

.kt-toast.is-widoczny {
	opacity: 1;
	transform: translateY( 0 );
}

.kt-toast--ok    { border-left-color: #1e7a4d; }
.kt-toast--blad  { border-left-color: #b3261e; }
.kt-toast--uwaga { border-left-color: #b7791f; }

.kt-toast__tresc {
	flex: 1 1 auto;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.kt-toast__zamknij {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #6b7280;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: 3px;
}

.kt-toast__zamknij:hover { color: #282828; }

.kt-toast__zamknij:focus-visible {
	outline: 2px solid #282828;
	outline-offset: 2px;
}

/* Bez animacji dla tych, którzy jej sobie nie życzą — komunikat ma się
   po prostu pojawić, a nie wjeżdżać. */
@media ( prefers-reduced-motion: reduce ) {
	.kt-toast {
		transition: none;
		transform: none;
	}
}

@media all and ( max-width: 560px ) {
	.kt-toasty {
		right: 12px;
		left: 12px;
		top: 74px;
		width: auto;
	}
}


/* Przycisk zablokowany do czasu przejścia Turnstile (kt-formularz.js) */
.wpcf7-submit.kt-zablokowany,
.wpcf7-submit:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.kt-turnstile-info {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var( --kt-muted, #6b7280 );
}

.kt-turnstile-info[hidden] { display: none; }