/* Rezerwacja i konto klienta (Figma: Rezerwuj szkolenie, Płatność, rejsy gotowe, Moje konto). Tokeny z site.css. */
[hidden] { display: none !important; }
.booking-page { display: grid; grid-template-columns: minmax(0, 800px) 378px; justify-content: space-between; column-gap: var(--space-6); align-items: start; padding-top: var(--space-5); padding-bottom: var(--space-9); }
.booking-main { min-width: 0; }
.booking-aside { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: var(--space-4); }

.booking-head { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); }
.booking-head h1 { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.btn-back { display: inline-flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-full); background: var(--primary-100); color: var(--primary-700); font-size: var(--fs-body-3); font-weight: 700; text-decoration: none; }
.btn-back::before { content: "←"; font-size: 16px; }
.btn-back:hover { background: var(--primary-200); color: var(--navy-600); }

/* Kroki rezerwacji */
.stepper { display: flex; align-items: flex-start; margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.stepper li { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 32px; font-size: 10px; font-weight: 700; line-height: 1.4; color: var(--gray-500); }
.stepper li:first-child { align-items: flex-start; }
.stepper li:last-child { align-items: flex-end; }
.stepper li span { white-space: nowrap; }
.stepper .stepper__trail { flex: 1; height: 32px; width: auto; }
.stepper .stepper__trail::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--gray-100); }
.stepper__dot { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.stepper__dot::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--gray-500); }
.stepper .is-current { color: var(--navy-600); }
.stepper .is-current .stepper__dot { border-radius: var(--radius-full); background: var(--primary-500); box-shadow: 0 0 0 4px var(--primary-100); }
.stepper .is-current .stepper__dot::before { width: 10px; height: 10px; background: var(--white); }
.stepper .is-done { color: var(--navy-600); }
.stepper .is-done .stepper__dot { border-radius: var(--radius-full); background: var(--primary-200); }
.stepper .is-done .stepper__dot::before { width: 14px; height: 8px; border-radius: 0; background: none; border: solid var(--primary-700); border-width: 0 0 2.5px 2.5px; transform: translate(1px, -2px) rotate(-45deg); }

.booking-section { padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--gray-150); }
.booking-section:last-child { border-bottom: 0; }
.booking-section__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.booking-section__title { margin: 0; font-size: var(--fs-h5); font-weight: 700; line-height: 1.2; }
.booking-lead { margin: 0 0 var(--space-4); font-size: var(--fs-body-3); color: var(--gray-500); }
.link-btn { padding: 0; border: 0; background: none; color: var(--error-600); font-size: var(--fs-body-3); font-weight: 700; cursor: pointer; }
.link-btn--blue { color: var(--primary-700); }
.link-btn:hover { text-decoration: underline; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.form-grid .field--wide { grid-column: 1 / -1; }
.form-grid .field { margin-bottom: var(--space-3); }
.field .select { min-height: 48px; border-radius: var(--radius-lg); border: var(--border) solid var(--gray-150); font-size: var(--fs-body-3); }
.field-hint { font-size: var(--fs-small); color: var(--gray-500); }
.radio-row { display: flex; gap: var(--space-4); min-height: 48px; align-items: center; }
.radio-row label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-3); font-weight: 500; }
.radio-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary-700); }
.check-list { display: flex; flex-direction: column; gap: var(--space-3); }
.check--body { font-size: var(--fs-body-3); }
.alert { margin: 0 0 var(--space-4); padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--fs-body-3); font-weight: 700; }
.alert--error { background: #fdecec; color: var(--danger); }
.alert--info { background: var(--orange-100); color: var(--orange-text); }
.alert--ok { background: var(--success-100); color: #04704f; }
.alert ul { margin: 4px 0 0; padding-left: 18px; font-weight: 500; }

.count-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.count-row .select { width: auto; min-width: 140px; }

/* Karta imprezy (podsumowanie rejsu) */
.trip { display: flex; align-items: stretch; border: 1px solid var(--gray-50); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.trip__image { position: relative; flex: none; width: 300px; min-height: 160px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--primary-400), var(--primary-700) 70%, var(--navy-600)); }
.trip__image--training { background: linear-gradient(160deg, var(--orange-200), var(--orange-600) 70%, var(--navy-600)); }
.trip__badge { position: absolute; left: 16px; bottom: 16px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--gray-50); color: var(--gray-500); font-size: var(--fs-body-3); font-weight: 700; }
.trip__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.trip__body p { margin: 0; }
.trip__title { margin: 0; font-size: var(--fs-h4); font-weight: 500; line-height: 1.2; }
.trip__sub { font-size: var(--fs-body-3); color: var(--navy-600); }
.trip--compact { flex-direction: column; }
.trip--compact .trip__image { width: 100%; min-height: 96px; }
.trip--compact .trip__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.trip--compact .trip__title { font-size: var(--fs-body-2); font-weight: 700; }

/* Uczestnik w podsumowaniu */
.person { padding: var(--space-4) 0; border-bottom: 1px solid var(--gray-50); }
.person__title { margin: 0 0 var(--space-3); font-size: var(--fs-body-2); font-weight: 700; }
.rows { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.rows div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.rows dt { font-size: var(--fs-small); color: var(--gray-500); }
.rows dd { margin: 0; font-size: var(--fs-body-3); font-weight: 700; text-align: right; }
.rows dd.big { font-size: var(--fs-h5); }

/* Płatność (kolumna) */
.paybox { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-5); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); background: var(--white); }
.paybox__title { margin: 0 0 var(--space-2); font-size: var(--fs-h5); font-weight: 700; line-height: 1.4; }
.paybox .rows dd { font-size: var(--fs-h5); }
.paybox .rows dd.total { font-size: var(--fs-h4); font-weight: 600; }
.paybox .rows dd.small { font-size: var(--fs-body-3); }
.paybox__sep { width: 100%; height: 0; margin: var(--space-1) 0; border: 0; border-top: 1px solid var(--gray-150); }
.paybox__note { margin: 0; font-size: var(--fs-small); color: var(--gray-500); }
.paybox__or { margin: var(--space-2) 0 0; font-size: var(--fs-body-3); font-weight: 700; text-align: center; }
.paybox .btn--light { align-self: center; }
.btn--success { background: var(--success-600); color: var(--white); }
.btn--success:hover { background: #04704f; color: var(--white); }
.btn--outline { background: var(--primary-100); color: var(--primary-700); border: 1px solid var(--primary-700); }
.btn--outline:hover { background: var(--primary-200); color: var(--navy-600); }

.bank { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--gray-50); font-size: var(--fs-body-3); }
.bank dt { font-size: var(--fs-small); color: var(--gray-500); }
.bank dd { margin: 0 0 var(--space-2); font-weight: 700; word-break: break-word; }
.bank dd:last-child { margin-bottom: 0; }
.paybox__sub { margin: 0; font-size: var(--fs-body-2); font-weight: 700; }
.bank-eur { display: flex; flex-direction: column; gap: var(--space-3); }
.bank-eur__qr { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin: 0; }
.bank-eur__qr svg { width: 160px; height: 160px; }
.bank-eur__qr figcaption { font-size: var(--fs-small); color: var(--gray-500); }

