/**
 * SaberForce 3D Lightsaber Builder — stílusok.
 *
 * Brand színek a saberforce.hu alapján:
 *  - Háttér:    #121212
 *  - Accent:    #13AFF0 (cyan)
 *
 * Mobile-first layout. Desktopon (≥1024px) split view (3D bal / panel jobb),
 * alatta egymás alá pakolva.
 */

:root {
	--sf-bg: #121212;
	--sf-bg-elevated: #1a1a1a;
	--sf-bg-card: #1f1f1f;
	--sf-fg: #f5f5f5;
	--sf-fg-muted: #a0a0a0;
	--sf-accent: #13AFF0;
	--sf-accent-hover: #0d8ec5;
	--sf-border: #2a2a2a;
	--sf-border-active: #13AFF0;
	--sf-radius: 8px;
}

.sf-builder-shell {
	background: var( --sf-bg );
	color: var( --sf-fg );
	border-radius: var( --sf-radius );
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	font-family: inherit;
}

/* A formelemek (button, input, textarea) alapból nem öröklik a font-ot,
   ezért expliciten ráhúzzuk, hogy a téma betűtípusát kapják meg.
   `inherit` → a .sf-builder-shell font-family: inherit-jén keresztül a page-ből
   örökölnek (OceanWP UI font éles oldalon, theme default lokálban). Korábban itt
   `'PT Serif', serif` volt explicit, ami a serif rendering miatt szélesebb
   gombokat eredményezett és a "Kosárba teszem" wrap-elt → new row, full width. */
.sf-builder-shell button,
.sf-builder-shell input,
.sf-builder-shell select,
.sf-builder-shell textarea,
.sf-builder-shell label,
.sf-builder-shell strong,
.sf-builder-shell span,
.sf-builder-shell small {
	font-family: inherit;
}

@media ( min-width: 1024px ) {
	.sf-builder-shell {
		flex-direction: row;
		align-items: flex-start;
		/* Közös magasság-változó — a viewer-height-hez igazodik a jobb oldali panel is.
		   Default desktop (1024-1599px): fix 600px.
		   Intermediate (1600-1899px): 700px (lásd lent).
		   FullHD+ (>=1900px): clamp(700px, 85vh, 850px) (lásd lent). */
		--sf-viewer-height: 600px;
	}
	.sf-viewer { flex: 1 1 60%; position: sticky; top: 16px; height: var( --sf-viewer-height ); }
	.sf-panel  { flex: 1 1 40%; height: var( --sf-viewer-height ); overflow-y: auto; }
}

/* Intermediate desktop (1600×900 screen-osztály és afölött, FullHD alatt):
   pl. 1600×900, 1680×1050, 1768×992 laptopok → 700px fix viewer/panel magasság. */
@media ( min-width: 1600px ) {
	.sf-builder-shell {
		--sf-viewer-height: 700px;
	}
}

/* FullHD (1920×1080) és nagyobb képernyőkön: responsive viewer-magasság.
   Threshold 1900px, mert a vertikális scrollbar ~15-17px-et levesz a 1920px viewportból
   → tényleges viewport szélesség FullHD-n ~1903-1905px. */
@media ( min-width: 1900px ) {
	.sf-builder-shell {
		--sf-viewer-height: clamp( 700px, 85vh, 850px );
	}
}

/* Viewer (Three.js canvas container) */
.sf-viewer {
	background: radial-gradient( ellipse at center, #1a1a1a 0%, #0a0a0a 100% );
	border-radius: var( --sf-radius );
	min-height: 400px;
	position: relative;
	overflow: hidden;
}
.sf-viewer canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
	touch-action: none;
}
.sf-dimensions-overlay {
	position: absolute;
	bottom: 12px;
	left: 12px;
	padding: 6px 12px;
	background: rgba( 0, 0, 0, 0.6 );
	color: var( --sf-fg-muted );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.5;
	border-radius: 4px;
	pointer-events: none;
	z-index: 10;
}
.sf-dimensions-overlay > div { white-space: nowrap; }
/* Üres állapotban (még nincs alkatrész kiválasztva / hiltBox üres) nincs
   placeholder téglalap. A JS textContent = '' után az elem :empty matchel. */
