/* Yachting4 Booking — frontend SPA — iteracja 1 (mock data) */

@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Light.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Semibold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

.y4-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.y4 {
  --y4-petrol: #004459;
  --y4-petrol-soft: #00586f;
  --y4-aqua: #46c0c9;
  --y4-aqua-light: #6fd5dd;
  --y4-aqua-soft: #c8eaee;
  --y4-aqua-bg: #eaf6f7;
  /* FIND-046 (Sprint 1, 2026-05-14): ciemniejszy aqua dla tekstu na białym tle.
     #46c0c9 na #fff = 1.9:1 (WCAG fail). #0e7e8a = 5.5:1 (AA pass dla normalnego tekstu).
     Używaj `--y4-aqua-text` zamiast `--y4-aqua` gdy element to TEKST na surface/bg.
     `--y4-aqua` pozostaje dla borderów, ikon, backgroundów. */
  --y4-aqua-text: #0e7e8a;
  --y4-bg: #f9f9f9;
  --y4-surface: #ffffff;
  --y4-line: #e8ecee;
  --y4-line-2: #f0f0f0;
  --y4-ink: #004459;
  --y4-ink-2: #2c5b6c;
  /* FIND-047 (Sprint 1, 2026-05-14): ciemniejszy muted.
     #6f8893 na #fff = 3.2:1 (WCAG fail dla 11px labelu). #505a64 = 7.5:1 (AA pass). */
  --y4-muted: #505a64;
  --y4-muted-2: #949494;
  --y4-warn: #b87f00;
  --y4-warn-bg: #fff7e6;
  --y4-error: #c2364c;
  --y4-success: #1f8a72;
  --y4-radius: 16px;
  --y4-shadow: 0 8px 28px rgba(0, 68, 89, 0.08);
  --y4-shadow-lg: 0 18px 50px rgba(0, 68, 89, 0.16);

  font-family: 'Clash Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--y4-ink);
  background: var(--y4-bg);
  border-radius: var(--y4-radius);
  padding: 24px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-weight: 400;
  font-size: 15px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.y4 *, .y4 *::before, .y4 *::after { box-sizing: border-box; }
.y4 button { font-family: inherit; cursor: pointer; border: none; }
.y4 a { color: inherit; text-decoration: none; }
.y4 input, .y4 select, .y4 textarea { font-family: inherit; }

/* ===== Loader ===== */
.y4-loader {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 80px 20px;
}
.y4-loader__spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--y4-aqua-soft);
  border-top-color: var(--y4-aqua);
  border-radius: 50%;
  animation: y4-spin 0.8s linear infinite;
}
.y4-loader__label { color: var(--y4-muted); font-size: 14px; }
@keyframes y4-spin { to { transform: rotate(360deg); } }

/* ===== Portal tabs Przyszłe / Historia (FIND-071, Sprint 3) ===== */
.y4-portal .y4p-tabs {
  display: inline-flex; gap: 4px;
  background: var(--y4-bg);
  border: 1px solid var(--y4-line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
}
.y4-portal .y4p-tab {
  background: transparent; border: 0;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--y4-muted);
  cursor: pointer; min-height: 36px;
  transition: 0.15s;
}
.y4-portal .y4p-tab:hover { color: var(--y4-petrol); }
.y4-portal .y4p-tab.is-active {
  background: var(--y4-petrol); color: #fff;
}
.y4-portal .y4p-tab:focus-visible {
  outline: 2px solid var(--y4-aqua-text); outline-offset: 2px;
}

/* ===== Copy-to-clipboard toast + button (FIND-073, Sprint 3) ===== */
.y4p-code__copy {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
}
.y4p-toast {
  /* FIND-RESP-023 (2026-05-19): left:50%+transform → left/right margin dla
     responsive scaling. Toast skaluje się 0-100% szerokości na wąskich
     ekranach (max 360px na max-width). */
  position: fixed; bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 40px);
  z-index: 10000;
  background: var(--y4-petrol); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 68, 89, 0.25);
  transition: opacity 0.3s;
}

/* ===== Semantic list reset (FIND-049, Sprint 3) =====
   <ul>/<ol class="y4p-list-reset"> z divopodobnym layoutem — kasujemy WP/theme
   defaultowe padding/list-style ale zachowujemy semantykę dla screen readers. */
.y4p-list-reset { list-style: none; padding: 0; margin: 0; }
.y4p-list-reset > li { list-style: none; }

/* ===== Toast notifications (FIND-059, Sprint 2) ===== */
.y4-toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  max-width: 420px;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--y4-surface);
  border: 1px solid var(--y4-line);
  border-left: 4px solid var(--y4-aqua);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 68, 89, 0.15);
  font-size: 14px; color: var(--y4-ink);
  animation: y4-toast-in 0.25s ease-out;
}
.y4-toast--warn { border-left-color: var(--y4-warn); background: var(--y4-warn-bg); }
.y4-toast--error { border-left-color: var(--y4-error); background: #fce0e5; color: var(--y4-error); }
.y4-toast__icon { font-size: 16px; }
.y4-toast__msg { flex: 1; line-height: 1.4; }
.y4-toast__close {
  background: none; border: 0; color: inherit;
  font-size: 18px; cursor: pointer; padding: 0 4px;
  min-width: 24px; min-height: 24px;
}
.y4-toast__close:hover { opacity: 0.7; }
@keyframes y4-toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 560px) {
  .y4-toast { bottom: 10px; right: 10px; left: 10px; max-width: none; }
}

/* ===== Stepper ===== */
.y4-stepper {
  display: flex; gap: 6px;
  background: var(--y4-surface);
  border: 1px solid var(--y4-line);
  border-radius: 999px;
  padding: 6px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 auto 24px;
  box-shadow: var(--y4-shadow);
}
.y4-step {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--y4-muted);
  font-size: 14px;
  white-space: nowrap;
  transition: 0.2s;
}
.y4-step__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--y4-bg);
  color: var(--y4-muted);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 500;
  flex-shrink: 0;
}
.y4-step.is-active { background: var(--y4-petrol); color: #fff; }
.y4-step.is-active .y4-step__num { background: var(--y4-aqua); color: #fff; }
.y4-step.is-done .y4-step__num { background: var(--y4-aqua); color: #fff; }
.y4-step.is-done::after { content: '✓'; color: var(--y4-aqua-text); margin-left: -4px; }

/* ===== Layout krok 1 — 3 kolumny (zgodnie z mockupem klienta) ===== */
/* Lewa: lista łodzi (pionowa). Środek: kalendarz. Prawa: opcje (godziny + sternik + mapy). */
.y4-grid-step1 {
  display: grid;
  grid-template-columns: 200px minmax(280px, 1fr) minmax(320px, 380px);
  gap: 16px;
  align-items: start;
}
.y4-grid-step1__col3 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
/* Tryb preselect (shortcode na podstronie oferty łódki):
   2-kolumnowy layout 50:50 — kalendarz po lewej, „Twój rejs" + CTA po prawej.
   `align-items: stretch` rozciąga obie kolumny do tej samej wysokości — kalendarz
   kończy się na równi z buttonem „Dalej" pchniętym na dół prawej kolumny.
   Info-card o łódce nad gridem mówi co rezerwujemy. */
.y4-grid-step1--preselect {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
/* Karta kalendarza w preselect — flex-column. Kalendarz (`.y4-cal__grid`)
   zachowuje naturalną szerokość/wysokość (komórki `aspect-ratio: 1`).
   Legendę pchamy `margin-top: auto` na sam dół karty, żeby gdy karta
   stretchuje się do wysokości prawej kolumny — pusty obszar lądował MIĘDZY
   gridem a legendą, a nie zaburzał proporcji komórek (wcześniej `flex: 1`
   na gridzie sprawiał, że ostatnia kolumna dni — niedziela — była ucinana). */
.y4-grid-step1--preselect > .y4-card { display: flex; flex-direction: column; }
.y4-grid-step1--preselect > .y4-card > .y4-cal__legend { margin-top: auto; }
/* Prawa kolumna: „Twój rejs" + CTA. Karta opcji rozrasta się (`flex: 1`),
   wypełniając całą wysokość prawej kolumny (= wysokość kalendarza dzięki
   `align-items: stretch` na gridzie). Bez pustych przestrzeni między kartą
   a CTA — button siedzi tuż pod kartą z `gap: 14px`. */
.y4-grid-step1__col-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.y4-grid-step1__col-right > .y4-card { flex: 1; display: flex; flex-direction: column; }
.y4-grid-step1__col-right > .y4-card > .y4-card__body { flex: 1; }
/* Skroń kalendarza w trybie preselect — bez wielkiej siatki kwadratów */
.y4-grid-step1--preselect .y4-cal__day {
  min-height: 40px;
  font-size: 13px;
}
.y4-grid-step1--preselect .y4-cal__grid {
  gap: 4px;
}

/* Kompaktowy inline pasek preselect (shortcode na podstronie łodzi).
   Jedna linia, niska wysokość. Nie powiela tego co już jest w nagłówku
   strony łodzi — tylko utwierdza klienta że trafił do właściwej rezerwacji. */
.y4-preselect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 16px;
  background: var(--y4-aqua-bg);
  border: 1px solid var(--y4-aqua-soft);
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.4;
}
.y4-preselect__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--y4-aqua-text);
  font-weight: 600;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--y4-aqua-soft);
  border-radius: 999px;
  flex-shrink: 0;
}
.y4-preselect__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--y4-petrol);
}
.y4-preselect__sep {
  width: 1px;
  height: 16px;
  background: var(--y4-aqua-soft);
}
.y4-preselect__meta-item {
  color: var(--y4-ink-2);
  font-size: 13px;
  white-space: nowrap;
}

/* Marina (kafelki w lewej kolumnie generic mode) */
.y4-locations { display: flex; flex-direction: column; gap: 10px; }
.y4-location {
  display: block;
  padding: 14px 16px;
  background: var(--y4-surface);
  border: 2px solid var(--y4-line);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: 0.15s ease;
  width: 100%;
}
.y4-location:hover { border-color: var(--y4-aqua-soft); }
.y4-location.is-selected {
  border-color: var(--y4-aqua);
  background: var(--y4-aqua-bg);
}
.y4-location__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--y4-petrol);
}
.y4-location__count {
  font-size: 12px;
  color: var(--y4-muted);
  margin-top: 2px;
}

/* `.y4-options-row` — legacy, opcje są teraz w 3. kolumnie pod kalendarzem */
.y4-options-row { display: none; }

/* Karty łodzi — nowy zestaw klas `.y4bc-*` (zero kolizji z dawnym `.y4-boat*`).
   `display: block` (nie flex) — flex-column z 10 dziećmi i max-height: 820px
   kompresował każdą kartę do ~82px przez auto flex-shrink. */
