/* ================================================================
   InBase — Inline hero filter (test bed on page-tip-na-podnik.php)
   Scoped under .ib-inline-filter — does not affect any other UI.
   Mirrors design handoff: Filter_hero_section.zip → "Inline Filtr — finál".
   ================================================================ */

/* Box-sizing border-box on every filter primitive so flex sizes (50/50
   on the country buttons, full-width fields on mobile) don't blow past
   their containers when padding is in play. */
.ib-inline-filter,
.ib-inline-filter * { box-sizing: border-box; }

.ib-inline-filter {
	--ib-if-cta:               var(--ib-cta-green, #21ac18);
	--ib-if-cta-hover:         var(--ib-cta-green-hover, #0e8f1b);
	--ib-if-text:              var(--ib-text, #2d2d2d);
	--ib-if-text-soft:         #4f4f4f;
	--ib-if-muted:             var(--ib-muted, #6b7b95);
	--ib-if-border:            var(--ib-border, #dce3ef);
	--ib-if-border-soft:       #e5e9ef;
	--ib-if-blue:              var(--ib-cta-blue, #1972b6);
	--ib-if-blue-wash:         rgba(25, 114, 182, .07);
	--ib-if-blue-wash-strong:  rgba(25, 114, 182, .09);
	--ib-if-selected-wash:     #eef4fb;

	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	display: inline-flex;
	position: relative;
	max-width: 100%;
	margin: 0;
}

.ib-inline-filter__bar {
	display: inline-flex;
	align-items: stretch;
	position: relative;
	background: transparent;
	border: 1px solid var(--ib-if-border);
	border-radius: 12px;
	box-shadow: 0 14px 40px rgba(8, 30, 55, .22);
	padding: 6px;
}
/* Frosted-glass background sits on a `::before` so the bar itself
   stays free of `backdrop-filter`. `backdrop-filter` on the bar
   would establish a new containing block for descendant
   `position: fixed` elements (per CSS spec), which would break the
   floating dropdown menus — JS positions them with viewport
   coordinates and they'd anchor to the bar instead. Pseudo has
   no descendants, so it can carry the blur safely. */
.ib-inline-filter__bar::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #ffffffde;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: inherit;
	z-index: -1;
	pointer-events: none;
}

.ib-if-divider {
	width: 1px;
	flex: 0 0 1px;
	align-self: stretch;
	background: #d4d4d4;
	margin: 9px 6px;
}

.ib-if-field {
	position: relative;
	display: flex;
	align-items: center;
}

/* ---------- Category dropdown ---------- */
.ib-if-field--cat { width: 248px; }

.ib-if-cat__trigger {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: transparent;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 400;
	color: var(--ib-if-text-soft);
	line-height: 1.4;
	transition: background-color 180ms ease;
}
.ib-if-cat__trigger[aria-expanded="true"] { background: var(--ib-if-blue-wash); }
.ib-if-cat__trigger.is-selected {
	color: var(--ib-if-text);
	font-weight: 600;
}
.ib-if-cat__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.4;
	padding: 2px 0;
}
.ib-if-chevron {
	flex: 0 0 17px;
	color: var(--ib-if-muted);
}

.ib-if-cat__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 280px;
	width: max-content;
	max-width: 380px;
	background: #fff;
	border: 1px solid var(--ib-if-border);
	border-radius: 10px;
	box-shadow: 0 14px 38px rgba(8, 30, 55, .26);
	padding: 6px;
	z-index: 50;
	max-height: 320px;
	overflow-y: auto;
}

.ib-if-cat__option {
	padding: 8px 12px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 400;
	color: var(--ib-if-text);
	cursor: pointer;
	white-space: nowrap;
	background: transparent;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: background-color 150ms ease;
}
.ib-if-cat__option:hover:not(.is-selected) { background: #f4f7fb; }
.ib-if-cat__option.is-selected {
	background: var(--ib-if-selected-wash);
	color: var(--ib-if-blue);
}
.ib-if-cat__option-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ib-if-cat__option-count {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--ib-if-muted);
}
.ib-if-cat__option.is-selected .ib-if-cat__option-count {
	color: var(--ib-if-blue);
}
/* CSS-only checkbox indicator */
.ib-if-cat__checkbox {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	border: 1.5px solid #c2cad8;
	border-radius: 3px;
	background: #fff;
	position: relative;
	box-sizing: border-box;
	transition: background-color 150ms ease, border-color 150ms ease;
}
.ib-if-cat__option.is-selected .ib-if-cat__checkbox {
	background: var(--ib-if-blue);
	border-color: var(--ib-if-blue);
}
.ib-if-cat__option.is-selected .ib-if-cat__checkbox::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* Two-level hierarchy */
.ib-if-cat__option--child { padding-left: 32px; }
/* "Všechny kategorie" sits visually apart at the top */
.ib-if-cat__option--all {
	margin-bottom: 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ib-if-border);
	border-radius: 7px 7px 0 0;
}

/* ---------- Country flags ---------- */
.ib-if-field--country { gap: 7px; }

.ib-if-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ib-if-text-soft);
	transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
.ib-if-flag.is-active {
	background: var(--ib-if-blue-wash-strong);
	color: var(--ib-if-blue);
	opacity: 1;
}
.ib-if-flag__img {
    display: inline-block;
    width: 19px;
    height: auto;
    border-radius: 9px;
    overflow: hidden;
    vertical-align: middle;
    padding-bottom: 3px;
}

/* ---------- Price ---------- */
.ib-if-field--price { position: relative; }

.ib-if-price__trigger {
	height: 44px;
	padding: 0 14px;
	min-width: 168px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.15;
	transition: background-color 180ms ease;
}
.ib-if-price__trigger[aria-expanded="true"] { background: var(--ib-if-blue-wash); }

.ib-if-price__caption {
	font-size: 11px;
	color: var(--ib-if-muted);
	margin-bottom: 3px;
}
.ib-if-price__value {
	font-size: 14px;
	font-weight: 700;
	color: var(--ib-if-text);
}

.ib-if-price__popover {
	position: absolute;
	bottom: calc(100% + 14px);
	left: 0;
	width: 330px;
	background: #fff;
	border: 1px solid var(--ib-if-border);
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba(8, 30, 55, .28);
	padding: 18px;
	z-index: 60;
}
.ib-if-price__label {
	font-size: 13px;
	color: var(--ib-if-muted);
	margin-bottom: 14px;
}

/* ---------- Dual range slider ---------- */
.ib-if-slider {
	position: relative;
	height: 20px;
	margin: 0 10px;
	touch-action: none;
}
/* Zone-boundary notch tickmarks on the track. The price slider is
   non-linear (see PRICE_ZONES in js/ib-inline-filter.js): 0-50 M,
   50-100 M, 100-200 M take 60 / 20 / 20 % of the track respectively.
   At each boundary we drop a short vertical tick that crosses the
   track line, visually pairing with the label notch stems above the
   slider to read as an anchor at that price. z-index 1 keeps them
   below the handles (z-index 2). If you change the zone breakpoints,
   update these `left` values AND `pctEnd` in PRICE_ZONES AND the
   matching `.ib-if-slider__scale-label--zone-*` positions all at
   once. */
.ib-if-slider::before,
.ib-if-slider::after {
	content: '';
	position: absolute;
	top: 4px;
	width: 2px;
	height: 11px;
	background: #b0bcce;
	border-radius: 2px;
	pointer-events: none;
	z-index: 1;
	transform: translateX(-50%);
}
.ib-if-slider::before { left: 50%; }
.ib-if-slider::after  { left: 80%; }
.ib-if-slider__track {
	position: absolute;
	top: 7px;
	left: 0;
	right: 0;
	height: 5px;
	border-radius: 999px;
	background: #dfe6f0;
}
.ib-if-slider__fill {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--ib-if-blue);
	border-radius: 999px;
}
.ib-if-slider__handle {
	position: absolute;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ib-if-blue);
	box-shadow: 0 1px 4px rgba(15, 30, 60, .28);
	cursor: grab;
	transform: translateX(-50%);
	touch-action: none;
	z-index: 2;
	padding: 0;
}
.ib-if-slider__handle:active { cursor: grabbing; }
.ib-if-slider__handle:focus-visible {
	outline: 2px solid var(--ib-if-blue);
	outline-offset: 2px;
}

