.arc-crs {
	--arc-crs-clr:var(--uicolor);
	position:relative;
	min-width:0;
}

.arc-crs-in {
	position:relative;
	min-width:0;
	min-height:132px;
	display:flex;
	align-items:center;
	gap:16px;
	padding:16px 17px;
	overflow:hidden;
	border:1px solid color-mix(in srgb,var(--arc-crs-clr) 15%,var(--surface-color));
	border-radius:15px;
	background:var(--surface-color);
	color:var(--primary-text);
	text-decoration:none;
	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition),
		background var(--transition);
}

.arc-crs-in::before {
	content:"";
	position:absolute;
	inset-block:0;
	inset-inline-start:0;
	width:3px;
	background:var(--arc-crs-clr);
}

.arc-crs-top {
	position:relative;
	z-index:2;
	min-width:0;
	display:flex;
	align-items:flex-start;
	flex:0 0 auto;
	flex-direction:column;
	gap:6px;
}

.arc-crs-tag,
.arc-crs-dur {
	max-width:100%;
	min-height:26px;
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:0 9px;
	border-radius:50px;
	background:color-mix(in srgb,var(--arc-crs-clr) 5%,var(--surface-color));
	font-size:10px;
	font-weight:750;
	line-height:1.35;
	white-space:nowrap;
}

.arc-crs-tag i,
.arc-crs-dur i {
	flex:0 0 auto;
}

.arc-crs.is-online .arc-crs-tag {
	--arc-crs-clr:#8358e8;
}

.arc-crs-copy {
	position:relative;
	z-index:2;
	min-width:0;
	flex:1;
}

.arc-crs-copy h3 {
	min-width:0;
	margin:0;
	color:var(--section-title);
	font-size:16px;
	font-weight:600;
	line-height:1.55;
	overflow-wrap:anywhere;
}

.arc-crs-txt {
	min-width:0;
	margin-top:5px;
	color:var(--secondarytext);
	font-size:14px;
	line-height:1.6;
	overflow-wrap:anywhere;
}

.arc-crs-met {
	position:relative;
	z-index:2;
	min-width:210px;
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	justify-content:center;
	gap:7px;
}

.arc-crs-met span {
	max-width:100%;
	min-width:0;
	display:flex;
	align-items:center;
	gap:6px;
	color:var(--secondarytext);
	font-size:13px;
	white-space:nowrap;
}

.arc-crs-met i {
	flex:0 0 auto;
	color:var(--uicolor2);
	font-size:13px;
}

.arc-crs-met b {
	min-width:0;
	font-weight:400;
	overflow-wrap:anywhere;
}

.arc-crs-foot {
	position:relative;
	z-index:2;
	display:flex;
	align-self:stretch;
	flex:0 0 auto;
	flex-direction:column;
	align-items:flex-end;
	justify-content:center;
	gap:12px;
}

.arc-crs-fee {
	color:var(--uicolor2);
	font-family:var(--f-number);
	font-size: 25px;
	font-weight:800;
	line-height:1.2;
	direction:ltr;
	unicode-bidi:isolate;
	white-space:nowrap;
}

.arc-crs-go {
	display:flex;
	align-items:center;
	gap:7px;
	color:var(--uicolor);
	font-size:13px;
	font-weight:400;
	white-space:nowrap;
}

.arc-crs-go b {
	font-weight:400;
}

.arc-crs-go i {
	flex:0 0 auto;
	font-size:10px;
	transition:transform var(--transition);
}

[dir="ltr"] .arc-crs-go i {
	transform:rotate(180deg);
}

.arc-crs-in:focus-visible {
	outline:3px solid color-mix(in srgb,var(--arc-crs-clr) 24%,transparent);
	outline-offset:3px;
}

@media (hover:hover) and (pointer:fine) {
	.arc-crs-in:hover {
		transform:translateY(-4px);
		border-color:color-mix(in srgb,var(--arc-crs-clr) 28%,var(--surface-color));
		background:color-mix(in srgb,var(--arc-crs-clr) 1.8%,var(--surface-color));
		box-shadow:0 18px 38px color-mix(in srgb,var(--arc-crs-clr) 9%,transparent);
	}

	.arc-crs-in:hover .arc-crs-go i {
		transform:translateX(-3px);
	}

	[dir="ltr"] .arc-crs-in:hover .arc-crs-go i {
		transform:rotate(180deg) translateX(-3px);
	}
}

/* =========================
   Grid View
========================= */

.arc-res.is-grid .arc-crs-in {
	min-height:260px;
	align-items:stretch;
	flex-direction:column;
	gap:14px;
	padding:18px;
}

.arc-res.is-grid .arc-crs-top {
	width:100%;
	align-items:center;
	flex-direction:row;
	justify-content:space-between;
}

