/* Cruise Hub - built by tools/build-css-bundles.php, do not edit. Sources: assets/*.css */

/* offer.css */
/*
 * Layout/spacing here is fixed (this is the product-card structure), but color and
 * type intentionally are not. Two different mechanisms depending on what the element
 * actually is:
 *   - Real heading tags (h1-h4: the offer title, "Kabiny i ceny", "Konkretne kabiny")
 *     get NO font-size/font-family/color from us at all — not even `inherit`. A
 *     class-scoped rule like `.hub-cs-offer h1 { color: inherit }` has HIGHER
 *     specificity than the theme's own bare `h1 { color: ... }` rule and would beat
 *     it, silently overriding real heading styling the theme already provides
 *     (found live: this exact pattern was suppressing Blocksy's actual h1/h2 size
 *     and color). Leaving these properties unset lets the theme's own tag-level CSS
 *     win outright, which is the only way to genuinely inherit a real heading style
 *     rather than approximate it.
 *   - Everything else (labels, meta text, prices, badges) isn't a tag the theme
 *     styles on its own, so it needs an explicit signal: `currentColor`+opacity for
 *     muted text, `var(--hub-cs-accent)` for the one primary CTA's color (default:
 *     inherits the theme's own button color, overridable once in Cruise Hub →
 *     Wygląd), `var(--hub-cs-base-font)` for sizes that should track the theme's
 *     font-size customizer (see that variable's own comment below).
 */
.hub-cs-offer {
    /* Overridden inline (see hub-cruise-search.php) only when the agent explicitly
       picks a color in Cruise Hub → Wygląd. Otherwise every value below is a live
       var() reference into the host theme's own button tokens — never a color
       captured/copied at build time — so it tracks whatever the agent's theme
       actually renders, including if they change themes or repaint their palette
       later. --theme-button-* is Blocksy's (the test site's theme) own semantic
       hook for "what a button looks like"; --wp--preset--color-- is the generic
       block-theme (theme.json) equivalent. Text pairs with its own background
       (button text-on-accent isn't always white — Blocksy's is black), and hover
       is its own separate pair since a theme's hover state is very often not just
       a lighter/darker tint of the base color. */
    --hub-cs-accent: var(--theme-button-background-initial-color, var(--wp--preset--color--primary, #0a6b58));
    --hub-cs-accent-text: var(--theme-button-text-initial-color, #fff);
    --hub-cs-accent-hover: var(--theme-button-background-hover-color, var(--hub-cs-accent));
    --hub-cs-accent-text-hover: var(--theme-button-text-hover-color, var(--hub-cs-accent-text));
    /* Separate hook for text that behaves like a hyperlink (Więcej toggles, Warunki
       uczestnictwa) — pulls the theme's own LINK color, not its button color. On
       most themes these differ; they happen to be the same yellow on the Blocksy
       test site, which is genuine, verified inheritance (--theme-link-initial-color
       really is defined as that yellow there), not a coincidence of reusing the
       button variable for an unrelated role. */
    --hub-cs-link-color: var(--theme-link-initial-color, var(--hub-cs-accent));
    --hub-cs-border: #e2e8f0;
    --hub-cs-surface: #f8fafc;
    /* Every font-size below is calc(var(--hub-cs-base-font) * ratio) instead of a
       flat rem value — rem is ALWAYS relative to <html>, but Blocksy's own font-size
       customizer never touches <html>, only `body` + its own selector list (via
       --theme-font-size, regenerated live in blocksy-dynamic-global-css.php whenever
       the agent changes the setting). rem therefore silently ignored the customizer
       entirely; this tracks the theme's real, current value instead. Defined once
       here (not per-declaration) so nested elements don't compound multiple relative
       steps into each other the way plain em would. */
    --hub-cs-base-font: var(--theme-font-size, 1rem);
    font-family: inherit;
    color: inherit;
}

/* The offer's name and facts written by the server, shown while offer.js loads the rest. */
.hub-cs-offer-intro {
    margin: 0 0 1em;
}
.hub-cs-offer-intro-title {
    margin: 0 0 .35em;
    font-size: 1.6em;
    line-height: 1.25;
}
.hub-cs-offer-intro-text {
    margin: 0;
    opacity: .8;
}
.hub-cs-offer-summary {
    margin-top: 1em;
}
.hub-cs-offer-summary-photo {
    display: block;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1em;
}
.hub-cs-offer-summary-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .6em 1.2em;
    margin: 0 0 1em;
}
.hub-cs-offer-summary-facts dt {
    font-size: .8em;
    text-transform: uppercase;
    opacity: .65;
}
.hub-cs-offer-summary-facts dd {
    margin: 0;
    font-weight: 600;
}
.hub-cs-offer-summary h2 {
    font-size: 1.2em;
    margin: 1.2em 0 .5em;
}
.hub-cs-offer-summary-route,
.hub-cs-offer-summary-cabins {
    margin: 0 0 1em 1.2em;
    padding: 0;
}
.hub-cs-offer-summary-times {
    opacity: .7;
}

.hub-cs-status {
    color: currentColor;
    opacity: .65;
}

.hub-cs-status-loading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 24px 0;
    opacity: .8;
}

.hub-cs-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hub-cs-spin .8s linear infinite;
}

.hub-cs-status-slow {
    flex-basis: 100%;
    font-size: .9em;
    opacity: .8;
}

@keyframes hub-cs-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hub-cs-spinner { animation-duration: 2.4s; }
}

.hub-cs-back {
    /* Colors/font-size/padding all come from .hub-cs-btn/.hub-cs-btn-primary/
       .hub-cs-btn-small in the markup — the exact same classes Zarezerwuj
       rejs/Szukaj/Wybierz/Zobacz ofertę already use, so this is styled
       identically to them, not a separate invented look. Only layout
       positioning lives here. Sits above .hub-cs-top rather than overlaid on
       the gallery image on purpose — the gallery hides itself entirely
       (display:none) when an offer has no photos, which would have taken this
       along with it if it lived inside that container, losing the only way
       back for exactly the offers where a visitor might most want it.
       Shown/hidden by JS (offer.js) based on whether the listing card that
       linked here actually supplied a `back` URL — not every visit originates
       from the listing (direct links, search engines), and there's nothing
       useful to return to in that case. */
    display: inline-block;
    margin-bottom: 14px;
    text-decoration: none;
}

/* ---------------------------------------------------------------- top: gallery + booking */

.hub-cs-top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 380px);
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}

