.civicrm-ux-membership-greeting {
	color: #18222d;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 1.5rem auto 0.5rem;
	max-width: min(1180px, calc(100vw - 2rem));
}

.civicrm-ux-membership-intro {
	color: #52616f;
	font-size: 1rem;
	line-height: 1.55;
	margin: 1.5rem auto 0.75rem;
	max-width: min(1180px, calc(100vw - 2rem));
}

.civicrm-ux-membership-wrap {
	background: #ffffff;
	border: 1px solid #d9e2e8;
	border-radius: 8px;
	box-sizing: border-box;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
	margin-block: 1.5rem;
	margin-left: calc((100% - min(1180px, calc(100vw - 2rem))) / 2);
	margin-right: calc((100% - min(1180px, calc(100vw - 2rem))) / 2);
	max-width: min(1180px, calc(100vw - 2rem));
	overflow-x: auto;
	width: min(1180px, calc(100vw - 2rem));
}

.civicrm-ux-membership {
	border-collapse: separate;
	border-spacing: 0;
	color: #18222d;
	font-size: 0.95rem;
	line-height: 1.45;
	min-width: 760px;
	width: 100%;
}

.civicrm-ux-membership th,
.civicrm-ux-membership td {
	border: 0;
	padding: 1rem 1.125rem;
	text-align: left;
	vertical-align: middle;
}

.civicrm-ux-membership thead th {
	background: #f5f8fa;
	border-bottom: 1px solid #d9e2e8;
	color: #52616f;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.civicrm-ux-membership tbody td {
	border-bottom: 1px solid #edf1f4;
}

.civicrm-ux-membership tbody tr:last-child td {
	border-bottom: 0;
}

.civicrm-ux-membership tbody tr {
	transition: background-color 160ms ease;
}

.civicrm-ux-membership tbody tr:hover {
	background: #fbfcfd;
}

.civicrm-ux-membership .membership-member,
.civicrm-ux-membership .membership-type {
	font-weight: 650;
}

.civicrm-ux-membership .membership-expiry {
	white-space: nowrap;
}

.civicrm-ux-membership .membership-status-pill {
	align-items: center;
	background: #e9f5ee;
	border: 1px solid #bfe3cc;
	border-radius: 999px;
	color: #1f6b3d;
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 700;
	min-height: 2rem;
	padding: 0.25rem 0.7rem;
	white-space: nowrap;
}

.civicrm-ux-membership .status-grace,
.civicrm-ux-membership .status-pending,
.civicrm-ux-membership .status-application {
	background: #fff5dc;
	border-color: #ead08c;
	color: #7a5313;
}

.civicrm-ux-membership .status-expired {
	background: #fff0ee;
	border-color: #f2c4bd;
	color: #9d3325;
}

.civicrm-ux-membership .status-new {
	background: #eaf3ff;
	border-color: #c5dcfb;
	color: #235f9f;
}

.civicrm-ux-membership .membership-renewal .wp-block-button {
	margin: 0;
}

.civicrm-ux-membership .membership-renewal .wp-block-button__link {
	background: #1f5f87;
	border: 1px solid #1f5f87;
	border-radius: 6px;
	color: #ffffff;
	font-size: 0.88rem;
	font-weight: 700;
	padding: 0.55rem 0.8rem;
	white-space: nowrap;
}

.civicrm-ux-membership .membership-renewal .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color, .has-background):hover,
.civicrm-ux-membership .membership-renewal .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color, .has-background):focus {
	background: #174b6c;
	border-color: #174b6c;
	color: #ffffff;
}

.civicrm-ux-membership .membership-renewal-note {
	color: #6b7885;
	font-size: 0.9rem;
	white-space: nowrap;
}

.civicrm-ux-membership tr.is-expired .membership-expiry {
	color: #9d3325;
	font-weight: 700;
}

.civicrm-ux-membership .membership-empty-row:hover {
	background: transparent;
}

.civicrm-ux-membership .membership-empty-row td {
	padding: 1.5rem;
	text-align: center;
}

.civicrm-ux-membership .membership-empty-state {
	background: #f5f8fa;
	border: 1px solid #d9e2e8;
	border-radius: 6px;
	color: #52616f;
	font-weight: 650;
	padding: 1rem;
}

.civicrm-ux-membership-empty-page {
	background: #f5f8fa;
	border: 1px solid #d9e2e8;
	border-radius: 8px;
	color: #52616f;
	font-weight: 650;
	margin: 1rem auto 1.5rem;
	max-width: min(1180px, calc(100vw - 2rem));
	padding: 1rem;
}

.civicrm-ux-membership-empty-page p {
	margin: 0;
}

@media (max-width: 720px) {
	.civicrm-ux-membership-wrap {
		border-inline: 0;
		border-radius: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		overflow-x: visible;
		width: 100%;
	}

	.civicrm-ux-membership {
		font-size: 0.9rem;
		min-width: 0;
	}

	.civicrm-ux-membership thead {
		display: none;
	}

	.civicrm-ux-membership,
	.civicrm-ux-membership tbody,
	.civicrm-ux-membership tr,
	.civicrm-ux-membership td {
		display: block;
		width: 100%;
	}

	.civicrm-ux-membership tbody {
		background: #f5f8fa;
		padding: 0.75rem;
	}

	.civicrm-ux-membership tbody tr {
		background: #ffffff;
		border: 1px solid #d9e2e8;
		border-radius: 8px;
		box-sizing: border-box;
		margin-bottom: 0.75rem;
		padding: 1rem;
	}

	.civicrm-ux-membership tbody tr:last-child {
		margin-bottom: 0;
	}

	.civicrm-ux-membership tbody tr:hover {
		background: #ffffff;
	}

	.civicrm-ux-membership td {
		align-items: center;
		border-bottom: 0;
		box-sizing: border-box;
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		padding: 0.45rem 0;
		text-align: right;
	}

	.civicrm-ux-membership td::before {
		color: #52616f;
		content: attr(data-label);
		flex: 0 0 46%;
		font-weight: 700;
		text-align: left;
	}

	.civicrm-ux-membership .membership-member {
		display: block;
		font-size: 1.05rem;
		padding-bottom: 0.8rem;
		text-align: left;
	}

	.civicrm-ux-membership .membership-member::before,
	.civicrm-ux-membership .membership-renewal::before,
	.civicrm-ux-membership .membership-empty-row td::before {
		content: none;
	}

	.civicrm-ux-membership .membership-status {
		align-items: flex-start;
	}

	.civicrm-ux-membership .membership-status-pill {
		text-align: right;
	}

	.civicrm-ux-membership .membership-renewal {
		display: block;
		padding-top: 1rem;
	}

	.civicrm-ux-membership .membership-renewal .wp-block-button__link {
		box-sizing: border-box;
		text-align: center;
		width: 100%;
	}

	.civicrm-ux-membership .membership-renewal-note {
		display: block;
		text-align: center;
	}

	.civicrm-ux-membership .membership-empty-row td {
		padding: 0;
	}
}