/* Wektor Wiedzy – Asystent oferty (czat).
   Kolor główny = kolor główny Elementora strony (#17468F), font = font strony („Wektor Montserrat Home”).
   Wszystko pod #wdr — style przycisków i pól z Elementora/motywu (np. .elementor-kit-N button:hover)
   mają niższą wagę niż identyfikator, więc nie przebarwią czatu. */

#wdr {
	--wdr-granat: #17468F;
	--wdr-granat-ciemny: #10346C;
	--wdr-tlo: #F3F6FB;
	--wdr-ramka: #DCE4F0;
	--wdr-tekst: #1B2537;
	--wdr-szary: #5E6A80;
	--wdr-jasny: #E8EEF8;
	--wdr-zielony: #457C00;
	font-family: "Wektor Montserrat Home", Montserrat, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wdr-tekst);
}
#wdr *, #wdr *::before, #wdr *::after { box-sizing: border-box; }
#wdr button, #wdr input {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	min-height: 0;
	margin: 0;
}

/* przycisk otwierający */
#wdr .wdr-przycisk {
	position: fixed; right: 24px; bottom: 24px; z-index: 9990;
	width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%;
	background: var(--wdr-granat); color: #fff; cursor: pointer;
	box-shadow: 0 8px 24px rgba(23, 70, 143, .35);
	display: grid; place-items: center; transition: transform .15s;
}
#wdr .wdr-przycisk:hover, #wdr .wdr-przycisk:focus { background: var(--wdr-granat-ciemny); color: #fff; transform: scale(1.06); }
#wdr .wdr-przycisk svg { width: 28px; height: 28px; }
#wdr .wdr-zacheta {
	position: fixed; right: 96px; bottom: 34px; z-index: 9990;
	background: #fff; color: var(--wdr-tekst); font-size: 13px; font-weight: 600;
	padding: 11px 14px; border-radius: 14px 14px 4px 14px;
	box-shadow: 0 6px 20px rgba(16, 30, 60, .16); cursor: pointer; white-space: nowrap;
}
#wdr .wdr-zacheta[hidden], #wdr .wdr-okno[hidden] { display: none; }

/* okno */
#wdr .wdr-okno {
	position: fixed; right: 24px; bottom: 100px; z-index: 9991;
	width: var(--wdr-szer, 440px); max-width: calc(100vw - 48px); height: min(660px, calc(100vh - 124px));
	display: flex; flex-direction: column;
	background: var(--wdr-tlo); border-radius: 18px; overflow: hidden;
	box-shadow: 0 18px 50px rgba(16, 30, 60, .28);
}
#wdr .wdr-glowa { background: var(--wdr-granat); color: #fff; display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; flex: none; }
#wdr .wdr-glowa img { height: 26px; width: auto; display: block; }
#wdr .wdr-odstep { flex: 1; }
#wdr .wdr-glowa button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
#wdr .wdr-glowa button:hover, #wdr .wdr-glowa button:focus { background: rgba(255, 255, 255, .14); color: #fff; }
#wdr .wdr-glowa button svg { width: 18px; height: 18px; }
#wdr .wdr-pasek { background: var(--wdr-granat-ciemny); color: rgba(255, 255, 255, .82); font-size: 11.5px; font-weight: 500; padding: 6px 16px; flex: none; display: flex; align-items: center; gap: 6px; }
#wdr .wdr-pasek i { width: 7px; height: 7px; border-radius: 50%; background: #7BD34A; display: inline-block; }

#wdr .wdr-rozmowa { flex: 1; overflow-y: auto; padding: 16px 14px 8px; }
#wdr .wdr-rozmowa::-webkit-scrollbar { width: 6px; }
#wdr .wdr-rozmowa::-webkit-scrollbar-thumb { background: #c9d3e3; border-radius: 3px; }

