/**
 * Layout for [hub_ring_mini_search] (templates/mini-search.php).
 * ADDITIVE stylesheet, loaded alongside configurator.css, whose
 * .hrc-card, .hrc-vehicle-panel, .hrc-vehicle-badge, the hrc-wheel-
 * prefixed rules, and .hrc-link-button this widget reuses AS-IS --
 * same data-hrc-vehicle and data-hrc-wheel attributes as the full
 * configurator's own markup, on purpose, so every existing selector
 * (including the model-select [hidden] rule) already applies with
 * zero duplication.
 * Only the handful of genuinely new elements below (the card head,
 * the result readout's own spacing, the summary strip) get their own
 * rules here.
 */

.hrc-mini-search-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}

.hrc-mini-search-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

/* Sized back up from 40px (2026-09-04, second follow-up, customer:
   "most kicsi az ikon, 60px körüli körméret jobb lenne, ha elfér" --
   it fits: paired with the subtitle's own font-size drop just below
   (0.85rem -> 0.75rem, "legyen kisebb a leíró szöveg mérete pár
   pixellel"), the live 3-to-2-line wrap threshold for both cards' real
   text drops to well under 195px at the smaller font (binary-searched
   live), and a 60px icon still leaves a 208px text column -- safely
   under that threshold, confirmed via getBoundingClientRect() showing
   2 lines on both subtitles at the new sizes. SVG kept at the same
   0.65 fill ratio as the 40px version. align-items:center on the row
   keeps the icon vertically centered against the full title+subtitle
   height. */
.hrc-mini-search-icon {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hrc-mini-search-icon svg {
	width: 39px;
	height: 39px;
}

.hrc-mini-search-icon--vehicle {
	background: var( --hrc-accent-soft );
	color: var( --hrc-accent );
}

.hrc-mini-search-icon--wheel {
	background: var( --hrc-info-bg );
	color: var( --hrc-dim );
}

/* Matched live via getComputedStyle() against the "Nem tudod a
   méretet?" heading next to this widget on the homepage (2026-09-04):
   19px / 600 / #112349 (not one of the --hrc-* or --bde-palette-*
   tokens, so it's a literal one-off) / Montserrat, line-height 34.2px.
   Needs the compound selector (element+class Breakdance preset rule
   otherwise outranks a bare single-class one -- same fix already used
   for .hrc .hrc-section-title in configurator.css). */
.hrc-mini-search .hrc-mini-search-title {
	margin: 0 0 2px;
	font-family: "Montserrat", sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 34.2px;
	color: #112349;
}

.hrc-mini-search-subtitle {
	margin: 0;
	color: var( --hrc-muted );
	font-size: 0.75rem;
	line-height: 1.3;
}

/* .hrc-vehicle-panel/select/.hrc-vehicle-status/.hrc-wheel-code-search
   all come from configurator.css unchanged -- this widget's own
   panels are just never given the [hidden] attribute configurator.js
   uses to collapse them, so they stay visible permanently (customer,
   2026-09-04: "itt ne tűnjön el a kereső, ha megvan az eredmény"). */

/* Auto-skipped (single-option) selects stay visible instead of
   vanishing, per mini-search.js's keepAutoSkippedVisible() -- but
   they're disabled, so they need to visibly read that way rather
   than looking like a normal, editable dropdown (2026-09-04,
   customer: "az automatikusan kiválasztott értékek is szerepeljenek,
   csak a legördülő legyen inaktív"). */
.hrc-vehicle-panel select:disabled {
	background: #f1efeb;
	color: var( --hrc-muted );
	cursor: not-allowed;
}

/* No separator line above the code-search accordion -- the toggle
   text itself now occupies that visual role (2026-09-04, customer:
   "ne legyeneke elválasztóvonalak a keresőben... így az elválasztó
   vonal sem kell, annak a helyén legyen a szöveg"). */
.hrc-mini-search .hrc-wheel-code-search {
	margin-top: 10px;
	padding-top: 0;
	border-top: none;
}

.hrc-code-search-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --hrc-muted );
	cursor: pointer;
	text-align: left;
}

.hrc-code-search-toggle:hover,
.hrc-code-search-toggle:focus-visible {
	color: var( --hrc-accent );
}

