/**
 * RTL Logistics Stats for Elementor.
 * Mobile-first: the base layout mirrors the supplied Android reference.
 */

.rls-component,
.rls-component * {
	box-sizing: border-box;
}

/* Logistics process / rail widget. */
.elementor-widget-rls-logistics-process {
	container-name: rlp-process;
	container-type: inline-size;
	min-width: 0;
}

.rlp-process,
.rlp-process * {
	box-sizing: border-box;
}

.rlp-process {
	--rlp-bg: #fff;
	--rlp-title: #111;
	--rlp-accent: #b83b0b;
	--rlp-card-bg: #f2f2f2;
	--rlp-card-text: #111;
	--rlp-rail: #111;
	--rlp-node-bg: #d8d8d8;
	--rlp-node-text: #111;
	--rlp-node-dot: #050505;
	position: relative;
	display: flow-root;
	width: 100%;
	min-width: 0;
	min-height: 440px;
	overflow: hidden;
	padding: 20px 12px 24px;
	border: 0;
	border-radius: var(--rlp-section-radius-custom, 0);
	background: var(--rlp-bg);
	color: var(--rlp-card-text);
	font-family: inherit;
	font-style: normal;
	direction: ltr;
}

.rlp-process :where(figure, h2, h3, p) {
	margin: 0;
	padding: 0;
}

.rlp-process__title {
	position: relative;
	z-index: 7;
	width: var(--rlp-title-width-custom, 72%);
	margin-right: auto !important;
	color: var(--rlp-title);
	font: inherit;
	font-size: clamp(20px, 7.2cqw, 32px);
	font-weight: 850;
	line-height: 0.98;
	letter-spacing: -0.04em;
	text-align: right;
	direction: rtl;
	overflow-wrap: anywhere;
}

.rlp-process__title-main,
.rlp-process__title-accent {
	display: inline;
}

.rlp-process__title-accent {
	color: var(--rlp-accent);
}

.rlp-process__media {
	position: absolute;
	z-index: 6;
	top: var(--rlp-image-top-custom, -6px);
	right: var(--rlp-image-right-custom, -15px);
	width: var(--rlp-image-width-custom, 68%);
	min-width: 0;
	pointer-events: none;
}

.rlp-process__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	object-fit: contain;
}

.rlp-process__flow {
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, auto));
	width: var(--rlp-flow-width-custom, 100%);
	min-width: 0;
	margin-top: clamp(50px, 23cqw, 85px);
	margin-right: auto;
	gap: var(--rlp-card-gap-custom, 8px);
	direction: ltr;
}

.rlp-process__step {
	position: relative;
	z-index: 4;
	min-width: 0;
	min-height: 120px;
	padding: 12px 10px;
	border-radius: var(--rlp-card-radius-custom, 12px);
	background: var(--rlp-card-bg);
	color: var(--rlp-card-text);
	text-align: right;
	direction: rtl;
	overflow-wrap: anywhere;
}

.rlp-process__step--1 {
	grid-column: 1;
	grid-row: 1;
}

.rlp-process__step--2 {
	grid-column: 2;
	grid-row: 1;
}

.rlp-process__step--3 {
	grid-column: 1;
	grid-row: 2;
}

.rlp-process__step--4 {
	grid-column: 2;
	grid-row: 2;
}

.rlp-process__step-title {
	color: var(--rlp-accent);
	font: inherit;
	font-size: clamp(13px, 4.8cqw, 18px);
	font-weight: 800;
	line-height: 1.05;
}

.rlp-process__step-text {
	margin-top: clamp(7px, 2.5cqw, 12px) !important;
	color: var(--rlp-card-text);
	font: inherit;
	font-size: clamp(8px, 3.05cqw, 12px);
	font-weight: 500;
	line-height: 1.42;
}

.rlp-process__rail {
	display: none;
}

.rlp-process--mobile-rail .rlp-process__flow {
	grid-template-rows: minmax(0, auto) 44px minmax(0, auto);
}

