.elementor-55 .elementor-element.elementor-element-7375a08{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;--margin-top:45px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:65px;--padding-bottom:65px;--padding-left:25px;--padding-right:25px;}.elementor-55 .elementor-element.elementor-element-1050426{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:var( --e-global-color-34e04c8 );--border-color:var( --e-global-color-34e04c8 );--border-radius:45px 45px 45px 45px;--padding-top:65px;--padding-bottom:65px;--padding-left:65px;--padding-right:65px;}.elementor-55 .elementor-element.elementor-element-196449c{width:100%;max-width:100%;margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-55 .elementor-element.elementor-element-2bf7356{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-wrap:wrap;--e-filter-overflow-x:initial;margin:35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-55 .elementor-element.elementor-element-d853836{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:45px 45px;--row-gap:45px;--column-gap:45px;--padding-top:25px;--padding-bottom:120px;--padding-left:25px;--padding-right:25px;}.elementor-55 .elementor-element.elementor-element-eb0a6ba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-55 .elementor-element.elementor-element-87722dc{--grid-columns:3;--grid-row-gap:30px;--grid-column-gap:30px;}.elementor-55 .elementor-element.elementor-element-87722dc .elementor-pagination{text-align:center;margin-top:30px;}body:not(.rtl) .elementor-55 .elementor-element.elementor-element-87722dc .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 13px/2 );}body:not(.rtl) .elementor-55 .elementor-element.elementor-element-87722dc .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 13px/2 );}body.rtl .elementor-55 .elementor-element.elementor-element-87722dc .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 13px/2 );}body.rtl .elementor-55 .elementor-element.elementor-element-87722dc .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 13px/2 );}@media(min-width:768px){.elementor-55 .elementor-element.elementor-element-eb0a6ba{--width:100%;}}@media(max-width:1024px){.elementor-55 .elementor-element.elementor-element-87722dc{--grid-columns:2;}}@media(max-width:767px){.elementor-55 .elementor-element.elementor-element-87722dc{--grid-columns:1;}}/* Start custom CSS for shortcode, class: .elementor-element-196449c *//* =========================================================
   NEUROEXPERT — AJAX SEARCH LITE / PREMIUM EDITION
   Wyszukiwarka (hero / header / globalnie)

   Co nowego w tej wersji:
   • Color-coded badges kategorii (Encyklopedia / Suplement / Zalecenie / Blog)
   • Premium hover: lewy niebieski accent strip + lekki shift w prawo
   • Stagger fade-in dla wyników (kaskadowa animacja)
   • Większe radiusy, miększe cienie
   • Custom CSS spinner zamiast ASL-owego SVG
   • Większy, "premium" focus ring
   • Lepszy "Więcej wyników" z animowaną strzałką
   • Empty state z ikoną
========================================================= */


/* =========================================================
   ZMIENNE — PEŁNA PALETA NEUROEXPERT
========================================================= */

.asl_w,
.asl_r {
  /* — paleta główna — */
  --asl-primary:           #1577AF;
  --asl-primary-hover:     #11618E;
  --asl-primary-soft:      #EAF4FA;       /* "Tło Akcent" */
  --asl-primary-glow:      rgba(21, 119, 175, 0.18);

  /* — tekst — */
  --asl-text:              #0F172A;       /* "Drugorzędny" */
  --asl-text-soft:         #1E293B;
  --asl-muted:             #475569;       /* "Tekst" */
  --asl-placeholder:       #94A3B8;
  --asl-autocomplete:      #CBD5E1;

  /* — tła i bordery — */
  --asl-bg:                #FFFFFF;
  --asl-bg-soft:           #F8FAFC;       /* "Tło" */
  --asl-border:            #E2E8F0;
  --asl-border-soft:       #F1F5F9;       /* "Border" */

  /* — kategorie (Custom Colors z palety) — */
  --asl-cat-enc:           #1577AF;        /* Encyklopedia: niebieski */
  --asl-cat-enc-bg:        #EAF4FA;
  --asl-cat-sup:           #10B981;        /* Suplement: zielony */
  --asl-cat-sup-bg:        #CCFDF5;
  --asl-cat-zal:           #A855F7;        /* Zalecenie: fiolet */
  --asl-cat-zal-bg:        #FAEEFF;
  --asl-cat-post:          #475569;        /* Blog/Post: szary */
  --asl-cat-post-bg:       #F1F5F9;

  /* — typografia — */
  --asl-font-body:         "Para", sans-serif;
  --asl-font-title:        "Title", serif;

  /* — przejścia — */
  --asl-ease:              cubic-bezier(0.22, 1, 0.36, 1);
  --asl-transition:        0.22s var(--asl-ease);
  --asl-transition-fast:   0.16s var(--asl-ease);

  /* — radiusy — */
  --asl-radius-box:        1.5rem;
  --asl-radius-drop:       1.25rem;
  --asl-radius-item:       0.875rem;
  --asl-radius-btn:        0.875rem;
  --asl-radius-pill:       999px;
}