/* Grid items default to min-width: auto (shrink no further than their own content's
   intrinsic width) — without an explicit 0 here, the track itself grows to fit that
   content instead of the content wrapping into the track, which is what actually
   broke mobile: at the 900px breakpoint below the track becomes a single 1fr column,
   but these two children still refused to shrink under ~1100px, pushing everything
   off-screen with no visible horizontal scrollbar (an ancestor's overflow:hidden was
   quietly clipping it instead of showing the overflow). */
.hub-cs-gallery,
.hub-cs-booking {
    min-width: 0;
}

.hub-cs-gallery {
    grid-row: 1 / span 2;
}

.hub-cs-booking {
    grid-column: 2;
    grid-row: 1;
}

.hub-cs-share {
    /* Inside the booking card, under "Warunki uczestnictwa" (map note 17.10.2026). */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hub-cs-border);
    font-size: calc(var(--hub-cs-base-font) * 0.875);
}

.hub-cs-share button.hub-cs-share-link {
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.hub-cs-share-copied {
    flex-basis: 100%;
    text-align: center;
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    color: #1d7a3a;
    min-height: 1em;
}

.hub-cs-share-copied:empty {
    display: none;
}

.hub-cs-share-label {
    opacity: .75;
}

.hub-cs-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 50%;
    color: inherit;
    background: transparent;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.hub-cs-share-link:hover,
.hub-cs-share-link:focus-visible {
    color: inherit;
    background: var(--hub-cs-surface);
    border-color: currentColor;
}

.hub-cs-share-link svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

@media (max-width: 900px) {
    .hub-cs-top {
        grid-template-columns: 1fr;
    }

    .hub-cs-gallery,
    .hub-cs-booking {
        grid-column: 1;
        grid-row: auto;
    }
}

.hub-cs-gallery-main {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--hub-cs-surface);
}

.hub-cs-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-cs-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .92);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--hub-cs-base-font) * 1.125);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.hub-cs-gallery-prev { left: 12px; }
.hub-cs-gallery-next { right: 12px; }

.hub-cs-gallery-counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    padding: 3px 10px;
    border-radius: 20px;
}

.hub-cs-gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.hub-cs-gallery-thumb {
    flex: 0 0 84px;
    width: 84px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: none;
    cursor: pointer;
}

.hub-cs-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-cs-gallery-thumb.is-active {
    border-color: var(--hub-cs-accent);
}

/* ---------------------------------------------------------------- booking card */

.hub-cs-booking {
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    background: #fff;
    padding: 24px;
}

/* Not position: sticky — the fixed bottom bar (.hub-cs-sticky-bar) already keeps
   the price + CTA in reach once this card scrolls away, and the column beside the
   cabins (.hub-cs-side) is the sticky one now. */

.hub-cs-booking-title {
    /* No font-size/color here on purpose — it's a real <h1>, let the theme's own
       h1 rule size and color it (see the file header comment). */
    margin: 0 0 8px;
    line-height: 1.3;
}

/* "Samolotem" / "Autokarem" / "Dojazd własny" — the listing's region-chip pill. */
.hub-cs-booking-chips {
    margin: 0 0 10px;
}

.hub-cs-transport-chip {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    line-height: 1.4;
    font-weight: 600;
}

.hub-cs-booking-meta {
    margin: 0 0 18px;
    opacity: .65;
    font-size: calc(var(--hub-cs-base-font) * .9);
}

.hub-cs-booking-price-label {
    margin: 0;
    font-size: calc(var(--hub-cs-base-font) * .8);
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
}

.hub-cs-price-note {
    text-transform: none;
    letter-spacing: 0;
    opacity: .8;
    font-size: calc(var(--hub-cs-base-font) * .75);
}

.hub-cs-booking-price {
    /* Now a real h3, sitting in a spacious sidebar card (same as the h1 title right
       above it) — no layout reason to fight the theme's own h3 size/weight/color,
       so none of that is set here, only spacing. */
    margin: 2px 0 18px;
    line-height: 1;
}

.hub-cs-btn {
    font-family: inherit;
    padding: 9px 18px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    /* Same reasoning as --hub-cs-accent: a real theme button's own font-size,
       not a guess. Found live (not by design): a plain <button> stayed at the
       0.875rem fallback while <button type="submit"> escaped to Blocksy's real
       --theme-button-font-size, purely because [type="submit"] happened to win a
       CSS specificity tie — i.e. the "wrong" one was accidentally the properly
       inherited one. Made deliberate and consistent for every button here instead
       of leaving it up to a selector-specificity coincidence. */
    font-size: var(--theme-button-font-size, 0.875rem);
}

.hub-cs-btn-block {
    /* No font-size here — .hub-cs-btn's own var(--theme-button-font-size, ...) was
       being silently overridden by this rule (equal specificity, later in the file
       wins), which is exactly what made the offer-card CTA buttons track
       paragraph size instead of the theme's real button size. */
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.hub-cs-btn-primary {
    background: var(--hub-cs-accent);
    border-color: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
}

.hub-cs-btn-primary:hover {
    background: var(--hub-cs-accent-hover);
    border-color: var(--hub-cs-accent-hover);
    color: var(--hub-cs-accent-text-hover);
}

/* Deliberately NOT accent-colored. A secondary action doesn't need its own
   loud color — reserving --hub-cs-accent for the one primary CTA per view
   (Zapytaj o ten rejs / Szukaj / WYBIERZ) is what keeps that button reading as
   "the" action instead of competing with everything else on the page. Plain
   neutral border + inherited text color is also safe on every theme's accent,
   not just this one — a light/pale accent would be unreadable as button text
   the same way a saturated one is harsh, so this sidesteps that per-theme risk
   entirely rather than trying to special-case it. */
.hub-cs-btn-outline {
    background: transparent;
    border-color: var(--hub-cs-border);
    color: inherit;
}

.hub-cs-btn-outline:hover {
    background: var(--hub-cs-surface);
    border-color: var(--hub-cs-border);
    color: inherit;
}

.hub-cs-btn-small {
    /* No font-size here either — same .hub-cs-btn-block issue above. */
    padding: 7px 14px;
    font-weight: 700;
    white-space: nowrap;
}

.hub-cs-terms-link {
    margin: 4px 0 0;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    text-align: center;
}

.hub-cs-terms-link a {
    color: var(--hub-cs-link-color);
    text-decoration: underline;
}

.hub-cs-trust {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--hub-cs-border);
    display: grid;
    gap: 8px;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
}

.hub-cs-trust li {
    padding-left: 20px;
    position: relative;
}

.hub-cs-trust li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--hub-cs-accent);
    font-weight: 700;
}

/* ---------------------------------------------------------------- facts bar */

.hub-cs-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    background: color-mix(in srgb, var(--hub-cs-accent) 10%, #fff);
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    padding: 16px 22px;
    margin-bottom: 28px;
}

