/* ============================================================
   wycena.css — strona /wycena/ („Otrzymaj wycenę")
   ------------------------------------------------------------
   Tylko to, czego nie ma gdzie indziej: nagłówek i cztery kafelki
   wyboru, które po kliknięciu kurczą się w pasek, a pod nimi wjeżdża
   panel z formularzem. Na wejściu nic nie jest wybrane — najpierw
   decyzja, potem pola do wypełnienia.
   Pola formularza i strefa zdjęć są z contact.css (klasy pb-ct-*,
   pb-input) — strona dogrywa tamten plik zamiast powielać style.
   Kalkulator przynosi własne style z oproznianie.css / wyburzenia.css.
   ============================================================ */

/* ============================================================
   ⚠ NAPRAWA PO wyburzenia.css
   ------------------------------------------------------------
   Gałąź rozbiórek dogrywa wyburzenia.css, bo stamtąd pochodzi kalkulator.
   Tamten plik jest pisany pod CIEMNE strony huba i ustawia globalnie:
       body { background: #0d1014; color: … }
       a    { color: var(--pw-green); }
   Bez tych trzech linijek strona wyceny robiła się do połowy czarna
   (patrz zgłoszenie klienta 2026-08-21). Ten plik wczytuje się ostatni,
   więc przywraca jasne tło serwisu. Na gałęzi opróżniania wartości są
   i tak takie same, więc nic nie psuje.
   ============================================================ */
body:not(.theme-pw) {
  background: var(--color-bg);
  color: var(--color-text);
}
/* Nie --color-primary: to niebieski ze starej warstwy global.css.
   Marka jest zielona, więc odnośniki w treści biorą kolor marki. */
body:not(.theme-pw) main a { color: var(--pb-green-700); }

.wy-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   NAGŁÓWEK
   ============================================================ */
/* Bez własnego tła — nagłówek i sekcja z kafelkami mają być jednym
   płótnem. Wcześniej hero stało na --pb-surface-2 (#f7f8fa), a strona na
   --color-bg (#f5f7fa): różnica dwóch odcieni, ale na styku widać było
   poziomą krechę. W ciemnym motywie było to samo, tylko wyraźniej
   (--pw-bg-2 na --pw-bg). Oba tła zdjęte — zostaje kolor strony. */
.wy-hero {
  padding: 34px 0 26px;
}

/* Tytuł po lewej, przełącznik gałęzi po prawej — w jednej linii.
   flex-wrap zostawiony celowo: przy długim tytule albo dużej czcionce
   systemowej przełącznik przeniesie się niżej zamiast zgnieść nagłówek. */
.wy-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 28px;
}

/* Odnośnik powrotny do strony, z której kliknięto wycenę.
   Pokazuje się tylko wtedy, gdy ?z= wskazał konkretną usługę. */
.wy-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--pb-text-muted);
  text-decoration: none;
  margin-bottom: 14px;
  transition: color .18s ease;
}
.wy-back svg { width: 15px; height: 15px; }
.wy-back:hover { color: var(--pb-green); }

/* Pytanie stoi samo — bez akapitu pod spodem, więc bez dolnego marginesu.
   Skala nieco mniejsza niż typowy hero: to nagłówek nad kafelkami,
   nie okładka strony. */
/* ── Przełącznik gałęzi przy nagłówku ──
   Dwie pigułki: Opróżnianie / Rozbiórki. To zwykłe odnośniki — każda gałąź
   ma inny kalkulator i inne pola w pierwszym kroku, więc przełączenie i tak
   wymaga wczytania innego zestawu plików. */
