/**
 * Product facts row (under the price cards and Buy Now) and the /changelog/ page.
 * Space and background only: no borders, outlines or side bars.
 *
 * @package Devtonic Studios
 */

/*
 * The selectors are doubled or scoped on purpose: some sales pages reset every element and load
 * after this file (SellSmith: `.sslp * { margin: 0; padding: 0 }`), which took the pills' padding
 * and the row's spacing away.
 *
 * Spacing: the row belongs to the price cards (or Buy Now) above it, so it sits close to them and
 * clearly apart from whatever comes next (28px above, 44px below; 22 and 36 on a phone).
 */
.dts-facts.dts-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 1180px;
	margin: 28px auto 44px;
	padding: 0;
	font-family: 'Inter', sans-serif;
}

.dts-facts .dts-fact {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.35;
	white-space: nowrap;
	background: #eef4ff;
	color: #334155;
}

.dts-facts .dts-fact-k,
.dts-facts .dts-fact-v {
	margin: 0;
	padding: 0;
}

.dts-facts .dts-fact-k {
	font-weight: 600;
	color: #0a1929;
}

.dts-facts a.dts-fact-link,
.dts-facts a.dts-fact-link:visited {
	background: #0066ff;
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
}

.dts-facts a.dts-fact-link:hover,
.dts-facts a.dts-fact-link:focus-visible {
	background: #0052cc;
	color: #ffffff;
	text-decoration: none;
}

.dts-facts a.dts-fact-link:focus {
	outline: none;
}

.dts-facts a.dts-fact-link:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.3);
}

.dts-facts--dark .dts-fact {
	background: rgba(255, 255, 255, 0.09);
	color: rgba(255, 255, 255, 0.78);
}

.dts-facts--dark .dts-fact-k {
	color: #ffffff;
}

.dts-facts--dark a.dts-fact-link,
.dts-facts--dark a.dts-fact-link:visited {
	background: #ffffff;
	color: #0a1929;
}

.dts-facts--dark a.dts-fact-link:hover,
.dts-facts--dark a.dts-fact-link:focus-visible {
	background: #dbe9ff;
	color: #0a1929;
}

/* FilterKit's and QuoteWise's price grids already end with 40px of space: 40 - 12 = 28px. */
.awf-pricing-grid + .dts-facts.dts-facts,
.qwise-pricing-grid + .dts-facts.dts-facts {
	margin-top: -12px;
}

/* Under Buy Now the row lines up with the button, not the page middle. */
.dts-facts.dts-facts--start {
	justify-content: flex-start;
	margin: 16px 0 44px;
}

@media (max-width: 640px) {
	.dts-facts.dts-facts {
		gap: 6px;
		margin: 22px auto 36px;
	}

	.awf-pricing-grid + .dts-facts.dts-facts,
	.qwise-pricing-grid + .dts-facts.dts-facts {
		margin-top: -18px;
	}

	.dts-facts.dts-facts--start {
		margin: 16px 0 36px;
	}

	.dts-facts .dts-fact {
		padding: 6px 11px;
		font-size: 12.5px;
		white-space: normal;
	}
}

/* ==================== The changelog page ==================== */

.dts-cl-hero {
	background: linear-gradient(135deg, #001429 0%, #0a1929 55%, #001429 100%);
	padding: 170px 20px 64px;
	text-align: center;
	font-family: 'Inter', sans-serif;
}

.dts-cl-hero-inner {
	max-width: 900px;
	margin: 0 auto;
}

.dts-cl-eyebrow {
	display: inline-block;
	margin: 0 0 22px;
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(0, 102, 255, 0.2);
	color: #6cc4ff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
}

.dts-cl-title {
	margin: 0 0 18px;
	color: #ffffff;
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 800;
	line-height: 1.15;
}

.dts-cl-lead {
	max-width: 680px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.74);
	font-size: 17px;
	line-height: 1.65;
}

.dts-cl-body {
	/* Where a jump lands (/changelog/#quotewise, a tab, a version): 24 px under the fixed site menu once it has
	   shrunk to its scrolled size, measured 16 Oct 2026: 132 px tall from 969 px wide, 111 up to 968, 94 up to
	   768, 86 up to 480. Logged in, the WordPress bar pushes the menu down 32 px (46 up to 782, none up to 600).
	   assets/js/changelog.js reads it from scroll-margin-top. */
	--dts-cl-land: 156px;
	--dts-cl-bar: 0px;
	max-width: 900px;
	margin: 0 auto;
	padding: 56px 20px 96px;
	font-family: 'Inter', sans-serif;
}

.admin-bar .dts-cl-body {
	--dts-cl-bar: 32px;
}

.dts-cl-pick,
.dts-cl-product,
.dts-cl-version {
	scroll-margin-top: calc(var(--dts-cl-land) + var(--dts-cl-bar));
}

.dts-cl-empty {
	color: #475569;
	font-size: 16px;
}

/* One plugin's part: its name, facts row, versions. */
.dts-cl-product {
	margin: 0 0 72px;
}

.dts-cl-product:last-child {
	margin-bottom: 0;
}

.dts-cl-product-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
}

.dts-cl-product-head h2 {
	margin: 0;
	color: #0a1929;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
}

.dts-cl-product-link,
.dts-cl-product-link:visited {
	color: #0066ff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.dts-cl-product-link:hover {
	color: #0052cc;
}

