/* ALLMEBLO 2026-08-06 (runda b): pole wyszukiwania w naglowku + panel podpowiedzi.
   Wlascicielem pliku jest zadanie "naglowek/wyszukiwarka". Arkusz laduje sie
   w layout-both-columns.tpl PO header-menu.css, wiec przy rownej
   specyficznosci wygrywa z nim i z theme.css.

   ZMIERZONE PRZED (Chromium 1440x900, getComputedStyle + getBoundingClientRect):
     - #leo_search_block_top: border 1px solid #e3e3e3 -> kontrast wobec bieli
       1,28:1, czyli PONIZEJ progu 3:1 z WCAG 1.4.11 dla obramowania kontrolki,
     - #leo_search_block_top .block_content: padding-right 150 px, przez co
       pole tekstowe mialo 346 px przy 498 px szerokiej pigulce. 150 px
       pigulki po prawej WYGLADALO jak pole, ale nie dawalo sie w nie kliknac
       (odstep miedzy koncem inputa 635 px a przyciskiem lupy 744 px = 109 px
       martwej powierzchni),
     - wysokosc pola 42 px takze na telefonie, czyli cel dotykowy 42x42
       zamiast wymaganych 44x44 (WCAG 2.5.5 / 2.5.8).

   KONTRASTY (obliczone wzorem WCAG 2.1, zweryfikowane w przegladarce
   ktora regula faktycznie wygrywa - patrz raport):
     #8a7d6e na #ffffff = 4,01:1  (obramowanie pola, spoczynek)
     #63200a na #ffffff = 12,06:1 (obramowanie pola, hover)
     #2a7c00 na #ffffff = 5,27:1  (obramowanie i obwodka fokusu)
     #555555 na #ffffff = 7,45:1  (wpisywany tekst, bez zmian)
     #5b544d na #ffffff = 7,55:1  (placeholder, podniesione z #999)
     #521a06 na #ffffff = 13,92:1 (nazwa produktu w podpowiedzi)
     #521a06 na #e1ecdb = 11,48:1 (nazwa produktu, fragment w <mark>)
     #521a06 na #eef5eb = 12,51:1 (nazwa produktu, pozycja aktywna)
     #1f5c00 na #ffffff = 8,11:1  (cena, odsylacz "Zobacz wszystkie wyniki")
     #1f5c00 na #eef5eb = 7,30:1  (cena na pozycji aktywnej)
     #4a443e na #ffffff = 9,60:1  (komunikat "Brak wynikow")
   ========================================================================== */

:root {
    --alm-ss-linia: #8a7d6e;
    --alm-ss-linia-hover: #63200a;
    --alm-ss-zielen: #2a7c00;
    --alm-ss-zielen-ciemna: #1f5c00;
    --alm-ss-braz: #521a06;
    --alm-ss-tint: #eef5eb;
    --alm-ss-czas: .18s;
}

/* ==========================================================================
   1. POLE WYSZUKIWANIA: ksztalt, hover, focus
   ========================================================================== */

/* Pigulka. #leo_search_block_top ma w theme.css specyficznosc 1,0,0
   (`#leo_search_block_top { border: 1px solid #e3e3e3 }`), wiec 2,0,0
   wystarczy i nie potrzeba !important. */
#header #leo_search_block_top {
    position: relative;
    overflow: visible;
    border: 1px solid var(--alm-ss-linia);
    background-color: #fff;
    transition: border-color var(--alm-ss-czas) ease, box-shadow var(--alm-ss-czas) ease;
}

#header #leo_search_block_top:hover {
    border-color: var(--alm-ss-linia-hover);
}

/* Fokus calego pola: zmiana koloru ramki PLUS pierscien. Pierscien ma 3 px,
   czyli spelnia wymog grubosci z WCAG 2.4.13, a zielen na bieli daje 5,27:1,
   czyli powyzej progu 3:1 wobec koloru sasiadujacego. */
#header #leo_search_block_top:focus-within {
    border-color: var(--alm-ss-zielen);
    box-shadow: 0 0 0 3px rgba(42, 124, 0, .22);
}

/* Odzyskanie 150 px martwej powierzchni pigulki. Input ma wlasny
   padding-right 60 px, wiec tekst i tak nie wejdzie pod przycisk lupy.

   :not(.search-by-category) to zabezpieczenie. Szablon modulu dokleja klase
   .search-by-category do #leo_search_block_top, gdy w konfiguracji wlaczony
   jest wybor kategorii - wtedy w pigulce siedzi absolutnie pozycjonowany
   .list-cate-wrapper o szerokosci 150 px i padding 150 px jest POTRZEBNY.
   Zdarzylo sie to 2026-08-06 o 10:50 (ktos zapisal konfiguracje modulu
   w panelu, LEOPRODUCTSEARCH_ENABLE_CATEGORY skoczylo z 0 na 1). Ustawienie
   wrocilo na 0, ale gdyby ktos znowu zapisal formularz modulu, ta regula
   sama sie wylaczy zamiast wsunac tekst pod liste kategorii. */
#header #leo_search_block_top:not(.search-by-category) .block_content {
    padding-right: 0;
}
#header #leo_search_block_top .leoproductsearch-result {
    width: 100%;
}

/* Obwodka fokusu klawiaturowego samego inputa rysowana DO SRODKA - inaczej
   naklada sie dokladnie na ramke pigulki i obie znikaja wizualnie. */