/* Gotowe */
.done { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; text-align: center; }
.done__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--success-100); }
.done__icon::before { content: ""; width: 16px; height: 9px; border: solid var(--success-600); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.done__icon--wait { background: var(--orange-100); }
.done__icon--wait::before { width: 14px; height: 14px; border: 3px solid var(--orange-600); border-radius: var(--radius-full); transform: none; }
.done h2 { margin: 0; font-size: var(--fs-h2); font-weight: 500; }
.done__lead { margin: 0; font-size: var(--fs-body-1); font-weight: 600; }
.done__hold { margin: 0; color: var(--success-600); font-weight: 700; }
.done p { margin: 0; max-width: 560px; }
.done__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.done__contacts a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--navy-600); font-weight: 700; text-decoration: none; }

/* Konto */
.account { display: grid; grid-template-columns: 226px minmax(0, 800px); justify-content: center; gap: var(--space-8); padding: var(--space-8) 0 var(--space-9); }
/* Ta sama siatka na każdej podstronie konta, żeby menu nie przeskakiwało; wąskie strony (formularze) zwężają tylko treść */
@media (min-width: 1200px) { .account:not(.account--wide) > :last-child { max-width: 500px; } }
.account-nav { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.account-nav li + li { border-top: 1px solid var(--gray-150); }
.account-nav a, .account-nav button { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) 0; border: 0; background: none; color: var(--navy-600); font-size: var(--fs-body-2); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.account-nav a[aria-current="page"] { font-weight: 700; }
.account-nav a[aria-current="page"]::after { content: "→"; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--primary-100); color: var(--primary-700); font-size: 13px; }
.account-nav__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--primary-100); }
.account-nav__icon img, .account-nav__icon svg { width: 16px; height: 16px; }
.account h1 { margin-bottom: var(--space-4); font-size: var(--fs-h3); font-weight: 500; }

.res-list { display: flex; flex-direction: column; gap: var(--space-3); }
.res { display: flex; align-items: stretch; border: 1px solid var(--gray-150); border-radius: var(--radius-lg); background: var(--white); }
.res__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.res__main p { margin: 0; }
.res__title { margin: 0; font-size: var(--fs-h5); font-weight: 500; }
.res__side { flex: none; width: 272px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--space-2); padding: var(--space-4); border-left: 1px solid var(--gray-150); text-align: right; }
.res__side p { margin: 0; font-size: var(--fs-body-3); }
.res__price strong { font-size: var(--fs-h5); }
.res__due strong { color: var(--navy-600); }
.res__due .late, .sched .late { color: var(--error-600); font-weight: 700; }
.res-group { margin: var(--space-4) 0 var(--space-3); font-size: var(--fs-h4); }
.res__chip { display: inline-flex; margin-left: var(--space-2); padding: 2px 10px; border-radius: var(--radius-full); background: var(--gray-50); color: var(--navy-600); font-size: var(--fs-body-3); font-weight: 700; }
.res__chip--now { background: var(--success-100); color: #04704f; }
.tag { display: inline-flex; align-self: flex-start; padding: 4px 12px; border-radius: var(--radius-full); background: var(--gray-50); color: var(--gray-500); font-size: var(--fs-body-3); font-weight: 700; }
.status-pill { display: inline-flex; padding: 4px 12px; border-radius: var(--radius-full); background: var(--orange-100); color: var(--orange-text); font-size: var(--fs-body-3); font-weight: 700; }
.status-pill--paid, .status-pill--deposit_paid { background: var(--success-100); color: #04704f; }
.status-pill--cancelled, .status-pill--expired { background: var(--gray-50); color: var(--gray-500); }
.status-pill--waitlist-notified, .status-pill--waitlist-booked { background: var(--success-100); color: #04704f; }
.status-pill--waitlist-expired, .status-pill--waitlist-left, .status-pill--waitlist-removed { background: var(--gray-50); color: var(--gray-500); }

.sched { width: 100%; border-collapse: collapse; font-size: var(--fs-body-3); }
.sched th { padding: 8px 0; border-bottom: 1px solid var(--gray-150); color: var(--gray-500); font-size: var(--fs-small); font-weight: 700; text-align: left; }
.sched td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--gray-50); vertical-align: middle; }
.sched td.amount { font-weight: 700; white-space: nowrap; }
.sched td.act { text-align: right; }
.sched .btn { height: 40px; padding: 0 var(--space-4); }

.auth-box { max-width: 460px; margin: 0 auto; padding: var(--space-8) 0 var(--space-9); }
.auth-box h1 { margin-bottom: var(--space-5); font-size: var(--fs-h2); font-weight: 500; text-align: center; }
.auth-box .btn--primary { display: flex; width: 100%; max-width: 240px; margin: var(--space-2) auto 0; }
.auth-box__row { display: flex; justify-content: space-between; align-items: baseline; }
.auth-box__row a, .auth-box__foot a { font-size: var(--fs-body-3); font-weight: 700; color: var(--primary-600); text-decoration: none; }
.auth-box__foot { margin-top: var(--space-4); font-size: var(--fs-body-3); text-align: center; }
.auth-box__lead { margin: calc(-1 * var(--space-3)) 0 var(--space-5); color: var(--gray-500); text-align: center; }
.doc { max-width: 800px; padding: var(--space-7) 0 var(--space-9); }
.doc h1 { font-size: var(--fs-h3); font-weight: 500; }
.doc h2 { margin-top: var(--space-5); font-size: var(--fs-h5); }
.doc h3 { margin-top: var(--space-4); font-size: var(--fs-body-1); }
.doc ol, .doc ul { padding-left: 1.4em; }
.doc li { margin-bottom: var(--space-2); }
.doc li > ol, .doc li > ul { margin-top: var(--space-2); }
.doc__lead { color: var(--gray-500); }
.doc__table { margin: var(--space-3) 0 var(--space-4); overflow-x: auto; }
.doc__table table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-3); }
.doc__table th, .doc__table td { padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-100); text-align: left; vertical-align: top; }
.doc__table th { background: var(--gray-50); font-weight: 700; }
.doc__nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-body-3); }

