.wrm-portal {
	display: grid;
	gap: 18px;
}

.wrm-portal-hero,
.wrm-portal-card,
.wrm-claim-card,
.wrm-next-step {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 18px;
}

.wrm-portal-hero {
	align-items: center;
	background: #1d2327;
	color: #fff;
	display: flex;
	gap: 14px;
	justify-content: space-between;
}

.wrm-portal-hero h2,
.wrm-portal-card h3,
.wrm-next-step h3 {
	margin: 0;
}

.wrm-portal-hero h2 {
	color: #fff;
}

.wrm-portal-hero p,
.wrm-next-step p {
	margin: 6px 0 0;
}

.wrm-portal-hero p {
	color: #c3c4c7;
}

.wrm-status-pill,
.wrm-type-pill {
	border-radius: 999px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 8px 10px;
	white-space: nowrap;
}

.wrm-status-new {
	background: #e7f5ff;
	color: #005c9c;
}

.wrm-status-in_progress,
.wrm-status-waiting_customer,
.wrm-status-exchange_payment {
	background: #fff4ce;
	color: #6c4b00;
}

.wrm-status-approved,
.wrm-status-completed,
.wrm-status-exchange_created {
	background: #edfaef;
	color: #0a6b2b;
}

.wrm-status-rejected,
.wrm-status-cancelled {
	background: #fcf0f1;
	color: #8a2424;
}

.wrm-type-pill {
	background: #f0f0f1;
	color: #1d2327;
}

.wrm-claims-list {
	display: grid;
	gap: 12px;
}

.wrm-claim-card {
	display: grid;
	gap: 12px;
}

.wrm-claim-card-header,
.wrm-claim-card-actions,
.wrm-portal-meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
}

.wrm-claim-card h3 {
	margin: 0;
}

.wrm-portal-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wrm-portal-field {
	background: #f6f7f7;
	border-radius: 6px;
	padding: 12px;
}

.wrm-portal-field span {
	color: #646970;
	display: block;
	font-size: 13px;
	margin-bottom: 4px;
}

.wrm-portal-field a {
	font-weight: 700;
}

.wrm-portal-field strong {
	display: block;
}

.wrm-items-list,
.wrm-attachment-list,
.wrm-timeline {
	display: grid;
	gap: 10px;
	margin-top: 12px;
}

.wrm-item-row,
.wrm-attachment,
.wrm-timeline-entry {
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 12px;
}

.wrm-item-row {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.wrm-attachment {
	display: inline-flex;
	text-decoration: none;
}

.wrm-timeline-entry > div:first-child {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
}

.wrm-timeline-entry time,
.wrm-muted {
	color: #646970;
}

.wrm-process-list {
	display: grid;
	gap: 10px;
	margin: 12px 0 0;
}

.wrm-stepper {
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wrm-step {
	align-items: center;
	color: #646970;
	display: grid;
	gap: 8px;
	justify-items: center;
	text-align: center;
}

.wrm-step span {
	background: #dcdcde;
	border-radius: 999px;
	display: block;
	height: 14px;
	position: relative;
	width: 14px;
}

.wrm-step span::after {
	background: #dcdcde;
	content: "";
	height: 2px;
	left: 20px;
	position: absolute;
	top: 6px;
	width: calc(100vw / 8);
}

.wrm-step:last-child span::after {
	display: none;
}

.wrm-step strong {
	font-size: 13px;
}

.wrm-step.is-complete {
	color: #0a6b2b;
}

.wrm-step.is-complete span,
.wrm-step.is-complete span::after {
	background: #0a6b2b;
}

.wrm-step.is-active {
	color: #135e96;
}

.wrm-step.is-active span {
	background: #135e96;
	box-shadow: 0 0 0 4px #f0f6fc;
}

.wrm-message-form {
	display: grid;
	gap: 12px;
}

.wrm-message-form textarea,
.wrm-message-form input[type="file"] {
	width: 100%;
}

@media (max-width: 782px) {
	.wrm-portal-hero,
	.wrm-claim-card-header,
	.wrm-claim-card-actions,
	.wrm-portal-meta,
	.wrm-item-row,
	.wrm-timeline-entry > div:first-child {
		align-items: stretch;
		flex-direction: column;
	}

	.wrm-portal-grid {
		grid-template-columns: 1fr;
	}

	.wrm-stepper {
		align-items: stretch;
		grid-template-columns: 1fr;
	}

	.wrm-step {
		grid-template-columns: 20px 1fr;
		justify-items: start;
		text-align: left;
	}

	.wrm-step span::after {
		display: none;
	}
}