/* ==========================================================================
   MemberPress Account > Payments
   --------------------------------------------------------------------------
   Amount-due cards + merged payment history. Markup comes from the
   turfnet-proforma-invoice-all-gateways plugin (views/account/payments.php).

   Everything is scoped to .tn-payments. Several rules need !important to beat
   the generic .mp_wrapper rules in memberpress-frontend.css (selects, links,
   headings), which are themselves !important.
   Design tokens: assets/css/global/design-tokens.css
   ========================================================================== */

.tn-payments {
	--tn-red: var(--turfnet-red, #7e0000);
	--tn-red-dark: var(--turfnet-red-dark, #6a0000);
	--tn-red-light: var(--turfnet-red-light, #9a0000);
	--tn-tint: #FEF2F2;
	--tn-ink: #1c1917;
	--tn-ink-2: #44403c;
	--tn-muted: #57534e;
	--tn-line: #e7e5e4;
	--tn-line-soft: #f5f5f4;
	--tn-field: #d6d3d1;
	--tn-surface: #fff;
	--tn-head: #fafaf9;

	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 28px !important;
	/* Same 20px inset as the account nav card above, so the edges line up. */
	padding: 0 20px !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--tn-ink);
}

.tn-payments [hidden] {
	display: none !important;
}

.tn-payments .tn-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tn-payments .tn-section-title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--tn-muted) !important;
	border: 0 !important;
}

/* .entry-content h2 draws an underline accent; not wanted on these labels. */
.tn-payments .tn-section-title::before {
	content: none !important;
}

.tn-payments .tn-card {
	background: var(--tn-surface);
	border: 1px solid var(--tn-line);
	border-radius: 10px;
	overflow: hidden;
}

/* Buttons
   ------------------------------------------------------------------------ */
.tn-payments .tn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var(--tn-field);
	border-radius: 6px;
	background: var(--tn-surface);
	box-shadow: none;
	color: var(--tn-ink-2) !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600 !important;
	line-height: 1.3;
	text-transform: none;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
}

.tn-payments .tn-btn:hover,
.tn-payments .tn-btn:focus {
	background: var(--tn-line-soft);
	color: var(--tn-ink-2) !important;
}

/* memberpress-frontend.css underlines every .mp_wrapper link on hover with
   !important; buttons should not change on hover beyond their colour. */
div.mp_wrapper.tn-payments a.tn-btn:hover,
div.mp_wrapper.tn-payments a.tn-btn:focus {
	text-decoration: none !important;
}

.tn-payments .tn-btn:focus-visible {
	outline: 2px solid var(--tn-red);
	outline-offset: 2px;
}

.tn-payments .tn-btn--primary {
	background: var(--tn-red);
	border-color: var(--tn-red);
	color: #fff !important;
}

.tn-payments .tn-btn--primary:hover,
.tn-payments .tn-btn--primary:focus {
	background: var(--tn-red-light);
	border-color: var(--tn-red-light);
	color: #fff !important;
}

.tn-payments .tn-btn--primary:active {
	background: var(--tn-red-dark);
}

.tn-payments .tn-btn:disabled,
.tn-payments .tn-btn:disabled:hover {
	opacity: .5;
	cursor: not-allowed;
}

.tn-payments .tn-btn--tint {
	padding: 6px 12px;
	font-size: 14px;
	border-color: transparent;
	background: var(--tn-tint);
	color: var(--tn-red) !important;
}

.tn-payments .tn-btn--tint:hover,
.tn-payments .tn-btn--tint:focus {
	border-color: var(--tn-red);
	background: var(--tn-tint);
	color: var(--tn-red) !important;
}

.tn-payments .tn-btn--link {
	padding: 9px 6px;
	border: 0;
	background: none;
	color: var(--tn-red) !important;
}

.tn-payments .tn-btn--link:hover,
.tn-payments .tn-btn--link:focus {
	background: none;
	color: var(--tn-red-light) !important;
}

/* Amount due
   ------------------------------------------------------------------------ */
.tn-payments .tn-due {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding: 24px 28px;
}

.tn-payments .tn-due__info {
	display: flex;
	flex: 1 1 360px;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.tn-payments .tn-due__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 600;
	color: var(--tn-ink);
}

.tn-payments .tn-due__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 15px;
	color: var(--tn-muted);
}

