/* VANTA system UI — S4.1 (tokeny + przyciski). Ciemny motyw zostaje. */
:root {
  --vanta-bg: #080808;
  --vanta-panel: #121212;
  --vanta-line: #2a2a2a;
  --vanta-text: #e4e4e4;
  --vanta-heading: #ffffff;
  --vanta-muted: #9a9a94;
  --vanta-accent: #fd3f00;
  --vanta-accent-hover: #ff5a1f;
  --vanta-on-accent: #080808;
  --vanta-focus: #ffffff;
  --vanta-error: #ff6b5e;
  --vanta-success: #2fbf71;
}

/* —— Przycisk główny —— */
a.theme-btn,
button.theme-btn,
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  box-sizing: border-box;
  min-height: 54px;
  padding: 0 20px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--vanta-accent);
  color: var(--vanta-on-accent) !important;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.18s ease, transform 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}

a.theme-btn:hover,
button.theme-btn:hover,
.theme-btn:hover {
  background: var(--vanta-accent-hover);
  color: var(--vanta-on-accent) !important;
  box-shadow: none;
  text-decoration: none !important;
  transform: translateY(-2px);
}

a.theme-btn:focus-visible,
button.theme-btn:focus-visible,
.theme-btn:focus-visible {
  outline: 3px solid var(--vanta-focus);
  outline-offset: 3px;
}

a.theme-btn:disabled,
button.theme-btn:disabled,
.theme-btn:disabled,
a.theme-btn.is-disabled {
  background: #2a2a2a;
  color: #777 !important;
  cursor: not-allowed;
  transform: none;
}

.theme-btn__arrow {
  flex: 0 0 auto;
  font-size: 1.05em;
  line-height: 1;
  speak: never;
}

/* —— Przycisk drugorzędny —— */
a.theme-btn.theme-btn--ghost,
button.theme-btn.theme-btn--ghost,
.theme-btn.theme-btn--ghost {
  background: transparent;
  color: var(--vanta-heading) !important;
  border: 1px solid var(--vanta-line);
  box-shadow: none;
}

a.theme-btn.theme-btn--ghost:hover,
button.theme-btn.theme-btn--ghost:hover,
.theme-btn.theme-btn--ghost:hover {
  background: transparent;
  border-color: var(--vanta-heading);
  color: var(--vanta-heading) !important;
  transform: translateY(-2px);
}

/* Formularz / pełna szerokość */
.contact-form .theme-btn,
#vanta-contact-form .theme-btn,
.pp-form .theme-btn,
form .theme-btn[type="submit"],
button.theme-btn[type="submit"] {
  width: 100%;
}

/* Karty pakietów: przycisk na dole, pełna szerokość */
.pkg .theme-btn {
  width: 100%;
  margin-top: auto;
}

@media (max-width: 575.98px) {
  a.theme-btn,
  button.theme-btn,
  .theme-btn {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.theme-btn,
  button.theme-btn,
  .theme-btn,
  a.theme-btn:hover,
  button.theme-btn:hover,
  .theme-btn:hover {
    transition: none;
    transform: none;
  }
}

/* —— 404: ten sam system —— */
.error-404 .btn,
body > main .actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 0;
  background: var(--vanta-accent);
  color: var(--vanta-on-accent) !important;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.error-404 .btn:hover,
body > main .actions .btn:hover {
  background: var(--vanta-accent-hover);
  color: var(--vanta-on-accent) !important;
  filter: none;
  transform: translateY(-2px);
}

/* —— Pasek mobilny CTA (spójny kolor tekstu) —— */
.vanta-mobile-cta__plan {
  border-radius: 0 !important;
  background: var(--vanta-accent) !important;
  color: var(--vanta-on-accent) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-weight: 700 !important;
}

.vanta-mobile-cta__plan:hover,
.vanta-mobile-cta__plan:focus-visible {
  background: var(--vanta-accent-hover) !important;
  color: var(--vanta-on-accent) !important;
}

.vanta-mobile-cta__phone {
  border-radius: 0 !important;
}

/* —— S4.6 Formularz: etykiety nad polami —— */
#vanta-contact-form .vanta-field {
  margin: 0 0 22px;
}

