/* Klasy wielokrotnego użytku do wpisania w polu "Klasa CSS" modułu Divi (Zaawansowane > Atrybuty CSS).
   tk-karty    - klasa wiersza: kolumny jako równe karty obok siebie (na telefonie jedna pod drugą).
   tk-przycisk - klasa modułu Przycisk: czarna pigułka, padding 3px 26px (jak przyciski w koszyku i koncie). */
.tk-karty.et_pb_row { display: flex; align-items: stretch; gap: 24px; }
.tk-karty.et_pb_row::before,
.tk-karty.et_pb_row::after { display: none !important; content: none !important; }
.tk-karty.et_pb_row > .et_pb_column { flex: 1 1 0; width: auto !important; margin: 0 !important; float: none; }
.tk-karty .et_pb_column > .et_pb_module:last-child { margin-bottom: 0 !important; }
.tk-karty .et_pb_blurb_content { max-width: none; }

#et-boc a.et_pb_button.tk-przycisk,
#et-boc .tk-przycisk .et_pb_button,
#et-boc .tk-formularz .et_pb_contact_submit {
  padding: 3px 26px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  transition: background 0.2s ease;
}
#et-boc a.et_pb_button.tk-przycisk:hover,
#et-boc .tk-przycisk .et_pb_button:hover,
#et-boc .tk-formularz .et_pb_contact_submit:hover { background: #3a3a3c !important; }
#et-boc a.et_pb_button.tk-przycisk::after,
#et-boc .tk-przycisk .et_pb_button::after,
#et-boc .tk-formularz .et_pb_contact_submit::after { display: none !important; }

@media (max-width: 980px) {
  .tk-karty.et_pb_row { flex-direction: column; gap: 16px; }
  .tk-karty.et_pb_row > .et_pb_column { flex: 0 0 auto; width: 100% !important; }
}

