/* Velox Component: Velox Typography */
/* =========================================================
   Velox Responsive Heading Scale
   Override-safe for Velox Component Manager
   ========================================================= */

.velox-component--velox-typography h1{
	font-size: clamp(74px, 5.2vw, 68px) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.035em !important;
}

.velox-component--velox-typography h2{
	font-size: clamp(32px, 3.5vw, 46px) !important;
	line-height: 1.10 !important;
	letter-spacing: -0.03em !important;
}

.velox-component--velox-typography h3{
	font-size: clamp(24px, 2.4vw, 32px) !important;
	line-height: 1.18 !important;
	letter-spacing: -0.02em !important;
}

.velox-component--velox-typography h4{
	font-size: clamp(20px, 1.8vw, 24px) !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
}



.velox-component--velox-typography .vx-hero-title{
	font-size: clamp(74px, 5.2vw, 68px) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.035em !important;
}

/* Velox Component: Plugin Pages Styles */
/* =========================================================
   Velox Plugin Metadata
   ========================================================= */

.velox-component--plugin-pages-styles .vx-plugin-meta{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;

	gap: 24px 44px;

	width: 100%;
}

.velox-component--plugin-pages-styles .vx-plugin-meta__item{
	display: flex;
	flex-direction: column;

	gap: 4px;
}