/* Static scales around the slider. The `--top` variant carries the
   two zone-boundary anchors (50 mil. / 100 mil.) above the track at
   60 % and 80 %; the `--bottom` variant carries the floor / ceiling
   labels (0 / 200 mil. Kč) below the track at its left / right edges.
   Horizontal margin matches `.ib-if-slider` so the 60 % / 80 %
   positions line up exactly with the track ticks underneath. Keep
   `left: 50%` / `left: 80%` here, the `.ib-if-slider`
   `::before / ::after` tick positions, AND `pctEnd` in PRICE_ZONES
   in lock-step. */
.ib-if-slider__scale {
	position: relative;
	margin: 0 10px;
	font-size: 11px;
	font-weight: 500;
	color: var(--ib-if-muted);
	line-height: 1;
}
.ib-if-slider__scale--top {
	height: 18px;
	margin-top: 4px;
	margin-bottom: 2px;
}
.ib-if-slider__scale--bottom {
	height: 14px;
	margin-top: 6px;
}
.ib-if-slider__scale-label {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}

.ib-if-slider__scale-label--zone-1 { left: 50%; }
.ib-if-slider__scale-label--zone-2 { left: 80%; }
.ib-if-slider__scale-label--start  { left: 0;   transform: none; }
.ib-if-slider__scale-label--end    { right: 0;  left: auto; transform: none; }