.tn-payments .tn-due__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.tn-payments .tn-due__amount {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--tn-ink);
}

.tn-payments .tn-due__buttons {
	display: flex;
	gap: 8px;
}

/* One width for every card's buttons, so the pairs line up down the page.
   140px fits the longest label, "Retry payment". */
.tn-payments .tn-due__buttons .tn-btn {
	min-width: 140px;
}

.tn-payments .tn-badge {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--tn-line-soft);
	color: var(--tn-ink-2);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.tn-payments .tn-badge--failed {
	background: #FEF3C7;
	color: #92400E;
}

.tn-payments .tn-alert {
	padding: 14px 28px;
	border-top: 1px solid #FDE68A;
	background: #FFFBEB;
	color: #78350f;
	font-size: 15px;
	font-weight: 600;
}

/* History toolbar
   ------------------------------------------------------------------------ */
.tn-payments .tn-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-height: 70px;
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--tn-line);
}

.tn-payments .tn-field {
	width: auto !important;
	height: auto;
	margin: 0;
	padding: 9px 12px !important;
	border: 1px solid var(--tn-field) !important;
	border-radius: 6px !important;
	background-color: var(--tn-surface) !important;
	box-shadow: none !important;
	color: var(--tn-ink) !important;
	font-family: inherit;
	font-size: 15px !important;
	line-height: 1.3;
}

.tn-payments select.tn-field {
	padding-right: 32px !important;
}

.tn-payments .tn-field:focus {
	outline: 2px solid var(--tn-red);
	outline-offset: -1px;
	border-color: var(--tn-field) !important;
	box-shadow: none !important;
}

.tn-payments .tn-field--search {
	flex: 0 1 160px;
	min-width: 0;
}

.tn-payments .tn-field--item {
	flex: 1 1 200px;
	min-width: 0;
	max-width: 100%;
}

.tn-payments .tn-field--sm {
	padding: 6px 10px !important;
	padding-right: 28px !important;
	font-size: 14px !important;
}

.tn-payments .tn-toolbar__count {
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--tn-ink);
}

/* Table
   ------------------------------------------------------------------------ */
.tn-payments .tn-table-wrap {
	overflow-x: auto;
}

/* While the next page loads over AJAX. */
.tn-payments .tn-history.is-loading .tn-table-wrap {
	opacity: .5;
	transition: opacity .15s;
}

.tn-payments .tn-table {
	width: 100%;
	min-width: 720px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-size: 15px;
	line-height: 1.4;
}

.tn-payments .tn-table th {
	padding: 14px 8px;
	border: 0;
	border-bottom: 1px solid var(--tn-line);
	background: var(--tn-head);
	color: var(--tn-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.tn-payments .tn-table td {
	padding: 14px 8px;
	border: 0;
	border-bottom: 1px solid var(--tn-line-soft);
	background: none;
	color: var(--tn-muted);
	vertical-align: middle;
	white-space: nowrap;
}

.tn-payments .tn-table tbody tr:last-child td {
	border-bottom: 0;
}

.tn-payments .tn-table th:first-child,
.tn-payments .tn-table td:first-child {
	padding-left: 16px;
}

.tn-payments .tn-table .tn-col-check {
	width: 1%;
}

.tn-payments .tn-table th:last-child,
.tn-payments .tn-table td:last-child {
	padding-right: 16px;
	text-align: right;
}

.tn-payments .tn-table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.tn-payments .tn-table .date {
	color: var(--tn-ink);
}

.tn-payments .tn-table .item {
	min-width: 200px;
	color: var(--tn-ink-2);
	white-space: normal;
	text-wrap: pretty;
}

.tn-payments .tn-table .tn-col-wrap {
	white-space: normal;
}

.tn-payments .tn-table td.action {
	padding-top: 9px;
	padding-bottom: 9px;
}

.tn-payments .tn-table tr.is-checked td {
	background: var(--tn-tint);
}

.tn-payments .tn-check {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--tn-red);
	cursor: pointer;
	vertical-align: middle;
}

.tn-payments .tn-check:disabled {
	cursor: default;
}

.tn-payments .tn-muted {
	color: var(--tn-field);
}

.tn-payments .tn-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 40px 20px;
	color: var(--tn-muted);
	font-size: 15px;
	text-align: center;
}