.y4bc-list {
  display: block;
  max-height: 820px;
  overflow-y: auto;
  padding-right: 4px;
}
.y4bc-card {
  margin-bottom: 14px;
  flex-shrink: 0;
}
.y4bc-card:last-child { margin-bottom: 0; }
.y4bc-card:hover { transform: translateY(-1px); border-color: var(--y4-aqua-soft) !important; }

/* Sekcja „Mapa trasy" — zawsze rozwinięta (decyzja klienta 2026-04-30:
   lista tras widoczna od razu, bez dodatkowego klika żeby ją zobaczyć).
   Wcześniej `<details>` collapsed → zostaje tylko `.y4-maps-section` jako
   prosty kafel z tytułem + listą `.y4-map`. */
.y4-maps-section {
  margin-top: 4px;
  border: 1px solid var(--y4-line);
  border-radius: 10px;
  background: #fbfcfd;
  padding: 12px 14px;
}
.y4-maps-section__title {
  font-weight: 500;
  color: var(--y4-petrol);
  font-size: 14px;
  margin-bottom: 10px;
}
.y4-maps-section__title small {
  color: var(--y4-muted);
  font-weight: 400;
  font-size: 12px;
}

/* "Twój rejs" wyszarzony gdy łódka nie wybrana */
.y4-card.is-pending {
  opacity: 0.55;
  pointer-events: none;
}
.y4-card.is-pending::before {
  content: 'Najpierw wybierz łódź';
  display: block;
  position: absolute;
  top: 10px; right: 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--y4-muted);
  font-weight: 600;
}
.y4-grid-step1 .y4-boats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 820px;
  overflow-y: auto;
  padding-right: 4px;
}
/* Generic mode: pełnowymiarowa karta łodzi — banner zdjęcia u góry (cała łódka widoczna,
   bez przycinania), info pod spodem, cena na dole z dashed-divider.
   Reset user-agent <button> stylów — bez tego flex-column z dziećmi się nie układa. */
.y4-grid-step1 .y4-boat {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 2px solid var(--y4-line);
}
.y4-grid-step1 .y4-boat__img {
  width: 100%;
  height: 180px;
  border-radius: 0;
  flex-shrink: 0;
  position: relative;
  background-color: var(--y4-aqua-soft);
  background-position: center;
  background-size: contain;       /* cała łódka widoczna, bez crop-a */
  background-repeat: no-repeat;
}
.y4-grid-step1 .y4-boat__img svg {
  width: 100%;
  height: 100%;
}
.y4-grid-step1 .y4-boat__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  padding: 4px 10px;
  letter-spacing: 0.06em;
  z-index: 2;
}
.y4-grid-step1 .y4-boat__info {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 8px;
  min-width: 0;
  width: 100%;
  flex: 0 0 auto !important;
  background: #fff;
}
.y4-grid-step1 .y4-boat__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--y4-petrol);
  word-break: break-word;
}
.y4-grid-step1 .y4-boat__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--y4-muted);
  margin: 0;
}
.y4-grid-step1 .y4-boat__meta span { white-space: nowrap; }
.y4-grid-step1 .y4-boat__engine {
  max-width: none;
  overflow: visible;
  white-space: normal;
  word-break: break-word;
  flex-basis: 100%;
}
.y4-grid-step1 .y4-boat__price {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 16px 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--y4-petrol);
  background: #fff;
  border-top: 1px dashed var(--y4-line);
  margin-top: 4px;
  width: 100%;
  flex: 0 0 auto !important;
}
.y4-grid-step1 .y4-boat__price small {
  font-size: 11px;
  color: var(--y4-muted);
  font-weight: 400;
}
/* Hover/selected — wyraźniej */
.y4-grid-step1 .y4-boat:hover { transform: translateY(-1px); }
.y4-grid-step1 .y4-boat.is-selected {
  box-shadow: 0 0 0 3px var(--y4-aqua), 0 14px 30px rgba(0, 68, 89, 0.10);
}

.y4-step1-summary {
  margin-top: 18px;
}

.y4-card {
  background: var(--y4-surface);
  border: 1px solid var(--y4-line);
  border-radius: var(--y4-radius);
  box-shadow: var(--y4-shadow);
  /* `visible` — pozwala dropdownowi timepicker'a (`.y4-timepicker__panel`,
     `position: absolute; z-index: 50`) wyjść poza krawędź karty. Wcześniej
     `overflow: hidden` obcinał listę godzin i pomysłowo „zasłaniał" kalendarz
     w preselect mode, gdy panel godzin nakładał się na grid kalendarza. */
  overflow: visible;
}
.y4-card__title {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--y4-line);
  font-size: 13px; font-weight: 500;
  color: var(--y4-petrol);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.y4-card__body { padding: 16px 20px; }

/* ===== Lista łodzi ===== */
.y4-boats { display: flex; flex-direction: column; gap: 12px; }
.y4-boat__img {
  background: linear-gradient(135deg, var(--y4-aqua-soft), var(--y4-aqua));
  background-position: center;
  background-size: cover;
}
.y4-boat__badge {
  position: absolute;
  top: 6px; left: 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--y4-petrol);
  z-index: 1;
}
.y4-boat__badge--electric { background: var(--y4-petrol); color: var(--y4-aqua-light); }
.y4-boat__badge--license { background: var(--y4-warn); color: #fff; }
.y4-boat__meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--y4-muted);
  margin-top: 4px;
  flex-wrap: wrap;
}
.y4-boat__meta span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.y4-boat__engine { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.y4-boat__name { font-weight: 500; font-size: 13px; color: var(--y4-petrol); margin: 0; line-height: 1.25; }
.y4-boat:hover { transform: translateY(-2px); box-shadow: var(--y4-shadow-lg); }
.y4-boat { transition: 0.18s ease; }
.y4-boat.is-selected { box-shadow: 0 8px 22px rgba(70, 192, 201, 0.32); }
.y4-boat {
  display: flex; gap: 12px; align-items: center;
  padding: 10px;
  background: var(--y4-surface);
  border: 2px solid var(--y4-line);
  border-radius: 12px;
  cursor: pointer;
  transition: 0.15s;
  text-align: left;
  width: 100%;
}
.y4-boat:hover { border-color: var(--y4-aqua-soft); }
.y4-boat.is-selected {
  border-color: var(--y4-aqua);
  background: var(--y4-aqua-bg);
}
.y4-boat__img {
  width: 88px; height: 56px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--y4-aqua-soft), var(--y4-aqua));
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.y4-boat__img svg { width: 100%; height: 100%; }
.y4-boat__info { flex: 1; min-width: 0; }
.y4-boat__name { font-weight: 500; font-size: 14px; color: var(--y4-petrol); margin: 0; }
.y4-boat__meta { font-size: 12px; color: var(--y4-muted); margin-top: 2px; }
.y4-boat__price {
  font-size: 13px; font-weight: 500; color: var(--y4-petrol);
  white-space: nowrap;
}
.y4-boat__price small { color: var(--y4-muted); font-weight: 400; font-size: 11px; }

/* ===== Kalendarz — większe pola ===== */
.y4-cal__day {
  min-height: 44px;
  font-size: 14px;
}

.y4-cal__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--y4-line);
}
/* 0.8.3 (2026-05-19): miesiąc center-aligned — `space-between` pchało nazwę
   miesiąca do lewej krawędzi. Daję mu `flex: 1; text-align: center`. */
.y4-cal__month {
  margin: 0; font-size: 16px; font-weight: 500; color: var(--y4-petrol);
  flex: 1;
  text-align: center;
}
.y4 .y4-cal__nav,
.y4-cal__nav {
  /* Wymuszone wymiary kwadratowe — Themify Ultra dodaje min-width/padding-x
     do wszystkich <button>, przez co bez tych override'ów przyciski stawały się
     owalne ("jajka"). flex: 0 0 44px + box-sizing chroni przed flex stretch.
     FIND-RESP-004 (2026-05-19): bump 32→44px dla WCAG 2.5.5 touch target. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  max-height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  background: var(--y4-bg);
  color: var(--y4-petrol);
  font-size: 18px;
  line-height: 1;
  transition: 0.15s;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.y4 .y4-cal__nav:hover,
.y4-cal__nav:hover { background: var(--y4-aqua-bg); }
.y4 .y4-cal__nav:disabled,
.y4-cal__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.y4-cal__grid {
  display: grid;
  /* 0.8.2 (2026-05-19): minmax(0, 1fr) zamiast 1fr — pozwala kolumnom się skurczyć
     pod min-content, gdy aspect-ratio + min-height konfliktuje z dostępną szerokością
     (problem: na 400px viewport po paddingu theme + .y4 + .y4-card zostaje za mało
     miejsca na 7 kolumn × 44px, ostatnie 2 kolumny były ucinane przez overflow-x: hidden). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 12px 16px 16px;
  /* min-width: 0 też na samym grid — fuse safety na flex/grid parent. */
  min-width: 0;
}
.y4-cal__dow {
  font-size: 11px;
  text-align: center;
  color: var(--y4-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0;
}
.y4-cal__day {
  /* 0.8.2: aspect-ratio: 1 + min-height: 44px konfliktowało gdy szerokość kolumny
     < 44px (na 400px viewport po Themify paddingu zostaje ~36px per kolumna).
     Konflikt: width=36, height=44 (z aspect-ratio) lub height=36 (min-height pełni override).
     Usuwamy aspect-ratio i polegamy na flat `min-height` — kolumny mogą być węższe niż
     wysokie na ultra-narrow ekranach (better than ucinanie sobót/niedziel). */
  display: grid; place-items: center;
  min-height: 44px;
  min-width: 0;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  color: var(--y4-ink-2);
  transition: 0.15s;
  font-weight: 400;
  background: none;
  border: none;
  font-family: inherit;
  /* box-sizing reset — Themify Ultra dodaje padding/border do button który psułby grid sizing. */
  box-sizing: border-box;
  padding: 0;
}
/* aspect-ratio tylko gdy jest miejsce (≥420px viewport — calendar grid ≥330px szerokości). */
@media (min-width: 420px) {
  .y4-cal__day { aspect-ratio: 1; }
}
.y4-cal__day:hover:not(:disabled) { background: var(--y4-bg); }
/* FIND-076 (Sprint 5, 2026-05-14): kontrast wcześniej #c5cfd2 (~1.5:1 fail).
   Disabled state jest WCAG 1.4.3 exception ale +czytelność dla osób z osłabionym wzrokiem. */
.y4-cal__day.is-muted { color: #9aa6ab; cursor: default; }
/* 0.8.22 (tester): zajęty termin na delikatnie czerwono zamiast szaro — szarość
   czytała się jak "poza zakresem", czerwień jednoznacznie jako "niedostępny".
   #c2364c to kolor danger używany już w projekcie (badge ZAJĘTA, force-regen). */
.y4-cal__day.is-unavailable {
  color: #c2364c;
  background: #fdf1f2;
  cursor: not-allowed;
  text-decoration: line-through;
}
.y4-cal__day.is-available { background: var(--y4-aqua-bg); color: var(--y4-petrol); font-weight: 500; }
.y4-cal__day.is-available:hover { background: var(--y4-aqua-soft); }
.y4-cal__day.is-partial { background: var(--y4-warn-bg); color: var(--y4-warn); font-weight: 500; }
.y4-cal__day.is-partial:hover { background: #fdecc8; }
.y4-cal__day.is-partial::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--y4-warn);
}
.y4-cal__day.is-selected {
  background: var(--y4-petrol);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 6px 14px rgba(0, 68, 89, 0.3);
}
.y4-cal__legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 0 20px 16px;
  font-size: 11px;
  color: var(--y4-muted);
}
.y4-cal__legend i {
  width: 10px; height: 10px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}