.hub-cs-fact {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex: 1 1 150px;
    min-width: 130px;
}

/* Same fix as .hub-cs-daterange-popup[hidden] in search.css: a plain `display`
   declaration on the class always beats the UA stylesheet's `[hidden]` rule, so
   offer.js toggling `factEl.hidden` for providers missing this field (route/ship/
   region) silently did nothing without this override. */
.hub-cs-fact[hidden] {
    display: none;
}

.hub-cs-fact-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    object-fit: contain;
}

.hub-cs-fact-label {
    display: block;
    font-size: calc(var(--hub-cs-base-font) * 0.6875);
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
}

.hub-cs-fact-value {
    display: block;
    font-weight: 600;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    margin-top: 1px;
}

@media (max-width: 600px) {
    .hub-cs-facts {
        gap: 14px 20px;
    }
    .hub-cs-fact {
        flex: 1 1 45%;
    }
}

/* ---------------------------------------------------------------- main layout */

/* "Wybierz kabinę" and the description on the left, "Ceny dla Twojej grupy"
   beside them (map note 17.10.2026); one column when there is no group pricing,
   and on a phone the group box comes between the cabins and the description. */
.hub-cs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-areas: "picker side" "acc side";
    gap: 28px;
    align-items: start;
}

.hub-cs-layout:not(:has(> .hub-cs-side:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "picker" "acc";
}

.hub-cs-cabin-picker {
    grid-area: picker;
    min-width: 0;
}

.hub-cs-side {
    grid-area: side;
    min-width: 0;
    position: sticky;
    top: 110px;
}

.hub-cs-layout > .hub-cs-accordion {
    grid-area: acc;
    min-width: 0;
}

.hub-cs-cabin-picker[hidden],
.hub-cs-cabin-picker-lead[hidden],
.hub-cs-side[hidden],
.hub-cs-cabin-panel[hidden],
.hub-cs-cabin-cats[hidden],
.hub-cs-cabin-tariffs[hidden],
.hub-cs-cabin-tariff-note[hidden],
.hub-cs-gratuities[hidden],
.hub-cs-group-invite[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .hub-cs-layout,
    .hub-cs-layout:not(:has(> .hub-cs-side:not([hidden]))) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "picker" "side" "acc";
    }

    .hub-cs-side {
        position: static;
    }
}

/* ---------------------------------------------------------------- accordion */

.hub-cs-accordion {
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.hub-cs-acc {
    border-top: 1px solid var(--hub-cs-border);
}

.hub-cs-acc:first-child {
    border-top: none;
}

.hub-cs-acc-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}

.hub-cs-acc-label {
    /* No font-size — real h4, theme's own size wins outright. */
    margin: 0;
}

.hub-cs-acc-summary::-webkit-details-marker {
    display: none;
}

.hub-cs-acc-summary::after {
    content: "";
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .5;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.hub-cs-acc[open] > .hub-cs-acc-summary::after {
    transform: rotate(-135deg);
}

.hub-cs-acc-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    object-fit: contain;
}

.hub-cs-acc-body {
    padding: 0 20px 20px 57px;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    line-height: 1.6;
}

@media (max-width: 480px) {
    .hub-cs-acc-body {
        padding-left: 20px;
    }
}

.hub-cs-included-heading {
    margin: 16px 0 8px;
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
}

.hub-cs-included-heading:first-child {
    margin-top: 0;
}

.hub-cs-checklist {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.hub-cs-checklist li {
    padding-left: 22px;
    position: relative;
}

.hub-cs-checklist-yes li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--hub-cs-accent);
    font-weight: 700;
}

.hub-cs-checklist-no li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #d9363e;
    font-weight: 700;
}

.hub-cs-checklist-plain li::before {
    content: "–";
    position: absolute;
    left: 0;
    opacity: .5;
    font-weight: 700;
}

.hub-cs-checklist-item-body {
    opacity: .7;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    margin-top: 2px;
}

.hub-cs-overview-route,
.hub-cs-overview-text p {
    margin: 0 0 12px;
}

.hub-cs-highlights {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.hub-cs-highlights li {
    padding-left: 20px;
    position: relative;
}

.hub-cs-highlights li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--hub-cs-accent);
    font-weight: 700;
}

/* itinerary */

.hub-cs-route-map {
    /* Was a fixed 320px height regardless of width, so on this column's ~770px
       width the map came out close to 2.4:1 -- fitBounds() had to zoom out far
       enough to fill that whole wide-short box, leaving most cruise routes
       (rarely that wide relative to their height) tiny in the middle of a lot
       of empty ocean/land. 4:3 gives the route more vertical room to actually
       fill the frame. */
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

/* Leaflet's own popup chrome, kept minimal rather than pulling in extra plugin CSS */
.hub-cs-route-map .leaflet-popup-content {
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    line-height: 1.4;
}

.hub-cs-itinerary-days {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hub-cs-itinerary-day {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--hub-cs-border);
}

.hub-cs-itinerary-day:first-child {
    border-top: none;
    padding-top: 0;
}

.hub-cs-itinerary-daynum {
    font-size: calc(var(--hub-cs-base-font) * 0.6875);
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .55;
    padding-top: 2px;
}

.hub-cs-itinerary-day-sea .hub-cs-itinerary-daynum {
    opacity: .4;
}

.hub-cs-itinerary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.hub-cs-itinerary-day-sea .hub-cs-itinerary-head strong {
    opacity: .55;
    font-weight: 500;
    font-style: italic;
}

.hub-cs-itinerary-times,
.hub-cs-itinerary-date {
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    opacity: .65;
}

.hub-cs-itinerary-desc,
.hub-cs-cabin-item-desc {
    margin-top: 6px;
}

.hub-cs-itinerary-desc summary,
.hub-cs-cabin-item-desc summary {
    cursor: pointer;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    color: var(--hub-cs-link-color);
}

.hub-cs-cabin-item-desc .hub-cs-cabin-item-description {
    margin-top: 6px;
}

.hub-cs-itinerary-port-desc,
.hub-cs-itinerary-things {
    margin-top: 8px;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    opacity: .85;
}

.hub-cs-itinerary-things ul {
    margin: 4px 0 0;
    padding-left: 20px;
}

/* activities */

.hub-cs-activities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

@media (max-width: 480px) {
    .hub-cs-activities-grid {
        grid-template-columns: 1fr;
    }
}

.hub-cs-activities-col h4 {
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hub-cs-accent);
    margin: 0 0 8px;
}

.hub-cs-activities-col-extra h4 {
    color: currentColor;
    opacity: .55;
}

