/* Okienko z zacheta do wyceny - podstrony (blog, ceny osiedli, strony prawne).
   Kolory i przyciski z arkusza glownego, wiec tu tylko uklad okna. */

.okno-wyceny {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.okno-wyceny[hidden] { display: none; }
.okno-wyceny__tlo { position: absolute; inset: 0; background: rgba(20, 33, 43, .62); }
.okno-wyceny__karta {
  /* margin: auto zamiast samego align-items - przy przewijanym oknie gorny
     brzeg karty musi zostac osiagalny. Bez overflow, zeby lista podpowiedzi
     mogla wyjsc poza karte. */
  position: relative; width: 100%; max-width: 430px; margin: auto;
  background: var(--karta, #fff); border-radius: 16px; padding: 24px 20px 20px;
  box-shadow: 0 20px 60px rgba(20, 33, 43, .3);
  animation: zacheta-wjazd .22s ease-out;
}
@keyframes zacheta-wjazd { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.okno-wyceny__zamknij {
  position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; display: flex; align-items: center;
  justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--szary, #5b6873); cursor: pointer;
}
.okno-wyceny__zamknij:hover { background: var(--papier, #f3f5f6); color: var(--atrament, #14212b); }
.okno-wyceny__zamknij svg { width: 20px; height: 20px; }

.okno-wyceny__brewka { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zielony, #0e7a52); margin: 0 40px 8px 0; }
/* Etykieta zamiast brewki: ma rzucac sie w oczy pierwsza. */
.okno-wyceny__odznaka {
  align-self: start; margin: 0 40px 8px 0; padding: 5px 11px; border-radius: 999px;
  background: #ffcf3f; color: #14212b;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.okno-wyceny__tytul { font-size: 1.35rem; line-height: 1.2; margin: 0 0 8px; }
.okno-wyceny__lead { font-size: .95rem; color: var(--tekst, #25333e); margin: 0 0 16px; }

.okno-wyceny__form { display: grid; gap: 12px; }
.okno-wyceny__pole { display: grid; gap: 5px; font-size: .85rem; font-weight: 700; color: var(--atrament, #14212b); }
.okno-wyceny__pole input {
  width: 100%; min-height: 50px; padding: 12px 14px; font-size: 1.05rem; font-weight: 500;
  border: 2px solid var(--linia, #d9e0e5); border-radius: 10px; background: #fff; color: inherit;
}
.okno-wyceny__pole input:focus { border-color: var(--atrament, #14212b); outline: none; box-shadow: 0 0 0 3px rgba(255, 207, 63, .7); }
/* Pole dziedziczy pogrubienie po etykiecie - lista ma byc czytelna, nie krzyczaca. */
.okno-wyceny .podpowiedzi { max-height: 264px; font-size: 1.0625rem; font-weight: 400; }
.okno-wyceny .podpowiedzi--gora { top: auto; bottom: calc(100% + 4px); }

/* Klawiatura zjada pol ekranu: zostaja dwa pola i przycisk, reszta schodzi. */
.okno-wyceny--ciasno .okno-wyceny__lead,
.okno-wyceny--ciasno .okno-wyceny__drobne { display: none; }
.okno-wyceny--ciasno .okno-wyceny__karta { padding-top: 16px; }
.okno-wyceny--ciasno .okno-wyceny__tytul { font-size: 1.1rem; margin-bottom: 12px; }
.okno-wyceny--ciasno .okno-wyceny__form { gap: 10px; }
@media (max-height: 460px) {
  .okno-wyceny--ciasno .okno-wyceny__odznaka { margin-bottom: 6px; padding: 4px 9px; }
}
/* Na telefonie w wierszu jest ciasno: nazwa ulicy ma zostac w calosci
   i w jednej linii, a osiedle ma ustapic pierwsze. */
.okno-wyceny .podpowiedzi li { overflow: hidden; }
.okno-wyceny .podpowiedzi li span {
  flex: 0 0 auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.okno-wyceny .podpowiedzi li small { flex: 0 1 auto; }
.okno-wyceny__wyslij { width: 100%; margin-top: 2px; }
.okno-wyceny__drobne { font-size: .78rem; color: var(--szary, #5b6873); margin: 10px 0 0; text-align: center; }

/* Tlo nie ma sie przesuwac pod otwartym oknem. */
body.bez-przewijania { overflow: hidden; }

@media (max-width: 420px) {
  .okno-wyceny { padding: 10px; align-items: flex-end; }
  .okno-wyceny__karta { margin: auto auto 0; padding: 20px 16px 16px; border-radius: 16px 16px 0 0; }
  .okno-wyceny__tytul { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .okno-wyceny__karta { animation: none; }
}