.rlp-process--mobile-rail .rlp-process__step--3,
.rlp-process--mobile-rail .rlp-process__step--4 {
	grid-row: 3;
}

.rlp-process--mobile-rail .rlp-process__rail {
	display: block;
	grid-column: 1 / -1;
	grid-row: 2;
}

.rlp-process__rail {
	position: relative;
	z-index: 5;
	min-width: 0;
	height: 44px;
}

.rlp-process__track {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 16px;
	transform: translateY(-50%);
	background: repeating-linear-gradient(90deg, var(--rlp-rail) 0 5px, transparent 5px 8px);
}

.rlp-process__nodes {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;
}

.rlp-process__node {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	justify-self: center;
	width: clamp(42px, 18cqw, 58px);
	height: clamp(25px, 10cqw, 32px);
	padding: 3px 5px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	background: linear-gradient(180deg, #f7f7f7 0%, var(--rlp-node-bg) 48%, #aaa 100%);
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
	color: var(--rlp-node-text);
	direction: ltr;
}

.rlp-process__node-number {
	font: inherit;
	font-size: clamp(9px, 3.6cqw, 13px);
	font-weight: 600;
	line-height: 1;
}

.rlp-process__node-dot {
	display: block;
	width: clamp(15px, 6cqw, 21px);
	aspect-ratio: 1;
	border-radius: 5px;
	background: var(--rlp-node-dot);
}

@container rlp-process (min-width: 768px) {
	.rlp-process {
		min-height: clamp(540px, 61.8cqw, 860px);
		padding: clamp(42px, 5.2cqw, 68px) clamp(20px, 2.7cqw, 36px) clamp(48px, 5.7cqw, 76px);
		border-radius: var(--rlp-section-radius-custom, 0);
	}

	.rlp-process__title {
		width: var(--rlp-title-width-custom, 55%);
		font-size: clamp(32px, 3.8cqw, 52px);
		line-height: 0.98;
	}

	.rlp-process__media {
		top: var(--rlp-image-top-custom, -55px);
		right: var(--rlp-image-right-custom, -30px);
		width: var(--rlp-image-width-custom, 44%);
	}

	.rlp-process__flow,
	.rlp-process--mobile-rail .rlp-process__flow {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		grid-template-rows: minmax(105px, auto) clamp(58px, 8cqw, 112px) minmax(105px, auto);
		width: var(--rlp-flow-width-custom, 69%);
		margin-top: clamp(38px, 5.2cqw, 72px);
		row-gap: 0;
		column-gap: calc(var(--rlp-card-gap-custom, 18px) / 2);
	}

	.rlp-process__step {
		min-height: clamp(105px, 11.2cqw, 150px);
		padding: clamp(12px, 1.5cqw, 20px);
		border-radius: var(--rlp-card-radius-custom, 16px);
	}

	.rlp-process__step--1 {
		--rlp-stem-x: 33%;
		grid-column: 1 / 4;
		grid-row: 1;
	}

	.rlp-process__step--2 {
		--rlp-stem-x: 70%;
		grid-column: 4 / 7;
		grid-row: 1;
	}

	.rlp-process__step--3,
	.rlp-process--mobile-rail .rlp-process__step--3 {
		--rlp-stem-x: 78%;
		grid-column: 2 / 5;
		grid-row: 3;
	}

	.rlp-process__step--4,
	.rlp-process--mobile-rail .rlp-process__step--4 {
		--rlp-stem-x: 67%;
		grid-column: 6 / 9;
		grid-row: 3;
	}

	.rlp-process__step--1::after,
	.rlp-process__step--2::after,
	.rlp-process__step--3::before,
	.rlp-process__step--4::before {
		position: absolute;
		left: var(--rlp-stem-x);
		width: 1px;
		height: calc(clamp(58px, 8cqw, 112px) / 2);
		background: var(--rlp-rail);
		content: "";
	}

	.rlp-process__step--1::after,
	.rlp-process__step--2::after {
		top: 100%;
	}

	.rlp-process__step--3::before,
	.rlp-process__step--4::before {
		bottom: 100%;
	}

	.rlp-process__step-title {
		font-size: clamp(15px, 1.45cqw, 20px);
	}

	.rlp-process__step-text {
		margin-top: clamp(7px, 0.9cqw, 12px) !important;
		font-size: clamp(11px, 1.05cqw, 14px);
	}

	.rlp-process__rail,
	.rlp-process--mobile-rail .rlp-process__rail {
		display: block;
		grid-column: 1 / -1;
		grid-row: 2;
		height: auto;
	}

	.rlp-process__track {
		height: clamp(18px, 2.15cqw, 28px);
		background: repeating-linear-gradient(90deg, var(--rlp-rail) 0 6px, transparent 6px 10px);
	}

	.rlp-process__node {
		width: clamp(54px, 6.2cqw, 78px);
		height: clamp(31px, 3.8cqw, 46px);
		padding: 4px 7px;
	}

	.rlp-process__node-number {
		font-size: clamp(12px, 1.25cqw, 16px);
	}

	.rlp-process__node-dot {
		width: clamp(19px, 2.1cqw, 27px);
	}
}

.elementor-widget-rls-logistics-stats {
	container-name: rls-stats;
	container-type: inline-size;
	min-width: 0;
}

.rls-component {
	--rls-dark-bg: #2e4554;
	--rls-dark-text: #fff;
	--rls-light-bg: #f3f3f2;
	--rls-light-text: #101112;
	--rls-accent-bg: #b83b0b;
	--rls-accent-text: #fff;
	--rls-line: #b8bdbc;
	--rls-section-bg: #fff;
	--rls-image-x: 50%;
	--rls-image-y: 50%;

	width: 100%;
	max-width: none;
	margin-inline: auto;
	background: var(--rls-section-bg);
	color: var(--rls-light-text);
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1.35;
	text-align: right;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.rls-component :where(figure, article, h3, p) {
	margin: 0;
	padding: 0;
}

.rls-layout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"one one"
		"two two"
		"three four"
		"copy copy"
		"media media";
	row-gap: var(--rls-row-gap-custom, 8px);
	column-gap: var(--rls-column-gap-custom, 4px);
	width: 100%;
	min-width: 0;
	direction: ltr;
}

.rls-card {
	direction: rtl;
	display: flex;
	min-width: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--rls-radius-custom, 11px);
	box-shadow: none;
	text-align: right;
	overflow-wrap: anywhere;
}