.hub-cs-activities-col ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.hub-cs-activity-desc {
    opacity: .7;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    margin-top: 2px;
}

.hub-cs-rate-block {
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------- "Wybierz kabinę" */

.hub-cs-cabin-picker .hub-cs-cabin-picker-title {
    /* Real h2, the theme sizes it; only its margin is ours (themes give h2 a big one). */
    margin: 0 0 6px;
}

.hub-cs-cabin-picker-lead {
    margin: 0 0 14px;
    font-size: calc(var(--hub-cs-base-font) * .875);
    opacity: .75;
}

.hub-cs-cabin-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.hub-cs-cabin-picker .hub-cs-cabin-cat {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--hub-cs-border);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hub-cs-cabin-picker .hub-cs-cabin-cat:hover {
    background: #fff;
    color: inherit;
    border-color: color-mix(in srgb, var(--hub-cs-accent) 60%, var(--hub-cs-border));
}

.hub-cs-cabin-picker .hub-cs-cabin-cat[aria-pressed="true"] {
    border-color: #111;
    box-shadow: 0 0 0 3px var(--hub-cs-accent);
}

.hub-cs-cabin-cat-image {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--hub-cs-surface);
}

.hub-cs-cabin-cat-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-cs-cabin-cat-text {
    display: flex;
    flex-direction: column;
    padding: 10px 14px 12px;
}

.hub-cs-cabin-cat-text small {
    font-size: calc(var(--hub-cs-base-font) * .75);
    opacity: .65;
}

.hub-cs-cabin-cat-price {
    font-size: calc(var(--hub-cs-base-font) * 1.25);
    font-weight: 700;
    line-height: 1.2;
}

.hub-cs-cabin-panel {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    background: #fff;
}

.hub-cs-cabin-tariffs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.hub-cs-cabin-picker .hub-cs-cabin-tariff {
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: calc(var(--hub-cs-base-font) * .875);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.hub-cs-cabin-picker .hub-cs-cabin-tariff[aria-pressed="true"] {
    background: #111;
    border-color: #111;
    color: #fff;
}

.hub-cs-cabin-tariff-note {
    margin: 0 0 12px;
    font-size: calc(var(--hub-cs-base-font) * .875);
    opacity: .8;
}

.hub-cs-cabin-rows {
    display: grid;
    border: 1px solid var(--hub-cs-border);
    border-radius: 10px;
    overflow: hidden;
}

.hub-cs-cabin-rows:empty {
    display: none;
}

.hub-cs-cabin-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--hub-cs-border);
}

.hub-cs-cabin-row:first-child {
    border-top: 0;
}

.hub-cs-cabin-row.hub-cs-cabin-is-selected {
    box-shadow: 0 0 0 2px var(--hub-cs-accent) inset;
}

.hub-cs-cabin-row-off {
    opacity: .55;
}

.hub-cs-cabin-row-image {
    display: block;
    width: 76px;
    height: 54px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--hub-cs-surface);
}

.hub-cs-cabin-row-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-cs-cabin-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hub-cs-cabin-row-name {
    font-size: calc(var(--hub-cs-base-font) * .875);
}

.hub-cs-cabin-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    font-size: calc(var(--hub-cs-base-font) * .75);
    opacity: .75;
}

.hub-cs-cabin-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}

.hub-cs-cabin-row-price {
    font-weight: 700;
    white-space: nowrap;
}

.hub-cs-group-invite {
    padding: 20px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--hub-cs-accent) 10%, #fff);
}

.hub-cs-group-invite h3 {
    margin: 0 0 6px;
}

.hub-cs-group-invite p {
    margin: 0 0 14px;
    font-size: calc(var(--hub-cs-base-font) * .875);
}

.hub-cs-side .hub-cs-group-results {
    padding: 20px;
    margin-bottom: 0;
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    background: #fff;
}

@media (max-width: 600px) {
    .hub-cs-cabin-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hub-cs-cabin-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .hub-cs-cabin-row-image {
        width: 56px;
        height: 42px;
    }

    .hub-cs-cabin-row-side {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.hub-cs-cabin-category {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--hub-cs-border);
    border-radius: 10px;
    padding: 12px;
}

.hub-cs-cabin-category.hub-cs-cabin-is-selected,
.hub-cs-cabin-row.hub-cs-cabin-is-selected {
    border-color: var(--hub-cs-accent);
    box-shadow: 0 0 0 1px var(--hub-cs-accent) inset;
}

.hub-cs-cabin-category-image {
    flex: 0 0 84px;
    width: 84px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--hub-cs-surface);
}

.hub-cs-cabin-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-cs-cabin-category-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hub-cs-cabin-category-content > strong {
    font-size: calc(var(--hub-cs-base-font) * 0.875);
}

.hub-cs-cabin-category-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.hub-cs-cabin-category-price {
    font-weight: 700;
    color: inherit;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
}

.hub-cs-cabin-item-description {
    margin: 2px 0 0;
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    line-height: 1.5;
    opacity: .7;
    white-space: pre-line;
}

.hub-cs-cabin-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.hub-cs-cabin-status {
    font-size: calc(var(--hub-cs-base-font) * 0.6875);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--hub-cs-accent);
    white-space: nowrap;
}

.hub-cs-cabin-status-sold-out {
    color: #b33;
}

.hub-cs-cabin-item-original-price {
    font-weight: 400;
    opacity: .55;
    text-decoration: line-through;
    margin-right: 8px;
}

.hub-cs-gratuities {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--hub-cs-border);
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    opacity: .65;
}

/* ---------------------------------------------------------------- sticky bottom bar */

.hub-cs-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    background: #fff;
    border-top: 1px solid var(--hub-cs-border);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
    transform: translateY(100%);
    transition: transform .2s ease;
    font-family: inherit;
    color: inherit;
}

.hub-cs-sticky-bar.is-visible {
    transform: translateY(0);
}

.hub-cs-sticky-image {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
}