/* =========================================================
   1. GŁÓWNY KONTENER
========================================================= */

div.asl_w {
  width: 100% !important;
  max-width: 868px !important;
  margin: 0 auto !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-family: var(--asl-font-body) !important;
}


/* =========================================================
   2. BIAŁY BOX WYSZUKIWARKI — premium look
========================================================= */

div.asl_w .probox {
  width: 100% !important;
  height: 84px !important;
  padding: 18px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;

  background: var(--asl-bg) !important;
  background-image: none !important;
  border: 1px solid var(--asl-border) !important;
  border-radius: var(--asl-radius-box) !important;

}





div.asl_w .prosettings { display: none !important; }


/* =========================================================
   3. WRAPPER POLA TEKSTOWEGO + LUPA
========================================================= */

div.asl_w .proinput {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;

  height: auto !important;
  margin: 0 !important;
  padding: 6px 50px 6px 12px !important;

  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  font-family: var(--asl-font-body) !important;
}

/* Lupa po lewej */
div.asl_w .proinput::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-right: 14px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  transition: opacity var(--asl-transition);
}

/* Lupa staje się niebieska gdy pole jest aktywne */
div.asl_w .probox:focus-within .proinput::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231577AF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3E%3C/svg%3E");
}

div.asl_w .proinput form {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 32px !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   4. POLA TEKSTOWE
========================================================= */

div.asl_w .proinput input.orig,
div.asl_w .proinput input.autocomplete {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 32px !important;
  line-height: 32px !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  font-family: var(--asl-font-body) !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-indent: 0 !important;
  transform: none !important;

  -webkit-appearance: none !important;
  appearance: none !important;
}

div.asl_w .proinput input[type="search"]::-webkit-search-decoration,
div.asl_w .proinput input[type="search"]::-webkit-search-cancel-button,
div.asl_w .proinput input[type="search"]::-webkit-search-results-button,
div.asl_w .proinput input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}

div.asl_w .proinput input.orig {
  color: var(--asl-text) !important;
  z-index: 2 !important;
}

div.asl_w .proinput input.autocomplete {
  color: var(--asl-autocomplete) !important;
  z-index: 1 !important;
}

div.asl_w .proinput input.orig::placeholder {
  color: var(--asl-placeholder) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}


/* =========================================================
   5. CUSTOM SPINNER (PRELOADER) + PRZYCISK X
========================================================= */

/* Ukrywamy domyślny SVG/GIF ASL (dla spinnera i przycisku X) */
div.asl_w .proloading > *,
div.asl_w .proloading img,
div.asl_w .proloading svg,
div.asl_w .proclose > *,
div.asl_w .proclose img,
div.asl_w .proclose svg {
  display: none !important;
}