/* ===== Opcje (godziny + sternik + mapy) ===== */
.y4-options { display: flex; flex-direction: column; gap: 14px; }
.y4-field { display: flex; flex-direction: column; gap: 4px; }
.y4-field__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--y4-muted);
}
.y4-field input[type="time"],
.y4-field input[type="text"],
.y4-field input[type="email"],
.y4-field input[type="tel"],
.y4-field select,
.y4-field textarea {
  padding: 9px 12px;
  background: var(--y4-surface);
  border: 1px solid var(--y4-line);
  border-radius: 10px;
  font-size: 14px;
  color: var(--y4-ink);
  transition: 0.15s;
  width: 100%;
}
.y4-field input:focus,
.y4-field select:focus,
.y4-field textarea:focus {
  outline: none;
  border-color: var(--y4-aqua);
  box-shadow: 0 0 0 3px var(--y4-aqua-soft);
}
.y4-field--time {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.y4-field--time > div { display: flex; flex-direction: column; gap: 6px; }
.y4-field__hint {
  font-size: 12px;
  color: var(--y4-muted);
  margin-top: 2px;
}
.y4-field__error {
  font-size: 12px;
  color: var(--y4-error);
  margin-top: 4px;
}

.y4-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--y4-surface);
  border: 1px solid var(--y4-line);
  border-radius: 10px;
}
.y4-toggle__label { font-size: 14px; color: var(--y4-ink); }
.y4-toggle__hint { font-size: 12px; color: var(--y4-muted); }
.y4-switch {
  width: 52px; height: 30px;
  background: var(--y4-line);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: 0.2s;
  flex-shrink: 0;
  border: none;
  padding: 0;
  /* WCAG 2.5.5: tap target ≥44px. Fizyczny rozmiar 52×30, ale klikalny obszar
     rozszerzamy przez ::before (transparent extension) o brakujące 14px góra/dół. */
}
.y4-switch::before {
  content: '';
  position: absolute;
  inset: -7px -4px;
  border-radius: 999px;
}
.y4-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 2px 4px rgba(0, 68, 89, 0.2);
}
.y4-switch.is-on { background: var(--y4-aqua); }
.y4-switch.is-on::after { left: 25px; }

/* ===== Mapa selector ===== */
.y4-maps { display: flex; flex-direction: column; gap: 8px; }
.y4-map {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px;
  background: var(--y4-surface);
  border: 2px solid var(--y4-line);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  width: 100%;
  text-align: left;
}
.y4-map:hover {
  background: var(--y4-petrol);
  border-color: var(--y4-petrol);
  color: #ffffff;
}
.y4-map:hover .y4-map__name,
.y4-map:hover .y4-map__hint { color: #ffffff; }
.y4-map:hover .y4-map__price { color: var(--y4-aqua-light); }
.y4-map.is-selected,
.y4-map.is-selected:hover {
  background: var(--y4-aqua-bg);
  border-color: var(--y4-aqua);
}
.y4-map.is-selected:hover .y4-map__name { color: var(--y4-petrol); }
.y4-map.is-selected:hover .y4-map__hint { color: var(--y4-muted); }
.y4-map.is-selected:hover .y4-map__price { color: var(--y4-success); }
.y4-map__name { font-size: 14px; font-weight: 400; color: var(--y4-petrol); margin: 0; }
.y4-map__hint { font-size: 11px; font-weight: 400; color: var(--y4-muted); margin: 0; }
.y4-map__price {
  font-size: 12px; font-weight: 400;
  color: var(--y4-success);
  margin-left: auto;
  white-space: nowrap;
}
.y4-maps-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--y4-muted);
  text-align: center;
  background: var(--y4-bg);
  border-radius: 10px;
}

/* Zajęte godziny w dniu */
.y4-busy-list {
  background: var(--y4-warn-bg);
  border: 1px solid #f3d97a;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 4px;
}
.y4-busy-list__title {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--y4-warn);
  margin-bottom: 6px;
}
.y4-busy-list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.y4-busy-list li {
  background: #fff;
  border: 1px solid #f3d97a;
  color: var(--y4-warn);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

/* ===== Layout krok 2 ===== */
.y4-grid-step2 {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 18px;
  /* `stretch` — obie kolumny dorównują wysokością do najwyższej. Wcześniej
     `start` — formularz „Dane zamawiającego" mógł być niższy niż kafel
     „Podsumowanie rezerwacji" (lub odwrotnie), co psuło symetrię layoutu. */
  align-items: stretch;
}

/* ===== Form (krok 2) — kompaktowy layout, mniej powietrza między polami ===== */
.y4-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.y4-form-grid--full { grid-column: 1 / -1; }
.y4-section-divider {
  margin: 12px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--y4-line);
  font-size: 11px;
  font-weight: 500;
  color: var(--y4-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.y4-section-divider:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.y4-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
}
.y4-checkbox input { margin-top: 2px; accent-color: var(--y4-aqua); }
.y4-checkbox span { color: var(--y4-ink-2); }
.y4-checkbox a { color: var(--y4-aqua-text); text-decoration: underline; }

.y4-upload {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  background: var(--y4-bg);
  border: 1.5px dashed var(--y4-line);
  border-radius: 10px;
  cursor: pointer;
  transition: 0.15s;
}
.y4-upload:hover { border-color: var(--y4-aqua); background: var(--y4-aqua-bg); }
.y4-upload__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--y4-aqua-bg);
  color: var(--y4-aqua-text);
  display: grid; place-items: center;
  font-size: 18px;
}
.y4-upload__label { font-size: 13px; color: var(--y4-ink-2); flex: 1; }
.y4-upload__filename { font-size: 12px; color: var(--y4-petrol); font-weight: 500; }
.y4-upload input[type="file"] { display: none; }

/* ===== Summary ===== */
.y4-summary {
  background: var(--y4-petrol);
  color: #fff;
  border-radius: var(--y4-radius);
  padding: 22px;
  box-shadow: var(--y4-shadow-lg);
  position: relative;
  overflow: hidden;
  /* Flex column + `margin-top: auto` na `.y4-actions` (poniżej) — przy
     `align-items: stretch` w gridzie krok 2 podsumowanie rośnie do wysokości
     formularza, a przyciski „Wróć / Przejdź do płatności" wciąż przyklejają się
     do dolnej krawędzi karty (a nie unoszą się w środku z dużym pustym dołem). */
  display: flex;
  flex-direction: column;
}
.y4-summary > .y4-actions { margin-top: auto; }
.y4-summary::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, var(--y4-aqua) 0%, transparent 70%);
  opacity: 0.3;
  border-radius: 50%;
}
.y4-summary > * { position: relative; z-index: 1; }
.y4-summary__title {
  margin: 0 0 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--y4-aqua-light);
  font-weight: 500;
}
.y4-summary__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0;
  font-size: 14px;
}
.y4-summary__row > span:first-child { opacity: 0.7; flex-shrink: 0; }
.y4-summary__row > span:last-child { text-align: right; word-break: break-word; }
.y4-summary__row.is-empty > span:last-child { color: var(--y4-aqua-light); opacity: 0.7; font-style: italic; }
.y4-summary__divider {
  margin: 12px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.y4-summary__row.is-cost { font-size: 13px; opacity: 0.9; }
.y4-summary__row.is-total {
  font-weight: 500;
  font-size: 19px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.y4-summary__row.is-total > span:first-child { opacity: 0.85; }
.y4-summary__row.is-total > span:last-child { color: var(--y4-aqua-light); }

/* Note "+ paliwo na miejscu" — pod sumą gdy boat.fuelExtra. */
.y4-summary__fuel-note {
  margin: 8px 0 0;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--y4-aqua);
  border-radius: 4px;
  color: var(--y4-aqua-light);
  font-size: 12px;
  text-align: left;
}
/* Hint widoczny w panelu rail-summary gdy klient jeszcze nie wybrał łodzi/daty —
   pokazuje "Wybierz łódź i termin, aby zobaczyć cenę". */
.y4-summary__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--y4-aqua-light);
  opacity: 0.75;
  font-style: italic;
}
/* Wariant summary w panelu rail (krok 2/3) — mniejszy padding, dopasowany do węższej kolumny. */
.y4-summary--rail {
  padding: 18px;
  box-shadow: none;
  /* Drobniejsza typografia w wąskim panelu — title + line items zmniejszone, suma zachowuje wagę. */
}
.y4-summary--rail .y4-summary__row { font-size: 13px; padding: 5px 0; }
.y4-summary--rail .y4-summary__row.is-cost { font-size: 12px; }
.y4-summary--rail .y4-summary__row.is-total { font-size: 17px; }

