@font-face {
	font-family: "Roboto Flex";
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-flex-cyrillic-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "Roboto Flex";
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-flex-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Roboto Flex";
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-flex-greek.woff2") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "Roboto Flex";
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-flex-vietnamese.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: "Roboto Flex";
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-flex-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Roboto Flex";
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-flex-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.remap4me-widget {
	--r4m-bg: #ffffff;
	--r4m-surface: #f5f6f8;
	--r4m-border: #c6c6c6;
	--r4m-text: #1b1f24;
	--r4m-text-muted: #5b6470;
	--r4m-accent: #a41d29;
	--r4m-accent-text: #ffffff;
	--r4m-success: #1c8a4b;
	--r4m-radius: 10px;
	--r4m-radius-sm: 8px;

	box-sizing: border-box;
	max-width: 100%;
	font-family: "Roboto Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--r4m-text) !important;
	color-scheme: light;
}

.remap4me-widget[data-theme="dark"] {
	--r4m-bg: #14171c;
	--r4m-surface: #1c2027;
	--r4m-border: #2c313a;
	--r4m-text: #f1f3f5;
	--r4m-text-muted: #9aa4b2;
	--r4m-accent: #a41d29;
	--r4m-accent-text: #ffffff;
	--r4m-success: #38c172;
	color-scheme: dark;
}

.remap4me-widget * {
	box-sizing: border-box;
}

.remap4me-widget[dir="rtl"] {
	direction: rtl;
}

/* Selector row: Brand / Model / Generation / Engine / Find */
.remap4me-form {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 12px;
	background: var(--r4m-bg) !important;
	/* border: 1px solid var(--r4m-border) !important; */
	border-radius: var(--r4m-radius) !important;
	padding: 16px;
}

.remap4me-field {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 6px;
}

.remap4me-field label {
	font-size: 12px;
	font-weight: 700;
	color: var(--r4m-text-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em;
}

.powered-by, .powered-by a {
	font-size: 8px !important;
	font-weight: 400 !important;
	color: var(--r4m-text-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em;
	text-align: center;
}

.powered-by a {
	color: var(--r4m-accent) !important;
}

.remap4me-select {
	width: 100%;
	height: 44px;
	padding: 0 32px 0 12px;
	background: var(--r4m-surface) !important;
	border: 1px solid var(--r4m-border) !important;
	border-radius: var(--r4m-radius) !important;
	color: var(--r4m-text) !important;
	font-size: 14px;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 15px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	opacity: 1;
	transition: border-color 0.15s ease, opacity 0.15s ease;
	margin: 0px !important;
}

.remap4me-widget[dir="rtl"] .remap4me-select {
	padding: 0 12px 0 32px;
	background-position: 20px center, 15px center;
}

.remap4me-select option {
	background: var(--r4m-surface) !important;
	color: var(--r4m-text) !important;
}

.remap4me-select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.remap4me-select:focus-visible,
.remap4me-btn:focus-visible {
	outline: 2px solid var(--r4m-accent) !important;
	outline-offset: 2px;
}

.remap4me-btn {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 44px;
	padding: 0 28px;
	background: var(--r4m-accent) !important;
	color: var(--r4m-accent-text) !important;
	border: none !important;
	border-radius: var(--r4m-radius) !important;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.remap4me-btn:hover:not(:disabled) {
	filter: brightness(1.08);
}

.remap4me-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.remap4me-status {
	margin-top: 10px;
	font-size: 13px;
	color: var(--r4m-text-muted) !important;
}

.remap4me-status.is-error {
	color: var(--r4m-accent) !important;
}

/* Results panel */
@keyframes remap4me-fade-in-down {
	from {
		opacity: 0;
		transform: translateY(-16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.remap4me-results {
	margin-top: 20px;
	background: var(--r4m-bg) !important;
	border: 1px solid var(--r4m-border) !important;
	border-radius: var(--r4m-radius) !important;
	padding: 20px;
	animation: remap4me-fade-in-down 0.4s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.remap4me-results {
		animation: none;
	}
}

.remap4me-results-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	padding-bottom: 13px;
	border-bottom: 2px solid var(--r4m-accent);
}

.remap4me-results-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase !important;
}

.remap4me-image {
	width: 100%;
	max-width: 320px;
	border-radius: var(--r4m-radius-sm);
	margin-bottom: 16px;
	display: block;
}

.remap4me-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.remap4me-stat {
	background: var(--r4m-surface);
	border: 1px solid var(--r4m-border);
	border-radius: var(--r4m-radius-sm);
	padding: 12px 14px;
}

.remap4me-stat-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--r4m-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

.remap4me-stat-value {
	font-size: 18px;
	font-weight: 700;
}

.remap4me-stat-value .remap4me-stat-delta {
	font-size: 12px;
	font-weight: 600;
	color: var(--r4m-success);
	margin-left: 6px;
}

.remap4me-stat--highlight {
	background: var(--r4m-accent);
	border-color: var(--r4m-accent);
	color: #ffffff;
}

.remap4me-stat--highlight .remap4me-stat-label {
	color: rgba(255, 255, 255, 0.8);
}

.remap4me-stat--highlight .remap4me-stat-value,
.remap4me-stat--highlight .remap4me-stat-value .remap4me-stat-delta {
	color: #ffffff;
}

.remap4me-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--r4m-text-muted);
}

.remap4me-meta strong {
	color: var(--r4m-text);
	font-weight: 600;
}

.remap4me-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.remap4me-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--r4m-surface);
	border: 1px solid var(--r4m-border);
	font-size: 12px;
	font-weight: 600;
}

/* Laptops and monitors: horizontal row, equal-width fields */
@media (min-width: 901px) {
	.remap4me-field {
		width: 0;
	}
}

/* Tablets and mobile phones: stacked, full width */
@media (max-width: 900px) {
	.remap4me-form {
		flex-direction: column;
	}

	.remap4me-field {
		width: 100%;
	}

	.remap4me-actions {
		width: 100%;
	}

	.remap4me-btn {
		width: 100%;
	}
}