.wy-branch {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-r-pill, 999px);
}
.wy-branch-btn {
  padding: 9px 18px;
  border-radius: var(--pb-r-pill, 999px);
  font-family: var(--pb-font-display);
  font-size: 14px; font-weight: 700;
  color: var(--pb-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
/* Bez podkreślenia w każdym stanie — to przycisk, nie odnośnik w tekście */
.wy-branch-btn,
.wy-branch-btn:hover,
.wy-branch-btn:focus { text-decoration: none; }
.wy-branch-btn:hover { color: var(--pb-ink); }
.wy-branch-btn.is-active {
  background: var(--pb-green);
  color: #fff;
}

.wy-hero h1 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--pb-font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: var(--pb-tracking-tight);
  color: var(--pb-ink);
  margin: 0;
  line-height: 1.15;
}
.wy-hero h1 .accent { color: var(--pb-green); }

/* ============================================================
   ROZWIDLENIE — kafelki
   ============================================================ */
.wy-picker { padding: 28px 0 64px; }

.wy-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

/* Kafelek działa jak zakładka: wariant ze zdjęciami jest wybrany od wejścia,
   panel pod spodem otwarty. Kompaktowy rozmiar — próba z dużymi kaflami
   okazała się gorsza (klient, 2026-08-21). */
.wy-tab {
  display: flex; align-items: center; gap: 12px;
  text-align: left;
  padding: 16px 18px;
  background: #fff;
  border: 2px solid var(--pb-line);
  border-radius: var(--pb-r-xl);
  cursor: pointer;
  font-family: var(--pb-font-body);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wy-tab:hover { border-color: var(--pb-green); transform: translateY(-2px); }
.wy-tab.is-active { border-color: var(--pb-green); box-shadow: var(--pb-shadow-md); }

.wy-tab-ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--pb-surface-2);
  color: var(--pb-text-muted);
  transition: background .18s ease, color .18s ease;
}
.wy-tab-ico svg { width: 21px; height: 21px; }
.wy-tab:hover .wy-tab-ico,
.wy-tab.is-active .wy-tab-ico { background: var(--pb-green); color: #fff; }

/* Sam tytuł, bez podpisu pod spodem — dlatego zwykły tekst, nie kolumna */
.wy-tab-txt {
  min-width: 0;
  font-family: var(--pb-font-display);
  font-size: 15px; font-weight: 700;
  color: var(--pb-ink);
  line-height: 1.25;
}

/* ============================================================
   PANELE — widoczny tylko wybrany
   ============================================================ */
.wy-panel { display: none; }
.wy-panel.is-active { display: block; animation: wy-fade .32s var(--pb-ease-out); }

@keyframes wy-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wy-panel.is-active { animation: none; }
  .wy-tab { transition: border-color .18s ease; }
  .wy-tab:hover { transform: none; }
}

/* Kalkulator jest osobną sekcją strony usługi: ma własne tło, poświatę
   i pionowy padding na 80–96 px. Wstawiony w panel rysował prostokąt
   w prostokącie z widoczną krawędzią — tutaj to wszystko zdejmujemy,
   zostaje sama zawartość. */
.wy-panel > .op-calc,
.wy-panel > .pw-calc {
  padding: 0;
  background: none;
  overflow: visible;
}
.wy-panel > .pw-calc::before { display: none; }   /* rozmyta plama w rogu */
/* Gałąź rozbiórek ma własny kontener (.pw-container), opróżnianie — .pb-container */
.wy-panel > .op-calc > .pb-container,
.wy-panel > .pw-calc > .pw-container {
  padding-left: 0; padding-right: 0;
  max-width: none;
}

/* Ramka przepisana 1:1 z karty kalkulatora, żeby wszystkie cztery kroki
   wyglądały jak jeden zestaw. Wzorzec: .op-calc-card w oproznianie.css —
   1 px w kolorze --pb-line-soft (bardzo jasna kreska, nie zieleń) + miękki
   cień. Ciemny motyw ma własną wersję niżej, przepisaną z .pw-calc-wizard. */
.wy-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--pb-line-soft);
  border-radius: var(--pb-r-xl);
  padding: 32px;
  box-shadow: var(--pb-shadow-sm);
}

/* Przyciski w panelach bez poświaty.
   Zielony i żółty przycisk niosą własny kolorowy cień (--pb-shadow-green /
   --pb-shadow-yellow). Wewnątrz karty z zieloną ramką te poświaty zlewały
   się z obwódką i robiły bałagan — zostaje sam kształt.
   Kalkulator (krok 2) nie jest w .wy-panel-inner, więc go to nie dotyczy. */
.wy-panel-inner .pb-btn { box-shadow: none; }

