/* =========================================================
   Battery Process Flow — Elementor widget styles
   ========================================================= */

.bpf-wrap {
	/* Defaults (all overridable from Elementor controls). */
	--bpf-cols: 5;
	--bpf-col-gap: 56px;
	--bpf-row-gap: 70px;

	--bpf-num-color: #C8102E;
	--bpf-title-color: #1B2A4A;

	--bpf-box-bg: #FFFFFF;
	--bpf-box-size: 92px;
	--bpf-box-radius: 16px;

	--bpf-arrow-color: #E7B10A;
	--bpf-arrow-w: 42px;
	--bpf-arrow-h: 22px;

	/* Solid right-pointing arrow, drawn via CSS mask so it takes any color. */
	--bpf-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cpath fill='%23000' d='M2 9h28V2l16 10-16 10v-7H2z'/%3E%3C/svg%3E");

	width: 100%;
	box-sizing: border-box;
}

.bpf-wrap *,
.bpf-wrap *::before,
.bpf-wrap *::after {
	box-sizing: border-box;
}

/* ----------------------------------------------- Track / grid */
.bpf-track {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--bpf-col-gap);
	row-gap: var(--bpf-row-gap);
	align-items: stretch;
}

/* ----------------------------------------------- Step card */
.bpf-step {
	flex: 0 0 calc((100% - (var(--bpf-cols) - 1) * var(--bpf-col-gap)) / var(--bpf-cols));
	max-width: calc((100% - (var(--bpf-cols) - 1) * var(--bpf-col-gap)) / var(--bpf-cols));
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.bpf-num {
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	color: var(--bpf-num-color);
	margin-bottom: 6px;
}

.bpf-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bpf-title-color);
	margin-bottom: 14px;
	overflow-wrap: anywhere;
}

/* margin-top:auto keeps every icon box aligned to the bottom of the row,
   so cards with 1- vs 2-line titles still line up horizontally. */
.bpf-iconbox {
	margin-top: auto;
	width: var(--bpf-box-size);
	height: var(--bpf-box-size);
	background: var(--bpf-box-bg);
	border-radius: var(--bpf-box-radius);
	padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.bpf-iconbox img {
	width: 62%;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

.bpf-iconbox svg {
	width: 60%;
	height: auto;
	fill: var(--bpf-title-color);
}

.bpf-iconbox i {
	font-size: 40px;
	line-height: 1;
	color: var(--bpf-title-color);
}

/* ----------------------------------------------- Connector arrows */
.bpf-step.bpf-dir-right::after,
.bpf-step.bpf-dir-left::after,
.bpf-step.bpf-dir-down::after {
	content: "";
	position: absolute;
	width: var(--bpf-arrow-w);
	height: var(--bpf-arrow-h);
	background-color: var(--bpf-arrow-color);
	-webkit-mask: var(--bpf-arrow-svg) center / contain no-repeat;
	        mask: var(--bpf-arrow-svg) center / contain no-repeat;
	pointer-events: none;
	z-index: 1;
}

.bpf-step.bpf-dir-right::after {
	left: 100%;
	top: var(--bpf-anchor, 50%);
	transform: translate(calc((var(--bpf-col-gap) - var(--bpf-arrow-w)) / 2), -50%);
}

.bpf-step.bpf-dir-left::after {
	left: 0;
	top: var(--bpf-anchor, 50%);
	transform: translate(calc((var(--bpf-col-gap) + var(--bpf-arrow-w)) / -2), -50%) rotate(180deg);
}

.bpf-step.bpf-dir-down::after {
	left: 50%;
	top: 100%;
	transform: translate(-50%, calc((var(--bpf-row-gap) - var(--bpf-arrow-h)) / 2)) rotate(90deg);
}

/* Optional: hide all arrows on mobile via the widget switcher. */
@media (max-width: 767px) {
	.bpf-hide-arrows-mobile-yes .bpf-step::after {
		display: none !important;
	}
}