.ib-if-price__caret {
	position: absolute;
	bottom: -7px;
	left: 26px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-right: 1px solid var(--ib-if-border);
	border-bottom: 1px solid var(--ib-if-border);
	transform: rotate(45deg);
}

/* ---------- Submit ---------- */
.ib-if-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: stretch;
	height: 48px;
	padding: 0 22px;
	background: var(--ib-if-cta);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	margin-left: 4px;
	white-space: nowrap;
	transition: background-color 180ms ease;
}
.ib-if-submit:hover,
.ib-if-submit:focus-visible { background: var(--ib-if-cta-hover); }
.ib-if-submit__icon { flex: 0 0 16px; }

/* ---------- Mobile fallback ---------- */
@media (max-width: 767px) {
	.ib-inline-filter,
	.ib-inline-filter__bar { width: 100%; }

	/* Per claude design mobile (handoff_databaze/mobile-app.jsx):
	   - Bordered card = just the field (border 1px, radius 11px, white).
	   - Caption sits ABOVE the border, uppercase, weight 700, muted grey,
	     letter-spacing 0.4px — set via data-label so the same rule covers
	     the homepage hero (cat/country/price) and the databáze sf-driven variant
	     (cat/region/country/price). */
	.ib-inline-filter .ib-if-field[data-label] {
		position: relative;
		border: 1px solid var(--ib-if-border);
		border-radius: 11px;
		padding: 4px;
		margin-top: 26px;
		background: #fff;
	}
	.ib-inline-filter .ib-if-field[data-label]::before {
		content: attr(data-label);
		position: absolute;
		bottom: 100%;
		left: 4px;
		margin-bottom: 6px;
		font-size: 12px;
		font-weight: 600;
		color: var(--ib-if-muted);
		letter-spacing: .2px;
		line-height: 1;
		pointer-events: none;
	}
	/* Trigger fills the bordered card uniformly. */
	.ib-inline-filter .ib-if-cat__trigger,
	.ib-inline-filter .ib-if-price__trigger { padding: 0 10px; height: 42px; }
	/* CZ/SK buttons: horizontal flag + label. Country card is widened
	   to 50 % below; combined with a smaller 14 px flag and tighter
	   button padding, the 50 / 50 buttons fit inside the card without
	   spilling. */
	.ib-inline-filter .ib-if-field--country { gap: 4px; }
	.ib-inline-filter .ib-if-field--country .ib-if-flag {
		flex: 1 1 50%;
		min-width: 0;
		height: 42px;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 5px;
		padding: 0 6px;
		font-size: 13px;
	}
	.ib-inline-filter .ib-if-field--country .ib-if-flag__img {
		width: 18px;
        padding-bottom: 2px;
        border-radius: 10px;
	}
	.ib-inline-filter .ib-if-field--search { height: auto; }
	.ib-inline-filter .ib-if-field--search .ib-if-search__input { height: 32px; }
	.ib-inline-filter__bar {
		flex-wrap: wrap;
		padding: 10px;
		gap: 8px;
		align-items: center;
	}
	.ib-if-divider { display: none; }
	.ib-if-field--cat {
		flex: 1 1 100%;
		width: 100%;
	}
	.ib-if-field--country {
		flex: 0 0 auto;
		justify-content: flex-start;
	}
	.ib-if-field--price {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: flex-end;
	}
	.ib-if-price__trigger {
		min-width: 0;
		width: 100%;
		align-items: flex-end;
	}
	.ib-if-cat__menu { max-width: none; }
	.ib-if-submit {
		flex: 1 1 100%;
		margin-left: 0;
		margin-top: 2px;
	}
	.ib-if-price__popover {
		width: calc(100vw - 32px);
		max-width: 330px;
		left: auto;
		right: 0;
	}
	.ib-if-price__caret {
		left: auto;
		right: 26px;
	}
}

