/* testaqua: nowe sekcje stoją na klasach strony głównej (styles.css):
   .poznaj-glowa (nagłówek), .kroki-lista (karty z ikoną i numerem), .zaloz-plyta/.zaloz-tekst/.zaloz-nl
   (płyty jak „Karta czeka”), .pigulka (przyciski), .nl-form/.nl-msg (pola jak newsletter).
   Tutaj tylko odstępy sekcji i to, czego strona główna nie ma: saldo, pasek, lista ruchów, plakietki. */

/* Klasy strony nadają display (.konto-drogi grid, .nl-form i .zaloz-nl flex), a to przebija atrybut hidden. */
[data-aqp-tylko-konto][hidden],
.aqp [hidden]{display:none !important}

/* Tło przezroczyste jak sekcje serwisu (.odslon.poznaj itd.): gradient strony to body::before (--swiatlo-strony). */
.odslon.aqp{
  background:transparent;border:0;max-width:none;
  padding:clamp(64px,7vw,110px) var(--px);
}

.aqp .kroki-lista + .aqp-plyta,
.aqp .aqp-plyta + .aqp-stan + .kroki-lista,
.aqp .kroki-lista + .aqp-przypisz{margin-top:clamp(14px,1.6vw,20px)}

/* Przyciski-pigułki jako <button>. */
.aqp button.pigulka{border:0;font-family:inherit;cursor:pointer}
.aqp button.pigulka:disabled{opacity:.6;cursor:progress}
.aqp .kroki-lista .pigulka-cicha,
.aqp .zaloz-nl .pigulka-cicha{
  background:var(--tint-band,#eef4fb);
  border:1.5px solid var(--hairline-strong,rgba(10,26,47,.22));
  padding:10.5px 22.5px;
}
.aqp .kroki-lista .pigulka-cicha:hover,
.aqp .zaloz-nl .pigulka-cicha:hover{background:#fff;border-color:var(--primary);color:var(--primary)}
.aqp .zaloz-tekst .pigulka-cicha{background:var(--tint-band,#eef4fb)}

/* Formularze z klasą .nl-form w kartach i płytach. */
.aqp .zaloz-nl > p a{color:var(--primary);font-weight:600}
.aqp .kroki-lista .nl-form{margin-top:18px}
.aqp-formularz input{text-transform:uppercase;letter-spacing:.04em}
.aqp-formularz input::placeholder{text-transform:none;letter-spacing:0}
.aqp .nl-msg:empty{display:none}
.aqp .kroki-lista .nl-msg{margin:10px 0 0}
.aqp-stan{margin:12px 0 0}

/* --- saldo (płyta po lewej) --- */
.aqp-saldo p{margin:0}
.zaloz-tekst.aqp-saldo{justify-content:flex-start}
.aqp-etykieta{font-size:15px;font-weight:600;color:var(--body-2)}
.aqp-saldo .aqp-saldo-liczba{
  margin:6px 0 10px;color:var(--ink);
  font-size:clamp(3.4rem,2.4rem + 4vw,5.6rem);font-weight:600;line-height:.95;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.aqp-pkt{font-size:.34em;letter-spacing:-.02em;color:var(--body-2)}
.aqp-saldo [data-aqp-saldo-zl]{font-size:16px;line-height:1.6;color:var(--body-2)}
.aqp-pasek{margin-top:22px;height:8px;border-radius:99px;background:var(--blue-100,#eaf1fd);overflow:hidden}
.aqp-pasek span{display:block;height:100%;width:0;border-radius:inherit;background:var(--primary);transition:width .6s var(--e-out,ease)}
.aqp-saldo .aqp-pasek-opis{margin-top:8px;font-size:13px;color:var(--muted-1)}
.aqp-saldo .zaloz-akcje b{letter-spacing:.04em;font-variant-numeric:tabular-nums}
.aqp .aqp-drobny{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted-1)}

/* --- historia (płyta po prawej) --- */
.aqp-historia{justify-content:flex-start !important}
.aqp-karta-glowa{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.aqp-link{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:var(--primary);
  text-decoration:underline;text-underline-offset:3px;
}
.aqp-ruchy{list-style:none;margin:4px 0 0;padding:0}
.aqp .aqp-ruchy .aqp-ruch{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--hairline-soft)}
.aqp-ruch div{display:grid;gap:3px;min-width:0}
.aqp-ruch b{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.aqp-ruch span{font-size:13px;line-height:1.45;color:var(--muted-1)}
.aqp-ruch strong{flex:none;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.aqp-plus{color:var(--primary)}
.aqp-minus{color:var(--body-2)}
.aqp-pusto{padding:14px 0;border-top:1px solid var(--hairline-soft);font-size:15px;line-height:1.55;color:var(--muted-1)}
.aqp-starsze{margin-top:16px;align-self:flex-start}

/* --- kod odbioru i „Jak to działa”: dwie karty kroków --- */
@media (min-width:1080px){
  .aqp .kroki-lista.aqp-dodatki{grid-template-columns:repeat(2,1fr)}
}
/* Zagnieżdżone <li> w .kroki-lista dziedziczą wygląd karty (selektor .kroki-lista li) - tu go zdejmujemy. */
.aqp .kroki-lista li li,
.aqp .aqp-ruchy li,
.aqp .aqp-sklepy-lista li{border:0;border-radius:0;box-shadow:none;background:none;padding:0}
.aqp-jak{margin:14px 0 0;padding:0 0 0 1.1em;display:grid;gap:10px}
.aqp .kroki-lista .aqp-jak li{display:list-item;font-size:15px;line-height:1.55;color:var(--body-2)}
.aqp-jak li::marker{color:var(--primary)}
.aqp-sklepy{margin-top:clamp(14px,1.6vw,20px)}
.aqp-sklepy-lista{list-style:none;margin:6px 0 0;padding:0}
.aqp .aqp-sklepy-lista .aqp-sklep{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--hairline-soft);font-size:15px;color:var(--ink)}

/* --- Moja karta (kod.html), jak zakładka Karta w aplikacji ---
   Jedna kolumna na każdym ekranie: karta, pod nią od razu blok aquapunktów i kafelki (bez „Jak używać karty”).
   Szerokość jak na aquacard.pl: .konto-shell-waski (520 px) - karta zostaje w swoim rozmiarze (decyzja 19.10). */
.aqp-karta-prawa{margin-top:clamp(18px,2.4vw,26px)}

/* Blok Aquapunkty: logo, saldo, pasek do 5 zł - jak .ekran-karta-aqp-blok w aplikacji, w kroju .konto-droga. */
.aqp-blok{
  display:flex;align-items:center;gap:18px;
  padding:clamp(18px,2.2vw,26px);
  background:#fff;border:1px solid var(--hairline-soft);border-radius:var(--r-xl,20px);box-shadow:var(--shadow-1);
  background-image:radial-gradient(78% 96% at 96% 100%, rgba(0,160,227,.16), transparent 62%);
  text-decoration:none;color:inherit;
  transition:transform var(--t-base,240ms) var(--e-out),box-shadow var(--t-base,240ms) var(--e-out);
}
@media (hover:hover) and (pointer:fine){ .aqp-blok:hover{transform:translateY(-2px);box-shadow:var(--shadow-2,0 18px 40px -18px rgba(10,26,47,.28))} }
.aqp-blok-logo{flex:none;width:56px;height:56px;display:block}
.aqp-blok-tresc{flex:1;min-width:0;display:grid;gap:2px}
.aqp-blok-tytul{font-size:14px;font-weight:600;color:var(--body-2)}
.aqp-blok-saldo{font-size:15px;font-weight:600;color:var(--body-2)}
.aqp-blok-saldo b{font-size:clamp(2rem,1.6rem + 1.4vw,2.6rem);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.aqp-blok-pasek{display:block;height:6px;margin-top:8px;border-radius:99px;background:var(--blue-100,#eaf1fd);overflow:hidden}
.aqp-blok-pasek span{display:block;height:100%;width:0;border-radius:inherit;background:var(--primary);transition:width .6s var(--e-out,ease)}
.aqp-blok-opis{margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted-1)}
.aqp-blok .konto-droga-strzalka{align-self:center}

/* Kafelki pod blokiem (.konto-droga z konto.html). */
.aqp-skroty{grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 0 0}

/* Logo aquapunktów na środku kodu QR karty, jak .aquacard-qr-logo w aplikacji (18% kodu, białe tło). */
.karta-kod .aqp-qr-logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:block;width:20%;aspect-ratio:1;padding:2%;box-sizing:border-box;
  border-radius:16%;background:#fff;pointer-events:none;
}
.karta-kod .aqp-qr-logo img{display:block;width:100%;height:100%}

/* --- osobne strony ekranów (karta-*.html, powiadomienia.html) --- */
.aqp-strona .odslon.aqp:first-of-type{padding-top:clamp(28px,4vw,56px)}
.aqp-wstecz{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;
  font-size:14px;font-weight:600;color:var(--primary);text-decoration:none;
}
.aqp-wstecz::before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.aqp-wstecz:hover{text-decoration:underline;text-underline-offset:3px}
.aqp-gosc-blok{padding:clamp(40px,6vw,80px) 16px}
.aqp-etykieta .aqp-saldo-logo{width:28px;height:28px;vertical-align:-8px;margin-right:6px}
.krok-znak .aqp-znak-logo{display:block;width:30px;height:30px}
[data-aqp-nagrody-blok]{margin-top:clamp(28px,3vw,40px)}
/* Kupony nagród: kod QR klikany do powiększenia (.kod-lupa jak kod karty). */
.aqp-kupony-blok{margin-top:clamp(28px,3vw,40px)}
@media (min-width:861px){ .aqp .kroki-lista.aqp-kupony{grid-template-columns:repeat(2,minmax(0,1fr))} }
.aqp-kupony .aqp-plakietka{margin:0 0 12px}
.aqp-kupon-qr{display:block;width:min(240px,100%);margin:16px 0 0;padding:10px;border:1px solid var(--hairline-soft);border-radius:14px;background:#fff;cursor:zoom-in}
.aqp-kupon-qr svg{display:block;width:100%;height:auto}
.aqp .kroki-lista .aqp-nagroda .zaloz-akcje{margin-top:14px}
.aqp .kroki-lista .aqp-nagroda .nl-msg{margin:8px 22px 0}
.aqp .kroki-lista .aqp-nagroda .zaloz-akcje{padding:0 22px 22px}
[data-aqp-nagrody-blok] + .aqp-dodatki{margin-top:clamp(14px,1.6vw,20px)}
/* Kafel jak w aplikacji: ikona i strzałka w górnym rzędzie, tytuł i liczba pod spodem (w dwóch kolumnach
   układ poziomy .konto-droga łamał tytuły w pół). */
.aqp-skroty{gap:12px}
.aqp-skroty .konto-droga{flex-wrap:wrap;align-items:flex-start;gap:12px;padding:16px 18px}
.aqp-skroty .konto-droga-strzalka{order:2}
.aqp-skroty .konto-droga-tresc{order:3;flex-basis:100%}
@media (max-width:599px){
  .aqp-skroty{gap:10px}
  .aqp-skroty .konto-droga{gap:10px;padding:14px}
  .aqp-skroty .konto-droga-ikona{width:38px;height:38px;border-radius:12px}
  .aqp-skroty .konto-droga-tresc b{font-size:15px}
  .aqp-skroty .konto-droga-tresc span{font-size:12.5px;line-height:1.45}
}
.aqp-skroty .konto-droga{height:100%;box-sizing:border-box}
.aqp-skroty .konto-droga-tresc span{font-variant-numeric:tabular-nums}

/* --- grupy miesięcy / dni (historia punktów, wizyty, powiadomienia) --- */
.aqp-miesiac{
  margin:18px 0 0;padding-bottom:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-1);
}
.aqp-miesiac:first-child{margin-top:8px}
.aqp-miesiac + .aqp-ruchy .aqp-ruch:first-child{border-top:1px solid var(--hairline-soft)}
.aqp-odznaki{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.aqp-odznaki .aqp-plakietka{margin:0}
.aqp-panel{max-width:none}
.aqp-panel > .aqp-drobny{margin-top:18px}

/* --- powiadomienia --- */
.aqp .aqp-ruchy .aqp-powiadomienie{display:block;padding:14px 0 14px 18px;border-top:1px solid var(--hairline-soft);position:relative}
.aqp-powiadomienie div{display:grid;gap:4px}
.aqp-powiadomienie b{font-size:16px;font-weight:600;color:var(--ink)}
.aqp-powiadomienie div > span{font-size:15px;line-height:1.5;color:var(--body-2)}
.aqp-powiadomienie-gora{display:flex;justify-content:space-between;gap:12px;margin:0;font-size:12.5px;color:var(--muted-1)}
.aqp-kategoria{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.aqp-nowe::before{content:"";position:absolute;left:0;top:44px;width:8px;height:8px;border-radius:50%;background:var(--primary)}
.aqp-powiadomienie:not(.aqp-nowe) b{font-weight:500}

/* --- kody rabatowe --- */
.aqp .kroki-lista p.aqp-kod-pole{
  margin:14px 0 10px;max-width:none;padding:14px 16px;text-align:center;
  border-radius:var(--r-md);background:var(--tint-band,#eef4fb);border:1.5px solid var(--hairline-soft);
  font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:.08em;color:var(--ink);
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

/* --- polecenia --- */
.aqp .kroki-lista p.aqp-link-adres{
  margin:0;padding:12px 14px;border-radius:var(--r-md);
  background:var(--tint-band,#eef4fb);border:1px solid var(--hairline-soft);
  font-size:14px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere;max-width:none;
}
.aqp .kroki-lista .zaloz-akcje{margin-top:16px}
.aqp-przypisz h3{color:var(--ink)}
.aqp-przypisz .nl-form{margin-top:4px}
@media (min-width:861px){
  .aqp-przypisz{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(24px,3vw,48px);align-items:center}
  .aqp-przypisz h3{grid-row:1 / 3;margin:0}
}

/* --- bilety i nagrody: karty kroków --- */
.aqp .kroki-lista .aqp-cala{grid-column:1 / -1}
.aqp-plakietka{
  display:inline-block;margin:18px 0 0;padding:5px 12px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:600;background:var(--blue-100,#eaf1fd);color:var(--ink);
}
.aqp-plakietka-tak{background:var(--primary);color:#fff}
.aqp .kroki-lista .aqp-plakietka + h3{margin-top:14px}

/* Bilet jak w aplikacji: rodzaj i stan, zdjęcie obiektu z nazwą, termin i liczba osób, znaczniki, kody. */
.aqp-podtytul{margin:0 0 14px;font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.aqp-licznik{
  display:inline-grid;place-items:center;min-width:26px;height:26px;margin-left:6px;padding:0 8px;border-radius:99px;
  font-size:13px;font-weight:700;background:var(--blue-100,#eaf1fd);color:var(--ink);vertical-align:2px;
}
@media (min-width:861px){ .aqp .kroki-lista.aqp-bilety{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1200px){ .aqp .kroki-lista.aqp-bilety{grid-template-columns:repeat(3,minmax(0,1fr))} }
.aqp-bilet-glowa{display:flex;justify-content:space-between;align-items:center;gap:12px}
.aqp-bilet-rodzaj{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-1)}
.aqp-bilet-stan{font-size:13px;font-weight:600;color:var(--muted-1)}
.aqp-bilet-stan.aqp-stan-ok{color:var(--success,#13753a)}
.aqp-bilet-stan.aqp-stan-ok::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:1px}
.aqp-bilet-tytul{display:flex;align-items:center;gap:14px;margin-top:16px}
.aqp-bilet-tytul img{flex:none;width:64px;height:64px;border-radius:14px;object-fit:cover}
.aqp .kroki-lista .aqp-bilet-tytul h3{margin:0}
.aqp .kroki-lista p.aqp-bilet-wariant{margin:2px 0 0;font-size:15px;color:var(--body-2)}
.aqp-bilet-fakty{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--hairline-soft)}
.aqp-bilet-fakty dt{font-size:12.5px;color:var(--muted-1)}
.aqp-bilet-fakty dd{margin:2px 0 0;font-size:16px;font-weight:600;color:var(--ink)}
.aqp-bilet .aqp-odznaki{margin-top:12px}
.aqp-bilet .zaloz-akcje{margin-top:18px}
.aqp-bilet-szczegoly{margin-top:14px}
.aqp-bilet-szczegoly summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--primary)}
.aqp-bilet-lista{margin:10px 0 0;padding:0 0 0 1.1em;display:grid;gap:6px}
.aqp .kroki-lista .aqp-bilet-lista li{display:list-item;font-size:14px;line-height:1.5;color:var(--body-2)}
.aqp-bilet-archiwalny{opacity:.72}
.aqp-nieaktywne{margin-top:clamp(18px,2vw,28px)}
.aqp-nieaktywne summary{cursor:pointer;margin-bottom:14px;font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}

/* Powiększone kody (bilety mają dwa: wejście i nocleg). */
.aqp-lupa-panel{max-height:calc(100vh - 40px);overflow:auto}
.aqp-lupa-etykieta{margin:6px 0 4px;font-size:14px;font-weight:600;color:var(--body-2)}
.aqp-lupa-kod svg{display:block;width:100%;height:auto}
.aqp-lupa-panel .kod-lupa-numer{margin:4px 0 14px;font-size:14px;letter-spacing:.06em;color:var(--muted-1)}

.aqp-nagroda img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg,16px)}
.aqp-nagrody-lista .aqp-nagroda h3{margin-top:18px}