.velox-component--plugin-pages-styles .vx-plugin-meta__item span{
	color: #667085;

	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;

	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.velox-component--plugin-pages-styles .vx-plugin-meta__item strong{
	color: #1f2a3a;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}


/* Mobile */

@media (max-width: 600px) {

	.velox-component--plugin-pages-styles .vx-plugin-meta{
		gap: 18px 28px;
	}

	.velox-component--plugin-pages-styles .vx-plugin-meta__item strong{
		font-size: 13px;
	}

}

/* Velox Component: Velox Home Hero Graphic */
/* =========================================================
   VELOX MAP LOCATOR — HERO VISUAL
   Final cleaned version
   Transparent outer canvas
   Proportional responsive scaling
   ========================================================= */


/* =========================================================
   OUTER RESPONSIVE WRAPPER
   ========================================================= */

.velox-component--270 .vx-hero-scale-box{
	width: 100%;

	background: transparent !important;

	container-type: inline-size;
	container-name: vx-hero-visual;
}


/*
 * Reserves vertical space for the illustration.
 * No background, border, radius or shadow here.
 */

.velox-component--270 .vx-hero-graphic{
	position: relative;

	width: 100%;
	height: 500px;

	margin: 0;

	background: transparent !important;

	overflow: visible;

	box-sizing: border-box;
}


/*
 * Fixed design canvas.
 * Everything inside remains in the same position.
 * Responsive behavior simply scales this entire canvas.
 */

.velox-component--270 .vx-hero-stage{
	position: absolute;

	top: 0;
	left: 50%;

	width: 680px;
	height: 500px;

	background: transparent !important;

	transform:
		translateX(-50%)
		scale(1);

	transform-origin: top center;
}



/* =========================================================
   MAIN MAP LOCATOR WINDOW
   ========================================================= */

.velox-component--270 .vx-hero-browser{
	position: absolute;

	left: 20px;
	top: 42px;

	width: 620px;

	overflow: hidden;

	border: 1px solid rgba(16, 24, 40, 0.12);
	border-radius: 18px;

	background: #ffffff;

	box-shadow:
		0 28px 70px rgba(16, 24, 40, 0.10),
		0 3px 10px rgba(16, 24, 40, 0.05);
}


/* Browser bar */

.velox-component--270 .vx-hero-browser-bar{
	height: 38px;

	display: flex;
	align-items: center;

	gap: 6px;

	padding: 0 14px;

	background: #071522;
}


.velox-component--270 .vx-hero-browser-bar > span{
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: rgba(255,255,255,.60);
}


.velox-component--270 .vx-hero-browser-bar small{
	margin-left: 10px;

	color: rgba(255,255,255,.68);

	font-size: 10px;
}



/* =========================================================
   MAP INTERFACE
   ========================================================= */

.velox-component--270 .vx-hero-map-ui{
	display: grid;

	grid-template-columns: 34% 66%;

	height: 350px;
}



/* =========================================================
   LOCATIONS PANEL
   ========================================================= */

.velox-component--270 .vx-hero-location-list{
	padding: 18px;

	background: #ffffff;
}


.velox-component--270 .vx-hero-location-list > strong{
	display: block;

	margin-bottom: 12px;

	color: #101828;

	font-size: 13px;
}


.velox-component--270 .vx-hero-search{
	height: 32px;

	margin-bottom: 15px;

	border: 1px solid #e4e7ec;
	border-radius: 6px;

	background: #f9fafb;
}


.velox-component--270 .vx-hero-location{
	display: flex;

	gap: 9px;

	padding: 12px 0;

	border-top: 1px solid #edf0f3;
}


.velox-component--270 .vx-hero-location i{
	width: 8px;
	height: 8px;

	margin-top: 6px;

	flex: 0 0 8px;

	border-radius: 50%;

	background: #2e9f67;
}


/* individual location colours */

.velox-component--270 .vx-hero-location:nth-of-type(4) i{
	background: #477cb6;
}

.velox-component--270 .vx-hero-location:nth-of-type(5) i{
	background: #f04405;
}


.velox-component--270 .vx-hero-location b, .velox-component--270 .vx-hero-location small{
	display: block;
}


.velox-component--270 .vx-hero-location b{
	color: #101828;

	font-size: 10px;
}


.velox-component--270 .vx-hero-location small{
	margin-top: 2px;

	color: #98a2b3;

	font-size: 8px;
}



/* =========================================================
   STREET-STYLE MAP
   ========================================================= */

.velox-component--270 .vx-hero-map{
	position: relative;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#dcebea 0%,
			#dfe9d6 62%,
			#eee8d5 100%
		);
}



/* Major roads */

.velox-component--270 .vx-road{
	position: absolute;

	height: 15px;

	border: 2px solid rgba(222,174,92,.48);
	border-radius: 999px;

	background: #f8d99a;

	transform-origin: center;
}


.velox-component--270 .vx-road-a{
	width: 540px;

	left: -90px;
	top: 142px;

	transform: rotate(22deg);
}


.velox-component--270 .vx-road-b{
	width: 470px;

	left: 40px;
	top: 238px;

	transform: rotate(-18deg);
}


.velox-component--270 .vx-road-c{
	width: 310px;

	left: 135px;
	top: 98px;

	transform: rotate(72deg);
}



/* Smaller streets */

.velox-component--270 .vx-street{
	position: absolute;

	background: rgba(255,255,255,.88);

	border-radius: 999px;
}


.velox-component--270 .vx-street-a{
	width: 390px;
	height: 8px;

	left: -25px;
	top: 73px;
}


.velox-component--270 .vx-street-b{
	width: 410px;
	height: 8px;

	left: 5px;
	top: 285px;
}


.velox-component--270 .vx-street-c{
	width: 8px;
	height: 330px;

	left: 128px;
	top: 8px;
}


.velox-component--270 .vx-street-d{
	width: 8px;
	height: 330px;

	left: 305px;
	top: -10px;
}



/* Map labels */

.velox-component--270 .vx-map-label{
	position: absolute;

	z-index: 2;

	color: #6d777b;

	font-size: 9px;

	white-space: nowrap;
}


.velox-component--270 .vx-map-label-a{
	left: 42px;
	top: 58px;

	font-size: 12px;
	font-weight: 700;
}


.velox-component--270 .vx-map-label-b{
	left: 28px;
	top: 99px;
}



/* =========================================================
   MAP MARKERS
   ========================================================= */

.velox-component--270 .vx-marker{
	position: absolute;

	z-index: 4;

	width: 18px;
	height: 18px;

	border: 4px solid #ffffff;

	border-radius: 50% 50% 50% 0;

	background: #f04405;

	transform: rotate(-45deg);

	box-shadow:
		0 3px 8px rgba(16,24,40,.15);
}


.velox-component--270 .vx-marker-1{
	left: 25%;
	top: 28%;
}


.velox-component--270 .vx-marker-2{
	left: 57%;
	top: 43%;

	background: #477cb6;
}


.velox-component--270 .vx-marker-3{
	left: 73%;
	top: 23%;

	background: #4f9270;
}


.velox-component--270 .vx-marker-4{
	left: 43%;
	top: 68%;

	background: #c99048;
}



/* =========================================================
   FLOATING MAP SETTINGS PANEL
   ========================================================= */

.velox-component--270 .vx-hero-settings-panel{
	position: absolute;

	z-index: 10;

	right: 0;
	bottom: 40px;

	width: 220px;

	padding: 16px;

	border: 1px solid rgba(16,24,40,.10);
	border-radius: 15px;

	background: rgba(255,255,255,.98);

	box-shadow:
		0 18px 40px rgba(16,24,40,.11);
}



/* Header */

.velox-component--270 .vx-settings-heading{
	display: flex;
	align-items: center;

	gap: 8px;

	padding-bottom: 10px;
}


.velox-component--270 .vx-settings-icon{
	width: 28px;
	height: 28px;

	display: grid;
	place-items: center;

	flex: 0 0 28px;

	border-radius: 6px;

	background: #f04405;

	color: #ffffff;

	font-size: 14px;
	font-weight: 800;
}


.velox-component--270 .vx-settings-heading strong, .velox-component--270 .vx-settings-heading small{
	display: block;
}


.velox-component--270 .vx-settings-heading strong{
	color: #101828;

	font-size: 10px;
}


.velox-component--270 .vx-settings-heading small{
	margin-top: 1px;

	color: #98a2b3;

	font-size: 6px;
}



/* Tabs */

.velox-component--270 .vx-settings-tabs{
	display: flex;

	gap: 18px;

	margin-bottom: 10px;
	padding-bottom: 8px;

	border-bottom: 1px solid #e4e7ec;

	color: #667085;

	font-size: 7px;
}


.velox-component--270 .vx-settings-tabs span:first-child{
	color: #f04405;
}



/* Labels */

.velox-component--270 .vx-hero-settings-panel label{
	display: block;

	margin: 7px 0 4px;

	color: #667085;

	font-size: 7px;
}



/* Fake fields */

.velox-component--270 .vx-settings-field{
	height: 27px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 0 8px;

	border: 1px solid #e4e7ec;
	border-radius: 5px;

	background: #ffffff;

	color: #475467;

	font-size: 7px;
}


.velox-component--270 .vx-settings-field em{
	color: #98a2b3;

	font-style: normal;
}



/* Settings rows */

.velox-component--270 .vx-settings-option{
	height: 26px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	color: #475467;

	font-size: 7px;
}



/* Fake toggles */

.velox-component--270 .vx-settings-toggle{
	position: relative;

	width: 24px;
	height: 14px;

	flex: 0 0 24px;

	border-radius: 20px;

	background: #f04405;
}


.velox-component--270 .vx-settings-toggle::after{
	content: "";

	position: absolute;

	right: 2px;
	top: 2px;

	width: 10px;
	height: 10px;

	border-radius: 50%;

	background: #ffffff;
}



/* =========================================================
   SHARED FLOATING CARD STYLING
   ========================================================= */

.velox-component--270 .vx-hero-chip, .velox-component--270 .vx-proof-card{
	position: absolute;

	z-index: 12;

	display: flex;
	align-items: center;

	border: 1px solid rgba(16,24,40,.09);

	background: rgba(255,255,255,.98);

	box-shadow:
		0 14px 32px rgba(16,24,40,.09);
}



/* =========================================================
   BUILT FOR WORDPRESS
   ========================================================= */

.velox-component--270 .vx-hero-wordpress{
	left: 0;
	bottom: 38px;

	gap: 11px;

	padding: 12px 15px;

	border-radius: 13px;
}


.velox-component--270 .vx-chip-icon{
	width: 36px;
	height: 36px;

	display: grid;
	place-items: center;

	flex: 0 0 36px;

	border-radius: 9px;

	background: #f04405;

	color: #ffffff;

	font-weight: 800;
}


.velox-component--270 .vx-hero-chip strong, .velox-component--270 .vx-hero-chip small{
	display: block;
}


.velox-component--270 .vx-hero-chip strong{
	color: #101828;

	font-size: 11px;
}


.velox-component--270 .vx-hero-chip small{
	margin-top: 2px;

	color: #667085;

	font-size: 8px;
}



/* =========================================================
   ZERO TELEMETRY
   ========================================================= */

.velox-component--270 .vx-proof-telemetry{
	right: 18px;
	top: 4px;

	gap: 8px;

	padding: 10px 12px;

	border-radius: 11px;
}


.velox-component--270 .vx-proof-symbol{
	width: 25px;
	height: 25px;

	display: grid;
	place-items: center;

	flex: 0 0 25px;

	border-radius: 50%;

	background: #eaf8ef;

	color: #16824b;

	font-size: 12px;
	font-weight: 800;
}



/* =========================================================
   ALL CHECKS PASS
   ========================================================= */

.velox-component--270 .vx-proof-checks{
	left: 225px;
	bottom: 14px;

	gap: 8px;

	padding: 9px 12px;

	border-radius: 11px;
}


.velox-component--270 .vx-proof-dot{
	position: relative;

	width: 18px;
	height: 18px;

	flex: 0 0 18px;

	border-radius: 50%;

	background: #dff5e8;
}


.velox-component--270 .vx-proof-dot::after{
	content: "";

	position: absolute;

	left: 6px;
	top: 6px;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: #28b36a;
}



/* Proof text */

.velox-component--270 .vx-proof-card strong, .velox-component--270 .vx-proof-card small{
	display: block;
}


.velox-component--270 .vx-proof-card strong{
	color: #101828;

	font-size: 9px;
}


.velox-component--270 .vx-proof-card small{
	margin-top: 1px;

	color: #667085;

	font-size: 6.5px;
}



/* =========================================================
   RESPONSIVE SCALING
   -----------------------------------------------
   The illustration NEVER restructures or stacks.
   The entire 680 × 500 design canvas scales proportionally.
   ========================================================= */


/* 680px and below */

@container vx-hero-visual (max-width: 680px) {

	.velox-component--270 .vx-hero-graphic{
		height: 450px;
	}

	.velox-component--270 .vx-hero-stage{
		transform:
			translateX(-50%)
			scale(.90);
	}

}


/* 620px and below */

@container vx-hero-visual (max-width: 620px) {

	.velox-component--270 .vx-hero-graphic{
		height: 410px;
	}

	.velox-component--270 .vx-hero-stage{
		transform:
			translateX(-50%)
			scale(.82);
	}

}


/* 560px and below */

@container vx-hero-visual (max-width: 560px) {

	.velox-component--270 .vx-hero-graphic{
		height: 370px;
	}

	.velox-component--270 .vx-hero-stage{
		transform:
			translateX(-50%)
			scale(.74);
	}

}


/* 500px and below */

@container vx-hero-visual (max-width: 500px) {

	.velox-component--270 .vx-hero-graphic{
		height: 325px;
	}

	.velox-component--270 .vx-hero-stage{
		transform:
			translateX(-50%)
			scale(.65);
	}

}


/* Common mobile width */

@container vx-hero-visual (max-width: 440px) {

	.velox-component--270 .vx-hero-graphic{
		height: 285px;
	}

	.velox-component--270 .vx-hero-stage{
		transform:
			translateX(-50%)
			scale(.57);
	}

}


/* Small mobile */

@container vx-hero-visual (max-width: 380px) {

	.velox-component--270 .vx-hero-graphic{
		height: 250px;
	}

	.velox-component--270 .vx-hero-stage{
		transform:
			translateX(-50%)
			scale(.50);
	}

}


/* Very narrow mobile */

@container vx-hero-visual (max-width: 340px) {

	.velox-component--270 .vx-hero-graphic{
		height: 225px;
	}

	.velox-component--270 .vx-hero-stage{
		transform:
			translateX(-50%)
			scale(.45);
	}

}

/* Velox Component: Map Locator Home Visual */
/* =========================================================
   Velox Map Locator
   Homepage Product Card Visual
   Decorative only
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-visual{
	width: 100%;

	padding: 28px;

	background:
		linear-gradient(
			135deg,
			#e7ede7 0%,
			#e4ecee 54%,
			#efe9df 100%
		);

	box-sizing: border-box;

	container-type: inline-size;
}


/* =========================================================
   WINDOW
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-window{
	width: 100%;

	overflow: hidden;

	border: 1px solid rgba(16,24,40,.10);
	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0 12px 30px rgba(16,24,40,.08);
}


/* Top bar */

.velox-component--map-locator-home-visual .vx-vml-topbar{
	height: 32px;

	display: flex;
	align-items: center;

	gap: 6px;

	padding: 0 12px;

	background: #071522;
}


.velox-component--map-locator-home-visual .vx-vml-topbar > span{
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: rgba(255,255,255,.62);
}


.velox-component--map-locator-home-visual .vx-vml-topbar small{
	margin-left: 8px;

	color: rgba(255,255,255,.65);

	font-size: 8px;
}


/* =========================================================
   INTERFACE
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-interface{
	display: grid;

	grid-template-columns: 34% 66%;

	height: 220px;
}



/* =========================================================
   SIDEBAR
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-sidebar{
	padding: 14px;

	border-right: 1px solid #e4e7ec;

	background: #ffffff;
}


.velox-component--map-locator-home-visual .vx-vml-sidebar-head{
	margin-bottom: 10px;
}


.velox-component--map-locator-home-visual .vx-vml-sidebar-head strong{
	color: #101828;

	font-size: 9px;
}


.velox-component--map-locator-home-visual .vx-vml-search{
	height: 30px;

	margin-bottom: 10px;

	border: 1px solid #dfe3e8;
	border-radius: 6px;

	background: #f8fafb;
}


.velox-component--map-locator-home-visual .vx-vml-location{
	display: flex;

	gap: 8px;

	padding: 11px 0;

	border-top: 1px solid #edf0f3;
}


.velox-component--map-locator-home-visual .vx-vml-location i{
	width: 7px;
	height: 7px;

	flex: 0 0 7px;

	margin-top: 4px;

	border-radius: 50%;
}


.velox-component--map-locator-home-visual .vx-vml-location i.green{ background: #35a86d; }
.velox-component--map-locator-home-visual .vx-vml-location i.blue{ background: #3477d2; }
.velox-component--map-locator-home-visual .vx-vml-location i.orange{ background: #f04405; }


.velox-component--map-locator-home-visual .vx-vml-location b, .velox-component--map-locator-home-visual .vx-vml-location small{
	display: block;
}


.velox-component--map-locator-home-visual .vx-vml-location b{
	color: #101828;

	font-size: 8px;
	font-weight: 800;
}


.velox-component--map-locator-home-visual .vx-vml-location small{
	margin-top: 2px;

	color: #98a2b3;

	font-size: 5.5px;
}



/* =========================================================
   MAP
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-map{
	position: relative;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#dcebea 0%,
			#dde8d8 58%,
			#eee5d1 100%
		);
}


.velox-component--map-locator-home-visual .vx-vml-water{
	position: absolute;

	right: 0;
	top: 0;

	width: 70px;
	height: 62px;

	background: #d7eaf4;

	clip-path: polygon(45% 0,100% 0,100% 100%,0 100%);
}


.velox-component--map-locator-home-visual .vx-vml-park{
	position: absolute;

	left: 24px;
	top: 34px;

	width: 84px;
	height: 62px;

	background: #d7e8cf;

	transform: rotate(-8deg);
}


.velox-component--map-locator-home-visual .vx-vml-street{
	position: absolute;

	border-radius: 999px;

	background: rgba(255,255,255,.88);
}


.velox-component--map-locator-home-visual .street-h-1{
	left: 0;
	top: 54px;

	width: 100%;
	height: 6px;
}

.velox-component--map-locator-home-visual .street-h-2{
	left: 12px;
	top: 130px;

	width: 84%;
	height: 6px;
}

.velox-component--map-locator-home-visual .street-v-1{
	left: 92px;
	top: 0;

	width: 6px;
	height: 100%;
}

.velox-component--map-locator-home-visual .street-v-2{
	left: 168px;
	top: 0;

	width: 6px;
	height: 100%;
}

.velox-component--map-locator-home-visual .street-v-3{
	left: 244px;
	top: 0;

	width: 6px;
	height: 100%;
}


.velox-component--map-locator-home-visual .vx-vml-road{
	position: absolute;

	height: 13px;

	border: 2px solid rgba(222,174,92,.48);
	border-radius: 999px;

	background: #f4d286;
}


.velox-component--map-locator-home-visual .road-a{
	left: -18px;
	top: 88px;

	width: 260px;

	transform: rotate(18deg);
}

.velox-component--map-locator-home-visual .road-b{
	left: 82px;
	top: 120px;

	width: 180px;

	transform: rotate(-19deg);
}


.velox-component--map-locator-home-visual .vx-vml-block{
	position: absolute;

	border: 2px solid #d4d1c8;
	border-radius: 6px;

	background: #e2dfd8;
}


.velox-component--map-locator-home-visual .block-1{ left: 120px; top: 24px; width: 45px; height: 33px; }
.velox-component--map-locator-home-visual .block-2{ left: 186px; top: 26px; width: 52px; height: 37px; }
.velox-component--map-locator-home-visual .block-3{ left: 122px; top: 78px; width: 40px; height: 35px; }
.velox-component--map-locator-home-visual .block-4{ left: 184px; top: 82px; width: 56px; height: 38px; }
.velox-component--map-locator-home-visual .block-5{ left: 150px; top: 145px; width: 48px; height: 34px; }
.velox-component--map-locator-home-visual .block-6{ left: 218px; top: 146px; width: 46px; height: 34px; }


.velox-component--map-locator-home-visual .vx-vml-label{
	position: absolute;

	z-index: 2;

	color: #6d777b;

	white-space: nowrap;
}


.velox-component--map-locator-home-visual .label-park{
	left: 34px;
	top: 56px;

	font-size: 10px;
	font-weight: 700;
}

.velox-component--map-locator-home-visual .label-market{
	left: 28px;
	top: 116px;

	font-size: 8px;
}


/* Markers */

.velox-component--map-locator-home-visual .vx-vml-marker{
	position: absolute;

	z-index: 5;

	width: 16px;
	height: 16px;

	border: 3px solid #ffffff;
	border-radius: 50% 50% 50% 0;

	transform: rotate(-45deg);

	box-shadow: 0 3px 8px rgba(16,24,40,.15);
}


.velox-component--map-locator-home-visual .vx-vml-marker::after{
	content: "";

	position: absolute;

	left: 4px;
	top: 4px;

	width: 3px;
	height: 3px;

	border-radius: 50%;

	background: #ffffff;
}


.velox-component--map-locator-home-visual .vx-vml-marker.orange{ background: #f04405; }
.velox-component--map-locator-home-visual .vx-vml-marker.blue{ background: #3477d2; }
.velox-component--map-locator-home-visual .vx-vml-marker.green{ background: #35a86d; }
.velox-component--map-locator-home-visual .vx-vml-marker.amber{ background: #d99636; }

.velox-component--map-locator-home-visual .marker-1{ left: 38%; top: 56%; }
.velox-component--map-locator-home-visual .marker-2{ left: 72%; top: 35%; }
.velox-component--map-locator-home-visual .marker-3{ left: 54%; top: 72%; }
.velox-component--map-locator-home-visual .marker-4{ left: 84%; top: 62%; }


/* =========================================================
   FLOATING MINI PANEL
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-mini-panel{
	position: absolute;

	right: 12px;
	bottom: 14px;

	width: 108px;

	padding: 10px;

	border: 1px solid rgba(16,24,40,.08);
	border-radius: 10px;

	background: rgba(255,255,255,.96);

	box-shadow:
		0 8px 18px rgba(16,24,40,.08);
}


.velox-component--map-locator-home-visual .vx-vml-mini-panel__title{
	margin-bottom: 8px;

	color: #101828;

	font-size: 7px;
	font-weight: 800;
}


.velox-component--map-locator-home-visual .vx-vml-mini-line{
	height: 8px;

	margin-bottom: 6px;

	border-radius: 4px;

	background: #eef1f4;
}

.velox-component--map-locator-home-visual .vx-vml-mini-line.short{
	width: 72%;
}


.velox-component--map-locator-home-visual .vx-vml-mini-toggle{
	position: relative;

	width: 24px;
	height: 13px;

	margin-top: 4px;
	margin-left: auto;

	border-radius: 20px;

	background: #f04405;
}


.velox-component--map-locator-home-visual .vx-vml-mini-toggle span{
	position: absolute;

	right: 2px;
	top: 2px;

	width: 9px;
	height: 9px;

	border-radius: 50%;

	background: #ffffff;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@container (max-width: 500px) {

	.velox-component--map-locator-home-visual .vx-vml-visual{
		padding: 22px;
	}

	.velox-component--map-locator-home-visual .vx-vml-interface{
		height: 205px;
	}

}


@container (max-width: 400px) {

	.velox-component--map-locator-home-visual .vx-vml-visual{
		padding: 18px;
	}

	.velox-component--map-locator-home-visual .vx-vml-interface{
		height: 185px;
	}

	.velox-component--map-locator-home-visual .vx-vml-sidebar{
		padding: 11px;
	}

}

/* Velox Component: Featured Image Home Visual */
/* =========================================================
   Velox Featured Image for Elementor
   Homepage Product Card Visual
   Decorative only
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-visual{
	width: 100%;

	padding: 28px;

	background:
		linear-gradient(
			135deg,
			#eee8df 0%,
			#e7ecea 52%,
			#e4edef 100%
		);

	box-sizing: border-box;

	container-type: inline-size;
}


/* =========================================================
   WINDOW
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-window{
	width: 100%;

	overflow: hidden;

	border: 1px solid rgba(16,24,40,.10);
	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0 12px 30px rgba(16,24,40,.08);
}


/* Browser bar */

.velox-component--featured-image-home-visual .vx-vfi-topbar{
	height: 32px;

	display: flex;
	align-items: center;

	gap: 6px;

	padding: 0 12px;

	background: #071522;
}


.velox-component--featured-image-home-visual .vx-vfi-topbar > span{
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: rgba(255,255,255,.62);
}


.velox-component--featured-image-home-visual .vx-vfi-topbar small{
	margin-left: 8px;

	color: rgba(255,255,255,.65);

	font-size: 8px;
}


/* =========================================================
   INTERFACE
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-interface{
	display: grid;

	grid-template-columns: 38% 62%;

	height: 220px;
}



/* =========================================================
   ELEMENTOR-STYLE SIDEBAR
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-sidebar{
	padding: 14px;

	border-right: 1px solid #e4e7ec;

	background: #ffffff;

	box-sizing: border-box;
}


.velox-component--featured-image-home-visual .vx-vfi-panel-title{
	display: flex;
	align-items: center;

	gap: 8px;

	margin-bottom: 11px;
}


.velox-component--featured-image-home-visual .vx-vfi-icon{
	width: 25px;
	height: 25px;

	display: grid;
	place-items: center;

	flex: 0 0 25px;

	border-radius: 6px;

	background: #f04405;

	color: #ffffff;

	font-size: 13px;
	font-weight: 800;
}


.velox-component--featured-image-home-visual .vx-vfi-panel-title strong, .velox-component--featured-image-home-visual .vx-vfi-panel-title small{
	display: block;
}


.velox-component--featured-image-home-visual .vx-vfi-panel-title strong{
	color: #101828;

	font-size: 8px;
	font-weight: 800;
}


.velox-component--featured-image-home-visual .vx-vfi-panel-title small{
	margin-top: 1px;

	color: #98a2b3;

	font-size: 5px;
}



/* Tabs */

.velox-component--featured-image-home-visual .vx-vfi-tabs{
	display: flex;
	justify-content: space-between;

	margin-bottom: 11px;
	padding-bottom: 8px;

	border-bottom: 1px solid #e4e7ec;

	color: #667085;

	font-size: 6px;
}


.velox-component--featured-image-home-visual .vx-vfi-tabs span.active{
	color: #f04405;

	font-weight: 700;
}


/* Labels */

.velox-component--featured-image-home-visual .vx-vfi-sidebar label{
	display: block;

	margin: 7px 0 4px;

	color: #667085;

	font-size: 5.5px;
}


/* Fake fields */

.velox-component--featured-image-home-visual .vx-vfi-field{
	height: 27px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 0 8px;

	border: 1px solid #e4e7ec;
	border-radius: 5px;

	background: #ffffff;

	color: #475467;

	font-size: 6px;

	box-sizing: border-box;
}


.velox-component--featured-image-home-visual .vx-vfi-field em{
	color: #98a2b3;

	font-style: normal;
}


/* Toggle row */

.velox-component--featured-image-home-visual .vx-vfi-setting-row{
	min-height: 27px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	color: #475467;

	font-size: 6px;
}


.velox-component--featured-image-home-visual .vx-vfi-toggle{
	position: relative;

	width: 23px;
	height: 13px;

	flex: 0 0 23px;

	border-radius: 20px;

	background: #d0d5dd;
}


.velox-component--featured-image-home-visual .vx-vfi-toggle::after{
	content: "";

	position: absolute;

	left: 2px;
	top: 2px;

	width: 9px;
	height: 9px;

	border-radius: 50%;

	background: #ffffff;
}


.velox-component--featured-image-home-visual .vx-vfi-toggle.on{
	background: #f04405;
}


.velox-component--featured-image-home-visual .vx-vfi-toggle.on::after{
	left: 12px;
}



/* =========================================================
   PREVIEW CANVAS
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-preview{
	position: relative;

	padding: 17px;

	background:
		linear-gradient(
			145deg,
			#eef1ef 0%,
			#e6eceb 50%,
			#e5edf0 100%
		);

	box-sizing: border-box;
}


.velox-component--featured-image-home-visual .vx-vfi-canvas-label{
	position: absolute;

	top: 9px;
	right: 11px;

	color: #98a2b3;

	font-size: 5px;
	font-weight: 600;
}


/* Fake page */

.velox-component--featured-image-home-visual .vx-vfi-page{
	position: absolute;

	left: 21px;
	right: 21px;
	top: 27px;
	bottom: 20px;

	overflow: hidden;

	border: 1px solid rgba(16,24,40,.07);
	border-radius: 10px;

	background: #ffffff;

	box-shadow:
		0 7px 18px rgba(16,24,40,.06);
}


/* Featured image */

.velox-component--featured-image-home-visual .vx-vfi-image{
	position: relative;

	height: 68%;

	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			#d8dfe3 0%,
			#c5d0d6 48%,
			#abb9c1 100%
		);
}


/* Decorative abstract image shapes */

.velox-component--featured-image-home-visual .vx-vfi-image-shape{
	position: absolute;
}


.velox-component--featured-image-home-visual .vx-vfi-image-shape.shape-1{
	left: -8%;
	bottom: -28%;

	width: 72%;
	height: 90%;

	background: #8ea1ad;

	transform: rotate(-18deg);
}


.velox-component--featured-image-home-visual .vx-vfi-image-shape.shape-2{
	right: -12%;
	top: 12%;

	width: 66%;
	height: 76%;

	background: #586d7d;

	transform: rotate(-18deg);
}


.velox-component--featured-image-home-visual .vx-vfi-image-shape.shape-3{
	right: -10%;
	bottom: -45%;

	width: 74%;
	height: 80%;

	background: #ac916d;

	transform: rotate(-18deg);
}


/* Fake content underneath */

.velox-component--featured-image-home-visual .vx-vfi-content{
	padding: 10px 12px;
}


.velox-component--featured-image-home-visual .vx-vfi-line{
	height: 6px;

	margin-bottom: 7px;

	border-radius: 4px;

	background: #e9edf1;
}


.velox-component--featured-image-home-visual .vx-vfi-line-title{
	width: 65%;
	height: 8px;

	background: #d9dfe5;
}


.velox-component--featured-image-home-visual .vx-vfi-line.short{
	width: 46%;
}



/* =========================================================
   DYNAMIC SOURCE CHIP
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-dynamic-chip{
	position: absolute;

	right: 9px;
	bottom: 10px;

	display: flex;
	align-items: center;

	gap: 6px;

	padding: 6px 8px;

	border: 1px solid rgba(16,24,40,.07);
	border-radius: 7px;

	background: rgba(255,255,255,.96);

	box-shadow:
		0 5px 12px rgba(16,24,40,.06);
}


.velox-component--featured-image-home-visual .vx-vfi-dynamic-dot{
	width: 8px;
	height: 8px;

	flex: 0 0 8px;

	border-radius: 50%;

	background: #35a86d;
}


.velox-component--featured-image-home-visual .vx-vfi-dynamic-chip strong, .velox-component--featured-image-home-visual .vx-vfi-dynamic-chip small{
	display: block;
}


.velox-component--featured-image-home-visual .vx-vfi-dynamic-chip strong{
	color: #101828;

	font-size: 5.5px;
}


.velox-component--featured-image-home-visual .vx-vfi-dynamic-chip small{
	margin-top: 1px;

	color: #98a2b3;

	font-size: 4.5px;
}



/* =========================================================
   RESPONSIVE
   Preserve visual composition
   ========================================================= */

@container (max-width: 500px) {

	.velox-component--featured-image-home-visual .vx-vfi-visual{
		padding: 22px;
	}

	.velox-component--featured-image-home-visual .vx-vfi-interface{
		height: 205px;
	}

}


@container (max-width: 400px) {

	.velox-component--featured-image-home-visual .vx-vfi-visual{
		padding: 18px;
	}

	.velox-component--featured-image-home-visual .vx-vfi-interface{
		height: 185px;
	}

	.velox-component--featured-image-home-visual .vx-vfi-sidebar{
		padding: 11px;
	}

	.velox-component--featured-image-home-visual .vx-vfi-preview{
		padding: 12px;
	}

}

/* Velox Component: Table & Chart Builder Home Visual */
/* =========================================================
   Velox Table & Chart Builder
   Homepage Product Card Visual
   Decorative only
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-visual{
	width: 100%;

	padding: 28px;

	background:
		linear-gradient(
			135deg,
			#e7ece8 0%,
			#e3ebed 55%,
			#eee8df 100%
		);

	box-sizing: border-box;

	container-type: inline-size;
}


/* =========================================================
   APPLICATION WINDOW
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-window{
	width: 100%;

	overflow: hidden;

	border: 1px solid rgba(16,24,40,.10);
	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0 12px 30px rgba(16,24,40,.08);
}


/* Browser bar */

.velox-component--table-chart-builder-home-visual .vx-tcb-topbar{
	height: 32px;

	display: flex;
	align-items: center;

	gap: 6px;

	padding: 0 12px;

	background: #071522;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-topbar > span{
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: rgba(255,255,255,.62);
}


.velox-component--table-chart-builder-home-visual .vx-tcb-topbar small{
	margin-left: 8px;

	color: rgba(255,255,255,.65);

	font-size: 8px;
}


/* =========================================================
   INTERFACE
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-interface{
	display: grid;

	grid-template-columns: 32% 68%;

	height: 220px;
}



/* =========================================================
   BUILDER SIDEBAR
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-sidebar{
	padding: 14px;

	border-right: 1px solid #e4e7ec;

	background: #ffffff;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-sidebar-title{
	margin-bottom: 11px;

	color: #101828;

	font-size: 9px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-field{
	min-height: 34px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 6px;

	margin-bottom: 8px;
	padding: 6px 8px;

	border: 1px solid #e4e7ec;
	border-radius: 6px;

	background: #ffffff;

	box-sizing: border-box;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-field span{
	color: #667085;

	font-size: 6px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-field b{
	color: #344054;

	font-size: 6px;
	font-weight: 600;

	text-align: right;
}


/* Fake toggle */

.velox-component--table-chart-builder-home-visual .vx-tcb-toggle{
	position: relative;

	width: 22px;
	height: 12px;

	flex: 0 0 22px;

	border-radius: 20px;

	background: #f04405;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-toggle::after{
	content: "";

	position: absolute;

	right: 2px;
	top: 2px;

	width: 8px;
	height: 8px;

	border-radius: 50%;

	background: #ffffff;
}



/* =========================================================
   CANVAS
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-canvas{
	position: relative;

	padding: 15px;

	background:
		linear-gradient(
			145deg,
			#f4f6f8 0%,
			#eef2f2 100%
		);

	box-sizing: border-box;
}



/* =========================================================
   DATA TABLE
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-table{
	position: absolute;

	left: 15px;
	top: 15px;

	width: 48%;

	overflow: hidden;

	border: 1px solid #e0e4e9;
	border-radius: 8px;

	background: #ffffff;

	box-shadow:
		0 5px 14px rgba(16,24,40,.05);
}


.velox-component--table-chart-builder-home-visual .vx-tcb-table-row{
	display: grid;

	grid-template-columns: 1.2fr .8fr 1fr;

	min-height: 24px;

	align-items: center;

	border-top: 1px solid #eef0f3;

	color: #667085;

	font-size: 6px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-table-row:first-child{
	border-top: 0;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-table-row span{
	padding: 0 7px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-table-head{
	background: #f7f8fa;

	color: #344054;

	font-weight: 700;
}



/* =========================================================
   CHART
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-chart{
	position: absolute;

	right: 15px;
	bottom: 18px;

	width: 66%;
	height: 112px;

	overflow: hidden;

	border: 1px solid #e0e4e9;
	border-radius: 9px;

	background: #ffffff;

	box-shadow:
		0 7px 18px rgba(16,24,40,.06);
}


/* Chart horizontal grid */

.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid{
	position: absolute;

	inset: 12px 12px 23px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid i{
	position: absolute;

	left: 0;
	right: 0;

	height: 1px;

	background: #eef0f3;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid i:nth-child(1){
	top: 0;
}

.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid i:nth-child(2){
	top: 33%;
}

.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid i:nth-child(3){
	top: 66%;
}

.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid i:nth-child(4){
	bottom: 0;
}


/* Bars */

.velox-component--table-chart-builder-home-visual .vx-tcb-bars{
	position: absolute;

	left: 18px;
	right: 14px;
	top: 14px;
	bottom: 9px;

	display: flex;
	align-items: flex-end;
	justify-content: space-around;

	gap: 8px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-bar-wrap{
	position: relative;

	width: 13%;
	height: 78px;

	display: flex;
	align-items: flex-end;
	justify-content: center;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-bar-wrap > span{
	width: 100%;

	min-height: 10px;

	border-radius: 4px 4px 2px 2px;

	background:
		linear-gradient(
			180deg,
			#f26a33,
			#f04405
		);

	box-shadow:
		0 2px 5px rgba(240,68,5,.12);
}


.velox-component--table-chart-builder-home-visual .vx-tcb-bar-wrap small{
	position: absolute;

	left: 50%;
	bottom: -11px;

	transform: translateX(-50%);

	color: #98a2b3;

	font-size: 5px;
}



/* =========================================================
   RESPONSIVE STATUS CHIP
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-status{
	position: absolute;

	right: 14px;
	top: 13px;

	display: flex;
	align-items: center;

	gap: 5px;

	padding: 5px 7px;

	border-radius: 6px;

	background: #edf8f1;

	color: #42735a;

	font-size: 5px;
	font-weight: 600;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-status > span{
	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: #35a86d;
}



/* =========================================================
   RESPONSIVE
   Preserve composition — simply scale internal details
   ========================================================= */

@container (max-width: 500px) {

	.velox-component--table-chart-builder-home-visual .vx-tcb-visual{
		padding: 22px;
	}

	.velox-component--table-chart-builder-home-visual .vx-tcb-interface{
		height: 205px;
	}

}


@container (max-width: 400px) {

	.velox-component--table-chart-builder-home-visual .vx-tcb-visual{
		padding: 18px;
	}

	.velox-component--table-chart-builder-home-visual .vx-tcb-interface{
		height: 185px;
	}

	.velox-component--table-chart-builder-home-visual .vx-tcb-sidebar{
		padding: 11px;
	}

	.velox-component--table-chart-builder-home-visual .vx-tcb-canvas{
		padding: 11px;
	}

}

/* Velox Component: Velox Home Featured Plugin */
/* =========================================================
   VELOX HOME PAGE — FEATURED PRODUCT VISUAL
   Velox Map Locator
   Fixed composition + proportional responsive scaling
   Transparent outer canvas
   ========================================================= */


/* =========================================================
   OUTER WRAPPER
   ========================================================= */

.velox-component--velox-home-featured-plugin .vx-home-product-scale-box{
	width: 100%;
	background: transparent !important;

	container-type: inline-size;
	container-name: vx-home-product;
}


.velox-component--velox-home-featured-plugin .vx-home-product-graphic{
	position: relative;

	width: 100%;
	height: 660px;

	background: transparent !important;
	overflow: visible;

	box-sizing: border-box;
}


/*
 * Fixed design canvas.
 * Everything scales together.
 */

.velox-component--velox-home-featured-plugin .vx-home-product-stage{
	position: absolute;

	top: 0;
	left: 50%;

	width: 920px;
	height: 660px;

	background: transparent !important;

	transform:
		translateX(-50%)
		scale(1);

	transform-origin: top center;
}



/* =========================================================
   MAIN WINDOW
   ========================================================= */

.velox-component--velox-home-featured-plugin .vx-home-browser{
	position: absolute;

	left: 40px;
	top: 52px;

	width: 760px;

	overflow: hidden;

	border: 1px solid rgba(16,24,40,.10);
	border-radius: 18px;

	background: #ffffff;

	box-shadow:
		0 30px 80px rgba(16,24,40,.10),
		0 4px 10px rgba(16,24,40,.04);
}


.velox-component--velox-home-featured-plugin .vx-home-browser-bar{
	height: 28px;

	display: flex;
	align-items: center;

	gap: 7px;

	padding: 0 12px;

	background: #071522;
}


.velox-component--velox-home-featured-plugin .vx-home-browser-bar span{
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: rgba(255,255,255,.72);
}



/* =========================================================
   TOOLBAR
   ========================================================= */

.velox-component--velox-home-featured-plugin .vx-home-toolbar{
	min-height: 46px;

	display: flex;
	align-items: center;

	gap: 16px;

	padding: 9px 14px;

	border-bottom: 1px solid #edf0f3;

	background: #ffffff;
}


.velox-component--velox-home-featured-plugin .vx-home-brand{
	display: flex;
	align-items: center;

	gap: 8px;

	flex: 0 0 auto;
}


.velox-component--velox-home-featured-plugin .vx-home-brand-icon{
	width: 20px;
	height: 20px;

	display: grid;
	place-items: center;

	border-radius: 4px;

	background: #f04405;
	color: #ffffff;

	font-size: 12px;
	font-weight: 800;
}


.velox-component--velox-home-featured-plugin .vx-home-brand strong{
	color: #101828;

	font-size: 11px;
	font-weight: 800;

	white-space: nowrap;
}


.velox-component--velox-home-featured-plugin .vx-home-toolbar-tabs{
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 1;

	gap: 16px;

	color: #667085;

	font-size: 7px;
}


.velox-component--velox-home-featured-plugin .vx-home-toolbar-tabs span.active{
	color: #101828;
	font-weight: 800;
	position: relative;
}


.velox-component--velox-home-featured-plugin .vx-home-toolbar-tabs span.active::after{
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: -15px;

	height: 2px;

	background: #f04405;
}


.velox-component--velox-home-featured-plugin .vx-home-save-btn{
	flex: 0 0 auto;

	padding: 8px 12px;

	border-radius: 4px;

	background: #f04405;
	color: #ffffff;

	font-size: 7px;
	font-weight: 800;

	white-space: nowrap;
}



/* =========================================================
   UI LAYOUT
   ========================================================= */

.velox-component--velox-home-featured-plugin .vx-home-ui{
	display: grid;

	grid-template-columns: 26% 74%;

	height: 412px;
}



/* =========================================================
   SIDEBAR
   ========================================================= */

.velox-component--velox-home-featured-plugin .vx-home-sidebar{
	padding: 14px 12px;

	background: #ffffff;

	border-right: 1px solid #e7eaee;
}


.velox-component--velox-home-featured-plugin .vx-home-sidebar-top{
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: 12px;
}


.velox-component--velox-home-featured-plugin .vx-home-sidebar-top strong{
	font-size: 9px;
	color: #101828;
}


.velox-component--velox-home-featured-plugin .vx-home-sidebar-top span{
	padding: 5px 8px;

	border: 1px solid #f3bfaa;
	border-radius: 4px;

	background: #fff4ef;
	color: #f04405;

	font-size: 6px;
	font-weight: 800;
}


.velox-component--velox-home-featured-plugin .vx-home-search{
	height: 28px;

	display: flex;
	align-items: center;

	gap: 6px;

	padding: 0 8px;
	margin-bottom: 10px;

	border: 1px solid #dfe3e8;
	border-radius: 4px;

	background: #f8fafb;
}


.velox-component--velox-home-featured-plugin .vx-home-search i{
	color: #b3bcc7;
	font-size: 8px;
	font-style: normal;
}


.velox-component--velox-home-featured-plugin .vx-home-search small{
	color: #a2acb8;
	font-size: 6px;
}


.velox-component--velox-home-featured-plugin .vx-home-location{
	display: flex;

	gap: 8px;

	padding: 12px 1px;

	border-top: 1px solid #edf0f3;
}


.velox-component--velox-home-featured-plugin .vx-home-location > i{
	width: 6px;
	height: 6px;

	flex: 0 0 6px;

	margin-top: 4px;

	border-radius: 50%;
}


.velox-component--velox-home-featured-plugin .vx-home-location > i.green{ background: #35a86d; }
.velox-component--velox-home-featured-plugin .vx-home-location > i.blue{ background: #3477d2; }
.velox-component--velox-home-featured-plugin .vx-home-location > i.orange{ background: #f04405; }
.velox-component--velox-home-featured-plugin .vx-home-location > i.amber{ background: #d99636; }
.velox-component--velox-home-featured-plugin .vx-home-location > i.red{ background: #d94e48; }


.velox-component--velox-home-featured-plugin .vx-home-location b, .velox-component--velox-home-featured-plugin .vx-home-location small, .velox-component--velox-home-featured-plugin .vx-home-location em{
	display: block;
}


.velox-component--velox-home-featured-plugin .vx-home-location b{
	color: #101828;

	font-size: 8px;
	font-weight: 800;
}


.velox-component--velox-home-featured-plugin .vx-home-location small{
	margin-top: 2px;

	color: #667085;

	font-size: 5.5px;
}


.velox-component--velox-home-featured-plugin .vx-home-location em{
	margin-top: 3px;

	color: #98a2b3;

	font-size: 5px;
	font-style: normal;
}



/* =========================================================
   MAP
   ========================================================= */

.velox-component--velox-home-featured-plugin .vx-home-map{
	position: relative;

	overflow: hidden;

	background: #eef1e9;
}


.velox-component--velox-home-featured-plugin .vx-home-water{
	position: absolute;

	right: 0;
	top: 0;

	width: 105px;
	height: 86px;

	background: #d8eaf4;

	clip-path: polygon(38% 0,100% 0,100% 100%,0 100%);
}


.velox-component--velox-home-featured-plugin .vx-home-park{
	position: absolute;

	left: 18px;
	top: 38px;

	width: 130px;
	height: 96px;

	background: #d9e8d0;

	transform: rotate(-8deg);
}


.velox-component--velox-home-featured-plugin .vx-home-block{
	position: absolute;

	border: 2px solid #d4d1c8;
	border-radius: 6px;

	background: #e1ded6;
}


.velox-component--velox-home-featured-plugin .block-1{ left: 166px; top: 42px;  width: 73px; height: 45px; }
.velox-component--velox-home-featured-plugin .block-2{ left: 271px; top: 38px;  width: 85px; height: 52px; }
.velox-component--velox-home-featured-plugin .block-3{ left: 382px; top: 42px;  width: 79px; height: 47px; }
.velox-component--velox-home-featured-plugin .block-4{ left: 167px; top: 123px; width: 65px; height: 54px; }
.velox-component--velox-home-featured-plugin .block-5{ left: 256px; top: 118px; width: 82px; height: 61px; }
.velox-component--velox-home-featured-plugin .block-6{ left: 365px; top: 118px; width: 88px; height: 59px; }
.velox-component--velox-home-featured-plugin .block-7{ left: 145px; top: 230px; width: 76px; height: 55px; }
.velox-component--velox-home-featured-plugin .block-8{ left: 255px; top: 223px; width: 78px; height: 51px; }
.velox-component--velox-home-featured-plugin .block-9{ left: 349px; top: 224px; width: 98px; height: 58px; }
.velox-component--velox-home-featured-plugin .block-10{ left: 261px; top: 325px; width: 88px; height: 63px; }


.velox-component--velox-home-featured-plugin .vx-home-street{
	position: absolute;

	border-radius: 999px;

	background: rgba(255,255,255,.88);
}


.velox-component--velox-home-featured-plugin .street-h-1{ left: 0;   top: 49px;  width: 542px; height: 7px; }
.velox-component--velox-home-featured-plugin .street-h-2{ left: 0;   top: 150px; width: 542px; height: 7px; }
.velox-component--velox-home-featured-plugin .street-h-3{ left: 33px; top: 310px; width: 432px; height: 7px; }

.velox-component--velox-home-featured-plugin .street-v-1{ left: 153px; top: 0;  width: 7px; height: 412px; }
.velox-component--velox-home-featured-plugin .street-v-2{ left: 246px; top: 0;  width: 7px; height: 412px; }
.velox-component--velox-home-featured-plugin .street-v-3{ left: 359px; top: 0;  width: 7px; height: 412px; }
.velox-component--velox-home-featured-plugin .street-v-4{ left: 471px; top: 0;  width: 7px; height: 412px; }


.velox-component--velox-home-featured-plugin .vx-home-road{
	position: absolute;

	height: 16px;

	border: 2px solid rgba(222,174,92,.48);
	border-radius: 999px;

	background: #f3d284;
}


.velox-component--velox-home-featured-plugin .road-a{
	left: -26px;
	top: 165px;

	width: 420px;

	transform: rotate(19deg);
}


.velox-component--velox-home-featured-plugin .road-b{
	left: 82px;
	top: 250px;

	width: 356px;

	transform: rotate(-19deg);
}


.velox-component--velox-home-featured-plugin .vx-home-map-label{
	position: absolute;

	z-index: 2;

	color: #6d777b;

	white-space: nowrap;
}


.velox-component--velox-home-featured-plugin .label-park{
	left: 68px;
	top: 75px;

	font-size: 12px;
	font-weight: 700;
}

.velox-component--velox-home-featured-plugin .label-market{
	left: 52px;
	top: 140px;

	font-size: 10px;
}

.velox-component--velox-home-featured-plugin .label-avenue{
	left: 279px;
	top: 239px;

	font-size: 10px;
}

.velox-component--velox-home-featured-plugin .label-road{
	left: 417px;
	top: 130px;

	font-size: 9px;

	transform: rotate(90deg);
	transform-origin: left top;
}

.velox-component--velox-home-featured-plugin .label-lane{
	left: 172px;
	top: 120px;

	font-size: 8px;

	transform: rotate(90deg);
	transform-origin: left top;
}


.velox-component--velox-home-featured-plugin .vx-home-map-type{
	position: absolute;

	z-index: 6;

	left: 10px;
	top: 9px;

	display: flex;

	overflow: hidden;

	border: 1px solid #d8dde4;
	border-radius: 4px;

	background: rgba(255,255,255,.96);
}


.velox-component--velox-home-featured-plugin .vx-home-map-type span{
	padding: 6px 9px;

	color: #667085;

	font-size: 6px;
}


.velox-component--velox-home-featured-plugin .vx-home-map-type span.active{
	color: #101828;
	font-weight: 800;
}


.velox-component--velox-home-featured-plugin .vx-home-fullscreen{
	position: absolute;

	z-index: 6;

	right: 10px;
	top: 10px;

	width: 23px;
	height: 23px;

	display: grid;
	place-items: center;

	border: 1px solid #d9dee5;
	border-radius: 4px;

	background: rgba(255,255,255,.95);

	color: #667085;

	font-size: 9px;
}


.velox-component--velox-home-featured-plugin .vx-home-marker{
	position: absolute;

	z-index: 8;

	width: 18px;
	height: 18px;

	border: 3px solid #ffffff;
	border-radius: 50% 50% 50% 0;

	transform: rotate(-45deg);

	box-shadow: 0 3px 8px rgba(16,24,40,.16);
}


.velox-component--velox-home-featured-plugin .vx-home-marker::after{
	content: "";

	position: absolute;

	left: 4px;
	top: 4px;

	width: 4px;
	height: 4px;

	border-radius: 50%;

	background: #ffffff;
}


.velox-component--velox-home-featured-plugin .vx-home-marker.orange{ background: #f04405; }
.velox-component--velox-home-featured-plugin .vx-home-marker.blue{ background: #3477d2; }
.velox-component--velox-home-featured-plugin .vx-home-marker.green{ background: #35a86d; }
.velox-component--velox-home-featured-plugin .vx-home-marker.amber{ background: #d99636; }
.velox-component--velox-home-featured-plugin .vx-home-marker.red{ background: #d94e48; }


.velox-component--velox-home-featured-plugin .marker-1{ left: 49%; top: 44%; }
.velox-component--velox-home-featured-plugin .marker-2{ left: 75%; top: 25%; }
.velox-component--velox-home-featured-plugin .marker-3{ left: 24%; top: 60%; }
.velox-component--velox-home-featured-plugin .marker-4{ left: 59%; top: 53%; }
.velox-component--velox-home-featured-plugin .marker-5{ left: 86%; top: 73%; }


.velox-component--velox-home-featured-plugin .vx-home-scale{
	position: absolute;

	left: 13px;
	bottom: 10px;

	padding: 4px 7px;

	border: 1px solid #dde2e7;
	border-radius: 3px;

	background: rgba(255,255,255,.94);

	color: #667085;

	font-size: 6px;
}



/* =========================================================
   SETTINGS PANEL
   ========================================================= */

.velox-component--velox-home-featured-plugin .vx-home-settings-panel{
	position: absolute;

	right: 0;
	top: 175px;

	z-index: 10;

	width: 235px;

	padding: 18px;

	border: 1px solid rgba(16,24,40,.10);
	border-radius: 16px;

	background: rgba(255,255,255,.98);

	box-shadow:
		0 22px 46px rgba(16,24,40,.12),
		0 3px 8px rgba(16,24,40,.04);
}


.velox-component--velox-home-featured-plugin .vx-home-settings-head{
	display: flex;
	align-items: center;

	gap: 9px;

	padding-bottom: 12px;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-icon{
	width: 28px;
	height: 28px;

	display: grid;
	place-items: center;

	flex: 0 0 28px;

	border-radius: 6px;

	background: #f04405;
	color: #ffffff;

	font-size: 14px;
	font-weight: 800;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-head strong, .velox-component--velox-home-featured-plugin .vx-home-settings-head small{
	display: block;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-head strong{
	color: #101828;

	font-size: 10px;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-head small{
	margin-top: 2px;

	color: #98a2b3;

	font-size: 6px;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-tabs{
	display: flex;
	justify-content: space-between;

	margin-bottom: 11px;
	padding-bottom: 9px;

	border-bottom: 1px solid #e4e7ec;

	color: #667085;

	font-size: 6px;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-tabs span.active{
	color: #f04405;
	font-weight: 800;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-panel label{
	display: block;

	margin: 8px 0 4px;

	color: #667085;

	font-size: 6px;
}


.velox-component--velox-home-featured-plugin .vx-home-field{
	height: 29px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 0 8px;

	border: 1px solid #e4e7ec;
	border-radius: 5px;

	background: #ffffff;

	color: #344054;

	font-size: 6px;
}


.velox-component--velox-home-featured-plugin .vx-home-field em{
	color: #98a2b3;
	font-style: normal;
}


.velox-component--velox-home-featured-plugin .vx-home-option{
	min-height: 28px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	color: #475467;

	font-size: 6px;
}


.velox-component--velox-home-featured-plugin .vx-home-option i{
	position: relative;

	width: 24px;
	height: 14px;

	flex: 0 0 24px;

	border-radius: 20px;

	background: #d0d5dd;
}


.velox-component--velox-home-featured-plugin .vx-home-option i.on{
	background: #f04405;
}


.velox-component--velox-home-featured-plugin .vx-home-option i::after{
	content: "";

	position: absolute;

	top: 2px;
	left: 2px;

	width: 10px;
	height: 10px;

	border-radius: 50%;

	background: #ffffff;
}


.velox-component--velox-home-featured-plugin .vx-home-option i.on::after{
	left: 12px;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-actions{
	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 8px;

	margin-top: 14px;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-actions span, .velox-component--velox-home-featured-plugin .vx-home-settings-actions strong{
	height: 29px;

	display: grid;
	place-items: center;

	border-radius: 5px;

	font-size: 6px;
	font-weight: 800;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-actions span{
	border: 1px solid #e4e7ec;
	color: #667085;
}


.velox-component--velox-home-featured-plugin .vx-home-settings-actions strong{
	background: #f04405;
	color: #ffffff;
}



/* =========================================================
   WORDPRESS CHIP
   ========================================================= */

.velox-component--velox-home-featured-plugin .vx-home-wordpress-chip{
	position: absolute;

	left: 62px;
	bottom: 64px;

	z-index: 12;

	display: flex;
	align-items: center;

	gap: 12px;

	padding: 14px 17px;

	border: 1px solid rgba(16,24,40,.08);
	border-radius: 14px;

	background: rgba(255,255,255,.98);

	box-shadow:
		0 16px 36px rgba(16,24,40,.10);
}


.velox-component--velox-home-featured-plugin .vx-home-wordpress-icon{
	width: 36px;
	height: 36px;

	display: grid;
	place-items: center;

	flex: 0 0 36px;

	border-radius: 9px;

	background: #f04405;
	color: #ffffff;

	font-weight: 800;
}


.velox-component--velox-home-featured-plugin .vx-home-wordpress-chip strong, .velox-component--velox-home-featured-plugin .vx-home-wordpress-chip small{
	display: block;
}


.velox-component--velox-home-featured-plugin .vx-home-wordpress-chip strong{
	color: #101828;

	font-size: 11px;
}


.velox-component--velox-home-featured-plugin .vx-home-wordpress-chip small{
	margin-top: 2px;

	color: #667085;

	font-size: 7px;
}



/* =========================================================
   RESPONSIVE SCALING
   No stacking. No reflow.
   Entire composition scales proportionally.
   ========================================================= */

@container vx-home-product (max-width: 920px) {

	.velox-component--velox-home-featured-plugin .vx-home-product-graphic{
		height: 595px;
	}

	.velox-component--velox-home-featured-plugin .vx-home-product-stage{
		transform:
			translateX(-50%)
			scale(.90);
	}

}


@container vx-home-product (max-width: 840px) {

	.velox-component--velox-home-featured-plugin .vx-home-product-graphic{
		height: 528px;
	}

	.velox-component--velox-home-featured-plugin .vx-home-product-stage{
		transform:
			translateX(-50%)
			scale(.80);
	}

}


@container vx-home-product (max-width: 760px) {

	.velox-component--velox-home-featured-plugin .vx-home-product-graphic{
		height: 462px;
	}

	.velox-component--velox-home-featured-plugin .vx-home-product-stage{
		transform:
			translateX(-50%)
			scale(.70);
	}

}


@container vx-home-product (max-width: 680px) {

	.velox-component--velox-home-featured-plugin .vx-home-product-graphic{
		height: 396px;
	}

	.velox-component--velox-home-featured-plugin .vx-home-product-stage{
		transform:
			translateX(-50%)
			scale(.60);
	}

}


@container vx-home-product (max-width: 600px) {

	.velox-component--velox-home-featured-plugin .vx-home-product-graphic{
		height: 343px;
	}

	.velox-component--velox-home-featured-plugin .vx-home-product-stage{
		transform:
			translateX(-50%)
			scale(.52);
	}

}


@container vx-home-product (max-width: 520px) {

	.velox-component--velox-home-featured-plugin .vx-home-product-graphic{
		height: 297px;
	}

	.velox-component--velox-home-featured-plugin .vx-home-product-stage{
		transform:
			translateX(-50%)
			scale(.45);
	}

}


@container vx-home-product (max-width: 440px) {

	.velox-component--velox-home-featured-plugin .vx-home-product-graphic{
		height: 257px;
	}

	.velox-component--velox-home-featured-plugin .vx-home-product-stage{
		transform:
			translateX(-50%)
			scale(.39);
	}

}


@container vx-home-product (max-width: 380px) {

	.velox-component--velox-home-featured-plugin .vx-home-product-graphic{
		height: 224px;
	}

	.velox-component--velox-home-featured-plugin .vx-home-product-stage{
		transform:
			translateX(-50%)
			scale(.34);
	}

}