#wdr .wdr-bot { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
#wdr .wdr-awatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #fff; border: 1px solid var(--wdr-ramka); display: grid; place-items: center; }
#wdr .wdr-awatar img { width: 20px; height: auto; }
#wdr .wdr-bot .wdr-tresc { max-width: calc(100% - 40px); min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#wdr .wdr-dymek { background: #fff; color: var(--wdr-tekst); border: 1px solid var(--wdr-ramka); border-radius: 4px 14px 14px 14px; padding: 10px 13px; font-size: 13.5px; line-height: 1.45; }
#wdr .wdr-dymek a { color: var(--wdr-granat); font-weight: 600; }
#wdr .wdr-czas { font-size: 10.5px; color: #8b95a7; margin: -2px 0 0 4px; }

#wdr .wdr-ja { display: flex; justify-content: flex-end; margin: 4px 0 12px; }
#wdr .wdr-ja .wdr-dymek { background: var(--wdr-granat); color: #fff; border-color: var(--wdr-granat); border-radius: 14px 14px 4px 14px; font-weight: 500; }

#wdr .wdr-opcje { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin: 2px 0 14px 40px; }
#wdr .wdr-opcja {
	font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--wdr-granat);
	background: #fff; border: 1.5px solid var(--wdr-granat); border-radius: 999px;
	padding: 7px 13px; cursor: pointer; text-align: left; transition: background .12s, color .12s;
}
#wdr .wdr-opcja:hover, #wdr .wdr-opcja:focus { background: var(--wdr-granat); color: #fff; border-color: var(--wdr-granat); }
#wdr .wdr-opcja small { font-size: 11px; font-weight: 500; opacity: .7; margin-left: 4px; }
#wdr .wdr-opcja.wdr-drugorzedna { border-color: var(--wdr-ramka); color: var(--wdr-szary); }
#wdr .wdr-opcja.wdr-drugorzedna:hover, #wdr .wdr-opcja.wdr-drugorzedna:focus { background: var(--wdr-jasny); color: var(--wdr-granat); border-color: var(--wdr-ramka); }
#wdr .wdr-opcje.wdr-uzyte .wdr-opcja { pointer-events: none; opacity: .45; }
#wdr .wdr-opcje.wdr-uzyte .wdr-opcja.wdr-wybrana { opacity: 1; background: var(--wdr-granat); color: #fff; border-color: var(--wdr-granat); }

/* karty oferty */
#wdr .wdr-karty { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px 40px; }
#wdr .wdr-karta { background: #fff; border: 1px solid var(--wdr-ramka); border-radius: 12px; padding: 11px 12px 12px; }
#wdr .wdr-karta-gora { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
#wdr .wdr-plakietka { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--wdr-granat); background: var(--wdr-jasny); border-radius: 999px; padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#wdr .wdr-plakietka.wdr-darmo { color: var(--wdr-zielony); background: #EAF5DD; }
#wdr .wdr-data { font-size: 12px; font-weight: 700; color: var(--wdr-tekst); white-space: nowrap; }
#wdr .wdr-karta-tytul { margin: 0 0 5px; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--wdr-tekst); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#wdr .wdr-meta { font-size: 11.5px; color: var(--wdr-szary); line-height: 1.45; }
#wdr .wdr-meta b { font-weight: 600; color: #3c4658; }
#wdr .wdr-karta-dol { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; gap: 8px; }
#wdr .wdr-cena { font-size: 14px; font-weight: 700; color: var(--wdr-granat); white-space: nowrap; }
#wdr .wdr-cena small { font-size: 11px; font-weight: 500; color: var(--wdr-szary); }
#wdr a.wdr-zobacz { font-size: 12px; font-weight: 600; color: #fff; background: var(--wdr-granat); border-radius: 999px; padding: 7px 13px; text-decoration: none; white-space: nowrap; }
#wdr a.wdr-zobacz:hover, #wdr a.wdr-zobacz:focus { background: var(--wdr-granat-ciemny); color: #fff; }

/* formularz Bitrix24 w dymku — na całą szerokość rozmowy (od 1.0.2; wcześniej wcięty pod awatar i ciasny).
   Wygląd zmieniany TYLKO tutaj: ten sam formularz w innych miejscach strony zostaje taki, jak w Bitrixie.
   Bitrix wystawia zmienne --b24-…; resztę nadpisuje #wdr (identyfikator bije klasy Bitrixa). */