.wy-panel-lead h2 {
  font-family: var(--pb-font-display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 700;
  color: var(--pb-green);
  margin: 0 0 12px;
  line-height: 1.2;
}
.wy-panel-lead p {
  font-size: 15px; line-height: 1.6;
  color: var(--pb-text);
  margin: 0 0 12px;
}
.wy-panel-lead a { color: var(--pb-green-700); text-decoration: underline; text-underline-offset: 2px; }

.wy-hours {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--pb-ink) !important;
}
.wy-hours svg { width: 17px; height: 17px; color: var(--pb-green); }

/* ============================================================
   FORMULARZE
   ============================================================ */
.wy-form { display: flex; flex-direction: column; gap: 16px; }

.wy-field { display: flex; flex-direction: column; gap: 6px; }
.wy-field label,
.wy-field-label {
  font-size: 13px; font-weight: 700;
  color: var(--pb-ink);
}
.wy-field label em,
.wy-field-label em {
  font-style: normal; font-weight: 500;
  color: var(--pb-text-muted);
}
.wy-field label span[aria-hidden] { color: var(--pb-green); }

.wy-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Miasto potrzebuje więcej miejsca niż dwie krótkie listy obok */
.wy-field-row-3 { grid-template-columns: 1.4fr 1fr 1fr; }

