/* =========================================================
   Lumix Free Shipping Progress
   Version 2
   ========================================================= */

.lumix-free-shipping-progress {
	--lumix-fsp-primary: #024765;
	--lumix-fsp-accent: #21bccc;
	--lumix-fsp-success: #15966a;

	box-sizing: border-box;

	width: 100%;

	margin: 0;
	padding: 18px 20px;

	overflow: hidden;

	direction: rtl;
	text-align: right;

	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.98),
		rgba(239, 250, 251, 0.98)
	);

	border: 1px solid rgba(2, 71, 101, 0.12);
	border-radius: 18px;

	box-shadow:
		0 10px 30px rgba(2, 71, 101, 0.08);

	font-family: inherit;
}

.lumix-free-shipping-progress.is-empty {
	display: none !important;
}

.lumix-free-shipping-progress *,
.lumix-free-shipping-progress *::before,
.lumix-free-shipping-progress *::after {
	box-sizing: border-box;
}


/* =========================================================
   Content
   ========================================================= */

.lumix-free-shipping-progress__top {
	display: flex;
	align-items: center;
	gap: 13px;
}

.lumix-free-shipping-progress__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 44px;

	width: 44px;
	height: 44px;

	color: #fff;

	background: linear-gradient(
		135deg,
		var(--lumix-fsp-primary),
		var(--lumix-fsp-accent)
	);

	border-radius: 13px;

	box-shadow:
		0 7px 18px rgba(2, 71, 101, 0.18);
}

.lumix-free-shipping-progress__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.lumix-free-shipping-progress__text {
	flex: 1 1 auto;
	min-width: 0;
}

.lumix-free-shipping-progress__title {
	margin: 0 0 3px;

	color: var(--lumix-fsp-primary);

	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

.lumix-free-shipping-progress__message {
	color: #53656d;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
}

.lumix-free-shipping-progress__message strong {
	color: var(--lumix-fsp-primary);

	font-weight: 700;

	white-space: nowrap;
}


/* =========================================================
   Progress
   ========================================================= */

.lumix-free-shipping-progress__track {
	position: relative;

	width: 100%;
	height: 9px;

	margin-top: 15px;

	overflow: hidden;

	background: rgba(2, 71, 101, 0.10);

	border-radius: 999px;
}

.lumix-free-shipping-progress__fill {
	position: absolute;

	top: 0;
	right: 0;

	height: 100%;

	background: linear-gradient(
		90deg,
		var(--lumix-fsp-accent),
		var(--lumix-fsp-primary)
	);

	border-radius: inherit;

	box-shadow:
		0 0 12px rgba(33, 188, 204, 0.28);

	transition: width 0.42s ease;
}


/* =========================================================
   Complete
   ========================================================= */

.lumix-free-shipping-progress.is-complete
.lumix-free-shipping-progress__title {
	color: var(--lumix-fsp-success);
}

.lumix-free-shipping-progress.is-complete
.lumix-free-shipping-progress__icon,
.lumix-free-shipping-progress.is-complete
.lumix-free-shipping-progress__fill {
	background: linear-gradient(
		135deg,
		#0f7f59,
		#25b77e
	);
}


/* =========================================================
   Elementor side cart
   ========================================================= */

/*
 * The slot is a normal first child of Elementor's products
 * container. It gets a real row/height, so products cannot
 * overlap it.
 *
 * We do NOT alter:
 * .elementor-menu-cart__main
 * .widget_shopping_cart_content
 * subtotal
 * footer buttons
 * Elementor's scrolling logic
 */

.elementor-menu-cart__products
> .lumix-free-shipping-slot {
	position: relative !important;

	display: block !important;

	grid-column: 1 / -1 !important;

	flex: 0 0 100% !important;

	width: 100% !important;
	max-width: 100% !important;

	height: auto !important;
	min-height: 0 !important;

	margin: 0 0 24px !important;
	padding: 0 !important;

	clear: both !important;

	transform: none !important;
	inset: auto !important;

	z-index: auto !important;
}

.elementor-menu-cart__products
> .lumix-free-shipping-slot:empty {
	display: none !important;
}

.elementor-menu-cart__products
> .lumix-free-shipping-slot
> .lumix-free-shipping-progress {
	width: 100% !important;
	margin: 0 !important;
}


/* =========================================================
   Side-cart typography
   ========================================================= */

.elementor-menu-cart__products
.lumix-free-shipping-progress__icon {
	flex-basis: 40px;

	width: 40px;
	height: 40px;

	border-radius: 12px;
}

.elementor-menu-cart__products
.lumix-free-shipping-progress__title {
	font-size: 14px;
}

.elementor-menu-cart__products
.lumix-free-shipping-progress__message {
	font-size: 12.5px;
}


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

@media (max-width: 767px) {

	.lumix-free-shipping-progress {
		padding: 14px;
		border-radius: 14px;
	}

	.lumix-free-shipping-progress__top {
		align-items: flex-start;
		gap: 10px;
	}

	.lumix-free-shipping-progress__icon {
		flex-basis: 39px;

		width: 39px;
		height: 39px;

		border-radius: 11px;
	}

	.lumix-free-shipping-progress__icon svg {
		width: 22px;
		height: 22px;
	}

	.lumix-free-shipping-progress__title {
		font-size: 14px;
		line-height: 1.4;
	}

	.lumix-free-shipping-progress__message {
		font-size: 12.5px;
		line-height: 1.5;
	}

	.lumix-free-shipping-progress__track {
		height: 8px;
		margin-top: 12px;
	}

	.elementor-menu-cart__products
	> .lumix-free-shipping-slot {
		margin-bottom: 20px !important;
	}
}


/* =========================================================
   Accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.lumix-free-shipping-progress__fill {
		transition: none;
	}
}