.hrc-code-search-chevron {
	flex: none;
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.hrc-code-search-toggle[aria-expanded="true"] .hrc-code-search-chevron {
	transform: rotate( 180deg );
}

.hrc-wheel-code-search-body {
	margin-top: 10px;
}

.hrc-wheel-code-search-body[hidden] {
	display: none;
}

/* .hrc-vehicle-badge (configurator.css) already has its own
   margin-top for when it follows a .hrc-precision-input -- here it
   instead follows a .hrc-vehicle-panel, which needs a little more
   breathing room above it. Pushed to the card's bottom edge (see
   .hrc-mini-search-card below) so both result rows land on the same
   baseline regardless of each card's own content height (2026-09-04,
   customer: "a kikeresett Kerékagy átmérő és felni középfurat átmérő
   legyen egyvonalban a dobozok alján"). */
/* min-height so both result boxes are the same size regardless of
   which one has the wheel-side thumbnail button (36px img + 10px
   top/bottom padding + 1px top/bottom border = 58px, measured live --
   the vehicle box, text-only, was only 48px without this) (2026-09-04,
   customer: "az eredménydobozok legyen egyforma méretűek" +
   screenshot showing the two boxes at visibly different heights).
   .hrc-vehicle-badge's own align-items:center then keeps the
   text vertically centered in the now-taller box on the vehicle side. */
.hrc-mini-search-result {
	margin-top: 14px;
	min-height: 58px;
}

/* gap:14px guarantees a minimum breathing room above the result row
   no matter what sits directly above it (a plain select on the
   vehicle side, the code-search accordion toggle on the wheel side) --
   margin-top:auto on the result then only adds ON TOP of that gap to
   push it the rest of the way to the card's bottom edge (2026-09-04
   follow-up, customer: "a felni középfurat doboza ne érjen össze a
   keresővel, legyen ott is gap" -- previously the result relied purely
   on its own margin-top:auto, which could shrink to ~0 as soon as the
   two cards' content-above-result heights got close to equal, exactly
   what happened once the accordion toggle became the wheel card's
   last row). */
.hrc-mini-search-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Decorative selected-brand logo, between the vehicle-panel selects
   and the result box (2026-09-04, customer: "szeretném, ha az
   autókereső oldalon megjelennének a márkalogók az alul lévő
   kerékagyátmérő és a kereső között"). object-fit:contain so both
   square emblems and wide wordmark logos (the customer's own logo
   database mixes both) sit centered without stretching or cropping.
   Shows/hides via mini-search.js's showVehicleLogo() on the make
   select's own change event -- never touches wheel-lookup.js/
   vehicle-lookup.js. */
.hrc-mini-search-brand-logo {
	display: block;
	max-width: 120px;
	max-height: 40px;
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}

.hrc-mini-search-brand-logo[hidden] {
	display: none;
}

/* NOTE: an earlier version of this rule also had padding-top:0 here,
   meant to cancel out a perceived double-gap -- it actually broke the
   shared .hrc-vehicle-badge box's own internal padding:10px 12px
   (padding-top forced to 0, bottom staying 10px), which is exactly
   what made the box's text/thumb content read as vertically
   off-center (2026-09-04, customer: "alul a kerékagyátmérő és a
   középfurat dobozokban nincs középvonalban a tartalom"). Removed --
   the gap above is already fully handled by the card's own gap:14px,
   this rule only needs the margin-top:auto push. */
.hrc-mini-search-card .hrc-mini-search-result {
	margin-top: auto;
}

/* Redesigned per the customer's own mockup (2026-09-04): left-aligned
   icon+label+value blocks (Felni / Kerékagy) either side of a
   highlighted "Központosító gyűrű" result box, connected by MDI
   "arrow-right" icons -- see the template's own comment for the exact
   icon sources. Labels are no longer uppercase/letter-spaced
   (customer: "a betű ne legyen all caps, legyen normál, mint a
   mockupon"). */
.hrc-mini-search-summary {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
}

.hrc-mini-search-summary-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Matches the two search-card icons' own size (2026-09-04, customer:
   "legyen nagyobb az autó és a felni ikon is, 60px"). */
.hrc-mini-search-summary-icon {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hrc-mini-search-summary-icon svg {
	width: 39px;
	height: 39px;
}

.hrc-mini-search-summary-icon--wheel {
	background: var( --hrc-info-bg );
	color: var( --hrc-dim );
}

.hrc-mini-search-summary-icon--vehicle {
	background: var( --hrc-accent-soft );
	color: var( --hrc-accent );
}

.hrc-mini-search-summary-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}

/* Same font-size as the value below it (2026-09-04, customer: "a
   Felni és a Kerékagy felirat legyen ugyanakkora, mint alatta a
   méret, weight, color maradjon az, ami most van") -- weight/color
   deliberately untouched. */
.hrc-mini-search-summary-label {
	font-size: 1.05rem;
	font-weight: 400;
	color: var( --hrc-muted );
}

.hrc-mini-search-summary-value {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --hrc-text );
	font-variant-numeric: tabular-nums;
}

.hrc-mini-search-summary-arrow {
	flex: none;
	width: 22px;
	height: 22px;
	color: var( --hrc-muted );
}

/* The middle "Központosító gyűrű" result -- kept visually "kiemelve"
   (customer's own word) in its own bordered/tinted box, rather than
   just another item in the row. */
.hrc-mini-search-summary-ring {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
	padding: 8px 16px;
	border: 1px solid var( --hrc-accent-border );
	background: var( --hrc-accent-soft );
	border-radius: var( --hrc-radius-md );
}

.hrc-mini-search-summary-label--accent {
	color: var( --hrc-accent );
}

.hrc-mini-search-summary-value--accent {
	color: var( --hrc-accent );
}

