/* ═══════════════════════════════════════════════════════════════════════════════════
   POPRAWKI MOBILNE (2026-09-24), na podstawie RAPORT-MOBILE-kotuko.pdf.

   Czysty CSS, NIE klasy Tailwinda: tailwind.css jest budowany offline, a te poprawki
   mają zadziałać od razu po wgraniu. Plik jest podpięty w views/layout.php jako OSTATNI
   arkusz przed </head>, więc wygrywa z tailwind.css i ze stylami z <style> w layoucie
   przy tej samej specyficzności. Panel /admin go nie ładuje (ma własny szkielet).

   Numery w nagłówkach sekcji to punkty z raportu.
   ═══════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Zieleń do TEKSTU i tła przycisków z białym napisem. Marka (#10b981) na białym ma
     2,5:1, ta 5,5:1. Na ciemnym tle zostaje jasna marka (reguła niżej). */
  --kt-zielen-dostepna: #047857;
  --kt-zielen-dostepna-hover: #065f46;
}

/* ── 1. Nagłówek komputerowy dopiero od 1024 px ─────────────────────────────────────
   Klasy nagłówków i dolnego paska zmienione w layout.php z md: na lg:. Tu tylko to,
   co zależało od progu 768 px: odstęp pod dolny pasek i położenie banera cookies. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body { padding-bottom: 4.25rem; }
  #cookie-banner { bottom: 5rem; }
  .kt-konta-toast { bottom: 5.25rem; }
}

/* ── 2. Długie słowa, adresy i e-maile nie rozpychają strony ────────────────────────
   `anywhere` (nie `break-word`), bo tylko ono zmniejsza minimalną szerokość elementu,
   a to ona rozpychała kolumny flex i siatki. Łamie wyłącznie ciąg, który inaczej by
   wystawał; zwykłe słowa zawijają się jak dotąd. */
main, footer, .kt-konta-okno, .kt-okolica-okno, .leaflet-popup-content {
  overflow-wrap: anywhere;
}
.leaflet-container .leaflet-control-attribution { overflow-wrap: normal; }

/* ── 3. Logo nie może się ściskać ───────────────────────────────────────────────── */
header > a:first-child,
header > div > a:first-child { flex-shrink: 0; }
header img[alt="Kotuko"] { flex-shrink: 0; max-width: none; }

/* Telefon: logo + okolica + awatar muszą się zmieścić w 320 px. Ustępuje chip okolicy
   (nazwa skraca się wielokropkiem), a nie logo. */
header.lg\:hidden .kt-okolica { min-width: 0; flex: 0 1 auto; }
header.lg\:hidden .kt-okolica-chip--tel { max-width: 100%; min-width: 0; }
@media (max-width: 379.98px) {
  header.lg\:hidden { padding-left: 1rem; padding-right: 1rem; gap: .5rem; }
  header.lg\:hidden img[alt="Kotuko"] { height: 1.5rem; }
  header.lg\:hidden .kt-konta-strzalka { display: none; }
}

/* ── 4. Kolory klas, których brakuje w zbudowanym tailwind.css ─────────────────────
   views/panel_sekcje/konto.php (usuwanie konta): bez tego przycisk potwierdzenia miał
   biały napis na przezroczystym tle. */