#vanta-contact-form .vanta-field__label {
  display: block;
  margin: 0 0 8px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--vanta-heading);
}

#vanta-contact-form .vanta-field input[type="text"],
#vanta-contact-form .vanta-field textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--vanta-line);
  border-radius: 0;
  background: transparent;
  color: var(--vanta-text);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  resize: vertical;
}

#vanta-contact-form .vanta-field textarea {
  min-height: 110px;
}

#vanta-contact-form .vanta-field input::placeholder,
#vanta-contact-form .vanta-field textarea::placeholder {
  color: var(--vanta-muted);
  opacity: 1;
}

#vanta-contact-form .vanta-field input:focus,
#vanta-contact-form .vanta-field textarea:focus {
  outline: none;
  border-bottom-width: 2px;
  border-bottom-color: var(--vanta-focus);
  padding-bottom: 11px;
}

#vanta-contact-form .vanta-field__hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--vanta-muted);
}

#vanta-contact-form .vanta-field__error,
#vanta-contact-form .form-rodo .vanta-field__error {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--vanta-error);
}

#vanta-contact-form .vanta-field.is-invalid input,
#vanta-contact-form .vanta-field.is-invalid textarea {
  border-bottom-color: var(--vanta-error);
}

#vanta-contact-form .form-rodo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 18px;
}

#vanta-contact-form .form-rodo .vanta-field__error {
  flex: 1 1 100%;
  margin: 0;
}

#vanta-contact-form .form-rodo.is-invalid {
  outline: 1px solid var(--vanta-error);
  outline-offset: 6px;
}

#vanta-contact-form .form-error {
  color: var(--vanta-error);
}

#form-success.form-success,
.cta-from .form-success {
  border: 1px solid var(--vanta-success);
  border-radius: 0;
  padding: 24px 16px;
}

#form-success .vanta-mark-accent,
.cta-from .form-success .vanta-mark-accent {
  stroke: var(--vanta-success);
}

/* --- Nagłówek strony głównej 992–1199 px: menu nie wchodzi na logo (27.10.2026) --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header #navbar ul.nav > li > a { padding-left: 6px !important; padding-right: 6px !important; font-size: 12px !important; letter-spacing: 0 !important; }
}

/* --- Audyt Figma AI (27.10.2026): czytelność, cele dotykowe, fokus --- */
/* Tekst pomocniczy min. 14 px (etykiety wielkimi literami mogą mieć 12 px) */
.vanta-field__label, .vanta-field__hint, .funfact-label, figcaption, blockquote footer,
label[for="rodo"], label[for="rodo"] a, .vanta-consent, .vanta-consent a { font-size: 14px !important; line-height: 1.5; }

/* Checkbox zgody: większy (24 px) i z widocznym fokusem */
#rodo, input[type="checkbox"][name="rodo"] { width: 24px !important; height: 24px !important; accent-color: #fd3f00; flex: 0 0 auto; }
#rodo:focus-visible, input[type="checkbox"][name="rodo"]:focus-visible { outline: 2px solid #fd3f00; outline-offset: 2px; }

/* Pola formularza: wyraźne pomarańczowe podkreślenie przy fokusie (styl z linią zostaje) */
.vanta-field input:focus-visible, .vanta-field textarea:focus-visible, .vanta-field select:focus-visible,
.cta-from input:not([type="checkbox"]):focus-visible, .cta-from textarea:focus-visible {
  outline: none; border-bottom-color: #fd3f00 !important; box-shadow: 0 2px 0 0 #fd3f00 !important;
}

/* Kropki karuzeli: obszar kliknięcia 24 px przy tym samym wyglądzie */
.owl-dots .owl-dot { box-sizing: content-box !important; padding-top: 9px !important; padding-bottom: 9px !important; background-clip: content-box !important; }