div.asl_w .proloading {
  position: absolute !important;
  right: 165px !important;
  top: 50% !important;

  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  z-index: 10 !important;

  /* Własny CSS spinner */
  border: 2.5px solid var(--asl-border) !important;
  border-top-color: var(--asl-primary) !important;
  border-radius: 50% !important;
  background: transparent !important;

  /* Centrowanie pionowe + animacja rotacji w jednym transformie */
  animation: asl-spin 0.7s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes asl-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Przycisk X (czyść) — premium chip
   UWAGA: NIE wymuszamy display, bo plugin sam ustawia display:none
   gdy pole jest puste. X-y wewnątrz pozycjonujemy absolutnie. */
div.asl_w .proclose {
  position: absolute !important;
  right: 165px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  z-index: 10 !important;

  background: var(--asl-border-soft) !important;
  border-radius: 50% !important;
  cursor: pointer !important;

  transition: background var(--asl-transition) !important;
}

div.asl_w .proclose:hover {
  background: var(--asl-border) !important;
}

/* "X" — pseudo-elementy wycentrowane absolutnie wewnątrz proclose */
div.asl_w .proclose::before,
div.asl_w .proclose::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 1.5px;
  background: var(--asl-muted);
  border-radius: 1px;
}

div.asl_w .proclose::before { transform: translate(-50%, -50%) rotate(45deg); }
div.asl_w .proclose::after  { transform: translate(-50%, -50%) rotate(-45deg); }


/* =========================================================
   6. PRZYCISK SZUKAJ — premium
========================================================= */

div.asl_w .promagnifier {
  position: static !important;
  flex-shrink: 0 !important;

  width: auto !important;
  height: 48px !important;
  padding: 0 30px !important;
  margin-left: 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background-color: var(--asl-primary) !important;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 100%) !important;
  border: none !important;
  border-radius: var(--asl-radius-btn) !important;

  box-shadow:
    0 1px 2px rgba(21, 119, 175, 0.2),
    0 4px 12px -2px rgba(21, 119, 175, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;

  transition:
    background-color var(--asl-transition),
    box-shadow var(--asl-transition),
    transform var(--asl-transition-fast) !important;
}