/* ================================================================
   Databáze variant (page-databaze.php + child theme overrides)
   Shares all primitives above; only the bar chrome + result count
   text differ. Hidden S&F form host (.ib-inline-filter__sf-host) is
   inside the partial with inline `display:none !important` so we do
   not need a CSS hiding rule here.
   ================================================================ */

/* `#podniky` wraps the databáze filter card on every databáze
   template (page-databaze.php + child theme overrides + future
   variants). Bootstrap's `.col-xs-12` default 15 px gutter is too
   wide here — the filter card already has its own shadow + border-
   radius, so we want it to breathe out to the screen edges with
   just an 8 px gap. */
#podniky {
	padding-left: 12px;
	padding-right: 12px;
}

/* Width override for databáze variant — fills the row, no inline-flex
   content-hugging like on the homepage hero. */
.ib-inline-filter--databaze {
	display: block;
	width: 100%;
}
.ib-inline-filter--databaze .ib-inline-filter__bar {
	display: flex;
	align-items: stretch;
	width: 100%;
	background: #fff;
	border: 1px solid var(--ib-if-border);
	border-radius: 14px;
	box-shadow: none;
	padding: 8px 12px;
	gap: 0;
}

/* Field widths follow handoff (Kategorie 226px, Region 208px). */
.ib-inline-filter--databaze .ib-if-field--cat    { width: 226px; flex: 0 0 226px; }
.ib-inline-filter--databaze .ib-if-field--region { width: 208px; flex: 0 0 208px; }
/* Extra-taxonomy dropdowns (platce_dph, historie on neaktivní firmy):
   same desktop width as region. The mobile rule further down gives
   each extra its own full row with explicit order after region. */
.ib-inline-filter--databaze .ib-if-field--tax    { width: 208px; flex: 0 0 208px; }
.ib-inline-filter--databaze .ib-if-field--price  { flex: 0 0 auto; }

/* Text search field — fills remaining space inside the bar. */
.ib-if-field--search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	flex: 1 1 160px;
	min-width: 0;
	height: 44px;
	align-self: center;
}
.ib-if-search-icon {
	flex: 0 0 16px;
	color: var(--ib-if-muted);
}
.ib-if-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	color: var(--ib-if-text);
	padding: 0;
}
.ib-if-search__input::placeholder { color: var(--ib-if-muted); }
.ib-if-search__input:focus { outline: 0; }

/* Right-aligned live result count, replaces the green submit button. */
.ib-if-result-count {
	margin-left: auto;
	align-self: center;
	padding: 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ib-if-text);
	white-space: nowrap;
	flex: 0 0 auto;
}
.ib-if-result-count [data-ib-count] {
	color: var(--ib-if-blue);
}

/* Region dropdown menu shouldn't run off the right edge of the bar
   on narrower viewports — anchor under its own trigger. */
.ib-if-field--region .ib-if-cat__menu,
.ib-if-field--tax    .ib-if-cat__menu { min-width: 240px; }