/* CTA Wstecz/Dalej WEWNĄTRZ y4-summary--rail (krok 2 i 3). */
.y4-actions--summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.y4-actions--summary .y4-btn--primary {
  order: -1; /* primary "Dalej" wyżej, ghost "Wstecz" niżej. */
  background: var(--y4-aqua);
  color: var(--y4-petrol);
}
.y4-actions--summary .y4-btn--primary:hover {
  background: var(--y4-aqua-light);
}
.y4-actions--summary .y4-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.y4-actions--summary .y4-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ===== Buttons ===== */
.y4-actions {
  display: flex; gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Standalone — CTA w kroku 1 (preselect) pod kartą „Twój rejs".
   Button zajmuje pełną szerokość prawej kolumny (= szerokość karty „Twój rejs"
   nad nim). Większy padding pionowy → wyraźniejszy CTA. */
.y4-actions--standalone {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}
.y4-actions--standalone .y4-btn--primary {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 500;
}
.y4-btn {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  transition: 0.2s;
  font-family: inherit;
  border: none;
  cursor: pointer;
}
.y4-btn--primary {
  background: var(--y4-aqua);
  color: var(--y4-petrol);
  flex: 1;
}
.y4-btn--primary:hover {
  background: var(--y4-aqua-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(70, 192, 201, 0.4);
}
.y4-btn--primary:disabled {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.y4-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.y4-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ===== Krok 3: status ===== */
.y4-status {
  text-align: center;
  padding: 60px 30px;
  max-width: 560px;
  margin: 0 auto;
  background: var(--y4-surface);
  border-radius: var(--y4-radius);
  box-shadow: var(--y4-shadow);
}
.y4-status__icon {
  width: 88px; height: 88px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 44px;
  margin: 0 auto 20px;
}
.y4-status--success .y4-status__icon { background: #d4f4ec; color: var(--y4-success); }
.y4-status--error .y4-status__icon { background: #fce0e5; color: var(--y4-error); }
/* 0.8.30: stan oczekiwania (webhook P24 jeszcze nie potwierdził płatności) — neutralny, NIE błąd. */
.y4-status--pending .y4-status__icon { background: #eaf6f7; color: var(--y4-petrol); }
.y4-status__title { margin: 0 0 8px; font-size: 24px; font-weight: 500; color: var(--y4-petrol); }
.y4-status__msg { color: var(--y4-muted); font-size: 15px; margin: 0 0 20px; }
.y4-status__code {
  background: var(--y4-aqua-bg);
  border: 1px dashed var(--y4-aqua);
  border-radius: 10px;
  padding: 12px 16px;
  display: inline-block;
  margin: 12px 0;
}
.y4-status__code-label { font-size: 11px; color: var(--y4-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.y4-status__code-value { font-size: 22px; font-weight: 500; color: var(--y4-petrol); margin-top: 2px; }
.y4-status__btn {
  padding: 12px 24px;
  background: var(--y4-petrol);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}
.y4-status__btn:hover { background: var(--y4-aqua); }

.y4-status__details {
  margin: 24px auto;
  max-width: 420px;
  text-align: left;
  background: var(--y4-bg);
  border-radius: 12px;
  padding: 18px 22px;
}
.y4-status__row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--y4-line);
}
.y4-status__row:last-child { border-bottom: none; }
.y4-status__row > span:first-child { color: var(--y4-muted); }
.y4-status__row > span:last-child { color: var(--y4-petrol); font-weight: 500; text-align: right; }
.y4-status__row.is-highlight {
  border-top: 1px solid var(--y4-petrol);
  border-bottom: none;
  margin-top: 8px;
  padding-top: 14px;
}
.y4-status__row.is-highlight > span:last-child { color: var(--y4-aqua); font-size: 17px; font-weight: 600; }

.y4-status__actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px;
}
.y4-status__actions .y4-btn { flex: 0 1 auto; }
.y4-btn--ghost-light {
  background: transparent;
  color: var(--y4-petrol);
  border: 1px solid var(--y4-line);
}
.y4-btn--ghost-light:hover { background: var(--y4-bg); border-color: var(--y4-aqua); color: var(--y4-aqua); }

.y4-status__notes {
  display: flex; gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.y4-status__note {
  background: var(--y4-aqua-bg);
  border: 1px solid var(--y4-aqua-soft);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--y4-petrol);
  text-align: left;
  flex: 1 1 220px;
  max-width: 280px;
}

/* Skeleton loaders */
.y4-skeleton {
  background: linear-gradient(90deg, #eef2f4 0%, #f7fafb 50%, #eef2f4 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: y4-pulse 1.4s ease-in-out infinite;
}
@keyframes y4-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Smooth transitions kart */
.y4-card { transition: box-shadow 0.2s ease; }
.y4-card:hover { box-shadow: 0 12px 32px rgba(0, 68, 89, 0.10); }

/* Step transitions — tylko dla statusu końcowego (krok 3 po płatności).
   Wcześniej `.y4-grid-step1, .y4-grid-step2` też miały animację 0.25s, ale
   że SPA odbudowuje innerHTML przy każdym kliku (wybór dnia / godziny / mapy),
   animacja odpalała się non-stop i wyglądało to jak „odświeżenie strony"
   przy każdym kliknięciu. Krok 3 jest wstawiany raz, więc tam zostaje. */
.y4-status {
  animation: y4-fadein 0.25s ease-out;
}
@keyframes y4-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  /* FIND-RESP-011 (2026-05-19): rozszerzenie z animacji o transformy + tranzycje
     (WCAG 2.3.3 Motion from Interactions). Wcześniej tylko 4 elementy. */
  .y4-grid-step1, .y4-grid-step2, .y4-status, .y4-skeleton { animation: none; }
  .y4-btn, .y4-btn--primary, .y4-boat, .y4-map, .y4-card,
  .y4-cal__day, .y4-cal__nav, .y4-status__btn, .y4-timepicker__option {
    transition: none !important;
    transform: none !important;
  }
  .y4-btn--primary:hover, .y4-btn--primary:focus-visible,
  .y4-boat:hover, .y4-map:hover, .y4-card:hover {
    transform: none !important;
  }
}

/* FIND-RESP-024 (2026-05-19): smooth scroll dla scroll-to-section po walidacji. */
@media (prefers-reduced-motion: no-preference) {
  .y4-wrapper, .y4 { scroll-behavior: smooth; }
}

/* ===== Mock notice ===== */
.y4-mock-banner {
  background: var(--y4-warn-bg);
  border: 1px solid #f3d97a;
  color: var(--y4-warn);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.y4-mock-banner strong { font-weight: 500; }

/* ===== Validation errors ===== */
.y4-field input.is-invalid,
.y4-field select.is-invalid {
  border-color: var(--y4-error);
}
.y4-field input.is-invalid:focus,
.y4-field select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(194, 54, 76, 0.15);
}

/* ===== Responsive ===== */
/* < 1080: opcje pod kalendarz (2 col), łodzie nadal po lewej */
@media (max-width: 1080px) {
  .y4-grid-step1 { grid-template-columns: 260px minmax(0, 1fr); }
  .y4-grid-step1 > .y4-card:last-child { grid-column: 1 / -1; }
}
/* < 820: stack pełen */
@media (max-width: 820px) {
  .y4-grid-step1 { grid-template-columns: minmax(0, 1fr); }
  .y4-grid-step2 { grid-template-columns: minmax(0, 1fr); }
  .y4-grid-step1 .y4-boats { max-height: none; flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .y4-grid-step1 .y4-boat { flex: 1 1 220px; min-width: 0; }
  /* 2026-07-17 (zgłoszenie klienta, iPhone — double-scroll): `.y4bc-list` to następca
     `.y4-boats` po refaktorze na klasy `.y4bc-*` (zero kolizji z dawnym cascade) —
     ale override, który TUŻ WYŻEJ zdejmuje max-height/overflow z `.y4-grid-step1
     .y4-boats` na wąskich ekranach, nigdy nie został przeniesiony na nową klasę.
     Efekt: przy >3 łodziach w marinie lista miała własny wewnętrzny scrollbar
     (max-height:820px, app.css:353-358) obok scrolla strony — na jednokolumnowym
     stacku (ten breakpoint) sztywny limit wysokości nie ma już uzasadnienia. */
  .y4bc-list { max-height: none; overflow-y: visible; }
  .y4-card { min-width: 0; }
  .y4-cal__grid { min-width: 0; }
  .y4-summary { min-width: 0; }
}
@media (max-width: 600px) {
  /* 2026-07-17: `clip` zamiast `hidden` — `hidden` (jak `auto`/`scroll`) wymusza na
     drugiej osi (overflow-y, tu niejawnie `visible`) wartość `auto`, czyli tworzy
     scroll container w pionie. `clip` przycina poziomo BEZ tego sprzężenia — to
     jedyny wariant `.y4-wrapper` (najbardziej zewnętrzny kontener wtyczki, nic go
     dalej nie osłania w poziomie, więc nie można po prostu usunąć przycinania jak
     przy `.y4` niżej). Wsparcie: wszystkie przeglądarki 2026 (Safari 16+/2022+). */
  .y4-wrapper { overflow-x: clip; }
  /* 2026-07-17 (zgłoszenie klienta, iPhone): `.y4` miało własne `overflow-x: hidden`
     poza `overflow-x` z `.y4-wrapper` (rodzic — Shortcode.php: `.y4` jest jego
     bezpośrednim dzieckiem, więc przycięcie w poziomie i tak już działa stamtąd).
     CSS wymusza sprzężenie osi overflow: gdy jedna oś ma hidden/auto/scroll a druga
     zostaje `visible`, przeglądarka NIE pozwala na `visible` i przestawia drugą oś
     na `auto`. Efekt: `.y4` dostawał realny wewnętrzny scrollbar (overflow-y: auto)
     obok zwykłego scrolla strony — na kroku 2 (wybór łodzi), gdzie zawartość jest
     wysoka, dawało to „podwójny scroll" (potwierdzone Playwright + iPhone viewport:
     computed overflowY: auto na `.y4`). Zostawiamy przycinanie w poziomie tylko na
     `.y4-wrapper`, gdzie nie ma tego efektu ubocznego. */
  .y4 { padding: 14px; }
  .y4-form-grid { grid-template-columns: 1fr; }
  .y4-stepper { width: 100%; }
  .y4-step { padding: 8px 12px; font-size: 12px; }
  .y4-actions { flex-direction: column; }
  .y4-card { padding: 14px; }
  /* FIND-RESP-004 (2026-05-19): min-height 44px dla touch target (WCAG 2.5.5).
     Wcześniej: 36px na 600px, 32px na 420px — poniżej WCAG. */
  .y4-cal__day { min-height: 44px; font-size: 13px; }
  .y4-cal__grid { gap: 4px; }
  .y4-summary__row { font-size: 13px; flex-wrap: wrap; }
  .y4-summary__row > * { min-width: 0; word-break: break-word; }
  .y4-grid-step1 .y4-boat { flex: 1 1 100%; }
  /* FIND-RESP-014: input padding 12px (z 9px) — touch palca ≥44px. */
  .y4-field input, .y4-field textarea, .y4-field select {
    padding: 12px !important;
    min-height: 44px !important;
  }
}
@media (max-width: 420px) {
  .y4 { padding: 10px; }
  .y4-card { padding: 12px; }
  .y4-cal__head { padding: 8px 4px; }
  /* FIND-RESP-004: 44px utrzymane na ultra-narrow — czytelność > kompaktowość. */
  .y4-cal__day { min-height: 44px; font-size: 12px; }
}

/* ============================================================
   Wizard (shortcode na stronie głównej, bez preselect)
   Layout: lewy sticky rail "Twój wybór" + prawe aktywne pole
   ============================================================ */
.y4-wizard {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 22px;
  align-items: flex-start;
  margin-top: 10px;
}
/* Krok 2 (Łódź) i 3 (Dodatki) — content lewo, panel "Twój wybór" prawo. */
.y4-wizard.y4-wizard--rail-right {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.y4-wizard__rail {
  position: sticky;
  /* 2026-06-17: top podniesiony z 16px — sticky menu motywu (Themify) zasłaniało górę
     panelu „Podsumowanie rezerwacji" przy przewijaniu w dół. */
  top: 80px;
  background: var(--y4-surface);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--y4-shadow);
  border: 1px solid var(--y4-line);
}
/* Zalogowany użytkownik (np. admin podczas testów) ma dodatkowo pasek WP (+32px). */
.admin-bar .y4-wizard__rail { top: 112px; }
/* Wariant summary — kontener przezroczysty, .y4-summary wewnątrz ma własne petrol bg. */
.y4-wizard__rail--summary {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
}
/* Mobile toggle button — domyślnie ukryty, widoczny tylko na <900px. */
.y4-wizard__rail-toggle { display: none; }
.y4-wizard__rail-content { display: block; }
.y4-wizard__rail-title {
  margin: 0 0 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--y4-aqua);
  font-weight: 600;
}
.y4-wizard__rail-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.y4-wizard__rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--y4-bg);
  border: 1px dashed transparent;
  transition: 0.15s;
}
.y4-wizard__rail-item.is-done {
  background: var(--y4-aqua-bg);
  border-color: transparent;
}
.y4-wizard__rail-item.is-pending {
  background: transparent;
  border-color: var(--y4-line);
  opacity: 0.7;
}
.y4-wizard__rail-text {
  flex: 1;
  min-width: 0;
}
.y4-wizard__rail-hint {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--y4-muted);
  font-weight: 500;
  margin-bottom: 2px;
}
.y4-wizard__rail-label {
  font-size: 13px;
  color: var(--y4-petrol);
  font-weight: 500;
  word-break: break-word;
}
.y4-wizard__rail-edit {
  background: transparent;
  border: 1px solid var(--y4-aqua-soft);
  cursor: pointer;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--y4-petrol);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  transition: 0.15s;
  font-family: inherit;
}
.y4-wizard__rail-edit:hover {
  background: var(--y4-petrol);
  color: #fff;
  border-color: var(--y4-petrol);
}
.y4-wizard__rail-total {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--y4-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.y4-wizard__rail-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--y4-muted);
}
.y4-wizard__rail-total-row.is-grand {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--y4-line);
  font-size: 16px;
  font-weight: 600;
  color: var(--y4-petrol);
}
.y4-wizard__rail-fuel-note {
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--y4-warn-bg);
  border-radius: 6px;
  color: var(--y4-warn);
  font-size: 11px;
  text-align: center;
}