.sf-dimensions-overlay:empty { display: none; }

/* Disclaimer popup — builder megnyitásakor jelenik meg, OK gombbal eltüntethető */
.sf-disclaimer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.7 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
}
.sf-disclaimer-modal {
	background: var( --sf-bg-elevated );
	border: 1px solid var( --sf-border );
	border-radius: var( --sf-radius );
	padding: 18px 22px;
	max-width: calc( 100% - 32px );
	width: 360px;
	text-align: center;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.6 );
}
.sf-disclaimer-modal-text {
	color: #F80404;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 14px;
}
.sf-disclaimer-modal-ok {
	background: var( --sf-accent );
	color: var( --sf-fg );
	border: none;
	border-radius: 4px;
	padding: 8px 28px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
}
.sf-disclaimer-modal-ok:hover { background: var( --sf-accent-hover ); }

/* A oldal / B oldal címkék — duplapengés + custom módban; 3D-ben a grid sarkaihoz horgonyozva,
   a JS minden frame-ben projection-nel pozícionálja a left/top-ot. */
.sf-side-label {
	position: absolute;
	padding: 4px 12px;
	background: rgba( 19, 175, 240, 0.18 );
	color: var( --sf-fg );
	border: 1px solid var( --sf-accent );
	border-radius: 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.6px;
	pointer-events: none;
	z-index: 10;
	transform: translate( -50%, -50% );
	transition: opacity 0.12s linear;
}
.sf-side-label[hidden] { display: none; }

/* Blade color wheel — 3D viewer jobb felső sarkában (teljesen sarokba igazítva) */
.sf-blade-color-wheel {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
}
.sf-blade-color-wheel[hidden] { display: none; }
.sf-color-wheel-canvas {
	display: block;
	border-radius: 50%;
	cursor: crosshair;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.5 );
	touch-action: none;
}
.sf-color-wheel-marker {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 0 4px rgba( 0, 0, 0, 0.6 ), inset 0 0 2px rgba( 0, 0, 0, 0.3 );
	transform: translate( -50%, -50% );
	pointer-events: none;
}