#header #leo_search_query_top:focus-visible {
    outline: 3px solid var(--alm-ss-zielen);
    outline-offset: -3px;
    border-radius: 20px;
}

/* Placeholder: theme.css daje mu #999999 (2,85:1). Skrypt "maszyny do
   pisania" podmienia TRESC atrybutu, nie kolor, wiec kolor mozemy poprawic. */
#header #leo_search_query_top::placeholder {
    color: #5b544d;
    opacity: 1;
}

/* Cel dotykowy 44x44 na telefonie i tablecie (WCAG 2.5.8). */
@media (max-width: 991.98px) {
    #header #leo_search_block_top .block_content,
    #header #leo_search_block_top .leoproductsearch-result,
    #header #leo_search_query_top {
        height: 44px;
        min-height: 44px;
    }
    #header #leo_search_top_button {
        width: 44px;
        height: 44px;
    }
}

/* Wskaznik ladowania: cienka kreska pod polem zamiast kolowego spinnera
   modulu (ten byl 32x32 i przesuwal tekst). Nie zmienia wysokosci pola,
   wiec nie generuje CLS. */
#header #leo_search_block_top.alm-ss-laduje::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--alm-ss-zielen), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: alm-ss-pasek 1s linear infinite;
}
@keyframes alm-ss-pasek {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

/* Stara lista modulu leoproductsearch. !important jest tu konieczne, bo
   wtyczka pokazuje ja przez jQuery .show(), czyli stylem INLINE
   (display:block), a inline bije kazdy selektor bez !important. JS i tak
   usuwa ten wezel z DOM, to jest druga linia obrony na wypadek, gdyby
   modul odtworzyl go po sklejeniu plikow przez PS_JS_THEME_CACHE. */
#header #leo_search_block_top .ac_results {
    display: none !important;
}


/* ==========================================================================
   2. PANEL PODPOWIEDZI

   Panel jest position:absolute wzgledem #leo_search_block_top, wiec jego
   pojawienie sie NIE przesuwa niczego w ukladzie (CLS = 0).
   ========================================================================== */

#header .alm-ss {
    position: absolute;
    top: calc(100% + 8px);
    left: -1px;
    right: -1px;
    z-index: 1060;
    max-height: min(74vh, 524px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    border: 1px solid #d8ccbe;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 12px 32px rgba(82, 26, 6, .16), 0 2px 6px rgba(82, 26, 6, .08);
    text-align: left;
}
#header .alm-ss[hidden] {
    display: none;
}

#header .alm-ss__lista[hidden] {
    display: none;
}

#header .alm-ss__poz {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--alm-ss-braz);
    text-decoration: none;
    transition: background-color var(--alm-ss-czas) ease;
}
#header .alm-ss__poz + .alm-ss__poz {
    margin-top: 2px;
}

#header .alm-ss__foto {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 10px;
    background-color: #f4f1ee;
}
#header .alm-ss__foto--brak {
    display: block;
}

#header .alm-ss__tresc {
    display: flex;
    flex-flow: column nowrap;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

#header .alm-ss__nazwa {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--alm-ss-braz);          /* 13,92:1 */
}

#header .alm-ss__nazwa mark {
    padding: 0;
    background-color: rgba(42, 124, 0, .14);   /* #e1ecdb na bieli */
    color: var(--alm-ss-braz);                 /* 11,48:1 */
    font-weight: 700;
}

#header .alm-ss__cena {
    font-size: 14px;
    font-weight: 700;
    color: var(--alm-ss-zielen-ciemna);  /* 8,11:1 */
}

/* Stan aktywny (mysz i strzalki) - tlo PLUS obwodka, zeby wskazanie nie
   opieralo sie na samym kolorze (WCAG 1.4.1). */
#header .alm-ss__poz:hover,
#header .alm-ss__poz.jest-aktywna,
#header .alm-ss__poz:focus-visible {
    background-color: var(--alm-ss-tint);
    outline: 2px solid var(--alm-ss-zielen);
    outline-offset: -2px;
}

#header .alm-ss__wszystkie {
    justify-content: center;
    margin-top: 6px;
    padding: 12px 10px;
    border-top: 1px solid #ece4dc;
    border-radius: 0 0 12px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--alm-ss-zielen-ciemna);  /* 8,11:1 */
    text-align: center;
}

#header .alm-ss__pusto {
    margin: 0;
    padding: 18px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #4a443e;                      /* 9,60:1 */
    text-align: center;
}
#header .alm-ss__pusto[hidden] {
    display: none;
}

/* Komunikat dla czytnikow ekranu. Nie uzywamy .sr-only z motywu, zeby
   nie zalezec od cudzego pliku. */
#header .alm-ss__live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Telefon: nizsza lista, zeby nie chowala sie pod klawiatura ekranowa,
   i mniejsza miniatura, zeby zmiescic dwie linie nazwy. */
@media (max-width: 767.98px) {
    #header .alm-ss {
        max-height: min(56vh, 340px);
        padding: 5px;
        border-radius: 14px;
    }
    #header .alm-ss__poz {
        gap: 10px;
        padding: 7px 8px;
    }
    #header .alm-ss__foto {
        width: 46px;
        height: 46px;
    }
    #header .alm-ss__nazwa {
        font-size: 13px;
    }
    #header .alm-ss__cena {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #header #leo_search_block_top,
    #header .alm-ss__poz {
        transition: none;
    }
    #header #leo_search_block_top.alm-ss-laduje::after {
        animation: none;
        background: var(--alm-ss-zielen);
    }
}