/* CTA pod panelem "Twój wybór" — przyciski Wstecz/Dalej dla kroku 2 i 3. */
.y4-wizard__rail-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--y4-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.y4-wizard__rail-actions .y4-btn--primary {
  order: -1; /* "Dalej" wyżej, "Wstecz" niżej — primary nad ghost */
  width: 100%;
}
.y4-wizard__rail-actions .y4-btn--ghost {
  width: 100%;
  text-align: center;
}

.y4-wizard__main {
  min-width: 0;
}
.y4-wizard__step {
  padding: 28px;
}
.y4-wizard__step-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 500;
  color: var(--y4-petrol);
}
.y4-wizard__step-hint {
  margin: 0 0 22px;
  color: var(--y4-muted);
  font-size: 14px;
  font-weight: 400;
}

/* Krok 1 (combined L+T) — refaktor UX 2026-05-12:
   LEWA: kalendarz (większy, ~60% szerokości na desktop)
   PRAWA: stack [marina (góra) → godziny (dół)] (~40%)
   Mobile/tablet: stack 1-kolumnowy, kalendarz pierwszy. */
.y4-wizard__step--combined .y4-wizard__combined-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 28px;
  align-items: flex-start;
}
.y4-wizard__combined-col {
  min-width: 0;
}
.y4-wizard__combined-col--calendar {
  /* Kalendarz w karcie z subtelnym tłem żeby wyróżniał się jako główny element. */
}
.y4-wizard__calendar-wrap {
  background: var(--y4-surface);
  border: 1px solid var(--y4-line);
  border-radius: 14px;
  overflow: hidden;
}
.y4-wizard__combined-col--right {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.y4-wizard__sub-section {
  /* Sub-sekcja w prawej kolumnie (marina, godziny) — bez własnego tła,
     bo cała karta combined-step ma już white background. */
}
/* CTA "Dalej" w kroku 1 — pod sekcją Godziny w prawej kolumnie,
   analogicznie do Wstecz/Dalej pod „Podsumowanie rezerwacji" w krokach 2/3.
   Refaktor UX 2026-05-12 — wcześniej button leżał pod gridem (pełna szerokość). */
.y4-wizard__step1-cta {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--y4-line);
  display: flex;
  flex-direction: column;
}
.y4-wizard__step1-cta .y4-btn--primary {
  width: 100%;
}
.y4-wizard__col-title {
  margin: 0 0 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--y4-aqua-text);
  font-weight: 500;
}

/* Lokalizacje */
.y4-wizard__locations {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.y4-wizard__location {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--y4-surface);
  border: 2px solid var(--y4-line);
  border-radius: 12px;
  cursor: pointer;
  transition: 0.18s;
  text-align: left;
  font: inherit;
}
.y4-wizard__location:hover {
  border-color: var(--y4-aqua);
  background: var(--y4-aqua-bg);
}
.y4-wizard__location.is-selected {
  border-color: var(--y4-aqua);
  background: var(--y4-aqua-bg);
}
.y4-wizard__location-info { flex: 1; min-width: 0; }
.y4-wizard__location-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--y4-petrol);
  margin-bottom: 2px;
}
.y4-wizard__location-count {
  font-size: 12px;
  color: var(--y4-muted);
  font-weight: 400;
}
.y4-wizard__location-arrow {
  font-size: 18px;
  color: var(--y4-aqua);
  font-weight: 400;
}

/* Termin (kalendarz | timepicker) */
.y4-wizard__termin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr);
  gap: 18px;
}
.y4-wizard__time-col {
  background: var(--y4-bg);
  border-radius: 12px;
  padding: 18px;
}
.y4-time-picker-block { display: flex; flex-direction: column; gap: 14px; }
.y4-time-picker-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.y4-time-picker-row > label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--y4-muted);
  font-weight: 500;
}

/* Krok 3 — boats grid */
.y4-wizard__boats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* Tablet landscape (iPad land + small laptop) — proporcja kalendarza/prawej.
   Kalendarz dalej po lewej, ale prawa kolumna węższa. */
@media (max-width: 1180px) and (min-width: 901px) {
  .y4-wizard__step--combined .y4-wizard__combined-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 22px;
  }
}

/* Tablet portrait + duży telefon — stack pełnej szerokości,
   kalendarz pierwszy (zgodnie z prośbą "kalendarz po lewej" mapuje się na "kalendarz na górze"
   na wąskich ekranach). */
@media (max-width: 900px) {
  .y4-wizard__step--combined .y4-wizard__combined-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .y4-wizard__combined-col--right {
    gap: 18px;
  }
  .y4-wizard__termin-grid { grid-template-columns: 1fr; }
}

