/**
 * Scoped under .kgysvc-tire (brief §8: no global-selector leakage,
 * doesn't override Breakdance/theme styles). Color tokens read from
 * the live Breakdance palette the same way the sibling
 * hub-ring-configurator plugin's own configurator.css does
 * (var(--bde-palette-color-*, <fallback>)) so this widget re-themes
 * automatically if the site's brand colors change.
 *
 * 2026-09-03 customer revision: card shape now matches the sibling
 * configurator's own real style (sharp corners, no border, heavy soft
 * shadow) instead of the earlier thin-border/light-radius guess, and
 * the component no longer paints its own page-level background --
 * whatever the surrounding Breakdance page shows through.
 */

.kgysvc-tire {
	--kgysvc-bg: #f9f8f6;
	--kgysvc-card-bg: #ffffff;
	--kgysvc-border: #e5e2db;
	--kgysvc-text: var( --bde-palette-color-1, #201f1d );
	--kgysvc-muted: var( --bde-palette-color-4, #726e68 );
	--kgysvc-accent: var( --bde-palette-color-2, #d9731e );
	--kgysvc-accent-text: var( --bde-palette-color-8, #ffffff );
	--kgysvc-low: #1a7f37;
	--kgysvc-low-bg: #e9f7ee;
	--kgysvc-medium: #b5650a;
	--kgysvc-medium-bg: #fdf1e3;
	--kgysvc-high: #c92a2a;
	--kgysvc-high-bg: #fbeaea;
	/* Same literal value as the sibling plugin's --hrc-dim -- the
	   visualization's dimension lines/labels must match it exactly
	   (2026-09-03 customer request). */
	--kgysvc-dim: #3b5a8a;
	/* Sharp corners (no radius), no border, shadow-only edge definition
	   -- same idea as the sibling plugin's .hrc-card. The blur radius
	   is deliberately much smaller than that sibling's own literal
	   value (75px, copied from an isolated single-box reference
	   element) -- at 75px blur with a 16-20px gap between this
	   layout's own cards, the shadow visibly bled across the gap onto
	   the neighboring card (customer, 2026-09-04: "olyan, mintha a
	   jobb oldali panelek árnyékai rálógnának a baloldali panelekre").
	   Centered (no x-offset) so it doesn't lean asymmetrically into
	   one particular neighbor either. */
	--kgysvc-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );

	font-family: inherit;
	color: var( --kgysvc-text );
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 4px;
}

.kgysvc-tire *,
.kgysvc-tire *::before,
.kgysvc-tire *::after {
	box-sizing: border-box;
}

.kgysvc-card {
	background: var( --kgysvc-card-bg );
	border-radius: 0;
	box-shadow: var( --kgysvc-shadow );
	padding: 22px;
}

/* --- Row 1: input | visualization --- */

.kgysvc-tire__row1 {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 16px;
	align-items: start;
}

.kgysvc-tire__viz {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* height is set inline by tire-size-calculator.js to match the
	   input card's own measured height (customer's explicit request) */
}

.kgysvc-viz-title-short {
	display: none;
}

.kgysvc-viz-note {
	margin: 8px 0 0;
	font-size: 0.78rem;
	color: var( --kgysvc-muted );
	text-align: left;
}

.kgysvc-viz-grid {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex: 1;
	min-width: 0;
	min-height: 0;
}

.kgysvc-viz-grid svg {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/* Dimension lines inside the visualization SVG -- same technical-drawing
   convention and font size as the sibling hub-ring-configurator plugin's
   own .hrc-dim-line/.hrc-dim-label (assets/css/configurator.css), so the
   two plugins' drawings read consistently (2026-09-03 customer request:
   "legyen ugyanakkor, mint a konfigurátornál"). */
.kgysvc-dim-line {
	stroke: var( --kgysvc-dim );
	stroke-width: 2.5;
}

.kgysvc-dim-ext {
	stroke: #b0b6bf;
	stroke-width: 1.5;
}

.kgysvc-dim-label {
	/* These are SVG viewBox units, not rendered CSS pixels -- the whole
	   visualization <svg> is scaled down (~0.4x) to fit its card. Went
	   15 -> 30 -> 46 chasing "too small", each step verified via
	   getBoundingClientRect() (never getComputedStyle(), which just
	   echoes the unscaled attribute) -- 46 then measured as genuinely
	   too big once actually rendered, dialed back to 32 (2026-09-03).
	   Must match DIM_FONT_SIZE in svg-wheel.js, which sizes the label's
	   own background box off this same value. */
	font-size: 32px;
	font-weight: 600;
	fill: var( --kgysvc-dim );
}

/* Backs the wheel panels' own rotated, on-the-line labels (see
   dimensionLines() in svg-wheel.js) -- same "label breaks the line"
   convention as the sibling configurator's own .hrc-dim-label-bg. */
.kgysvc-dim-label-bg {
	fill: #fff;
	opacity: 0.92;
}

/* --- Size fields --- */

.kgysvc-size-field {
	border: 0;
	padding: 0;
	margin: 0 0 16px;
}

.kgysvc-size-field legend {
	font-size: 0.82rem;
	font-weight: 600;
	color: var( --kgysvc-muted );
	padding: 0 0 6px;
}

.kgysvc-size-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.kgysvc-size-row input[type='number'] {
	width: 100%;
	min-width: 0;
	padding: 10px 8px;
	border: 1px solid var( --kgysvc-border );
	border-radius: 8px;
	font-size: 1rem;
	color: var( --kgysvc-text );
	background: #fff;
	text-align: center;
}

.kgysvc-size-row input[type='number']:focus-visible {
	outline: 2px solid var( --kgysvc-accent );
	outline-offset: 1px;
}

.kgysvc-size-row span {
	color: var( --kgysvc-muted );
	font-weight: 600;
	flex: 0 0 auto;
}

.kgysvc-field-error {
	margin: 6px 0 0;
	color: var( --kgysvc-high );
	font-size: 0.82rem;
}

/* --- Primary button (matches Breakdance's own button shape, same
   pattern as the sibling plugin's .hrc-button) --- */

.kgysvc-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var( --bde-button-padding-base, 13px 22px );
	border: var( --bde-button-border-width, 1px ) solid transparent;
	border-radius: var( --bde-button-border-radius, 9999px );
	background: var( --bde-button-primary-background-color, var( --kgysvc-accent ) );
	color: var( --bde-button-primary-text-color, var( --kgysvc-accent-text ) );
	font-size: var( --bde-button-font-size, 1rem );
	font-weight: var( --bde-button-font-weight, 700 );
	cursor: pointer;
	margin-bottom: 18px;
}

.kgysvc-btn-primary:hover {
	background: var( --bde-button-primary-background-color-hover, var( --kgysvc-accent ) );
	opacity: 0.92;
}

.kgysvc-btn-primary:focus-visible {
	outline: 2px solid var( --kgysvc-text );
	outline-offset: 2px;
}

.kgysvc-link-btn[hidden] {
	display: none;
}

.kgysvc-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 0;
	color: var( --kgysvc-accent );
	font-weight: 600;
	font-size: 0.86rem;
	cursor: pointer;
	padding: 4px;
}

.kgysvc-link-btn:focus-visible {
	outline: 2px solid var( --kgysvc-accent );
	outline-offset: 2px;
}

.kgysvc-link-btn__arrow {
	font-size: 0.7em;
	line-height: 1;
}

/* --- Legend (brief §14) --- */

.kgysvc-legend {
	background: var( --kgysvc-bg );
	border: 1px solid var( --kgysvc-border );
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 0.82rem;
}

.kgysvc-legend__title {
	margin: 0 0 6px;
	font-weight: 600;
	color: var( --kgysvc-muted );
}

.kgysvc-legend p {
	margin: 0 0 2px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.kgysvc-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
}

.kgysvc-dot--low { background: var( --kgysvc-low ); }
.kgysvc-dot--medium { background: var( --kgysvc-medium ); }
.kgysvc-dot--high { background: var( --kgysvc-high ); }

/* --- Row 2: table | speedometer --- */

.kgysvc-tire__row2 {
	display: grid;
	/* 1fr 2fr -- explicit 1/3-2/3 target (2026-09-03 customer request),
	   the comparison table needs much less width than the speedometer
	   now that both are real tables. Went 2fr:1fr -> 3fr:2fr -> 1fr:1fr
	   first, each still called "too much space" once actually deployed. */
	grid-template-columns: 1fr 2fr;
	gap: 16px;
	/* stretch (grid default) -- not "start" -- so the speedometer card
	   always matches the comparison table card's own height exactly
	   (2026-09-03 customer request), whichever of the two is taller. */
}

/* Compound selector (.kgysvc-tire .kgysvc-card-title, not just the class
   alone) for the same reason as the sibling configurator's own
   .hrc .hrc-section-title -- Breakdance's global heading preset ships
   as ".breakdance h1, h2, h3 ..." (class+element), which otherwise wins
   over a same-specificity single-class-on-h3 rule and blows the heading
   up to the theme's own large h3 size. Same visual style as the
   configurator's "Bevitt adatok összegzése" title (2026-09-03 customer
   request): small uppercase label, not a full heading. */
.kgysvc-tire .kgysvc-card-title {
	margin: 0 0 16px;
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --kgysvc-muted );
}

