.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 {
    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.
     */
    .hub-cs-frontsearch { position: relative; z-index: 2147483000; 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 > 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); }
    .hub-cs-frontsearch-mobile-tabs { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 7px 17px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(20,30,45,.2); }
    .hub-cs-frontsearch-mobile-tabs button { min-width: 0; padding: 9px 3px; border: 0; border-right: 1px solid #ddd; border-radius: 999px; color: inherit; background: transparent; font: inherit; font-size: calc(var(--hub-cs-base-font) * .75); cursor: pointer; }
    .hub-cs-frontsearch-mobile-tabs button:last-child { border-right: 0; }
    .hub-cs-frontsearch-mobile-tabs button.is-active { background: color-mix(in srgb, currentColor 7%, #fff); box-shadow: 0 2px 7px rgba(20,30,45,.13); font-weight: 700; }
    .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: 24px 20px 96px; 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.is-mobile-submit-visible { display: grid; }
    .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; }
}