.wy-form-msg { font-size: 14px; line-height: 1.5; }
.wy-form-msg.success { color: var(--pb-green-700); font-weight: 600; }
.wy-form-msg.error   { color: #b91c1c; font-weight: 600; }
.wy-form-msg:empty   { display: none; }

/* ── Pole na zdjęcia ──
   contact.css opisuje strefę zrzutu jako `.pb-ct-attach .pb-ct-dropzone`,
   więc bez tamtego rodzica nie łapała żadnych stylów i elementy się
   rozjeżdżały. Tu mamy własną wersję: jeden prostokąt, klikalny w całości. */
.wy-drop {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 26px 20px;
  border: 1.5px dashed var(--pb-line);
  border-radius: var(--pb-r-lg, 14px);
  background: var(--pb-surface-2);
  cursor: pointer;
  text-align: center;
  transition: border-color .18s ease, background .18s ease;
}
.wy-drop:hover,
.wy-drop:focus-visible { border-color: var(--pb-green); background: var(--pb-green-50, #f3faf2); }
.wy-drop.dragover { border-color: var(--pb-green); background: var(--pb-green-50, #f3faf2); }

.wy-drop-ico {
  width: 26px; height: 26px; padding: 9px;
  background: var(--pb-green-100, #dcf0d9);
  border-radius: 50%;
  color: var(--pb-green-700);
  box-sizing: content-box;
}
.wy-drop b {
  font-family: var(--pb-font-display);
  font-size: 14.5px; font-weight: 700;
  color: var(--pb-ink);
}
.wy-drop small { font-size: 12px; color: var(--pb-text-muted); }
.wy-drop .pb-ct-files-list { justify-content: center; }

/* Komentarz rośnie razem z tekstem (wysokość ustawia JS) */
.wy-autogrow { resize: none; overflow-y: auto; min-height: 64px; }

/* ── Adres mailowy jako firmowy żółty przycisk ──
   Bazę (kształt, cień, hover) daje .pb-btn.pb-btn-yellow; tutaj tylko
   to, czego przycisk z definicji nie ma: łamanie długiego adresu
   i wyrównanie do lewej zamiast rozciągnięcia na całą szerokość. */
/* Selektor z `a.wy-mail`, bo tuż wyżej stoi `.wy-panel-lead a`, które
   robi z odnośników zielony podkreślony tekst — a to jest przycisk. */
.wy-panel-lead a.wy-mail,
.wy-panel-lead a.wy-mail:hover {
  color: var(--pb-ink);
  text-decoration: none;
}
.wy-mail {
  font-size: 15px;
  word-break: break-all;
}
.wy-mail svg { width: 19px; height: 19px; flex: 0 0 auto; }


/* ── Warianty „Zadzwoń" i „Napisz" ──
   Prawa kolumna zaczyna się od gotowego kontaktu (telefon albo mail),
   pod nim dopiero formularz. */
.wy-call,
.wy-write { display: flex; flex-direction: column; gap: 16px; }
.wy-call-num { font-size: 19px; }
.wy-call-num svg { width: 20px; height: 20px; }

.wy-call-or {
  display: flex; align-items: center; gap: 12px;
  color: var(--pb-text-muted); font-size: 13px;
}
.wy-call-or::before,
.wy-call-or::after {
  content: ''; flex: 1 1 auto;
  border-top: 1px solid var(--pb-line);
}

/* Numer + przycisk w jednej linii; komunikat pod spodem na całą szerokość */
.wy-form-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.wy-form-inline .wy-form-msg { grid-column: 1 / -1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .wy-tabs { grid-template-columns: repeat(2, 1fr); }
  .wy-panel-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px; }
}

@media (max-width: 620px) {
  .wy-hero { padding: 28px 0 24px; }
  /* Na telefonie tytuł i przełącznik jedno pod drugim, pigułki na pół ekranu */
  .wy-hero-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .wy-branch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .wy-branch-btn { padding: 9px 10px; font-size: 13px; text-align: center; white-space: normal; }
  .wy-tabs { grid-template-columns: 1fr; gap: 10px; margin-bottom: 0; }
  .wy-tab { padding: 13px 15px; }
  .wy-tab-ico { width: 36px; height: 36px; }
  .wy-tab-ico svg { width: 19px; height: 19px; }

  /* Na telefonie najpierw sam wybór: cztery kafelki i nic pod spodem.
     Serwer zaznacza pierwszy wariant z myślą o komputerze — tutaj go
     przykrywamy, dopóki człowiek sam czegoś nie dotknie (JS dokłada
     wtedy .is-chosen). Robi to CSS, a nie skrypt, żeby otwarty panel
     nie mignął na ułamek sekundy przy wczytywaniu strony. */
  /* Z klasą .is-active w selektorze, żeby wygrać z regułą otwierającą
     panel niezależnie od kolejności reguł w pliku. */
  .wy-picker:not(.is-chosen) .wy-panel,
  .wy-picker:not(.is-chosen) .wy-panel.is-active { display: none; }
  .wy-picker.is-chosen .wy-tabs { margin-bottom: 24px; }
  .wy-picker:not(.is-chosen) .wy-tab.is-active {
    border-color: var(--pb-line);
    box-shadow: none;
  }
  .wy-picker:not(.is-chosen) .wy-tab.is-active .wy-tab-ico {
    background: var(--pb-surface-2);
    color: var(--pb-text-muted);
  }
  .wy-drop { padding: 20px 14px; }
  .wy-panel-inner { padding: 20px; border-radius: var(--pb-r-lg, 14px); }
  .wy-field-row,
  .wy-field-row-3 { grid-template-columns: 1fr; }
  /* Na wąskim ekranie przycisk „Oddzwońcie" pod numerem, nie obok */
  .wy-form-inline { grid-template-columns: 1fr; }
}


/* ============================================================
   CIEMNY MOTYW — gałąź rozbiórek (body.theme-pw)
   ------------------------------------------------------------
   Strona wyceny dla Pana Wyburzalskiego wygląda jak reszta jego huba.
   Kolory bierzemy z palety --pw-* zdefiniowanej w wyburzenia.css,
   który przy tej gałęzi i tak jest wczytany (dla kalkulatora).
   ============================================================ */
body.theme-pw .wy-hero h1 { color: var(--pw-ink); }
body.theme-pw .wy-hero h1 .accent { color: var(--pw-green); }
body.theme-pw .wy-back { color: var(--pw-text-muted); }
body.theme-pw .wy-back:hover { color: var(--pw-green); }

/* Przełącznik gałęzi */
body.theme-pw .wy-branch {
  background: var(--pw-bg-3);
  border-color: var(--pw-line-2);
}
body.theme-pw .wy-branch-btn { color: var(--pw-text-2); }
body.theme-pw .wy-branch-btn:hover { color: var(--pw-ink); }
body.theme-pw .wy-branch-btn.is-active {
  background: var(--pw-green);
  /* Ciemny napis na zielonym — tak samo jak w paskach CTA huba */
  color: #0d1014;
}

/* Kafelki wyboru */
body.theme-pw .wy-tab {
  background: var(--pw-bg-3);
  border-color: var(--pw-line-2);
}
body.theme-pw .wy-tab:hover,
body.theme-pw .wy-tab.is-active { border-color: var(--pw-green); }
body.theme-pw .wy-tab-txt { color: var(--pw-ink); }
body.theme-pw .wy-tab-ico { background: var(--pw-bg-5); color: var(--pw-text-2); }
body.theme-pw .wy-tab:hover .wy-tab-ico,
body.theme-pw .wy-tab.is-active .wy-tab-ico { background: var(--pw-green); color: #0d1014; }

/* Panel z formularzem */
/* Ramka 1:1 z karty kalkulatora rozbiórek (.pw-calc-wizard .pw-calc-card):
   2 px przygaszonej zieleni (22% krycia — nie jaskrawa) + cienka poświata
   i głęboki cień. Tło karty też jak tam: --pw-bg-3. */
body.theme-pw .wy-panel-inner {
  background: var(--pw-bg-3);
  border: 2px solid var(--pw-green-tint-2);
  box-shadow: 0 0 0 1px var(--pw-green-tint), 0 22px 50px rgba(0,0,0,0.42);
}
body.theme-pw .wy-panel-lead h2 { color: var(--pw-green); }
body.theme-pw .wy-panel-lead p  { color: var(--pw-text); }
body.theme-pw .wy-hours { color: var(--pw-ink) !important; }
body.theme-pw .wy-hours svg { color: var(--pw-green); }

/* Pola */
body.theme-pw .wy-field label,
body.theme-pw .wy-field-label { color: var(--pw-ink); }
body.theme-pw .wy-field label em,
body.theme-pw .wy-field-label em { color: var(--pw-text-muted); }
body.theme-pw .wy-field label span[aria-hidden] { color: var(--pw-green); }

body.theme-pw .pb-input {
  background: var(--pw-bg-4);
  border-color: var(--pw-line-2);
  color: var(--pw-ink);
}
body.theme-pw .pb-input::placeholder { color: var(--pw-text-soft); }
body.theme-pw .pb-input:focus {
  border-color: var(--pw-green);
  box-shadow: 0 0 0 3px var(--pw-green-tint);
}

/* Strefa zdjęć */
body.theme-pw .wy-drop {
  background: var(--pw-bg-3);
  border-color: var(--pw-line-strong);
}
body.theme-pw .wy-drop:hover,
body.theme-pw .wy-drop:focus-visible,
body.theme-pw .wy-drop.dragover {
  background: var(--pw-bg-4);
  border-color: var(--pw-green);
}
body.theme-pw .wy-drop-ico { background: var(--pw-green-tint); color: var(--pw-green); }
body.theme-pw .wy-drop b { color: var(--pw-ink); }
body.theme-pw .wy-drop small { color: var(--pw-text-muted); }

/* Listy rozwijane */
body.theme-pw .pb-custom-select-trigger {
  background: var(--pw-bg-4);
  border-color: var(--pw-line-2);
  color: var(--pw-ink);
}
body.theme-pw .pb-custom-select-trigger svg { stroke: var(--pw-text-muted); }
body.theme-pw .pb-custom-select.open .pb-custom-select-trigger {
  border-color: var(--pw-green);
  box-shadow: 0 0 0 3px var(--pw-green-tint);
}
body.theme-pw .pb-custom-select-dropdown {
  background: var(--pw-bg-3);
  border-color: var(--pw-line-2);
}
body.theme-pw .pb-custom-select-option { color: var(--pw-text); }
body.theme-pw .pb-custom-select-option:hover {
  background: var(--pw-green-tint);
  color: var(--pw-ink);
}
body.theme-pw .pb-custom-select-option.active {
  background: var(--pw-green-tint-2);
  color: var(--pw-green);
}

/* Drobiazgi */
body.theme-pw .wy-call-or { color: var(--pw-text-muted); }
body.theme-pw .wy-call-or::before,
body.theme-pw .wy-call-or::after { border-top-color: var(--pw-line-2); }
body.theme-pw .wy-form-msg.success { color: var(--pw-green); }
body.theme-pw .wy-form-msg.error   { color: #ff8f8f; }