@media (max-width: 1199px) {
    .booking-page { grid-template-columns: minmax(0, 1fr) 340px; }
    .account, .account--wide { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); }
}

@media (max-width: 899px) {
    .booking-page { grid-template-columns: minmax(0, 1fr); }
    .booking-aside { position: static; order: 2; margin-top: var(--space-5); }
    .account, .account--wide { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-5); gap: var(--space-4); }
    .account-nav { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
    .account-nav li + li { border-top: 0; }
    .account-nav a, .account-nav button { width: auto; padding: 6px 12px 6px 6px; border-radius: var(--radius-full); background: var(--gray-50); font-size: var(--fs-body-3); }
    .account-nav a[aria-current="page"] { background: var(--primary-100); }
    .account-nav a[aria-current="page"]::after { display: none; }
    .account-nav__icon { width: 24px; height: 24px; background: var(--white); }
}

@media (max-width: 767px) {
    .booking-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
    .booking-head h1 { font-size: var(--fs-h4); }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .trip { flex-direction: column; }
    .trip__image { width: 100%; min-height: 120px; }
    .trip__body { padding: var(--space-4) var(--space-3); }
    .trip__title { font-size: var(--fs-h5); }
    .paybox { padding: var(--space-5) var(--space-4); }
    .stepper li span { font-size: 10px; }
    .done h2 { font-size: var(--fs-h3); }
    .done__lead { font-size: var(--fs-body-2); }
    .res { flex-direction: column; }
    .res__side { width: 100%; align-items: flex-start; text-align: left; border-left: 0; border-top: 1px solid var(--gray-150); }
    .sched thead { display: none; }
    .sched tr { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-2); padding: 12px 0; border-bottom: 1px solid var(--gray-50); }
    .sched td { padding: 0; border: 0; }
    .sched td.act { grid-column: 1 / -1; text-align: left; }
    .auth-box { padding: var(--space-6) 0 var(--space-7); }
    .auth-box h1 { font-size: var(--fs-h3); }
}
.sched td:nth-child(3) { white-space: nowrap; }

/* Dodatki w rezerwacji (R3) i kod rabatowy */
.addons { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.addons__title { margin: 0; font-weight: 700; }
.addon { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: center; }
.addon__price { font-weight: 700; white-space: nowrap; }
.addon__choice, .addon__desc { grid-column: 1 / -1; }
.addon__choice { max-width: 240px; }
.code-row { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.code-row .input { flex: 1; min-width: 0; }
.waitlist-form { max-width: 640px; }


/* ===== Rezerwacja 1:1 z Figmą (sz-05 … sz-13), nadpisuje wcześniejsze reguły ===== */
.booking-page { padding-top: var(--space-4); }
.booking-head { gap: var(--space-4); margin: var(--space-1) 0 var(--space-6); }
.booking-head h1 { font-size: var(--fs-h3); font-weight: 500; color: var(--navy-600); }
.btn-back { width: 137px; justify-content: center; font-size: var(--fs-body-2); font-weight: 600; color: var(--primary-600); }
.btn-back::before { content: ""; width: 16px; height: 16px; background: url("../img/ikona-strzalka.svg") center / 16px no-repeat; transform: scaleX(-1); filter: invert(41%) sepia(78%) saturate(1020%) hue-rotate(163deg) brightness(91%); }
.booking-page--done .booking-head { margin-bottom: var(--space-6); }
.stepper { margin-bottom: var(--space-6); }
.stepper li { color: var(--navy-700); }
.stepper .is-done .stepper__dot { box-shadow: 0 0 0 4px var(--primary-100); }

.has-account { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); font-size: var(--fs-body-2); }
.has-account strong { font-weight: 600; color: var(--navy-700); }
.btn--xs { height: 32px; padding: 0 12px; font-size: var(--fs-small); font-weight: 600; background: var(--primary-700); }
.booker-toggle { margin: 0 0 var(--space-4); color: var(--gray-500); }

.booking-section { padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--gray-150); }
.booking-section--plain { border-bottom: 0; padding-bottom: 0; }
.booking-section__head { margin-bottom: var(--space-3); }
.booking-section__title { font-size: var(--fs-h5); font-weight: 600; color: var(--navy-600); }
.booking-section__title--lg { margin-bottom: var(--space-4); }
.booking-section__title--sm { margin-bottom: var(--space-3); font-size: var(--fs-body-3); font-weight: 700; color: var(--navy-700); }
.link-btn { font-size: var(--fs-body-3); font-weight: 600; color: #d92d20; }
.link-btn--blue { color: var(--primary-500); font-weight: 500; }
.form-grid { gap: 0 var(--space-4); }
.form-grid .field { margin-bottom: var(--space-4); }
.booking-main .input, .auth-form .input, .booking-aside .input, .login-modal .input { border-radius: var(--radius-full); padding: 13px 12px; }
.booking-main .textarea { border-radius: var(--radius-lg); }
.booking-main select.input { appearance: none; padding-right: 40px; background: var(--white) url("../img/ikona-rozwin.svg") right 14px center / 16px no-repeat; }
.booking-main .check input, .booking-aside .check input, .auth-form .check input { accent-color: var(--primary-500); width: 18px; height: 18px; border-radius: 4px; }
.check--body { font-size: var(--fs-body-3); align-items: center; }
.check--body span { line-height: 1.4; }
.radio-row label { font-weight: 500; }
#notes-field { margin-top: var(--space-3); }
.js-notes, .js-copy-address { display: block; margin: calc(-1 * var(--space-2)) 0 var(--space-4); }

/* Dodatki jako karty */
.addons { gap: var(--space-2); margin-top: var(--space-4); }
.addons__title { margin-bottom: var(--space-2); font-size: var(--fs-body-2); font-weight: 700; color: var(--navy-600); }
.addon-card { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-4); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); border: 1px solid var(--gray-150); border-radius: var(--radius-md); background: var(--white); }
.addon-card.is-on { border-color: var(--primary-500); }
.addon-card__box { display: flex; }
.addon-card__box input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary-500); }
.addon-card__name { display: block; font-size: var(--fs-body-2); font-weight: 600; color: var(--navy-600); line-height: 1.4; cursor: pointer; }
.addon-card__desc { margin: var(--space-2) 0 0; max-width: 560px; font-size: var(--fs-small); font-weight: 600; line-height: 1.45; color: var(--gray-500); }
.addon-card__field { margin: var(--space-3) 0 0; max-width: 388px; }
.addon-card__choice { width: 100px; }
.addon-card__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; }
.addon-card__amount { font-size: var(--fs-body-2); font-weight: 700; color: var(--navy-600); line-height: 1.3; }
.addon-card__unit { font-size: var(--fs-small); font-weight: 600; color: var(--gray-500); line-height: 1.3; }
/* Miniaturka (opcjonalna): kwadrat na całą wysokość treści karty */
.addon-card--image { grid-template-columns: 24px 104px minmax(0, 1fr) auto; }
.addon-card__image { display: block; width: 104px; height: 104px; object-fit: cover; border-radius: 12px; background: var(--gray-50); }