.kgysvc-table {
	/* auto, not 100% -- a 100%-wide table with auto layout stretches its
	   columns to fill the card, which is exactly what was spreading the
	   columns too far apart (2026-09-03 customer feedback: "még mindig
	   túl sok az oszlopok között a hely"). Auto width lets each column
	   size to its own content instead. */
	width: auto;
	border-collapse: collapse;
	/* One step down from 0.9rem -- further tightened alongside the
	   padding below to free up more room (2026-09-03 customer request:
	   "tovább lehet szűkíteni... csökkentsd is a betűméretet 1
	   mérettel"). */
	font-size: 0.82rem;
}

.kgysvc-table-head {
	padding: 0 10px 6px;
	color: var( --kgysvc-muted );
	font-size: 0.74rem;
	font-weight: 600;
	/* Always centered over its own column's content, every column
	   (2026-09-03 customer request), not left/right like the data cells. */
	text-align: center;
}

.kgysvc-table-head-short {
	display: none;
}

.kgysvc-table td {
	padding: 4px 10px;
	border-top: 1px solid var( --kgysvc-border );
	/* Desktop: never wrap a value onto 2 lines just because the auto-width
	   column shrank -- only mobile is allowed to wrap (and then centers
	   itself, see the media query below). */
	white-space: nowrap;
}

