/*
Theme Name:   AddiListo Child
Theme URI:    https://addipress.com/addilisto
Description:  Child theme for AddiListo. Put every customisation here — your changes then survive AddiListo updates instead of being overwritten by them. Activate this instead of the parent.
Author:       AddiPress Team
Author URI:   https://addipress.com
Template:     addilisto
Version:      1.0.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  addilisto-child
Tags:         classifieds, marketplace, listings
*/

/* ------------------------------------------------------------------
   Your CSS goes below. The parent stylesheet is loaded automatically
   by functions.php, so you only need to write what you are changing.

   Every colour, radius and width in AddiListo is a CSS variable, so
   most rebrands are a few lines here rather than a rewrite:

   :root {
       --apl-primary:   #0f766e;
       --apl-secondary: #f59e0b;
       --apl-radius:    18px;
   }
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 *    AddiPress Listing Growth  "Claim your profile" banner
 *    Restyles the banner injected by class-listing-acquisition.php
 *    (hardcoded #1a1a2e / #e63946) to use AddiListo's own tokens instead,
 *    so it looks native to the portal, not like a bolted-on plugin widget.
 *    Uses !important because the plugin writes inline style="" attributes,
 *    which normally beat an external stylesheet.
 * ------------------------------------------------------------------ */
#addipress-claim-banner {
	    background: var(--apl-ink) !important;
	    font-family: var(--apl-font) !important;
	    box-shadow: var(--apl-shadow-lg) !important;
}
#addipress-claim-banner button[onclick^="addipress_show_claim_form"] {
	    background: var(--apl-primary) !important;
	    border-radius: var(--apl-radius-sm) !important;
	    transition: background .15s ease;
}
#addipress-claim-banner button[onclick^="addipress_show_claim_form"]:hover {
	    background: var(--apl-primary-600) !important;
}
#addipress-claim-modal > div {
	    border-radius: var(--apl-radius) !important;
	    font-family: var(--apl-font) !important;
	    box-shadow: var(--apl-shadow-lg) !important;
}
#addipress-claim-modal h3 {
	    color: var(--apl-ink) !important;
}
#addipress-claim-modal p {
	    color: var(--apl-muted) !important;
}
#addipress-claim-modal input[type="email"] {
	    border-radius: var(--apl-radius-sm) !important;
	    border-color: var(--apl-line) !important;
	    font-family: var(--apl-font) !important;
}
#addipress-claim-modal input[type="email"]:focus {
	    outline: 2px solid var(--apl-primary) !important;
	    outline-offset: 1px;
}
#addipress-claim-modal button[onclick^="addipress_submit_claim"] {
	    background: var(--apl-primary) !important;
	    border-radius: var(--apl-radius-sm) !important;
	    transition: background .15s ease;
}
#addipress-claim-modal button[onclick^="addipress_submit_claim"]:hover {
	    background: var(--apl-primary-600) !important;
}

/* ------------------------------------------------------------------
 *    DekarzTU brand tokens (Faza "SaaS pro" redesign, 02.09).
 *
 *    Colour tokens (--apl-primary/secondary/ink/bg and the derived
 *    -600/-050/-aa shades) are NOT set here — they are already fully
 *    customisable in Wygląd → Dostosuj → Opcje AddiListo → Branding &
 *    Colors, and that panel auto-derives accessible shades from the
 *    two picked colours. Setting the DekarzTU terracotta/verdigris
 *    palette through that UI (not by hardcoding it in this file) keeps
 *    the derivation logic working and keeps colour changes live-
 *    previewable without touching code.
 *
 *    What DOES live here: the two things the Customizer colour panel
 *    cannot do — a distinct self-hosted typeface (matching the
 *    approved "SaaS pro" prototype) and a couple of small tokens the
 *    prototype introduced that the parent theme doesn't define yet
 *    (--apl-gold for ratings, --apl-font-mono for figures,
 *    --apl-radius-lg for large surfaces). Self-hosted the same way as
 *    the parent's Inter/Plus Jakarta Sans — no fonts.googleapis.com
 *    call, so this doesn't reopen the RODO/cookie-consent question
 *    that self-hosting was originally chosen to close.
 * ------------------------------------------------------------------ */

