/* BARKE Produktfinder — front-end styling.
 *
 * Mirrors the existing site mockup (dynamic_avia/barke.css) using the real BARKE
 * theme variables. Intentionally WITHOUT !important: on the live site the theme's
 * own (!important + #top) rules win, so there is no conflict; this file is the
 * portable fallback so the finder also looks right on pages without the dynamic CSS.
 * Reuses the mockup class names (.barke-product-finder / .barke-select-wrap /
 * .barke-request-product / .barke-product-result) so the theme styles it 1:1.
 */

.barke-product-finder {
	--barke-blue: #004687;
	--barke-orange: #EC6707;
	--barke-light: #eef4fa;
	--barke-field-text: #8CAAD8;
	--barke-white: #ffffff;
	background: var(--barke-blue);
	color: var(--barke-white);
	padding: 5%;
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
}
.barke-product-finder + .barke-product-finder { margin-top: 24px; }

/* Divider between consecutive finders (plugin renders it between the boxes):
   on a blue page section the boxes would merge invisibly — the light line
   separates them; on white backgrounds it is practically invisible. */
.barke-pf-sep {
	height: 2px; border: 0; background: rgba(255, 255, 255, .35);
	margin: 22px 0; max-width: 820px;
}

.barke-product-finder h3,
.barke-product-finder .barke-pf-title {
	color: var(--barke-white);
	font-family: inherit;
	font-size: 1.6rem;
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 14px 0;
}
.barke-product-finder .barke-pf-querschnitt { opacity: .8; margin: 0 0 28px; font-size: 16px; }
/* dim the note via the text colour (not opacity) so the info icon stays full strength */
.barke-product-finder .barke-pf-hinweis { color: rgba( 255, 255, 255, .78 ); margin-top: 22px; font-size: 14px; }
/* info icon before a finder note (not the fallback CTA paragraph): a filled light
   circle with a dark-blue "i" — clearly visible on the dark blue finder box. */
.barke-product-finder:not(.barke-pf-fallback) .barke-pf-hinweis::before {
	content: ""; display: inline-block; width: 22px; height: 22px;
	margin-right: 8px; vertical-align: middle; position: relative; top: -2px;
	background-repeat: no-repeat; background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20fill='%23eef4fa'/%3E%3Ccircle%20cx='12'%20cy='7.5'%20r='1.6'%20fill='%23004687'/%3E%3Crect%20x='10.4'%20y='10.4'%20width='3.2'%20height='7.2'%20rx='1.6'%20fill='%23004687'/%3E%3C/svg%3E");
}

.barke-product-finder .barke-pf-controls { display: flex; flex-direction: column; gap: 18px; }
.barke-product-finder .barke-finder-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
.barke-product-finder .barke-pf-field-label { display: block; font-size: 16px; margin-bottom: 6px; opacity: .9; }
.barke-product-finder .barke-pf-field { display: flex; flex-direction: column; flex: 1 1 280px; max-width: 460px; }