.dts-cl-product .dts-facts.dts-facts {
	justify-content: flex-start;
	max-width: none;
	margin: 16px 0 44px;
}

.dts-cl-earlier {
	margin: 36px 0 12px;
	color: #475569;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* One version: number, date and what it holds, then its lines grouped New / Better / Fixed ... */
.dts-cl-version {
	margin: 0 0 12px;
	padding: 24px 26px;
	border-radius: 16px;
	background: #f5f8fd;
}

.dts-cl-vhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: 0;
}

.dts-cl-num {
	color: #0a1929;
	font-size: 20px;
	font-weight: 800;
}

.dts-cl-vhead time,
.dts-cl-counts {
	color: #64748b;
	font-size: 14px;
	font-weight: 500;
}

.dts-cl-group {
	margin: 20px 0 0;
}

.dts-cl-group-label {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #eef2f7;
	color: #475569;
}

.dts-cl-group--new .dts-cl-group-label {
	background: #e3f6ec;
	color: #0b6b3c;
}

.dts-cl-group--fix .dts-cl-group-label {
	background: #e6efff;
	color: #0047b3;
}

.dts-cl-group--security .dts-cl-group-label {
	background: #fdeaea;
	color: #a61b12;
}

.dts-cl-group--dev .dts-cl-group-label {
	background: #f1ecfd;
	color: #5b21b6;
}

.dts-cl-group ul {
	margin: 0;
	padding: 0 0 0 20px;
}

.dts-cl-group li {
	margin: 0 0 9px;
	color: #334155;
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.dts-cl-group li:last-child {
	margin-bottom: 0;
}

.dts-cl-group li::marker {
	color: #94a3b8;
}

/* An older version, closed behind its line; a click opens it. */
.dts-cl-version--closed {
	padding: 0;
}

.dts-cl-version--closed > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 26px;
	border-radius: 16px;
	cursor: pointer;
	list-style: none;
}

.dts-cl-version--closed > summary::-webkit-details-marker {
	display: none;
}

.dts-cl-version--closed > summary::after {
	content: '+';
	flex: 0 0 auto;
	color: #0066ff;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
}

.dts-cl-version--closed[open] > summary::after {
	content: '\2212';
}

.dts-cl-version--closed > summary:focus {
	outline: none;
}

.dts-cl-version--closed > summary:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.3);
}

.dts-cl-version--closed > summary:hover {
	background: #edf3fc;
}

.dts-cl-version--closed .dts-cl-num {
	font-size: 17px;
}

.dts-cl-version--closed[open] {
	padding: 0 0 24px;
}

.dts-cl-version--closed[open] > .dts-cl-group {
	margin-left: 26px;
	margin-right: 26px;
}

[data-dts-cl-item][hidden] {
	display: none !important;
}

/* One plugin at a time, picked from a row of tabs (design A, his pick 16 Oct 2026). */
.dts-cl-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 48px;
}

.dts-cl-tab,
.dts-cl-tab:visited {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 150px;
	padding: 12px 18px;
	border-radius: 14px;
	background: #eef4ff;
	color: #0a1929;
	text-decoration: none;
	transition: background 0.2s ease;
}

.dts-cl-tab:hover {
	background: #dfeaff;
	color: #0a1929;
}

.dts-cl-tab-name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.dts-cl-tab-ver {
	color: #475569;
	font-size: 13px;
}

.dts-cl-tab.is-active,
.dts-cl-tab.is-active:hover {
	background: #0066ff;
	color: #ffffff;
}

.dts-cl-tab.is-active .dts-cl-tab-ver {
	color: rgba(255, 255, 255, 0.82);
}

.dts-cl-tab:focus {
	outline: none;
}

.dts-cl-tab:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.3);
}

@media (max-width: 968px) {
	.dts-cl-body {
		--dts-cl-land: 135px;
	}
}

@media screen and (max-width: 782px) {
	.admin-bar .dts-cl-body {
		--dts-cl-bar: 46px;
	}
}

@media (max-width: 768px) {
	.dts-cl-body {
		--dts-cl-land: 118px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .dts-cl-body {
		--dts-cl-bar: 0px;
	}
}

@media (max-width: 480px) {
	.dts-cl-body {
		--dts-cl-land: 110px;
	}
}

@media (max-width: 640px) {
	.dts-cl-product .dts-facts.dts-facts {
		margin: 16px 0 36px;
	}

	.dts-cl-hero {
		padding: 128px 16px 48px;
	}

	.dts-cl-lead {
		font-size: 16px;
	}

	.dts-cl-body {
		padding: 36px 16px 72px;
	}

	.dts-cl-product-head h2 {
		font-size: 24px;
	}

	.dts-cl-version {
		padding: 18px 16px;
	}

	.dts-cl-version--closed {
		padding: 0;
	}

	.dts-cl-version--closed > summary {
		padding: 15px 16px;
	}

	.dts-cl-version--closed[open] > .dts-cl-group {
		margin-left: 16px;
		margin-right: 16px;
	}

	.dts-cl-group li {
		font-size: 14.5px;
	}

	.dts-cl-tabs {
		gap: 8px;
		margin-bottom: 36px;
	}

	.dts-cl-tab,
	.dts-cl-tab:visited {
		flex: 1 1 calc(50% - 8px);
		min-width: 0;
		padding: 10px 14px;
	}

	.dts-cl-tab-name {
		font-size: 14px;
	}
}