/* =========================================================
   MFTZF — Discount Regulations
   EasyDNNnews
   ========================================================= */

.mft-discounts {
	--discount-primary: var(--skin-color-brand);
	--discount-primary-dark: var(--skin-color-brand-strong);
	--discount-accent: var(--skin-color-accent);

	--discount-text: var(--skin-color-text);
	--discount-muted: var(--skin-color-text-soft);

	--discount-border: var(--skin-color-border);
	--discount-surface: var(--skin-color-surface);
	--discount-soft: var(--skin-color-surface-muted);

	position: relative;

	padding-block: clamp(2rem, 4vw, 3.5rem);

	color: var(--discount-text);
}


/* =========================================================
   Header
   ========================================================= */

.mft-discounts__header {
	max-inline-size: 52rem;

	margin-inline: auto;
	margin-block-end: clamp(1.5rem, 3vw, 2.25rem);

	text-align: center;
}


.mft-discounts__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-block-size: 2rem;

	margin-block-end: .75rem;
	padding-inline: .8rem;

	border:
		1px solid
		color-mix(
			in srgb,
			var(--discount-primary) 18%,
			transparent
		);

	border-radius: var(--skin-radius-pill, 999px);

	background:
		color-mix(
			in srgb,
			var(--discount-primary) 7%,
			var(--discount-surface)
		);

	color: var(--discount-primary);

	font-size: .8rem;
	font-weight: 800;
}


.mft-discounts__title {
	margin: 0;

	color: var(--discount-text);

	font: inherit;
	font-size: clamp(1.45rem, 3vw, 2.05rem);
	font-weight: 900;
	line-height: 1.55;

	text-wrap: balance;
}


.mft-discounts__title::after {
	content: "";

	display: block;

	inline-size: 3.5rem;
	block-size: .2rem;

	margin: .85rem auto 0;

	border-radius: var(--skin-radius-pill, 999px);

	background:
		linear-gradient(
			90deg,
			var(--discount-primary),
			var(--discount-accent)
		);
}


.mft-discounts__intro {
	max-inline-size: 46rem;

	margin: .95rem auto 0;

	color: var(--discount-muted);

	font-size: .94rem;
	line-height: 2;

	text-wrap: pretty;
}


/* =========================================================
   Table wrapper
   ========================================================= */

.mft-discounts__table-wrap {
	overflow: hidden;

	border: 1px solid var(--discount-border);
	border-radius: var(--skin-radius-lg);

	background: var(--discount-surface);

	box-shadow: var(--skin-shadow-sm);
}


/* =========================================================
   Table
   ========================================================= */

.mft-discounts__table {
	inline-size: 100%;

	border-collapse: collapse;
	border-spacing: 0;

	table-layout: fixed;
}


.mft-discounts__caption {
	position: absolute;

	inline-size: 1px;
	block-size: 1px;

	padding: 0;
	margin: -1px;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);
	white-space: nowrap;

	border: 0;
}


.mft-discounts__table thead {
	background:
		color-mix(
			in srgb,
			var(--discount-primary) 7%,
			var(--discount-surface)
		);
}


.mft-discounts__table th {
	padding: 1rem 1.1rem;

	border-block-end: 1px solid var(--discount-border);

	color: var(--discount-text);

	font-size: .86rem;
	font-weight: 850;
	line-height: 1.8;

	text-align: start;
}


.mft-discounts__table th:nth-child(1) {
	inline-size: 26%;
}


.mft-discounts__table th:nth-child(2) {
	inline-size: 16%;
	text-align: center;
}


.mft-discounts__table th:nth-child(3) {
	inline-size: 58%;
}


.mft-discounts__row {
	transition:
		background-color .18s ease;
}


.mft-discounts__row:not(:last-child) {
	border-block-end: 1px solid var(--discount-border);
}


.mft-discounts__row td {
	padding: 1rem 1.1rem;

	vertical-align: middle;

	color: var(--discount-muted);

	font-size: .88rem;
	line-height: 1.95;
}


.mft-discounts__row td:nth-child(2) {
	text-align: center;
}


@media (hover: hover) and (pointer: fine) {

	.mft-discounts__row:hover {
		background:
			color-mix(
				in srgb,
				var(--discount-primary) 2.5%,
				var(--discount-surface)
			);
	}
}


/* =========================================================
   Subject
   ========================================================= */

.mft-discounts__subject {
	display: block;

	color: var(--discount-text);

	font-size: .9rem;
	font-weight: 800;
	line-height: 1.8;
}


/* =========================================================
   Percentage
   ========================================================= */

.mft-discounts__percent {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-inline-size: 4rem;
	min-block-size: 2.2rem;

	padding-inline: .75rem;

	border:
		1px solid
		color-mix(
			in srgb,
			var(--discount-primary) 15%,
			transparent
		);

	border-radius: var(--skin-radius-pill, 999px);

	background:
		color-mix(
			in srgb,
			var(--discount-primary) 7%,
			var(--discount-surface)
		);

	color: var(--discount-primary-dark);

	font-size: .85rem;
	font-weight: 900;
	line-height: 1;
}


