/* Wentro — ikonka (i) z objaśnieniem. Jeden komponent na cały system: panele, formularze logowania
   i rejestracji, strony publiczne. Zachowanie: public/js/infotip.js, treści: panel-tips.js (panel)
   albo wpisane przy polu (strony PHP: wentro_tip()).

   Zasady, na których stoi wygląd:
   - przycisk jest MAŁY (łatwo go przeoczyć, nie przeszkadza), ale pole kliknięcia ma 32 px
     (::after) — na telefonie trafia się w niego palcem;
   - dymek ma stały, ciemny wygląd w jasnym motywie i jasny w ciemnym — zawsze z kontrastem
     powyżej 7:1, niezależnie od tła, na którym wisi ikonka;
   - dymek jest jeden na stronie i leży na samej górze (position: fixed), więc nie ucina go
     overflow okna modalnego, tabeli ani przewijanej listy. */

.it {
  --it-fg: #4B615E;
  --it-ring: #9DB0AD;
  --it-hover-bg: #0E7C74;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0 0 0 5px;
  padding: 0;
  border: 1.5px solid var(--it-ring);
  border-radius: 50%;
  background: transparent;
  color: var(--it-fg);
  font: 700 11px/1 Georgia, 'Times New Roman', serif;
  font-style: italic;
  cursor: help;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.it::after { content: ''; position: absolute; inset: -8px; }
.it:hover,
.it[aria-expanded="true"] { background: var(--it-hover-bg); border-color: var(--it-hover-bg); color: #fff; }
.it:focus-visible { outline: 2px solid #14B8A6; outline-offset: 2px; }
.it > span { pointer-events: none; }

/* Ikonka na ciemnym tle (nagłówek karty, przycisk, panel marki) */
.it--on-dark { --it-fg: #D5ECE9; --it-ring: rgba(255, 255, 255, .55); --it-hover-bg: rgba(255, 255, 255, .22); }

html[data-theme="dark"] .it { --it-fg: #A9C2BF; --it-ring: #5A7773; --it-hover-bg: #14B8A6; }
html[data-theme="dark"] .it:hover,
html[data-theme="dark"] .it[aria-expanded="true"] { color: #07201E; }

/* Etykieta, przy której stoi ikonka, nie łamie się między tekstem a ikonką. */
.it-label { display: inline-flex; align-items: center; gap: 0; flex-wrap: nowrap; }

/* Dymek */
.it-pop {
  position: fixed;
  z-index: 2147483000;
  box-sizing: border-box;
  max-width: min(300px, calc(100vw - 24px));
  padding: 10px 13px 11px;
  border-radius: 12px;
  background: #0B2321;
  color: #F2FAF9;
  font: 500 13px/1.5 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 12px 32px rgba(11, 35, 33, .32), 0 2px 6px rgba(11, 35, 33, .2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
.it-pop.is-open { opacity: 1; transform: none; }
.it-pop b { display: block; margin: 0 0 3px; font-weight: 800; font-size: 13px; color: #fff; }
.it-pop p { margin: 0; }
.it-pop p + p { margin-top: 6px; }
.it-pop::before {
  content: '';
  position: absolute;
  left: var(--it-arrow-x, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 2px;
}
.it-pop[data-side="top"]::before { bottom: -4px; }
.it-pop[data-side="bottom"]::before { top: -4px; }

html[data-theme="dark"] .it-pop { background: #E6F4F2; color: #0B2321; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .it-pop b { color: #04201D; }

@media (prefers-reduced-motion: reduce) {
  .it, .it-pop { transition: none; }
}