/* 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: How it Works - Map Locator */
/* =========================================================
   VELOX PLUGINS — HOW IT WORKS CARDS ONLY
   No background applied to the main section/container
========================================================= */

.velox-component--how-it-works-map-locator .velox-how-flow{
  --vx-orange: #f04405;
  --vx-navy: #071522;
  --vx-ink: #101828;
  --vx-text: #475467;
  --vx-muted: #667085;
  --vx-border: #e4e7ec;
  --vx-visual-bg: #f8f9fb;
  --vx-white: #ffffff;

  width: 100%;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}


.velox-component--how-it-works-map-locator .velox-how-flow, .velox-component--how-it-works-map-locator .velox-how-flow *{
  box-sizing: border-box;
}


.velox-component--how-it-works-map-locator .velox-how-flow-inner{
  width: 100%;
  margin: 0 auto;
}


/* =========================================================
   THREE CARD LAYOUT
========================================================= */

.velox-component--how-it-works-map-locator .velox-how-cards{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}


/* horizontal connecting line */

.velox-component--how-it-works-map-locator .velox-how-cards::before{
  content: "";
  position: absolute;
  z-index: 0;
  top: 63px;
  left: 16.5%;
  right: 16.5%;
  height: 1px;
  background: #d4d0c8;
}


/* =========================================================
   CARD
========================================================= */