/* The bar lives inside .section-jumbo / .section-search-form, which carry
   overflow:hidden in the main theme stylesheet so background images don't
   bleed. That clips the open dropdown menu below the hero band. Overriding
   overflow on the host section keeps the menus visible and on top of the
   results grid. Targeted via the modifier classes set by the page template. */
.section-jumbo--has-filter,
.section-jumbo--has-filter .section-search-form,
.section-jumbo-home,
.section-parallax-home { overflow: visible !important; }
.ib-inline-filter,
.ib-inline-filter--databaze { position: relative; }
/* Even at z-index:9999 the dropdowns/popover were sometimes trapped by a
   later section's stacking context (transforms on parallax wrappers, etc.).
   When the JS adds .is-floating it pulls the menu out into a position:fixed
   layer that's measured against the viewport — no ancestor can clip it. */
.ib-if-cat__menu.is-floating,
.ib-if-price__popover.is-floating {
	position: fixed !important;
	z-index: 9999;
	box-shadow: 0 14px 38px rgba(8, 30, 55, .26);
}
.ib-if-cat__menu,
.ib-if-price__popover { z-index: 9999; }

/* Hide sf-driven option rows whose live count is 0
   (driven by JS via .is-empty toggle). */
.ib-inline-filter--databaze .ib-if-cat__option.is-empty { display: none; }

/* Mobile fallback for databáze bar:
   Each field on its own row, full width — Kategorie, Země, Region, Cena.
   Generous vertical gap so the data-label caption above each field has
   breathing room. Text search hidden, count text below all fields. */
@media (max-width: 767px) {
	.ib-inline-filter--databaze .ib-inline-filter__bar {
		flex-wrap: wrap;
		padding: 14px 14px 16px;
		gap: 6px 6px;
		border-radius: 16px;
		align-items: stretch;
	}
	/* Zero out the bootstrap col-xs-12 padding that wraps the floating
	   search form on mobile — the filter card already has its own
	   internal padding, the outer container's 15 px gutter just steals
	   width from the bar. Scoped to the floating wrap so other pages'
	   .col-xs-12 stay intact. */
	.section-search-form--floating .col-xs-12 { padding-left: 0; padding-right: 0; }
	.ib-inline-filter--databaze .ib-if-divider { display: none; }

	/* Cat and Cena take full rows; Země / Region share the middle row
	   at 50 / 50 — wider Země gives CZ/SK buttons room to render
	   horizontal without spilling, region is still wide enough for
	   the trigger label. Region's open dropdown menu is widened
	   separately below so the kraje list reads cleanly. */
	.ib-inline-filter--databaze .ib-if-field--cat,
	.ib-inline-filter--databaze .ib-if-field--price {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
	}
	.ib-inline-filter--databaze .ib-if-field--country {
		flex: 0 1 calc(42% - 3px);
		width: auto;
		min-width: 0;
	}
	.ib-inline-filter--databaze .ib-if-field--region {
		flex: 1 1 calc(58% - 3px);
		width: auto;
		min-width: 0;
	}
	/* Each extra-taxonomy dropdown gets its own full-width row below
	   region. flexbox `order` puts them between region (3) and price
	   (4). Multiple extras share the same order value and fall back
	   to DOM order — platce_dph then historie. */
	.ib-inline-filter--databaze .ib-if-field--tax {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
	}
	.ib-inline-filter--databaze .ib-if-field--cat     { order: 1; }
	.ib-inline-filter--databaze .ib-if-field--country { order: 2; }
	.ib-inline-filter--databaze .ib-if-field--region  { order: 3; }
	.ib-inline-filter--databaze .ib-if-field--tax     { order: 4; }
	.ib-inline-filter--databaze .ib-if-field--price   { order: 5; }
	.ib-inline-filter--databaze .ib-if-field--search  { display: none; }
	.ib-inline-filter--databaze .ib-if-result-count {
		order: 6;
		flex: 1 1 100%;
		margin-left: 0;
		margin-top: 16px;
		padding: 13px 0 0;
		border-top: 1px solid var(--ib-if-border-soft);
		text-align: center;
	}

	/* Region trigger is narrow on mobile, but the dropdown menu should
	   span ~the bar width so the kraje list reads cleanly. Same widening
	   applies to extra-taxonomy dropdowns (platce_dph, historie). */
	.ib-if-field--region .ib-if-cat__menu.is-floating,
	.ib-if-field--tax    .ib-if-cat__menu.is-floating {
		width: calc(100vw - 24px) !important;
		max-width: 380px;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
	}
}

