/* Porównywarka czarterów wg Figmy: pływający panel (figma-porownaj-panel-1/2) i strona „Porównanie” (figma-porownanie).
   Panel ma klasy .compare-bar (stare reguły w charter.css) i .cpanel; .cpanel nadpisuje układ. */

.compare-bar.cpanel { position: fixed; right: 40px; bottom: 40px; z-index: 40; display: flex; align-items: center; gap: 22px; min-width: 375px; max-width: calc(100% - 32px); min-height: 158px; padding: 22px 24px 22px 23px; border: 1px solid var(--gray-50); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 4px 24px rgba(31, 41, 103, .08); color: var(--navy-600); }
.compare-bar.cpanel[hidden] { display: none; }
.cpanel__list { display: flex; gap: 21px; margin: 0; padding: 0; list-style: none; }
.cpanel__item { position: relative; display: flex; flex-direction: column; align-items: center; width: 80px; text-align: center; }
.cpanel__item form { margin: 0; }
.cpanel__thumb { display: block; width: 80px; height: 72px; overflow: hidden; border-radius: 8px; background: linear-gradient(160deg, var(--primary-200), var(--primary-600) 65%, var(--navy-700)); }
.cpanel__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cpanel__name { margin-top: 9px; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.cpanel__sub { font-size: 10px; line-height: 1.4; color: var(--gray-500); }
.cpanel__remove { position: absolute; top: -11px; right: -11px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--gray-50); color: var(--gray-500); cursor: pointer; }
.cpanel__remove:hover { background: var(--gray-150); color: var(--navy-600); }
.cpanel__hint { flex: 1; margin: 0 0 18px; padding: 0 8px; font-size: 13px; line-height: 1.35; color: var(--gray-500); text-align: center; }
.cpanel__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 14px; }
.cpanel__actions form { margin: 0; }
.cpanel__go.btn { width: 126px; height: 48px; padding: 0; font-size: var(--fs-body-2); }
.cpanel__clear { padding: 0; border: 0; background: none; color: var(--error-600); font: inherit; font-size: 13px; cursor: pointer; }
.cpanel__clear:hover { text-decoration: underline; }

/* Strona „Porównanie” */
@media (min-width: 1200px) {
    .cmp.container { padding-left: 64px; padding-right: 64px; max-width: calc(1312px + 128px); }
}
.cmp { padding-top: 34px; padding-bottom: var(--space-9); color: var(--navy-600); }
.cmp__head { display: flex; align-items: center; gap: 24px; margin-bottom: 64px; }
.cmp__back.btn { gap: 10px; width: 136px; padding: 0; color: var(--primary-500); }
.cmp__title { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.cmp__empty { padding: var(--space-5); border: 1px solid var(--gray-150); border-radius: var(--radius-lg); }
.cmp__wrap { overflow-x: auto; }
.cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-body-2); }
.cmp-table th, .cmp-table td { padding: 0 24px; height: 54px; border-bottom: 1px solid var(--gray-50); text-align: center; vertical-align: middle; }
.cmp-table tbody th[scope="row"] { font-weight: 500; text-align: left; }
.cmp-table td { width: 292px; font-weight: 700; }
.cmp-table--4 td { width: 240px; }
.cmp-table thead td.cmp-table__corner, .cmp-table tfoot td:first-child { width: auto; }
.cmp-table thead th, .cmp-table thead td { height: auto; padding-bottom: 24px; border-bottom: 1px solid var(--gray-50); vertical-align: bottom; font-weight: 600; }
.cmp-table__corner { padding-left: 0 !important; text-align: left !important; }
.cmp__diff { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--fs-body-3); font-weight: 500; color: var(--gray-500); cursor: pointer; }
.cmp__diff input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-500); }
.cmp-table__photo { display: block; width: 244px; max-width: 100%; aspect-ratio: 244 / 190; margin: 0 auto 14px; overflow: hidden; border-radius: 20px; background: linear-gradient(160deg, var(--primary-200), var(--primary-600) 65%, var(--navy-700)); }
.cmp-table__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmp-table__name { display: block; font-size: var(--fs-h5); font-weight: 600; line-height: 1.4; color: var(--navy-600); text-decoration: none; }
.cmp-table__name:hover { text-decoration: underline; }
.cmp-table__sub { display: block; margin-top: 6px; font-size: var(--fs-body-2); font-weight: 600; color: var(--gray-500); }
.cmp-table__group th { padding: 0 24px; height: 54px; border-top: 1px solid var(--gray-50); background: var(--primary-100); font-size: var(--fs-body-2); font-weight: 700; text-align: left; }
.cmp-table tbody tr[data-row]:has(svg) th, .cmp-table tbody tr[data-row]:has(svg) td { height: 56px; }
.cmp-table--diff tr.is-diff td { background: var(--orange-100); }
.cmp-yes { display: inline-block; color: var(--success-600); vertical-align: middle; }
.cmp-no { display: inline-block; color: var(--error-600); vertical-align: middle; }
.cmp-table__was { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--gray-500); }
.cmp-table__busy { color: var(--error-600); }
.cmp-table__na { font-weight: 500; color: var(--gray-500); }
.cmp-table tfoot td { height: auto; padding-top: 16px; border: 0; }
.cmp-table tfoot form { margin: 0; }
.cmp-table__go.btn { width: 170px; padding: 0; }
.cmp-table__remove { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--error-600); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.cmp-table__remove:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .compare-bar.cpanel { right: 8px; left: 8px; bottom: 8px; min-width: 0; min-height: 0; max-width: none; justify-content: space-between; gap: 12px; padding: 14px 12px; }
    .cpanel__list { gap: 14px; overflow-x: auto; padding: 11px 11px 0 0; margin-top: -11px; }
    .cpanel__item { width: 64px; }
    .cpanel__thumb { width: 64px; height: 52px; }
    .cpanel__name { font-size: 11px; white-space: normal; }
    .cpanel__go.btn { width: 104px; height: 40px; font-size: var(--fs-body-3); }
    .cpanel__actions { margin-bottom: 0; gap: 8px; }
    .cpanel__hint { margin: 0; font-size: 12px; }
    .cmp { padding-top: 24px; }
    .cmp__head { margin-bottom: 32px; gap: 16px; }
    .cmp__back.btn { width: auto; padding: 0 16px; }
    .cmp__title { font-size: var(--fs-h4); }
    /* Bez makiety mobilnej: wąska kolumna nazw, 2 jachty mieszczą się na 375, przy 3–4 tabela przewija się w poziomie. */
    .cmp-table { min-width: 0; table-layout: fixed; font-size: var(--fs-body-3); }
    .cmp-table--3 { min-width: 486px; }
    .cmp-table--4 { min-width: 616px; }
    .cmp-table th, .cmp-table td, .cmp-table__group th { padding: 0 8px; }
    .cmp-table td, .cmp-table--4 td { width: auto; overflow-wrap: anywhere; }
    .cmp-table thead td.cmp-table__corner { width: 96px; padding-right: 8px; }
    .cmp-table tbody th[scope="row"] { overflow-wrap: anywhere; }
    .cmp__diff { align-items: flex-start; font-size: var(--fs-small); }
    .cmp-table__photo { width: 100%; border-radius: 12px; }
    .cmp-table__name { font-size: var(--fs-body-2); }
    .cmp-table__sub { font-size: var(--fs-body-3); }
    .cmp-table__go.btn { width: 100%; height: 40px; padding: 0 10px; }
}