/* Mobile (telefon pionowo) — kompaktowy timepicker + drobniejszy padding. */
@media (max-width: 560px) {
  .y4-wizard__step--combined .y4-wizard__combined-grid {
    gap: 16px;
  }
  .y4-wizard__time-col {
    padding: 14px;
  }
  .y4-wizard__location {
    padding: 12px 14px;
  }
  .y4-wizard__location-name { font-size: 14px; }
}
@media (max-width: 900px) {
  /* 0.8.3 (2026-05-19) — KRYTYCZNY FIX bug specyficzności:
     `.y4-wizard.y4-wizard--rail-right { grid-template-columns: minmax(0,1fr) 320px }`
     (L1375) ma WYŻSZĄ specyficzność (0,2,0) niż samo `.y4-wizard` (0,1,0).
     Bez explicit override mobile dostawał 1fr+320px → __main miał ~80px na 400px
     viewport → tekst "Wybierz łódź" rozjeżdżał się per litera w pionie. */
  .y4-wizard,
  .y4-wizard.y4-wizard--rail-right {
    grid-template-columns: 1fr;
  }
  /* 0.8.3 (2026-05-19) UX refactor: rail NIE jest fixed-bottom drawer.
     - Aside `.y4-wizard__rail` jest w normal block flow (po main content)
     - Sekcja podsumowania (`.y4-wizard__rail-content`) ZAWSZE rozwinięta
     - Toggle button (`.y4-wizard__rail-toggle`) jest osobno fixed-bottom — service
       sticky bar z label "Podsumowanie rezerwacji ↓", klik scrolluje do sekcji.
     Klient widzi sekcję podsumowania jako stały block na stronie + skrót przez
     sticky button. */
  .y4-wizard__rail {
    /* 0.8.5 (2026-05-19) — usunięte białe tło + border + shadow z kontenera
       aside na mobile. Klient widzi `.y4-summary` (petrol box) bezpośrednio,
       jak w kroku 4 (Dane). Wcześniej kontener tworzył "okno w oknie". */
    position: relative;
    margin-top: 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    display: block;
  }
  /* Toggle (sticky bar) wyjmujemy z flow — floating button z marginesem po
     bokach. 0.8.8 (2026-05-19): left/right ustawiane DYNAMICZNIE przez JS
     (setupSummaryVisibilityObserver → alignFloatingCTA) na podstawie
     getBoundingClientRect() z .y4-wizard__main. CSS-owe `left:14px / right:14px`
     to fallback gdy JS nie zdążył (pierwszy frame przed setTimeout). Powód:
     position:fixed używa krawędzi viewportu jako odniesienia, karty łodzi są
     w .y4 wewnątrz Themify container (różny padding zależny od layoutu strony) —
     statyczny CSS nigdy nie dopasuje 1:1. Klient w 0.8.5/0.8.6/0.8.7 wielokrotnie
     widział że CTA jest szersze od kart łodzi pomimo prób match'owania paddingu. */
  .y4-wizard__rail-toggle {
    position: fixed;
    bottom: 16px;
    left: 14px;
    right: 14px;
    z-index: 90;
    display: flex;
    padding: 14px 18px;
    padding-bottom: 14px;
    /* Safe-area dla iPhone home indicator — zwiększamy bottom offset zamiast
       padding-bottom (button ma stałą wysokość 48px). */
    margin-bottom: env(safe-area-inset-bottom);
    background: var(--y4-petrol);
    color: #fff;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 68, 89, 0.28);
  }
  .y4-wizard__rail-toggle:hover,
  .y4-wizard__rail-toggle:focus-visible {
    background: var(--y4-petrol-deep, #00586f);
  }
  .y4-wizard__rail-toggle-text {
    text-align: left;
    flex: 1;
    margin-right: 12px;
  }
  .y4-wizard__rail-toggle-chevron {
    font-size: 14px;
    opacity: 0.92;
  }
  /* Sekcja podsumowania ZAWSZE rozwinięta na mobile (klient widzi pełen content
     w block flow + skrót przez sticky button). 0.8.5: bez paddingu/bg —
     `.y4-summary` (petrol box) ma swoje style; wrapper zostaje przezroczysty. */
  .y4-wizard__rail-content {
    display: block;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  /* 0.8.6 (2026-05-19): wizard + main bez padding-bottom — klient zgłosił
     "bez sensu duży odstęp" przed PODSUMOWANIE REZERWACJI. Floating button
     znika po scroll do summary (JS IntersectionObserver), więc content nie
     musi być chowany pod nim. Minimalny padding na końcu wizard 24px dla
     oddechu między summary CTA a footer strony. */
  .y4-wizard__main,
  .y4-wizard__rail {
    padding-bottom: 0;
  }
  .y4-wizard {
    padding-bottom: 24px;
  }
  /* Wariant summary na mobile — `.y4-summary` ma własny petrol bg + box-shadow
     (jak w kroku 4). Zero override na wrapper / box. */
  .y4-wizard__rail--summary .y4-wizard__rail-content {
    padding: 0;
    background: transparent;
  }
  /* 0.8.6 (2026-05-19): hidden state floating CTA — JS IntersectionObserver
     ukrywa button gdy klient zjedzie do petrol boxa (klient widzi sekcję,
     button niepotrzebny). Smooth fade-out + slide down. */
  .y4-wizard__rail-toggle--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
  }
  .y4-wizard__rail-toggle {
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.15s;
  }
}

/* 0.8.8 (2026-05-19): scroll-margin-top dla wszystkich scroll-targets w pluginu.
   Themify Ultra ma sticky header (~80px), WP admin bar (32px, gdy zalogowany),
   plus oddech. 140px = bezpieczna wartość dla mobile/desktop bez admin bara.
   Klient zgłosił (0.8.7) że 100px było za mało — header nadal zasłaniał stepper.
   Dodany `.y4-stepper` — najważniejszy element do widoczności (pokazuje aktualny
   krok 1-2-3-4-5). JS skrolluje do steppera zamiast wizard__main, żeby klient
   widział pełen kontekst po klik Dalej/Cofnij.
   Aplikuje się dla:
     - scrollIntoView() w handleAction case 'wizard-goto' (auto-scroll po kroku)
     - scrollIntoView() w case 'scroll-to-summary' (klik floating CTA)
     - hash-link (`#fragment` w URL — np. mail z link do panelu klienta)
     - browser back button restore scroll
   Reguła nie blokuje desktop (header nie sticky tam) — element po prostu ma
   margin top scroll context, browser to ignoruje gdy nie scrolluje. */
.y4-wrapper,
.y4-wrapper .y4,
.y4-wrapper .y4-stepper,
.y4-wrapper .y4-wizard,
.y4-wrapper .y4-wizard__main,
.y4-wrapper .y4-wizard__step,
.y4-wrapper .y4-wizard__rail,
.y4-wrapper .y4-summary,
.y4-wrapper .y4-summary--rail,
.y4-wrapper .y4-grid-step1,
.y4-wrapper .y4-grid-step2,
.y4-wrapper .y4-card,
.y4-wrapper .y4p-card,
.y4-wrapper [id],
.y4-wrapper [data-y4-anchor] {
  scroll-margin-top: 140px;
}
@media (max-width: 600px) {
  /* 0.8.7 (2026-05-19): wizard__step traci wrapper-card look na mobile.
     Klient zgłosił że karty łodzi są węższe niż summary box i floating CTA.
     Problem: wizard__step był `<div class="y4-card y4-wizard__step">` — outer
     card padding 16px po bokach ścieśniał karty łodzi do wewnątrz.
     Fix: na mobile usuwamy bg/border/shadow/padding boczny — tytuł "Wybierz
     łódź" i hint są bezpośrednio w block flow, karty łodzi sięgają krawędzi
     `.y4-wizard__main` (= 14px od viewport edge). Szerokość: karta łodzi =
     summary box = floating CTA. */
  .y4-wizard__step {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .y4-wizard__step-title { font-size: 17px; padding: 0 4px; margin-bottom: 4px; }
  .y4-wizard__step-hint { padding: 0 4px; margin-bottom: 16px; }
  .y4-wizard__location { padding: 12px 14px; gap: 10px; }
  .y4-wizard__location-name { font-size: 14px; }
}
/* FIND-077 (Sprint 7): bardzo wąskie urządzenia (iPhone SE 1st gen, Galaxy S8 mini ~360px).
   Zmniejszone padding step 1, mniejszy stepper, fluid font dla tytułów. */
@media (max-width: 380px) {
  .y4-wizard__step { padding: 14px 10px; }
  .y4-wizard__step-title { font-size: 16px; }
  .y4-wizard__step-hint { font-size: 13px; margin-bottom: 16px; }
  .y4-wizard__combined-grid { gap: 14px; }
  .y4-wizard__rail { padding: 10px; }
  .y4-field__label { font-size: 13px; }
  .y4-btn { padding: 10px 14px; font-size: 14px; }
}

/* Stepper — dodaj klikalność dla zatwierdzonych kroków */
.y4-step.is-clickable {
  cursor: pointer;
  transition: 0.15s;
}
.y4-step.is-clickable:hover {
  background: var(--y4-aqua-bg);
}

/* Komunikat błędu inline */
.y4-error-msg {
  background: #fce0e5;
  color: var(--y4-error);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  margin-top: 6px;
}

/* ===== Custom time picker ===== */
.y4-timepicker {
  position: relative;
}
.y4-timepicker__display {
  width: 100%;
  padding: 11px 14px;
  background: var(--y4-surface);
  border: 1px solid var(--y4-line);
  border-radius: 10px;
  font-size: 14px;
  color: var(--y4-ink);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.y4-timepicker__display:hover { border-color: var(--y4-aqua-soft); }
.y4-timepicker__display.is-open { border-color: var(--y4-aqua); box-shadow: 0 0 0 3px var(--y4-aqua-soft); }
.y4-timepicker__display::after {
  content: '⌄';
  font-size: 18px;
  color: var(--y4-muted);
  margin-left: 8px;
}
.y4-timepicker__panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--y4-aqua-soft);
  border-radius: 10px;
  padding: 6px;
  z-index: 50;
  box-shadow: 0 12px 30px rgba(0, 68, 89, 0.18);
  max-height: 240px;
  overflow-y: auto;
}
.y4-timepicker.is-open .y4-timepicker__panel { display: block; }
.y4-timepicker__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 400;
  color: var(--y4-ink);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.y4-timepicker__option:hover { background: var(--y4-aqua-bg); color: var(--y4-petrol); }
.y4-timepicker__option.is-selected { background: var(--y4-petrol); color: #fff; font-weight: 500; }
.y4-timepicker__option.is-disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.y4-timepicker__option.is-disabled:hover { background: transparent; color: var(--y4-ink); }


/* ============================================================
   ETAP 7 — panel klienta + kiosk
   ============================================================ */

/* Schowaj h1 z motywu (Twenty Twenty-Five renderuje 'Panel klienta'
   przez page title — my mamy własny header, więc duplikat ukryć). */
.page-template-default .entry-title:has(+ .entry-content .y4-portal),
body:has(.y4-portal) .wp-block-post-title,
body:has(.y4-portal) .entry-title {
  display: none !important;
}

.y4-portal { padding: 0; }

.y4-portal *, .y4-portal *::before, .y4-portal *::after { box-sizing: border-box; }

/* Header */
.y4-portal .y4p-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  margin-bottom: 22px;
  background: var(--y4-surface);
  border-radius: 14px;
  box-shadow: var(--y4-shadow);
}
.y4-portal .y4p-header--kiosk {
  background: linear-gradient(135deg, var(--y4-petrol) 0%, var(--y4-petrol-soft) 100%);
  color: #fff;
}
.y4-portal .y4p-header__logo {
  height: 38px !important;
  width: auto !important;
  max-width: 180px !important;
  flex-shrink: 0;
}
.y4-portal .y4p-header__logo--white { filter: brightness(0) invert(1); }
.y4-portal .y4p-header__title {
  font-size: 20px;
  font-weight: 500;
  color: var(--y4-petrol);
  margin: 0;
  line-height: 1.2;
}
.y4-portal .y4p-header--kiosk .y4p-header__title { color: #fff; }
.y4-portal .y4p-header__sub {
  font-size: 13px;
  color: var(--y4-muted);
  margin-top: 4px;
}
.y4-portal .y4p-header--kiosk .y4p-header__sub { color: var(--y4-aqua-light); }
.y4-portal .y4p-header__text { flex: 1 1 auto; min-width: 0; }
.y4-portal .y4p-header__logout {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.y4-portal .y4p-header__logout:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); }
.y4-portal .y4p-header__logout:focus-visible { outline: 2px solid var(--y4-aqua); outline-offset: 2px; }
.y4-portal .y4p-header__logout-ic { font-size: 16px; line-height: 1; transform: rotate(90deg); }
/* 2026-06-16: akcje w górnym pasku — „← Panel" obok „Wyloguj" w widoku szkolenia. */
.y4-portal .y4p-header__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.y4-portal .y4p-header__back { white-space: nowrap; }
@media (max-width: 600px) {
  .y4-portal .y4p-header { padding: 14px 16px; gap: 10px; }
  .y4-portal .y4p-header__logo { max-width: 120px !important; }
  .y4-portal .y4p-header__logout { padding: 8px 10px; }
  .y4-portal .y4p-header__logout-lbl { display: none; }
  .y4-portal .y4p-header__actions { gap: 6px; }
}

/* 2026-06-16 (sprawa 2): ekran akceptacji warunków najmu i szkolenia przed kodem. */
.y4-portal .y4p-terms { text-align: left; max-width: 580px; margin: 0 auto; }
.y4-portal .y4p-terms__box {
  background: var(--y4-bg, #f9f9f9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 16px 0;
}
.y4-portal .y4p-terms__list { margin: 8px 0 0; padding-left: 20px; line-height: 1.55; }
.y4-portal .y4p-terms__list li { margin-bottom: 6px; }
.y4-portal .y4p-terms__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 18px;
  font-weight: 600;
  cursor: pointer;
}
.y4-portal .y4p-terms__check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
/* 2026-06-16: podpowiedź 360° pod odtwarzaczem szkolenia. */
.y4-portal .y4p-360-hint { margin: 8px 0 0; font-size: 13px; color: var(--y4-muted); text-align: center; }

/* Cards */
.y4-portal .y4p-card {
  background: var(--y4-surface);
  border: 1px solid var(--y4-line);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--y4-shadow);
}
.y4-portal .y4p-h1 { font-size: 28px; font-weight: 500; color: var(--y4-petrol); margin: 0 0 6px; }
.y4-portal .y4p-h2 { font-size: 18px; font-weight: 500; color: var(--y4-petrol); margin: 0 0 14px; }
.y4-portal .y4p-h3 {
  font-size: 13px; font-weight: 500; color: var(--y4-petrol);
  text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px;
}
.y4-portal .y4p-muted { color: var(--y4-muted); font-size: 14px; }
.y4-portal .y4p-error {
  background: #fce0e5; color: var(--y4-error);
  padding: 10px 14px; border-radius: 8px;
  margin-bottom: 14px; font-size: 13px;
}