.rls-card--dark {
	background: var(--rls-dark-bg);
	color: var(--rls-dark-text);
}

.rls-card--light {
	background: var(--rls-light-bg);
	color: var(--rls-light-text);
}

.rls-card--accent {
	background: var(--rls-accent-bg);
	color: var(--rls-accent-text);
}

.rls-stat--1 {
	grid-area: one;
}

.rls-stat--2 {
	grid-area: two;
}

.rls-stat--3 {
	grid-area: three;
}

.rls-stat--4 {
	grid-area: four;
}

.rls-stat {
	flex-direction: column;
	padding: clamp(15px, 7cqw, 24px) clamp(14px, 7cqw, 24px) clamp(10px, 5cqw, 18px);
}

.rls-stat--1,
.rls-stat--2 {
	min-height: clamp(80px, 36.4cqw, 124px);
}

.rls-stat--3,
.rls-stat--4 {
	min-height: clamp(78px, 35.5cqw, 120px);
}

.rls-stat__value {
	display: block;
	flex: 0 0 auto;
	max-width: 100%;
	margin: 0;
	color: inherit;
	font: inherit;
	font-size: clamp(22px, 10.4cqw, 34px);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.025em;
	white-space: nowrap;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: inherit;
}

.rls-stat--3 .rls-stat__value,
.rls-stat--4 .rls-stat__value {
	font-size: clamp(20px, 9.4cqw, 31px);
}