.velox-component--how-it-works-map-locator .velox-how-card{
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 508px;

  padding: 30px;

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

  background: var(--vx-white);

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


.velox-component--how-it-works-map-locator .velox-how-number{
  position: relative;
  z-index: 2;

  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  flex: 0 0 46px;

  margin-bottom: 22px;

  border-radius: 50%;

  background: var(--vx-navy);
  color: #ffffff;

  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}


.velox-component--how-it-works-map-locator .velox-how-card-content{
  display: flex;
  flex-direction: column;
  flex: 1;
}


.velox-component--how-it-works-map-locator .velox-how-label{
  display: block;

  margin-bottom: 7px;

  color: var(--vx-orange);

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

  letter-spacing: .08em;
  text-transform: uppercase;
}


.velox-component--how-it-works-map-locator .velox-how-card h3{
  margin: 0;

  color: var(--vx-ink);

  font-family:
    Manrope,
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 23px;
  line-height: 1.22;
  font-weight: 700;

  letter-spacing: -.035em;
}


.velox-component--how-it-works-map-locator .velox-how-card p{
  margin: 13px 0 0;

  color: var(--vx-text);

  font-size: 15px;
  line-height: 1.65;
}


/* =========================================================
   MINI VISUAL PANEL
========================================================= */

.velox-component--how-it-works-map-locator .velox-how-visual{
  width: 100%;

  min-height: 207px;

  margin-top: auto;
  padding: 16px;

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

  border: 1px solid var(--vx-border);
  border-radius: 14px;

  background: var(--vx-visual-bg);
}


/* =========================================================
   STEP 01 — LOCATION LIST
========================================================= */

.velox-component--how-it-works-map-locator .velox-location-list{
  width: 100%;

  display: grid;
  gap: 8px;
}


.velox-component--how-it-works-map-locator .velox-location-item{
  min-height: 52px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 9px 10px;

  border: 1px solid var(--vx-border);
  border-radius: 8px;

  background: #ffffff;
}


.velox-component--how-it-works-map-locator .velox-location-dot{
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;
}


.velox-component--how-it-works-map-locator .velox-dot-orange{
  background: var(--vx-orange);
}


.velox-component--how-it-works-map-locator .velox-dot-green{
  background: #35a86d;
}


.velox-component--how-it-works-map-locator .velox-dot-blue{
  background: #3477d2;
}


.velox-component--how-it-works-map-locator .velox-location-item strong{
  display: block;

  color: var(--vx-ink);

  font-size: 10px;
  line-height: 1.25;
  font-weight: 750;
}


.velox-component--how-it-works-map-locator .velox-location-item small{
  display: block;

  margin-top: 3px;

  color: var(--vx-muted);

  font-size: 8px;
  line-height: 1.2;
}


/* =========================================================
   STEP 02 — CONFIGURATION
========================================================= */

.velox-component--how-it-works-map-locator .velox-config-panel{
  width: 100%;

  padding: 13px 14px;

  border: 1px solid var(--vx-border);
  border-radius: 10px;

  background: #ffffff;
}


.velox-component--how-it-works-map-locator .velox-config-row{
  min-height: 30px;

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

  gap: 14px;

  border-bottom: 1px solid #edf0f3;

  font-size: 9px;
  line-height: 1.2;
}


.velox-component--how-it-works-map-locator .velox-config-row:last-child{
  border-bottom: 0;
}


.velox-component--how-it-works-map-locator .velox-config-row span{
  color: var(--vx-muted);
}


.velox-component--how-it-works-map-locator .velox-config-row strong{
  color: var(--vx-ink);

  font-weight: 750;
  text-align: right;
}


/* =========================================================
   STEP 03 — PUBLISHED LOCATORS
========================================================= */

.velox-component--how-it-works-map-locator .velox-publish-list{
  width: 100%;

  display: grid;
  gap: 8px;
}


.velox-component--how-it-works-map-locator .velox-publish-item{
  position: relative;

  min-height: 52px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 9px 12px 9px 17px;

  overflow: hidden;

  border: 1px solid var(--vx-border);
  border-radius: 8px;

  background: #ffffff;
}


.velox-component--how-it-works-map-locator .velox-publish-item::before{
  content: "";

  position: absolute;

  left: 0;
  top: 10px;
  bottom: 10px;

  width: 3px;

  border-radius: 3px;
}


.velox-component--how-it-works-map-locator .velox-publish-orange::before{
  background: var(--vx-orange);
}


.velox-component--how-it-works-map-locator .velox-publish-blue::before{
  background: #3477d2;
}


.velox-component--how-it-works-map-locator .velox-publish-green::before{
  background: #35a86d;
}


.velox-component--how-it-works-map-locator .velox-publish-item small{
  display: block;

  color: var(--vx-muted);

  font-size: 7px;
  line-height: 1.2;
  font-weight: 600;

  letter-spacing: .06em;
  text-transform: uppercase;
}


.velox-component--how-it-works-map-locator .velox-publish-item strong{
  display: block;

  margin-top: 3px;

  color: var(--vx-ink);

  font-size: 10px;
  line-height: 1.2;
  font-weight: 750;
}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.velox-component--how-it-works-map-locator .velox-how-note{
  width: min(820px, 100%);

  margin: 38px auto 0;
  padding-top: 25px;

  border-top: 1px solid #d8d4cc;

  color: var(--vx-muted);

  text-align: center;

  font-size: 13px;
  line-height: 1.6;
}


.velox-component--how-it-works-map-locator .velox-how-note strong{
  color: var(--vx-ink);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

  .velox-component--how-it-works-map-locator .velox-how-cards{
    grid-template-columns: 1fr;
    gap: 22px;
  }


  .velox-component--how-it-works-map-locator .velox-how-cards::before{
    top: 60px;
    bottom: 60px;
    left: 23px;
    right: auto;

    width: 1px;
    height: auto;
  }


  .velox-component--how-it-works-map-locator .velox-how-card{
    min-height: 0;

    padding: 28px;
    padding-left: 78px;
  }


  .velox-component--how-it-works-map-locator .velox-how-number{
    position: absolute;

    left: 22px;
    top: 28px;
  }


  .velox-component--how-it-works-map-locator .velox-how-visual{
    min-height: 170px;

    margin-top: 24px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .velox-component--how-it-works-map-locator .velox-how-cards{
    gap: 18px;
  }


  .velox-component--how-it-works-map-locator .velox-how-card{
    padding: 22px;
    padding-left: 68px;

    border-radius: 15px;
  }


  .velox-component--how-it-works-map-locator .velox-how-number{
    left: 18px;
    top: 22px;

    width: 40px;
    height: 40px;

    flex-basis: 40px;

    font-size: 11px;
  }


  .velox-component--how-it-works-map-locator .velox-how-cards::before{
    left: 38px;
  }


  .velox-component--how-it-works-map-locator .velox-how-card h3{
    font-size: 20px;
  }


  .velox-component--how-it-works-map-locator .velox-how-card p{
    font-size: 14px;
  }


  .velox-component--how-it-works-map-locator .velox-how-visual{
    min-height: 150px;

    padding: 12px;
  }


  .velox-component--how-it-works-map-locator .velox-how-note{
    margin-top: 28px;
    padding-top: 20px;

    font-size: 12px;
  }

}

/* Velox Component: Use Cases - Map Locator */
/* =========================================================
   VELOX PLUGINS — USE CASE CARDS
   No section background
   No max-width on main container
========================================================= */

.velox-component--use-cases-map-locator .velox-use-cases{
  --vx-orange: #f04405;
  --vx-ink: #101828;
  --vx-text: #475467;
  --vx-muted: #667085;
  --vx-border: #e4e7ec;
  --vx-white: #ffffff;

  width: 100%;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}


.velox-component--use-cases-map-locator .velox-use-cases, .velox-component--use-cases-map-locator .velox-use-cases *{
  box-sizing: border-box;
}


/* =========================================================
   GRID
========================================================= */

.velox-component--use-cases-map-locator .velox-use-grid{
  width: 100%;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;
}


/* =========================================================
   CARD
========================================================= */

.velox-component--use-cases-map-locator .velox-use-card{
  min-width: 0;
  min-height: 270px;

  display: flex;
  flex-direction: column;

  padding: 28px;

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

  background: var(--vx-white);

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


/* =========================================================
   NUMBER
========================================================= */

.velox-component--use-cases-map-locator .velox-use-number{
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  margin-bottom: 22px;

  border-radius: 10px;

  background: #ffffff;
  color: var(--vx-orange);

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

  font-size: 11px;
  line-height: 1;
  font-weight: 800;
}


/* =========================================================
   TITLE
========================================================= */

.velox-component--use-cases-map-locator .velox-use-card h3{
  margin: 0;

  color: var(--vx-ink);

  font-family:
    Manrope,
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;

  letter-spacing: -.03em;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.velox-component--use-cases-map-locator .velox-use-card p{
  margin: 10px 0 0;

  color: var(--vx-text);

  font-size: 14px;
  line-height: 1.65;
}


/* =========================================================
   BEST FIT
========================================================= */

.velox-component--use-cases-map-locator .velox-use-fit{
  margin-top: auto;
  padding-top: 15px;

  border-top: 1px solid var(--vx-border);

  color: var(--vx-muted);

  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
}


.velox-component--use-cases-map-locator .velox-use-fit strong{
  color: var(--vx-muted);
  font-weight: 800;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .velox-component--use-cases-map-locator .velox-use-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }


  .velox-component--use-cases-map-locator .velox-use-card{
    min-height: 0;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .velox-component--use-cases-map-locator .velox-use-card{
    padding: 22px;
    border-radius: 15px;
  }


  .velox-component--use-cases-map-locator .velox-use-number{
    width: 36px;
    height: 36px;

    margin-bottom: 18px;
  }


  .velox-component--use-cases-map-locator .velox-use-card h3{
    font-size: 18px;
  }


  .velox-component--use-cases-map-locator .velox-use-card p{
    font-size: 14px;
  }


  .velox-component--use-cases-map-locator .velox-use-fit{
    margin-top: 20px;
  }

}

/* Velox Component: Features List - Map Locator */
/* =========================================================
   VELOX PLUGINS — GROUPED FEATURE LIST
   No main background
   No max-width
   Expands automatically to available site width
========================================================= */

.velox-component--features-list-map-locator .velox-feature-groups{
  --vx-orange: #f04405;
  --vx-ink: #101828;
  --vx-text: #475467;
  --vx-border: #e4e7ec;
  --vx-card: #ffffff;

  width: 100%;

  display: grid;
  gap: 18px;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}


.velox-component--features-list-map-locator .velox-feature-groups, .velox-component--features-list-map-locator .velox-feature-groups *{
  box-sizing: border-box;
}


/* =========================================================
   FEATURE GROUP
========================================================= */

.velox-component--features-list-map-locator .velox-feature-group{
  width: 100%;

  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);

  gap: 32px;

  padding: 28px 28px 28px 26px;

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

  background: var(--vx-card);

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


/* =========================================================
   GROUP TITLE
========================================================= */

.velox-component--features-list-map-locator .velox-feature-group-title{
  margin: 0;

  color: var(--vx-ink);

  font-family:
    Manrope,
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;

  letter-spacing: -.03em;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.velox-component--features-list-map-locator .velox-feature-list{
  min-width: 0;

  margin: 0;
  padding: 0;

  list-style: none;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 48px;
  row-gap: 11px;
}


/* =========================================================
   LIST ITEM
========================================================= */

.velox-component--features-list-map-locator .velox-feature-list li{
  position: relative;

  min-width: 0;

  padding-left: 19px;

  color: var(--vx-text);

  font-size: 13px;
  line-height: 1.55;
}


/* orange square bullet */

.velox-component--features-list-map-locator .velox-feature-list li::before{
  content: "";

  position: absolute;

  left: 0;
  top: .62em;

  width: 7px;
  height: 7px;

  border-radius: 1px;

  background: var(--vx-orange);
}


/* emphasized feature name */

.velox-component--features-list-map-locator .velox-feature-list strong{
  color: var(--vx-ink);
  font-weight: 800;
}


/* shortcode */

.velox-component--features-list-map-locator .velox-feature-list code{
  color: var(--vx-ink);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: .9em;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .velox-component--features-list-map-locator .velox-feature-group{
    grid-template-columns: 1fr;

    gap: 18px;

    padding: 26px;
  }


  .velox-component--features-list-map-locator .velox-feature-list{
    column-gap: 32px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .velox-component--features-list-map-locator .velox-feature-groups{
    gap: 14px;
  }


  .velox-component--features-list-map-locator .velox-feature-group{
    padding: 22px;

    border-radius: 15px;
  }


  .velox-component--features-list-map-locator .velox-feature-group-title{
    font-size: 17px;
  }


  .velox-component--features-list-map-locator .velox-feature-list{
    grid-template-columns: 1fr;

    gap: 10px;
  }


  .velox-component--features-list-map-locator .velox-feature-list li{
    font-size: 13px;
  }

}

/* Velox Component: Map Locator Feature 1 */
/* =========================================================
   VELOX MAP LOCATOR
   VISUAL 01 — LOCATION WORKFLOW
   SVG responsive version
   ========================================================= */


/* =========================================================
   OUTER CARD
   ========================================================= */

.velox-component--feature-1 .vx-lw1{
	width: 100%;

	padding: 46px 28px 16px;

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

	background:
		linear-gradient(
			135deg,
			#e5ece4 0%,
			#e2ebe6 48%,
			#e9eadf 100%
		);

	box-sizing: border-box;
}


/* =========================================================
   ART AREA
   ========================================================= */

.velox-component--feature-1 .vx-lw1-art{
	width: 100%;

	box-sizing: border-box;
}


/*
 * This is the important part.
 *
 * SVG automatically preserves its original 664 × 356
 * composition while shrinking to whatever width Avada
 * gives the column.
 */

.velox-component--feature-1 .vx-lw1-svg{
	display: block;

	width: 100%;
	height: auto;

	max-width: 664px;

	margin: 0 auto;

	overflow: visible;
}


/* =========================================================
   SVG TYPOGRAPHY
   ========================================================= */

.velox-component--feature-1 .vx-lw1-svg text{
	font-family:
		Inter,
		Arial,
		sans-serif;
}


.velox-component--feature-1 .vx-lw1-top-title{
	fill: rgba(255,255,255,.68);

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


.velox-component--feature-1 .vx-lw1-sidebar-heading{
	fill: #101828;

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


.velox-component--feature-1 .vx-lw1-add{
	fill: #f04405;

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


.velox-component--feature-1 .vx-lw1-search-text{
	fill: #98a2b3;

	font-size: 7px;
}


.velox-component--feature-1 .vx-lw1-location-name{
	fill: #101828;

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


.velox-component--feature-1 .vx-lw1-address{
	fill: #667085;

	font-size: 7px;
}


.velox-component--feature-1 .vx-lw1-type{
	fill: #98a2b3;

	font-size: 6px;
}


.velox-component--feature-1 .vx-lw1-map-place{
	fill: #667a68;

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


.velox-component--feature-1 .vx-lw1-map-label{
	fill: #657174;

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


.velox-component--feature-1 .vx-lw1-map-type-active{
	fill: #101828;

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


.velox-component--feature-1 .vx-lw1-map-type{
	fill: #667085;

	font-size: 6px;
}


.velox-component--feature-1 .vx-lw1-control{
	fill: #667085;

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


.velox-component--feature-1 .vx-lw1-scale{
	fill: #667085;

	font-size: 6px;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.velox-component--feature-1 .vx-lw1-note{
	margin-top: 14px;

	padding: 0 3px;

	color: #8f9baa;

	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
}


/* =========================================================
   RESPONSIVE OUTER SPACING
   The SVG itself scales automatically.
   ========================================================= */

@media (max-width: 700px) {

	.velox-component--feature-1 .vx-lw1{
		padding:
			28px
			20px
			14px;
	}

}


@media (max-width: 500px) {

	.velox-component--feature-1 .vx-lw1{
		padding:
			18px
			14px
			12px;

		border-radius: 18px;
	}


	.velox-component--feature-1 .vx-lw1-note{
		margin-top: 9px;

		font-size: 9px;
		line-height: 1.45;
	}

}

/* Velox Component: Map Locator Feature 2 */
/* =========================================================
   VELOX MAP LOCATOR
   VISUAL 02 — MAP CONTROL / LOCATOR CONFIGURATION
   SVG responsive version
   ========================================================= */


/* =========================================================
   OUTER CARD
   ========================================================= */

.velox-component--feature-2 .vx-mc2{
	width: 100%;

	padding: 46px 28px 16px;

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

	background:
		linear-gradient(
			135deg,
			#eee9df 0%,
			#ebe7dd 52%,
			#e9e7df 100%
		);

	box-sizing: border-box;
}


/* =========================================================
   SVG AREA
   ========================================================= */

.velox-component--feature-2 .vx-mc2-art{
	width: 100%;
}


.velox-component--feature-2 .vx-mc2-svg{
	display: block;

	width: 100%;
	height: auto;

	max-width: 664px;

	margin: 0 auto;

	overflow: visible;
}


/* =========================================================
   SVG TYPOGRAPHY
   ========================================================= */

.velox-component--feature-2 .vx-mc2-svg text{
	font-family:
		Inter,
		Arial,
		sans-serif;
}


.velox-component--feature-2 .vx-mc2-top-title{
	fill: rgba(255,255,255,.68);

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


.velox-component--feature-2 .vx-mc2-v{
	fill: #ffffff;

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


.velox-component--feature-2 .vx-mc2-heading{
	fill: #101828;

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


.velox-component--feature-2 .vx-mc2-subheading{
	fill: #98a2b3;

	font-size: 8px;
}


.velox-component--feature-2 .vx-mc2-save{
	fill: #ffffff;

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


.velox-component--feature-2 .vx-mc2-tab{
	fill: #667085;

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


.velox-component--feature-2 .vx-mc2-tab-active{
	fill: #f04405;

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


.velox-component--feature-2 .vx-mc2-label{
	fill: #667085;

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


.velox-component--feature-2 .vx-mc2-field-text{
	fill: #475467;

	font-size: 9px;
	font-weight: 500;
}


.velox-component--feature-2 .vx-mc2-chevron{
	fill: #98a2b3;

	font-size: 10px;
}


.velox-component--feature-2 .vx-mc2-toggle-title{
	fill: #344054;

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


.velox-component--feature-2 .vx-mc2-toggle-sub{
	fill: #98a2b3;

	font-size: 7px;
}


.velox-component--feature-2 .vx-mc2-preview-heading{
	fill: #101828;

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


.velox-component--feature-2 .vx-mc2-preview-sub{
	fill: #98a2b3;

	font-size: 7px;
}


.velox-component--feature-2 .vx-mc2-map-label{
	fill: #667a68;

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


.velox-component--feature-2 .vx-mc2-map-control{
	fill: #667085;

	font-size: 11px;
	font-weight: 650;
}


.velox-component--feature-2 .vx-mc2-summary-label{
	fill: #667085;

	font-size: 8px;
}


.velox-component--feature-2 .vx-mc2-summary-value{
	fill: #101828;

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


.velox-component--feature-2 .vx-mc2-summary-value-green{
	fill: #16824b;

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


/* =========================================================
   DISCLAIMER
   ========================================================= */

.velox-component--feature-2 .vx-mc2-note{
	margin-top: 14px;

	padding: 0 3px;

	color: #8f9baa;

	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
}


/* =========================================================
   RESPONSIVE OUTER SPACING

   The SVG itself automatically scales proportionally.
   Nothing inside it stacks or changes position.
   ========================================================= */

@media (max-width: 700px) {

	.velox-component--feature-2 .vx-mc2{
		padding:
			28px
			20px
			14px;
	}

}


@media (max-width: 500px) {

	.velox-component--feature-2 .vx-mc2{
		padding:
			18px
			14px
			12px;

		border-radius: 18px;
	}


	.velox-component--feature-2 .vx-mc2-note{
		margin-top: 9px;

		font-size: 9px;
		line-height: 1.45;
	}

}

/* Velox Component: Map Locator Feature 3 */
/* =========================================================
   VELOX MAP LOCATOR
   VISUAL 03 — MAP PROVIDER
   SVG responsive version
   ========================================================= */


/* =========================================================
   OUTER CARD
   ========================================================= */

.velox-component--map-locator-feature-3 .vx-mp3{
	width: 100%;

	padding: 46px 28px 16px;

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

	background:
		linear-gradient(
			135deg,
			#e5ece4 0%,
			#e5ebe6 50%,
			#ede8dc 100%
		);

	box-sizing: border-box;
}


/* =========================================================
   SVG
   ========================================================= */

.velox-component--map-locator-feature-3 .vx-mp3-art{
	width: 100%;
}


.velox-component--map-locator-feature-3 .vx-mp3-svg{
	display: block;

	width: 100%;
	height: auto;

	max-width: 664px;

	margin: 0 auto;

	overflow: visible;
}


/* =========================================================
   SVG TYPOGRAPHY
   ========================================================= */

.velox-component--map-locator-feature-3 .vx-mp3-svg text{
	font-family:
		Inter,
		Arial,
		sans-serif;
}


/* Top bar */

.velox-component--map-locator-feature-3 .vx-mp3-top-title{
	fill: rgba(255,255,255,.68);

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


/* Header */

.velox-component--map-locator-feature-3 .vx-mp3-v{
	fill: #ffffff;

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


.velox-component--map-locator-feature-3 .vx-mp3-heading{
	fill: #101828;

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


.velox-component--map-locator-feature-3 .vx-mp3-subheading{
	fill: #98a2b3;

	font-size: 8px;
}


/* Locator context */

.velox-component--map-locator-feature-3 .vx-mp3-context-label{
	fill: #98a2b3;

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


.velox-component--map-locator-feature-3 .vx-mp3-context-value{
	fill: #344054;

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


/* Section */

.velox-component--map-locator-feature-3 .vx-mp3-section-title{
	fill: #101828;

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


.velox-component--map-locator-feature-3 .vx-mp3-section-sub{
	fill: #98a2b3;

	font-size: 7px;
}


/* Provider cards */

.velox-component--map-locator-feature-3 .vx-mp3-provider-icon{
	font-size: 16px;
	font-weight: 800;
}


.velox-component--map-locator-feature-3 .vx-mp3-provider-icon--green{
	fill: #16824b;
}


.velox-component--map-locator-feature-3 .vx-mp3-provider-icon--blue{
	fill: #3477d2;
}


.velox-component--map-locator-feature-3 .vx-mp3-provider-icon--brown{
	fill: #8a6f3f;
}


.velox-component--map-locator-feature-3 .vx-mp3-provider-name{
	fill: #101828;

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


.velox-component--map-locator-feature-3 .vx-mp3-provider-desc{
	fill: #667085;

	font-size: 7px;
}


.velox-component--map-locator-feature-3 .vx-mp3-tag{
	fill: #667085;

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


.velox-component--map-locator-feature-3 .vx-mp3-tag-green{
	fill: #16824b;

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


.velox-component--map-locator-feature-3 .vx-mp3-tag-blue{
	fill: #3159a8;

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


.velox-component--map-locator-feature-3 .vx-mp3-selected{
	fill: #16824b;

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


.velox-component--map-locator-feature-3 .vx-mp3-choose{
	fill: #667085;

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


/* Preview */

.velox-component--map-locator-feature-3 .vx-mp3-preview-heading{
	fill: #101828;

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


.velox-component--map-locator-feature-3 .vx-mp3-preview-sub{
	fill: #98a2b3;

	font-size: 7px;
}


.velox-component--map-locator-feature-3 .vx-mp3-map-place{
	fill: #667a68;

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


.velox-component--map-locator-feature-3 .vx-mp3-map-label{
	fill: #657174;

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


.velox-component--map-locator-feature-3 .vx-mp3-control{
	fill: #667085;

	font-size: 11px;
	font-weight: 650;
}


/* Details */

.velox-component--map-locator-feature-3 .vx-mp3-detail-heading{
	fill: #101828;

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


.velox-component--map-locator-feature-3 .vx-mp3-detail-label{
	fill: #667085;

	font-size: 7px;
}


.velox-component--map-locator-feature-3 .vx-mp3-detail-value{
	fill: #101828;

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


.velox-component--map-locator-feature-3 .vx-mp3-detail-good{
	fill: #16824b;

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


/* =========================================================
   DISCLAIMER
   ========================================================= */

.velox-component--map-locator-feature-3 .vx-mp3-note{
	margin-top: 14px;

	padding: 0 3px;

	color: #8f9baa;

	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
}


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

   Only the outer padding changes.
   The SVG preserves the full desktop composition.
   ========================================================= */

@media (max-width: 700px) {

	.velox-component--map-locator-feature-3 .vx-mp3{
		padding:
			28px
			20px
			14px;
	}

}


@media (max-width: 500px) {

	.velox-component--map-locator-feature-3 .vx-mp3{
		padding:
			18px
			14px
			12px;

		border-radius: 18px;
	}


	.velox-component--map-locator-feature-3 .vx-mp3-note{
		margin-top: 9px;

		font-size: 9px;
		line-height: 1.45;
	}

}

/* Velox Component: Map Locator Feature 4 */
/* =========================================================
   VELOX MAP LOCATOR
   VISUAL 04 — SEARCH & FILTER
   SVG responsive version
   ========================================================= */


/* =========================================================
   OUTER CARD
   ========================================================= */

.velox-component--map-locator-feature-4 .vx-sf4{
	width: 100%;

	padding: 46px 28px 16px;

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

	background:
		linear-gradient(
			135deg,
			#eee9df 0%,
			#ebe8df 55%,
			#e9e7e1 100%
		);

	box-sizing: border-box;
}


/* =========================================================
   SVG
   ========================================================= */

.velox-component--map-locator-feature-4 .vx-sf4-art{
	width: 100%;
}


.velox-component--map-locator-feature-4 .vx-sf4-svg{
	display: block;

	width: 100%;
	height: auto;

	max-width: 664px;

	margin: 0 auto;

	overflow: visible;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.velox-component--map-locator-feature-4 .vx-sf4-svg text{
	font-family:
		Inter,
		Arial,
		sans-serif;
}


/* Top */

.velox-component--map-locator-feature-4 .vx-sf4-top-title{
	fill: rgba(255,255,255,.68);

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


/* Search */

.velox-component--map-locator-feature-4 .vx-sf4-search-placeholder{
	fill: #98a2b3;

	font-size: 9px;
}


.velox-component--map-locator-feature-4 .vx-sf4-select-text{
	fill: #475467;

	font-size: 9px;
	font-weight: 500;
}


.velox-component--map-locator-feature-4 .vx-sf4-chevron{
	fill: #98a2b3;

	font-size: 10px;
}


.velox-component--map-locator-feature-4 .vx-sf4-search-button{
	fill: #ffffff;

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


/* Filter chips */

.velox-component--map-locator-feature-4 .vx-sf4-chip{
	fill: #667085;

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


.velox-component--map-locator-feature-4 .vx-sf4-chip-active{
	fill: #ffffff;

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


/* Results */

.velox-component--map-locator-feature-4 .vx-sf4-results-heading{
	fill: #101828;

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


.velox-component--map-locator-feature-4 .vx-sf4-results-count{
	fill: #98a2b3;

	font-size: 7px;
}


.velox-component--map-locator-feature-4 .vx-sf4-result-name{
	fill: #101828;

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


.velox-component--map-locator-feature-4 .vx-sf4-result-meta{
	fill: #667085;

	font-size: 7px;
}


.velox-component--map-locator-feature-4 .vx-sf4-result-address{
	fill: #98a2b3;

	font-size: 6.5px;
}


.velox-component--map-locator-feature-4 .vx-sf4-open-label{
	fill: #f04405;

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


/* Map */

.velox-component--map-locator-feature-4 .vx-sf4-map-place{
	fill: #667a68;

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


.velox-component--map-locator-feature-4 .vx-sf4-map-label{
	fill: #657174;

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


.velox-component--map-locator-feature-4 .vx-sf4-map-type-active{
	fill: #101828;

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


.velox-component--map-locator-feature-4 .vx-sf4-map-type{
	fill: #667085;

	font-size: 6px;
}


.velox-component--map-locator-feature-4 .vx-sf4-control{
	fill: #667085;

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


/* Popup */

.velox-component--map-locator-feature-4 .vx-sf4-popup-name{
	fill: #101828;

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


.velox-component--map-locator-feature-4 .vx-sf4-popup-meta{
	fill: #667085;

	font-size: 6px;
}


.velox-component--map-locator-feature-4 .vx-sf4-popup-address{
	fill: #98a2b3;

	font-size: 6px;
}


.velox-component--map-locator-feature-4 .vx-sf4-popup-open{
	fill: #16824b;

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


.velox-component--map-locator-feature-4 .vx-sf4-scale{
	fill: #667085;

	font-size: 6px;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.velox-component--map-locator-feature-4 .vx-sf4-note{
	margin-top: 14px;

	padding: 0 3px;

	color: #8f9baa;

	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
}


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

   Only the card padding changes.
   The complete SVG composition scales automatically.
   ========================================================= */

@media (max-width: 700px) {

	.velox-component--map-locator-feature-4 .vx-sf4{
		padding:
			28px
			20px
			14px;
	}

}


@media (max-width: 500px) {

	.velox-component--map-locator-feature-4 .vx-sf4{
		padding:
			18px
			14px
			12px;

		border-radius: 18px;
	}


	.velox-component--map-locator-feature-4 .vx-sf4-note{
		margin-top: 9px;

		font-size: 9px;
		line-height: 1.45;
	}

}

/* Velox Component: Velox Home Documentation */
/* =========================================================
   Velox Documentation Visual
   Decorative only — non-functional
   ========================================================= */

.velox-component--velox-home-documentation .vx-docs-visual{
	width: 100%;

	padding: 20px;

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

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

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

	box-sizing: border-box;
}


/* Search field */

.velox-component--velox-home-documentation .vx-docs-visual__search{
	height: 52px;

	display: flex;
	align-items: center;

	gap: 12px;

	padding: 0 16px;

	border: 1px solid #d9dee6;
	border-radius: 10px;

	background: #ffffff;

	color: #98a2b3;

	font-size: 14px;

	box-sizing: border-box;
}


.velox-component--velox-home-documentation .vx-docs-visual__search-icon{
	color: #7d8ca0;

	font-size: 17px;
	line-height: 1;
}


/* Documentation grid */

.velox-component--velox-home-documentation .vx-docs-visual__grid{
	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 10px;

	margin-top: 16px;
}


/* Individual documentation item */

.velox-component--velox-home-documentation .vx-docs-visual__item{
	min-height: 47px;

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

	gap: 14px;

	padding: 11px 14px;

	border-radius: 9px;

	background: #f6f7f8;

	color: #101828;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;

	box-sizing: border-box;
}


.velox-component--velox-home-documentation .vx-docs-visual__item span:last-child{
	color: #344054;

	font-size: 15px;
	font-weight: 500;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 700px) {

	.velox-component--velox-home-documentation .vx-docs-visual{
		padding: 16px;
	}

	.velox-component--velox-home-documentation .vx-docs-visual__search{
		height: 48px;
	}

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 520px) {

	.velox-component--velox-home-documentation .vx-docs-visual{
		padding: 14px;

		border-radius: 18px;
	}

	.velox-component--velox-home-documentation .vx-docs-visual__grid{
		grid-template-columns: 1fr;
	}

	.velox-component--velox-home-documentation .vx-docs-visual__search{
		height: 46px;

		padding: 0 13px;

		font-size: 12px;
	}

	.velox-component--velox-home-documentation .vx-docs-visual__item{
		min-height: 44px;

		padding: 10px 12px;

		font-size: 12px;
	}

}

/* 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;
	}

}