.wrp-pricing {
	--wrp-primary: #223d57;
	--wrp-accent: #ffa200;
	--wrp-text: #16202a;
	--wrp-border: rgba(34, 61, 87, 0.18);
	--wrp-bg: #ffffff;
	--wrp-radius: 0px;
	--wrp-cell-padding-y: 15px;
	--wrp-cell-padding-x: 12px;
	width: 100%;
	color: var(--wrp-text);
	font-family: inherit;
}

.wrp-pricing *,
.wrp-pricing *::before,
.wrp-pricing *::after {
	box-sizing: border-box;
}

.wrp-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: var(--wrp-bg);
	border: 1px solid var(--wrp-border);
	border-radius: var(--wrp-radius);
	overflow: hidden;
}

.wrp-table th,
.wrp-table td {
	padding: var(--wrp-cell-padding-y) var(--wrp-cell-padding-x);
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid var(--wrp-border);
	border-bottom: 1px solid var(--wrp-border);
	line-height: 1.3;
}

.wrp-table tr > *:last-child {
	border-right: 0;
}

.wrp-table tbody tr:last-child > * {
	border-bottom: 0;
}

.wrp-table thead th {
	font-weight: 700;
}

.wrp-table tbody th {
	color: var(--wrp-primary);
	font-weight: 800;
}

.wrp-table tbody tr {
	transition: background-color 0.2s ease;
}

.wrp-table tbody tr:hover {
	background: color-mix(in srgb, var(--wrp-accent) 8%, transparent);
}

.wrp-phase-row th,
.wrp-name-row th,
.wrp-date-row th,
.wrp-column-row th {
	text-align: center;
}

.wrp-phase-label {
	width: 17%;
	color: var(--wrp-primary);
	font-size: clamp(14px, 1.05vw, 18px);
	font-weight: 800;
	line-height: 1.15;
	padding-left: 14px;
	padding-right: 14px;
	white-space: normal;
	word-break: normal;
	overflow-wrap: normal;
}

.wrp-phase-label > span {
	display: block;
}

.wrp-roman {
	display: block;
	font-size: clamp(22px, 1.8vw, 30px);
	line-height: 1;
	letter-spacing: 0.03em;
	color: var(--wrp-primary);
}

.wrp-phase-name {
	display: block;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.2;
	font-weight: 800;
	color: var(--wrp-primary);
}

.wrp-date-row th {
	font-size: 15px;
	font-weight: 700;
}

.wrp-column-row th {
	background: color-mix(in srgb, var(--wrp-primary) 5%, var(--wrp-bg));
	font-size: 15px;
	font-weight: 700;
}

.wrp-mobile {
	display: none;
}

@media (max-width: 767px) {
	.wrp-desktop {
		display: none;
	}

	.wrp-mobile {
		display: block;
	}

	.wrp-panel {
		background: var(--wrp-bg);
		border: 1px solid var(--wrp-border);
		border-radius: var(--wrp-radius);
		overflow: hidden;
	}

	.wrp-panel + .wrp-panel {
		margin-top: 18px;
	}

	.wrp-mobile-phase-kicker {
		display: flex;
		align-items: center;
		padding: 12px 14px;
		background: color-mix(in srgb, var(--wrp-primary) 6%, var(--wrp-bg));
		border-bottom: 1px solid var(--wrp-border);
		color: var(--wrp-primary);
		font-size: 13px;
		font-weight: 800;
		line-height: 1.2;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.wrp-mobile-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px;
		background: var(--wrp-primary);
		color: #ffffff;
	}

	.wrp-mobile-head strong {
		font-size: 18px;
		font-weight: 800;
		line-height: 1.15;
	}

	.wrp-mobile-head span {
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
	}

	.wrp-mobile-grid {
		display: grid;
		grid-template-columns: 1.12fr 1fr 1fr;
		align-items: stretch;
		border-top: 1px solid var(--wrp-border);
		min-height: 52px;
	}

	.wrp-mobile-grid:first-of-type {
		border-top: 0;
	}

	.wrp-mobile-grid > * {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 7px;
		text-align: center;
		border-right: 1px solid var(--wrp-border);
	}

	.wrp-mobile-grid > *:last-child {
		border-right: 0;
	}

	.wrp-mobile-grid strong {
		color: var(--wrp-primary);
	}

	.wrp-mobile-grid-head {
		background: color-mix(in srgb, var(--wrp-primary) 6%, var(--wrp-bg));
		font-size: 11px;
		font-weight: 800;
		min-height: 44px;
	}
}

@media (max-width: 390px) {
	.wrp-mobile-head {
		gap: 8px;
	}

	.wrp-mobile-head strong {
		font-size: 16px;
	}

	.wrp-mobile-head span {
		font-size: 11px;
		white-space: nowrap;
	}

	.wrp-mobile-grid {
		grid-template-columns: 1.05fr 1fr 1fr;
	}

	.wrp-mobile-grid > * {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* Group-only shortcode: on mobile the grid contains only distance + group price. */
@media (max-width: 767px) {
	.wrp-pricing--groups .wrp-mobile-grid {
		grid-template-columns: 1.25fr 1fr;
	}
}
