/* Onboarding „fabuła" - ekran ogłoszeń (ekran 8): dwie drogi (portal albo plik), krok 2 z oknem
   „Znalezione oferty" albo prawdziwym importem w ramce, blok „Ogłoszenia podłączone".
   Kroki i postęp: komponenty .onb-krok / .onb-postep (komponenty.css). Tylko aliasy --onb-*. */

.onb-ogl__opcje { display: grid; grid-template-columns: 3fr 2fr; gap: .75rem; align-items: stretch; }
.onb-ogl__opcja { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; min-width: 0; padding: 1rem; border-radius: var(--onb-radius-sm); border: 1.5px solid var(--onb-green-text); background: var(--onb-card-2); }
.onb-ogl__opcja--plik { position: relative; border: 1px solid var(--onb-line); background: var(--onb-card); }
.onb-ogl__k { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--onb-green-text); }
.onb-ogl__opcja--plik .onb-ogl__k { color: var(--onb-text); }
.onb-ogl__d { margin: 0; font-size: .9375rem; color: var(--onb-muted); }

/* przełącznik portalu */
.onb-ogl__portale { display: flex; flex-wrap: wrap; gap: .5rem; }
.onb-ogl__portal { min-height: 2.75rem; padding: 0 1rem; border-radius: .625rem; border: 1px solid var(--onb-line-strong); background: var(--onb-card); color: var(--onb-text); font: inherit; font-weight: 600; cursor: pointer; }
.onb-ogl__portal[aria-pressed="true"] { border: 1.5px solid var(--onb-green-text); color: var(--onb-green-text); }
.onb-ogl__portal:focus-visible { outline: 3px solid var(--onb-green-text); outline-offset: 2px; }

/* nazwa konta + Szukaj */
.onb-ogl__wiersz { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; width: 100%; margin: 0; }
.onb-ogl__etykieta { flex: 1 1 100%; font-size: .875rem; font-weight: 600; }
.onb-ogl__pole { flex: 1 1 12rem; min-width: 0; min-height: 3rem; padding: 0 .75rem; border-radius: var(--onb-radius-sm); border: 1px solid var(--onb-line-strong); background: var(--onb-card); color: var(--onb-text); font: inherit; font-size: 1rem; }
.onb-ogl__pole::placeholder { color: var(--onb-muted); opacity: 1; }
.onb-ogl__pole:focus-visible { outline: 3px solid var(--onb-green-text); outline-offset: 1px; border-color: var(--onb-green-text); }
.onb-ogl__info { margin: 0; font-size: .9375rem; color: var(--onb-text); }
.onb-ogl__info:empty { display: none; }

/* plik: pole wyboru schowane, cała strefa upuszczania to jego etykieta */
.onb-ogl__plik { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.onb-ogl__upusc { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 4.5rem; margin-top: auto; padding: .875rem; border: 1.6px dashed var(--onb-muted); border-radius: var(--onb-radius-sm); cursor: pointer; }
.onb-ogl__upusc:hover, .onb-ogl__upusc.is-drag { border-color: var(--onb-green-text); background: var(--onb-card-2); }
.onb-ogl__plik:focus-visible + .onb-ogl__upusc { outline: 3px solid var(--onb-green-text); outline-offset: 2px; }
.onb-ogl__upusc svg { flex: 0 0 auto; color: var(--onb-green-text); }
.onb-ogl__upusc b { display: block; font-size: .9375rem; }
.onb-ogl__upusc small { display: block; font-size: .875rem; color: var(--onb-muted); }

/* krok 2: prawdziwy import w ramce */
.onb-ogl__tryb { display: grid; gap: .75rem; }
.onb-ogl__ramka { position: relative; min-height: 6rem; border-radius: var(--onb-radius-sm); overflow: hidden; border: 1px solid var(--onb-line); background: var(--onb-card-2); }
.onb-ogl__iframe { display: block; width: 100%; height: 42.5rem; border: 0; background: transparent; }
.onb-ogl__laduje { display: none; position: absolute; inset: 0; margin: 0; place-items: center; padding: 1rem; text-align: center; font-weight: 600; color: var(--onb-text); background: var(--onb-card-2); }
.onb-ogl__ramka.is-loading .onb-ogl__laduje { display: grid; }
.onb-ogl__akcje { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.onb-ogl__zero { margin-top: 1rem; }
.onb-ogl__wroc { margin-top: .5rem; color: var(--onb-text); }

/* koniec: ogłoszenia podłączone */
.onb-ogl__ok { margin-top: 1.25rem; padding: 1.25rem 1.5rem; border-radius: 1.25rem; border: 1px solid var(--onb-line); background: var(--onb-card); animation: onb-ogl-in .45s ease; }
.onb-ogl__ok-t { display: flex; align-items: center; gap: .5rem; margin: 0 0 .875rem; font-size: 1.125rem; font-weight: 800; color: var(--onb-green-text); }
.onb-ogl__ok-t svg { flex: 0 0 auto; }
.onb-ogl__ok-end { display: flex; align-items: center; justify-content: space-between; gap: .875rem; flex-wrap: wrap; }
.onb-ogl__ok-end p { margin: 0; flex: 1 1 18rem; font-size: 1rem; }
.onb-ogl__pozniej { display: block; margin: .875rem auto 0; color: var(--onb-text); }
@keyframes onb-ogl-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 51.25rem) {
  .onb-ogl__opcje { grid-template-columns: 1fr; }
  .onb-ogl__wiersz .onb-btn { flex: 1 1 100%; }
  .onb-ogl__iframe { height: 80vh; min-height: 32rem; }
  .onb-ogl__ok { padding: 1.125rem; }
  .onb-ogl__ok-end .onb-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-ogl__ok { animation: none; }
}

/* „Zmień" w zwiniętym kroku 1: powrót do nazwy albo pliku */
#onb-ogl-krok1 .onb-krok__glowa { grid-template-columns: 2.5rem 1fr auto; }
.onb-ogl__zmien { align-self: center; }
/* lista podpowiedzi biur (components/address-matching.css) w barwach onboardingu */
.onb .address-matching { background: var(--onb-card); color: var(--onb-text); border-color: var(--onb-line); }
.onb .address-matching-item:hover, .onb .address-matching-item.on { background: var(--onb-card-2); }
.onb .address-matching-brak, .onb .address-matching-szukam, .onb .address-matching-blad { color: var(--onb-muted); }
.onb .address-matching-brak:hover { background: var(--onb-card); }
