/* Opinie M16 — układy jak w Trustindeksie: lista, siatka, karuzela, odznaka, przycisk,
   pływający pasek, wyskakujące okno i pasek boczny. Kolory idą za motywem strony,
   ale da się wymusić jasny albo ciemny klasą m16-jasny / m16-ciemny. */
.m16-opinie {
  --m16-gwiazdka: #fbbc05;
  --m16-tlo: #fff;
  --m16-tekst: #1d1d1b;
  --m16-cichy: #6b6b6b;
  --m16-linia: rgba(0, 0, 0, .12);
  --m16-cien: 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%);
  --m16-promien: 12px;
  --m16-kolumny: 3;
  color: var(--m16-tekst);
  font-size: 15px;
  line-height: 1.5;
}
/* Wymuszony ciemny motyw na jasnej stronie musi mieć własne tło, inaczej nagłówek jest nieczytelny. */
.m16-ciemny:not(.m16-odznaka):not(.m16-przycisk) { background: #161615; padding: 18px; border-radius: 14px; }
.m16-ciemny { --m16-tlo: #1f1f1d; --m16-tekst: #ecece8; --m16-cichy: #a3a39b; --m16-linia: rgba(255, 255, 255, .16); --m16-cien: none; }
@media (prefers-color-scheme: dark) {
  .m16-opinie:not(.m16-jasny) { --m16-tlo: #1f1f1d; --m16-tekst: #ecece8; --m16-cichy: #a3a39b; --m16-linia: rgba(255, 255, 255, .16); --m16-cien: none; }
}
.m16-opinie * { box-sizing: border-box; }

/* ——— Zbroja na motywy i buildery ———
   Elementor, Divi i spółka nadpisują globalnie przyciski, linki i cytaty (np. różowy hover na strzałkach).
   Nasze elementy resetujemy twardo i tylko wewnątrz .m16-opinie — nic poza widżetem nie jest ruszane. */
.m16-opinie button, .m16-opinie a, .m16-opinie blockquote, .m16-opinie figure, .m16-opinie figcaption,
.m16-opinie time, .m16-opinie span, .m16-opinie strong, .m16-opinie small, .m16-opinie svg, .m16-opinie ul, .m16-opinie li {
  font-family: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.m16-opinie button, .m16-opinie a {
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
}
.m16-opinie a, .m16-opinie a:hover, .m16-opinie a:focus, .m16-opinie a:visited, .m16-opinie a:active {
  text-decoration: none !important;
  background: none !important;
}
.m16-opinie blockquote, .m16-opinie blockquote:before, .m16-opinie blockquote:after {
  quotes: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-style: normal !important;
  color: inherit !important;
}
.m16-opinie figure { margin: 0 !important; }
.m16-opinie figcaption { margin: 0 !important; padding: 0 !important; background: none !important; text-align: left !important; }
.m16-opinie ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.m16-opinie svg { display: inline-block; vertical-align: middle; max-width: none !important; }
.m16-g { width: 18px; height: 18px; flex: none; }
.m16-opinie .m16-gwiazdki { color: var(--m16-gwiazdka) !important; letter-spacing: 1px !important; white-space: nowrap; }
.m16-gwiazdki .m16-puste { opacity: .25; }

/* Nagłówek z oceną */
.m16-naglowek { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.m16-naglowek .m16-g { width: 26px; height: 26px; }
.m16-ocena { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m16-ocena strong { font-size: 1.5em; line-height: 1; }
.m16-ile { color: var(--m16-cichy); font-size: .9em; }
.m16-opinie .m16-cta, .m16-opinie .m16-cta:hover, .m16-opinie .m16-cta:focus {
  margin-left: auto; padding: 8px 14px !important; border-radius: 999px !important;
  border: 1px solid var(--m16-linia) !important; color: var(--m16-tekst) !important;
  background: none !important; font-size: .9em !important; white-space: nowrap; }
.m16-opinie .m16-cta:hover { border-color: var(--m16-tekst) !important; }
.m16-opinie[style*='--m16-akcent'] .m16-cta { border-color: var(--m16-akcent); color: var(--m16-akcent); }
.m16-opinie[style*='--m16-akcent'] .m16-ocena strong, .m16-opinie[style*='--m16-akcent'] .m16-odznaka-ocena strong { color: var(--m16-akcent); }

/* Karta opinii */
.m16-opinie .m16-opinia { margin: 0 !important; padding: 16px 18px !important; background: var(--m16-tlo) !important;
  border: 1px solid var(--m16-linia) !important; border-radius: var(--m16-promien) !important;
  box-shadow: var(--m16-cien); display: flex; flex-direction: column; gap: 8px; }
.m16-opinia-gora { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Długie opinie potrafią mieć i 2000 znaków — przycinamy do kilku linii i dajemy „Czytaj więcej”,
   inaczej jedna opinia rozpycha całą siatkę. */
.m16-opinia blockquote { margin: 0; padding: 0; border: 0; font-size: .95em; overflow-wrap: anywhere; }
.m16-opinia figcaption { display: flex; justify-content: space-between; gap: 10px; font-size: .85em; color: var(--m16-cichy); }
/* Autor i data przy dolnej krawędzi — karty w rzędzie mają równą wysokość, a karta z samą gwiazdką nie ma treści.
   Musi przebić reset `.m16-opinie figcaption { margin: 0 !important }`, który zjadał dotychczasowe margin-top: auto. */
.m16-opinie .m16-opinia figcaption { margin-top: auto !important; }
.m16-autor { font-weight: 600; color: var(--m16-tekst); }

/* Lista i siatka */
.m16-lista { display: grid; gap: 16px; }
.m16-siatka .m16-lista { grid-template-columns: repeat(var(--m16-kolumny), minmax(0, 1fr)); }
@media (max-width: 900px) { .m16-siatka .m16-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .m16-siatka .m16-lista { grid-template-columns: 1fr; } }

/* Karuzela — strzałki bez tła, wysunięte poza karty; na telefonie pod spodem, żeby nie leżały na treści. */
.m16-karuzela-ramka { position: relative; padding: 0 30px; }
.m16-tor { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.m16-tor::-webkit-scrollbar { display: none; }
.m16-tor > .m16-opinia { scroll-snap-align: start; flex: 0 0 min(320px, 85%); }
@media (min-width: 900px) { .m16-tor > .m16-opinia { flex-basis: calc(33.333% - 11px); } }
.m16-opinie .m16-strzalka, .m16-opinie .m16-strzalka:hover, .m16-opinie .m16-strzalka:focus, .m16-opinie .m16-strzalka:active {
  position: absolute; top: 50%; transform: translateY(-50%) !important; z-index: 2;
  width: 30px; height: 44px; padding: 0 !important; border: 0 !important; background: none !important;
  box-shadow: none !important; color: var(--m16-tekst) !important; opacity: .55;
  font-size: 30px !important; line-height: 1 !important; cursor: pointer; }
.m16-opinie .m16-strzalka:hover { opacity: 1; }
.m16-opinie .m16-strzalka[disabled] { opacity: .18; cursor: default; }
.m16-w-lewo { left: -4px; } .m16-w-prawo { right: -4px; }
.m16-opinie.m16-bez-przewijania .m16-strzalka { display: none !important; } /* wszystkie karty widać naraz */

/* Stany :hover/:focus/:active MUSZĄ być wymienione i tutaj: reguła ogólna wyżej ma je w selektorze (mocniejszy niż
   sam `.m16-strzalka`), więc przy dotknięciu strzałka wracała do position:absolute, uciekała spod palca i klik
   trafiał w ramkę — na telefonie strzałki nie działały wcale (Kalanto, #493 w CRM). */
@media (max-width: 700px) {
  .m16-karuzela-ramka { padding: 0; display: flex; flex-wrap: wrap; }
  .m16-karuzela-ramka .m16-tor { order: 1; flex: 1 0 100%; }
  .m16-opinie .m16-strzalka, .m16-opinie .m16-strzalka:hover, .m16-opinie .m16-strzalka:focus, .m16-opinie .m16-strzalka:active {
    position: static; transform: none !important; order: 2; margin: 10px 0 0 auto; height: 38px; width: 44px; }
  .m16-opinie .m16-w-prawo, .m16-opinie .m16-w-prawo:hover, .m16-opinie .m16-w-prawo:focus, .m16-opinie .m16-w-prawo:active {
    order: 3; margin-left: 6px; }
}

/* Odznaka i przycisk */
.m16-odznaka, .m16-przycisk, a.m16-przycisk:hover, a.m16-przycisk:focus {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px !important;
  background: var(--m16-tlo) !important; border: 1px solid var(--m16-linia) !important; border-radius: 999px !important;
  box-shadow: var(--m16-cien) !important; text-decoration: none !important; color: var(--m16-tekst) !important; }
a.m16-przycisk:hover { border-color: var(--m16-tekst) !important; }
.m16-odznaka-ocena { display: inline-flex; align-items: center; gap: 6px; }
.m16-odznaka-ocena strong { font-size: 1.15em; }
.m16-odznaka-ile { color: var(--m16-cichy); font-size: .88em; }

/* Pływający pasek, wyskakujące okno i pasek boczny */
.m16-plywajaca, .m16-popup, .m16-bok { position: fixed; z-index: 9999; }
.m16-plywajaca { left: 16px; bottom: 16px; }
.m16-popup { right: 16px; bottom: 16px; }
.m16-bok { right: 0; top: 40%; }
.m16-opinie .m16-uchwyt, .m16-opinie .m16-uchwyt:hover, .m16-opinie .m16-uchwyt:focus {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px !important; cursor: pointer;
  background: var(--m16-tlo) !important; color: var(--m16-tekst) !important; border: 1px solid var(--m16-linia) !important;
  border-radius: 999px !important; box-shadow: 0 6px 20px rgb(0 0 0 / 18%) !important; font: inherit !important; }
.m16-bok .m16-uchwyt { border-radius: 12px 0 0 12px; writing-mode: horizontal-tb; }
.m16-uchwyt small { display: block; color: var(--m16-cichy); font-size: .8em; }
.m16-panel { position: absolute; bottom: calc(100% + 10px); width: min(360px, calc(100vw - 32px)); max-height: 60vh;
  overflow: auto; padding: 14px; background: var(--m16-tlo); border: 1px solid var(--m16-linia);
  border-radius: var(--m16-promien); box-shadow: 0 16px 40px rgb(0 0 0 / 24%); }
.m16-plywajaca .m16-panel { left: 0; } .m16-popup .m16-panel { right: 0; }
.m16-bok .m16-panel { right: 0; top: 0; bottom: auto; }
.m16-panel-gora { display: flex; align-items: flex-start; gap: 8px; }
.m16-panel-gora .m16-naglowek { margin-bottom: 10px; }
.m16-zamknij { margin-left: auto; background: none; border: 0; color: var(--m16-cichy); font-size: 16px; cursor: pointer; }
.m16-panel-lista { display: grid; gap: 12px; }
.m16-panel .m16-opinia { box-shadow: none; }