/* Lower .product-box-wrap into the global stacking context so the filter
   dropdown / popover (z-index 9999) always renders above the results
   grid — even when a card's hover/transform creates its own context. */
.product-box-wrap { position: relative; z-index: 0; }

@media (max-width: 767px) {
	/* Filter needs breathing room before the next section ("Píšou o nás"
	   on homepage, "Nenašli jste firmu" on databáze). */
	.ib-inline-filter { margin-bottom: 15px; }

	/* The data-label caption above the price field already says
	   "Cena podniku", so the in-trigger caption duplicates it. Hide
	   the inner one on mobile and let the trigger show only the value. */
	.ib-inline-filter .ib-if-field--price[data-label] .ib-if-price__caption { display: none; }
	.ib-inline-filter .ib-if-field--price[data-label] .ib-if-price__trigger {
		justify-content: center;
		align-items: flex-start;
		padding: 0 12px;
	}
	.ib-inline-filter .ib-if-field--price[data-label] .ib-if-price__value {
		font-size: 14.5px;
	}

	/* Mobile price popover: revert to a floating layer (position:fixed
	   via .is-floating, set by JS) but centered horizontally and full
	   viewport-width so it sits above its trigger and can cover the
	   other rows. The bordered, light-grey inline mode we tried before
	   read as part of the field card and was visually confusing. */
	.ib-inline-filter .ib-if-field--price[data-label] .ib-if-price__popover.is-floating {
		width: calc(100vw - 24px) !important;
		max-width: 360px;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
	}
}

/* Step N+2 — filter straddles the jumbo / content seam.
   The filter wrap sits OUTSIDE .section-jumbo on page-databaze.php
   (after it, before .databazafull) so a plain negative margin-top
   pulls the filter up over the dark band. The hero section can be
   its own short height; the filter overlaps roughly the bottom half
   of it. Applied via the `.section-search-form--floating` modifier
   on the wrapper around `part-inline-filter-sf`. */
.section-search-form--floating {
    position: relative;
    z-index: 5;
    margin-top: -58px;
    margin-bottom: 0px;
    padding-bottom: 5px;
}
/* Pages without a sort row (neaktivní firmy + plátci DPH) have no
   sort-row spacing between the filter card and the results below,
   so add the missing breathing room directly to the floating wrap.
   Uses :has() so the rule attaches only when the partial declares
   `--no-sort`. */
.section-search-form--floating:has(.ib-inline-filter--no-sort) {
	margin-bottom: 28px;
	padding-bottom: 0;
}
/* `.section-jumbo--has-filter` is the drop-in modifier that any
   databáze-style page can add to its hero <section> to opt into the
   "filter overlaps hero" layout. It absorbs the desktop height
   tweaks here and the mobile padding-bottom calc() further down
   (which uses --ib-filter-overlap set by JS). Pair it with
   `.section-search-form--floating` on the wrapper around
   part-inline-filter-sf so the negative margin-top kicks in. */
.section-jumbo--has-filter {
	min-height: 300px !important;
	padding-bottom: 80px !important;
}
@media (max-width: 767px) {
	.section-search-form--floating {
		/* Pull the filter card up so it overlaps the hero's dark band,
		   leaving only ~10 px of card poking below the band (per the
		   claude mobile mock). --ib-filter-overlap is set on the host
		   .section-jumbo--has-filter by JS (see ib-inline-filter.js)
		   and equals (cardHeight - 10). The 250 px fallback is close
		   to typical card height so the page doesn't visibly reflow
		   between first paint and the JS measure. */
		   margin-top: calc(-1 * var(--ib-filter-overlap, 265px));
		   margin-bottom: 10px;
		   padding: 0px 10px;
	}
	/* Mobile gap fix for --no-sort variant. The card on neaktivní /
	   plátci DPH ends with the in-card "Odpovídá X firem" row; there's
	   no sort row below to provide breathing space before .databazafull. */
	.section-search-form--floating:has(.ib-inline-filter--no-sort) {
		margin-bottom: 20px;
	}
	.section-jumbo--has-filter {
		/* Grow the hero by the same overlap so the dark band visually
		   covers all but the last 10 px of the filter card; the +5 px
		   keeps a tight breathing gap between the hero title block
		   and the filter top — small enough that the card reads as
		   "connected" to the headings, not floating in dead space. */
		min-height: 0 !important;
		padding-bottom: calc(5px + var(--ib-filter-overlap, 250px)) !important;
	}
}