@font-face {
    font-family: 'DekarzTU Display';
    src: url('assets/fonts/archivo-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DekarzTU Display';
    src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DekarzTU Text';
    src: url('assets/fonts/public-sans-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DekarzTU Text';
    src: url('assets/fonts/public-sans-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DekarzTU Mono';
    src: url('assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DekarzTU Mono';
    src: url('assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Swap the parent's Inter/Jakarta pair for the approved prototype's
       Public Sans/Archivo pair. The parent's own system-font fallback
       chain (--apl-font-sys) stays last, unchanged, so a font-load
       failure degrades exactly the way it already did. */
    --apl-font:         'DekarzTU Text', var(--apl-font-sys);
    --apl-font-display: 'DekarzTU Display', 'DekarzTU Text', var(--apl-font-sys);

    /* New tokens the parent doesn't define yet — safe additions, nothing
       reads these until a rule below (or a future component) uses them. */
    --apl-font-mono:  'DekarzTU Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --apl-gold:       #b8860b; /* rating stars / "polecane" accents */
    --apl-radius-lg:  22px;    /* large surfaces: hero panels, modals */
    --apl-radius-sm:  8px;     /* prototype's tighter small-radius (was 10px) */
}

/* ---------- Prices read as data, not headline text ----------
 * [Poprawka po feedbacku] font-mono na CALYM tekscie psul sie, gdy
 * zamiast liczby wyswietlal sie fallback "Poprosz o wycene" -
 * czcionka o stalej szerokosci znaku robila z tego rozjechany,
 * nieczytelny tekst z ogromnymi odstepami miedzy slowami (dokladnie
 * to zglosil uzytkownik jako "kicz"). font-variant-numeric:
 * tabular-nums daje ten sam efekt "cyfry jako dane" TYLKO gdy w
 * tekscie faktycznie sa cyfry, i nie rusza zwyklych slow. */
.apl-card__price,
.apl-single__price,
.apl-single__price-m,
.apl-pricebox__price,
.apl-actionbar__price {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 *    DekarzTU header polish (Faza "SaaS pro" redesign, #92).
 *
 *    The parent's header (sticky, blur, scroll-shadow, mobile drawer
 *    with the hamburger->X animation, .apl-acct__signin pill) already
 *    matches the approved prototype's structure and behaviour almost
 *    exactly — nothing here touches markup or JS. Two things were
 *    still hardcoded to plain white instead of a token, and the nav
 *    links used an 8px hover instead of the prototype's full pill —
 *    both fixed below, using --apl-bg-2 (the same warm surface tone
 *    now set in the Customizer) instead of a literal white/rgba.
 * ------------------------------------------------------------------ */

.apl-header {
    background: color-mix(in srgb, var(--apl-bg-2) 88%, transparent);
}
.apl-header.is-scrolled {
    background: color-mix(in srgb, var(--apl-bg-2) 97%, transparent);
}
.apl-menu a {
    padding: 9px 14px;
    border-radius: 999px;
}

/* ------------------------------------------------------------------
 *    DekarzTU hero + trust-bar polish (Faza "SaaS pro", #93 czesc 1).
 *
 *    Hero: zamiast przerabiac markup (formularz wyszukiwania jest
 *    generowany przez AddiPress AI-OS i ma wlasny, wrazliwy na zmiany
 *    CSS w cache'u addipress-cache/apl-*.css — nie ruszamy go), hero
 *    dostaje delikatny, markowy odcien na istniejacym zdjeciu przez
 *    warstwe ::before z mix-blend-mode zamiast dublowania przyciemnienia.
 *    Prawdziwe zdjecie dekarzy przy pracy zostaje — to autentyczna
 *    tresc, nie ma potrzeby zamieniac na wzor CSS.
 *
 *    Trust-bar (.apl-stat): wieksze zaokraglenie (radius-lg, jak karty
 *    "pro" w prototypie) i cyfry w foncie mono — ta sama zasada co
 *    przy cenach (dane czytane jako dane, nie tekst naglowka).
 * ------------------------------------------------------------------ */

.apl-hero {
    position: relative;
    isolation: isolate;
}
.apl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--apl-primary) 38%, transparent) 0%,
        color-mix(in srgb, var(--apl-secondary) 22%, transparent) 100%
    );
    mix-blend-mode: color;
}
.apl-hero__inner {
    position: relative;
    z-index: 1;
}

.apl-stat {
    border-radius: var(--apl-radius-lg);
}
.apl-stat__num {
    font-family: var(--apl-font-mono);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 *    DekarzTU karty firm — dopasowanie do "SaaS pro" (#93 czesc 3).
 *
 *    .apl-card ma juz solidny system (hover-lift, cien, prawdziwe
 *    zdjecia z Google, plakietki) — bardzo blisko "pro-card" z
 *    prototypu. Dotykamy tylko dwoch rzeczy: wieksze zaokraglenie
 *    spojne z resztą tokenow (--apl-radius-lg) i piercien wyroznienia
 *    (.apl-card--featured) przestawiony z ogolnego --apl-warning na
 *    marke --apl-gold, zeby "Wyroznione" bylo czescia identyfikacji
 *    DekarzTU, a nie systemowym kolorem ostrzegawczym.
 * ------------------------------------------------------------------ */

.apl-card {
    border-radius: var(--apl-radius-lg);
}
.apl-card--featured {
    border-color: var(--apl-gold);
    box-shadow: 0 0 0 1px var(--apl-gold) inset;
}

/* ------------------------------------------------------------------
 *    DekarzTU strona pojedynczej firmy — spojnosc zaokraglen
 *    (Faza "SaaS pro", #94).
 *
 *    .apl-pricebox (karta oferty w sidebarze) i .apl-gallery (zdjecia)
 *    to jedyne dwie duze powierzchnie na tej stronie, ktore wciaz mialy
 *    stare, mniejsze --apl-radius zamiast --apl-radius-lg juz uzywanego
 *    na kartach/statystykach/kategoriach — dopinamy spojnosc.
 *
 *    Swiadomie NIE ruszamy: .apl-single__aside (sticky top:80px — ma
 *    udokumentowana historie buga z nakladajacymi sie widgetami, patrz
 *    komentarz w theme.css), .apl-gallery__track/slide (animacja
 *    przesuwania + fix na LiteSpeed "guess image dimensions"), ani
 *    koloru avatara z inicjalami (--apl-avatar-bg jest per-firma,
 *    celowo zroznicowany, nie jest to marka do ujednolicenia).
 * ------------------------------------------------------------------ */

.apl-pricebox,
.apl-gallery {
    border-radius: var(--apl-radius-lg);
}

/* ------------------------------------------------------------------
 *    DekarzTU kategorie — v2 (poprawka po feedbacku: mikro-wzory pod
 *    ikoną 46px czytały się jako przypadkowe smugi, nie jako "wzór
 *    materiału". Zamiast tego: pełne, nasycone kółka w kolorach marki,
 *    naprzemiennie primary/secondary/gold, z białą ikoną na wierzchu —
 *    ten sam, sprawdzony jezyk co ikony kategorii w Airbnb/Fiverr.
 *    Prostsze, odważniejsze, czytelne od razu, zero szumu wizualnego.
 * ------------------------------------------------------------------ */

.apl-cat__icon {
    background-image: none;
    color: #fff;
}
.apl-cat__icon .apl-i,
.apl-cat__icon svg {
    color: #fff;
    stroke: #fff;
}
.apl-cat:nth-child(3n+1) .apl-cat__icon { background-color: var(--apl-primary); }
.apl-cat:nth-child(3n+2) .apl-cat__icon { background-color: var(--apl-secondary); }
.apl-cat:nth-child(3n+3) .apl-cat__icon { background-color: var(--apl-gold); }

.apl-cat-emoji {
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ------------------------------------------------------------------
 *    DekarzTU — korekta po odbiorze (02.09, po pierwszym wdrożeniu
 *    #92-#95). Feedback: kategorie wyglądały na przypadkowe smugi,
 *    a reszta zmian była za mało widoczna / momentami "kicz". Trzy
 *    konkretne poprawki:
 * ------------------------------------------------------------------ */

/* 1) Hero — mix-blend-mode:color przy niskiej alfie był praktycznie
      niewidoczny na screenshotach i na żywo. Zamieniamy na wyraźny,
      dwubarwny (duotone) skos marki na zdjęciu — terakota w lewym
      górnym rogu, verdigris w prawym dolnym — czytelnie "zaprojektowane",
      a tekst nadal ma pełny kontrast (oryginalne przyciemnienie zdjęcia
      zostaje nietknięte, bo jest zapisane w atrybucie style, nie tutaj). */
.apl-hero::before {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--apl-primary) 55%, transparent) 0%,
        color-mix(in srgb, var(--apl-primary) 20%, transparent) 35%,
        color-mix(in srgb, var(--apl-secondary) 45%, transparent) 100%
    );
    mix-blend-mode: normal;
    opacity: .5;
}

/* 2) Przyciski — dodajemy ten sam uniesiony cień co karty/hero-art
      w prototypie, żeby CTA (nagłówek, sidebar firmy, "Dodaj firmę")
      wyglądały na "SaaS pro", a nie płasko. */
.apl-btn--primary {
    box-shadow: var(--apl-shadow);
}
.apl-btn--primary:hover {
    box-shadow: var(--apl-shadow-lg);
}

/* ------------------------------------------------------------------
 *    DekarzTU — .apl-grid auto-fill -> auto-fit (audyt 02.09).
 *
 *    Znaleziony podczas przegladu: sekcja "Wyroznione firmy" na
 *    stronie glownej ma tylko 2 pozycje, ale .apl-grid uzywa
 *    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) —
 *    auto-fill rezerwuje sloty na kolumny, ktorych nie ma tresc, wiec
 *    2 karty siedzialy stloczone po lewej, a polowa sekcji byla pusta.
 *    auto-fit collapsuje puste sloty i pozwala istniejacym kartom
 *    wypelnic cala szerokosc — dokladnie ten sam efekt gdy kolumn
 *    jest tyle samo co elementow (auto-fill i auto-fit sa wtedy
 *    identyczne), wiec to czysta poprawka bez skutkow ubocznych na
 *    stronach, gdzie siatka juz jest pelna (np. /firmy/).
 * ------------------------------------------------------------------ */

.apl-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}


/* ------------------------------------------------------------------
 *    DekarzTU widok Mapa — realny błąd UX (audyt 02.09, po zgłoszeniu
 *    "mapa nie pokazuje wszystkich firm").
 *
 *    .apl-skel-grid (siatka szkieletowa "ładowanie...") ma własną
 *    regułę display:grid, która ma wyższą specyficzność niż domyślna
 *    reguła przeglądarki dla [hidden]. Filtry.js poprawnie ustawiają
 *    element.hidden = true przy przełączeniu na widok Mapa, ale mimo
 *    to siatka szkieletowa zostawała widoczna (display:grid wygrywał),
 *    zajmując ok. 1000px wysokości i spychając mapę daleko poza ekran —
 *    dlatego wyglądało to jak "mapa nie działa" / pokazuje tylko jedną
 *    okolicę. Naprawa: [hidden] na tym elemencie musi wygrywać.
 * ------------------------------------------------------------------ */

.apl-skel-grid[hidden] {
    display: none;
}


/* ============================================================
 * [P6] Przeniesione z Dostosuj -> Dodatkowy CSS (Wygląd -> Customizer)
 * do właściwego pliku motywu, 2026-09-03. "Dodatkowy CSS" to szybki,
 * tymczasowy podgląd na żywo w Customizerze — nie plik z historią zmian,
 * łatwo go przypadkowo wyczyścić. Treść identyczna co do znaku, tylko
 * inne miejsce. Poniższe reguły były wcześniej scalone w jeden blok
 * "Dodatkowy CSS"; podział na sekcje zachowany z oryginału.
 * ============================================================ */

/* DekarzTU — poprawka odstepow w naglowkach (Claude) */
.apl-hero__title,
.apl-section__title,
.apl-archive__title,
.apl-single__title,
.apl-step__title,
.apl-feature__title,
.apl-cta__title{
  word-spacing:.16em;
}
/* koniec poprawki naglowkow */

/* Zabezpieczenie kontenera miniaturek przed rozpychaniem strony */
.apl-gallery__thumbs {
    display: flex !important;
    flex-wrap: wrap !important; /* To jest kluczowe - pozwala na zawijanie do nowej linii */
    justify-content: center !important; /* Wyśrodkowanie miniaturek */
    gap: 8px !important; /* Drobny odstęp między miniaturkami */
    max-width: 100% !important; /* Bezwzględna blokada szerokości */
    box-sizing: border-box !important;
    margin: 0 auto !important; /* Środkowanie całości na stronie */
}

/* Zabezpieczenie pojedynczych przycisków */
.apl-gallery__thumb {
    flex: 0 0 auto !important;
    max-width: 100% !important;
}

/* ==== DekarzTU PRO (karty, plakietki, przyciski) — Claude ==== */
/* 1) Zdjecia kart wypelniaja kadr — naprawa inline height:auto na zdjeciach Google (rowne miniatury) */
.apl-card__media{ position:relative; overflow:hidden; background:#eceef1; }
.apl-card__media > img,
img.apl-card__img{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; max-width:none !important;
  aspect-ratio:auto !important; object-fit:cover !important; object-position:center !important;
  display:block !important; transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.apl-card:hover img.apl-card__img{ transform:scale(1.045); }
.apl-card__media:not(:has(img.apl-card__img))::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,#e7e9ee 0 16px,#eef0f3 16px 32px);
}
/* 2) Karta — miekki cien + plynny hover-lift */
.apl-card{ border-radius:16px; overflow:hidden; border:1px solid #eceef1; box-shadow:0 1px 2px rgba(16,24,40,.05); transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.apl-card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -14px rgba(16,24,40,.24); border-color:#e3e6ea; }
/* 3) Plakietka „Profil nieprzejety" — czytelny chip zamiast bladego napisu */
.addipress-unclaimed-badge{
  display:inline-flex !important; width:auto !important; align-self:flex-start;
  align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600; line-height:1;
  background:#fff7ed; color:#9a5a1c; border:1px solid #f3d8ac; white-space:nowrap;
}
.addipress-unclaimed-badge .apl-i{ width:13px; height:13px; opacity:.85; }
/* plakietki pod tytulem: chipy, bez rozciagania na cala szerokosc (mobile) */
.apl-single__head .apl-badge,
.apl-single__head .addipress-unclaimed-badge{ display:inline-flex !important; width:auto !important; }
/* 4) Przyciski primary (m.in. „Popros o wycene … (AI)") — wiecej klasy */
.apl-btn--primary{
  background:var(--apl-primary) !important;
  border:none !important;
  box-shadow:0 6px 16px -6px rgba(15,23,42,.35), inset 0 1px 0 rgba(255,255,255,.14) !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.apl-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -6px rgba(15,23,42,.4), inset 0 1px 0 rgba(255,255,255,.18) !important; filter:saturate(1.05) brightness(1.08); }
.apl-btn--primary:active{ transform:translateY(0); }
/* 5) Panel „Popros o wycene" (pricebox) — subtelne dopracowanie */
.apl-pricebox{ border:1px solid #eceef1; border-radius:16px; box-shadow:0 10px 30px -18px rgba(16,24,40,.18); }
/* ==== koniec DekarzTU PRO ==== */


/* --- PROFESJONALNY WYGLĄD PASKA I POWIĘKSZONE LOGO --- */

/* 1. Ustawienia kontenera logo (zapobiega ściskaniu) */
.apl-header__brand {
    flex-shrink: 0;
    margin-right: 20px; /* Dystans od lokalizacji/menu */
}

/* 2. Powiększenie samego logo */
.apl-header__brand img.custom-logo {
    max-width: 240px !important; /* TUTAJ ZMIENIAJ WIELKOŚĆ (np. 200px, 260px) */
    width: 100%;
    height: auto !important;
    max-height: 80px !important; /* Pozwala logo urosnąć w pionie */
    object-fit: contain;
    transition: all 0.3s ease; /* Płynne skalowanie */
}

/* 3. Estetyka całego paska (dodanie 'oddechu' i wyśrodkowanie) */
.apl-container.apl-header__inner {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    align-items: center !important; /* Idealne wyśrodkowanie elementów w pionie */
    min-height: 85px; /* Gwarantuje minimalną, profesjonalną wysokość paska */
}

/* 4. Zabezpieczenie dla wersji mobilnej (telefony) */
@media (max-width: 768px) {
    .apl-header__brand img.custom-logo {
        max-width: 160px !important; /* Bezpieczna wielkość na telefony */
        max-height: 50px !important;
    }
    
    .apl-container.apl-header__inner {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        min-height: 60px;
    }
}

/* ==== DekarzTU PRO — wyniki wyszukiwania (scard) ==== */
.apl-scard__media{ position:relative; overflow:hidden; background:#eceef1; }
.apl-scard__media > img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; aspect-ratio:auto !important; object-fit:cover !important; object-position:center !important; display:block !important; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.apl-scard:hover .apl-scard__media > img{ transform:scale(1.045); }
/* ==== koniec scard ==== */

/* fix: plakietki nagłówka nie rozciągają się na mobile */
.apl-single__head .apl-badge, .apl-single__head .addipress-unclaimed-badge{ align-self:flex-start !important; }

/* mobile: skróć „Podsumowanie AI" */
@media (max-width:782px){
  .apl-ai-summary{ font-size:13px; line-height:1.5; }
  .apl-ai-summary.dtu-clamp{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .dtu-ai-more{ display:inline-block; margin-top:4px; background:none; border:0; color:var(--apl-primary,#b6492c); font-weight:600; font-size:13px; cursor:pointer; padding:2px 0; }
}
@media (min-width:783px){ .dtu-ai-more{ display:none; } }


/* Pasek statystyk (.apl-stats): zawsze pelna szerokosc niezaleznie od liczby kafelkow (3 lub 4) */
.apl-stats{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }


/* === AI search — wyeksponowany, nowoczesny przelacznik (hero) === */
.apl-search__ai{
	display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
	margin-top:14px; padding:9px 16px;
	background:#fff;
	background:color-mix(in srgb, var(--apl-primary) 8%, #fff);
	border:1.5px solid #e5e7eb;
	border-color:color-mix(in srgb, var(--apl-primary) 38%, transparent);
	border-radius:999px; cursor:pointer;
	font-size:15px; font-weight:700; color:var(--apl-ink,#0f172a);
	transition:background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.apl-search--hero .apl-search__ai:hover{ box-shadow:0 6px 20px rgba(0,0,0,.10); }
.apl-search__ai:has(.apl-search__ai-toggle:checked){
	background:var(--apl-primary); color:#fff;
	border-color:var(--apl-primary);
}
.apl-search__ai-toggle{
	-webkit-appearance:none; appearance:none; margin:0;
	width:40px; height:23px; border-radius:999px; flex:0 0 auto;
	background:#cbd5e1; position:relative; cursor:pointer;
	transition:background .2s;
}
.apl-search__ai-toggle::after{
	content:""; position:absolute; top:2px; left:2px;
	width:19px; height:19px; border-radius:50%; background:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .2s;
}
.apl-search__ai-toggle:checked{ background:rgba(255,255,255,.55); }
.apl-search__ai-toggle:checked::after{ transform:translateX(17px); background:var(--apl-primary); }
.apl-search__ai > span::before{ content:"\2728 "; }
.apl-search__ai-hint{ font-style:normal; font-weight:500; font-size:13px; opacity:.72; }
.apl-search__ai:has(.apl-search__ai-toggle:checked) .apl-search__ai-hint{ opacity:.9; }
/* === /AI search === */

/* AI toggle: kompaktowy pill do szerokosci tresci (override specyficznosci motywu) */
.apl-search--hero .apl-search__ai{ display:inline-flex; width:auto; max-width:100%; }


/* AI toggle: kontrast i pozycja (finalne dopracowanie) */
.apl-search--hero .apl-search__ai{ margin-right:auto; background:#fff; }
.apl-search--hero .apl-search__ai,
.apl-search--hero .apl-search__ai > span,
.apl-search--hero .apl-search__ai .apl-search__ai-hint{ color:var(--apl-ink,#0f172a); }
.apl-search--hero .apl-search__ai:has(.apl-search__ai-toggle:checked){ background:var(--apl-primary); }
.apl-search--hero .apl-search__ai:has(.apl-search__ai-toggle:checked),
.apl-search--hero .apl-search__ai:has(.apl-search__ai-toggle:checked) > span,
.apl-search--hero .apl-search__ai:has(.apl-search__ai-toggle:checked) .apl-search__ai-hint{ color:#fff; }


/* === Sekcja „Dekarze w Twojej okolicy” === */
.apl-nearby__lead{ margin:6px auto 0; max-width:640px; color:var(--apl-muted,#64748b); }
.apl-nearby__cta{ text-align:center; margin-top:14px; }
.apl-nearby__status{ margin-top:10px; font-size:14px; font-weight:600; color:var(--apl-muted,#64748b); }
.apl-nearby__results{ margin-top:20px; }
.apl-nearby__card{ display:flex; align-items:center; gap:12px; padding:10px; background:var(--apl-card,#fff); border:1px solid var(--apl-line,#e5e7eb); border-radius:16px; box-shadow:var(--apl-shadow,0 1px 3px rgba(0,0,0,.06)); text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease; }
.apl-nearby__card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12); }
.apl-nearby__img{ width:64px; height:64px; flex:0 0 auto; border-radius:12px; background-size:cover; background-position:center; background-color:#eef2f7; background-color:color-mix(in srgb, var(--apl-primary) 12%, #eef2f7); }
.apl-nearby__cbody{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.apl-nearby__name{ font-weight:700; color:var(--apl-ink,#0f172a); font-size:15px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.apl-nearby__meta{ font-size:13px; font-weight:600; color:var(--apl-muted,#64748b); }
.apl-nearby__meta strong{ color:var(--apl-primary); }
/* === /Sekcja okolicy === */

/* Placeholder kafelka w sekcji okolicy: subtelna pinezka zamiast pustki */
.apl-nearby__img--ph{ position:relative; }
.apl-nearby__img--ph::after{ content:""; position:absolute; inset:0; background:center/22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); opacity:.6; }


/* Awatar z inicjalami + znaczek zweryfikowanej firmy (sekcja okolicy) */
.apl-nearby__media{ position:relative; flex:0 0 auto; }
.apl-nearby__img--ini{ display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; letter-spacing:.02em; color:var(--apl-primary); background:#eef2f7; background:color-mix(in srgb, var(--apl-primary) 14%, #eef2f7); }
.apl-nearby__vf{ position:absolute; right:-4px; bottom:-4px; width:20px; height:20px; border-radius:50%; background:#16a34a; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; line-height:1; border:2px solid var(--apl-card,#fff); box-shadow:0 1px 2px rgba(0,0,0,.2); }


/* Siatki kart: wypelniaja rzad i centruja niepelny rzad (symetria, np. Wyroznione = 2 karty) */
.apl-grid{ display:flex; flex-wrap:wrap; justify-content:center; }
.apl-grid > *{ flex:1 1 300px; max-width:380px; }


/* Kategorie: wyśrodkuj niepełny ostatni rząd (symetria) */
.apl-cats{ display:flex; flex-wrap:wrap; justify-content:center; }
.apl-cats > *{ flex:1 1 215px; max-width:280px; }


/* === MOBILE-CATS: kategorie i miasta na telefonach (2 kolumny, kafelki pionowe, symetria) === */
@media (max-width:560px){
  .apl-cats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    justify-content:stretch;
    align-items:stretch;
  }
  .apl-cat{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:10px;
    padding:14px 12px;
    position:relative;
    min-height:94px;
    max-width:none;
  }
  .apl-cat__icon{ width:42px; height:42px; border-radius:12px; }
  .apl-cat__icon .apl-i, .apl-cat__icon svg{ width:23px; height:23px; }
  .apl-cat__name{
    font-size:13.5px;
    line-height:1.3;
    font-weight:700;
    flex:0 0 auto;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    padding-right:34px;
  }
  .apl-cat__count{
    position:absolute;
    top:12px;
    right:12px;
    font-size:11px;
    padding:2px 8px;
  }
}


/* === POPULAR-CHIPS: hero „Popularne" chipsy — wyraziste, premium, klikalne === */
.apl-search--hero .apl-search__popular{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
.apl-search--hero .apl-search__popular > span{
  color:rgba(255,255,255,.85);
  font-weight:700;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-right:2px;
}
.apl-search--hero .apl-search__popular a{
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
  font-weight:600;
  font-size:13.5px;
  line-height:1;
  text-decoration:none;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:background .16s, color .16s, border-color .16s, transform .16s, box-shadow .16s;
}
.apl-search--hero .apl-search__popular a:hover,
.apl-search--hero .apl-search__popular a:focus-visible{
  background:#fff;
  color:var(--apl-primary,#e8552a);
  border-color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.24);
}
@media (max-width:560px){
  .apl-search--hero .apl-search__popular{ gap:7px; margin-top:14px; }
  .apl-search--hero .apl-search__popular a{ padding:7px 12px; font-size:13px; }
}


/* === ARCHIVE-NOOVERFLOW: napraw poziome przewijanie na stronach lokalizacji/archiwów (mobile) ===
   Kolumna wyników jest elementem gridu bez min-width:0, więc nie moglaby zwezic sie
   ponizej szerokosci wewnetrznej siatki kart -> cala strona rozjezdzala sie w bok na telefonie. */
.apl-archive__layout{ min-width:0; }
.apl-archive__layout > *{ min-width:0; }
.apl-archive__results{ min-width:0; }
.apl-archive__results .apl-grid{ min-width:0; }


/* === CTA-PREMIUM: nowoczesne przyciski + panel „Popros o wycene" (wizytowka firmy) === */
/* Premium primary w calej witrynie: subtelny gradient, kolorowy cien, hover-lift */
.apl-btn.apl-btn--primary{
  background:linear-gradient(180deg, var(--apl-primary,#e9430f), color-mix(in srgb, var(--apl-primary,#e9430f) 84%, #000)) !important;
  box-shadow:0 2px 8px color-mix(in srgb, var(--apl-primary,#e9430f) 30%, transparent);
  border-color:transparent;
}
.apl-btn.apl-btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px color-mix(in srgb, var(--apl-primary,#e9430f) 42%, transparent);
  color:#fff;
}
.apl-btn.apl-btn--primary:active{ transform:translateY(0); box-shadow:0 2px 8px color-mix(in srgb, var(--apl-primary,#e9430f) 30%, transparent); }

/* Panel akcji — bardziej premium karta */
.apl-pricebox{
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.05);
  padding:22px;
}

/* Glowny przycisk AI — bohater konwersji */
.apl-btn.apl-jobmatch-trigger{
  padding:15px 20px;
  font-size:16px;
  letter-spacing:-.01em;
  box-shadow:0 6px 18px color-mix(in srgb, var(--apl-primary,#e9430f) 38%, transparent) !important;
}
.apl-btn.apl-jobmatch-trigger:hover{
  box-shadow:0 10px 24px color-mix(in srgb, var(--apl-primary,#e9430f) 48%, transparent);
}
.apl-jobmatch-trigger__hint{
  font-size:12.5px; color:var(--apl-muted,#64748b); text-align:center; line-height:1.45; margin:10px 2px 0;
}

/* „Zapisz" (obserwuj) — czysty, pelnej szerokosci przycisk drugorzedny */
.apl-fav-single{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:8px !important;
  width:100%;
  margin:0 !important;
  padding:11px 16px;
  border:1px solid var(--apl-line,#e2e8f0);
  border-radius:999px;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.apl-fav-single:hover{ border-color:var(--apl-primary,#e9430f); background:var(--apl-primary-050,#fdf0ec); }
.apl-fav-single .apl-fav{
  width:auto !important; height:auto !important; border-radius:0 !important; background:transparent !important; transform:none !important; box-shadow:none !important;
}
.apl-fav-single .apl-fav:hover{ transform:none !important; }
.apl-fav-single__lbl{ font-size:14.5px !important; font-weight:700 !important; color:var(--apl-ink,#1c2024); }


/* === SEARCHBTN-PREMIUM: przycisk „Szukaj" w hero spojny z primary (gradient marki) === */
.apl-search__btn, .apl-search--hero .apl-search__btn{
  background:linear-gradient(180deg, var(--apl-primary,#e9430f), color-mix(in srgb, var(--apl-primary,#e9430f) 84%, #000)) !important;
  border-color:transparent;
  transition:box-shadow .16s, filter .16s;
}
.apl-search__btn:hover{
  box-shadow:0 4px 14px color-mix(in srgb, var(--apl-primary,#e9430f) 40%, transparent);
  filter:brightness(1.04);
}


/* Emergency CTA (Pilna awaria / Pomoc awaryjna) under the hero search */
.apl-search__emg{display:flex;justify-content:center;margin-top:14px}
.apl-emg-cta{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;background:rgba(217,45,32,.16);border:1px solid rgba(255,255,255,.38);color:#fff;font-weight:700;font-size:14px;line-height:1;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.18);transition:background .16s,border-color .16s,transform .16s,box-shadow .16s}
.apl-emg-cta:hover,.apl-emg-cta:focus-visible{background:#d92d20;border-color:#d92d20;transform:translateY(-1px);box-shadow:0 8px 22px rgba(217,45,32,.45)}
.apl-emg-cta__ico{display:inline-flex}
.apl-emg-cta__ico svg{width:16px;height:16px}
.apl-emg-cta__txt strong{font-weight:800}
.apl-emg-cta__arr{font-weight:800}
@media(max-width:560px){.apl-emg-cta{font-size:13px;padding:9px 15px}}