.hub-cs-sticky-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.hub-cs-sticky-info h3 {
    /* No font-size — real h3, theme's own size wins outright. */
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-cs-sticky-info span {
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    opacity: .65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-cs-sticky-price {
    /* No font-size — real h3, theme's own size wins outright. */
    margin: 0;
    font-weight: 800;
    color: inherit;
    white-space: nowrap;
}

.hub-cs-sticky-bar .hub-cs-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- inquiry modal */

html.hub-cs-modal-open {
    overflow: hidden;
}

.hub-cs-inquiry-modal[hidden],
.hub-cs-inquiry-form[hidden],
.hub-cs-inquiry-success[hidden],
[data-hub-cs-children-ages][hidden] {
    display: none !important;
}

.hub-cs-inquiry-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    box-sizing: border-box;
}

.hub-cs-inquiry-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.hub-cs-inquiry-dialog {
    position: relative;
    width: min(960px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    box-sizing: border-box;
    border-radius: var(--hub-cs-card-radius, 14px);
    background: #fff;
    color: inherit;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .25);
    outline: none;
}

.hub-cs-inquiry-header {
    padding: 28px 32px 22px;
    border-bottom: 1px solid var(--hub-cs-border);
}

.hub-cs-inquiry-header h2 {
    margin: 0;
    color: inherit;
}

.hub-cs-inquiry-header p {
    margin: 7px 0 0;
    opacity: .68;
}

.hub-cs-inquiry-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--hub-cs-border);
    border-radius: 50%;
    background: var(--hub-cs-surface);
    color: inherit;
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.hub-cs-inquiry-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 18px;
    margin: 22px 32px 0;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--hub-cs-surface);
}

.hub-cs-inquiry-offer span,
.hub-cs-inquiry-offer strong,
.hub-cs-inquiry-offer small {
    display: block;
}

.hub-cs-inquiry-offer small {
    margin-bottom: 3px;
    opacity: .62;
    font-size: calc(var(--hub-cs-base-font) * .75);
}

.hub-cs-inquiry-offer strong {
    font-size: calc(var(--hub-cs-base-font) * .875);
}

.hub-cs-inquiry-form {
    padding: 26px 32px 34px;
}

.hub-cs-inquiry-form fieldset {
    margin: 0 0 28px;
    padding: 0;
    border: 0;
}

.hub-cs-inquiry-form legend {
    width: 100%;
    margin: 0 0 5px;
    padding: 0;
    color: inherit;
    font-size: calc(var(--hub-cs-base-font) * 1.2);
    font-weight: 750;
}

.hub-cs-inquiry-section-note {
    margin: 0 0 17px;
    opacity: .65;
    font-size: calc(var(--hub-cs-base-font) * .8125);
}

.hub-cs-inquiry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.hub-cs-inquiry-grid label,
.hub-cs-inquiry-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hub-cs-inquiry-grid label > span,
.hub-cs-inquiry-message > span,
.hub-cs-inquiry-intent > span,
.hub-cs-inquiry-history > span {
    font-size: calc(var(--hub-cs-base-font) * .875);
    font-weight: 650;
}

.hub-cs-inquiry-form em {
    color: #bd3030;
    font-style: normal;
}

.hub-cs-inquiry-form input[type="text"],
.hub-cs-inquiry-form input[type="email"],
.hub-cs-inquiry-form input[type="tel"],
.hub-cs-inquiry-form input[type="number"],
.hub-cs-inquiry-form select,
.hub-cs-inquiry-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--hub-cs-border);
    border-radius: var(--hub-cs-button-radius, 7px);
    background: #fff;
    color: inherit;
    font: inherit;
    outline: none;
}

.hub-cs-inquiry-form input:focus,
.hub-cs-inquiry-form select:focus,
.hub-cs-inquiry-form textarea:focus {
    border-color: var(--hub-cs-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-cs-accent) 18%, transparent);
}

.hub-cs-inquiry-grid small,
.hub-cs-inquiry-choices small {
    display: block;
    opacity: .65;
    font-size: calc(var(--hub-cs-base-font) * .75);
}

.hub-cs-inquiry-full {
    grid-column: 1 / -1;
}

.hub-cs-inquiry-intent,
.hub-cs-inquiry-history,
.hub-cs-inquiry-message,
.hub-cs-inquiry-consent {
    margin-top: 20px;
}

.hub-cs-inquiry-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.hub-cs-inquiry-choices > label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 13px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 9px;
    cursor: pointer;
}

.hub-cs-inquiry-choices > label:has(input:checked) {
    border-color: var(--hub-cs-accent);
    background: color-mix(in srgb, var(--hub-cs-accent) 6%, white);
}

.hub-cs-inquiry-choices input,
.hub-cs-inquiry-consent input,
.hub-cs-inquiry-history input {
    accent-color: var(--hub-cs-accent);
}

.hub-cs-inquiry-choices input {
    margin-top: 3px;
}

.hub-cs-inquiry-history > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.hub-cs-inquiry-history label {
    padding: 7px 11px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 999px;
    font-size: calc(var(--hub-cs-base-font) * .8125);
    cursor: pointer;
}

.hub-cs-inquiry-message textarea {
    min-height: 118px;
    resize: vertical;
}

.hub-cs-inquiry-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: calc(var(--hub-cs-base-font) * .8125);
    line-height: 1.5;
}

.hub-cs-inquiry-consent input {
    margin-top: 4px;
}

.hub-cs-inquiry-turnstile {
    margin-top: 18px;
}

.hub-cs-inquiry-error {
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: 8px;
    background: #fdeaea;
    color: #8d2424;
    font-size: calc(var(--hub-cs-base-font) * .875);
}

.hub-cs-inquiry-submit {
    display: block;
    margin-left: auto;
    padding: 13px 24px;
    font-weight: 750;
}

.hub-cs-inquiry-submit:disabled {
    opacity: .62;
    cursor: wait;
}

.hub-cs-inquiry-success {
    padding: 62px 32px 70px;
    text-align: center;
}

.hub-cs-inquiry-success > span {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #dff6e8;
    color: #157a43;
    font-size: 28px;
    font-weight: 800;
}

.hub-cs-inquiry-success h3 {
    margin: 18px 0 7px;
    color: inherit;
}

.hub-cs-inquiry-success p {
    margin: 0;
    opacity: .68;
}

.hub-cs-inquiry-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