.kgysvc-table tr:first-child td {
	border-top: 0;
}

.kgysvc-table td:first-child {
	color: var( --kgysvc-muted );
}

.kgysvc-table td:last-child {
	text-align: right;
}

.kgysvc-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 9999px;
	font-weight: 700;
	font-size: 0.82rem;
}

.kgysvc-badge--low { color: var( --kgysvc-low ); background: var( --kgysvc-low-bg ); }
.kgysvc-badge--medium { color: var( --kgysvc-medium ); background: var( --kgysvc-medium-bg ); }
.kgysvc-badge--high { color: var( --kgysvc-high ); background: var( --kgysvc-high-bg ); }

/* Same low/medium/high coloring as the badge above, applied to the
   speedometer's own diff % (both the mobile table cell and the desktop
   card) -- plain text color, not a pill, since it isn't a badge there
   (2026-09-03 customer request). */
.kgysvc-diff--low { color: var( --kgysvc-low ); }
.kgysvc-diff--medium { color: var( --kgysvc-medium ); }
.kgysvc-diff--high { color: var( --kgysvc-high ); }

.kgysvc-note {
	margin: 12px 0 0;
	font-size: 0.78rem;
	color: var( --kgysvc-muted );
}

.kgysvc-speedo-card {
	display: flex;
	flex-direction: column;
}

.kgysvc-speedo-sub {
	/* 0, not the earlier -6px -- measured live: -6px put this 6px above
	   the comparison table's own header row instead of level with it
	   (2026-09-03 customer request: "szöveg első sorának teteje legyen
	   egy vonalban a mellette lévő Jelenlegi/Új/Eltérés szöveg
	   tetejével"). */
	margin: 0 0 12px;
	font-size: 0.82rem;
	color: var( --kgysvc-muted );
}

