.hub-cs-frontsearch {
    --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));
    --hub-cs-base-font: var(--theme-font-size, 1rem);
    font-family: inherit;
}

.hub-cs-frontsearch-mobile-trigger,
.hub-cs-frontsearch-mobile-header,
.hub-cs-frontsearch-mobile-pilot,
.hub-cs-frontsearch-mobile-tabs,
.hub-cs-frontsearch-mobile-question,
.hub-cs-frontsearch-mobile-progress,
.hub-cs-frontsearch-mobile-footer {
    display: none;
}

.hub-cs-frontsearch-daterange,
.hub-cs-frontsearch-region,
.hub-cs-frontsearch-operator {
    position: relative;
}

.hub-cs-frontsearch-daterange .hub-cs-daterange-popup,
.hub-cs-frontsearch-region .hub-cs-daterange-popup,
.hub-cs-frontsearch-operator .hub-cs-daterange-popup {
    top: calc(100% + 18px);
    left: 0;
    margin-left: 0;
}

.hub-cs-region-popup { width: 500px; }
.hub-cs-region-grid { column-count: 2; column-gap: 16px; }
.hub-cs-region-option { display: flex; width: 100%; align-items: center; gap: 8px; break-inside: avoid; margin-bottom: 2px; padding: 7px 8px; border: 0; border-radius: 5px; color: inherit; background: none; font: inherit; font-size: inherit; text-align: left; cursor: pointer; }
.hub-cs-region-option:hover { background: color-mix(in srgb, var(--hub-cs-accent) 15%, #fff); }
.hub-cs-region-option.is-selected { color: var(--hub-cs-accent-text); background: var(--hub-cs-accent); }
.hub-cs-region-option-plus { width: 16px; flex: 0 0 auto; color: var(--hub-cs-accent); font-weight: 700; text-align: center; }
.hub-cs-region-option.is-selected .hub-cs-region-option-plus { visibility: hidden; }
.hub-cs-region-option-label { overflow: hidden; text-overflow: ellipsis; }

.hub-cs-nights-buckets { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-cs-nights-bucket-btn { flex: 1 1 auto; padding: 7px 4px; border: 1px solid #ccc; border-radius: 999px; color: inherit; background: #fff; font: inherit; font-size: calc(var(--hub-cs-base-font) * .8125); white-space: nowrap; cursor: pointer; }
.hub-cs-nights-bucket-btn:hover:not(.is-selected) { background: color-mix(in srgb, var(--hub-cs-accent) 15%, #fff); }
.hub-cs-nights-bucket-btn.is-selected { border-color: var(--hub-cs-accent); color: var(--hub-cs-accent-text); background: var(--hub-cs-accent); font-weight: 600; }

.hub-cs-operator-popup { width: 480px; }
.hub-cs-operator-columns { display: flex; gap: 16px; }
.hub-cs-operator-column { display: flex; max-height: 280px; min-width: 0; flex: 1 1 50%; flex-direction: column; gap: 2px; overflow-y: auto; }
.hub-cs-operator-column-ships { padding-left: 16px; border-left: 1px solid #eee; }
.hub-cs-operator-option { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; color: inherit; background: none; font: inherit; font-size: inherit; text-align: left; cursor: pointer; }
.hub-cs-operator-option:hover { background: color-mix(in srgb, var(--hub-cs-accent) 15%, #fff); }
.hub-cs-operator-option.is-selected { color: var(--hub-cs-accent-text); background: var(--hub-cs-accent); }
.hub-cs-ship-option { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 5px; font-size: inherit; cursor: pointer; }
.hub-cs-ship-option:hover { background: color-mix(in srgb, var(--hub-cs-accent) 15%, #fff); }
.hub-cs-ship-option.is-checked { background: color-mix(in srgb, var(--hub-cs-accent) 30%, #fff); font-weight: 600; }
.hub-cs-ship-option input[type="checkbox"] { width: auto; accent-color: var(--hub-cs-accent); }
.hub-cs-operator-ships-empty { margin: 0; padding: 7px 8px; color: #888; font-size: calc(var(--hub-cs-base-font) * .8125); }

@media (min-width: 701px) {
    /*
     * position:relative + a very high z-index here, not just on the OPEN
     * field below: .hub-cs-frontsearch itself was `position: static` (its
     * default), so it had no z-index of its own and no real stacking
     * context — .hub-cs-frontsearch-field.is-field-open's z-index:2 only has
     * authority WITHIN whatever ancestor context this widget happens to
     * land in on a given page, same root cause search.css's own
     * .hub-cs-sidebar fix already documents (see its comment): a LATER
     * WordPress block/section on the page, even with no z-index of its own,
     * paints over an earlier static ancestor's entire subtree once ANY of
     * ITS OWN descendants (or the block itself) creates a stacking context.
     * Every page built in the block editor stacks its blocks differently,
     * which is exactly why this kept recurring on each NEW page ("znów")
     * instead of being a one-time fix — there's no fixed z-index some other
     * block can't eventually exceed unless this widget claims its OWN
     * top-level context, at the same "always wins" magnitude already used
     * for the mobile fullscreen popup below.
     *
     * Only while a dropdown is open (map note 14.10): a closed bar at that
     * level sat over the theme's sticky menu and the "Ostatnio oglądane" /
     * "Porównanie rejsów" buttons and dialogs. Closed, it keeps its own
     * context at a low level, so the page's own fixed elements stay on top.
     */
    .hub-cs-frontsearch { position: relative; z-index: 1; box-sizing: border-box; display: block; height: 82px; min-height: 82px; padding: 8px; border: 1px solid #bfc2c6; border-radius: 999px; background: #fff; box-shadow: 0 8px 22px rgba(20,30,45,.24); transition: background .16s ease; }
    .hub-cs-frontsearch.is-popup-open { background: #d0d0d0; }
    .hub-cs-frontsearch.is-popup-open, .hub-cs-frontsearch:focus-within { z-index: 2147483000; }
    .hub-cs-frontsearch > form { display: grid; height: 64px; grid-template-columns: 1.12fr 1fr 1.08fr 1.26fr auto 64px; align-items: stretch; gap: 0; }
    .hub-cs-frontsearch-field { position: relative; display: flex; box-sizing: border-box; min-width: 0; height: 64px; flex-direction: column; justify-content: center; gap: 2px; padding: 9px 20px; border-radius: 999px; font-size: calc(var(--hub-cs-base-font) * .8125); cursor: pointer; transition: background .16s ease, box-shadow .16s ease; }
    .hub-cs-frontsearch-field::after { position: absolute; top: 11px; right: 0; bottom: 11px; width: 1px; background: #aaaeb3; content: ""; }
    .hub-cs-frontsearch-field.is-field-open { z-index: 2; background: #fff; box-shadow: 0 3px 10px rgba(20,30,45,.14); }
    .hub-cs-frontsearch-field.is-field-open::after, .hub-cs-frontsearch-checkbox::after { display: none; }
    .hub-cs-frontsearch-field > label { margin: 0; color: inherit; font-size: calc(var(--hub-cs-base-font) * .875); font-weight: 400; line-height: 1.05; cursor: pointer; }
    .hub-cs-frontsearch .hub-cs-daterange-toggle { overflow: hidden; padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; font-size: var(--hub-cs-base-font); font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
    .hub-cs-frontsearch .hub-cs-typeahead input.hub-cs-typeahead-input { height: 36px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: calc(var(--hub-cs-base-font) * .875); }
    .hub-cs-frontsearch-typeahead > label { display: none; }
    .hub-cs-frontsearch-checkbox { align-items: center; padding-right: 15px; padding-left: 15px; cursor: default; }
    .hub-cs-frontsearch-checkbox label { display: flex; align-items: center; gap: 6px; padding: 0; color: inherit; font-size: calc(var(--hub-cs-base-font) * .875); font-weight: 700; white-space: nowrap; }
    .hub-cs-frontsearch-checkbox input { width: auto; accent-color: var(--hub-cs-accent); }
    .hub-cs-frontsearch button.hub-cs-frontsearch-submit { display: grid; width: 64px; min-width: 64px; max-width: 64px; height: 64px; min-height: 64px; max-height: 64px; padding: 0; place-items: center; overflow: hidden; border: 0; border-radius: 999px; color: var(--hub-cs-accent-text); background: var(--hub-cs-accent); appearance: none; cursor: pointer; }
    .hub-cs-frontsearch-submit:hover { color: var(--hub-cs-accent-text-hover); background: var(--hub-cs-accent-hover); }
    .hub-cs-frontsearch-submit svg { width: 28px; height: 28px; }
    .hub-cs-frontsearch-submit span { display: none; }
    .hub-cs-frontsearch-operator .hub-cs-daterange-popup { left: -40px; }
    .hub-cs-frontsearch .hub-cs-typeahead-suggestions { top: calc(100% + 18px); }
}

@media (max-width: 700px) {
    body.hub-cs-frontsearch-panel-open { overflow: hidden; }
    .hub-cs-frontsearch { display: block; padding: 0; background: transparent; }
    .hub-cs-frontsearch-mobile-trigger { display: flex; box-sizing: border-box; width: 100%; min-height: 64px; align-items: center; gap: 12px; padding: 0 18px; border: 1px solid #ddd; border-radius: 999px; color: inherit; background: #fff; box-shadow: 0 8px 20px rgba(20,30,45,.18); font: inherit; font-size: var(--hub-cs-base-font); text-align: left; cursor: pointer; }
    .hub-cs-frontsearch-mobile-trigger img { width: 23px; height: 23px; }
    .hub-cs-frontsearch-mobile-trigger span:nth-child(2) { flex: 1 1 auto; }
    .hub-cs-frontsearch-mobile-chevron { width: 9px; height: 9px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg) translateY(3px); }
    .hub-cs-frontsearch > form { position: fixed; z-index: 2147483000; inset: 8px; display: none; box-sizing: border-box; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid #bbb; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(9,18,38,.27); }
    .hub-cs-frontsearch.is-mobile-open > form { display: flex; }
    .hub-cs-frontsearch-mobile-header { position: relative; display: flex; min-height: 60px; flex: 0 0 auto; align-items: center; justify-content: center; border-bottom: 1px solid #eee; font-size: calc(var(--hub-cs-base-font) * 1.125); }
    .hub-cs-frontsearch-mobile-header button { position: absolute; top: 11px; right: 12px; width: 38px; height: 38px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-size: 32px; font-weight: 300; line-height: 1; cursor: pointer; }
    .hub-cs-frontsearch-mobile-pilot { display: flex; min-height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; margin: 5px 17px 0; color: inherit; font-size: calc(var(--hub-cs-base-font) * .75); font-weight: 700; }
    .hub-cs-frontsearch-mobile-pilot input { width: 16px; height: 16px; margin: 0; accent-color: var(--hub-cs-accent); }
    /* Steps (map note 17.10.2026): "Krok 2 z 4", a progress bar in the theme's
       button colour, the step names under it (still tappable to jump). */
    .hub-cs-frontsearch-mobile-progress { display: block; flex: 0 0 auto; margin: 8px 18px 0; }
    .hub-cs-frontsearch-mobile-progress-label { display: flex; justify-content: space-between; gap: 10px; font-size: calc(var(--hub-cs-base-font) * .75); font-weight: 700; opacity: .7; }
    .hub-cs-frontsearch-mobile-progress-track { height: 6px; margin-top: 6px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, currentColor 10%, #fff); }
    .hub-cs-frontsearch-mobile-progress-track span { display: block; width: 0; height: 100%; background: var(--hub-cs-accent); transition: width .25s ease; }
    .hub-cs-frontsearch-mobile-tabs { display: flex; flex: 0 0 auto; gap: 4px; margin: 6px 18px 0; }
    .hub-cs-frontsearch-mobile-tabs button { flex: 1 1 0; min-width: 0; padding: 4px 2px; border: 0; color: inherit; background: transparent; font: inherit; font-size: calc(var(--hub-cs-base-font) * .6875); font-weight: 600; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .hub-cs-frontsearch-mobile-tabs button[hidden] { display: none; }
    .hub-cs-frontsearch-mobile-tabs button.is-active { font-weight: 800; opacity: 1; }
    /* Text stays the text colour (a pale theme colour like yellow is unreadable on white); only the tick is in it. */
    .hub-cs-frontsearch-mobile-tabs button.is-done { opacity: .85; }
    .hub-cs-frontsearch-mobile-tabs button.is-done::before { content: "✓ "; color: var(--hub-cs-accent); font-weight: 900; }
    /* The bar with "Wstecz / Dalej" is always on screen (map note 17.10.2026). */
    .hub-cs-frontsearch-mobile-footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 40; display: block; padding: 12px 16px 12px; border-top: 1px solid #eee; background: #fff; }
    .hub-cs-frontsearch-mobile-footer-buttons { display: flex; gap: 10px; }
    .hub-cs-frontsearch-mobile-footer button { min-height: 50px; border-radius: var(--hub-cs-button-radius, 6px); font: inherit; font-size: var(--hub-cs-base-font); font-weight: 700; cursor: pointer; }
    .hub-cs-frontsearch-mobile-back { flex: 0 0 auto; padding: 0 16px; border: 1px solid #ddd; color: inherit; background: #fff; }
    .hub-cs-frontsearch-mobile-back[hidden] { display: none; }
    .hub-cs-frontsearch-mobile-next { flex: 1 1 auto; padding: 0 16px; border: 0; color: var(--hub-cs-accent-text); background: var(--hub-cs-accent); }
    .hub-cs-frontsearch-mobile-hint { margin: 8px 0 0; font-size: calc(var(--hub-cs-base-font) * .75); text-align: center; opacity: .65; }
    .hub-cs-frontsearch-mobile-hint[hidden] { display: none; }
    .hub-cs-frontsearch > form > .hub-cs-frontsearch-field:not(.hub-cs-frontsearch-checkbox) { display: none; box-sizing: border-box; min-width: 0; flex: 1 1 auto; flex-direction: column; overflow-y: auto; padding: 20px 20px 130px; font-size: calc(var(--hub-cs-base-font) * .875); }
    .hub-cs-frontsearch > form > .hub-cs-frontsearch-field.is-mobile-current { display: flex; }
    .hub-cs-frontsearch-mobile-question { display: block; margin: 0 0 18px; color: inherit; font-size: calc(var(--hub-cs-base-font) * 1.375); font-weight: 500; }
    .hub-cs-frontsearch > form > .hub-cs-frontsearch-field > label, .hub-cs-frontsearch > form > .hub-cs-frontsearch-field > .hub-cs-daterange-toggle { display: none; }
    .hub-cs-frontsearch .hub-cs-daterange-popup { position: static; display: flex; width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; }
    .hub-cs-frontsearch .hub-cs-daterange-popup[hidden] { display: flex; }
    .hub-cs-frontsearch .hub-cs-daterange-actions { display: none; }
    .hub-cs-frontsearch .hub-cs-region-grid { column-count: 1; }
    .hub-cs-frontsearch .hub-cs-calendar-months { flex-direction: column; gap: 20px; }
    .hub-cs-frontsearch .hub-cs-operator-columns { flex-direction: row; }
    .hub-cs-frontsearch .hub-cs-operator-column-ships { padding-top: 0; padding-left: 12px; border-top: 0; border-left: 1px solid #eee; }
    .hub-cs-frontsearch .hub-cs-frontsearch-typeahead > label { display: none; }
    .hub-cs-frontsearch .hub-cs-typeahead-suggestions { position: static; margin-top: 4px; }
    .hub-cs-frontsearch .hub-cs-frontsearch-checkbox { display: none; }
    .hub-cs-frontsearch .hub-cs-frontsearch-submit { position: absolute; right: 20px; bottom: 15px; left: 20px; display: none; width: auto; height: 51px; min-height: 51px; padding: 0; place-items: center; border: 0; border-radius: 3px; color: var(--hub-cs-accent-text); background: var(--hub-cs-accent); }
    .hub-cs-frontsearch .hub-cs-frontsearch-submit svg { display: none; }
    .hub-cs-frontsearch .hub-cs-frontsearch-submit span { display: inline; font: inherit; font-size: var(--hub-cs-base-font); font-weight: 700; }
}