/* Wybór koi na schemacie jachtu */
.berth { margin-top: var(--space-4); }
.berth__title { margin: 0 0 var(--space-3); font-size: var(--fs-body-2); font-weight: 700; color: var(--navy-600); }
.berth__stage { position: relative; display: flex; justify-content: center; padding: var(--space-4) var(--space-2); border-radius: var(--radius-md); background: #fbfbfc; }
/* Schemat na prawie całą szerokość kolumny, jak na poprzedniej wersji strony (Wojtek 26.10.2026). */
.plan { display: block; width: 100%; max-width: none; height: auto; overflow: visible; }
.plan--cat { max-width: 720px; }
/* Kolory i linie kabin są w SVG z Figmy; tu tylko stany wyboru. */
.cabin { cursor: pointer; outline: none; }
.cabin path { transition: fill .15s, stroke .15s; }
.cabin:hover .cabin__room, .cabin:focus-visible .cabin__room, .cabin.is-open .cabin__room, .cabin.is-selected .cabin__room { fill: #fdf3e5; stroke: #ef9324; }
.cabin:hover .cabin__bed, .cabin:focus-visible .cabin__bed, .cabin.is-open .cabin__bed, .cabin.is-selected .cabin__bed,
.cabin:hover .cabin__pillow, .cabin:focus-visible .cabin__pillow, .cabin.is-open .cabin__pillow, .cabin.is-selected .cabin__pillow { fill: #fbe1bd; stroke: #ef9324; }
.cabin.is-taken { cursor: default; }
.cabin.is-taken .cabin__room { fill: #eceef3; stroke: #9c9daa; }
.cabin.is-taken .cabin__bed, .cabin.is-taken .cabin__pillow { fill: #cfd0da; stroke: #8b8c99; }
.berth__pop { position: absolute; z-index: 5; width: 280px; padding: var(--space-4) var(--space-3) var(--space-3); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 6px 24px rgba(31, 41, 103, .14); }
.berth__pop--small { width: 216px; }
.berth__close { position: absolute; right: 10px; top: 8px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--gray-50); color: var(--gray-500); font-size: 16px; line-height: 1; cursor: pointer; }
.berth__pop-title { margin: 0 0 var(--space-1); font-size: var(--fs-body-3); font-weight: 700; color: var(--navy-600); }
.berth__pop-text { margin: 0 0 var(--space-3); font-size: var(--fs-small); font-weight: 600; color: var(--gray-500); line-height: 1.45; }
.berth__pop-notice { margin: var(--space-2) 0 var(--space-3); padding: var(--space-2) 12px; border-radius: var(--radius-md); background: var(--orange-100); color: var(--orange-600); font-size: var(--fs-small); font-weight: 600; line-height: 1.45; }
.berth__pop-na { display: inline-flex; padding: 4px 12px; border-radius: var(--radius-full); background: var(--gray-50); color: var(--gray-500); font-size: var(--fs-small); font-weight: 700; }
.berth__pick { height: 40px; font-size: var(--fs-small); }
.berth__chosen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-1); font-size: var(--fs-body-3); color: var(--gray-500); }
.berth__chosen strong { color: var(--navy-700); }
.berth__icon { display: inline-flex; padding: 6px; border-radius: var(--radius-full); background: var(--primary-100); }
.berth__icon img { width: 16px; height: 16px; filter: invert(46%) sepia(83%) saturate(1515%) hue-rotate(161deg) brightness(91%); }
.berth__change { padding: 0; border: 0; background: none; color: var(--navy-600); font-size: var(--fs-body-3); font-weight: 700; cursor: pointer; }
.berth__change:hover { text-decoration: underline; }
.berth .field-hint { display: block; margin-top: var(--space-1); }

.booking-extra { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--gray-150); }
.booking-extra__title { margin: 0 0 var(--space-3); font-size: var(--fs-body-3); font-weight: 700; color: var(--navy-700); }
.booking-extra__note { margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--gray-500); }
.booking-extra__password { max-width: 388px; margin: var(--space-4) 0 0; }
.add-person { margin: 0 0 var(--space-5); }
.add-person .btn { padding: 0 var(--space-5); font-size: var(--fs-body-3); font-weight: 600; }
.add-person__plus { font-size: 22px; font-weight: 400; line-height: 1; }
.booking-rules { font-size: var(--fs-small); }