.bg-rose-600 { background-color: #e11d48; }
.hover\:bg-rose-700:hover { background-color: #be123c; }
.text-rose-500 { color: #e11d48; }
.bg-rose-50\/60 { background-color: rgb(255 241 242 / .6); }

/* ── 5. Najmniejsza czcionka 13 px ──────────────────────────────────────────────────
   Dotąd 10–12 px: podpisy dolnego paska, nagłówki stopki, nadtytuły, etykiety pól. */
.text-\[10px\], .text-\[10\.5px\], .text-\[11px\], .text-\[11\.5px\], .text-\[12px\], .text-xs {
  font-size: 13px;
}
.text-xs { line-height: 1.35; }
.kt-lok-etykieta, .kt-konta-typ { font-size: 13px; }
.kt-okolica-chip--tel, .kt-okolica-pole-zmien { font-size: 13px; }
/* Dolny pasek: stała wysokość wiersza, żeby większy podpis nie podniósł paska
   (company_profile.php ma nad nim pasek „Zadzwoń” ustawiony na bottom-[58px]). */
body > nav.fixed span { line-height: 15px; letter-spacing: 0; }

/* ── 6. Kontrast (min. 4,5:1) ───────────────────────────────────────────────────── */
.text-slate-400 { color: #64748b; }
.text-slate-300:not(.pointer-events-none) { color: #64748b; }
/* Nieaktywne pozycje dolnego paska leżą na półprzezroczystym tle (#f3f3f3). */
body > nav.fixed :is(a, button).text-slate-400 { color: #475569; }

.text-kotuko-green, .hover\:text-kotuko-green:hover, .kt-okolica-pole-zmien { color: var(--kt-zielen-dostepna); }
.bg-kotuko-green, .bg-emerald-500, button.pn-dodaj { background-color: var(--kt-zielen-dostepna); }
.hover\:bg-\[\#059669\]:hover, .hover\:bg-emerald-600:hover, .hover\:bg-emerald-700:hover,
.bg-kotuko-green:hover { background-color: var(--kt-zielen-dostepna-hover); }
/* Na ciemnym tle ciemna zieleń byłaby gorsza niż jasna marka: tam zostaje marka. */
.bg-kotuko-navy .text-kotuko-green, .bg-black .text-kotuko-green, .bg-slate-900 .text-kotuko-green,
footer .text-kotuko-green, #cookie-banner .text-kotuko-green,
.bg-kotuko-navy .hover\:text-kotuko-green:hover, footer .hover\:text-kotuko-green:hover { color: #34d399; }

/* Stopka: nagłówki kolumn i dopisek pod logo były szare na czarnym (3,1:1 i 2,6:1). */
footer .text-white\/35, footer .text-white\/30 { color: rgb(255 255 255 / .72); }

/* ── 7. iPhone nie powiększa strony przy dotknięciu pola ───────────────────────────
   Safari na iOS przybliża stronę, gdy pole ma czcionkę mniejszą niż 16 px. */
@media (max-width: 1023.98px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  select, textarea { font-size: 16px !important; }
}

/* ── 8. Cele dotykowe min. 44 px na ekranach dotykowych ─────────────────────────── */
@media (max-width: 1023.98px) {
  footer li a { display: inline-flex; align-items: center; min-height: 44px; }
  header.lg\:hidden > a:first-child { display: flex; align-items: center; min-height: 44px; }
  header.lg\:hidden .kt-okolica-chip--tel,
  header.lg\:hidden .kt-konta-pigulka { min-height: 44px; }
  .pn-zakladki a, main nav a.rounded-full.px-4.py-2 { min-height: 44px; }
  main nav a.rounded-full.px-4.py-2 { display: inline-flex; align-items: center; }
  button.pn-dodaj { min-height: 44px; }
}

/* ── 9. Baner cookies: zawsze na wierzchu, „Odrzuć” równie czytelne jak „Akceptuję” ── */
#cookie-banner { z-index: 90; }
#cookie-reject { color: #fff; border-color: rgb(255 255 255 / .6); }
#cookie-accept, #cookie-reject { min-height: 44px; }

/* ── 5b. Małe czcionki z własnych klas kt-* (style w <style> widoków, stąd prefiks body:
   te bloki leżą w treści strony, czyli PO tym arkuszu, i bez niego by wygrały). ── */
body .kt-lok-etykieta, body .kt-lok-opis, body .kt-okolica-podtytul, body .kt-konta-mail,
body .kt-konta-wiersz-opis, body .kt-konta-wszystkie, body .kt-typ-blokada, body .kt-klodka-panel p { font-size: 13px; }
body .kt-lok-rodzaj, body .kt-konta-typ, body .kt-konta-naglowek { font-size: 12.5px; }
body .kt-okolica-podtytul, body .kt-konta-mail, body .kt-konta-wiersz-opis { color: #64748b; }
body .kt-konta-wszystkie { color: #475569; }

/* ── 1b. 1024–1279 px: nagłówek komputerowy zalogowanego był o ~60 px za szeroki
   (dotąd nadmiar „zjadało” zgniatane logo). Mniejsze odstępy zamiast chowania pozycji. ── */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  header.lg\:block > div { padding-left: 1.25rem; padding-right: 1.25rem; gap: 1.25rem; }
  header.lg\:block nav.gap-7 { gap: 1.1rem; }
  /* Nieruchomości: lista + mapa 360 px nie mieściły się przy 1024 px (strona 1107 px).
     minmax(0,1fr) pozwala liście się zwęzić, a mapa na tym przedziale ma 300 px. */
  .lg\:grid-cols-\[1fr_360px\] { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ── 11. Karta ogłoszenia w motoryzacji na telefonie ──────────────────────────────
   Zdjęcie 128 px + szeroka cena („36 900 zł do neg.”) w jednym wierszu zostawiały opisowi
   ok. 25 px: tytuł ucięty do „[…”, parametry litera pod literą. Poniżej 768 px cena
   schodzi do osobnego wiersza pod zdjęciem i opisem (views/moto.php, klasy kt-moto-*). */
@media (max-width: 767.98px) {
  .kt-moto-karta { flex-wrap: wrap; }
  .kt-moto-karta > .min-w-0 { flex: 1 1 0; }
  .kt-moto-karta .kt-moto-cena { order: 3; width: 100%; flex-direction: row; align-items: center; padding-left: 0; }
  .kt-moto-karta .kt-moto-cena > span { display: none; }
}

/* ── 12. Filtry na telefonie: rząd przycisków, klik rozwija jeden filtr (public/js/filtry-mobile.js) ──
   Decyzja właściciela 2026-09-24: filtry widoczne od razu, po kliknięciu się rozwijają.
   Klasa kt-panel-mob stawiana przez skrypt tylko poniżej 1024 px; kt-js-filtry w <head>
   chowa panel, zanim skrypt go podzieli (bez JS panel zostaje taki jak był). */
@media (max-width: 1023.98px) {
  /* Zanim skrypt ruszy, panel zajmuje DOKŁADNIE tyle miejsca, ile potem rząd przycisków
     (12 px odstępu + 54 px rzędu), a stary przycisk „Filtry" jest schowany od początku.
     Wcześniej panel był display:none i rząd wskakiwał po narysowaniu strony: lista zjeżdżała
     o 20–66 px, CLS 0,18 na produkcji (Lighthouse 2026-09-24, próg Google to 0,1). */
  html.kt-js-filtry:not(.kt-filtry-gotowe) .kt-panel-filtrow,
  html.kt-js-filtry:not(.kt-filtry-gotowe) .kt-nier-karta > .border-t {
    display: block !important; visibility: hidden !important; overflow: hidden !important;
    height: 54px !important; min-height: 0 !important; max-height: none !important;
    margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important;
  }
  html.kt-js-filtry [x-data] > button[aria-expanded].lg\:hidden.w-full { display: none !important; }

  .kt-panel-mob { max-height: none !important; overflow: visible !important; padding: 0 !important; gap: 0 !important; }
  .kt-panel-mob:not(.kt-panel-otwarty) { display: none !important; }
  .kt-panel-mob.kt-panel-otwarty { display: block !important; margin-top: 10px; border-top: 0; }
  .kt-panel-mob .kt-opakowanie:not(.kt-zawiera-otwarta) { display: none !important; }
  .kt-panel-mob .kt-opakowanie > :not(.kt-grupa):not(.kt-opakowanie):not(.kt-filtr-zastosuj) { display: none !important; }
  .kt-panel-mob > :not(.kt-grupa):not(.kt-opakowanie):not(.kt-filtr-zastosuj) { display: none !important; }
  .kt-panel-mob .kt-grupa:not(.kt-grupa--otwarta) { display: none !important; }
  .kt-panel-mob .kt-grupa--otwarta {
    display: block !important; background: #fff; border-radius: 16px; padding: 14px;
    box-shadow: 0 10px 30px -18px rgba(10, 10, 10, .35); border: 1px solid #e2e8f0;
  }
  .kt-panel-mob .kt-grupa--otwarta > :first-child:is(span, p) { font-size: 13px; font-weight: 700; color: #475569; }
  .kt-panel-mob .kt-opakowanie.kt-zawiera-otwarta { display: block !important; background: transparent !important;
    box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
  /* Lista kategorii w rozwinięciu: bez własnego przewijania i bez limitu wysokości. */
  .kt-panel-mob .kt-lista-kategorii { max-height: none !important; overflow: visible !important; }
  .kt-panel-mob a.kt-pusta { display: none !important; }
  .kt-panel-mob .kt-grupa--otwarta nav a, .kt-panel-mob nav.kt-grupa--otwarta a { min-height: 44px; }

  .kt-filtr-zastosuj {
    display: block; width: 100%; margin-top: 10px; min-height: 48px; border: 0; border-radius: 12px;
    background: var(--kt-zielen-dostepna); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
  }

  .kt-filtry-rzad {
    display: flex; gap: 8px; margin: 12px -16px 0; padding: 4px 16px 6px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .kt-filtry-rzad::-webkit-scrollbar { display: none; }
  .kt-filtr {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 240px;
    padding: 0 12px 0 16px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #0a0a0a;
    font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  }
  .kt-filtr-wartosc { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
  .kt-filtr-wartosc::before { content: ": "; font-weight: 600; }
  .kt-filtr-strzalka { display: inline-flex; color: #475569; transition: transform .2s ease; }
  .kt-filtr--otwarty .kt-filtr-strzalka { transform: rotate(180deg); }
  .kt-filtr--aktywny { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
  .kt-filtr--aktywny .kt-filtr-strzalka { color: #fff; }
  .kt-filtr--otwarty:not(.kt-filtr--aktywny) { border-color: #0a0a0a; box-shadow: inset 0 0 0 1px #0a0a0a; }
  .kt-filtr--wyczysc { padding: 0 16px; border-style: dashed; color: #475569; }
}
@media (min-width: 1024px) {
  .kt-filtry-rzad, .kt-filtr-zastosuj { display: none !important; }
}

/* ── 13. Menu działów pod przyciskiem „Menu” w dolnym pasku (views/layout.php) ────────
   Pasek ma pięć miejsc, działów jest osiem: ogłoszenia, motoryzacja, wydarzenia, forum
   i biura nie miały na telefonie żadnego wejścia. Panel wysuwa się nad paskiem. */
html.kt-bez-przewijania, html.kt-bez-przewijania body { overflow: hidden; }
.kt-menu-tlo { position: fixed; inset: 0; z-index: 45; background: rgb(10 10 10 / .35); }
.kt-menu-tel {
  position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 48;
  max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 20px 20px 0 0; padding: 18px 16px 16px;
  box-shadow: 0 -18px 40px -20px rgb(10 10 10 / .45);
  animation: kt-menu-wjazd .18s ease-out;
}
@keyframes kt-menu-wjazd { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.kt-menu-naglowek { margin: 0 0 10px 4px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #475569; }
.kt-menu-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kt-menu-link {
  display: flex; align-items: center; min-height: 52px; padding: 8px 14px; border-radius: 14px;
  background: #f1f5f9; color: #0a0a0a; font-size: 15px; font-weight: 600; text-decoration: none; line-height: 1.25;
}
.kt-menu-link--aktywny { background: #0a0a0a; color: #fff; }
.kt-menu-konto { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.kt-menu-przycisk {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  border-radius: 12px; border: 1px solid #cbd5e1; color: #0a0a0a; font-size: 15px; font-weight: 700; text-decoration: none;
}
.kt-menu-przycisk--ciemny { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.kt-menu-przycisk b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #34d399; color: #0a0a0a; font-size: 13px; line-height: 22px; text-align: center; }
@media (min-width: 1024px) { .kt-menu-tel, .kt-menu-tlo { display: none !important; } }

/* ── 14. Listy gmin (linki dla Google) zwinięte pod jednym linkiem (2026-09-24) ──
   Właściciel: długie listy „nieruchomości Konin · nieruchomości Golina · …” na dole stron
   to zapychacz. Linki zostają w HTML (Google je widzi), człowiek widzi jeden wiersz. */
.kt-seo-gminy { margin-top: 2rem; }
.kt-seo-gminy > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: #475569;
}
.kt-seo-gminy > summary::-webkit-details-marker { display: none; }
.kt-seo-gminy > summary::after { content: "▾"; font-size: 12px; transition: transform .2s ease; }
.kt-seo-gminy[open] > summary::after { transform: rotate(180deg); }
.kt-seo-gminy > section { margin-top: .25rem !important; }

/* ── 16. Stopka wyśrodkowana (2026-09-24, wybór właściciela) ─────────────────────────
   Markup w views/layout.php (klasy kt-stopka-*): logo na środku, działy i „Dodaj…” w rzędach,
   informacje i © na dole. Tło bez zmian (płaska czerń). */
.kt-stopka-logo { display: inline-block; }
.kt-stopka-rzad { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 22px; row-gap: 0; }
.kt-stopka-rzad a {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color .15s ease;
}
.kt-stopka-rzad a:hover { color: #34d399; }
.kt-stopka-rzad--dzialy { margin-top: 26px; }
.kt-stopka-rzad--dzialy a { color: #fff; font-size: 15px; font-weight: 600; }
.kt-stopka-rzad--dodaj { margin-top: 8px; }
.kt-stopka-rzad--dodaj a { color: rgb(255 255 255 / .78); font-size: 14px; font-weight: 500; }
.kt-stopka-dol { margin-top: 26px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .1); }
.kt-stopka-rzad--info a { color: rgb(255 255 255 / .78); font-size: 13.5px; }
.kt-stopka-copy { margin: 6px 0 0; font-size: 13px; color: rgb(255 255 255 / .6); }
@media (min-width: 768px) {
  .kt-stopka-rzad { column-gap: 30px; }
}

/* ── 17. Pasek „Potwierdź adres e-mail” (2026-09-24, src/limity.php) ──────────────── */
.kt-baner-email {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 10px 16px; background: #fef3c7; color: #78350f; font-size: 14px; line-height: 1.4; text-align: center;
  border-bottom: 1px solid #fcd34d;
}
.kt-baner-email form { margin: 0; }
.kt-baner-email button {
  min-height: 36px; padding: 0 14px; border: 1px solid #92400e; border-radius: 999px; background: #fff;
  color: #78350f; font-weight: 700; font-size: 14px; cursor: pointer;
}