/*
 * Wariant „Dni Otwarte" - warstwa na wspólnej scenie landingu.
 *
 * landing.css daje kroje, animacje, ciemną kolumnę ze sliderem, galerię
 * i zachowanie mobilne. Tutaj są tylko dwie rzeczy, których tam nie ma:
 * odliczanie w ciemnej kolumnie i czterostanowy panel rezerwacji w jasnej.
 *
 * Kolory, stopnie pisma i odstępy celowo powtarzają wartości ze sceny -
 * wariant ma wyglądać jak ten sam landing, nie jak inna strona.
 */

/* ------------------------------------------- ciemna kolumna: apla i licznik */

/* Tytuł o ~10% mniejszy niż na liście oczekujących: nadal jest bohaterem
   sceny, ale odsłania więcej elewacji. */
[data-agx-event] [data-ng-h1]{font-size:clamp(34px,min(4.5vw,8.6svh),77px) !important}

/* Karty na kadrze: mrożenie, obrys i krycie zostają dokładnie takie, jak
   w oryginalnym landingu. Zmieniamy wyłącznie geometrię - karty są niższe
   i ciaśniejsze, żeby mniej zakrywały wizualizację. */
[data-agx-event] [data-ng-hl] > div{min-height:0 !important;gap:9px !important;
	padding:12px 15px 13px !important}
[data-agx-event] [data-ng-hl] > div svg{width:19px !important;height:19px !important}

/* Blok tekstu dostaje 70ch zamiast oryginalnych 60ch. Lead jest o dwa stopnie
   większy od opisu i od 1440 px nie mieścił się w 60ch o kilkanaście pikseli -
   balance łamał go wtedy na dwa krótkie wiersze, choć obok stała wolna
   przestrzeń. W szerszym bloku mieści się w jednej linii na każdym desktopie.
   Opis zostaje przy swojej mierze: balance trzyma go na trzech wierszach po
   ok. 60 znaków, a 64ch pilnuje długości wiersza w przeglądarkach, które
   balance jeszcze nie znają. */
[data-agx-event] [data-ng-left] [data-ng-short]{max-width:70ch !important}
[data-agx-event] [data-ng-left] [data-ng-desc]{max-width:64ch}
[data-agx-event] [data-ng-left] [data-ng-desc],
[data-agx-event] [data-ng-left] [data-ng-lead]{text-wrap:balance !important}

/* Licznik: jeden zwarty moduł naprzeciw logotypu. Bez daty i bez listy godzin,
   bo te informacje należą do jasnej kolumny. */