.arc-res.is-grid .arc-crs-copy {
	flex:0 0 auto;
}

.arc-res.is-grid .arc-crs-copy h3 {
	font-size:16px;
}

.arc-res.is-grid .arc-crs-met {
	min-width:0;
	width:100%;
	align-items:flex-start;
	flex-direction:column;
	gap:8px;
}

.arc-res.is-grid .arc-crs-foot {
	width:100%;
	align-items:center;
	flex-direction:row;
	justify-content:space-between;
	margin-top:auto;
	padding-top:13px;
	border-top:1px solid color-mix(in srgb,var(--primary-text) 7%,var(--surface-color));
}

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

@media only screen and (max-width:1024px) {
	.arc-crs-met {
		min-width:185px;
		gap:10px;
	}
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
	.arc-crs-in,
	.arc-res.is-grid .arc-crs-in {
		min-height:0;
		align-items:stretch;
		flex-direction:column;
		gap:13px;
		padding:16px;
		border-radius:16px;
		background:
			linear-gradient(
				145deg,
				var(--surface-color),
				color-mix(in srgb,var(--arc-crs-clr) 2.2%,var(--surface-color))
			);
		box-shadow:0 10px 26px color-mix(in srgb,var(--primary-text) 6%,transparent);
	}

	.arc-crs-in::before {
		width:4px;
	}

	.arc-crs-top,
	.arc-res.is-grid .arc-crs-top {
		width:100%;
		align-items:center;
		flex-direction:row;
		justify-content:flex-start;
		gap:8px;
		flex-wrap:wrap;
	}

	.arc-crs-tag,
	.arc-crs-dur {
		min-height:30px;
		padding-inline:10px;
		font-size:10.5px;
		line-height:1.35;
		white-space:normal;
	}

	.arc-crs-copy,
	.arc-res.is-grid .arc-crs-copy {
		width:100%;
		flex:0 0 auto;
	}

	.arc-crs-copy h3,
	.arc-res.is-grid .arc-crs-copy h3 {
		font-size:16px;
		line-height:1.55;
	}

	.arc-crs-txt {
		margin-top:6px;
		font-size:13px;
		line-height:1.7;
	}

	.arc-crs-met,
	.arc-res.is-grid .arc-crs-met {
		min-width:0;
		width:100%;
		align-items:stretch;
		flex-direction:column;
		gap:8px;
		padding:11px 12px;
		border-radius:11px;
		background:color-mix(in srgb,var(--arc-crs-clr) 4%,var(--surface-color));
	}

	.arc-crs-met span {
		width:100%;
		align-items:flex-start;
		font-size:12.5px;
		line-height:1.55;
		white-space:normal;
	}

	.arc-crs-met i {
		margin-top:.18em;
		font-size:12px;
	}

	.arc-crs-foot,
	.arc-res.is-grid .arc-crs-foot {
		width:100%;
		min-width:0;
		align-items:center;
		flex-direction:row;
		justify-content:space-between;
		gap:12px;
		margin-top:0;
		padding-top:12px;
		border-top:1px solid color-mix(in srgb,var(--primary-text) 7%,var(--surface-color));
	}

	.arc-crs-fee {
		min-width:0;
		font-size:17px;
	}

	.arc-crs-go {
		min-height:36px;
		justify-content:flex-end;
		gap:6px;
		font-size:12.5px;
	}

	.arc-crs-in:active {
		border-color:color-mix(in srgb,var(--arc-crs-clr) 35%,var(--surface-color));
		background:color-mix(in srgb,var(--arc-crs-clr) 5%,var(--surface-color));
	}
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:420px) {
	.arc-crs-in,
	.arc-res.is-grid .arc-crs-in {
		gap:12px;
		padding:14px;
		border-radius:14px;
	}

	.arc-crs-tag,
	.arc-crs-dur {
		min-height:29px;
		font-size:10px;
	}

	.arc-crs-copy h3,
	.arc-res.is-grid .arc-crs-copy h3 {
		font-size:15px;
	}

	.arc-crs-txt {
		font-size:12.5px;
	}

	.arc-crs-met,
	.arc-res.is-grid .arc-crs-met {
		padding:10px 11px;
	}

	.arc-crs-met span {
		font-size:12px;
	}

	.arc-crs-foot,
	.arc-res.is-grid .arc-crs-foot {
		align-items:flex-start;
		flex-direction:column;
		gap:8px;
	}

	.arc-crs-go {
		width:100%;
		min-height:42px;
		justify-content:space-between;
		padding-inline:1px;
	}
}

@media (prefers-reduced-motion:reduce) {
	.arc-crs-in,
	.arc-crs-go i {
		transition:none;
	}
}