/* =========================================================
   Summary normalization
   ========================================================= */

.mft-discounts__description > :first-child {
	margin-block-start: 0;
}


.mft-discounts__description > :last-child {
	margin-block-end: 0;
}


.mft-discounts__description p {
	margin: 0;

	color: var(--discount-muted);
}


.mft-discounts__description p + p {
	margin-block-start: .65rem;
}


.mft-discounts__description strong {
	color: var(--discount-text);
}


/* =========================================================
   Admin
   ========================================================= */

.mft-discounts__admin-row td {
	padding: .35rem .75rem;

	background: var(--discount-soft);
}


.mft-discounts__admin-row + .mft-discounts__row {
	border-block-start: 0;
}


/* =========================================================
   Notice
   ========================================================= */

.mft-discounts__notice {
	display: grid;

	grid-template-columns: 2.75rem minmax(0, 1fr);

	align-items: start;

	gap: .9rem;

	margin-block-start: 1.25rem;
	padding: 1.1rem 1.2rem;

	border:
		1px solid
		color-mix(
			in srgb,
			var(--discount-accent) 30%,
			var(--discount-border)
		);

	border-radius: var(--skin-radius-lg);

	background:
		color-mix(
			in srgb,
			var(--discount-accent) 6%,
			var(--discount-surface)
		);
}


.mft-discounts__notice-icon {
	display: grid;
	place-items: center;

	inline-size: 2.75rem;
	block-size: 2.75rem;

	border-radius: var(--skin-radius-md);

	background:
		color-mix(
			in srgb,
			var(--discount-accent) 14%,
			var(--discount-surface)
		);

	color: color-mix(
		in srgb,
		var(--discount-accent) 75%,
		var(--discount-text)
	);
}


.mft-discounts__notice-icon svg {
	inline-size: 1.4rem;
	block-size: 1.4rem;
}


.mft-discounts__notice-content > strong {
	display: block;

	margin-block-end: .45rem;

	color: var(--discount-text);

	font-size: .9rem;
	font-weight: 850;
}


.mft-discounts__notice-content ul {
	display: grid;
	gap: .3rem;

	margin: 0;
	padding-inline-start: 1.2rem;

	color: var(--discount-muted);

	font-size: .84rem;
	line-height: 1.9;
}


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

@media (max-width: 48rem) {

	.mft-discounts {
		padding-block: 2rem;
	}


	.mft-discounts__header {
		text-align: start;
	}


	.mft-discounts__title::after {
		margin-inline: 0;
	}


	.mft-discounts__intro {
		margin-inline: 0;
	}


	.mft-discounts__table-wrap {
		overflow: visible;

		border: 0;
		border-radius: 0;

		background: transparent;

		box-shadow: none;
	}


	.mft-discounts__table,
	.mft-discounts__table tbody,
	.mft-discounts__row,
	.mft-discounts__row td {
		display: block;

		inline-size: 100%;
	}


	.mft-discounts__table thead {
		display: none;
	}


	.mft-discounts__row {
		overflow: hidden;

		margin-block-end: .8rem;

		border: 1px solid var(--discount-border) !important;
		border-radius: var(--skin-radius-lg);

		background: var(--discount-surface);

		box-shadow: var(--skin-shadow-sm);
	}


	.mft-discounts__row td {
		display: grid;

		grid-template-columns:
			minmax(7rem, .35fr)
			minmax(0, .65fr);

		align-items: start;

		gap: .75rem;

		padding: .8rem .9rem;

		border-block-end: 1px solid var(--discount-border);

		text-align: start !important;
	}


	.mft-discounts__row td:last-child {
		border-block-end: 0;
	}


	.mft-discounts__row td::before {
		content: attr(data-label);

		color: var(--discount-muted);

		font-size: .76rem;
		font-weight: 750;
		line-height: 1.8;
	}


	.mft-discounts__percent {
		justify-self: start;
	}


	.mft-discounts__admin-row {
		display: block;
	}


	.mft-discounts__admin-row td {
		display: block;

		margin-block-end: .35rem;

		border: 0;
		border-radius: var(--skin-radius-md);
	}
}


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

@media (max-width: 36rem) {

	.mft-discounts__row td {
		grid-template-columns: 1fr;

		gap: .25rem;

		padding: .75rem .85rem;
	}


	.mft-discounts__subject {
		font-size: .88rem;
	}


	.mft-discounts__description {
		font-size: .84rem;
		line-height: 1.9;
	}


	.mft-discounts__notice {
		grid-template-columns: 1fr;

		gap: .7rem;

		padding: .95rem;
	}


	.mft-discounts__notice-icon {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}


	.mft-discounts__notice-content ul {
		padding-inline-start: 1rem;
	}
}


/* =========================================================
   Print
   ========================================================= */

@media print {

	.mft-discounts {
		padding: 0;
	}


	.mft-discounts__table-wrap {
		box-shadow: none;
	}


	.mft-discounts__admin-row {
		display: none;
	}


	.mft-discounts__notice {
		break-inside: avoid;

		box-shadow: none;
	}
}