.password-field { position: relative; }
.password-field .input { padding-right: 48px; }
.password-field__eye { position: absolute; right: 12px; top: 50%; width: 24px; height: 24px; padding: 0; border: 0; transform: translateY(-50%); cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737482' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px no-repeat; }
.password-field__eye.is-on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737482' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }

/* Kolumna: karta imprezy, podsumowanie, pomoc */
.booking-aside { gap: var(--space-4); }
.trip--compact { border: 0; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 1px 10px rgba(31, 41, 103, .08); }
.trip__image--photo { background: var(--gray-50); overflow: hidden; }
.trip__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trip--compact .trip__image { min-height: 136px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.trip__status { position: absolute; left: 10px; top: 10px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--success-100); color: var(--success-600); font-size: var(--fs-body-3); font-weight: 700; }
.trip__status--none { background: var(--gray-50); color: var(--gray-500); }
.trip--compact .trip__body { gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-5); }
.trip--compact .trip__title { font-size: var(--fs-body-2); font-weight: 600; color: var(--navy-600); }
.trip--compact .meta { color: var(--navy-600); }
.trip:not(.trip--compact) { border: 1px solid var(--gray-50); border-radius: var(--radius-lg); }
.trip:not(.trip--compact) .trip__image { width: 300px; min-height: 228px; }
.trip:not(.trip--compact) .trip__body { gap: var(--space-4); padding: var(--space-5) var(--space-5); }
.trip__badge { background: rgba(239, 240, 245, .9); }
.trip__title { font-size: var(--fs-h4); font-weight: 500; color: var(--navy-600); }
.trip__sub { margin-top: 2px; font-size: var(--fs-body-2); }
.trip__route-label { margin: 0 0 4px; font-size: var(--fs-body-2); color: var(--navy-600); }
.trip .route { font-weight: 600; }

.paybox { gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--gray-50); border-radius: var(--radius-lg); position: relative; z-index: 1; }
.paybox__title { margin: var(--space-2) 0 var(--space-3); font-size: var(--fs-h5); font-weight: 600; color: var(--navy-600); }
.paybox__people { display: flex; flex-direction: column; gap: var(--space-5); }
.paybox__person-title { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--fs-body-3); font-weight: 700; color: var(--navy-600); }
.paybox__person-title::after { content: ""; flex: 1; height: 1px; background: var(--gray-50); }
.rows--lines { gap: var(--space-3); }
.paybox .rows--lines dd { font-size: var(--fs-body-3); font-weight: 700; }
.rows dt { font-size: var(--fs-small); color: var(--gray-500); }
.paybox .rows dd { font-size: var(--fs-h5); font-weight: 500; color: var(--navy-600); }
.paybox .rows dd.total { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-h4); font-weight: 500; }
.total__tag { width: 16px; height: 16px; }
.paybox .rows__balance dt { color: var(--navy-600); }
.paybox .rows__balance dd { font-size: var(--fs-body-3); font-weight: 700; }
.paybox__sep { margin: var(--space-1) 0; border-top-color: var(--gray-50); }
.paybox__code { margin: 0; }
.paybox__code label { font-size: var(--fs-body-3); }
.code-row { position: relative; margin: var(--space-1) 0 0; }
.code-row .input { padding-right: 96px; }
.code-row__btn { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: none; color: var(--navy-700); font-size: var(--fs-body-3); font-weight: 700; cursor: pointer; }
.code-row__btn:hover { background: var(--primary-100); }
.paybox__includes { font-size: var(--fs-small); color: var(--navy-700); }
.paybox__includes p { margin: 0; font-weight: 700; }
.paybox__includes ul { margin: 2px 0 0; padding-left: 18px; color: var(--gray-500); line-height: 1.45; }
.paybox__includes li::marker { color: var(--navy-600); }
.paybox__guarantee { margin-top: 2px !important; }
.paybox__or { margin: var(--space-2) var(--space-2) 0; font-size: var(--fs-body-3); font-weight: 600; color: var(--navy-700); }
.paybox__transfer { align-self: center; padding: 0 var(--space-4); font-size: var(--fs-body-3); font-weight: 600; color: var(--primary-600); }
.paybox__transfer img { width: 18px; height: 18px; filter: invert(41%) sepia(78%) saturate(1020%) hue-rotate(163deg) brightness(91%); }
.paybox .check-list { margin-top: var(--space-1); }
.paybox .check--body { align-items: flex-start; font-size: var(--fs-body-3); }
.paybox .check a { color: var(--primary-500); text-decoration: none; }
.p24 { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-3); border-bottom: 1px solid var(--gray-150); font-size: 9px; color: var(--gray-500); }
.p24 img { width: 72px; height: auto; }
.pay-logo { display: none; }

.help-box { margin-top: calc(-1 * var(--space-6)); padding: calc(var(--space-6) + var(--space-5)) var(--space-4) var(--space-5); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(180deg, #ecf9fd 0%, #e2f6fc 100%); color: var(--navy-600); }
.help-box__title { margin: 0 0 var(--space-4); font-size: var(--fs-body-2); font-weight: 600; }
.help-box p { margin: 0 0 var(--space-4); font-size: var(--fs-body-2); line-height: 1.4; }
.help-box a { color: var(--primary-500); text-decoration: none; }
.help-box__contact { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); color: var(--navy-600) !important; font-size: var(--fs-body-2); font-weight: 700; }
.help-box__contact .meta__icon { background: var(--white); }

/* Podsumowanie (krok 2) */
.person { padding: var(--space-5) 0 var(--space-3); border-bottom: 0; }
.person__title { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--fs-body-2); font-weight: 600; color: var(--navy-600); }
.person__title::after { content: ""; flex: 1; height: 1px; background: var(--gray-50); }
.person .rows { gap: var(--space-3); }
.person .rows dd { font-size: var(--fs-body-3); font-weight: 600; color: var(--navy-600); }
.person__order { margin: var(--space-3) 0 var(--space-2); font-size: var(--fs-small); font-weight: 700; color: var(--navy-600); }
.rows--order dd { font-size: var(--fs-h5) !important; font-weight: 500 !important; }
.person__edit { margin: var(--space-4) 0 0; }
.person__edit a { font-size: var(--fs-body-3); color: var(--primary-500); text-decoration: none; }