.agxe-cd{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.agxe-cd__box{display:grid;justify-items:end;gap:3px}
.agxe-cd__label{font-size:8.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
	color:rgba(244,241,235,.45);white-space:nowrap}
.agxe-cd__value{display:flex;align-items:baseline;gap:9px;font-size:13px;font-weight:500;
	color:rgba(244,241,235,.9);white-space:nowrap}
.agxe-cd__days b,.agxe-cd__clock{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.agxe-cd__days{color:rgba(244,241,235,.7);letter-spacing:.02em}
.agxe-cd__days b{font-weight:500;color:#F4F1EB}
/* Zegar w stałej szerokości: sekundy nie mogą przesuwać modułu ani logotypu. */
.agxe-cd__clock{min-width:8ch;text-align:right;letter-spacing:.06em;color:#F4F1EB}
.agxe-cd__state{margin:0;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
	color:rgba(244,241,235,.75);white-space:nowrap}
/* ---------------------------------------------- jasna kolumna: panel rezerwacji */

.agxe-step{display:grid;gap:clamp(11px,1.7vh,20px);align-content:center;min-width:0}

/* Zaproszenie oddycha szerzej niż kolejne kroki: to jedyny stan, który ma
   przekonać do rezerwacji, więc nagłówek, opis, godziny i przycisk stoją
   luźniej. Treść zostaje jedną kompozycją - nie rozciągamy jej na wysokość. */
[data-agxe-step="invite"]{gap:clamp(16px,2.9vh,32px)}
[data-agxe-step="invite"] .agxe-kicker{margin-bottom:clamp(-6px,-0.6vh,0px)}
[data-agxe-step="invite"] .agxe-cta{margin-top:clamp(2px,0.8vh,10px)}
.agxe-formwrap{display:grid;min-width:0}

/* Ze skryptem widać dokładnie jeden krok. Bez skryptu wszystkie kroki stoją
   jeden pod drugim i formularz wysyła się klasycznie - dlatego domyślny stan
   arkusza nic nie ukrywa. */
html.agxe-js [data-agxe-panel] .agxe-step{display:none}
html.agxe-js [data-agxe-at="invite"] > [data-agxe-step="invite"],
html.agxe-js [data-agxe-at="pick"] [data-agxe-step="pick"],
html.agxe-js [data-agxe-at="form"] [data-agxe-step="form"],
html.agxe-js [data-agxe-at="done"] > [data-agxe-step="done"]{display:grid;
	animation:agxeStep .5s cubic-bezier(.16,1,.3,1) both}
html.agxe-js [data-agxe-at="invite"] .agxe-formwrap,
html.agxe-js [data-agxe-at="done"] .agxe-formwrap{display:none}
@keyframes agxeStep{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

html:not(.agxe-js) [data-agxe-panel]{gap:clamp(18px,3vh,30px)}
html:not(.agxe-js) [data-agxe-at]:not([data-agxe-at="done"]) [data-agxe-step="done"]{display:none}
html:not(.agxe-js) [data-agxe-at="done"] .agxe-formwrap,
html:not(.agxe-js) [data-agxe-at="done"] [data-agxe-step="invite"]{display:none}
/* Bez skryptu sterowanie krokami nie ma czym sterować. */
html:not(.agxe-js) .agxe-days,
html:not(.agxe-js) .agxe-back,
html:not(.agxe-js) .agxe-chosen,
html:not(.agxe-js) [data-agxe-go="form"]{display:none}

.agxe-kicker{margin:0;font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
	color:rgba(53,59,102,.55)}

.agxe-h2{margin:0;font-family:'agx-display',sans-serif;font-weight:600;
	font-size:clamp(28px,min(2.6vw,5.4svh),42px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.agxe-h2 em{font-weight:300;font-style:italic}
.agxe-h2--sm{font-size:clamp(23px,min(2vw,4.4svh),32px)}
.agxe-h2:focus,.agxe-h2:focus-visible{outline:none}

.agxe-body{margin:0;font-size:17px;line-height:1.6;color:rgba(53,59,102,.75);text-wrap:pretty}
.agxe-note{margin:0;font-size:12px;line-height:1.5;color:rgba(53,59,102,.55);text-wrap:pretty}
.agxe-error{font-size:12.5px;color:#B8434F}

.agxe-facts{display:grid;gap:0;margin:0}
.agxe-facts > div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
	padding:clamp(11px,1.5vh,16px) 0;border-top:1px solid rgba(53,59,102,.14)}
.agxe-facts dt{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
	color:rgba(53,59,102,.5)}
.agxe-facts dd{margin:0;font-size:14.5px;font-weight:500;text-align:right;text-wrap:pretty}

.agxe-empty{margin:0;padding:14px 16px;border:1px dashed rgba(53,59,102,.25);border-radius:12px;
	font-size:14px;line-height:1.55;color:rgba(53,59,102,.6)}

/* Główne CTA - ten sam przycisk, co przy zapisie na listę oczekujących. */
/* Wszystkie główne przyciski mają wygląd i szerokość głównego przycisku
   oryginalnego landingu: pełna szerokość kolumny, ten sam stopień pisma,
   światło i hover. Dotyczy też przycisku wysyłki w ostatnim kroku. */
.agxe-cta{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
	padding:17px 24px;border-radius:10px;border:0;background:#353B66;color:#F4F1EB;cursor:pointer;
	font-family:inherit;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
	text-align:center;transition:background .35s,transform .2s cubic-bezier(.16,1,.3,1),opacity .3s}
.agxe-cta:hover{background:#141833;color:#F4F1EB}
.agxe-cta:active{transform:scale(.99)}
.agxe-cta[disabled]{opacity:.35;cursor:default}

.agxe-back{justify-self:start;padding:6px 0;background:none;border:0;border-bottom:1px solid transparent;
	cursor:pointer;font:inherit;font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
	color:rgba(53,59,102,.55);transition:color .3s,border-color .3s}
.agxe-back:hover{color:#353B66;border-color:rgba(53,59,102,.4)}

/* Etykieta nad nagłówkiem: mocna, ale elegancka - kremowe tło, granatowe
   kapitaliki, lekki obrót. Pozycjonowana absolutnie względem nagłówka, więc
   korzysta z wolnej przestrzeni nad nim i nie przesuwa żadnej treści. */
[data-agx-event] [data-ng-h1]{position:relative}
.agxe-tag{position:absolute;left:0;bottom:100%;margin-bottom:clamp(10px,1.6vh,20px);
	display:inline-block;padding:9px 17px 8px;border-radius:4px;
	background:#F4F1EB;color:#232849;
	font-family:'agx-text',sans-serif;font-size:clamp(11px,0.92vw,13.5px);font-weight:500;
	letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
	transform:rotate(-6deg);transform-origin:left bottom;
	box-shadow:0 14px 30px -18px rgba(0,0,0,.75);
	/* Własna klatka wejścia: softIn kończy się na transform:none i zjadałby
	   pochylenie etykiety. Po wejściu etykieta co niecałe trzy sekundy unosi
	   się ku światłu: prostuje się o pół stopnia, odrywa od tła głębszym
	   cieniem i na moment jaśnieje. Ruch jest wolny i symetryczny - bez
	   odbicia i bez skoku skali, żeby czytał się jak papier, a nie jak
	   powiadomienie. Procenty klatek idą w parze z długością cyklu: samo
	   uniesienie ma trwać swoje 1,25 s niezależnie od tego, jak często wraca. */
	animation:agxeTag 1s cubic-bezier(.16,1,.3,1) .35s both,
		agxeTagBeat 2.8s cubic-bezier(.45,0,.25,1) 1.6s infinite}
@keyframes agxeTag{0%{opacity:0;transform:rotate(-6deg) translateY(12px)}100%{opacity:1;transform:rotate(-6deg)}}
/* Każda klatka powtarza rotate(-6deg): animacja pętli nadpisuje transform
   z klatki wejścia, więc bez tego etykieta wyprostowałaby się po sekundzie.
   Drugi cień to nie pierścień, tylko rozmyta poświata - ma miękką krawędź,
   więc czyta się jak światło wokół uniesionej karty, a nie jak fala
   powiadomienia. Wraca do zera razem z uniesieniem. */
@keyframes agxeTagBeat{
	0%,100%{transform:rotate(-6deg) translateY(0);background-color:#F4F1EB;
		box-shadow:0 14px 30px -18px rgba(0,0,0,.75),0 0 0 0 rgba(244,241,235,0)}
	16.5%{transform:rotate(-5.3deg) translateY(-4px);background-color:#FFFDF8;
		box-shadow:0 24px 42px -20px rgba(0,0,0,.88),0 0 28px 5px rgba(244,241,235,.22)}
	45%{transform:rotate(-6deg) translateY(0);background-color:#F4F1EB;
		box-shadow:0 14px 30px -18px rgba(0,0,0,.75),0 0 0 0 rgba(244,241,235,0)}
}
@keyframes agxeTagBeatFlat{
	0%,100%{transform:translateY(0);background-color:#F4F1EB;
		box-shadow:0 14px 30px -18px rgba(0,0,0,.75),0 0 0 0 rgba(244,241,235,0)}
	16.5%{transform:translateY(-4px);background-color:#FFFDF8;
		box-shadow:0 24px 42px -20px rgba(0,0,0,.88),0 0 28px 5px rgba(244,241,235,.22)}
	45%{transform:translateY(0);background-color:#F4F1EB;
		box-shadow:0 14px 30px -18px rgba(0,0,0,.75),0 0 0 0 rgba(244,241,235,0)}
}

/* Druga droga zapisu pod przyciskiem: czytelna, ale wyraźnie spokojniejsza
   niż główne CTA - bez tła, drobniejszym pismem, z podkreśleniem linków. */
.agxe-alt{display:grid;gap:4px;margin:0;font-size:12.5px;line-height:1.5}
.agxe-alt__note{color:rgba(53,59,102,.55)}
.agxe-alt__links{display:flex;flex-wrap:wrap;gap:4px 18px}
.agxe-alt__links a{color:rgba(53,59,102,.85);text-decoration:underline;text-underline-offset:.18em;
	text-decoration-thickness:1px;text-decoration-color:rgba(53,59,102,.35);transition:color .3s,text-decoration-color .3s}
.agxe-alt__links a:hover{color:#353B66;text-decoration-color:#353B66}

/* ------------------------------------------------------ kalendarz i godziny */

.agxe-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.agxe-day{display:grid;justify-items:center;gap:1px;padding:11px 4px 10px;border-radius:12px;
	border:1px solid rgba(53,59,102,.18);background:transparent;cursor:pointer;color:#353B66;
	font-family:inherit;transition:border-color .3s,background .3s,color .3s,transform .2s}
.agxe-day:hover{border-color:rgba(53,59,102,.45)}
.agxe-day:active{transform:scale(.98)}
.agxe-day[aria-selected="true"]{background:#353B66;border-color:#353B66;color:#F4F1EB}
.agxe-day__dow{font-size:8.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.agxe-day__num{font-family:'agx-display',sans-serif;font-weight:600;font-size:21px;line-height:1.1;
	letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.agxe-day__mon{font-size:9px;letter-spacing:.06em;opacity:.55}
.agxe-day__full{font-size:8px;letter-spacing:.06em;opacity:.7}
.agxe-day[data-agxe-full]{opacity:.45}

.agxe-hours{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
html.agxe-js .agxe-hours[data-agxe-off]{display:none}
/* Ze skryptem wybrany dzień jest już widoczny na kafelku, więc nagłówek grupy
   zostaje tylko dla czytników ekranu. */
html.agxe-js .agxe-hours legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
	overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
html:not(.agxe-js) .agxe-hours legend{padding:0 0 8px;font-size:9.5px;font-weight:500;
	letter-spacing:.18em;text-transform:uppercase;color:rgba(53,59,102,.55)}

.agxe-hour{position:relative;display:inline-grid;gap:1px;padding:9px 16px;border-radius:999px;
	border:1px solid rgba(53,59,102,.2);cursor:pointer;transition:border-color .3s,background .3s,color .3s}
.agxe-hour:hover{border-color:rgba(53,59,102,.5)}
.agxe-hour input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.agxe-hour__time{font-family:'agx-display',sans-serif;font-weight:600;font-size:15px;line-height:1.1;
	letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.agxe-hour__seats{font-size:9.5px;letter-spacing:.04em;color:rgba(53,59,102,.5)}
.agxe-hour:has(input:checked){background:#353B66;border-color:#353B66;color:#F4F1EB}
.agxe-hour:has(input:checked) .agxe-hour__seats{color:rgba(244,241,235,.7)}
.agxe-hour:has(input:focus-visible){outline:2px solid #86A0C6;outline-offset:3px}
.agxe-hour[data-agxe-full]{opacity:.4;cursor:default;border-style:dashed}

/* -------------------------------------------------------- wybrany termin i pola */

.agxe-chosen{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:12px 16px;
	border-radius:12px;background:rgba(53,59,102,.06)}
.agxe-chosen__label{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
	color:rgba(53,59,102,.5)}
.agxe-chosen strong{font-size:15px;font-weight:500}
.agxe-chosen__change{margin-left:auto;padding:4px 0;background:none;border:0;cursor:pointer;font:inherit;
	font-size:11px;color:rgba(53,59,102,.7);text-decoration:underline;text-underline-offset:.16em}
.agxe-chosen__change:hover{color:#353B66}

.agxe-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.4vw,20px);
	align-items:end}
.agxe-field--wide{grid-column:1 / -1}
.agxe-field{display:grid;gap:6px;min-width:0}
.agxe-field__label{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;font-size:9.5px;
	font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(53,59,102,.55)}
.agxe-field__label span[aria-hidden]{color:rgba(53,59,102,.5)}
.agxe-field__wrap{position:relative;display:block;min-width:0}
.agxe-field input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(53,59,102,.3);
	padding:12px 0;min-height:44px;font-size:17px;color:#353B66;transition:border-color .3s}
.agxe-field input[data-agxe-invalid]{border-bottom-color:#B8434F}

.agxe-consents{display:grid;gap:10px}
.agxe-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:12px;line-height:1.5;
	color:rgba(53,59,102,.7)}
.agxe-check input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;border-radius:5px;padding:0;
	cursor:pointer;border:1px solid rgba(53,59,102,.4);background:transparent;appearance:none;
	-webkit-appearance:none;display:grid;place-items:center;transition:all .3s}

/* ---------------------------------------------------------- makieta 3D */

/* Makieta i galeria to dwie osobne drogi, więc w nagłówku stoją jako dwa
   osobne, obrysowane przyciski z podpisem. Wspólny kształt mówi „ta sama
   waga", a odstęp i własny znak z lewej - „to dwie różne rzeczy". Wcześniej
   napis bez ramki sąsiadował z samym krążkiem zdjęcia i całość czytała się
   jak jeden element. */
/* Gdyby przy powiększonym piśmie systemowym para przycisków przestała się
   mieścić obok daty, ma zjechać do drugiego wiersza i zostać przy prawej
   krawędzi - zamiast ściskać plakietkę do dwóch linii. */
[data-agx-event] [data-ng-rhead]{flex-wrap:wrap;gap:10px 12px !important}
.agxe-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
/* Pismo schodzi o pół punktu na mniejszych laptopach: przy 1280 px dwa pełne
   podpisy obok daty nie mieszczą się w wierszu i plakietka łamała się na dwie
   linie. Od 1440 px w górę wraca do 9,5 px, czyli wielkości reszty kapitalików. */
.agxe-modelbtn,
[data-agx-event] [data-ng-rhead] [data-ng-galpill]{display:inline-flex;align-items:center;gap:8px;
	min-height:36px;padding:0 13px;border-radius:999px;border:1px solid rgba(53,59,102,.18);
	background:transparent;cursor:pointer;font-family:inherit;font-size:clamp(8.4px,.66vw,9.5px);
	font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#353B66;white-space:nowrap;
	transition:border-color .35s,background-color .35s,color .35s}
/* Miniatura jest okrągła i większa od pisma, więc od strony zdjęcia pigułka
   potrzebuje mniej wyściółki - inaczej wygląda na przesuniętą. */
[data-agx-event] [data-ng-rhead] [data-ng-galpill]{padding-left:5px}
[data-agx-event] [data-ng-rhead] [data-ng-galpill] [data-agx-galthumb]{width:22px !important;height:22px !important}
/* Data nie ma się łamać: to jeden podpis, a nie akapit. */
[data-agx-event] [data-ng-rhead] > span:first-child{white-space:nowrap}
.agxe-modelbtn:hover,
[data-agx-event] [data-ng-rhead] [data-ng-galpill]:hover{border-color:rgba(53,59,102,.45);
	background-color:rgba(53,59,102,.05)}
.agxe-modelbtn__icon{width:17px;height:17px;flex:0 0 auto;opacity:.75;transition:opacity .35s}
.agxe-modelbtn:hover .agxe-modelbtn__icon{opacity:1}
[data-agx-event] [data-ng-rhead] [data-ng-galpill] [data-agx-galthumb]{box-shadow:0 6px 14px -8px rgba(11,15,34,.7)}

/* Nakładka jak galeria: ciemne, rozmyte tło i belka z tytułem. Makieta dostaje
   całą wysokość okna, więc landing nie musi się przewijać. z-index rzędu
   milionów - wtyczka działa też na stronach z czatami i paskami cookies. */
.agxe-model:focus,.agxe-model:focus-visible{outline:none}
.agxe-model{position:fixed;inset:0;z-index:2000003;display:grid;grid-template-rows:auto minmax(0,1fr);
	background:rgba(11,15,34,.86);backdrop-filter:blur(26px) saturate(140%);
	-webkit-backdrop-filter:blur(26px) saturate(140%);color:#F4F1EB;
	animation:softIn .45s cubic-bezier(.16,1,.3,1) both}
.agxe-model__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:max(16px,env(safe-area-inset-top)) clamp(16px,3vw,32px) 12px}
.agxe-model__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:9.5px;
	font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,241,235,.75)}
.agxe-model__title i{font-style:normal;font-size:11px;letter-spacing:.04em;text-transform:none;
	color:rgba(244,241,235,.5)}
.agxe-model__close{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid rgba(244,241,235,.3);
	background:transparent;color:#F4F1EB;font-size:18px;line-height:1;cursor:pointer;display:grid;
	place-items:center;transition:border-color .3s,background .3s}
.agxe-model__close:hover{border-color:rgba(244,241,235,.6);background:rgba(244,241,235,.1)}

/* Scena makiety: kontener ma wymiar, a div dostawcy wypełnia go w całości.
   !important, bo arkusz dostawcy wczytuje się po naszym i ustawia własne
   wymiary elementu #smart-makieta. */
.agxe-model__stage{position:relative;min-height:0;overflow:hidden;
	border-radius:14px 14px 0 0;background:rgba(11,15,34,.35)}
.agxe-model__stage > #smart-makieta{position:absolute !important;inset:0 !important;
	width:100% !important;height:100% !important}
.agxe-model__loading{position:absolute;inset:auto 0 auto 0;top:50%;margin:0;transform:translateY(-50%);
	text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
	color:rgba(244,241,235,.6)}

/* Przeglądarka mieszkań dostawcy przenosi się na telefonie do własnej warstwy
   doklejonej do <body> (z-index 1000) i ma tam własny przycisk zamknięcia.
   Bez podniesienia jej nad naszą nakładkę otwierała się pod makietą: ekran
   nie zmieniał się po dotknięciu „Przeglądaj ofertę", a lista mieszkań
   czekała niewidoczna w tle. */
body > ._3deoa__layout-screen-overlay{z-index:2000010 !important}

@media (max-width:900px){
	.agxe-model__bar{padding-bottom:10px}
	.agxe-model__stage{border-radius:12px 12px 0 0}
}

/* Od kalendarza w górę prawa kolumna należy do rezerwacji: makieta i galeria
   znikają z nagłówka i stopki, żeby nie wyprowadzać z rozpoczętego zapisu.
   Wracają po cofnięciu się do zaproszenia. */
[data-agx-event][data-agxe-at]:not([data-agxe-at="invite"]) .agxe-modelbtn,
[data-agx-event][data-agxe-at]:not([data-agxe-at="invite"]) [data-ng-galbtn]{display:none !important}

/* -------------------------------------------------------------- potwierdzenie */

.agxe-done{gap:16px;padding:clamp(22px,2.4vw,32px);border-radius:16px;background:#FFFFFF;
	border:1px solid rgba(53,59,102,.12);box-shadow:0 30px 60px -40px rgba(11,15,34,.35);justify-items:start}
.agxe-done__mark{position:relative;width:52px;height:52px;border-radius:50%;background:#353B66;
	color:#F4F1EB;display:grid;place-items:center;font-size:20px;line-height:1}
.agxe-done__title{font-family:'agx-display',sans-serif;font-weight:600;font-size:clamp(23px,2vw,30px);
	letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.agxe-done__title:focus,.agxe-done__title:focus-visible{outline:none}
.agxe-done__text{font-size:14.5px;line-height:1.6;color:rgba(53,59,102,.75);text-wrap:pretty}
.agxe-done__note{padding-top:14px;border-top:1px solid rgba(53,59,102,.1);font-size:12px;line-height:1.5;
	color:rgba(53,59,102,.55)}

/* ------------------------------------------------------------------- telefon */

@media (max-width:900px){
	/* Karuzela kart ma sens przy pięciu zaletach, jak na liście oczekujących:
	   ucięta karta mówi wtedy „przesuń dalej". Tutaj są dwie karty z faktami
	   o osiedlu, więc przesuwanie tylko ukrywało jedną z nich. Na telefonie
	   kładziemy je jedna pod drugą - obie są w całości czytelne, a mrożenie,
	   obrys i typografia zostają dokładnie takie, jak w oryginale. */
	[data-agx-event] [data-agx-hl-wrap]{margin-right:0 !important}
	[data-agx-event] [data-ng-hl]{display:grid !important;grid-template-columns:1fr !important;
		gap:8px !important;padding:8px 0 4px !important;overflow:visible !important;
		scroll-snap-type:none !important}
	[data-agx-event] [data-ng-hl] > div{width:auto !important}

	/* Na telefonie licznik zostaje przy logotypie, ale zwija się do jednej
	   linii bez etykiety - górny pasek ma pozostać lekki. */
	.agxe-cd{gap:8px}
	.agxe-cd__label{display:none}
	.agxe-cd__value{font-size:12px;gap:7px}

	/* Kolejne kroki rezerwacji to na telefonie kolejne pełne ekrany. Jasna
	   kolumna wchodzi wtedy na całą wysokość razem z plakietką, przyciskiem
	   galerii i stopką - nic z nagłówka nie ucieka. Wewnętrzne przewijanie
	   zostaje włączone, bo przy powiększonym tekście dostępność treści jest
	   ważniejsza niż sztywne trzymanie jednego ekranu. */
	html.agxe-sheet,html.agxe-sheet body{overflow:hidden !important}
	/* Wiersze arkusza są wyznaczane treścią (auto), nie sztywnym 1fr: przy
	   dłuższej zgodzie krok z danymi był wyższy niż środkowy wiersz i nachodził
	   na stopkę z przyciskiem galerii. Teraz treść odsuwa stopkę, a arkusz
	   przewija się wewnętrznie, gdy zabraknie miejsca. */
	/* z-index tylko ponad sceną, a nie ponad nakładkami: arkusz wchodzi na
	   cały ekran, ale galeria i okna z notą prawną muszą się otwierać nad nim.
	   Przy wartości rzędu milionów galeria wstawała pod arkuszem i wyglądało
	   to, jakby przycisk „Obejrzyj wizualizacje" nie działał. */
	html.agxe-sheet [data-ng-right]{position:fixed !important;inset:0;z-index:200;
		overflow:auto !important;height:100% !important;
		padding:calc(18px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right))
		calc(18px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)) !important;
		grid-template-rows:auto max-content auto !important;align-content:start;gap:20px;
		animation:agxeStep .45s cubic-bezier(.16,1,.3,1) both}
	/* Krok nie może być ściskany poniżej swojej treści - inaczej przycisk
	   wysyłki nachodził na stopkę z linkiem do galerii. Gdy treści jest więcej
	   niż ekranu (dłuższa zgoda, powiększony tekst), arkusz się przewija. */
	html.agxe-sheet [data-agxe-panel]{align-content:start;min-height:max-content !important}

	/* W arkuszu pełnoekranowym własny górny oddech panelu jest zbędny -
	   ma go już sam arkusz. */
	html.agxe-sheet [data-agxe-panel]{padding-top:6px !important}
	/* Na telefonie stopka zostaje sama - bez noty prawnej i podpisu spółki.
	   W kroku zaproszenia zostaje w niej przycisk galerii; dalej, gdy i on
	   znika, cały wiersz schodzi razem z kreską. */
	[data-agx-event] [data-ng-right] > div:last-child > span:first-child,
	[data-agx-event] [data-ng-right] > div:last-child > span:last-child{display:none !important}
	[data-agx-event][data-agxe-at]:not([data-agxe-at="invite"]) [data-ng-right] > div:last-child{display:none !important}

	.agxe-step{gap:16px}
	.agxe-h2{font-size:clamp(28px,8.4vw,38px)}
	.agxe-h2--sm{font-size:clamp(23px,7vw,30px)}
	/* Cztery godziny czytają się jak siatka 2 × 2, a nie jak 3 + 1 - przy
	   zawijaniu flexem kafelki miały różne szerokości. */
	/* Na telefonie nad tytułem nie ma wolnej przestrzeni - etykieta wchodzi
	   w układ jako osobny wiersz, zamiast nachodzić na logotyp. Bez pochylenia:
	   przy wąskiej kolumnie obrót zjadałby światło nad nagłówkiem.
	   Zmiana klatki na softIn jest konieczna - agxeTag kończy się obrotem. */
	/* Podmieniamy same nazwy klatek - czasy i opóźnienia zostają z wersji na
	   desktop. Etykieta stoi tu prosto, więc „oddech" też musi być prosty:
	   klatki desktopowe trzymają obrót, który na telefonie jest wyłączony. */
	.agxe-tag{position:static;display:inline-block;margin:0 0 14px;padding:8px 14px 7px;letter-spacing:.2em;
		transform:none;animation-name:softIn,agxeTagBeatFlat}
	.agxe-alt{font-size:13px}
	.agxe-hours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
	/* Trzy wejścia mieszczą się w jednym rzędzie - przy siatce 2 × 2 ostatnia
	   godzina zostawała sama w drugim wierszu. Pierwszym dzieckiem zbioru jest
	   legenda dla czytników ekranu, stąd nth-child(4) dla trzeciej godziny. */
	.agxe-hours:has(> .agxe-hour:nth-child(4):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
	.agxe-hour{display:grid}
	.agxe-days{gap:6px}
	.agxe-day{padding:9px 3px 8px}
	.agxe-day__num{font-size:19px}
	.agxe-hours{gap:6px}
	.agxe-hour{padding:8px 13px}
	.agxe-fields{grid-template-columns:1fr;gap:14px}
	.agxe-cta{justify-self:stretch;width:100%;min-height:52px}
	.agxe-back{min-height:44px}
	.agxe-chosen__change{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
	.agxe-step,html.agxe-sheet [data-ng-right]{animation:none !important}
	/* Etykieta zostaje nieruchoma: żadnego pulsowania ani pierścienia. */
	.agxe-tag{animation:none !important}
}

/* Link do okna „Informacja o danych" w treści zgody - jak na liście oczekujących. */
.agxe-check__link{background:none;border:0;padding:8px 0;margin:-8px 0;cursor:pointer;color:#353B66;
	text-decoration:underline;text-underline-offset:.16em;font-size:inherit;font-family:inherit}
.agxe-check__link:hover{color:#86A0C6}