/* wygląd karty: robi go CSS (nie ustawienia kolumny w builderze, które czekają na odświeżenie cache Divi) */
.tk-karty.et_pb_row { margin-top: 12px; margin-bottom: 24px; }
.tk-karty.et_pb_row > .et_pb_column {
  box-sizing: border-box; padding: 28px; background: #fff;
  border: 1px solid #e5e5ea; border-radius: 18px;
}
.tk-karty .et_pb_main_blurb_image { margin-bottom: 14px; text-align: left; }
.tk-karty .et_pb_main_blurb_image .et_pb_image_wrap { display: block; text-align: left; }
.tk-karty .et_pb_main_blurb_image .et-pb-icon { font-size: 32px !important; line-height: 1; }
.tk-karty .et_pb_module_header { padding: 0 !important; margin-bottom: 8px; }
.tk-karty .et_pb_blurb_description a { color: #0066cc; text-decoration: none; }
.tk-karty .et_pb_blurb_description a:hover { text-decoration: underline; }
.tk-karty .et_pb_button_module_wrapper { margin-top: 18px; }

/* formularz kontaktowy Divi (klasa tk-formularz na module): pola-pigułki jak w sklepie */
.tk-formularz .et_pb_contact_form p { padding: 0 0 14px !important; }
.tk-formularz .et_pb_contact_form input[type="text"],
.tk-formularz .et_pb_contact_form input[type="email"],
.tk-formularz .et_pb_contact_form input[type="tel"],
.tk-formularz .et_pb_contact_form .input {
  height: 50px; padding: 0 20px !important; box-sizing: border-box;
  border: 1px solid #c8c8c8 !important; border-radius: 999px !important; background: #fff !important; color: #111 !important; font-size: 16px !important;
}
.tk-formularz .et_pb_contact_form textarea {
  min-height: 140px; padding: 14px 20px !important; box-sizing: border-box;
  border: 1px solid #c8c8c8 !important; border-radius: 24px !important; background: #fff !important; color: #111 !important; font-size: 16px !important;
}
.tk-formularz .et_pb_contact_form input:focus,
.tk-formularz .et_pb_contact_form textarea:focus { border-color: #111 !important; outline: none; }
.tk-formularz .et_pb_contact_field_options_wrapper,
.tk-formularz .et_pb_contact_field_checkbox { font-size: 14px; color: #424245; }
.tk-formularz .et_pb_contact_form .et_pb_contact_submit { cursor: pointer; }
.tk-formularz .et_pb_contact_message { margin: 0 0 14px; padding: 14px 18px; border-radius: 14px; background: #f5f5f7; color: #1d1d1f; }
.tk-formularz .et_contact_error input, .tk-formularz .et_contact_error textarea { border-color: #d70015 !important; }

/* formularz kontaktowy: kompaktowy układ - trzy pola w jednym rzędzie, niska wiadomość (rośnie po kliknięciu),
   zgoda i przycisk w jednej linii */
.tk-formularz .et_pb_contact_main_title { margin: 0 0 16px; padding: 0; font-size: 22px !important; line-height: 1.3; font-weight: 600; color: #1d1d1f; }
.tk-formularz form.et_pb_contact_form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.tk-formularz form.et_pb_contact_form > p.et_pb_contact_field { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; clear: none !important; }
.tk-formularz form.et_pb_contact_form > p[data-id="wiadomosc"] { grid-column: 1 / -1; }
.tk-formularz form.et_pb_contact_form > p[data-id="zgoda"] { grid-column: 1 / span 2; align-self: center; }
.tk-formularz form.et_pb_contact_form > .et_contact_bottom_container { grid-column: 3; margin: 0; padding: 0; display: flex; justify-content: flex-end; align-items: center; float: none; }
.tk-formularz .et_pb_contact_form input[type="text"],
.tk-formularz .et_pb_contact_form input[type="email"],
.tk-formularz .et_pb_contact_form .input { height: 44px; padding: 0 18px !important; font-size: 15px !important; }
.tk-formularz .et_pb_contact_form textarea { min-height: 84px; height: 84px; padding: 11px 18px !important; font-size: 15px !important; border-radius: 22px !important; resize: vertical; transition: height 0.2s ease; }
.tk-formularz .et_pb_contact_form textarea:focus { height: 150px; }
.tk-formularz .et_pb_contact_field_options_title,
.tk-formularz .et_pb_contact_field_checkbox label { font-size: 13px; line-height: 1.45; color: #6e6e73; }
.tk-formularz .et_pb_contact_field_options_title { display: block; margin: 0 0 4px; }
.tk-formularz .et_pb_contact_field_checkbox { margin: 0; }
.tk-formularz .et_pb_contact_form .et_pb_contact_submit { margin: 0; float: none; }
.tk-formularz .et_pb_contact_form .et-pb-contact-message { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .tk-formularz form.et_pb_contact_form { grid-template-columns: 1fr; }
  .tk-formularz form.et_pb_contact_form > p[data-id="zgoda"],
  .tk-formularz form.et_pb_contact_form > .et_contact_bottom_container { grid-column: 1; }
  .tk-formularz form.et_pb_contact_form > .et_contact_bottom_container { justify-content: flex-start; }
}

/* zgoda w formularzu: pole wyboru obok tekstu, jeden komunikat (Divi dubluje treść w etykiecie nagłówkowej) */
.tk-formularz p[data-id="zgoda"] > .et_pb_contact_form_label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk-formularz p[data-id="zgoda"] .et_pb_contact_field_options_wrapper { display: block; margin: 0; }
.tk-formularz p[data-id="zgoda"] .et_pb_contact_field_options_wrapper > label { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.tk-formularz p[data-id="zgoda"] .et_pb_contact_field_options_wrapper > label i { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid #c8c8c8; border-radius: 5px; background: #fff; }
.tk-formularz p[data-id="zgoda"] .et_pb_contact_field_options_title { display: inline; margin: 0; font-weight: 400 !important; font-size: 13px; line-height: 1.45; color: #6e6e73; }

/* przycisk wysyłki w osobnej linii pod zgodą */
.tk-formularz form.et_pb_contact_form > p[data-id="zgoda"] { grid-column: 1 / -1; }
.tk-formularz form.et_pb_contact_form > .et_contact_bottom_container { grid-column: 1 / -1; justify-content: flex-start; }

/* ---- formularz: marginesy, widoczne etykiety, delikatne zaokrąglenie pola wiadomości ---- */
.tk-formularz .et_pb_contact_form_container { padding: 0; }
.tk-formularz form.et_pb_contact_form { margin: 0 !important; width: 100% !important; }
.tk-formularz .et_pb_contact_form .et_pb_contact_field { box-sizing: border-box; }
/* etykieta nad polem (zamiast samego placeholdera) */
.tk-formularz p.et_pb_contact_field:not([data-id="zgoda"]) > label.et_pb_contact_form_label {
  display: block !important; position: static !important; width: auto; height: auto; overflow: visible; clip: auto;
  margin: 0 0 6px 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #424245;
}
.tk-formularz .et_pb_contact_form input::placeholder,
.tk-formularz .et_pb_contact_form textarea::placeholder { color: transparent; }
.tk-formularz .et_pb_contact_form textarea { border-radius: 12px !important; min-height: 110px; height: 110px; padding: 12px 18px !important; }
.tk-formularz .et_pb_contact_form textarea:focus { height: 170px; }
.tk-formularz .et_pb_contact_form input:focus-visible,
.tk-formularz .et_pb_contact_form textarea:focus-visible { box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12); }

/* ---- hero strony (klasa tk-hero na pierwszej sekcji): ciemny pas, duży tytuł, czerwony akcent ---- */
.tk-hero.et_pb_section { background: #111 !important; padding: 56px 0 52px !important; }
.tk-hero h1 {
  margin: 0; padding: 0 !important; color: #fff !important;
  font-size: clamp(42px, 7vw, 72px) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -0.03em;
}
.tk-hero h1::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 20px; border-radius: 3px; background: #dd3333; }
.tk-hero .et_pb_text_inner { color: #e5e5ea; }
.tk-hero .et_pb_text:not(:first-child) .et_pb_text_inner,
.tk-hero .tk-haslo { max-width: 640px; font-size: clamp(18px, 2.4vw, 24px) !important; line-height: 1.5 !important; font-weight: 500; color: #f5f5f7 !important; }
.tk-hero .tk-haslo strong { color: #fff; }
.tk-hero .et_pb_row { margin-bottom: 0 !important; }
.tk-hero + .et_pb_section { padding-top: 36px; }
@media (max-width: 600px) { .tk-hero.et_pb_section { padding: 36px 0 32px !important; } .tk-hero h1::after { width: 56px; height: 5px; margin-top: 16px; } }

/* pole wiadomości: delikatne zaokrąglenie (wyższa specyficzność niż reguła .input z pigułkami) */
.tk-formularz .et_pb_contact_form textarea.input,
.tk-formularz .et_pb_contact_form p textarea { border-radius: 12px !important; }

/* tytuł w hero: biały (Divi ustawia kolor nagłówka strony wyższą specyficznością) */
#et-boc .tk-hero .et_pb_text .et_pb_text_inner h1,
#et-boc .tk-hero h1.entry-title,
#et-boc .tk-hero h1 { color: #fff !important; }