/* .barke-select-wrap = the white select box with custom chevron (matches mockup) */
.barke-product-finder .barke-select-wrap {
	position: relative;
	height: 60px;
	background: var(--barke-white);
}
.barke-product-finder .barke-select-wrap::before {
	content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 100%;
	background: var(--barke-light); pointer-events: none;
}
.barke-product-finder .barke-select-wrap::after {
	content: ""; position: absolute; right: 26px; top: 50%; width: 10px; height: 10px;
	border-right: 3px solid var(--barke-blue); border-bottom: 3px solid var(--barke-blue);
	transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.barke-product-finder select.barke-product-size {
	position: relative; z-index: 5; width: 100%; height: 60px; border: 0; border-radius: 0;
	box-shadow: none; outline: none; background: transparent; background-image: none;
	color: var(--barke-field-text); font-family: inherit; font-size: 20px; font-weight: 600;
	padding: 10px 68px 10px 24px; appearance: none; -webkit-appearance: none; -moz-appearance: none;
	cursor: pointer;
}
/* Machine search (datalist input) */
.barke-product-finder input.barke-product-search {
	width: 100%; max-width: 460px; height: 60px; box-sizing: border-box; border: 0; border-radius: 0;
	background: var(--barke-white); color: var(--barke-blue); font-family: inherit; font-size: 20px;
	font-weight: 600; padding: 10px 24px; outline: none;
}
.barke-product-finder input.barke-product-search::placeholder { color: var(--barke-field-text); opacity: 1; }

.barke-product-finder .barke-pf-hint { margin: 12px 0 0; font-size: 15px; opacity: .9; }

/* Request button — orange, uppercase, scale + shine sweep on hover (from mockup) */
.barke-product-finder .barke-request-product {
	display: inline-block; width: auto; margin: 0; padding: 14px 30px; font-family: inherit;
	font-size: 18px; line-height: 1.2; font-weight: 700; text-transform: uppercase; border-radius: 0;
	border: 1.5px solid var(--barke-white); background-color: var(--barke-orange); color: var(--barke-white);
	cursor: pointer; opacity: 1; box-shadow: none; position: relative; overflow: hidden; z-index: 1;
	transition: transform .3s ease, background-color .3s ease;
}
.barke-product-finder .barke-request-product:hover { transform: scale(1.04); }
.barke-product-finder .barke-request-product::after {
	content: ""; position: absolute; top: -50px; left: -75px; width: 50px; height: 155px;
	background: #f1f6fa; opacity: .2; transform: rotate(35deg); pointer-events: none; z-index: 2;
	transition: all 550ms cubic-bezier(.19, 1, .22, 1);
}
.barke-product-finder .barke-request-product:hover::after { left: 120%; transition: all 1500ms cubic-bezier(.19, 1, .22, 1); }

/* Request fallback (pages without lookup data): the button is an <a> — keep it
   from inheriting the theme's link styling. */
.barke-product-finder a.barke-request-product,
.barke-product-finder a.barke-request-product:hover { text-decoration: none; color: var(--barke-white); }
.barke-pf-fallback .barke-pf-hinweis { margin: 8px 0 16px; }

/* Machine combobox: text input inside the select look (white box + chevron
   come from .barke-select-wrap), dropdown panel with one entry per CSV row. */
/* The site CSS clips the finder box (overflow:hidden !important) — all popups
   (machine combobox AND the custom dropdowns) are absolutely positioned and
   must escape it. */
.barke-product-finder, #top .barke-product-finder { overflow: visible !important; }

/* Custom dropdown face (replaces native <select>): same look as the select —
   white box + chevron come from .barke-select-wrap. #top beats Enfold button
   styling. */
.barke-product-finder .barke-pf-cs-display,
#top .barke-product-finder .barke-pf-cs-display {
	position: relative; z-index: 5; display: block; width: 100%; height: 60px; margin: 0;
	border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent;
	text-align: left; cursor: pointer; font-family: inherit; font-size: 20px; font-weight: 600;
	line-height: 40px; color: var(--barke-blue, #004687);
	padding: 10px 68px 10px 24px; box-sizing: border-box; text-transform: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barke-product-finder .barke-pf-cs-display:hover,
#top .barke-product-finder .barke-pf-cs-display:hover { background: transparent; transform: none; }
.barke-product-finder .barke-pf-cs.is-empty .barke-pf-cs-display { color: var(--barke-field-text, #8CAAD8); }
/* the chevron (::after on the wrap) must sit above the full-size button */
.barke-product-finder .barke-pf-cs::after { z-index: 6; }
/* Clear (×) button inside a custom select — sits left of the chevron, above the
   full-width display button. Appears only once a value is chosen (JS toggles). */
/* z-index must beat the wrap's ::before chevron cell (z-index:20 from site CSS),
   otherwise the × is painted behind it; dark colour for contrast on that cell. */
/* × sits in the white area, LEFT of the grey chevron cell with a gap. The
   display's right padding grows when a value is shown (rule below) so the text
   clips before the × instead of colliding with it. */
.barke-product-finder .barke-pf-cs-clear,
#top .barke-product-finder .barke-pf-cs-clear {
	position: absolute; top: 0; right: 74px; z-index: 25;
	width: 24px; height: 100%; margin: 0; padding: 0;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent;
	font-family: inherit; font-size: 22px; font-weight: 400; line-height: 1;
	cursor: pointer; color: var(--barke-blue, #004687); text-transform: none;
}
.barke-product-finder .barke-pf-cs-clear:hover,
#top .barke-product-finder .barke-pf-cs-clear:hover {
	background: transparent; transform: none; color: var(--barke-orange, #EC6707);
}
/* room for the × once a value is chosen (is-empty is removed by paint()) */
.barke-product-finder .barke-pf-cs:not(.is-empty) .barke-pf-cs-display,
#top .barke-product-finder .barke-pf-cs:not(.is-empty) .barke-pf-cs-display { padding-right: 104px; }
/* same for the machine combobox input once it has text (× sits left of the chevron) */
.barke-product-finder .barke-pf-combo:not(.is-empty) input.barke-product-search,
#top .barke-product-finder .barke-pf-combo:not(.is-empty) input.barke-product-search { padding-right: 104px; }
/* "Auswahl zurücksetzen" link under a finder (white on the blue box, like the hint) */
.barke-product-finder .barke-pf-reset,
#top .barke-product-finder .barke-pf-reset {
	display: inline-block; width: auto; height: auto; min-height: 0;
	margin: 16px 0 22px; padding: 0; border: 0; box-shadow: none; outline: none;
	background: transparent; color: var(--barke-white, #fff); opacity: .85;
	font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.4;
	text-transform: none; text-decoration: underline; text-underline-offset: 3px;
	cursor: pointer;
}
.barke-product-finder .barke-pf-reset:hover,
#top .barke-product-finder .barke-pf-reset:hover {
	background: transparent; transform: none; color: var(--barke-orange, #EC6707); opacity: 1;
}
/* The display rules above would otherwise override the HTML `hidden` attribute,
   so the × / reset link must be explicitly hidden when JS sets hidden=true. */
.barke-product-finder .barke-pf-cs-clear[hidden],
#top .barke-product-finder .barke-pf-cs-clear[hidden],
.barke-product-finder .barke-pf-reset[hidden],
#top .barke-product-finder .barke-pf-reset[hidden] { display: none !important; }
/* Select with no applicable value for the current selection (dimension entfällt):
   greyed out and inert (JS also blocks opening). */
.barke-product-finder .barke-pf-cs.barke-pf-disabled,
#top .barke-product-finder .barke-pf-cs.barke-pf-disabled { opacity: .5; }
.barke-product-finder .barke-pf-cs.barke-pf-disabled .barke-pf-cs-display,
#top .barke-product-finder .barke-pf-cs.barke-pf-disabled .barke-pf-cs-display { cursor: not-allowed; }
/* Open list is portaled to <body>: position:fixed, top of everything. JS sets
   left/top/width/max-height inline from the trigger's position. */
/* Above all page content/sections (Enfold columns create contexts up to ~300),
   but BELOW the sticky header/nav (#header z-index 501): while scrolling, the
   open list must dive UNDER the navigation like normal content, not over it. */
.barke-pf-combo-list.barke-pf-portal,
#top .barke-pf-combo-list.barke-pf-portal { position: absolute !important; z-index: 450 !important; }
/* #top variant outranks Enfold's `#top input[type=text]` (border/padding/margin) */
.barke-product-finder .barke-select-wrap input.barke-product-search,
#top .barke-product-finder .barke-select-wrap input.barke-product-search {
	position: relative; z-index: 5; display: block; width: 100%; height: 60px;
	border: 0; border-radius: 0; box-shadow: none; outline: none; margin: 0;
	background: transparent; color: var(--barke-blue, #004687);
	font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.5em;
	padding: 10px 68px 10px 24px; box-sizing: border-box; -webkit-appearance: none;
}
.barke-product-finder .barke-select-wrap input.barke-product-search:focus,
#top .barke-product-finder .barke-select-wrap input.barke-product-search:focus {
	box-shadow: none; color: var(--barke-blue, #004687);
}
/* Unscoped (no .barke-product-finder ancestor) so the styles also apply when the
   list is portaled into <body>, which sits outside the finder and outside #top. */
.barke-pf-combo-list {
	background: #fff; max-height: 320px; overflow: auto;
	box-shadow: 0 16px 32px rgba(0, 0, 0, .22);
	/* Scrolling inside the open list must not chain to the page once the list
	   hits its end — the page moving under the pointer feels broken (and used
	   to close the dropdown before scroll started repositioning instead). */
	overscroll-behavior: contain;
}
.barke-product-finder .barke-pf-combo-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; }
.barke-pf-combo-item,
#top .barke-pf-combo-item {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	width: 100%; text-align: left; background: none; border: 0; border-radius: 0; box-shadow: none;
	border-bottom: 1px solid #eef4fa; margin: 0; padding: 12px 24px; cursor: pointer;
	font-family: inherit; font-size: 16px; font-weight: 600; color: #004687; text-transform: none;
}
.barke-pf-combo-item:hover, .barke-pf-combo-item.on,
#top .barke-pf-combo-item:hover, #top .barke-pf-combo-item.on { background: #eef4fa; transform: none; }
.barke-pf-combo-name { color: #004687; }
.barke-pf-combo-info { color: #004687; font-size: 13px; font-weight: 600; white-space: nowrap; }
/* "Sonstige Maschine" catch-all pinned at the list end: stronger separator + italic */
.barke-pf-combo-item.barke-pf-combo-other,
#top .barke-pf-combo-item.barke-pf-combo-other { border-top: 2px solid #d4e1f0; font-style: italic; }

/* Formula row: selects embedded between fixed dimension tokens,
   e.g. [Länge ▼] × 16 × 2,5 mm — the user sees what is chosen vs. fixed. */
.barke-product-finder .barke-pf-formula {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 25px;
	max-width: 820px;
}
/* The slot gives the select a footprint inside the formula — the site CSS forces
   .barke-select-wrap to width:100% (!important), which resolves against this slot
   instead of stretching across the whole row. The formula WRAPS (flexbox, based
   on the real available width, not the viewport): slots keep a usable min-width
   so value + × + chevron always fit, and break to the next line when they don't,
   rather than shrinking too small or overflowing the box. */
.barke-product-finder .barke-pf-formula .barke-pf-slot {
	/* basis = min-width so flexbox only wraps when slots would actually drop below
	   the usable width; grow lets the row fill on desktop (3 on one line), cap so a
	   lone wrapped slot doesn't stretch the full width. */
	flex: 1 1 180px; min-width: 180px; max-width: 300px;
}
.barke-product-finder .barke-pf-formula .barke-select-wrap { margin: 0; }
.barke-product-finder .barke-pf-fix {
	font-size: 20px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}

/* Result: list of cards (role/label + number + request) */
.barke-product-finder .barke-product-result {
	background: rgba(255, 255, 255, .09); border-left: 4px solid var(--barke-orange);
	padding: 6px 22px; margin: 22px 0 0; max-width: 820px;
}
/* Card = fixed grid: title | number | button. All cards share the same column
   positions, so numbers and buttons align vertically regardless of how long a
   title or composite number (Umrüstsatz "…-2-…") is. */
.barke-product-finder .barke-product-card {
	display: grid; grid-template-columns: minmax(140px, 1fr) auto auto;
	align-items: center; gap: 10px 18px;
	padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .25);
}
.barke-product-finder .barke-product-card:last-child { border-bottom: 0; }
.barke-product-finder .barke-product-card-title { font-size: 17px; line-height: 1.35; }
.barke-product-finder .barke-product-card .barke-request-product,
.barke-product-finder .barke-product-card .barke-pf-nr,
.barke-product-finder .barke-product-card .barke-pf-state { justify-self: end; }
.barke-product-finder .barke-pf-nr { font-size: 22px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }

/* Compact type INSIDE result cards so title | number | button share one row.
   The site CSS forces 22px (!important) on titles and buttons globally — these
   higher-specificity overrides shrink only the card context; the standalone
   fallback CTA keeps its hero size. */
#top .barke-product-finder .barke-product-card .barke-product-card-title,
.barke-product-finder .barke-product-card .barke-product-card-title {
	font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 0 !important;
}
#top .barke-product-finder .barke-product-card .barke-pf-nr,
.barke-product-finder .barke-product-card .barke-pf-nr { font-size: 18px !important; }
#top .barke-product-finder .barke-product-card button.barke-request-product,
.barke-product-finder .barke-product-card button.barke-request-product {
	font-size: 14px !important; padding: 10px 18px !important; white-space: nowrap !important;
}
@media ( max-width: 640px ) {
	.barke-product-finder .barke-product-card { grid-template-columns: 1fr; gap: 8px; }
	.barke-product-finder .barke-product-card .barke-request-product,
	.barke-product-finder .barke-product-card .barke-pf-nr,
	.barke-product-finder .barke-product-card .barke-pf-state { justify-self: start; }
	.barke-product-finder .barke-pf-nr { white-space: normal; overflow-wrap: anywhere; }
}
/* React to the RESULT BOX width (not just the viewport): when the finder sits in
   a narrow column, stack title / number / button so the button wraps below the
   number instead of overlapping it. */
.barke-product-finder .barke-product-result { container-type: inline-size; }
@container ( max-width: 520px ) {
	.barke-product-finder .barke-product-card { grid-template-columns: 1fr; gap: 8px; }
	.barke-product-finder .barke-product-card .barke-request-product,
	.barke-product-finder .barke-product-card .barke-pf-nr,
	.barke-product-finder .barke-product-card .barke-pf-state { justify-self: start; }
	.barke-product-finder .barke-pf-nr { white-space: normal; overflow-wrap: anywhere; }
}
.barke-product-finder .barke-pf-state { font-style: italic; opacity: .7; }
.barke-product-finder .barke-pf-status-unavailable { opacity: .6; }
.barke-product-finder .barke-pf-empty { opacity: .85; }

/* Request-page summary (when [barke_anfrage_zusammenfassung] is used) */
.barke-pf-summary { background: #eef4fa; border-left: 4px solid #004687; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.barke-pf-summary ul { list-style: none; margin: 0; padding: 0; }
.barke-pf-summary li { margin: .2rem 0; }