/**
 * Wizytomat — wspólna warstwa UI (mobile-first) dla:
 * startu / konta / rezerwacji (szablony korzystają z Bootstrap + tych klas).
 * Nie zawiera kolorów — tylko tokeny z :root / body.wz-app.
 */

/* --- Bazowa powierzchnia aplikacji --- */
html {
  scroll-behavior: smooth;
}

body.wz-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--wz-font-sans);
  font-size: var(--wz-text-base);
  line-height: var(--wz-line-normal);
  color: var(--wz-text);
  background-color: var(--wz-bg-page);
  -webkit-font-smoothing: antialiased;
}

/* --- Nawigacja --- */
.navbar.wz-navbar {
  background-color: var(--wz-nav-bg) !important;
  box-shadow: var(--wz-shadow-sm);
}

.navbar.wz-navbar .navbar-brand,
.navbar.wz-navbar .nav-link,
.navbar.wz-navbar .btn-link {
  color: var(--wz-nav-color) !important;
}

/* Logo miasta (zewnętrzny SVG) — mobile-first */
.wz-city-logo {
  display: block;
  height: 2rem;
  width: auto;
  max-width: min(42vw, 9.5rem);
  object-fit: contain;
  object-position: left center;
}

@media (min-width: 576px) {
  .wz-city-logo {
    height: 2.35rem;
    max-width: 10rem;
  }
}

@media (min-width: 768px) {
  .wz-city-logo {
    height: 2.5rem;
    max-width: 11rem;
  }
}

.navbar.wz-navbar .nav-link {
  opacity: var(--wz-nav-link-opacity);
}

.navbar.wz-navbar .nav-link:hover,
.navbar.wz-navbar .nav-link:focus {
  opacity: 1;
}

.navbar.wz-navbar .navbar-toggler {
  border-color: color-mix(in srgb, var(--wz-nav-color) 35%, transparent);
}

.navbar.wz-navbar .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

/* --- Główna kolumna treści: odstępy mobile-first --- */
main.wz-main {
  flex: 1 0 auto;
  padding-top: var(--wz-space-4);
  padding-bottom: var(--wz-space-8);
}

@media (min-width: 768px) {
  main.wz-main {
    padding-top: var(--wz-space-6);
    padding-bottom: var(--wz-space-8);
  }
}

/* --- Wąskie kolumny (logowanie, profil, kroki rezerwacji) --- */
.wz-narrow {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

@media (min-width: 576px) {
  .wz-narrow {
    max-width: 26rem;
  }
}

@media (min-width: 768px) {
  .wz-narrow {
    max-width: 32rem;
  }
}

@media (min-width: 992px) {
  .wz-narrow {
    max-width: 36rem;
  }
}

/* Szerszy układ kalendarza / list (np. rezerwacja) */
.wz-readable {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}

@media (min-width: 1200px) {
  .wz-readable {
    max-width: 56rem;
  }
}

/* --- Karty i separatory --- */
.wz-card-surface {
  background-color: var(--wz-bg-card);
  border: 1px solid var(--wz-border);
  border-radius: var(--wz-radius-lg);
  box-shadow: var(--wz-shadow-card);
}

.wz-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wz-space-4);
}

.wz-stack-sm {
  gap: var(--wz-space-2);
}

/* --- Formularze: cele dotykowe --- */
.wz-app .btn:not(.btn-sm):not(.btn-lg),
.wz-app .form-control,
.wz-app .form-select {
  min-height: var(--wz-tap-min);
  padding-top: var(--wz-space-2);
  padding-bottom: var(--wz-space-2);
}

@media (min-width: 768px) {
  .wz-app .btn:not(.btn-sm):not(.btn-lg),
  .wz-app .form-control,
  .wz-app .form-select {
    min-height: unset;
  }
}

.wz-app .form-label {
  font-weight: 500;
  margin-bottom: var(--wz-space-2);
}

/* --- Linki w treści pomocniczej --- */
.wz-muted {
  color: var(--wz-text-muted) !important;
  font-size: var(--wz-text-sm);
  line-height: var(--wz-line-tight);
}

/* --- Focus widoczny (klawiatura) --- */
.wz-app .btn:focus-visible,
.wz-app .form-control:focus-visible,
.wz-app .form-select:focus-visible,
.wz-app .nav-link:focus-visible {
  outline: 2px solid var(--wz-primary);
  outline-offset: 2px;
}

/* --- Nagłówki sekcji (spójny rytm) --- */
.wz-page-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: var(--wz-line-tight);
  margin-bottom: var(--wz-space-3);
}

@media (min-width: 768px) {
  .wz-page-title {
    font-size: 1.5rem;
  }
}