/* Vertically centers the grid/table in whatever room is left below the
   title+sub text, so the empty space splits above and below it instead
   of all sitting underneath (2026-09-03 customer request: "vidd
   lejjebb, hogy ne legyen akkora üres hely alattuk"). */
.kgysvc-speedo-cards-wrap {
	flex: 1;
	display: flex;
	align-items: center;
}

.kgysvc-speedo-cards-wrap > * {
	width: 100%;
}

/* Two structures in the DOM, one shown at a time by width (2026-09-03
   customer request: the table layout from the previous round is now
   MOBILE-ONLY; desktop goes back to a 2-row layout -- "Kijelzett
   sebesség" as plain text, "Tényleges sebesség" as cards -- per the
   customer's own mockup). */
.kgysvc-speedo-table-mobile {
	display: none;
}

.kgysvc-speedo-grid-desktop {
	display: grid;
	grid-template-columns: auto repeat( 4, 1fr );
	/* More breathing room between the cells now that there's real width
	   to spare (2026-09-03 customer request: "legyen szellősebb"). */
	gap: 16px;
	align-items: center;
}

.kgysvc-speedo-row-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var( --kgysvc-muted );
}

.kgysvc-speedo-indicated-cell {
	text-align: center;
	font-size: 0.9rem;
	white-space: nowrap;
}

.kgysvc-speedo-actual-cell {
	background: var( --kgysvc-bg );
	border: 1px solid var( --kgysvc-border );
	border-radius: 8px;
	padding: 16px 4px;
	text-align: center;
	min-width: 0;
	/* Safety net: at some in-between viewport widths the card's own
	   width shrinks enough that even the reduced font below doesn't
	   fit -- without this, the value visibly spills outside the card's
	   own border instead of just clipping quietly (2026-09-03 customer
	   feedback: "van olyan nézet, ahol a sebesség értékek kilógnak a
	   dobozukból"). */
	overflow: hidden;
}

.kgysvc-speedo-actual-value {
	/* Dialed back further from 0.94rem -- that still overflowed its card
	   at some in-between viewport widths where the grid's own columns
	   are narrower than at full desktop width. */
	font-size: 0.8rem;
	font-weight: 700;
	margin-bottom: 2px;
	white-space: nowrap;
}

.kgysvc-speedo-actual-diff {
	font-size: 0.82rem;
	font-weight: 600;
	/* No fixed color here -- the actual color comes from .kgysvc-diff--
	   low/medium/high, added alongside this class in JS. */
}

/* --- Alternatives --- */

.kgysvc-alt-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}

.kgysvc-alt-head .kgysvc-card-title {
	margin: 0;
}

/* auto-fit, not a fixed column count -- the number of columns that fit
   naturally shrinks (5 -> 4 -> 3 -> 2) as the wrapper narrows, with no
   hand-picked pixel breakpoints needed. JS reads how many columns this
   produced (getComputedStyle().gridTemplateColumns still lists every
   column, including ones collapsed to 0 because there's currently no
   card in them) and rounds the shown card count up to a multiple of
   that, so a partial last row never happens (2026-09-03 customer
   request: "amikor az alternatív méret átvált 2 vagy 3 oszloposra,
   akkor jelenjen meg eggyel több... hogy ne legyen üres hely"). */
.kgysvc-alt-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 10px;
}

/* The individual candidate buttons -- named distinctly from the
   section's own outer .kgysvc-alt-wrapper card (2026-09-03 fix: they
   used to share the .kgysvc-alt-card class, so this box style and its
   hover state were also applying to the big outer wrapper, turning it
   gray with a hover effect it should never have had). Same box as
   .kgysvc-speedo-cell (light tinted background, thin 1px border) --
   NOT the earlier heavy dark border, which was actually the browser/
   theme's own default <button> border showing through unstyled. */