/* Form / login */
.y4-portal .y4p-login { max-width: 480px; margin: 30px auto; }
.y4-portal .y4p-field { margin-bottom: 14px; }
.y4-portal .y4p-field label {
  display: block; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--y4-muted); margin-bottom: 6px;
}
.y4-portal .y4p-field input {
  width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit;
  background: var(--y4-surface); border: 1px solid var(--y4-line); border-radius: 10px;
  color: var(--y4-ink); transition: 0.15s;
}
.y4-portal .y4p-field input:focus {
  outline: none; border-color: var(--y4-aqua);
  box-shadow: 0 0 0 3px var(--y4-aqua-soft);
}
.y4-portal .y4p-field input.is-invalid { border-color: var(--y4-error); }
.y4-portal .y4p-err { font-size: 12px; color: var(--y4-error); margin-top: 4px; }

.y4-portal .y4p-btn {
  padding: 13px 24px; border-radius: 10px;
  font-size: 15px; font-weight: 500; font-family: inherit;
  cursor: pointer; border: none; transition: 0.15s;
}
.y4-portal .y4p-btn--primary {
  background: var(--y4-petrol); color: #fff; width: 100%;
}
.y4-portal .y4p-btn--primary:hover { background: var(--y4-aqua); color: var(--y4-petrol); }
.y4-portal .y4p-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.y4-portal .y4p-btn--ghost {
  background: transparent; color: var(--y4-petrol);
  border: 1px solid var(--y4-line);
}
.y4-portal .y4p-btn--ghost:hover { background: var(--y4-bg); }
.y4-portal .y4p-btn--danger {
  border-color: #cc5544; color: #cc5544;
}
.y4-portal .y4p-btn--danger:hover {
  background: #ffe4e1; color: #a33a2c;
}

/* Self-service cancel section w karcie rezerwacji */
.y4-portal .y4p-booking__cancel {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--y4-line);
  display: flex; justify-content: flex-end;
}

/* Dashboard */
.y4-portal .y4p-dashboard { max-width: 920px; margin: 0 auto; }
.y4-portal .y4p-actions-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; padding: 0 4px;
  flex-wrap: wrap; gap: 10px;
}
.y4-portal .y4p-greeting { color: var(--y4-petrol); font-size: 15px; }
.y4-portal .y4p-greeting strong { color: var(--y4-aqua-text); }
.y4-portal .y4p-empty {
  text-align: center; color: var(--y4-muted); padding: 40px;
}

/* Booking card */
.y4-portal .y4p-booking { padding: 20px 22px; }
.y4-portal .y4p-booking__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--y4-line);
  margin-bottom: 12px;
}
.y4-portal .y4p-booking__code {
  font-size: 16px; font-weight: 500; color: var(--y4-petrol);
  font-family: 'Clash Display', monospace;
  letter-spacing: 0.02em;
}
.y4-portal .y4p-booking__boat { font-size: 14px; color: var(--y4-ink); margin-top: 4px; }
.y4-portal .y4p-booking__price {
  font-size: 18px; font-weight: 500; color: var(--y4-aqua-text);
  white-space: nowrap;
}
.y4-portal .y4p-booking__meta {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--y4-ink);
}
.y4-portal .y4p-booking__meta .y4p-muted { font-size: 13px; }
.y4-portal .y4p-booking__docs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--y4-line-2);
}
.y4-portal .y4p-doc {
  padding: 8px 14px; background: var(--y4-aqua-bg); color: var(--y4-petrol);
  border-radius: 999px; text-decoration: none;
  font-size: 13px; font-weight: 500;
  /* 0.8.22 (tester): .y4p-doc to teraz <button> (lightbox zamiast nowej karty) —
     reset stylów UA buttona, żeby wyglądał jak dotychczasowy pill-link. */
  border: 0; cursor: pointer; font-family: inherit; line-height: inherit;
}
.y4-portal .y4p-doc:hover { background: var(--y4-aqua-soft); color: var(--y4-petrol); }
.y4-portal .y4p-doc:focus-visible { outline: 2px solid var(--y4-aqua); outline-offset: 2px; }

/* ========== Lightbox dokumentów (0.8.22, tester) ==========
   PDF (umowa/faktura) w overlayu tej samej karty — panel działa fullscreen na
   tablecie na keji, nowa karta nie ma tam drogi powrotu. */
.y4p-lightbox {
  position: fixed; inset: 0;
  z-index: 999999; /* nad sticky headerem Themify i admin barem WP */
  background: rgba(0, 35, 45, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.y4p-lightbox__dialog {
  display: flex; flex-direction: column;
  width: min(960px, 100%);
  height: 100%;
  max-height: calc(100vh - 36px);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 20, 28, 0.45);
}
.y4p-lightbox__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  background: var(--y4-petrol, #004459);
  color: #fff;
  flex-shrink: 0;
}
.y4p-lightbox__title {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.y4p-lightbox__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.y4p-lightbox__open {
  color: #9fdde2; font-size: 12px; text-decoration: underline;
}
.y4p-lightbox__open:hover { color: #fff; }
.y4p-lightbox__close {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  /* Touch target ≥44px (tablet) — wyrównane paddingiem, nie wysokością tekstu. */
  min-height: 36px;
}
.y4p-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }
.y4p-lightbox__close:focus-visible { outline: 2px solid #9fdde2; outline-offset: 2px; }
.y4p-lightbox__frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #525659; /* tło natywnego viewera PDF — bez białego flasha */
}
@media (max-width: 600px) {
  /* Mobile/tablet pion: pełny ekran — maksimum miejsca na dokument. */
  .y4p-lightbox { padding: 0; }
  .y4p-lightbox__dialog { max-height: 100vh; border-radius: 0; }
  .y4p-lightbox__open { display: none; } /* na tablecie kiosk nowa karta = pułapka */
}
.y4-portal .y4p-booking__note {
  margin-top: 12px; padding: 10px 14px;
  background: var(--y4-warn-bg); border-left: 3px solid var(--y4-warn);
  border-radius: 6px;
  font-size: 13px; color: var(--y4-warn);
}

/* ========== Status zaliczki w panelu klienta (0.7.7) ========== */
.y4-portal .y4p-deposit-status {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--y4-warn-bg);
  border-left: 4px solid var(--y4-warn);
  border-radius: 8px;
  font-size: 14px;
  color: #5c3f00;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.y4-portal .y4p-deposit-status > div { flex: 1; min-width: 220px; line-height: 1.45; }
.y4-portal .y4p-deposit-status .y4p-btn { flex-shrink: 0; }
.y4-portal .y4p-deposit-status--paid {
  background: rgba(31, 138, 114, 0.1);
  border-left-color: var(--y4-success);
  color: #0a4d3f;
}
.y4-portal .y4p-deposit-status--overdue {
  background: #ffe7e6;
  border-left-color: #cc1f1f;
  color: #7a1414;
}
.y4-portal .y4p-deposit-status--overdue a { color: #7a1414; font-weight: 600; }

/* Training */
.y4-portal .y4p-training { max-width: 1100px; margin: 0 auto; }
.y4-portal .y4p-training__progress { margin-bottom: 18px; }
.y4-portal .y4p-training__progress-bar {
  height: 8px; background: var(--y4-line);
  border-radius: 999px; overflow: hidden;
}
.y4-portal .y4p-training__progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--y4-aqua), var(--y4-aqua-light));
  transition: width 0.3s;
}
.y4-portal .y4p-training__progress-text {
  font-size: 13px; color: var(--y4-muted);
  margin-top: 6px; text-align: center;
}
.y4-portal .y4p-training__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px; align-items: start;
}
@media (max-width: 900px) {
  .y4-portal .y4p-training__layout { grid-template-columns: 1fr; }
}
.y4-portal .y4p-training__player {
  background: var(--y4-surface); padding: 22px;
  border-radius: 14px; box-shadow: var(--y4-shadow);
}
.y4-portal .y4p-yt-wrapper {
  position: relative; padding-bottom: 56.25%; height: 0;
  overflow: hidden; border-radius: 10px; background: #000;
}
.y4-portal .y4p-yt-wrapper iframe,
.y4-portal .y4p-yt-wrapper > div {
  position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
}
/* 0.8.35: przezroczysta nakładka łapiąca przeciąganie 360° (sterujemy kamerą sami przez
   setSphericalProperties — YT embed nie podpina natywnego draga). Zostawia dolny pasek
   (kontrolki YT) klikalny. touch-action:none — przeciąganie palcem nie scrolluje strony. */
.y4-portal .y4p-yt-wrapper .y4p-360-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 46px;
  width: auto !important; height: auto !important;
  z-index: 5; cursor: grab; background: transparent; touch-action: none;
}
.y4-portal .y4p-watched {
  margin-top: 14px; padding: 10px 14px;
  background: var(--y4-aqua-bg); border-radius: 8px;
  font-size: 13px; color: var(--y4-petrol);
}
.y4-portal .y4p-watched--ok {
  background: #d4f4ec;
  color: #0d5c4a;
}
.y4-portal .y4p-completed-banner {
  margin-top: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #d4f4ec 0%, #c8eaee 100%);
  border-left: 4px solid #1f8a72;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.y4-portal .y4p-completed-banner__msg {
  flex: 1 1 240px;
  font-size: 14px;
  color: #0d5c4a;
  line-height: 1.4;
}
.y4-portal .y4p-completed-banner__msg strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
  color: #1f8a72;
}
.y4-portal .y4p-completed-banner__actions {
  flex-shrink: 0;
}