/* Gotowe */
.done { gap: var(--space-4); padding: var(--space-2) 0 var(--space-6); }
.done__icon { width: 56px; height: 56px; }
.done__icon::before { width: 20px; height: 11px; }
.done h2 { margin-top: var(--space-2); font-size: var(--fs-h2); color: var(--navy-600); }
.done__lead { font-size: var(--fs-h4); font-weight: 500; color: var(--navy-600); }
.done__hold { font-size: var(--fs-body-2); }
.done p { max-width: 720px; color: var(--navy-600); }
.btn--outline { border-color: var(--primary-600); color: var(--primary-600); background: var(--primary-100); }
.btn--outline img { width: 18px; height: 18px; filter: invert(41%) sepia(78%) saturate(1020%) hue-rotate(163deg) brightness(91%); }
.btn--success { pointer-events: none; }

/* Szczegóły przelewu, przekierowanie */
.transfer { max-width: 908px; padding-top: var(--space-6); padding-bottom: var(--space-9); }
.transfer h1 { margin: 0 0 var(--space-3); font-size: var(--fs-h1); font-weight: 500; color: var(--navy-600); }
.transfer__lead { margin: 0 0 var(--space-4); color: var(--gray-500); }
.transfer__box { display: flex; flex-direction: column; gap: var(--space-4); margin: 0 0 var(--space-8); padding: var(--space-5) var(--space-4); border: 1px solid var(--gray-50); border-radius: var(--radius-md); }
.transfer__box div { display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--fs-body-2); color: var(--navy-600); }
.transfer__box dt { font-weight: 700; }
.transfer__box dd { margin: 0; }
.transfer__info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
.transfer__info > div { display: flex; align-items: flex-start; gap: var(--space-4); }
.transfer__info p { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--navy-600); }
.transfer__info span { color: var(--gray-500); }
.transfer__info strong { line-height: 1.6; }
.transfer__info small { font-size: 9px; color: var(--navy-600); }
.transfer__icon { display: inline-flex; flex: none; padding: 8px; border-radius: var(--radius-full); background: var(--primary-100); }
.transfer__back { margin-top: var(--space-7); }
.flip { transform: scaleX(-1); }
.redirect-pay { display: flex; flex-direction: column; align-items: center; padding-top: var(--space-9); padding-bottom: var(--space-9); text-align: center; }
.redirect-pay h1 { margin: 0 0 var(--space-8); font-size: 64px; font-weight: 500; color: var(--navy-600); }
.redirect-pay__logo { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) var(--space-3); border-bottom: 1px solid var(--gray-150); min-width: min(612px, 100%); font-size: var(--fs-small); color: var(--gray-500); }
.redirect-pay__note { margin-top: var(--space-5); color: var(--gray-500); font-size: var(--fs-body-3); }