.hrc-mini-search-summary-thin-arrow {
	flex: none;
	width: 16px;
	height: 16px;
}

/* "Nem szükséges gyűrű" (Wheel_bore == Hub_diameter) / "Nem gyártható
   le" (wall thickness at/below the manufacturing threshold, same
   Min_wall_warning constant preview.js/geometry.js already use) --
   replaces the two-value+thin-arrow readout with a single message,
   toggled by mini-search.js's updateSummary() via the [hidden]
   attribute on one or the other span. The "not manufacturable" case
   reads as a warning (--hrc-error, via the box's own --error modifier
   class); "not needed" stays the box's normal accent color. */
.hrc-mini-search-summary-value[hidden] {
	display: none;
}

[data-hrc-ms-summary-ring-message] {
	font-weight: 600;
}

.hrc-mini-search-summary-ring--error [data-hrc-ms-summary-ring-message] {
	color: var( --hrc-error );
}

/* Model dropdown -- a trigger button styled to match .hrc-vehicle-panel
   select (same border/radius/background/font tokens) plus wheel-
   lookup.js's own card list repurposed as the dropdown's open panel,
   restyled here from a 2-column image grid into a single-column list
   of compact rows (small inline thumbnail + name), per the customer's
   own request (2026-09-04: "a felnikeresőben a képek túl sok helyet
   foglalnak itt, legyen az is legördülő... előtte inline a felni kicsi
   képe... nem kell rá nagyító ikon"). See mini-search.js's own
   setupModelCombo() for the open/closed behavior. */
.hrc-model-combo {
	position: relative;
}

.hrc-model-combo[hidden] {
	display: none;
}

.hrc-model-combo-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var( --bde-palette-color-4, var( --hrc-border-strong ) );
	border-radius: var( --bde-woo-forms__inputs-border-radius, 0px );
	background: var( --bde-woo-forms__inputs-background-color, #fff );
	font-family: inherit;
	font-size: 0.9rem;
	color: var( --hrc-text );
	cursor: pointer;
	text-align: left;
}

.hrc-model-combo-trigger:focus {
	outline: none;
	border-color: var( --bde-woo-forms__inputs-border-color-focused, var( --hrc-accent ) );
	box-shadow: var( --bde-woo-forms__inputs-shadow-focused, 0 0 0 3px var( --hrc-accent-soft ) );
}

/* cursor:zoom-in signals this specific sub-area of the trigger button
   behaves differently from the rest of it -- click opens a lightbox
   instead of toggling the dropdown (2026-09-04, see mini-search.js's
   own setupModelCombo() for the click-target split). */
.hrc-model-combo-thumb {
	flex: none;
	width: 24px;
	height: 24px;
	cursor: zoom-in;
}

.hrc-model-combo-thumb[hidden] {
	display: none;
}

.hrc-model-combo-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.hrc-model-combo-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hrc-model-combo-chevron {
	flex: none;
	width: 16px;
	height: 16px;
	color: var( --hrc-muted );
}

/* wheel-lookup.js's own list, repositioned as this dropdown's open
   overlay panel and restyled from a 2-column card grid into a single
   compact column. The [hidden] attribute itself stays entirely
   wheel-lookup.js's own to manage (whether the list-based UI applies
   to this brand at all) -- mini-search.js layers its own open/closed
   toggle on top via inline style.display, so this positioning only
   needs to apply while [hidden] is already false. */
.hrc-model-combo .hrc-wheel-model-list {
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	z-index: 20;
	display: block;
	max-height: 260px;
	background: var( --bde-woo-forms__inputs-background-color, #fff );
	border: 1px solid var( --bde-palette-color-4, var( --hrc-border-strong ) );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
}

/* No row separators (2026-09-04 follow-up, customer: "a felni
   modellválasztójánál még mindig ott vannak az elválasztóvonalak" --
   the original "ne legyenek elválasztóvonalak a keresőben" request
   covered this list too, missed in the first pass). Padding alone now
   provides the visual spacing between rows. */
.hrc-model-combo .hrc-wheel-model-item {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: 10px;
	padding: 6px 10px;
	border: none;
}

.hrc-model-combo .hrc-wheel-model-thumb {
	width: 30px;
	height: 30px;
	flex: none;
	aspect-ratio: auto;
	cursor: zoom-in;
}

.hrc-model-combo .hrc-wheel-model-name {
	font-size: 0.88rem;
}

/* The zoom-to-enlarge overlay isn't needed here -- the whole row
   (thumbnail included) is already the click target that picks the
   model (customer: "nem kell rá nagyító ikon"). */
.hrc-model-combo .hrc-wheel-model-zoom {
	display: none;
}

@media ( max-width: 720px ) {
	.hrc-mini-search-grid {
		grid-template-columns: 1fr;
	}

	.hrc-mini-search-summary {
		flex-direction: column;
	}

	.hrc-mini-search-summary-arrow {
		transform: rotate( 90deg );
	}
}