/* Panel */
.sf-panel-loading,
.sf-panel-error {
	color: var( --sf-fg-muted );
	padding: 24px;
	text-align: center;
}
.sf-panel-error { color: #ff6b6b; }

.sf-step {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var( --sf-border );
}
.sf-step-title {
	margin: 0 0 12px;
	font-size: 21px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var( --sf-accent );
	text-decoration: underline;
	text-decoration-color: #fff;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
/* Kötelező alkatrész jelölő — piros csillag a step-title után.
   `display: inline-block` szükséges, mert a parent `text-decoration: underline`
   propagálódik a leszármazottakra; csak az inline-block formatting context töri meg. */
.sf-required-mark {
	color: #F80404;
	display: inline-block;
	text-decoration: none;
	margin-left: 2px;
}

/* Slot szekció címek sticky-ra ragadnak a panel-scroll tetejéhez (a kompakt
   fénykard típus bar + symmetry toggle alá, ha látszanak). A következő szekció
   címe felülről kitolja a sajátját — tisztán CSS, nincs JS.
   A --sf-sticky-offset és --sf-saber-bar-height CSS változókat JS méri be
   és állítja be a panelen (updateStickyOffsets), így a magasságok dinamikusak. */
.sf-slots-container .sf-step-title {
	position: sticky;
	top: var( --sf-sticky-offset, 0px );
	background: var( --sf-bg );
	margin: 0;
	padding: 8px 0 12px;
	z-index: 4;
	box-shadow: 0 6px 8px -8px rgba( 0, 0, 0, 0.6 );
}

/* A sticky szekció cím alatti kártyákra extra felső térköz, hogy a hover
   translateY(-2px) ne ütközzön a sticky cím hátterével. A térköz a görgethető
   tartalom része (nem a sticky cím része), így a cím háttere nem nő meg. */
.sf-slots-container .sf-option-grid {
	margin-top: 15px;
}

/* Symmetry toggle (Markolat oldalak) sticky a compact saber bar ALÁ, amikor
   double módban vagyunk és a bar látszik (panel.has-compact-saber-bar).
   Sticky állapotban full-width override a 60% max-width-re — különben a
   jobb oldali 40% transparent és a görgetődő alkatrész-kártyák átlátszanak. */
.sf-panel.has-compact-saber-bar .sf-symmetry-toggle:not([hidden]) {
	position: sticky;
	top: var( --sf-saber-bar-height, 56px );
	z-index: 5;                 /* < bar z=6, > slot title z=4 */
	margin: 0;                  /* eredeti margin: 0 0 16px override sticky állapotban */
	max-width: 100%;
	box-shadow: 0 6px 8px -8px rgba( 0, 0, 0, 0.6 );
}

/* Compact fénykard típus váltó — sticky a panel tetején, ha a teljes kártyák
   kigörgetődtek a viewportból. Két gomb, méret = .sf-btn (font-size 21px). */
.sf-saber-bar {
	position: sticky;
	top: 0;
	z-index: 6;
	display: none;
	gap: 8px;
	padding: 10px 0;
	background: var( --sf-bg );
	box-shadow: 0 8px 16px -8px rgba( 0, 0, 0, 0.5 );
}
.sf-saber-bar.is-visible { display: flex; }

.sf-saber-bar-btn {
	flex: 1 1 50%;
	padding: 8px 14px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid;
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
	background: transparent;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sf-saber-bar-btn-single { color: var( --sf-accent ); border-color: var( --sf-accent ); }
.sf-saber-bar-btn-single:hover { background: rgba( 19, 175, 240, 0.12 ); }
.sf-saber-bar-btn-single.is-active {
	background: var( --sf-accent );
	color: #fff;
}

.sf-saber-bar-btn-double { color: #ff2424; border-color: #ff2424; }
.sf-saber-bar-btn-double:hover { background: rgba( 255, 36, 36, 0.12 ); }
.sf-saber-bar-btn-double.is-active {
	background: #ff2424;
	color: #fff;
}

/* Fénykard típus választó (1. lépés) — szélesebb, sematikus SVG illusztráció */
.sf-saber-type-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.sf-saber-type-card {
	padding: 14px 12px 10px;
}
.sf-saber-type-svg {
	width: 100%;
	aspect-ratio: 3 / 1;
	background: #0a0a0a;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 6px;
	box-sizing: border-box;
}
.sf-saber-type-svg svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Option grid + cards */
.sf-option-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	gap: 10px;
}
.sf-option-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 8px 8px;
	background: var( --sf-bg-card );
	border: 1px solid var( --sf-border );
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.15s;
	text-align: center;
}
.sf-option-card:hover { border-color: var( --sf-accent-hover ); transform: translateY( -2px ); }
.sf-option-card:has( input:checked ) {
	border-color: var( --sf-border-active );
	background: rgba( 19, 175, 240, 0.08 );
	box-shadow: 0 0 0 2px rgba( 19, 175, 240, 0.25 );
}
/* Forward-looking figyelmeztetés: az elektronika kártya pirosra vált, ha a
   current grip+pommel belső hossza nem elég ehhez az elektronikához. */
.sf-option-card.sf-card-too-long {
	border-color: #F80404;
	box-shadow: 0 0 0 1px rgba( 248, 4, 4, 0.4 );
}
.sf-option-card.sf-card-too-long:has( input:checked ) {
	background: rgba( 248, 4, 4, 0.08 );
	box-shadow: 0 0 0 2px rgba( 248, 4, 4, 0.5 );
}
.sf-option-card input[type="radio"] {
	position: absolute;
	top: 6px;
	right: 6px;
	accent-color: var( --sf-accent );
	margin: 0;
}
.sf-option-thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #0a0a0a;
	border-radius: 4px;
}
.sf-option-thumb-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --sf-fg-muted );
	font-size: 28px;
	border: 1px dashed var( --sf-border );
}
.sf-option-label {
	font-size: 18px;
	line-height: 1.3;
	color: var( --sf-fg );
	min-height: 2.6em;
	display: flex;
	align-items: center;
}
.sf-option-sublabel {
	font-size: 13px;
	color: var( --sf-fg-muted );
	margin-top: -4px;
	margin-bottom: 2px;
}
.sf-option-price {
	font-size: 16px;
	color: var( --sf-accent );
	font-weight: 600;
	min-height: 14px;
}