/* Logowanie, rejestracja, okno logowania */
.auth-page { background: radial-gradient(60% 50% at 0% 0%, #e3f6fc 0%, rgba(255, 255, 255, 0) 70%), var(--white); }
.auth-page__grid { display: grid; grid-template-columns: 440px 360px; justify-content: space-between; align-items: start; max-width: 1120px; padding-top: var(--space-7); padding-bottom: var(--space-9); }
.auth-form { width: 100%; }
.auth-form__title { margin: 0 0 var(--space-4); font-size: var(--fs-h2); font-weight: 500; text-align: center; color: var(--navy-600); }
.auth-form .field { margin-bottom: var(--space-4); }
.auth-form .field label, .auth-form__row label { font-size: var(--fs-body-2); font-weight: 600; }
.auth-form__row { display: flex; justify-content: space-between; align-items: baseline; }
.auth-form__row a, .auth-form__foot a { font-size: var(--fs-body-2); font-weight: 600; color: var(--primary-500); text-decoration: none; }
.auth-form__remember { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.auth-form__submit { display: flex; width: 240px; max-width: 100%; margin: 0 auto; font-size: var(--fs-body-2); font-weight: 600; }
.auth-form__foot { margin: var(--space-5) 0 0; font-size: var(--fs-body-2); font-weight: 600; text-align: center; color: var(--navy-600); }
.auth-form__consents { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-3); border-radius: 4px; background: var(--primary-100); }
.auth-form__consents .check { font-size: var(--fs-body-2); }
.auth-form__consents a { color: var(--primary-500); text-decoration: none; }
.auth-review { padding-top: 12px; text-align: center; color: var(--navy-600); }
.auth-review__stars { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 0 0 var(--space-6); }
.auth-review__rating { margin-left: 4px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--orange-100); color: var(--orange-600); font-size: var(--fs-body-3); font-weight: 600; }
.auth-review__item { margin: 0; }
.auth-review blockquote { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow-wrap: anywhere; margin: 0 0 var(--space-5); font-size: var(--fs-body-2); line-height: 1.4; }
.auth-review figcaption { display: flex; justify-content: center; align-items: center; gap: var(--space-2); text-align: left; }
.auth-review figcaption > span { display: flex; flex-direction: column; }
.auth-review__avatar { width: 56px; height: 56px; border-radius: var(--radius-full); object-fit: cover; }
.auth-review__avatar--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--gray-50); color: var(--navy-600); font-size: 22px; font-weight: 700; }
.auth-review__sign { height: 34px; width: auto; }
.auth-review__name { font-family: var(--font-script); font-size: 26px; font-weight: 400; line-height: 1.2; }
.auth-review__when { font-size: var(--fs-small); color: var(--gray-500); }
.auth-review__nav { display: flex; justify-content: center; gap: var(--space-3); margin: var(--space-6) 0 0; }
.auth-review__btn { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 40px; border: 1px solid var(--primary-600); border-radius: var(--radius-full); background: var(--white); color: var(--primary-600); cursor: pointer; }
.auth-review__btn:hover { background: var(--primary-100); }
.login-modal { width: min(600px, calc(100% - 32px)); max-width: none; padding: 0; border: 0; border-radius: var(--radius-lg); background: linear-gradient(160deg, #eaf8fc 0%, var(--white) 45%); color: var(--navy-600); box-shadow: 0 24px 64px rgba(31, 41, 103, .18); }
.login-modal::backdrop { background: rgba(229, 233, 245, .55); backdrop-filter: blur(6px); }
.login-modal__box { position: relative; padding: var(--space-6) var(--space-6) var(--space-6); }
.login-modal__close { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border: 0; border-radius: var(--radius-full); background: var(--gray-50); color: var(--gray-500); font-size: 18px; cursor: pointer; }
.login-modal .auth-form__title { font-size: var(--fs-h2); }
.login-modal .auth-form__submit { margin-top: var(--space-1); }

@media (max-width: 1199px) {
    .auth-page__grid { grid-template-columns: minmax(0, 440px) minmax(0, 360px); gap: var(--space-6); justify-content: center; }
}
@media (max-width: 899px) {
    .help-box { margin-top: calc(-1 * var(--space-6)); }
    .auth-page__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .auth-form, .auth-review { max-width: 440px; }
    .transfer__info { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .booking-head { flex-direction: row; align-items: center; }
    .btn-back { width: auto; height: 40px; padding: 0 var(--space-3); }
    .booking-head h1 { font-size: var(--fs-h4); }
    .has-account { margin-bottom: var(--space-4); }
    .addon-card { grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2) var(--space-3); padding: var(--space-3); }
    .addon-card__price { grid-column: 2; align-items: flex-start; text-align: left; }
    .addon-card--image { grid-template-columns: 20px 72px minmax(0, 1fr); }
    .addon-card--image .addon-card__price { grid-column: 3; }
    .addon-card__image { width: 72px; height: 72px; align-self: start; }
    .berth__stage { padding: var(--space-4) var(--space-2); }
    /* Telefon: okno wyboru pod schematem zamiast na nim (z kabiną na wyłączność jest wyższe niż schemat). */
    .berth__stage { flex-wrap: wrap; }
    .berth__pop { position: relative; left: auto !important; top: auto !important; width: 100%; margin-top: var(--space-3); }
    .trip:not(.trip--compact) .trip__image { width: 100%; min-height: 180px; }
    .person .rows div { flex-wrap: wrap; }
    .person .rows dd { text-align: left; }
    .done__lead { font-size: var(--fs-h5); }
    .hide-sm { display: none; }
    .transfer h1 { font-size: var(--fs-h3); }
    .redirect-pay { padding-top: var(--space-7); }
    .redirect-pay h1 { font-size: var(--fs-h3); margin-bottom: var(--space-6); }
    .auth-form__title { font-size: var(--fs-h3); }
    .login-modal__box { padding: var(--space-5) var(--space-3); }
}
.done .done__hold { color: var(--success-600); font-weight: 700; }

/* Reset hasła, menu konta: elementy z Figmy (Resetuj hasło, Sprawdź maila, Hasło zmienione, Ustawienia hasła) */
.auth-icon { display: flex; justify-content: center; margin: 0 0 var(--space-4); color: var(--primary-500); }
.auth-icon svg { width: 56px; height: 56px; }
.auth-icon--ok { color: var(--success-600); }
.auth-back { display: inline-flex; align-items: center; gap: var(--space-2); }
.auth-back svg { flex: none; width: 18px; height: 18px; }
.auth-resend { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px var(--space-2); margin: 0; font-size: var(--fs-body-3); font-weight: 700; color: var(--navy-600); text-align: center; }
.auth-resend button { padding: 0; border: 0; background: none; color: var(--primary-500); font: inherit; cursor: pointer; }
.auth-resend button:hover { text-decoration: underline; }
.auth-resend .cf-turnstile { flex-basis: 100%; }
.auth-box > .btn--primary { margin-top: 0; }
.account-menu__title, .account-back { display: none; }
.pw-tips { margin: 0 0 var(--space-4); padding-left: 18px; font-size: var(--fs-small); line-height: 1.4; color: var(--gray-500); }

@media (max-width: 767px) {
    /* Pola na stronach logowania i konta: obwódka 1 px + poświata 4 px (Figma primary/focus-4px) zamiast obrysu 2 px */
    .auth-form .input:focus, .auth-box .input:focus, .account .input:focus { outline: 0; border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(16, 162, 194, .2); }
    .auth-form .field label, .auth-form__row label, .auth-box .field label, .account .field label { font-size: var(--fs-body-3); font-weight: 700; line-height: 1.3; }
    .auth-form__row { align-items: center; gap: var(--space-3); }
    .auth-form__row a, .auth-form__foot, .auth-form__foot a, .auth-box__foot, .auth-box__foot a { font-size: var(--fs-body-3); font-weight: 700; }
    .auth-form__row a, .auth-form__foot a, .auth-box__foot a { line-height: 1; color: var(--primary-500); }
    .auth-form__submit, .auth-box .btn { font-size: var(--fs-body-3); font-weight: 700; }

    /* Zaloguj się / Załóż konto: 40 px po bokach i od nagłówka, odstępy 24 px */
    .auth-page .container { padding-left: var(--space-6); padding-right: var(--space-6); }
    .auth-page__grid { padding-top: var(--space-6); row-gap: var(--space-6); }
    .auth-form__title { margin-bottom: var(--space-4); }
    .auth-form__title, .auth-box h1 { font-size: 32px; font-weight: 500; line-height: 1; }
    .auth-box h1 { margin: 0; }
    .auth-form .field { margin-bottom: var(--space-4); }
    .auth-form__remember { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
    .auth-form__foot { margin-top: var(--space-4); line-height: 1.3; }
    .auth-form__consents { gap: var(--space-3); margin-bottom: var(--space-4); padding: 10px 12px; }
    .auth-form__consents .check { font-size: var(--fs-body-3); align-items: center; }
    .auth-form .auth-form__consents .check input { width: 16px; height: 16px; }

    /* Reset hasła, nowe hasło, potwierdzenia: jedna kolumna, odstępy 24 px */
    .auth-solo { background: radial-gradient(60% 50% at 0% 0%, #e3f6fc 0%, rgba(255, 255, 255, 0) 70%), var(--white); }
    .auth-solo .container { padding-left: var(--space-6); padding-right: var(--space-6); }
    .auth-box { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) 0 var(--space-8); }
    .auth-box > * { margin: 0; }
    .auth-box__lead { color: var(--navy-600); font-size: var(--fs-body-2); line-height: 1.4; text-align: center; }
    .auth-box .field { margin-bottom: var(--space-4); }
    .auth-box form > .btn--primary, .auth-box > .btn--primary { margin: 0 auto; width: 240px; }

    /* Moje konto: pionowe menu jak w Figmie; na podstronach okrągły przycisk powrotu przy nagłówku */
    .account, .account--wide { padding: var(--space-3) 0 var(--space-8); gap: var(--space-4); }
    .account-menu--sub { display: none; }
    .account-menu__title { display: block; margin: 0 0 var(--space-4); font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--navy-600); }
    .account-nav { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .account-nav li + li { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--gray-150); }
    .account-nav a, .account-nav button { width: 100%; height: 40px; gap: var(--space-2); padding: 0; border-radius: 0; background: none; font-size: var(--fs-body-2); font-weight: 400; line-height: 1.4; }
    .account-nav a[aria-current="page"] { background: none; font-weight: 400; }
    .account-nav__icon { width: 40px; height: 40px; background: var(--primary-100); }
    .account-nav__icon img, .account-nav__icon svg { width: 24px; height: 24px; }
    .account-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
    .account .account-head h1 { flex: 1; min-width: 0; margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; }
    .account-back { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--primary-100); color: var(--primary-500); }
    .account-back:hover { background: var(--primary-200); color: var(--primary-700); }
    .account-back svg { width: 18px; height: 18px; }
    .account .field { margin-bottom: var(--space-4); }
    .pw-tips { margin-bottom: var(--space-4); }
    .account-save { display: flex; margin: 0 auto; background: var(--orange-600); color: var(--btn-orange-text); box-shadow: 0 1px 1px rgba(55, 54, 68, .06); }
    .account-save:hover { background: var(--orange-500); color: var(--white); }
}

/* Konto: dokumenty skippera i lista załogi czarteru */
.docs { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.docs__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--gray-100); border-radius: var(--radius-md); background: var(--white); }
.docs__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-body-3); }
.docs__state { color: var(--gray-500); font-size: var(--fs-small); word-break: break-word; }
.docs__actions { display: flex; align-items: center; gap: var(--space-3); }
.docs__actions form { margin: 0; }
.docs__pick { height: 36px; min-height: 0; padding: 0 14px; font-size: var(--fs-body-3); cursor: pointer; }
.docs__pick:focus-within { outline: 2px solid var(--primary-700); outline-offset: 2px; }
.docs__auto { margin: 0 0 var(--space-2); }
.btn-link { padding: 0; border: 0; background: none; color: var(--primary-700); font: inherit; font-size: var(--fs-body-3); font-weight: 700; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.checklist { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: var(--fs-body-3); }
.checklist li { display: flex; gap: var(--space-2); align-items: baseline; }
.checklist li::before { content: "✓"; flex: none; width: 1em; color: var(--success-600); font-weight: 700; }
.checklist li.is-missing::before { content: "!"; color: var(--orange-600); text-align: center; }
.crew { width: 100%; margin: 0 0 var(--space-4); border-collapse: collapse; font-size: var(--fs-body-3); }
.crew th, .crew td { padding: var(--space-2); border-bottom: 1px solid var(--gray-100); text-align: left; vertical-align: top; }
.crew th { color: var(--gray-500); font-size: var(--fs-small); font-weight: 700; }
.crew td .docs__state { display: block; }
.crew-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); }
.crew-form .field--wide { grid-column: 1 / -1; }
@media (max-width: 767px) {
    .crew thead { display: none; }
    .crew tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--gray-100); }
    .crew td { display: block; padding: 2px 0; border: 0; }
    .crew-form { grid-template-columns: minmax(0, 1fr); }
}
.crew .inline { display: inline; margin-left: var(--space-2); }
.crew .nowrap { white-space: nowrap; }
.crew .late { color: var(--error-600); }
.crew-form .btn-link { margin-left: var(--space-3); }