@media (max-width: 700px) {
    .hub-cs-inquiry-modal {
        padding: 0;
        place-items: stretch;
    }

    .hub-cs-inquiry-dialog {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .hub-cs-inquiry-header,
    .hub-cs-inquiry-form {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hub-cs-inquiry-header {
        padding-right: 64px;
    }

    .hub-cs-inquiry-offer {
        margin-left: 20px;
        margin-right: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hub-cs-inquiry-offer span:first-child {
        grid-column: 1 / -1;
    }

    .hub-cs-inquiry-grid,
    .hub-cs-inquiry-choices {
        grid-template-columns: 1fr;
    }

    .hub-cs-inquiry-full {
        grid-column: auto;
    }

    .hub-cs-inquiry-submit {
        width: 100%;
    }
}

/* Below 560px (every real phone) this used to hide the offer name entirely, not
   just the thumbnail — losing the one piece of context that says which offer this
   bar is even for. Only the image (purely decorative here) is dropped now; the
   name stays, truncated by .hub-cs-sticky-info's own ellipsis handling so it still
   fits next to the price and button. */
@media (max-width: 560px) {
    .hub-cs-sticky-image {
        display: none;
    }
}

.hub-cs-offer.hub-cs-has-sticky-bar {
    padding-bottom: 74px;
}

/* Ship name -> its [hub_statek] page (see offer.js's setShipLink()). Keeps the
   surrounding text's look; the underline alone marks it as a link. */
.hub-cs-ship-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hub-cs-ship-link:hover {
    color: var(--hub-cs-link-color);
}

/* "Warianty tego rejsu" — fare variants of the same sailing (see fillVariants()).
   A standalone collapsed accordion row (.hub-cs-acc summary/body styles above),
   full width above the main layout. */
.hub-cs-variants {
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 28px;
}

.hub-cs-variants[hidden] {
    display: none;
}

.hub-cs-variants-count {
    font-weight: 400;
    color: #64748b;
}

/* The price takes the free space; the chevron (::after) sits right after it. */
.hub-cs-variants > .hub-cs-acc-summary::after {
    margin-left: 4px;
}

.hub-cs-variants-from {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}

.hub-cs-variants-note {
    margin: 0 0 12px;
    color: #64748b;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
}

.hub-cs-variants-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hub-cs-variant {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 6px 18px;
    padding: 10px 12px;
    margin: 0;
    border-top: 1px solid var(--hub-cs-border);
}

.hub-cs-variant:first-child {
    border-top: 0;
}

.hub-cs-variant.is-current {
    background: color-mix(in srgb, var(--hub-cs-accent) 10%, #fff);
    border-radius: 8px;
}

.hub-cs-variant-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hub-cs-variant-details,
.hub-cs-variant-route {
    color: #64748b;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
}

.hub-cs-variant-price {
    font-weight: 700;
    white-space: nowrap;
}

.hub-cs-variant-action {
    white-space: nowrap;
    font-weight: 600;
    color: var(--hub-cs-link-color);
}

.hub-cs-variant-action.is-current {
    color: #64748b;
    font-weight: 400;
}

@media (max-width: 600px) {
    .hub-cs-variant {
        grid-template-columns: 1fr auto;
    }

    .hub-cs-variant-main {
        grid-column: 1 / -1;
    }
}

/* ---- Podobne rejsy (offer.js loadSimilar): a sideways strip of small cards ---- */
.hub-cs-similar {
    margin: 40px 0 24px;
}

.hub-cs-similar[hidden] {
    display: none;
}

.hub-cs-similar-heading {
    margin: 0 0 4px;
}

.hub-cs-similar-lead {
    margin: 0 0 14px;
    color: #5b6670;
}

.hub-cs-similar-list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px;
}

.hub-cs-similar-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    border: 1px solid #e2e6ea;
    border-radius: var(--hub-cs-card-radius, 12px);
    background: #fff;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow .15s;
}

.hub-cs-similar-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}

.hub-cs-similar-photo {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    background: #eef1f4;
}

.hub-cs-similar-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}

.hub-cs-similar-price {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text, #fff);
    font-size: 14px;
    font-weight: 700;
}

.hub-cs-similar-title {
    padding: 0 12px;
    font-size: 15px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-cs-similar-meta {
    padding: 0 12px 12px;
    color: #5b6670;
    font-size: 13px;
}

@media (max-width: 600px) {
    .hub-cs-similar-card {
        flex-basis: 78%;
    }
}

/* Breadcrumbs (Hub_CS_Seo::breadcrumbs(), same look as the weather and port pages). */
.hub-cs-wx-crumbs { font-size: .875em; opacity: .75; margin-bottom: .75em; }
.hub-cs-wx-crumbs a { color: inherit; }

/* ---------------------------------------------------------------- group prices ("Cena dla 3/4 osób lub z dziećmi") */

.hub-cs-group-open[hidden],
.hub-cs-group-results[hidden],
.hub-cs-group-modal[hidden],
.hub-cs-group-form[hidden],
.hub-cs-group-loading[hidden],
.hub-cs-group-age[hidden],
.hub-cs-group-limit[hidden] {
    display: none !important;
}

.hub-cs-group-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hub-cs-group-open svg {
    flex: none;
}

.hub-cs-group-dialog {
    width: min(500px, 100%);
}

.hub-cs-group-form {
    padding: 8px 32px 30px;
}

.hub-cs-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hub-cs-border);
}

.hub-cs-group-label {
    font-weight: 700;
}

.hub-cs-group-label small {
    display: block;
    font-weight: 400;
    opacity: .65;
    font-size: calc(var(--hub-cs-base-font) * .75);
}

.hub-cs-group-step {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hub-cs-group-step button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--hub-cs-border);
    border-radius: 50%;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.hub-cs-group-step button:hover {
    background: var(--hub-cs-surface);
}

.hub-cs-group-step output {
    min-width: 20px;
    text-align: center;
    font-weight: 700;
}

.hub-cs-group-age {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0 0;
}

.hub-cs-group-age > span {
    white-space: nowrap;
}

.hub-cs-group-age select {
    flex: 0 0 auto;
    width: auto;
    min-width: 160px;
    font: inherit;
    padding: 8px 10px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 6px;
    background: #fff;
    color: inherit;
}

.hub-cs-group-limit {
    margin: 12px 0 0;
    color: #b33;
    font-size: calc(var(--hub-cs-base-font) * .8125);
}

.hub-cs-group-form .hub-cs-inquiry-error {
    margin-top: 14px;
}

.hub-cs-group-form [data-hub-cs-group-submit] {
    margin: 22px 0 0;
}

.hub-cs-group-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 34px 32px 40px;
    text-align: center;
}

.hub-cs-group-loading > span:last-child {
    opacity: .68;
    font-size: calc(var(--hub-cs-base-font) * .875);
}

.hub-cs-group-spinner {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    border: 4px solid var(--hub-cs-surface);
    border-top-color: var(--hub-cs-accent);
    border-radius: 50%;
    animation: hub-cs-group-spin 1s linear infinite;
}

@keyframes hub-cs-group-spin {
    to { transform: rotate(360deg); }
}

.hub-cs-group-results {
    /* Clear of a theme's sticky header when scrolled into view. */
    scroll-margin-top: 120px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hub-cs-border);
}

/* Map note 16.10.2026: the group price is not final until an advisor confirms it. */
.hub-cs-group-confirm {
    margin: -4px 0 8px;
    font-size: calc(var(--hub-cs-base-font) * .875);
    font-weight: 600;
}