/* Color swatches a kártyán belül */
.sf-color-swatches {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-top: 4px;
}
.sf-swatch {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var( --sf-border );
	cursor: pointer;
	padding: 0;
	transition: border-color 0.15s, transform 0.15s;
}
.sf-swatch:hover { transform: scale( 1.1 ); }
.sf-swatch.is-active { border-color: var( --sf-accent ); box-shadow: 0 0 0 2px rgba( 19, 175, 240, 0.3 ); }

/* Assembly cards */
.sf-assembly-card {
	display: block;
	padding: 14px;
	margin-bottom: 8px;
	background: var( --sf-bg-card );
	border: 1px solid var( --sf-border );
	border-radius: 6px;
	cursor: pointer;
}
.sf-assembly-card:has( input:checked ) {
	border-color: var( --sf-border-active );
	background: rgba( 19, 175, 240, 0.08 );
}
.sf-assembly-card strong { display: block; margin: 6px 0 4px; }
.sf-assembly-card span { display: block; font-size: 14px; color: var( --sf-fg-muted ); }
.sf-disclaimer { display: block; margin-top: 8px; font-size: 16px; font-style: italic; color: #888; }

/* Szimmetria toggle (csak double módban) — ugyanaz a vizuális stílus mint az extension position toggle, de szélesebb */
.sf-symmetry-toggle {
	margin: 0 0 16px;
	padding: 14px;
	background: var( --sf-bg-card );
	border: 1px solid var( --sf-border );
	border-radius: 6px;
	max-width: 60%;
}
.sf-symmetry-toggle[hidden] { display: none; }
.sf-symmetry-toggle > strong { display: block; margin-bottom: 10px; font-size: 18px; color: var( --sf-fg ); }
/* A symmetry-toggle row balra igazítva (a globális .sf-ext-toggle-row center
   override-ja), mert sticky full-width állapotban a center furcsán nézne ki. */
.sf-symmetry-toggle .sf-ext-toggle-row { justify-content: flex-start; }

.sf-slots-container {
	display: flex;
	flex-direction: column;
}

/* Extension position toggle slider */
.sf-extension-position {
	margin: 12px 0;
	padding: 14px;
	background: var( --sf-bg-card );
	border: 1px solid var( --sf-border );
	border-radius: 6px;
	max-width: 60%;
}
.sf-extension-position > strong { display: block; margin-bottom: 10px; font-size: 18px; color: var( --sf-fg ); }
.sf-ext-toggle-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}
.sf-ext-toggle-text {
	font-size: 14px;
	color: var( --sf-fg-muted );
	transition: color 0.25s ease;
	line-height: 1.3;
}
.sf-ext-toggle-text.is-active {
	color: #fff;
	font-weight: 600;
}
.sf-ext-toggle-switch {
	position: relative;
	flex: 0 0 48px;
	width: 48px;
	height: 26px;
	background: #3a3a3a;
	border: 1px solid #fff;
	border-radius: 13px;
}
.sf-ext-toggle-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: var( --sf-accent );
	border-radius: 50%;
	transition: left 0.25s ease;
}
.sf-ext-toggle-knob.is-right {
	left: 25px;
}

/* Summary + buttons — sticky a panel aljára, hogy az ár és a fő gombok mindig látszódjanak.
   Desktopon a panel a scroll container (max-height: 80vh, overflow-y: auto), így a sticky a
   panel görgethető területének alján marad. Mobilon (panel scrollnak nincs max-height) a
   summary természetesen lent helyezkedik el, sticky-ként a viewport aljához tapad scroll közben. */