/* Konto: mapa rejsów klienta */
.tmap { margin-top: var(--space-6); }
.tmap__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.tmap__stats { margin: 0; font-size: var(--fs-body-3); color: var(--gray-500); }
.tmap__stats strong { color: var(--navy-600); }
.tmap__box { margin: var(--space-3) 0 0; overflow: hidden; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); background: #d6eff8; }
.tmap__box svg { display: block; width: 100%; height: auto; }
.tmap__box figcaption { padding: var(--space-2) var(--space-3); background: var(--white); font-size: var(--fs-small); color: var(--gray-500); }
.tmap__pin path { fill: #1b2256; }
.tmap__pin--up path { fill: #ef9324; }
.tmap__pin:hover path, .tmap__pin:focus-visible path { fill: #0fa2c3; }
.tmap__pin:focus-visible { outline: none; }
.tmap__legend { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--gray-500); }
.tmap__dot { display: inline-block; width: 10px; height: 10px; margin-left: var(--space-2); border-radius: 50%; background: #1b2256; }
.tmap__dot--up { margin-left: 0; background: #ef9324; }

/* Wybór koi (Wojtek 26.10.2026): w kabinie piętrowej podświetla się tylko wybrana koja, zajęta jest szara;
   kabina na wyłączność w ramce wyboru jak w Figmie. */
.cabin[data-type="bunk"].is-selected .cabin__bed:not(.is-pick) { fill: #A1E7F7; stroke: #10A2C2; }
.cabin[data-type="bunk"] .cabin__bed.is-busy { fill: #cfd0da; stroke: #8b8c99; }
.cabin[data-type="bunk"] .cabin__bed.is-pick { fill: #fbe1bd; stroke: #ef9324; }
.berth__pick + .berth__pick--bunk, .berth__pick--bunk + .berth__pick--bunk { margin-top: var(--space-2); }
.berth__excl { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--gray-100, #eceef3); border-radius: var(--radius-md); }
.berth__excl-head { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: var(--fs-small); font-weight: 600; color: var(--navy-600); }
.berth__excl-text { margin: 0 0 var(--space-2); font-size: var(--fs-small); color: var(--gray-500); line-height: 1.45; }