.hub-cs-group-who {
    margin: 0 0 12px;
    font-size: calc(var(--hub-cs-base-font) * .875);
}

.hub-cs-group-change {
    padding: 0;
    border: 0;
    background: none;
    color: var(--hub-cs-link-color);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.hub-cs-group-list {
    display: grid;
    gap: 10px;
}

/* The accent may be a pale theme colour (yellow) — unreadable as small text. */
.hub-cs-group-cabin .hub-cs-cabin-status:not(.hub-cs-cabin-status-sold-out) {
    color: #1d7a3a;
}

.hub-cs-group-cabin-off {
    opacity: .55;
}

.hub-cs-group-price small {
    display: block;
    opacity: .68;
    font-size: calc(var(--hub-cs-base-font) * .75);
}

.hub-cs-group-price .hub-cs-cabin-category-price {
    font-size: var(--hub-cs-base-font);
}

.hub-cs-group-note {
    margin: 12px 0 0;
    opacity: .7;
    font-size: calc(var(--hub-cs-base-font) * .75);
}

@media (max-width: 700px) {
    .hub-cs-group-form,
    .hub-cs-group-loading {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.hub-cs-group-sorry {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--hub-cs-surface);
}

.hub-cs-group-advisor {
    margin: 4px 0 0;
}

/* A cruise with a Polish guide: a small Polish flag in the photo's top right
   corner (map note 18.10.2026). Drawn, not an emoji: Windows shows the flag
   emoji as the letters "PL". Same rule in boxes.css for the offer boxes. */
.hub-cs-pilot-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 27px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(#fff 0 50%, #dc143c 50% 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    z-index: 1;
}


/* tray.css */
/* Compare and recently viewed (assets/tray.js). Floating parts live on <body>,
   outside any .hub-cs-* scope, so the accent is defined here once more. */
.hub-cs-compare-fab,
.hub-cs-viewed-fab,
.hub-cs-tray-modal,
.hub-cs-compare-add,
.hub-cs-tray-toast {
    --hub-cs-tray-accent: var(--hub-cs-accent, var(--theme-button-background-initial-color, var(--wp--preset--color--primary, #0a6b58)));
    --hub-cs-tray-accent-text: var(--hub-cs-accent-text, var(--theme-button-text-initial-color, #fff));
    font-family: var(--hub-cs-font-family, inherit);
    box-sizing: border-box;
}

/* ---- "+" on cards ---- */
.hub-cs-row,
.hub-cs-box-card {
    position: relative;
}

.hub-cs-compare-add {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: 2px solid var(--hub-cs-tray-accent);
    border-radius: 50%;
    background: #fff;
    color: var(--hub-cs-tray-accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background .15s, color .15s, transform .15s;
}

.hub-cs-compare-add:hover,
.hub-cs-compare-add:focus-visible {
    transform: scale(1.08);
}

.hub-cs-compare-add.is-added {
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    font-size: 17px;
}

/* Tooltip: below the button, inside the card (cards clip their overflow). */
.hub-cs-compare-add::after,
.hub-cs-compare-fab::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    padding: 5px 9px;
    border-radius: 6px;
    background: #1d2733;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}

.hub-cs-compare-add:hover::after,
.hub-cs-compare-add:focus-visible::after,
.hub-cs-compare-fab:hover::after,
.hub-cs-compare-fab:focus-visible::after {
    opacity: 1;
}

/* Listing row: the button sits over the ship/price column, which gets room for it. */
.hub-cs-row .hub-cs-row-side {
    padding-top: 40px;
}

/* Offer page: top right corner of the title/price/"Zapytaj" block. */
.hub-cs-booking {
    position: relative;
}

.hub-cs-booking > .hub-cs-compare-add {
    top: 0;
    right: 0;
}

.hub-cs-booking > .hub-cs-booking-chips,
.hub-cs-booking > .hub-cs-booking-title {
    padding-right: 44px;
}

/* ---- Floating buttons ---- */
.hub-cs-compare-fab {
    position: fixed;
    top: 110px;
    right: 18px;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
    cursor: pointer;
}

.hub-cs-compare-fab[hidden],
.hub-cs-viewed-fab[hidden] {
    display: none;
}

.hub-cs-compare-fab img {
    width: 40px;
    height: auto;
    display: block;
}

.hub-cs-compare-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.hub-cs-viewed-fab {
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 9990;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    rotate: 180deg;
    padding: 16px 10px;
    border: 0;
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

/* rotate: 180deg (text read bottom to top) flips the corners too: these land on the screen's right. */
.hub-cs-viewed-fab {
    border-radius: 10px 0 0 10px;
}

@media (max-width: 600px) {
    .hub-cs-compare-fab {
        top: auto;
        bottom: 84px;
        right: 12px;
        width: 54px;
        height: 54px;
    }

    .hub-cs-compare-fab img {
        width: 34px;
    }

    .hub-cs-viewed-fab {
        padding: 12px 8px;
        font-size: 12px;
    }
}

/* ---- Dialogs ---- */
html.hub-cs-tray-locked {
    overflow: hidden;
}

.hub-cs-tray-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.hub-cs-tray-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 30, .55);
}

.hub-cs-tray-dialog {
    position: relative;
    width: min(1000px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: #fff;
    color: #1d2733;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.hub-cs-viewed-modal .hub-cs-tray-dialog {
    width: min(560px, 100%);
}

.hub-cs-tray-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e8ebee;
}

.hub-cs-tray-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.hub-cs-tray-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f3f5;
    color: #1d2733;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.hub-cs-tray-body {
    padding: 16px 20px 20px;
    overflow: auto;
}

.hub-cs-tray-empty,
.hub-cs-tray-note {
    margin: 0;
    color: #5b6670;
}

.hub-cs-tray-note {
    margin-top: 12px;
    font-size: 14px;
}

/* Comparison table: one column per cruise, scrolls sideways on a phone. */
.hub-cs-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hub-cs-compare-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.hub-cs-compare-table th,
.hub-cs-compare-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #eef0f2;
    text-align: left;
    vertical-align: top;
}

.hub-cs-compare-table th {
    width: 120px;
    color: #5b6670;
    font-weight: 600;
}

.hub-cs-compare-table tr:last-child th,
.hub-cs-compare-table tr:last-child td {
    border-bottom: 0;
}

.hub-cs-compare-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: 8px;
    border: 2px dashed #d5dbe1;
    border-radius: 10px;
    color: #8a96a3;
    font-size: 13px;
    text-align: center;
}

.hub-cs-compare-photo {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    overflow: hidden;
    background: #eef1f4;
}

.hub-cs-compare-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}

.hub-cs-compare-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1d2733;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.hub-cs-compare-title {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.hub-cs-compare-title:hover {
    text-decoration: underline;
}

.hub-cs-compare-price {
    color: var(--hub-cs-tray-accent);
    font-size: 17px;
}

.hub-cs-tray-modal .hub-cs-compare-cta {
    display: inline-block;
    padding: 9px 14px;
    border-radius: var(--hub-cs-button-radius, 5px);
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    font-weight: 600;
    text-decoration: none;
}

/* Recently viewed list. */
.hub-cs-viewed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.hub-cs-viewed-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.hub-cs-viewed-item:hover {
    background: #f3f5f7;
}

.hub-cs-viewed-photo {
    flex: 0 0 96px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef1f4;
}

.hub-cs-viewed-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}

.hub-cs-viewed-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 13px;
    color: #5b6670;
}

.hub-cs-viewed-text strong {
    color: #1d2733;
    font-size: 15px;
    line-height: 1.3;
}

.hub-cs-viewed-price {
    color: var(--hub-cs-tray-accent);
    font-weight: 700;
}

.hub-cs-tray-clear {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: #5b6670;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.hub-cs-tray-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100000;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: 10px;
    background: #1d2733;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    transition: opacity .5s;
}

.hub-cs-tray-toast.is-gone {
    opacity: 0;
}

/* Footer of both dialogs: share the list and download it as PDF (map note
   17.10.2026). Colours come from the theme's button colour like the rest of
   the tray (--hub-cs-tray-accent) — yellow, orange or blue, whatever the site uses. */
.hub-cs-tray-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 14px 20px;
    border-top: 1px solid #e8ebee;
    background: #fafbfc;
}

.hub-cs-tray-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hub-cs-tray-share-label {
    margin-right: 2px;
    color: #44505c;
    font-size: 14px;
}

.hub-cs-tray-modal .hub-cs-tray-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid #dfe3e8;
    border-radius: 50%;
    background: #fff;
    color: #1d2733;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hub-cs-tray-modal .hub-cs-tray-share-icon:hover,
.hub-cs-tray-modal .hub-cs-tray-share-icon:focus-visible {
    border-color: var(--hub-cs-tray-accent);
    box-shadow: 0 0 0 1px var(--hub-cs-tray-accent) inset;
    color: #1d2733;
    background: #fff;
}

.hub-cs-tray-modal .hub-cs-tray-share-icon svg,
.hub-cs-tray-modal .hub-cs-tray-native-share svg,
.hub-cs-tray-modal .hub-cs-tray-pdf svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex: none;
}