.kgysvc-alt-option {
	background: var( --kgysvc-bg );
	border: 1px solid var( --kgysvc-border );
	border-radius: 8px;
	/* Less top/bottom padding -- shorter boxes (2026-09-03 customer
	   request: "húzd összébb, legyenek kevésbé magasak"). */
	padding: 6px 12px;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.kgysvc-alt-option:hover,
.kgysvc-alt-option:focus-visible {
	background: var( --kgysvc-card-bg );
	border-color: var( --kgysvc-accent );
	outline: none;
}

.kgysvc-alt-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.kgysvc-alt-size {
	font-weight: 700;
	font-size: 0.92rem;
	/* Never wraps, at any width (2026-09-03 customer request: "mindig
	   nowrap a méret, bármilyen nézetben"). */
	white-space: nowrap;
}

.kgysvc-alt-diff {
	font-weight: 700;
	font-size: 0.78rem;
	padding: 2px 8px;
	border-radius: 9999px;
	white-space: nowrap;
}

.kgysvc-alt-option--low .kgysvc-alt-diff { color: var( --kgysvc-low ); background: var( --kgysvc-low-bg ); }
.kgysvc-alt-option--medium .kgysvc-alt-diff { color: var( --kgysvc-medium ); background: var( --kgysvc-medium-bg ); }
.kgysvc-alt-option--high .kgysvc-alt-diff { color: var( --kgysvc-high ); background: var( --kgysvc-high-bg ); }

.kgysvc-alt-label {
	/* Closer to the size above it (2026-09-03 customer request: "kerüljön
	   közelebb a kis eltérés stb szöveg a gumimérethez"). */
	margin-top: 2px;
	font-size: 0.76rem;
	color: var( --kgysvc-muted );
}

.kgysvc-alt-placeholder {
	grid-column: 1 / -1;
	margin: 0;
	padding: 12px 0;
	color: var( --kgysvc-muted );
	font-size: 0.88rem;
}

.kgysvc-disclaimer {
	margin: 0;
	font-size: 0.78rem;
	color: var( --kgysvc-muted );
	max-width: 90ch;
}

/* --- Tablet: the table|speedometer row is too cramped side-by-side at
   this width to be usable (2026-09-03 customer feedback) -- stack them
   like mobile does, and let the alternatives grid drop from 5 to 3
   columns instead of jumping straight to mobile's 2. Comes BEFORE the
   640px block below so mobile's own narrower alt-grid value still wins
   there. --- */

@media ( max-width: 1024px ) {
	.kgysvc-tire__row2 {
		grid-template-columns: 1fr;
	}

	/* The comparison table's own width:auto (see .kgysvc-table above)
	   exists to stop the columns from spreading too far apart in the
	   NARROW 2-column desktop row -- once the table's card goes full
	   width here, that same auto sizing instead left a large empty gap
	   on the right of the card (2026-09-03 customer feedback: "ne
	   maradjon az összegzés panel jobb oldalán ekkora white space").
	   Stretching it to 100% here fills that space properly. */
	.kgysvc-table {
		width: 100%;
	}
}

/* --- Responsive: dedicated mobile layout, not the desktop grid squeezed
   (brief §43) -- input/viz/table/speedo stack; the visualization SVG
   itself keeps its single-row 4-panel arrangement at every width and
   just scales down with the card. --- */

@media ( max-width: 640px ) {
	.kgysvc-tire__row1,
	.kgysvc-tire__row2 {
		grid-template-columns: 1fr;
	}

	.kgysvc-tire__viz {
		height: auto !important;
	}

	.kgysvc-viz-title-full {
		display: none;
	}

	.kgysvc-viz-title-short {
		display: inline;
	}

	.kgysvc-table-head-full {
		display: none;
	}

	.kgysvc-table-head-short {
		display: inline;
	}

	/* When a cell's value wraps onto 2 lines (the number, then its unit
	   on its own line) at this width, center it instead of leaving it
	   left/right-aligned (2026-09-03 customer request) -- white-space
	   goes back to normal here specifically so mobile CAN wrap; desktop
	   never does. */
	.kgysvc-table td {
		white-space: normal;
		text-align: center;
	}

	.kgysvc-speedo-table-mobile {
		display: table;
	}

	.kgysvc-speedo-grid-desktop {
		display: none;
	}
}