.sf-summary {
	margin-top: 16px;
	padding: 16px;
	background: var( --sf-bg-elevated );
	border-radius: var( --sf-radius );
	position: sticky;
	bottom: 0;
	z-index: 5;
	box-shadow: 0 -8px 16px -8px rgba( 0, 0, 0, 0.5 );
}
.sf-price-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 15px; line-height: 1.3; }
.sf-price-row[hidden] { display: none; }
.sf-price-final { margin-top: 8px; padding-top: 8px; border-top: 1px solid var( --sf-border ); font-size: 20px; line-height: 1.3; }
.sf-price-final strong { color: var( --sf-accent ); }

.sf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
.sf-btn {
	flex: 1 1 auto;
	height: 44px;
	padding: 0 14px;
	background: var( --sf-bg-card );
	color: var( --sf-fg );
	border: 1px solid var( --sf-border );
	border-radius: 6px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background 0.15s, border-color 0.15s;
}
.sf-btn:hover { border-color: var( --sf-accent ); }
.sf-btn:disabled,
.sf-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}
.sf-btn:disabled:hover,
.sf-btn[disabled]:hover {
	border-color: var( --sf-border );
}

/* Missing alkatrészek üzenet a summary-ben (a kosár gomb felett) */
.sf-cart-missing-msg,
.sf-cart-fitting-warn {
	margin-top: 8px;
	padding: 8px 12px;
	background: rgba( 248, 4, 4, 0.1 );
	border: 1px solid rgba( 248, 4, 4, 0.5 );
	border-radius: 4px;
	color: #F80404;
	font-size: 13px;
	text-align: center;
}

/* Elektronika addon (V4 Extra / Ultimate 3.0 stb.) checkbox az electronics
   step section alján — csak akkor látszik, ha a kiválasztott elektronikának
   van admin-ban beállított addon. */
.sf-electronics-addon {
	margin-top: 14px;
	padding: 10px 14px;
	background: var( --sf-bg-elevated );
	border: 1px solid var( --sf-border );
	border-radius: 6px;
}
.sf-electronics-addon[hidden] { display: none; }
.sf-electronics-addon-label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 16px;
	color: var( --sf-fg );
}
.sf-electronics-addon-cb {
	width: 18px;
	height: 18px;
	accent-color: var( --sf-accent );
	cursor: pointer;
	margin: 0;
}
.sf-electronics-addon-text {
	/* Nem flex: 1 — különben a text kitölti a teret és az "i" ikont a szélre tolja.
	   Most a text natural szélességű, az "i" ikon közvetlenül az ár után. */
}

/* Általános "i" info-ikon — hover/focus esetén CSS-tooltipet jelenít meg
   a data-tooltip attribútumból. Bárhol használható, nem csak addon-nál. */
.sf-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var( --sf-fg-muted );
	color: var( --sf-bg );
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	cursor: help;
	position: relative;
	user-select: none;
	flex-shrink: 0;
}
.sf-info-icon[hidden] { display: none; }
.sf-info-icon:hover,
.sf-info-icon:focus {
	background: var( --sf-accent );
	outline: none;
}
.sf-info-icon::after {
	content: attr( data-tooltip );
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% );
	background: rgba( 0, 0, 0, 0.92 );
	color: var( --sf-fg );
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	line-height: 1.4;
	white-space: pre-wrap;
	width: max-content;
	max-width: 280px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s;
	z-index: 100;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.4 );
}
.sf-info-icon:hover::after,
.sf-info-icon:focus::after {
	opacity: 1;
}

/* Inline figyelmeztetés az elektronika step section alatt */
.sf-electronics-fitting-warn {
	margin-top: 12px;
	padding: 10px 14px;
	background: rgba( 248, 4, 4, 0.08 );
	border: 1px solid rgba( 248, 4, 4, 0.45 );
	border-radius: 4px;
	color: #F80404;
	font-size: 14px;
	line-height: 1.45;
}