.rls-card__label {
	position: relative;
	display: block;
	width: 100%;
	margin-top: auto !important;
	padding-top: clamp(7px, 3.4cqw, 11px) !important;
	color: inherit;
	font: inherit;
	font-size: clamp(7px, 3.2cqw, 11px);
	font-weight: 500;
	line-height: 1.2;
}

.rls-card__label::before {
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: var(--rls-line);
	content: "";
}

.rls-card--dark .rls-card__label::before,
.rls-card--accent .rls-card__label::before {
	background: currentColor;
	opacity: 0.42;
}

.rls-copy {
	grid-area: copy;
	flex-direction: column;
	min-height: clamp(116px, 52.7cqw, 180px);
	padding: clamp(14px, 7cqw, 24px) clamp(14px, 7cqw, 24px) clamp(10px, 5cqw, 18px);
}

.rls-copy__title {
	color: inherit;
	font: inherit;
	font-size: clamp(14px, 6.4cqw, 20px);
	font-weight: 650;
	line-height: 1.25;
}

.rls-copy__text {
	margin-top: clamp(5px, 2.7cqw, 9px) !important;
	color: inherit;
	font: inherit;
	font-size: clamp(7.5px, 3.4cqw, 11px);
	font-weight: 400;
	line-height: 1.38;
	opacity: 0.82;
}

.rls-copy__signature {
	font-size: clamp(7px, 3.2cqw, 11px);
}

.rls-media {
	grid-area: media;
	position: relative;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--rls-radius-custom, 11px);
	background: var(--rls-dark-bg);
}

.rls-media::before {
	display: block;
	padding-top: var(--rls-image-height-custom, 86%);
	content: "";
}

.rls-media__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: var(--rls-image-x) var(--rls-image-y);
}

/* Desktop arrangement from the original reference, based on the widget width. */
@container rls-stats (min-width: 768px) {
	.rls-layout {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(min-content, 1fr));
		grid-template-areas:
			"one one two two media media"
			"three copy copy four media media";
		row-gap: var(--rls-row-gap-custom, 12px);
		column-gap: var(--rls-column-gap-custom, 12px);
	}

	.rls-image-left .rls-layout {
		grid-template-areas:
			"media media one one two two"
			"media media three copy copy four";
	}

	.rls-stat--1,
	.rls-stat--2,
	.rls-stat--3,
	.rls-stat--4 {
		min-height: 0;
	}

	.rls-stat {
		padding: clamp(17px, 2.1cqw, 28px) clamp(18px, 2.2cqw, 30px) clamp(14px, 1.7cqw, 22px);
	}

	.rls-stat__value,
	.rls-stat--3 .rls-stat__value,
	.rls-stat--4 .rls-stat__value {
		font-size: clamp(34px, 4.05cqw, 54px);
	}

	.rls-card__label {
		padding-top: clamp(9px, 1.05cqw, 14px) !important;
		font-size: clamp(11px, 1.05cqw, 14px);
	}

	.rls-copy {
		min-height: 0;
		padding: clamp(17px, 2.05cqw, 27px) clamp(18px, 2.2cqw, 30px) clamp(14px, 1.7cqw, 22px);
	}

	.rls-copy__title {
		font-size: clamp(14px, 1.42cqw, 18px);
	}

	.rls-copy__text {
		margin-top: clamp(9px, 1.15cqw, 15px) !important;
		font-size: clamp(11px, 1.1cqw, 14px);
	}

	.rls-copy__signature {
		font-size: clamp(10px, 1cqw, 13px);
	}

	.rls-card,
	.rls-media {
		border-radius: var(--rls-radius-custom, 18px);
	}

	.rls-media::before {
		padding-top: var(--rls-image-height-custom, 120%);
	}
}