/* Pagination
   ------------------------------------------------------------------------ */
.tn-payments .tn-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--tn-line);
	color: var(--tn-muted);
	font-size: 14px;
}

/* div. qualifier: the Rainmaker MemberPress theme sets every .mp_wrapper label
   to width:100% !important, which pushed the page controls onto their own line. */
div.mp_wrapper.tn-payments .tn-pager__group {
	width: auto !important;
}

.tn-payments .tn-pager__group {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 400;
}

.tn-payments .tn-pager__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	/* Stays right-aligned when the pager wraps onto a second line. */
	margin-left: auto;
}

.tn-payments .tn-pager__range {
	font-variant-numeric: tabular-nums;
}

.tn-payments .tn-pager__pages {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
}

.tn-payments .tn-page-gap {
	min-width: 20px;
	color: var(--tn-muted);
	text-align: center;
}

.tn-payments .tn-page-btn {
	min-width: 34px;
	height: 34px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--tn-ink-2);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

.tn-payments .tn-page-btn:hover,
.tn-payments .tn-page-btn:focus {
	background: var(--tn-line-soft);
	color: var(--tn-ink-2);
}

.tn-payments .tn-page-btn--arrow {
	border-color: var(--tn-field);
	background: var(--tn-surface);
	font-size: 18px;
}

.tn-payments .tn-page-btn:disabled {
	opacity: .4;
	cursor: default;
}

.tn-payments .tn-page-btn.is-selected {
	border-color: var(--tn-red);
	background: var(--tn-tint);
	color: var(--tn-red);
}

/* Narrow layouts
   --------------------------------------------------------------------------
   Sized by the space the tab actually gets, not the viewport: the profile
   page's sidebar narrows the column independently of screen width.
   ------------------------------------------------------------------------ */
.tn-payments {
	container: tn-payments / inline-size;
}

/* Compact table: the full table needs ~880px. Below that the Source column
   folds into a second line under the item, so nothing scrolls out of view.
   The stacked layout below restores it as a labelled line of its own. */
@container tn-payments (max-width: 899px) {
	.tn-payments .tn-table .tn-col-wrap {
		display: none;
	}

	.tn-payments .tn-table th,
	.tn-payments .tn-table td {
		padding-left: 6px;
		padding-right: 6px;
	}

	.tn-payments .tn-table .item {
		min-width: 160px;
	}

	.tn-payments .tn-table td.item::after {
		content: attr(data-source-label);
		display: block;
		margin-top: 2px;
		color: var(--tn-muted);
		font-size: 13px;
		font-weight: 400;
	}
}

/* History rows become stacked, labelled cards once the table no longer fits. */
@container tn-payments (max-width: 719px) {
	.tn-payments .tn-table,
	.tn-payments .tn-table tbody {
		display: block;
		min-width: 0;
	}

	.tn-payments .tn-table thead {
		display: none;
	}

	.tn-payments .tn-table tr {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--tn-line);
	}

	.tn-payments .tn-table tbody tr:last-child {
		border-bottom: 0;
	}

	.tn-payments .tn-table td,
	.tn-payments .tn-table td:first-child,
	.tn-payments .tn-table td:last-child {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
		width: auto;
		padding: 0;
		border: 0;
		text-align: right;
		white-space: normal;
	}

	.tn-payments .tn-table td[data-label]::before {
		content: attr(data-label);
		flex: none;
		color: var(--tn-muted);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .06em;
		text-align: left;
		text-transform: uppercase;
	}

	/* The item reads as the card's title, above the labelled details. */
	.tn-payments .tn-table td.item {
		order: -1;
		display: block;
		margin-bottom: 4px;
		padding-right: 32px;
		color: var(--tn-ink);
		font-size: 16px;
		font-weight: 600;
		text-align: left;
	}

	.tn-payments .tn-table td.item::before,
	.tn-payments .tn-table td.item::after {
		content: none;
	}

	.tn-payments .tn-table td.tn-col-wrap {
		display: flex;
	}

	.tn-payments .tn-table .tn-col-check {
		position: absolute;
		top: 16px;
		right: 16px;
	}

	.tn-payments .tn-table td.action {
		display: block;
		margin-top: 6px;
		padding: 0;
		text-align: left;
	}

	.tn-payments .tn-table td.action .tn-btn {
		width: 100%;
	}

	.tn-payments .tn-table td.action:has(.tn-muted) {
		display: none;
	}

	/* Tint the whole card, not each cell -- the gaps between cells would show. */
	.tn-payments .tn-table tr.is-checked {
		background: var(--tn-tint);
	}

	.tn-payments .tn-table tr.is-checked td {
		background: none;
	}

}