.hub-cs-tray-modal .hub-cs-tray-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--hub-cs-button-radius, 5px);
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.hub-cs-tray-modal .hub-cs-tray-pdf:hover {
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    filter: brightness(.95);
}

.hub-cs-tray-modal .hub-cs-tray-pdf.is-busy {
    cursor: progress;
    opacity: .85;
}

.hub-cs-tray-modal .hub-cs-tray-pdf.is-busy svg {
    display: none;
}

.hub-cs-tray-modal .hub-cs-tray-pdf.is-busy::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hub-cs-tray-spin .8s linear infinite;
}

@keyframes hub-cs-tray-spin {
    to { transform: rotate(360deg); }
}

.hub-cs-tray-modal .hub-cs-tray-native-share {
    display: none;
}

.hub-cs-tray-shared {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--hub-cs-tray-accent) 12%, #fff);
    font-size: 14px;
}

.hub-cs-tray-shared button {
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #1d2733;
    border-radius: var(--hub-cs-button-radius, 5px);
    background: #fff;
    color: #1d2733;
    font: inherit;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

@media (max-width: 640px) {
    .hub-cs-tray-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .hub-cs-tray-modal .hub-cs-tray-pdf {
        order: 1;
        justify-content: center;
        width: 100%;
    }

    .hub-cs-tray-share {
        order: 2;
        justify-content: center;
    }

    /* With the phone's own share sheet, one button instead of the icons. */
    .hub-cs-tray-foot.has-native-share .hub-cs-tray-share-label,
    .hub-cs-tray-foot.has-native-share .hub-cs-tray-share-icon {
        display: none;
    }

    .hub-cs-tray-foot.has-native-share .hub-cs-tray-native-share {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 12px;
        border: 1px solid #dfe3e8;
        border-radius: var(--hub-cs-button-radius, 5px);
        background: #fff;
        color: #1d2733;
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        text-transform: none;
        cursor: pointer;
    }
}

/* "×" on each recently viewed row (map note 17.10.2026). */
.hub-cs-viewed-list > li {
    position: relative;
}

.hub-cs-viewed-list > li > .hub-cs-viewed-item {
    padding-right: 44px;
}

.hub-cs-tray-modal .hub-cs-viewed-remove {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    margin: -15px 0 0;
    padding: 0;
    border: 1px solid #dfe3e8;
    border-radius: 50%;
    background: #fff;
    color: #5b6670;
    font: inherit;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.hub-cs-tray-modal .hub-cs-viewed-remove:hover,
.hub-cs-tray-modal .hub-cs-viewed-remove:focus-visible {
    border-color: #b33;
    background: #fff;
    color: #b33;
}


/* appearance.css */
/* User-configurable presentation layer. Empty variables keep component/theme defaults. */
.hub-cs-search,
.hub-cs-frontsearch,
.hub-cs-offer {
    font-family: var(--hub-cs-font-family, inherit);
    color: var(--hub-cs-text-custom, inherit);
}

.hub-cs-btn,
.hub-cs-box-card-cta,
.hub-cs-offer button,
.hub-cs-offer input[type="submit"] {
    border-radius: var(--hub-cs-button-radius, 5px);
}

.hub-cs-row,
.hub-cs-box-card {
    border-radius: var(--hub-cs-card-radius, 14px);
    background: var(--hub-cs-surface-custom, #fff);
    box-shadow: var(--hub-cs-card-shadow, none);
}

.hub-cs-row:hover,
.hub-cs-box-card:hover {
    box-shadow: var(--hub-cs-card-shadow, 0 4px 14px rgba(0,0,0,.1));
}

.hub-cs-sidebar,
.hub-cs-booking,
.hub-cs-accordion,
.hub-cs-cabin-group,
.hub-cs-inquiry,
.hub-cs-offer-section {
    border-radius: var(--hub-cs-card-radius, 12px);
}

.hub-cs-booking,
.hub-cs-accordion,
.hub-cs-cabin-group,
.hub-cs-inquiry {
    background: var(--hub-cs-surface-custom, #fff);
    box-shadow: var(--hub-cs-card-shadow, none);
}