#wdr .wdr-formularz { margin: 0 0 12px; background: #fff; border: 1px solid var(--wdr-ramka); border-radius: 14px; padding: 2px 0 6px; min-height: 60px; overflow: hidden; }
#wdr .wdr-formularz .b24-form {
	--b24-font-family: "Wektor Montserrat Home", Montserrat, Arial, sans-serif;
	--b24-font-family-default: "Wektor Montserrat Home", Montserrat, Arial, sans-serif;
	--b24-primary-color: #17468F;
	--b24-primary-hover-color: #10346C;
	--b24-primary-text-color: #fff;
	--b24-text-color: #1B2537;
	--b24-background-color: #fff;
	--b24-field-background-color: #fff;
	--b24-field-border-color: #DCE4F0;
	--b24-field-focus-background-color: #fff;
	font-family: "Wektor Montserrat Home", Montserrat, Arial, sans-serif;
}
#wdr .wdr-formularz .b24-form-wrapper { max-width: none; border-bottom: 0; background: transparent; box-shadow: none; }
#wdr .wdr-formularz .b24-form-header-padding { padding: 4px; }
#wdr .wdr-formularz .b24-form-content { padding: 8px 14px 2px; }
#wdr .wdr-formularz .b24-form-field { margin: 0 0 10px; }
#wdr .wdr-formularz .b24-form-control-container { margin-bottom: 0; }
#wdr .wdr-formularz input.b24-form-control,
#wdr .wdr-formularz select.b24-form-control,
#wdr .wdr-formularz textarea.b24-form-control {
	font-family: inherit; font-size: 14px; color: var(--wdr-tekst);
	background: #fff; border: 1.5px solid var(--wdr-ramka); border-radius: 10px;
	height: 50px; box-shadow: none; transition: border-color .12s, box-shadow .12s;
}
#wdr .wdr-formularz textarea.b24-form-control { height: auto; }
#wdr .wdr-formularz input.b24-form-control:hover,
#wdr .wdr-formularz select.b24-form-control:hover,
#wdr .wdr-formularz textarea.b24-form-control:hover { border-color: #b9c7dd; }
#wdr .wdr-formularz input.b24-form-control:focus,
#wdr .wdr-formularz select.b24-form-control:focus,
#wdr .wdr-formularz textarea.b24-form-control:focus { border-color: var(--wdr-granat); background: #fff; box-shadow: 0 0 0 3px rgba(23, 70, 143, .12); outline: none; }
#wdr .wdr-formularz .b24-form-control-label { font-family: inherit; font-size: 13px; color: var(--wdr-szary); }
#wdr .wdr-formularz .b24-form-control-required { color: #c8102e; }
/* pytania z wyborem („Godzina kontaktu”, „Gdzie pracujesz?”) — jak przyciski w czacie, bez szarej skrzynki i ramek przeglądarki */
#wdr .wdr-formularz .b24-form-field-radio,
#wdr .wdr-formularz .b24-form-field-checkbox { background: transparent; border: 0; padding: 0; border-radius: 0; }
#wdr .wdr-formularz fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
#wdr .wdr-formularz fieldset legend.b24-form-control-label { position: static; display: block; float: none; width: auto; padding: 0; margin: 2px 0 7px; font-size: 13px; font-weight: 600; color: var(--wdr-tekst); }
#wdr .wdr-formularz .b24-form-field-radio label.b24-form-control,
#wdr .wdr-formularz .b24-form-field-checkbox label.b24-form-control {
	display: inline-flex; align-items: center; gap: 7px; height: auto; min-height: 0;
	margin: 0 6px 6px 0; padding: 8px 13px; background: #fff;
	border: 1.5px solid var(--wdr-ramka); border-radius: 999px; font-size: 13px; color: var(--wdr-tekst); cursor: pointer;
}
#wdr .wdr-formularz .b24-form-field-radio label.b24-form-control:hover,
#wdr .wdr-formularz .b24-form-field-checkbox label.b24-form-control:hover { border-color: var(--wdr-granat); }
#wdr .wdr-formularz label.b24-form-control:has(input:checked) { border-color: var(--wdr-granat); background: var(--wdr-jasny); color: var(--wdr-granat); font-weight: 600; }
#wdr .wdr-formularz input[type="radio"],
#wdr .wdr-formularz input[type="checkbox"] { accent-color: var(--wdr-granat); width: 16px; height: 16px; margin: 0; flex: none; }
#wdr .wdr-formularz .b24-form-control-desc { font-family: inherit; color: inherit; }
/* Bitrix barwi tekst zaznaczonej odpowiedzi na biało (pod swoje ciemne tło) — u nas tło jest jasne */
#wdr .wdr-formularz label.b24-form-control input:checked ~ .b24-form-control-desc,
#wdr .wdr-formularz label.b24-form-control:has(input:checked) .b24-form-control-desc { color: var(--wdr-granat); }
#wdr .wdr-formularz .b24-form-field-agreement { font-size: 12px; line-height: 1.45; color: var(--wdr-szary); }
#wdr .wdr-formularz .b24-form-field-agreement a { color: var(--wdr-granat); }
#wdr .wdr-formularz .b24-form-btn-container { margin: 4px 0 0; }
#wdr .wdr-formularz .b24-form-btn-block { padding: 0; }
#wdr .wdr-formularz button.b24-form-btn {
	font-family: inherit; font-size: 14px; font-weight: 700; color: #fff;
	background: var(--wdr-granat); border: 0; border-radius: 999px; height: 46px; padding: 0 20px; box-shadow: none;
}
#wdr .wdr-formularz button.b24-form-btn:hover, #wdr .wdr-formularz button.b24-form-btn:focus { background: var(--wdr-granat-ciemny); color: #fff; }
#wdr .wdr-formularz .b24-form-sign { padding: 6px 14px 0; }