/* Confirm modal — kosárba tétel előtt: elektronika nem fér el */
.sf-confirm-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.7 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}
.sf-confirm-modal {
	background: var( --sf-bg-elevated );
	border: 1px solid var( --sf-border );
	border-radius: var( --sf-radius );
	padding: 20px 24px;
	max-width: calc( 100% - 32px );
	width: 420px;
	text-align: center;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.6 );
	color: var( --sf-fg );
}
.sf-confirm-modal-text {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 16px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
}
.sf-confirm-modal-icon {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	margin-top: 1px;
}
.sf-confirm-modal-text-body {
	flex: 1 1 auto;
}
.sf-confirm-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}
.sf-confirm-modal-actions .sf-btn {
	flex: 0 1 auto;
	padding: 8px 18px;
	font-size: 14px;
}
.sf-confirm-modal-actions .sf-btn[disabled] {
	opacity: 0.7;
	cursor: wait;
}
/* Spinner a "Folytatás" gomb mellett, amíg a snapshot upload + form submit folyamatban */
.sf-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -3px;
	margin-right: 6px;
	animation: sf-spinner-rot 0.7s linear infinite;
}
@keyframes sf-spinner-rot {
	to { transform: rotate( 360deg ); }
}

/* Random gomb dobókocka emoji-ja egy árnyalattal nagyobb mint a szöveg, hogy hangsúlyosabb legyen */
.sf-btn-random::first-letter {
	font-size: 1.15em;
}

