/* Wirtualny spacer 360 (tylko strona wirtualny-spacer.html; arkusz Pannellum ładuje się przed tym).
   1. ramka i wysokość   2. karta z nazwą punktu   3. przyciski   4. strefy i punkty
   5. strzałki na podłodze   6. plan   7. pełny ekran   8. telefon   9. pod spacerem */

/* 1. ramka i wysokość ------------------------------------------------------ */
.spacer {
  --szklo: rgba(255, 255, 255, .9);
  --szklo-cien: 0 10px 30px rgba(22, 38, 96, .16);
  position: relative;
  width: 100%;
  height: calc(100svh - var(--wys-naglowka, 84px));
  min-height: 460px;
  max-height: 1100px;
  background: var(--granat);
  overflow: clip;
  isolation: isolate;
}
.spacer__widz { position: absolute; inset: 0; }
.spacer .pnlm-container { background: var(--granat); font-family: var(--font); }
.spacer .pnlm-load-box {
  background: var(--szklo); color: var(--granat); border-radius: 18px; box-shadow: var(--szklo-cien);
  width: 240px; height: auto; margin: -48px 0 0 -120px; padding: 18px 20px 20px; font-family: var(--font);
}
.spacer .pnlm-load-box p { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.spacer .pnlm-lbox { display: none !important; }
.spacer .pnlm-lbar { width: 100%; margin: 0; border: 1px solid var(--obramowanie); border-radius: 6px; }
.spacer .pnlm-lbar-fill { background: var(--granat-2); border-radius: 6px; }
.spacer .pnlm-lmsg { font-size: 13px; color: var(--tekst-2); }
.spacer .pnlm-about-msg, .spacer .pnlm-panorama-info { display: none !important; }
.spacer .pnlm-error-msg { background: var(--szklo); color: var(--granat); border-radius: 18px; font-family: var(--font); }

/* 2. karta z nazwą punktu ------------------------------------------------- */
.spacer__gora {
  position: absolute; z-index: 5; top: 16px; left: var(--bok); right: var(--bok);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  pointer-events: none;
}
.spacer__metka {
  pointer-events: auto;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px 12px 12px;
  background: var(--szklo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 20px; box-shadow: var(--szklo-cien); color: var(--granat);
  min-width: 0; max-width: min(560px, 100%);
}
.spacer__metka > img { width: 52px; height: 52px; flex: none; }
.spacer__metka-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spacer__kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--granat-2); line-height: 1.3; }
.spacer__tytul { margin: 0; font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.spacer__licznik { margin: 0; font-size: 13px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.spacer__krok { display: flex; align-items: center; gap: 6px; margin-left: -6px; }
.spacer-krok {
  appearance: none; border: 0; cursor: pointer; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: var(--granat);
  transition: background .18s ease;
}
.spacer-krok:hover { background: var(--pudrowy); }
.spacer-krok:disabled { opacity: .3; cursor: default; background: transparent; }
.spacer__termin {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 14px; font-weight: 600; color: var(--granat); text-decoration: underline; text-underline-offset: 3px;
}
.spacer:not([data-strefa="sala"]):not([data-koniec="tak"]) .spacer__termin { display: none; }

/* 3. przyciski --------------------------------------------------------------- */
.spacer__przyciski { pointer-events: auto; display: grid; grid-auto-flow: column; gap: 8px; }
.spacer-przycisk {
  appearance: none; border: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  background: var(--szklo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--granat); box-shadow: var(--szklo-cien);
  transition: background .18s ease, color .18s ease;
}
.spacer-przycisk:hover { background: var(--pudrowy); }
.spacer-przycisk[aria-pressed="true"], .spacer-przycisk[aria-expanded="true"] { background: var(--granat); color: var(--biel); }
.spacer-przycisk:focus-visible, .spacer-strefa:focus-visible, .spacer-krok:focus-visible,
.spacer-strzalka:focus-visible, [data-plan-strefa]:focus-visible { outline: 3px solid var(--pudrowy); outline-offset: 3px; }
.spacer-strefa:focus-visible { outline-offset: -3px; }   /* pasek części przewija się i przycinał ramkę na zewnątrz */
.spacer-przycisk .ikona-zwin { display: none; }
.spacer--pelny .spacer-przycisk .ikona-rozwin { display: none; }
.spacer--pelny .spacer-przycisk .ikona-zwin { display: block; }

/* podpowiedź w górnej części kadru: na środku przykrywała strzałkę (na ulicy jedyną), o którą prosi */
.spacer__podpowiedz {
  position: absolute; z-index: 5; left: 50%; top: 34%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: rgba(22, 38, 96, .82); color: var(--biel); border-radius: 999px;
  font-size: 14px; font-weight: 500; white-space: nowrap; pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.spacer__podpowiedz--schowana { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
.spacer__podpowiedz .krotka { display: none; }

/* 4. strefy i punkty ------------------------------------------------------------ */
.spacer__dol {
  position: absolute; z-index: 5; left: var(--bok); right: var(--bok); bottom: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none;
}
.spacer__strefy {
  pointer-events: auto; display: flex; max-width: 100%;
  padding: 6px; border-radius: 999px;
  background: var(--szklo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--szklo-cien);
}
/* przewija się tor w środku pigułki; brzeg, za którym są dalsze części, wygasa (klasy ustawia spacer.js) */
.spacer__strefy-tor {
  position: relative; display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; border-radius: 999px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.spacer__strefy-tor::-webkit-scrollbar { display: none; }
.spacer__strefy--prawo .spacer__strefy-tor {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
}
.spacer__strefy--lewo .spacer__strefy-tor {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px);
  mask-image: linear-gradient(90deg, transparent, #000 44px);
}
.spacer__strefy--lewo.spacer__strefy--prawo .spacer__strefy-tor {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.spacer-strefa {
  appearance: none; border: 0; cursor: pointer; flex: none;
  min-height: 40px; padding: 8px 16px; border-radius: 999px;
  background: transparent; color: var(--granat); font: 500 15px/1.2 var(--font); white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.spacer-strefa:hover { background: var(--pudrowy); }
.spacer-strefa[aria-current="true"] { background: var(--granat); color: var(--biel); }
/* 5. strzałki na podłodze ---------------------------------------------------------- */
.spacer-strzalka-baza { background: none !important; }
/* pozycję (absolute + translate) ustawia Pannellum i sam centruje element, więc bez position i marginesów */
.spacer-strzalka { width: 64px; height: 64px; cursor: pointer; }
.spacer-strzalka__kolo {
  position: absolute; inset: 4px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--granat);
  box-shadow: 0 6px 18px rgba(22, 38, 96, .35); transition: transform .2s ease, background .2s ease;
}
.spacer-strzalka__kolo::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid rgba(208, 230, 253, .95); animation: spacer-puls 2.4s ease-out infinite;
}
.spacer-strzalka__kolo { transform: scale(var(--skala, 1)); }
.spacer-strzalka:hover .spacer-strzalka__kolo { transform: scale(calc(var(--skala, 1) * 1.12)); background: var(--biel); }
/* przejście do innej części (z sali do baru, z tarasu do ogrodu): granatowe kółko */
.spacer-strzalka--inna-czesc .spacer-strzalka__kolo { background: var(--granat); color: var(--biel); }
.spacer-strzalka--inna-czesc:hover .spacer-strzalka__kolo { background: var(--granat-2); }
.spacer-strzalka--inna-czesc .spacer-strzalka__podpis { background: var(--biel); color: var(--granat); }
.spacer-strzalka__podpis {
  /* nad kółkiem: strzałki stoją nisko, podpis pod spodem chował się za paskiem części */
  position: absolute; bottom: 72px; left: 50%; transform: translateX(calc(-50% + var(--przesun, 0px)));
  padding: 5px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: var(--granat); color: var(--biel); font: 500 13px/1.3 var(--font);
  box-shadow: 0 4px 12px rgba(22, 38, 96, .3);
}
/* podpis pod kółkiem, gdy nad nim zasłania karta z tytułem albo przyciski; ukryty, gdy kółka nie ma w kadrze (spacer.js) */
.spacer-strzalka__podpis--pod { bottom: auto; top: 72px; }
.spacer-strzalka__podpis--ukryty { opacity: 0; visibility: hidden; }
@keyframes spacer-puls { 0% { transform: scale(.85); opacity: .95; } 100% { transform: scale(1.35); opacity: 0; } }

/* 6. plan --------------------------------------------------------------------- */
.spacer__plan {
  position: absolute; z-index: 6; right: var(--bok); bottom: 76px;   /* nad paskiem części */
  width: min(420px, calc(100% - 2 * var(--bok)));
  padding: 14px 14px 10px; border-radius: 20px;
  background: var(--szklo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--szklo-cien); color: var(--granat);
  display: none;
}
.spacer--plan .spacer__plan { display: block; }
/* od 12.10 na planie jest ulica i sklep (plan szerszy, budynek mniejszy): na dużych ekranach większy panel */
@media (min-width: 1280px) { .spacer__plan { width: min(480px, calc(100% - 2 * var(--bok))); } }
.spacer__plan h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.spacer__plan svg { display: block; width: 100%; height: auto; }
.spacer__plan p { margin: 6px 0 0; font-size: 12px; color: var(--tekst-2); }
[data-plan-strefa] { cursor: pointer; }
[data-plan-strefa] .plan-pole { fill: var(--kosc); stroke: none; transition: fill .2s ease; }
[data-plan-strefa]:hover .plan-pole { fill: var(--pudrowy); }
.plan-strefa--tu .plan-pole { fill: var(--pudrowy); }
[data-plan-strefa] text { fill: var(--granat); font: 600 22px var(--font); pointer-events: none; }
.plan-punkt { fill: var(--biel); stroke: var(--granat); stroke-width: 2.5; cursor: pointer; transition: fill .2s ease; }
.plan-punkt:hover, .plan-punkt:focus-visible { fill: var(--pudrowy); outline: none; }
.plan-punkt--tu { fill: var(--granat); }
.plan-tu { pointer-events: none; }
.plan-stozek { fill: #3d5596; opacity: .38; }
.plan-tu-napis { fill: var(--granat); font: 700 16px var(--font); paint-order: stroke; stroke: var(--biel); stroke-width: 4px; pointer-events: none; }
.plan-obrys { fill: none; stroke: var(--granat-3); stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.plan-tu circle { fill: var(--granat); stroke: var(--biel); stroke-width: 3; }
.plan-strefa--tu text { fill: var(--granat); }
.plan-sciany { fill: none; stroke: var(--granat); stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.plan-podpis { fill: var(--granat); font: 600 22px var(--font); pointer-events: none; }
.plan-podpis-maly { font-size: 15px; }
.plan-jezioro rect { fill: #bcdcf7; }
.plan-jezioro text { fill: var(--granat-2); font: 600 18px var(--font); letter-spacing: .04em; }
/* dalsza część tarasu (nieskanowana): ten sam beż co taras, w ukośne kreski */
.plan-taras-dalej .plan-pole { fill: var(--kosc); stroke: var(--granat-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.plan-strefa--tu.plan-taras-dalej .plan-pole { fill: var(--pudrowy); }
.plan-zewn .plan-pole { fill: rgba(208, 230, 253, .55); stroke: var(--granat-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.plan-zewn.plan-strefa--tu .plan-pole { fill: var(--pudrowy); stroke: var(--granat-2); }
/* ulica przed wjazdem i sklep naprzeciwko (12.10) */
.plan-ulica polygon { fill: #d5dae4; }
.plan-ulica text { fill: var(--granat-2); font: 600 15px var(--font); letter-spacing: .02em; pointer-events: none; }
.plan-sklep rect { fill: #cfd5df; stroke: var(--granat-3); stroke-width: 2; }
.plan-sklep text { fill: var(--granat); font: 700 17px var(--font); pointer-events: none; }
/* lada baru ze skanu */
.plan-lada { fill: var(--granat); }
.plan-bar text { fill: var(--granat); font: 700 18px var(--font); }

/* 7. pełny ekran (iPhone nie ma API, więc też zwykła klasa na całe okno) */
/* .spacer.spacer--pelny (dwie klasy): wysokości z bloków telefonu niżej w pliku wygrywały z samym .spacer--pelny
   i na iPhonie „pełny ekran” kończył się na 3/4 wysokości, pod spodem prześwitywała strona (12.10, zrzut Danusi).
   100dvh = to, co faktycznie widać przy pływającym pasku Safari; granatowe tło strony na wypadek szczeliny. */
.spacer.spacer--pelny { position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; height: 100dvh; max-height: none; min-height: 0; }
html.spacer-pelny-ekran, html.spacer-pelny-ekran body { overflow: hidden; background: var(--granat); }
.spacer--pelny .spacer__gora { top: max(16px, env(safe-area-inset-top)); }
.spacer--pelny .spacer__dol { bottom: max(16px, env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  .spacer-strzalka__kolo::before { animation: none; opacity: .6; }
  .spacer__podpowiedz { transition: none; }
}

/* 8. telefon i tablet --------------------------------------------------------------- */
@media (max-width: 900px) {
  .spacer__plan { bottom: auto; top: 84px; }
}
@media (max-width: 760px) {
  /* zostaje pas strony pod spacerem, żeby dało się przewinąć dalej palcem */
  .spacer { height: calc(100svh - var(--wys-naglowka, 64px) - 56px); min-height: 420px; }
  .spacer__gora { top: 10px; left: 10px; right: 10px; }
  .spacer__metka { padding: 8px 14px 8px 8px; gap: 10px; border-radius: 16px; }
  .spacer__metka > img { width: 36px; height: 36px; }
  .spacer__kicker { font-size: 10px; }
  .spacer__tytul { font-size: 16px; }
  .spacer-krok { width: 44px; height: 44px; }
  .spacer__krok { gap: 0; margin: 0 0 -8px -10px; }
  .spacer__licznik { font-size: 12px; }
  .spacer__przyciski { grid-auto-flow: row; gap: 6px; }
  .spacer-przycisk { width: 44px; height: 44px; border-radius: 14px; }
  .spacer-przycisk--zoom { display: none; }
  .spacer__dol { left: 10px; right: 10px; bottom: 10px; gap: 8px; }
  .spacer-strefa { font-size: 14px; padding: 8px 14px; min-height: 40px; }
  .spacer__podpowiedz { font-size: 13px; max-width: calc(100% - 32px); white-space: normal; text-align: center; }
  .spacer__podpowiedz .dluga { display: none; }
  .spacer__podpowiedz .krotka { display: inline; }
  .spacer__plan { top: auto; bottom: 66px; left: 10px; right: 10px; width: auto; }
  .spacer-strzalka__podpis { font-size: 12px; }
}

/* mini-plan (telefon pionowo): wycinek planu wokół „tu jesteś” nad paskiem części; stuknięcie otwiera duży plan */
.spacer__mini { display: none; }
@media (max-width: 760px) and (orientation: portrait) {
  .spacer__mini {
    display: block; position: absolute; z-index: 5; left: 10px; bottom: 72px;
    width: 112px; height: 112px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: pointer;
    background: var(--szklo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--szklo-cien);
  }
  .spacer__mini[hidden], .spacer--plan .spacer__mini, .spacer--bez-mini .spacer__mini { display: none; }
  /* w pełnym ekranie pasek części siedzi wyżej (nad paskiem iPhone'a), mini razem z nim */
  .spacer--pelny .spacer__mini { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 62px); }
  .spacer__mini svg { display: block; width: 100%; height: 100%; pointer-events: none; }
  .spacer__mini text { display: none; }
  /* w mini zostają tylko ulica i sklep (gdy wejdą w wycinek), większe, żeby dało się przeczytać */
  .spacer__mini .plan-ulica text, .spacer__mini .plan-sklep text { display: inline; font-size: 28px; }
  .spacer__mini .plan-sklep rect { stroke-width: 3; }
  .spacer__mini .plan-sciany { stroke-width: 4; }
  .spacer__mini .plan-punkt { stroke-width: 3; }
}

/* telefon poziomo: spacer mieści się pod nagłówkiem na ekranie (min-height 460 px był wyższy niż ekran, pasek części
   i dolne strzałki lądowały pod krawędzią), wszystko ciaśniej, przyciski w rzędzie */
@media (max-height: 520px) and (orientation: landscape) {
  .spacer { height: calc(100svh - var(--wys-naglowka, 64px)); min-height: 260px; }
  .spacer__gora { top: 8px; left: 8px; right: 8px; }
  .spacer__metka { padding: 6px 12px 6px 6px; gap: 8px; border-radius: 14px; }
  .spacer__metka > img { width: 30px; height: 30px; }
  .spacer__kicker { font-size: 9px; }
  .spacer__tytul { font-size: 15px; }
  .spacer__licznik { font-size: 12px; }
  .spacer-krok { width: 36px; height: 36px; }
  .spacer__krok { gap: 0; margin: -4px 0 -6px -8px; }
  .spacer__termin { margin-top: 2px; font-size: 13px; }
  .spacer__przyciski { gap: 6px; }
  .spacer-przycisk { width: 40px; height: 40px; border-radius: 12px; }
  .spacer-przycisk--zoom { display: none; }
  .spacer__dol { left: 8px; right: 8px; bottom: 8px; }
  .spacer__strefy { padding: 4px; }
  .spacer-strefa { font-size: 13px; padding: 6px 12px; min-height: 34px; }
  /* krótki tekst na dotyk, w wolnym pasie między kartą a przyciskami (długi szedł przez środek, po strzałkach) */
  .spacer__podpowiedz { top: 30%; font-size: 13px; padding: 8px 14px; }
  .spacer__podpowiedz .dluga { display: none; }
  .spacer__podpowiedz .krotka { display: inline; }
  .spacer__plan { top: 8px; bottom: 8px; right: 8px; width: min(380px, 50%); overflow: auto; padding: 10px 10px 8px; }
  .spacer__plan p { display: none; }
}

/* 9. pod spacerem ---------------------------------------------------------------- */
.spacer-dalej { padding-block: var(--rytm-maly) var(--rytm); }
.spacer-dalej__siatka {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center;
}
.spacer-dalej__siatka > div > p:not([class]) { color: var(--tekst-2); font-size: clamp(16px, 1.12vw, 20px); max-width: 60ch; }
.spacer-dalej__akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.spacer-dalej__strefy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.spacer-dalej__strefy a {
  display: flex; flex-direction: column; gap: 8px; color: var(--granat); font-weight: 500; font-size: 15px;
}
.spacer-dalej__strefy img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-maly);
  transition: transform .3s ease, box-shadow .3s ease;
}
.spacer-dalej__strefy a:hover img { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(22, 38, 96, .18); }
@media (max-width: 900px) {
  .spacer-dalej__siatka { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .spacer-dalej__strefy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}