/* pisze… */
#wdr .wdr-pisze { display: inline-flex; gap: 4px; padding: 13px 14px; }
#wdr .wdr-pisze span { width: 7px; height: 7px; border-radius: 50%; background: #9aa8c0; animation: wdr-skok 1s infinite; }
#wdr .wdr-pisze span:nth-child(2) { animation-delay: .15s; }
#wdr .wdr-pisze span:nth-child(3) { animation-delay: .3s; }
@keyframes wdr-skok { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* pole tekstowe */
#wdr .wdr-stopka { flex: none; background: #fff; border-top: 1px solid var(--wdr-ramka); padding: 10px 12px; }
#wdr .wdr-pole { display: flex; gap: 8px; align-items: center; margin: 0; }
#wdr .wdr-pole input { flex: 1; min-width: 0; height: auto; font-size: 13.5px; font-weight: 500; color: var(--wdr-tekst); background: #fff; border: 1.5px solid var(--wdr-ramka); border-radius: 999px; padding: 10px 14px; outline: none; }
#wdr .wdr-pole input:focus { border-color: var(--wdr-granat); }
#wdr .wdr-pole button { width: 40px; height: 40px; flex: none; padding: 0; border-radius: 50%; border: 0; background: var(--wdr-granat); color: #fff; cursor: pointer; display: grid; place-items: center; }
#wdr .wdr-pole button:hover, #wdr .wdr-pole button:focus { background: var(--wdr-granat-ciemny); color: #fff; }
#wdr .wdr-pole button svg { width: 18px; height: 18px; }
#wdr .wdr-info { font-size: 10.5px; color: #8b95a7; margin: 7px 4px 0; }

@media (max-width: 480px) {
	#wdr .wdr-okno { right: 0; bottom: 0; width: 100%; max-width: none; height: 100%; border-radius: 0; }
	#wdr .wdr-zacheta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	#wdr .wdr-pisze span { animation: none; }
	#wdr .wdr-przycisk { transition: none; }
}