/* ================================================================
   Sort tabs + "Vymazat filtr" reset link (sf-driven variant only)
   Sits below the filter card, above .databazafull. Visual spec per
   handoff: underlined tab style — active blue with 2 px bottom
   border, inactive muted grey; reset link in ribbon red, underlined.
   ================================================================ */
.ib-sf-sort-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 16px 2px 10px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
.ib-sf-sort {
	display: flex;
	align-items: center;
	gap: 17px;
	flex-wrap: wrap;
	min-width: 0;
}
.ib-sf-sort__label {
	font-size: 13px;
	font-weight: 400;
	color: var(--ib-muted, #6b7b95);
	margin-right: 4px;
}
.ib-sf-tab {
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
    font-weight: 500;
	color: var(--ib-text-soft);
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	transition: color 150ms ease, border-color 150ms ease;
	white-space: nowrap;
}
.ib-sf-tab:hover { color: var(--ib-cta-blue, #1972b6); }
.ib-sf-tab.is-active {
	color: var(--ib-cta-blue, #1972b6);
	font-weight: 700;
	border-bottom-color: var(--ib-cta-blue, #1972b6);
}
.ib-sf-reset {
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
    color: var(--ib-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 4px 0;
	white-space: nowrap;
	flex: 0 0 auto;
}
.ib-sf-reset:hover { color: #d83a3b; }

/* Mobile — sort scrolls horizontally so all 5 tabs stay on one line. */
@media (max-width: 767px) {
	.ib-sf-sort-row {
		margin: 18px 0 6px;
		gap: 10px;
	}
	.ib-sf-sort {
		flex: 1 1 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 16px;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding-left: 10px;
	}
	.ib-sf-sort__label {
		flex: 0 0 auto;
		font-size: 12.5px;
	}
	.ib-sf-tab { font-size: 13px; flex: 0 0 auto; }
	.ib-sf-reset {
		flex: 0 0 auto;
		margin-left: auto;
		font-size: 12.5px;
	}
}

/* ================================================================
   Result count — desktop vs. mobile placement (sf-driven variant).
   Desktop keeps the count inside the filter card (same row as the
   search input). Mobile relocates it next to "Vymazat filtr" in
   the sort row, per the design handoff screenshot.
   ================================================================ */
.ib-if-result-count--sort {
	font-size: 13px;
	color: var(--ib-if-muted, #6b7b95);
	white-space: nowrap;
	flex: 0 0 auto;
}
.ib-if-result-count--sort [data-ib-count] {
	color: var(--ib-cta-blue, #1972b6);
	font-weight: 700;
}

/* Desktop (≥768): hide the mobile mirror; keep the in-card one. */
@media (min-width: 768px) {
	.ib-if-result-count--sort { display: none; }
}

/* Mobile (≤767): swap. Count moves to row 2 of the sort strip,
   reset link pushed to the right edge of that same row. Pages
   without a sort row (e.g. neaktivní firmy) opt out via the
   `--no-sort` modifier on the root and keep the in-card count
   visible on mobile too. */
@media (max-width: 767px) {
	.ib-if-result-count--card { display: none; }
	.ib-inline-filter--no-sort .ib-if-result-count--card { display: block; }
	.ib-if-result-count--sort {
		display: inline-flex;
		align-items: center;
		font-size: 13px;
        font-weight: 500;
        text-align: left;
        gap: 5px;
		margin-left: inherit;
	}
	.ib-sf-sort-row .ib-sf-reset { margin-left: auto;         padding-right: 10px;}
}