/* Telefon i tablet: cele dotykowe min. 44 px */
@media (max-width: 991.98px) {
  .vanta-text-link, .service-single-link { display: inline-flex; align-items: center; min-height: 44px; }
  header .navbar-toggler.open-btn { min-width: 44px; min-height: 44px; }
  .cart-toggle-btn { min-height: 44px; }
  a[aria-label^="Facebook"], a[aria-label^="Instagram"], a[aria-label^="Wizytówka"] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  footer a, .pp-footer a, .widget a[href^="tel:"], .widget a[href^="mailto:"], .widget .social a { display: inline-flex; align-items: center; min-height: 44px; }
  .cc-settings-link { min-height: 44px; }
  .case .more, .service-card .text h3 a, .pp-toc a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Kontakt: „Co będzie dalej?” */
.widget-dalej { border-left: 2px solid #fd3f00; padding-left: 16px; }
.dalej-lista { margin: 8px 0 0; padding-left: 1.2em; color: var(--text, #e4e4e4); }
.dalej-lista li + li { margin-top: 6px; }

/* Darmowy plan: przycisk pod wstępem */
.pp-intro-cta { margin: 24px 0 8px; }

/* --- Jakość (27.10.2026, po audycie Figma AI + testach) --- */
/* Komputer: linki w stopkach, spisie treści i na 404 min. 24 px wysokości (WCAG 2.2 AA, 2.5.8) */
@media (min-width: 992px) {
  footer a, .pp-footer a, .pp-toc a, .widget a[href^="tel:"], .widget a[href^="mailto:"], .footer-nap a,
  body > header > nav a, body > main .actions a, .cc-settings-link {
    display: inline-flex; align-items: center; min-height: 28px;
  }
}

/* Karta realizacji: cała karta otwiera case study — assets/js/vanta-case-cards.js (przycisk zostaje dla klawiatury i czytników) */
.case-card { position: relative; cursor: pointer; }
.case-card-open:focus-visible { outline: 2px solid #fd3f00; outline-offset: 3px; }
@media (hover: hover) {
  .case-card, .service-card, .area-card, .pkg-card { transition: border-color .18s ease, box-shadow .18s ease; }
  .case-card:hover, .service-card:hover, .area-card:hover, .pkg-card:hover { border-color: #4a4a4a; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
}

/* Pasek zaufania pod hasłem: czytelne „plakietki” zamiast tekstu wyglądającego jak separator */
.hero-section .hero-trust { gap: 10px 10px; }
.hero-section .hero-trust li {
  font-size: 15px; color: #e4e4e4; padding: 8px 14px; min-height: 40px;
  border: 1px solid #2a2a2a; border-radius: 999px; background: rgba(20, 20, 20, .7);
}

/* Nagłówki: równe podziały linii (bez pojedynczych słów w ostatnim wierszu) */
h1, h2, h3 { text-wrap: balance; }

/* Telefon i tablet: krótsza strona — odstępy między sekcjami o ok. 20% mniejsze */
@media (max-width: 991px) { .section-padding { padding-top: 72px; padding-bottom: 72px; } }
@media (max-width: 767px) { .section-padding { padding-top: 64px; padding-bottom: 64px; } }

@media (prefers-reduced-motion: reduce) {
  .case-card, .service-card, .area-card, .pkg-card { transition: none; }
}

/* Telefon: plakietki paska zaufania po dwie w rzędzie */
@media (max-width: 575.98px) {
  .hero-section .hero-trust li { flex: 1 1 calc(50% - 5px); border-radius: 12px; font-size: 14px; padding: 8px 10px; line-height: 1.3; }
}

/* Karty usług: czytelny szary (#a6a6a6 na #141414 ≈ 7,4:1; wcześniej #5e5f63 ≈ 2,9:1) — Lighthouse 27.10.2026 */
.service-card .content .text p { color: #a6a6a6; }