/* Reset gomb ikon — 90°-kal balra (CCW) forgatva */
.sf-btn-reset-icon {
	display: inline-block;
	transform: rotate( -90deg );
}
.sf-btn-primary {
	background: var( --sf-accent );
	border-color: var( --sf-accent );
	color: #fff;
	font-weight: 600;
}
.sf-btn-primary:hover { background: var( --sf-accent-hover ); border-color: #fff; }

.sf-share-link {
	margin-top: 12px;
	padding: 10px;
	background: var( --sf-bg-card );
	border-radius: 6px;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}
/* A hidden attribute UA-stylesheet display:none-ját a fenti display:flex felülírná,
   ezért explicit visszaállítjuk. Mentés gomb kattintásra slot.hidden=false JS-ben. */
.sf-share-link[hidden] { display: none; }
.sf-share-link-label { color: var( --sf-fg-muted ); }
.sf-share-link-url {
	flex: 0 1 auto;
	min-width: 0;
	color: var( --sf-accent );
	word-break: break-all;
}
.sf-share-link-copy {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var( --sf-fg-muted );
	border: 1px solid var( --sf-border );
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sf-share-link-copy:hover {
	color: var( --sf-fg );
	border-color: var( --sf-accent );
}
.sf-share-link-copy.is-copied {
	color: var( --sf-accent );
	border-color: var( --sf-accent );
}
.sf-share-link-copy svg { display: block; }

/* Controls guide + center button — 3D viewer jobb alsó sarka */
.sf-controls-area {
	position: absolute;
	bottom: 16px;
	right: 16px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.sf-controls-guide {
	padding: 10px 16px;
	background: rgba( 0, 0, 0, 0.6 );
	border-radius: 6px;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sf-guide-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: var( --sf-fg-muted );
	white-space: nowrap;
}
.sf-guide-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 28px;
	font-size: 14px;
	font-weight: 700;
	color: var( --sf-fg );
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: 4px;
	padding: 2px 6px;
}
/* Egér ikon — bal/jobb klikk + görgő kiemelés */
.sf-mouse-icon { display: block; }
.sf-mouse-icon .sf-mouse-highlight { fill: rgba( 19, 175, 240, 0.5 ); }
.sf-zoom-arrows {
	font-size: 12px;
	margin-left: 2px;
}
/* Középre igazítás sor */
.sf-guide-center-row, .sf-guide-orient-row { transition: color 0.15s; }
.sf-guide-center-row:hover, .sf-guide-orient-row:hover { color: var( --sf-fg ); }
.sf-guide-center-icon svg { display: block; }
.sf-orient-icon { display: inline-flex; align-items: center; }
.sf-orient-icon svg { display: block; }

.sf-empty { color: var( --sf-fg-muted ); font-size: 20px; padding: 8px 0; }

/* ──────────────────────────────────────────────────────────────────────────
   Mobil + tablet override-ok (< 1024px). Ez a blokk a fájl VÉGÉN van, hogy
   a feljebbi specifikusabb / korábban definiált rule-okat felülírja
   (ugyanazon specificity esetén az utolsó nyer).
   ────────────────────────────────────────────────────────────────────────── */

/* Közös: gomb pozíció, méret-overlay flex layout. A summary az original
   sticky pozíciójánál marad (a panel/widget kereten belül), így nem lóg ki. */
@media ( max-width: 1023px ) {
	.sf-controls-guide .sf-guide-row:not(.sf-guide-center-row):not(.sf-guide-orient-row) {
		display: none;
	}
	.sf-controls-area {
		right: auto;
		left: 50%;
		transform: translateX( -50% );
		align-items: center;
	}
	.sf-controls-guide {
		gap: 14px;
		padding: 6px 12px;
	}
	.sf-dimensions-overlay {
		left: 50%;
		right: auto;
		transform: translateX( -50% );
		text-align: center;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		max-width: calc( 100% - 32px );
	}
	.sf-disclaimer-modal {
		width: 280px;
		padding: 14px 18px;
	}
	.sf-disclaimer-modal-text { font-size: 14px; }
}

/* Tablet (768-1023): desktop-szerű layout — méret overlay bal alul, control
   gombok (recenter + orient) jobb alul, vertikálisan stacked. Felülírja a
   max-width: 1023px közös szabályok center-pozícióját. */
@media ( min-width: 768px ) and ( max-width: 1023px ) {
	.sf-controls-area {
		right: 16px;
		left: auto;
		bottom: 16px;
		transform: none;
		align-items: flex-end;
	}
	.sf-controls-guide {
		flex-direction: column;
		gap: 8px;
	}
	.sf-dimensions-overlay {
		left: 12px;
		right: auto;
		transform: none;
		text-align: left;
		display: block;
		max-width: none;
	}
	.sf-dimensions-overlay > div { white-space: nowrap; }
}

/* Telefon (< 768): méretek a bal FELSŐ sarokba (desktop-szerű függőleges
   stack), recenter+orient gombok a jobb ALSÓ sarokba (vertikálisan stacked).
   Summary kompakt: kisebb font, padding. */
@media ( max-width: 767px ) {
	/* Méretek a bal felső sarokba — desktop-szerű block layout */
	.sf-dimensions-overlay {
		top: 12px;
		bottom: auto;
		left: 12px;
		right: auto;
		transform: none;
		text-align: left;
		display: block;
		max-width: none;
		font-size: 12px;
		padding: 6px 8px;
	}
	.sf-dimensions-overlay > div { white-space: nowrap; }
	/* Reset child order — natural DOM sorrend */
	.sf-dimensions-overlay > div:nth-child( 1 ):nth-last-child( 3 ),
	.sf-dimensions-overlay > div:nth-child( 2 ):nth-last-child( 2 ),
	.sf-dimensions-overlay > div:nth-child( 3 ):nth-last-child( 1 ) {
		order: 0;
		flex-basis: auto;
	}

	/* Controls (recenter + orient) a jobb alsó sarokba, vertikálisan stacked.
	   A két interaktív sor (center + orient) külön gomb-szerű dobozban —
	   a közös .sf-controls-guide háttér eltávolítva, minden ikon önállóan
	   "lebeg" a saját kis háttérpanelján. */
	.sf-controls-area {
		right: 16px;
		left: auto;
		bottom: 16px;
		transform: none;
		align-items: flex-end;
	}
	.sf-controls-guide {
		background: none;
		padding: 0;
		flex-direction: column;
		/* KRITIKUS: align-items: flex-end → minden sor csak a saját content-szélességére
		   méreteződik (nem stretchelődik a legszélesebbhez). Default align-items: stretch
		   miatt korábban a nem-kinyitott sor is tágult, amikor a másik kinyílt. */
		align-items: flex-end;
		gap: 8px;
	}

	/* Alapból csak az ikonok látszanak; hover/tap-re a szöveg a tőlük JOBBRA
	   eső területen jelenik meg, és a row jobb-anchoredsége miatt az ikon balra
	   tolódik. Default flex row → [icon][text]; a row jobb széle (right: 16px)
	   rögzített, így a szöveg növekedésekor az ikon kerül balra.
	   Mindkét sor SAJÁT background-ot kap → vizuálisan különálló gombok. */
	.sf-guide-center-row,
	.sf-guide-orient-row {
		gap: 0;
		background: rgba( 0, 0, 0, 0.6 );
		padding: 4px 8px;
		border-radius: 6px;
	}
	.sf-guide-text {
		display: inline-block;
		max-width: 0;
		overflow: hidden;
		white-space: nowrap;
		transform: translateX( -12px );
		opacity: 0;
		margin-left: 0;
		transition: max-width 0.3s ease,
		            transform 0.3s ease,
		            opacity 0.3s ease,
		            margin-left 0.3s ease;
	}
	/* Explicit JS-vezérelt class — a :hover iOS Safari-n "ragad" touchnál,
	   ezért JS toggle (a builder.js click handler-ben). */
	.sf-guide-center-row.is-expanded .sf-guide-text,
	.sf-guide-orient-row.is-expanded .sf-guide-text {
		max-width: 240px;
		transform: translateX( 0 );
		opacity: 1;
		margin-left: 8px;
	}

	/* Mobilon teljes szélességű (a toggle row középre igazítása már base rule). */
	.sf-extension-position,
	.sf-symmetry-toggle { max-width: 100%; }

	/* Phone summary: min 30% képernyő-magasság, ~3%-kal kisebb fontok.
	   .sf-actions auto margin-toppal a flex container aljára kerül. */
	.sf-summary {
		min-height: 30vh;
		display: flex;
		flex-direction: column;
	}
	.sf-price-row { font-size: 14px; }
	.sf-price-final { font-size: 19px; }
	.sf-btn {
		font-size: 13.5px;
		padding: 0 10px;
		/* Pontosan 2 gomb / sor, mindkettő 50% szélesség mínusz a 8px gap fele.
		   flex-grow=0, flex-shrink=0 — tartalom-hossz nem befolyásolja a szélességet.
		   13.5px font — épp még elfér a "Mentés / megosztás" 50%-os gomb-szélességbe. */
		flex: 0 0 calc( 50% - 4px );
	}
	.sf-actions { margin-top: auto; }
}

/* ── Kép-nagyítás ikon az alkatrész-kártyákon ──────────────────────────── */
.sf-option-thumb-zoom {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	border-radius: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background 0.15s, transform 0.15s;
}
.sf-option-thumb-zoom:hover {
	background: rgba( 0, 0, 0, 0.85 );
	transform: scale( 1.08 );
}
.sf-option-thumb-zoom svg { display: block; }

/* ── Kép-lightbox modál ──────────────────────────────────────────────── */
.sf-image-lightbox-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.85 );
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
	padding: 20px;
}
.sf-image-lightbox-img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	box-shadow: 0 4px 30px rgba( 0, 0, 0, 0.5 );
	border-radius: 4px;
	background: #fff;
}

/* ── Navigációs gomb a summary jobb-felső sarka fölött (a summary-val együtt mozog) ─ */
.sf-nav-btn {
	position: absolute;
	top: -64px;
	right: 8px;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	background: rgba( 0, 0, 0, 0.78 );
	color: #fff;
	border-radius: 8px;
	cursor: pointer;
	display: none;               /* alapból rejtve — saber-type választás után jelenik meg */
	align-items: center;
	justify-content: center;
	z-index: 6;
	transition: background 0.15s, transform 0.15s, color 0.15s, border-color 0.15s;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.4 );
}
.sf-nav-btn.is-visible {
	display: inline-flex;
}
.sf-nav-btn:hover {
	background: rgba( 0, 0, 0, 0.95 );
	transform: scale( 1.06 );
	border-color: var( --sf-accent, #13aff0 );
	color: var( --sf-accent, #13aff0 );
}
.sf-nav-btn svg { display: block; }
@media ( max-width: 480px ) {
	.sf-nav-btn { top: -56px; width: 42px; height: 42px; }
}