/* Dodatki do oryginalnego style.css: logo marki (tekst zamiast PNG), odznaki systemów,
   przełącznik języka, opakowania tłumaczeń. */

[hidden] { display: none !important; }
i18n-t { display: contents; }

/* ---------- Logo ---------- */
.vbl-logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "League Spartan", "K2D", sans-serif; font-weight: 800;
  font-size: 34px; line-height: 1; letter-spacing: -0.5px; color: #1c1440;
  text-decoration: none; white-space: nowrap;
}
.vbl-logo-mark { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 6px 14px rgba(226, 38, 111, .35)); }
.vbl-logo-text {
  background: linear-gradient(90deg, #4a12b0 0%, #b51afc 55%, #f2572a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-top: 4px;
}
.ve_table_logo .vbl-logo { font-size: 28px; color: #1c1440; }
.ve_table_logo .vbl-logo-mark { width: 42px; height: 42px; }
.ve_table_logo .vbl-logo-text {
  background: linear-gradient(90deg, #6a14d1 0%, #b51afc 55%, #f28e27 100%);
  -webkit-background-clip: text; background-clip: text;
}
.ve_footer_logo .vbl-logo { font-size: 30px; }

@media (max-width: 575px) {
  .vbl-logo { font-size: 26px; gap: 10px; }
  .vbl-logo-mark { width: 40px; height: 40px; }
}

/* ---------- Zgodność z systemami (zamiast mwc-btn.png) ---------- */
.vbl-os { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 4px auto 0; }
.vbl-os-item {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-width: 136px; padding: 7px 14px; border-radius: 6px;
  border: 1px solid rgba(39, 30, 66, .25); background: rgba(255, 255, 255, .55);
  color: #271e42; line-height: 1.15; text-align: left;
  filter: drop-shadow(0 0 15px rgba(88, 86, 168, .2));
}
.vbl-os-item small { font-size: 10px; font-weight: 500; opacity: .8; }
.vbl-os-item b { font-size: 17px; font-weight: 700; }
.vbl-os-sm .vbl-os-item { min-width: 92px; padding: 4px 9px; }
.vbl-os-sm .vbl-os-item small { font-size: 8px; }
.vbl-os-sm .vbl-os-item b { font-size: 13px; }
.ve_faq_pymnt_main .vbl-os-item { color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }

/* pasek metod płatności (SVG) — wysokość jak oryginalny PNG */
img[data-payments-strip] { height: 40px; width: auto; max-width: 100%; }
.ve_table_pymnt_section img[data-payments-strip] { height: 34px; }

/* ---------- Przełącznik języka (miejsce jak widżet gtranslate: prawy górny róg) ---------- */
.vbl-lang {
  position: fixed; top: 12px; right: 12px; z-index: 100000;
  display: flex; gap: 2px; padding: 3px;
  background: rgba(16, 12, 40, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.vbl-lang button {
  appearance: none; border: 0; cursor: pointer;
  min-width: 40px; height: 30px; padding: 0 10px; border-radius: 999px;
  font: 700 13px/1 "K2D", sans-serif; letter-spacing: .5px;
  color: rgba(255, 255, 255, .78); background: transparent;
  transition: background .15s, color .15s;
}
.vbl-lang button:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.vbl-lang button[aria-pressed="true"] { color: #fff; background: linear-gradient(90deg, #7c3aed, #db2777); }
.vbl-lang button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.vbl-lang.vbl-lang-inline { position: static; display: inline-flex; box-shadow: none; }
.vbl-lang.vbl-lang-under-logo { display: flex; width: max-content; margin: 14px auto 0; }
@media (max-width: 575px) {
  .vbl-lang button { min-width: 36px; height: 28px; font-size: 12px; }
}

/* ---------- PL/DE: bez „Wielkich Liter W Każdym Słowie” (oryginał: text-transform: capitalize) ---------- */
html:not([lang="en"]) a,
html:not([lang="en"]) a:hover,
html:not([lang="en"]) a:focus,
html:not([lang="en"]) .ve_grdnt_heading,
html:not([lang="en"]) .ve_heading,
html:not([lang="en"]) .ve_top_bar p,
html:not([lang="en"]) .ve_banner_top_heading h4,
html:not([lang="en"]) .ve_banner_main_heading h1,
html:not([lang="en"]) .ve_banner_video_left ul li p,
html:not([lang="en"]) .ve_banner_feature_section ul li,
html:not([lang="en"]) .ve_magic_slider_box h4,
html:not([lang="en"]) .ve_feature_slide_head h4,
html:not([lang="en"]) .ve_feature_slider_inner .swiper-pagination-bullet,
html:not([lang="en"]) .ve_feature2_slider_inner .swiper-pagination-bullet,
html:not([lang="en"]) .ve_step_inner_head h2,
html:not([lang="en"]) .ve_step_content h4,
html:not([lang="en"]) .ve_service_content h4,
html:not([lang="en"]) .ve_service_btn p,
html:not([lang="en"]) .ve_use_heading,
html:not([lang="en"]) .ve_use_left_box ul li p,
html:not([lang="en"]) .ve_use_right_box p,
html:not([lang="en"]) .ve_trim_content h4,
html:not([lang="en"]) .ve_table_name,
html:not([lang="en"]) .ve_footer_box ul li,
html:not([lang="en"]) .ve_footer_box ul li a { text-transform: none; }

/* ---------- Wersja React: linki zamiast przycisków, osobny wariant na telefon ---------- */
.vbl-lang .vbl-lang-btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  min-width: 40px; height: 30px; padding: 0 10px; border-radius: 999px;
  font: 700 13px/1 "K2D", sans-serif; letter-spacing: .5px; color: rgba(255, 255, 255, .78);
  transition: background .15s, color .15s;
}
.vbl-lang .vbl-lang-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.vbl-lang .vbl-lang-btn[aria-current="true"] { color: #fff; background: linear-gradient(90deg, #7c3aed, #db2777); }
.vbl-lang-mobile { display: none !important; }
@media (max-width: 575px) {
  .vbl-lang-floating { display: none !important; }
  .vbl-lang-mobile { display: flex !important; width: max-content; margin: 14px auto 0; }
}

/* ---------- Neutralizacja resetu Tailwinda (preflight) z szablonu Lovable ----------
   Preflight zmienia m.in. img/video na display:block (przesuwa ikony, zmienia wysokości 148 elementów),
   ustawia border-style:solid, vertical-align:middle, zdejmuje podkreślenia linków.
   Reguły mają zerową specyficzność (:where), więc każda reguła z style.css/checkout.css nadal wygrywa;
   przywracają tylko zachowanie przeglądarki tam, gdzie oryginał nic nie ustawiał.
   Zmierzone na podglądzie Lovable: różnica stylów z/bez Tailwinda 1656 → 0 elementów (landing). */
:where(.vbl-landing, .co-page) :where(img, video, svg, canvas, iframe, embed, object) { display: revert; vertical-align: revert; }
:where(.vbl-landing, .co-page) :where(img, video) { max-width: revert; height: revert; }
:where(.vbl-landing, .co-page, .vbl-landing *, .co-page *, .vbl-landing ::before, .vbl-landing ::after, .co-page ::before, .co-page ::after) { border-style: revert; }
:where(.vbl-landing, .co-page) :where(button, input, select, textarea) { font: revert; color: revert; background-color: revert; margin: revert; padding: revert; }
:where(.vbl-landing, .co-page) :where(a) { color: revert; text-decoration: revert; }
:where(.vbl-landing, .co-page) :where(small) { font-size: revert; }

/* ---------- Przycisk CTA (.ve_btn): polski tekst jest dłuższy niż angielski oryginał,
   więc w stałej wysokości pigułki zawijał się i wypychał poza tło.
   Pigułka rozciąga się teraz razem z tekstem (background-size 100% 100%), wysokość rośnie. ---------- */
.ve_btn {
  height: auto;
  min-height: 93px;
  line-height: 1.12;
  padding: 5px 26px 9px;
  background-size: 100% 100%;
  text-align: center;
}
.ve_table_pymnt_section .ve_btn { min-height: 59px; padding: 3px 18px 6px; }
@media (max-width: 767px) {
  .ve_btn { min-height: 65px; }
  .ve_table_pymnt_section .ve_btn { min-height: 45px; }
}
@media (max-width: 575px) {
  .ve_btn { min-height: 60px; }
}
@media (max-width: 480px) {
  .ve_btn { min-height: 50px; }
}
@media (max-width: 425px) {
  .ve_table_pymnt_section .ve_btn { min-height: 40px; }
}
@media (max-width: 375px) {
  .ve_table_pymnt_section .ve_btn { min-height: 36px; }
}

/* Ramka nagłówka slajdu: dłuższy polski tytuł mieści się w kadrze */
.vbl-landing .ve_feat_head_7 h4 {
  font-size: 20px;
  padding: 0 24px;
  white-space: nowrap;
}

/* ---------- Demo (slot v61) jest po angielsku — na razie nie pokazujemy go na polskiej
   stronie. Klasę .vbl-no-demo dostawia tylko locale "pl" (src/routes/{-$locale}/index.tsx),
   więc wersje EN i DE zostają bez zmian. ---------- */
.vbl-no-demo .ve_service_head .ve_grdnt_heading,
.vbl-no-demo .ve_service_mid {
  display: none;
}