.wz-section-label {
  font-size: var(--wz-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wz-text-muted);
  margin-bottom: var(--wz-space-1);
}

/* --- Strona główna — gryf w tle karty „Wybierz sprawę aby umówić wizytę” (jak w stopce; nie przewija się z listą) --- */
.wz-home-matter-card {
  position: relative;
  overflow: hidden;
}

.wz-home-matter-card > .card-body {
  position: relative;
}

.wz-home-matter-card > .card-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("images/footer-bg.webp");
  background-repeat: no-repeat;
  /* Jak w stopce: figura przy prawej krawędzi obszaru karty (bez odbicia lustrzanego) */
  background-position: right center;
  background-size: auto min(200%, 44rem);
  /* brightness(0) = jednolita czarna sylwetka — działa na białym tle karty (jaswy znak ze stopki znika) */
  filter: brightness(0);
  opacity: 0.16;
}

.wz-home-matter-card > .card-body > * {
  position: relative;
  z-index: 1;
}

.wz-home-matter-card .list-group {
  background-color: transparent;
  --bs-list-group-bg: transparent;
  --bs-list-group-action-hover-bg: rgba(var(--bs-primary-rgb), 0.1);
  --bs-list-group-action-active-bg: rgba(var(--bs-primary-rgb), 0.14);
}

.wz-home-matter-card .list-group-item {
  background-color: transparent;
}

/* Rezerwacja krok 1 (kategoria): Anuluj — biały, czerwona obwódka, hover pełna czerwień */
.wz-btn-cancel-outline.btn-outline-danger {
  background-color: #fff;
  color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.wz-btn-cancel-outline.btn-outline-danger:hover,
.wz-btn-cancel-outline.btn-outline-danger:focus-visible {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: #fff;
}

/* Harmonogram kategorii: cofnięcie do kroku 1 — biały, żółta obwódka, hover pełne żółte tło */
.wz-btn-back-correct-outline.btn-outline-warning {
  background-color: #fff;
  color: var(--bs-warning-text-emphasis, #664d03);
  border-color: var(--bs-warning);
}

.wz-btn-back-correct-outline.btn-outline-warning:hover,
.wz-btn-back-correct-outline.btn-outline-warning:focus-visible {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: var(--bs-dark, #212529);
}

@media (max-width: 991.98px) {
  .wz-home-matter-card > .card-body::before {
    background-size: auto min(200%, 34rem);
    opacity: 0.14;
  }
}

/* Ekran przywoływania — zegar, kalendarz i kolumna z nazwą komórki: jeden kolor tła. */
.summoning-analog-wrap-bg {
  background-color: #d8dee4;
}

/* --- Stopka / pas Pomoc (styl portalu Świnoujście) --- */
.wz-footer-band {
  flex-shrink: 0;
  background-color: var(--wz-home-help-bg, #111439);
  color: var(--wz-home-help-text, #fff);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}

@media (max-width: 1199.98px) {
  .wz-footer-band {
    background-size: auto 80%;
  }
}

@media (max-width: 991.98px) {
  .wz-footer-band {
    background-image: none !important;
  }
}

.wz-footer-band-divider {
  margin: var(--wz-space-6) 0 var(--wz-space-5);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 1;
}

.wz-footer-band-divider + .wz-footer-about-text {
  margin-top: 0;
}

.wz-home-help-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--wz-home-help-text, #fff);
  margin-bottom: var(--wz-space-4);
}

@media (min-width: 768px) {
  .wz-home-help-title {
    font-size: 1.5rem;
  }
}

.wz-home-help-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--wz-home-help-muted, rgba(255, 255, 255, 0.88));
  font-size: var(--wz-text-sm);
  line-height: var(--wz-line-normal);
}

.wz-home-help-list li + li {
  margin-top: var(--wz-space-3);
}

.wz-home-help-list strong {
  color: var(--wz-home-help-text, #fff);
  font-weight: 600;
}

.wz-footer-band a {
  color: var(--wz-home-help-link, #fff);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.wz-footer-band a:hover {
  color: var(--wz-home-help-link-hover, rgba(255, 255, 255, 0.78));
}

.wz-footer-band a:focus-visible {
  outline: 2px solid var(--wz-home-help-text, #fff);
  outline-offset: 2px;
}

.wz-footer-about-text {
  font-size: var(--wz-text-sm);
  line-height: var(--wz-line-normal);
  color: var(--wz-home-help-muted, rgba(255, 255, 255, 0.88));
}

.wz-footer-about-text strong {
  color: var(--wz-home-help-text, #fff);
  font-weight: 600;
}

.wz-footer-about-text code {
  font-size: 0.95em;
  color: var(--wz-home-help-text, #fff);
}