.y4-portal .y4p-training__sidebar {
  background: var(--y4-surface); padding: 18px;
  border-radius: 14px; box-shadow: var(--y4-shadow);
}
.y4-portal .y4p-vid-item {
  display: flex; gap: 12px; padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--y4-line); border-radius: 10px;
  cursor: pointer; transition: 0.15s;
}
.y4-portal .y4p-vid-item:not(.is-locked):hover {
  background: var(--y4-aqua-bg); border-color: var(--y4-aqua);
}
.y4-portal .y4p-vid-item__num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--y4-bg); color: var(--y4-muted);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 500; flex-shrink: 0;
}

/* A-Frame VR fullscreen toggle (poprawka mobile, 2026-05-06).
   Pokazuje się w prawym dolnym rogu sceny VR — klik włącza fullscreen, klient
   może oglądać 360° w landscape. */
.y4p-vr-fullscreen {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s;
}
.y4p-vr-fullscreen:hover { background: rgba(0, 0, 0, 0.85); }
.y4-portal .y4p-vid-item.is-completed { background: #e8f9f3; border-color: #b8e8d6; }
.y4-portal .y4p-vid-item.is-completed .y4p-vid-item__num { background: var(--y4-success); color: #fff; }
.y4-portal .y4p-vid-item.is-current { background: var(--y4-aqua-bg); border-color: var(--y4-aqua); }
.y4-portal .y4p-vid-item.is-current .y4p-vid-item__num { background: var(--y4-aqua); color: #fff; }
.y4-portal .y4p-vid-item.is-locked { opacity: 0.5; cursor: not-allowed; }
.y4-portal .y4p-vid-item__title { font-size: 13px; font-weight: 500; color: var(--y4-petrol); }
.y4-portal .y4p-vid-item__status { font-size: 11px; color: var(--y4-muted); margin-top: 2px; }

/* Lock code reveal */
.y4-portal .y4p-code { max-width: 600px; margin: 30px auto; text-align: center; }
.y4-portal .y4p-code__success {
  width: 80px; height: 80px; margin: 0 auto 20px;
  background: #d4f4ec; color: var(--y4-success);
  border-radius: 50%; font-size: 44px;
  display: grid; place-items: center;
}
.y4-portal .y4p-code__panel {
  background: linear-gradient(135deg, var(--y4-petrol) 0%, var(--y4-petrol-soft) 100%);
  color: #fff; border-radius: 18px;
  padding: 30px; margin: 22px 0;
  box-shadow: var(--y4-shadow-lg);
}
.y4-portal .y4p-code__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--y4-aqua-light);
}
.y4-portal .y4p-code__value {
  font-size: 56px; font-weight: 600; letter-spacing: 0.2em;
  color: #fff; margin: 12px 0;
  font-family: 'Clash Display', monospace;
}
.y4-portal .y4p-code__box { font-size: 14px; color: var(--y4-aqua-light); margin-bottom: 4px; }
.y4-portal .y4p-code__boat { font-size: 13px; color: rgba(255,255,255,0.75); }

/* Responsive */
@media (max-width: 600px) {
  .y4-portal .y4p-header { padding: 16px 18px; gap: 14px; }
  .y4-portal .y4p-header__logo { height: 30px !important; }
  .y4-portal .y4p-header__title { font-size: 17px; }
  .y4-portal .y4p-booking__head { flex-direction: column; }
}

/* ========== Wybór płatności (zaliczka, 0.7.7) ========== */
/* Renderowany w renderStep2 między "Suma" a przyciskiem submit-booking.
   Klient wybiera między pełną płatnością a zaliczką Y%. */
.y4-payment-choice {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.y4-payment-choice__title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--y4-aqua-light);
  opacity: 0.75;
  margin-bottom: 10px;
}
.y4-payment-choice__option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  margin-bottom: 8px;
}
.y4-payment-choice__option:last-child { margin-bottom: 0; }
.y4-payment-choice__option:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
}
.y4-payment-choice__option.is-selected {
  background: rgba(70, 192, 201, 0.18);
  border-color: var(--y4-aqua);
}
.y4-payment-choice__option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--y4-aqua);
  flex-shrink: 0;
}
.y4-payment-choice__body { flex: 1; min-width: 0; }
.y4-payment-choice__heading {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.y4-payment-choice__detail {
  font-size: 12.5px;
  color: var(--y4-aqua-light);
  opacity: 0.9;
  line-height: 1.45;
}

/* ============================================================
   FIND-RESP-009 (2026-05-19): :focus-visible parity z :hover dla WCAG 2.4.7
   + touch UX. Wszystkie elementy interaktywne pokazują visible focus state
   po Tab (klawiatura, bluetooth) i bez :hover na touchscreen.
   ============================================================ */
.y4-cal__day:focus-visible:not(:disabled),
.y4-cal__day.is-available:focus-visible,
.y4-cal__day.is-partial:focus-visible {
  outline: 2px solid var(--y4-aqua);
  outline-offset: 2px;
  z-index: 1;
}
.y4 .y4-cal__nav:focus-visible,
.y4-cal__nav:focus-visible {
  background: var(--y4-aqua-bg);
  outline: 2px solid var(--y4-aqua);
  outline-offset: 2px;
}
.y4-btn:focus-visible,
.y4-btn--primary:focus-visible,
.y4-btn--ghost:focus-visible {
  outline: 2px solid var(--y4-aqua);
  outline-offset: 2px;
}
.y4-btn--primary:focus-visible {
  box-shadow: 0 8px 20px rgba(70, 192, 201, 0.4);
}
.y4-boat:focus-visible,
.y4-map:focus-visible {
  outline: 2px solid var(--y4-aqua);
  outline-offset: 2px;
  border-color: var(--y4-aqua);
}
.y4-timepicker__option:focus-visible {
  background: var(--y4-bg);
  outline: 2px solid var(--y4-aqua);
  outline-offset: -2px;
}
.y4-status__btn:focus-visible {
  outline: 2px solid var(--y4-aqua);
  outline-offset: 2px;
}
.y4-payment-choice__option:focus-within {
  background: rgba(70, 192, 201, 0.18);
  border-color: var(--y4-aqua);
  outline: 2px solid var(--y4-aqua);
  outline-offset: 2px;
}

/* FIND-RESP-013 (2026-05-19): time picker option ≥44px na desktop (mobile
   używa native <select> przez hybrid w app.js). */
.y4-timepicker__option {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ============================================================
   0.8.2 (2026-05-19): defensywne wymuszenia width na wąskich mobile.
   Themify Ultra (i niektóre inne motywy) opakowują shortcode w `flex/grid`
   parent z dziwnymi rules — bez explicit `width: 100%` content może się
   ściesnić do `max-content` najwęższego inline element (efekt: tekst per
   litera w pionie). Plus reset writing-mode + word-break dla safety.
   ============================================================ */
.y4-wrapper,
.y4-wrapper .y4,
.y4-wrapper .y4 .y4-wizard,
.y4-wrapper .y4 .y4-wizard__main,
.y4-wrapper .y4 .y4-wizard__step,
.y4-wrapper .y4 .y4-card,
.y4-wrapper .y4 .y4-grid-step1,
.y4-wrapper .y4 .y4-grid-step2,
.y4-wrapper .y4.y4-portal,
.y4-wrapper .y4.y4-portal .y4p-header,
.y4-wrapper .y4.y4-portal .y4p-header__text,
.y4-wrapper .y4.y4-portal .y4p-card,
.y4-wrapper .y4.y4-portal .y4p-login,
.y4-wrapper .y4.y4-portal .y4p-tabs {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  writing-mode: horizontal-tb;
  box-sizing: border-box;
}
.y4-wrapper .y4 .y4-wizard__step-title,
.y4-wrapper .y4 .y4-wizard__step-hint,
.y4-wrapper .y4 .y4-card__title,
.y4-wrapper .y4 .y4-summary__title,
.y4-wrapper .y4 h1, .y4-wrapper .y4 h2, .y4-wrapper .y4 h3, .y4-wrapper .y4 h4,
.y4-wrapper .y4 p,
.y4-wrapper .y4.y4-portal .y4p-header__title,
.y4-wrapper .y4.y4-portal .y4p-header__sub,
.y4-wrapper .y4.y4-portal .y4p-h1,
.y4-wrapper .y4.y4-portal .y4p-h2,
.y4-wrapper .y4.y4-portal .y4p-h3 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  writing-mode: horizontal-tb;
}

/* FIND-RESP-001 (2026-05-19): A-Frame VR gyroscope permission prompt (iOS 13+).
   Pojawia się przy pierwszym dotyku sceny VR. */
.y4p-gyro-prompt {
  position: absolute;
  inset: 0;
  background: rgba(0, 68, 89, 0.88);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: y4-fadein 0.2s ease;
}
.y4p-gyro-prompt__box {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 68, 89, 0.4);
}
.y4p-gyro-prompt__icon {
  font-size: 44px;
  margin-bottom: 8px;
}
.y4p-gyro-prompt h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--y4-petrol);
}
.y4p-gyro-prompt p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--y4-muted);
  line-height: 1.45;
}
.y4p-gyro-prompt__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.y4p-gyro-prompt__btns .y4p-btn {
  min-height: 44px;
}

/* FIND-RESP-020 (2026-05-19): error UI gdy A-Frame / YouTube CDN nie ładuje się. */
.y4p-player-error {
  padding: 40px 24px;
  text-align: center;
  background: var(--y4-warn-bg);
  border-left: 4px solid var(--y4-warn);
  border-radius: 10px;
  color: #5c3f00;
}
.y4p-player-error p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
}
.y4p-player-error p:last-child { margin: 0; }

/* FIND-RESP-017 (2026-05-19): native <select> dla mobile time picker.
   Brand styling w spójnym tonie z custom dropdown. */
.y4-timepicker-native {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 16px; /* ≥16px — chroni iOS Safari przed auto-zoom na focus */
  font-family: inherit;
  color: var(--y4-petrol);
  background: #fff;
  border: 1.5px solid var(--y4-line);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23004459' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.y4-timepicker-native:focus-visible {
  outline: 2px solid var(--y4-aqua);
  outline-offset: 2px;
  border-color: var(--y4-aqua);
}