/* PB 16.10.2026: wyniki wspolnej wyszukiwarki portalu i forum (js/ra-search.js), zamiast Google CSE.
   Nakladka (.gsearch-live-*) ma style w szablonie Joomli i forum - tu tylko zakladki i wiersze. */
.ras { font-family: Poppins, sans-serif; text-align: left; }
.ras-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 10px; position: sticky; top: 0; z-index: 2; background: #fff; }
.ras-tab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid #dfe3da; border-radius: 17px; background: #fff; color: #333; font: 500 13px/1 Poppins, sans-serif; cursor: pointer; white-space: nowrap; }
.ras-tab:hover { border-color: #9abb32; }
.ras-tab.on { background: #2b3a12; border-color: #2b3a12; color: #fff; }
.ras-tab .ras-n { font-weight: 400; font-size: 12px; color: #8a8f87; }
.ras-tab.on .ras-n { color: #cfe39a; }
.ras-tab-chat { margin-left: auto; border-color: #9abb32; color: #4f6b0c; }
.ras-tab-chat:hover { background: #f3f8e6; }
.ras-tab svg { flex: 0 0 auto; }
.ras-it { display: flex; gap: 12px; align-items: flex-start; padding: 12px 8px; border-bottom: 1px solid #eef0ec; color: inherit !important; text-decoration: none !important; }
.ras-it:hover { background: #f7f9f5; }
/* PB 16.10.2026: wszystkie miniatury kwadratowe, kadrowane do srodka (object-fit: cover) */
.ras-th { position: relative; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: #eef2ea; }
.ras-th img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ras-th-shop { background: #fff; }
.ras-th.is-yt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 16px; margin: -8px 0 0 -11px; border-radius: 4px; background: rgba(0,0,0,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 7l8 5-8 5z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ras-th.is-empty::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b38a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ras-main { flex: 1; min-width: 0; }
.ras-t { display: block; font-weight: 700; color: #7d3d00; font-size: 14.5px; line-height: 1.35; }
.ras-t b { color: #5a2c00; text-decoration: underline; text-decoration-color: #c9a27a; text-underline-offset: 2px; }
.ras-it:hover .ras-t { color: #6b8e23; }
.ras-m { display: block; margin: 2px 0 3px; color: #8a8f95; font-size: 12px; line-height: 1.4; }
.ras-m b { color: #5e7a16; font-weight: 400; }
.ras-src { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 17px; vertical-align: 1px; }
.ras-src-serwis { background: #eef4dc; color: #4f6b0c; }
.ras-src-forum { background: #e8f0f8; color: #2d5b86; }
.ras-src-sklep { background: #fdf0dc; color: #8a5300; }
.ras-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #444; font-size: 13px; line-height: 1.5; }
.ras-pr { flex: 0 0 auto; align-self: center; text-align: right; font-weight: 700; font-size: 15px; color: #1c1e21; white-space: nowrap; }
.ras-pr s { display: block; font-weight: 400; font-size: 12px; color: #8a8f95; }
.ras-pr-m { display: none; }
@media (max-width: 600px) {
  .ras-pr-d { display: none; }
  .ras-pr-m { display: block; text-align: left; margin-top: 2px; }
  .ras-pr-m s { display: inline; margin-left: 8px; }
}
.ras-msg { padding: 26px 14px; text-align: center; color: #666; font-size: 14px; }
.ras-msg-s { padding: 12px; font-size: 13px; }
.ras-more-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 8px 4px; color: #666; font-size: 13px; }
.ras-more-src, .ras-loadmore { border: 1px solid #e3e3dd; border-radius: 8px; background: #f2f2ee; color: #4a4a45; font: 500 13px/1 Poppins, sans-serif; padding: 9px 12px; cursor: pointer; }
.ras-more-src:hover, .ras-loadmore:hover { background: #e8e8e2; }
.ras-loadmore { display: block; width: 100%; margin-top: 12px; padding: 11px; font-size: 14px; }
.ras-empty { padding: 28px 14px; text-align: center; color: #555; font-size: 14px; line-height: 1.5; }
.ras-empty p { margin: 0 0 8px; }
.ras-ask { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 11px 18px; border: 0; border-radius: 8px; background: #6b8e23; color: #fff; font: 600 14px/1 Poppins, sans-serif; cursor: pointer; }
.ras-ask:hover { background: #5a7a1c; }
/* strona pelnych wynikow (com_gsearch) */
.ras-page-form { display: flex; gap: 10px; margin: 0 0 6px; }
.ras-page-form input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 2px solid #9abb32; border-radius: 8px; font: 500 16px Poppins, sans-serif; box-sizing: border-box; }
.ras-page-form button { height: 46px; padding: 0 20px; border: 0; border-radius: 8px; background: #2b3a12; color: #fff; font: 600 15px Poppins, sans-serif; cursor: pointer; }
.ras-page .ras-tabs { position: static; }
/* PB 16.10.2026: duza lista wynikow - wieksze miniatury i tytuly, wiecej powietrza miedzy tytulem,
   dzialem i fragmentem tresci (nakladka zostaje zwarta) */
.ras-page .ras-tabs { padding: 18px 0 14px; }
.ras-page .ras-it { gap: 20px; padding: 20px 10px; align-items: flex-start; }
.ras-page .ras-th { flex-basis: 120px; width: 120px; height: 120px; border-radius: 8px; }
.ras-page .ras-th.is-empty::after { background-size: 34px; }
.ras-page .ras-th.is-yt::after { width: 34px; height: 24px; margin: -12px 0 0 -17px; background-size: 20px; }
.ras-page .ras-t { font-size: 18px; line-height: 1.35; }
.ras-page .ras-m { margin: 8px 0 10px; font-size: 13px; }
.ras-page .ras-src { font-size: 11px; line-height: 19px; padding: 0 7px; }
.ras-page .ras-s { -webkit-line-clamp: 3; font-size: 14.5px; line-height: 1.65; color: #3d3f3b; }
/* PB 16.10.2026: dlugosc linii jak zajawki forum (ra_seg_styles.html, 75ch) - na szerokim ekranie
   fragment ciagnal sie przez ~1300 px i zle sie czytal */
.ras-page .ras-t, .ras-page .ras-s { max-width: 75ch; }
.ras-page .ras-pr { font-size: 18px; }
.ras-page .ras-pr s { font-size: 13px; margin-top: 2px; }
.ras-page .ras-more-row { padding: 22px 10px 6px; }
@media (max-width: 760px) {
  .ras-page .ras-it { gap: 14px; padding: 16px 4px; }
  .ras-page .ras-th { flex-basis: 90px; width: 90px; height: 90px; }
  .ras-page .ras-t { font-size: 16px; }
  .ras-page .ras-m { margin: 6px 0 8px; }
  .ras-page .ras-s { font-size: 14px; }
}
@media (max-width: 600px) {
  .ras-tabs { gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ras-tabs::-webkit-scrollbar { display: none; }
  .ras-tab { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .ras-tab-chat { margin-left: 0; }
  .ras-th { flex-basis: 52px; width: 52px; height: 52px; }
  .ras-it { padding: 10px 4px; gap: 10px; }
  .ras-pr { font-size: 13.5px; }
}
/* otwarta nakladka: przycisk Akwarka (ramka ze sklepu) zaslanial stopke na telefonie - jak .lac-root w sklepie.
   "Zapytaj na czacie" najpierw zamyka nakladke, wiec czat i tak sie pokaze. */
body.gsearch-overlay-open #akwarek-iframe { display: none !important; }
/* PB 16.10.2026: okienko nie zmienia wysokosci przy pisaniu (bylo wysrodkowane w pionie i skakalo
   razem z dlugoscia listy). Telefon: nakladka i tak jest na caly ekran. */
@media (min-width: 769px) {
  /* flex: 0 0 auto - przy flex:1 z szablonu (flex-basis 0%) Chrome bral wysokosc z tresci i ignorowal height */
  .gsearch-live-results.ras-host { flex: 0 0 auto; height: 62vh; max-height: 62vh; min-height: 0; }
}
.ras-list { transition: opacity .12s ease; }
.ras-list.ras-busy { opacity: .5; }
/* PB 16.10.2026: krzyzyk zamykania rowno na srodku kolka - znak "x" z fontu siedzial obok srodka.
   Glif chowamy (font-size:0), rysujemy X maska SVG w kolorze tekstu przycisku (bialy w kolku na
   desktopie, ciemny bez kolka na telefonie - reguly szablonu Joomli/forum zostaja). */
.gsearch-live-overlay .gsearch-live-close { font-size: 0 !important; line-height: 0 !important; display: flex; align-items: center; justify-content: center; }
.gsearch-live-overlay .gsearch-live-close::before {
  content: ""; display: block; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 1.5l11 11M12.5 1.5l-11 11' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 1.5l11 11M12.5 1.5l-11 11' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 768px) {
  .gsearch-live-overlay .gsearch-live-close { min-width: 36px; min-height: 36px; }
  .gsearch-live-overlay .gsearch-live-close::before { width: 18px; height: 18px; }
}
/* strona pelnych wynikow: link do sklepu na dole (w nakladce jest w stopce) */
.ras-page-foot { margin: 22px 0 8px; text-align: center; }
.ras-page-shop { display: inline-block; padding: 11px 26px; border-radius: 8px; background: #333; color: #fff !important; font: 500 15px/1.2 Poppins, sans-serif; text-decoration: none !important; }
.ras-page-shop:hover { background: #000; }
/* PB 16.10.2026 (wariant D z podgladu na zywo): na stronie wynikow cena w kolumnie 190 px przy prawej
   krawedzi, za pionowa kreska, wysrodkowana, pod nia zielony przycisk "Kup teraz". Telefon (<= 600 px):
   cena pod nazwa jak dotad (regula .ras-pr-m wyzej). Nakladka zostaje z cena z prawej bez kreski. */
@media (min-width: 601px) {
  .ras-page .ras-main { flex: 1 1 auto; }
  .ras-page .ras-pr-m { display: none; }
  .ras-page .ras-pr-d { display: flex; flex-direction: column; flex: 0 0 190px; align-self: stretch; justify-content: center; align-items: center;
    margin-left: 24px; border-left: 1px solid #dfe3d8; text-align: center; font-size: 20px; }
  .ras-page .ras-pr-d s { order: 2; display: block; margin: 2px 0 0; font-size: 13px; }
  .ras-page .ras-pr-d .ras-buy { order: 3; margin: 10px 0 0; padding: 8px 16px; border-radius: 8px; background: #6b8e23; color: #fff;
    font-size: 12px; letter-spacing: .03em; }
  .ras-page .ras-it:hover .ras-pr-d .ras-buy { background: #5a7a1c; color: #fff; text-decoration: none; }
}
@media (max-width: 600px) {
  .ras-page .ras-pr-m { margin: 0 0 8px; font-size: 18px; }
  .ras-page .ras-pr-m s { font-size: 14px; }
}
/* "Kup teraz" malym drukiem nad cena (nakladka i strona wynikow) */
.ras-buy { display: block; margin-bottom: 1px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; color: #5e7a16; }
.ras-it:hover .ras-buy { color: #3f5a0a; text-decoration: underline; }
/* gwiazdki opinii produktow: piec gwiazdek z gradientem do sredniej (--p) */
.ras-rate { white-space: nowrap; color: #767674; }
.ras-stars { display: inline-block; margin-right: 4px; font-size: 13px; letter-spacing: 1px; line-height: 1; vertical-align: -1px;
  background: linear-gradient(90deg, #f5a623 var(--p), #d9dbd4 var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ras-rate-n { font-weight: 600; color: #1f2420; }
.ras-page .ras-stars { font-size: 15px; }
/* zakladki baz opisow oddzielone pionowa kreska (PB 16.10.2026: bez osobnego koloru) */
.ras-tab-sep { flex: 0 0 1px; width: 1px; height: 24px; align-self: center; margin: 0 4px; background: #cfd5c6; }
/* PB 16.10.2026: "Zapytaj na czacie" w dwoch liniach mniejsza czcionka - z bazami nie miescil sie w rzedzie */
.ras-tab-chat { padding: 0 12px 0 10px; }
.ras-tab-2l { display: block; font-size: 11px; line-height: 1.15; text-align: left; white-space: nowrap; }
/* rzad zakladek z bazami potrzebowal ~970 px, a wyniki w nakladce maja ~960 - ciasniej o ~50 px */
@media (min-width: 601px) {
  .ras-tabs { gap: 6px; }
  .ras-tab { padding: 0 12px; }
  .ras-tab-chat { padding: 0 10px 0 9px; }
  .ras-tab-sep { margin: 0 3px; }
}
/* forum: globalna regula a11y input:focus-visible (overall_header.html, brazowy outline z offsetem) dawala
   w nakladce podwojna ramke - fokus pokazuje juz ciemny border pola (.gsearch-modal-input:focus), jak na Joomli */
.gsearch-live-overlay .gsearch-modal-input:focus,
.gsearch-live-overlay .gsearch-modal-input:focus-visible { outline: none; }
/* PB 16.10.2026: telefon - cena pod fragmentem opisu, w poziomie: "24,99 zl  [stara]  KUP TERAZ" */
@media (max-width: 600px) {
  .ras-pr-m, .ras-page .ras-pr-m { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 0; font-size: 16px; }
  .ras-page .ras-pr-m { font-size: 17px; }
  .ras-pr-m s { order: 2; margin: 0; font-size: 12.5px; }
  .ras-pr-m .ras-buy { order: 3; margin: 0; padding: 5px 11px; border-radius: 6px; background: #6b8e23; color: #fff; font-size: 11px; }
  .ras-it:hover .ras-pr-m .ras-buy { background: #5a7a1c; color: #fff; text-decoration: none; }
}
/* krzyzyk "wyczysc" w polu wyszukiwania (addClear w js/ra-search.js) */
.ras-inwrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.ras-inwrap > input { flex: 1 1 auto; width: 100%; min-width: 0; padding-right: 44px !important; box-sizing: border-box; }
.ras-inwrap > input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* margin:0 !important - szablon Joomli daje przyciskom margin-top 10px (krzyzyk spadal w dol) */
.ras-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0 !important; display: none; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #e6e8e3; color: #555; cursor: pointer; }
.ras-clear:hover { background: #d8dbd4; color: #222; }
.ras-inwrap.has-val .ras-clear { display: flex; }

/* PB 16.10.2026: czat w stopce nakladki obok "Odwiedz nasz sklep" */
.gsearch-live-footer .ras-foot-chat { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 14px; border: 1px solid #9abb32; border-radius: 999px; background: none; color: #4f6b0c; font: inherit; font-size: inherit; line-height: 1.2; cursor: pointer; white-space: nowrap; box-shadow: none; }
.gsearch-live-footer .ras-foot-chat:hover { background: #f3f8e6; }
.gsearch-live-footer .ras-foot-chat svg { width: 18px; height: 18px; flex: 0 0 auto; }