/* 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: 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: Velox Component Manager Listing */
.velox-component--velox-component-manager-listing .velox-plugin-card__visual{
    position: relative;
    padding: 29px;
    min-height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px 22px 0 0;
    overflow: hidden;

    background: linear-gradient(
        120deg,
        #eef4f3 0%,
        #e9eeee 58%,
        #f3eee7 100%
    );
}

/* =========================================================
   COMPONENT MANAGER UI VISUAL
   ========================================================= */

.velox-component--velox-component-manager-listing .velox-cm-ui{
    width: 100%;
    max-width: 607px;
    border-radius: 13px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(17, 30, 43, 0.08);
}

/* Top bar */

.velox-component--velox-component-manager-listing .velox-cm-ui__topbar{
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    background: #071a2b;
    color: #cbd5de;
    font-size: 7px;
    line-height: 1;
}

.velox-component--velox-component-manager-listing .velox-cm-ui__dots{
    display: flex;
    gap: 7px;
    margin-right: 14px;
}

.velox-component--velox-component-manager-listing .velox-cm-ui__dots span{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ba8b4;
}

.velox-component--velox-component-manager-listing .velox-cm-ui__title{
    font-weight: 500;
}

/* Main app body */

.velox-component--velox-component-manager-listing .velox-cm-ui__body{
    display: grid;
    grid-template-columns: 194px minmax(0, 1fr);
    min-height: 220px;
}

/* Sidebar */

.velox-component--velox-component-manager-listing .velox-cm-ui__sidebar{
    padding: 16px 13px;
    border-right: 1px solid #dfe5e9;
    background: #ffffff;
}

.velox-component--velox-component-manager-listing .velox-cm-ui__sidebar-title{
    margin-bottom: 12px;
    color: #102033;
    font-size: 9px;
    font-weight: 700;
}

.velox-component--velox-component-manager-listing .velox-cm-component{
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    margin-bottom: 7px;
    border: 1px solid #dce3e8;
    border-radius: 7px;
    background: #ffffff;
}

.velox-component--velox-component-manager-listing .velox-cm-component.is-active{
    border-color: #a9c8d9;
    background: #f5fafc;
}

.velox-component--velox-component-manager-listing .velox-cm-component__icon{
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 5px;
    background: #edf4f7;
    color: #29465c;
    font-family: Consolas, Monaco, monospace;
    font-size: 7px;
    font-weight: 700;
}

.velox-component--velox-component-manager-listing .velox-cm-component strong{
    display: block;
    margin-bottom: 3px;
    color: #142437;
    font-size: 7px;
    line-height: 1.2;
    font-weight: 600;
}

.velox-component--velox-component-manager-listing .velox-cm-component small{
    display: block;
    color: #8a96a2;
    font-size: 6px;
    line-height: 1.2;
}

/* Editor */

.velox-component--velox-component-manager-listing .velox-cm-ui__editor{
    min-width: 0;
    padding: 15px;
    background: #f7f9fa;
}

.velox-component--velox-component-manager-listing .velox-cm-ui__editor-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #18283a;
    font-size: 8px;
    font-weight: 600;
}

/* Tabs */

.velox-component--velox-component-manager-listing .velox-cm-ui__tabs{
    display: flex;
    gap: 3px;
}

.velox-component--velox-component-manager-listing .velox-cm-ui__tabs span{
    padding: 4px 7px;
    border-radius: 4px;
    color: #7a8792;
    font-size: 6px;
    font-weight: 600;
}

.velox-component--velox-component-manager-listing .velox-cm-ui__tabs span.is-active{
    background: #0f263a;
    color: #ffffff;
}

/* Code editor */

.velox-component--velox-component-manager-listing .velox-cm-code{
    height: 129px;
    overflow: hidden;
    padding: 13px 11px;
    border: 1px solid #dfe5e9;
    border-radius: 7px;
    background: #ffffff;
    color: #435262;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 6.8px;
    line-height: 2;
    white-space: nowrap;
}

.velox-component--velox-component-manager-listing .velox-cm-code__num{
    display: inline-block;
    width: 17px;
    color: #b1bac2;
}

.velox-component--velox-component-manager-listing .velox-cm-code__tag{
    color: #193c55;
    font-weight: 600;
}

.velox-component--velox-component-manager-listing .velox-cm-code__attr{
    color: #657887;
}

.velox-component--velox-component-manager-listing .velox-cm-code__value{
    color: #d94b20;
}

/* Editor footer */

.velox-component--velox-component-manager-listing .velox-cm-ui__footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    font-size: 6px;
}

.velox-component--velox-component-manager-listing .velox-cm-status{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #3a7553;
    font-weight: 600;
}

.velox-component--velox-component-manager-listing .velox-cm-status i{
    width: 5px;
    height: 5px;
    display: block;
    border-radius: 50%;
    background: #35a568;
}

.velox-component--velox-component-manager-listing .velox-cm-shortcode{
    padding: 4px 6px;
    border-radius: 4px;
    background: #edf1f3;
    color: #556472;
    font-family: Consolas, Monaco, monospace;
}

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

@media (max-width: 767px) {
    .velox-component--velox-component-manager-listing .velox-plugin-card__visual{
        min-height: auto;
        padding: 22px 18px;
        border-radius: 18px 18px 0 0;
    }

    .velox-component--velox-component-manager-listing .velox-cm-ui__body{
        grid-template-columns: 32% 68%;
        min-height: 190px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-ui__sidebar{
        padding: 11px 8px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-ui__editor{
        padding: 11px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-component{
        gap: 5px;
        min-height: 39px;
        padding: 5px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-component__icon{
        width: 21px;
        height: 21px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-code{
        height: 110px;
        padding: 9px 7px;
        font-size: 5.7px;
    }
}

@media (max-width: 480px) {
    .velox-component--velox-component-manager-listing .velox-plugin-card__visual{
        padding: 16px 13px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-ui__body{
        min-height: 165px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-ui__sidebar-title{
        font-size: 7px;
        margin-bottom: 7px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-component{
        min-height: 32px;
        margin-bottom: 4px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-component strong{
        font-size: 5.5px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-component small{
        font-size: 4.8px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-component__icon{
        width: 17px;
        height: 17px;
        font-size: 5px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-ui__editor-head{
        font-size: 6px;
        margin-bottom: 6px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-ui__tabs span{
        padding: 3px 4px;
        font-size: 4.5px;
    }

    .velox-component--velox-component-manager-listing .velox-cm-code{
        height: 93px;
        font-size: 4.7px;
        line-height: 1.9;
    }

    .velox-component--velox-component-manager-listing .velox-cm-shortcode{
        display: none;
    }
}

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

}