div.asl_w .promagnifier:hover {
  background-color: var(--asl-primary-hover) !important;
  box-shadow:
    0 2px 4px rgba(21, 119, 175, 0.25),
    0 8px 20px -4px rgba(21, 119, 175, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

div.asl_w .promagnifier:active {
  transform: translateY(0) !important;
}

div.asl_w .promagnifier:focus-visible {
  outline: 3px solid var(--asl-primary-glow);
  outline-offset: 3px;
}

div.asl_w .promagnifier .innericon,
div.asl_w .promagnifier svg {
  display: none !important;
}

div.asl_w .promagnifier::after {
  content: "Szukaj";

  font-family: var(--asl-font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
}


/* =========================================================
   7. DROPDOWN WYNIKÓW
========================================================= */

div.asl_r,
div.asl_r.asl_r_1 {
  margin-top: 14px !important;
  padding: 10px !important;
  overflow: hidden !important;

  background: var(--asl-bg) !important;
  border: 1px solid var(--asl-border) !important;
  border-radius: var(--asl-radius-drop) !important;

  box-shadow:
    0 4px 8px -2px rgba(15, 23, 42, 0.06),
    0 16px 32px -8px rgba(15, 23, 42, 0.12),
    0 32px 64px -16px rgba(15, 23, 42, 0.12) !important;

  font-family: var(--asl-font-body) !important;
}

div.asl_r .results {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* =========================================================
   8. WIERSZ WYNIKU + STAGGER FADE-IN
========================================================= */

div.asl_r .item,
div.asl_r .resdrg .item {
  position: relative !important;
  overflow: hidden !important;

  padding: 14px 16px 14px 20px !important;
  margin: 0 0 2px 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: var(--asl-radius-item) !important;

  opacity: 0;
  animation: asl-fade-in 0.32s var(--asl-ease) forwards;

  transition:
    background-color var(--asl-transition),
    transform var(--asl-transition) !important;
}

/* Stagger — kaskada wyników */
div.asl_r .item:nth-child(1) { animation-delay: 0.00s; }
div.asl_r .item:nth-child(2) { animation-delay: 0.04s; }
div.asl_r .item:nth-child(3) { animation-delay: 0.08s; }
div.asl_r .item:nth-child(4) { animation-delay: 0.12s; }
div.asl_r .item:nth-child(5) { animation-delay: 0.16s; }
div.asl_r .item:nth-child(6) { animation-delay: 0.20s; }
div.asl_r .item:nth-child(n+7) { animation-delay: 0.24s; }

@keyframes asl-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lewy accent strip — wjeżdża przy hover */
div.asl_r .item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--asl-primary);
  opacity: 0;
  transform: translateX(-3px);
  transition:
    opacity var(--asl-transition),
    transform var(--asl-transition);
}

div.asl_r .item:hover,
div.asl_r .item.hovered {
  background: var(--asl-bg-soft) !important;
  transform: translateX(2px) !important;
}

div.asl_r .item:hover::before,
div.asl_r .item.hovered::before {
  opacity: 1;
  transform: translateX(0);
}

/* Delikatna kreska między wierszami */
div.asl_r .item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 16px;
  bottom: -1px;
  height: 1px;
  background: var(--asl-border-soft);
  pointer-events: none;
}

div.asl_r .item:hover:not(:last-child)::after {
  background: transparent;
}

div.asl_r .item .asl_content {
  display: block !important;
  width: 100% !important;
}

div.asl_r .item .etc:empty { display: none !important; }
div.asl_r .item .clear { display: none !important; }


/* =========================================================
   9. COLOR-CODED CATEGORY BADGES
   Plugin dodaje klasy do .item — wykorzystujemy je do badge przed h3
========================================================= */

/* h3 jako flex z badge inline */
div.asl_r .item .asl_content h3 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Wspólne style badge — domyślnie szary (post/blog) */
div.asl_r .item .asl_content h3::before {
  content: "Wpis";
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;

  height: 22px !important;
  padding: 0 10px !important;

  font-family: var(--asl-font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  border-radius: var(--asl-radius-pill) !important;
  color: var(--asl-cat-post) !important;
  background: var(--asl-cat-post-bg) !important;
}

/* Encyklopedia — niebieski */
div.asl_r .item.asl_r_encyklopedia .asl_content h3::before {
  content: "Encyklopedia";
  color: var(--asl-cat-enc) !important;
  background: var(--asl-cat-enc-bg) !important;
}

/* Suplementy — zielony */
div.asl_r .item.asl_r_suplementy .asl_content h3::before {
  content: "Suplement";
  color: var(--asl-cat-sup) !important;
  background: var(--asl-cat-sup-bg) !important;
}

/* Zalecenia — fiolet */
div.asl_r .item.asl_r_zalecenia .asl_content h3::before {
  content: "Zalecenie";
  color: var(--asl-cat-zal) !important;
  background: var(--asl-cat-zal-bg) !important;
}

/* Post / Blog — szary */
div.asl_r .item.asl_r_post .asl_content h3::before {
  content: "Blog";
  color: var(--asl-cat-post) !important;
  background: var(--asl-cat-post-bg) !important;
}


/* =========================================================
   10. TYTUŁ WPISU (Title font)
========================================================= */

div.asl_r .item h3,
div.asl_r .item .asl_content h3 {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;

  font-family: var(--asl-font-title) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
  color: var(--asl-text) !important;
}

div.asl_r .item h3 a,
div.asl_r .item a.asl_res_url {
  display: inline !important;

  font-family: var(--asl-font-title) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: var(--asl-text) !important;

  background: transparent !important;
  border: none !important;

  transition: color var(--asl-transition) !important;
}

div.asl_r .item:hover h3 a,
div.asl_r .item:hover a.asl_res_url {
  color: var(--asl-primary) !important;
}


/* =========================================================
   11. OPIS / FRAGMENT (Para font)
========================================================= */

div.asl_r .item .asl_desc,
div.asl_r .item .asl_content .asl_desc {
  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--asl-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--asl-muted) !important;
}


/* =========================================================
   12. PODŚWIETLENIE SZUKANEGO SŁOWA — ważne rozróżnienie!

   Plugin używa <span class="overlap"> w DWÓCH różnych miejscach:
   • w <a class="asl_res_url"> — to OVERLAY całego itemu
     (position:absolute, 100%×100%, służy do hover/selected effect).
     Wyłączamy go, bo mamy własny lewy accent strip + tło hover.
   • w <div class="asl_desc"> — to INLINE highlighter podświetlający
     słowa dopasowane do query. Ten stylizujemy jako "pill".
========================================================= */

/* OVERLAY w tytule — wyłączamy */
div.asl_r .item a.asl_res_url > .overlap {
  display: none !important;
}

/* HIGHLIGHT w opisie — inline pill */
div.asl_r .item .asl_desc .overlap {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;

  padding: 1px 4px !important;
  margin: 0 !important;

  background: var(--asl-primary-soft) !important;
  color: var(--asl-primary) !important;
  font-weight: 700 !important;
  font-family: inherit !important;

  border-radius: 4px !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Puste .overlap (brak dopasowania w danym fragmencie) — ukryć */
div.asl_r .item .overlap:empty {
  display: none !important;
}


/* =========================================================
   13. "WIĘCEJ WYNIKÓW" — wyraźny CTA

   Plugin renderuje strukturę:
     <p class="showmore">
       <span>Więcej wyników...</span>
     </p>
   plus własny border-bottom na <span> (reset poniżej).

   Stylizujemy jako pełnoprawny CTA: jasnoniebieskie tło,
   na hover staje się intensywnym primary z białym tekstem.
========================================================= */

div.asl_r .showmore,
div.asl_r p.showmore {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  margin: 10px 0 0 0 !important;
  padding: 14px 20px !important;

  background: var(--asl-primary-soft) !important;
  border: none !important;
  border-radius: var(--asl-radius-item) !important;

  font-family: var(--asl-font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--asl-primary) !important;
  text-align: center !important;
  cursor: pointer !important;

  transition:
    background var(--asl-transition),
    color var(--asl-transition),
    box-shadow var(--asl-transition) !important;
}

/* Strzałka — flex gap utrzymuje ją obok tekstu, nie pod nim */
div.asl_r .showmore::after,
div.asl_r p.showmore::after {
  content: '→' !important;
  display: inline-block !important;
  font-size: 1.125rem !important;
  line-height: 1 !important;
  transition: transform var(--asl-transition) !important;
}

/* <span> wewnątrz — reset border-bottom dodawanego przez plugin */
div.asl_r .showmore span,
div.asl_r p.showmore span {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  color: inherit !important;

  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Hover — premium "lift" z białym tekstem */
div.asl_r .showmore:hover,
div.asl_r p.showmore:hover {
  background: var(--asl-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px -2px rgba(21, 119, 175, 0.35) !important;
}

div.asl_r .showmore:hover::after,
div.asl_r p.showmore:hover::after {
  transform: translateX(5px) !important;
}

/* Linki w środku — dziedziczą po rodzicu */
div.asl_r .showmore a,
div.asl_r p.showmore a {
  color: inherit !important;
  text-decoration: none !important;

  font-family: var(--asl-font-body) !important;
  font-weight: 700 !important;
}


/* =========================================================
   14. EMPTY STATE
========================================================= */

div.asl_r .noresults {
  padding: 32px 16px !important;
  text-align: center !important;

  font-family: var(--asl-font-body) !important;
  font-size: 0.9375rem !important;
  color: var(--asl-muted) !important;
}

div.asl_r .noresults::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM12 9v3m0 3h.008v-.008H12V15z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  opacity: 0.7;
}


/* =========================================================
   15. RESPONSYWNOŚĆ
========================================================= */

@media (max-width: 767px) {
  div.asl_w .probox {
    height: 64px !important;
    padding: 12px !important;
    border-radius: 1.25rem !important;
  }

  div.asl_w .proinput {
    padding: 4px 40px 4px 8px !important;
  }

  div.asl_w .proinput::before {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  div.asl_w .proinput input.orig,
  div.asl_w .proinput input.autocomplete {
    font-size: 1rem !important;
  }

  div.asl_w .promagnifier {
    height: 42px !important;
    padding: 0 18px !important;
    margin-left: 8px !important;
  }

  div.asl_w .promagnifier::after {
    font-size: 0.875rem !important;
  }

  div.asl_w .proloading,
  div.asl_w .proclose {
    right: 105px !important;
    width: 18px !important;
    height: 18px !important;
  }

  div.asl_r {
    border-radius: 1rem !important;
    padding: 8px !important;
  }

  div.asl_r .item {
    padding: 12px 12px 12px 16px !important;
  }

  div.asl_r .item h3 {
    font-size: 1rem !important;
  }

  div.asl_r .item .asl_desc {
    font-size: 0.8125rem !important;
  }

  div.asl_r .item .asl_content h3::before {
    height: 20px !important;
    padding: 0 8px !important;
    font-size: 0.625rem !important;
  }
}


/* =========================================================
   16. REDUKCJA ANIMACJI (a11y)
========================================================= */

@media (prefers-reduced-motion: reduce) {
  div.asl_w *,
  div.asl_r * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Spinner zostaje — niezbędny do oznaczenia ładowania */
  div.asl_w .proloading {
    animation-duration: 0.7s !important;
    animation-iteration-count: infinite !important;
  }
}/* End custom CSS */
/* Start custom CSS for taxonomy-filter, class: .elementor-element-2bf7356 */:root {
--ne-primary: #1577af;
--ne-primary-gradient: linear-gradient(135deg, #1577af 0%, #1c8ecf 100%);
--ne-primary-hover-gradient: linear-gradient(135deg, #11618e 0%, #1577af 100%);
--ne-bg-inactive: #f8fafc;
--ne-bg-hover: #eaf4fa;
--ne-text-inactive: #475569;
--ne-text-hover: #1577af;
--ne-border-inactive: #e2e8f0;
--ne-border-hover: #cce4f3;
--ne-shadow-active: rgba(21, 119, 175, 0.25);
--ne-shadow-active-hover: rgba(21, 119, 175, 0.35);
--ne-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-filtry .e-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
padding: 1.5rem 0;
margin: 0 auto;
max-width: 100%;
}

.blog-filtry .e-filter-item {
background-color: var(--ne-bg-inactive) !important;
color: var(--ne-text-inactive) !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
padding: 10px 22px !important;
border-radius: 9999px !important;
border: 1px solid var(--ne-border-inactive) !important;
cursor: pointer !important;
transition: var(--ne-transition) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
outline: none !important;
user-select: none !important;
text-transform: capitalize !important;
position: relative;
overflow: hidden;
}

.blog-filtry .e-filter-item:hover {
background-color: var(--ne-bg-hover) !important;
color: var(--ne-text-hover) !important;
border-color: var(--ne-border-hover) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.blog-filtry .e-filter-item[aria-pressed="true"] {
background: var(--ne-primary-gradient) !important;
color: #ffffff !important;
border-color: transparent !important;
font-weight: 700 !important;
box-shadow: 0 8px 18px var(--ne-shadow-active) !important;
transform: translateY(-1px) !important;
}

.blog-filtry .e-filter-item[aria-pressed="true"]:hover {
background: var(--ne-primary-hover-gradient) !important;
box-shadow: 0 8px 24px var(--ne-shadow-active-hover) !important;
transform: translateY(-2px) !important;
}

.blog-filtry .e-filter-item[aria-pressed="true"]::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background-color: #ffffff;
border-radius: 50%;
margin-right: 8px;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
.blog-filtry .e-filter {
gap: 8px;
padding: 1rem 0;
}

.blog-filtry .e-filter-item {
padding: 8px 16px !important;
font-size: 0.8rem !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1050426 *//* 1. Główny kontener z płynniejszym gradientem na dole */
.hero-main-con {
position: relative;
overflow: hidden;
background-color: #2B9ADA2B !important;

/* Czysty kod bez komentarzy w środku + wymuszenie !important */
background-image:
linear-gradient(to top, rgba(248, 250, 252, 1) 0%, rgba(248, 250, 252, 0.95) 15%, rgba(248, 250, 252, 0.75) 30%, rgba(248, 250, 252, 0.4) 85%, rgba(248, 250, 252, 0.1) 95%, rgba(248, 250, 252, 0) 90%),
radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.58) 1px, transparent 0) !important;

background-size: 100% 650px, 40px 40px !important;
background-position: bottom left, top left !important;
background-repeat: no-repeat, repeat !important;
   box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.03), 0 8px 5px -10px rgba(0, 0, 0, 0.1);
}

/* 2. Jasnoniebieska, rozmyta poświata w prawym górnym rogu */
.hero-main-con::before {
content: "";
position: absolute;
top: -150px;
right: -150px;
width: 400px;
height: 400px;
background-color: #4fb4ee;
border-radius: 50%;
filter: blur(80px);
opacity: 0.3;
pointer-events: none;
z-index: 0;
}

/* 3. Subtelna, biała poświata z lewej strony */
.hero-main-con::after {
content: "";
position: absolute;
top: 150px;
left: -100px;
width: 300px;
height: 300px;
background-color: #ffffff;
border-radius: 50%;
filter: blur(80px);
opacity: 0.1;
pointer-events: none;
z-index: 0;
}

/* 4. Bezpieczeństwo warstw (Z-index) */
.hero-main-con > * {
position: relative;
z-index: 1;
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-87722dc *//* =========================================================
   STYLOWANIE PAGINACJI (Wzór NeuroExpert - Subtelny i Profesjonalny)
   ========================================================= */

/* 1. Główny kontener paginacji */
.elementor-pagination {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px !important; /* Delikatne odstępy między elementami zamiast zbijania ich w jeden blok */
    margin-top: 48px !important;
    padding: 0 !important;
}

/* 2. Pojedynczy element (link, bieżąca strona, wyłączone strzałki) */
.elementor-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px; /* Subtelniejszy, nieco mniejszy rozmiar bazowy */
    height: 38px;
    padding: 0 12px;
    margin: 0 !important;
    
    background-color: transparent !important; /* Brak tła domyślnie, dla "czystszego" wyglądu */
    color: #64748b !important; /* Ciemnoszary (slate-500) */
    border: 1px solid transparent !important; /* Niewidoczna ramka, by element nie "skakał" po hoverze */
    border-radius: 8px !important; /* Zaokrąglone rogi dla każdego przycisku z osobna */
    
    font-family: 'Para', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important; /* Lżejsza, mniej krzycząca grubość fontu */
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Bardziej płynna animacja */
    
    box-sizing: border-box !important;
}

/* 3. Efekt Hover dla klikalnych linków */
a.page-numbers:hover {
    background-color: #f8fafc !important; /* Bardzo jasne, perłowe tło (slate-50) */
    border-color: #e2e8f0 !important; /* Delikatnie zarysowana ramka pojawia się po najechaniu */
    color: #0f172a !important; /* Ciemniejszy tekst dla lepszego kontrastu */
    transform: translateY(-1px); /* Subtelne, eleganckie uniesienie przycisku */
}

/* 4. Aktywna strona (bieżąca) */
.elementor-pagination .page-numbers.current {
    background-color: #1577af !important; /* Główny firmowy niebieski */
    color: #ffffff !important;
    border-color: #1577af !important;
    font-weight: 600 !important; /* Aktywna cyfra odrobinę pogrubiona */
    box-shadow: 0 4px 12px rgba(21, 119, 175, 0.25) !important; /* Miękki, "świecący" cień w kolorze przycisku */
    transform: translateY(-1px); /* Podtrzymanie uniesienia dla aktywnego */
}

/* 5. Wyłączone przyciski (np. span "Poprzednia" na 1. stronie) */
span.page-numbers:not(.current) {
    color: #cbd5e1 !important; /* Bardzo jasny szary (slate-300), wygląda na wyblakły/nieaktywny */
    cursor: not-allowed !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* 6. Wyróżnienie strzałek słownych ("Poprzedni", "Następny") */
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next {
    font-weight: 600 !important;
    padding: 0 16px !important;
}

/* 7. Ukrycie słowa "Strona" (screen-reader text), które psuje domyślny układ Elementora */
.elementor-pagination .page-numbers .elementor-screen-only {
    display: none !important;
}/* End custom CSS */