@container tn-payments (max-width: 560px) {
	.tn-payments .tn-due {
		gap: 16px;
		padding: 20px;
	}

	.tn-payments .tn-alert {
		padding: 12px 20px;
	}

	.tn-payments .tn-due__info {
		flex-basis: 100%;
	}

	.tn-payments .tn-due__actions,
	.tn-payments .tn-due__buttons {
		width: 100%;
	}

	.tn-payments .tn-due__buttons .tn-btn {
		flex: 1 1 0;
		min-width: 0;
	}

	.tn-payments .tn-field--search,
	.tn-payments .tn-field--item {
		flex-basis: 100%;
	}

	/* min-width: a select will not shrink below its longest option otherwise,
	   which pushed Source and Year onto a row each. */
	.tn-payments .tn-toolbar select.tn-field:not(.tn-field--item) {
		flex: 1 1 0;
		min-width: 0;
	}

	.tn-payments .tn-toolbar [data-tn-filter="source"] {
		flex-grow: 3;
	}

	.tn-payments .tn-toolbar [data-tn-filter="year"] {
		flex-grow: 2;
	}

	/* Line 1: rows-per-page left, range right. Line 2: page buttons, right.
	   display:contents lifts the range and buttons into the pager's own flex
	   row so they can be placed separately. */
	.tn-payments .tn-pager {
		row-gap: 10px;
	}

	.tn-payments .tn-pager__right {
		display: contents;
	}

	.tn-payments .tn-pager__range {
		margin-left: auto;
	}

	.tn-payments .tn-pager__right > .tn-pager__pages {
		flex: 1 0 100%;
		justify-content: flex-end;
	}

	.tn-payments .tn-pager__pages {
		gap: 2px;
	}

	.tn-payments .tn-page-btn {
		min-width: 30px;
		height: 32px;
		padding: 0 6px;
	}
}

/* Type scale
   --------------------------------------------------------------------------
   global/responsive/_mobile.css sets every element inside .mp_wrapper on the
   profile page to 12px !important, and loads after this file. The div.
   qualifier outranks that rule so the tab keeps its hierarchy on phones
   (a 12px amount due reads like a footnote). Descendants inherit by default;
   only elements that set their own size are listed.
   ------------------------------------------------------------------------ */
div.mp_wrapper.tn-payments {
	font-size: 15px !important;
}

div.mp_wrapper.tn-payments * {
	font-size: inherit !important;
}

div.mp_wrapper.tn-payments .tn-section-title { font-size: 13px !important; }
div.mp_wrapper.tn-payments .tn-btn { font-size: 15px !important; }
div.mp_wrapper.tn-payments .tn-btn:disabled,
.tn-payments .tn-btn:disabled:hover {
	opacity: .5;
	cursor: not-allowed;
}

.tn-payments .tn-btn--tint { font-size: 14px !important; }
div.mp_wrapper.tn-payments .tn-due__title { font-size: 17px !important; }
div.mp_wrapper.tn-payments .tn-due__amount { font-size: 20px !important; }
div.mp_wrapper.tn-payments .tn-badge { font-size: 13px !important; }
div.mp_wrapper.tn-payments .tn-field { font-size: 15px !important; }
div.mp_wrapper.tn-payments .tn-field--sm,
div.mp_wrapper.tn-payments .tn-pager,
div.mp_wrapper.tn-payments .tn-page-btn { font-size: 14px !important; }
div.mp_wrapper.tn-payments .tn-page-btn--arrow { font-size: 18px !important; }
div.mp_wrapper.tn-payments .tn-table th { font-size: 12px !important; }

@container tn-payments (max-width: 719px) {
	div.mp_wrapper.tn-payments .tn-table td.item { font-size: 16px !important; }
}

@container tn-payments (max-width: 560px) {
	div.mp_wrapper.tn-payments .tn-due__amount { font-size: 18px !important; }
}