/* Screenshot gallery on the download file page (theme template downloads/front/view/view) */

.dlGallery {
	--dlg-accent: #2f6fdc;
	--dlg-border: color-mix(in srgb, currentColor 16%, transparent);
	--dlg-soft: color-mix(in srgb, currentColor 6%, transparent);
	padding: 16px;
	border-bottom: 1px solid var(--dlg-border);
}
.dlGallery * { box-sizing: border-box; }

.dlGallery__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Fixed proportions: the block does not change size when another image is shown */
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 560px;
	border-radius: 12px;
	background: var(--dlg-soft);
	overflow: hidden;
	outline: none;
}
.dlGallery__stage:focus-visible { box-shadow: 0 0 0 2px var(--dlg-accent); }

.dlGallery__slide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 0; cursor: zoom-in; }
.dlGallery__slide[hidden] { display: none; }
.dlGallery__slide img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.dlGallery__counter {
	position: absolute;
	right: 14px;
	bottom: 12px;
	padding: 3px 12px;
	border-radius: 20px;
	background: rgba(15, 23, 42, .72);
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	pointer-events: none;
}

.dlGallery__nav, .dlGallery__more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, .6);
	color: #fff;
	cursor: pointer;
}
.dlGallery__nav { position: absolute; top: 50%; width: 38px; height: 38px; transform: translateY(-50%); opacity: 0; transition: opacity .15s; }
.dlGallery__nav--prev { left: 12px; }
.dlGallery__nav--next { right: 12px; }
.dlGallery__stage:hover .dlGallery__nav, .dlGallery__nav:focus-visible { opacity: 1; }
.dlGallery__nav:hover, .dlGallery__more:hover { background: rgba(15, 23, 42, .85); }

.dlGallery__stripWrap { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dlGallery__strip {
	display: flex;
	flex: 1;
	gap: 10px;
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.dlGallery__strip::-webkit-scrollbar { display: none; }

.dlGallery__thumb {
	flex: none;
	width: 92px;
	height: 68px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	background: var(--dlg-soft);
	overflow: hidden;
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s, border-color .15s;
}
.dlGallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dlGallery__thumb:hover { opacity: 1; }
.dlGallery__thumb.is-active { border-color: var(--dlg-accent); opacity: 1; }

.dlGallery__more { flex: none; width: 36px; height: 36px; }

@media (max-width: 640px) {
	.dlGallery { padding: 10px; }
	.dlGallery__stage { aspect-ratio: 4 / 3; }
	.dlGallery__nav { opacity: 1; width: 32px; height: 32px; }
	.dlGallery__thumb { width: 72px; height: 54px; }
}


/* The stock "screenshots" block is empty once the gallery has been moved into the left column (see file-gallery.js) */
[data-ips-hook='screenshots'] { display: none; }
section:has( > [data-ips-hook='screenshots'] ) { display: none; }

/* ---- Price block above the download button ---- */
.dlPrice {
	--dlp-accent: #2f6fdc;
	--dlp-border: color-mix(in srgb, currentColor 14%, transparent);
	margin-bottom: 14px;
	padding: 16px 18px;
	border: 1px solid var(--dlp-border);
	border-radius: 12px;
	background: color-mix(in srgb, currentColor 4%, transparent);
}
.dlPrice__label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 58%, transparent);
}
.dlPrice__value { display: block; margin-top: 2px; font-size: 32px; font-weight: 800; line-height: 1.15; }
.dlPrice__renew {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--dlp-border);
	font-size: 14px;
}
.dlPrice__renewLabel { display: flex; align-items: center; gap: 8px; color: color-mix(in srgb, currentColor 65%, transparent); }
.dlPrice__renewLabel i { color: var(--dlp-accent); }
.dlPrice__renewValue { font-weight: 700; white-space: nowrap; }
.dlPrice__renewValue small { font-weight: 500; color: color-mix(in srgb, currentColor 60%, transparent); }

/* the old "price · renewal" line under the page title is replaced by the block above */
.ipsPageHeader__primary p:has( > .cFilePrice ) { display: none; }
/* ---- Tabs: Description / Changelog / Reviews / Comments (built by file-gallery.js) ---- */
.dlTabsOn > i-tabs#ipsTabs_file { display: none; }

.dlTabs {
	display: flex;
	gap: 6px;
	padding: 12px 16px;
	border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	overflow-x: auto;
	scrollbar-width: none;
}
.dlTabs::-webkit-scrollbar { display: none; }

.dlTabs__tab {
	flex: none;
	padding: 8px 16px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: color-mix(in srgb, currentColor 65%, transparent);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.dlTabs__tab:hover { color: currentColor; background: color-mix(in srgb, currentColor 7%, transparent); }
.dlTabs__tab[aria-selected="true"] { background: #111827; color: #fff; }
[data-ips-scheme="dark"] .dlTabs__tab[aria-selected="true"] { background: #e5e7eb; color: #111827; }

.dlPanel[hidden] { display: none; }
.dlPanel--changelog { padding: 16px; }
.dlPanel--changelog > section { margin-top: 0 !important; }

/* the reviews + comments box keeps working, only its own tab bar is replaced by ours */
.dlPanel--feedback .ipsBox--reviews-comments { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.dlPanel--feedback .ipsBox--reviews-comments > i-tabs { display: none; }

@media (max-width: 640px) {
	.dlTabs { padding: 10px; }
	.dlTabs__tab { padding: 8px 12px; }
}

/* Additional fields in the "File information" block are re-rendered by a theme hook with a per-field icon:
   hide the stock rows (they all use the generic fa-list icon) */
[data-ips-hook="downloadsFileStats"] > li:has( > i.fa-list ):not( [data-dl-field] ) { display: none; }

/* ---- Views / purchases in the author row (moved from the "File information" block) ---- */
.dlStats {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
	color: color-mix(in srgb, currentColor 60%, transparent);
	font-size: .95em;
	white-space: nowrap;
}
.dlStats > li { display: flex; align-items: center; gap: 6px; margin: 0; }
.ipsPageHeader__primary:has( .dlStats ) { flex: 1 1 auto; }
.ipsPageHeader__primary:has( .dlStats ) .ipsPhotoPanel { width: 100%; }

[data-ips-hook="downloadsFileStats"] > li:has( > i.fa-eye ),
[data-ips-hook="downloadsFileStats"] > li:has( > i.fa-cart-shopping ) { display: none; }

/* Rating moved into the author row: hide the stock rating under the title */
.ipsPageHeader:has( .dlStats ) .ipsPageHeader__rating { display: none; }
.dlStats__rating { display: flex; align-items: center; gap: 8px; }
.dlStats__rating a { color: #2f6fdc; text-decoration: none; }
.dlStats__rating a:hover { text-decoration: underline; }

/* Price block: support / updates / renewal rows */
.dlPrice__rows {
	display: grid;
	gap: 10px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--dlp-border);
	font-size: 14px;
}
.dlPrice__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dlPrice__row .dlPrice__renewLabel i { width: 16px; text-align: center; }

/* Price block: dashed separators between the rows, same style as the line above them */
.dlPrice__rows { gap: 0; padding-top: 0; }
.dlPrice__row { padding: 10px 0; }
.dlPrice__row:last-child { padding-bottom: 0; }
.dlPrice__row + .dlPrice__row { border-top: 1px dashed var(--dlp-border); }

/* ---- Version / IonCube chips above the price (small, unobtrusive) ---- */
.dlChips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dlChip {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 8px;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: color-mix(in srgb, currentColor 72%, transparent);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

/* ---- "Support" button: the stock one is a plain text link. Give it the same look as the grey "inherit" buttons
   (uses the theme's own button variables, so radius, padding and colours match the other buttons) ---- */
[data-ips-hook="downloadButtonList"] .ipsButton--text {
	--i-button--co: currentColor;
	--i-button--bo-co: transparent;
	--i-button--ba-co: color-mix(in srgb, var(--i-button--co) 10%, transparent);
	--i-button-hover--ba-co: color-mix(in srgb, var(--i-button--co) 15%, transparent);
}

/* Free file: compact "Free" card */
.dlPrice--free .dlPrice__value { font-size: 26px; }

/* Support: a link at the end of the tab bar; the stock button in the right column is hidden once it has been moved */
.dlTabs__link {
	display: inline-flex;
	align-items: center;
	flex: none;
	gap: 8px;
	margin-left: auto;
	padding: 8px 14px;
	border-radius: 8px;
	color: color-mix(in srgb, currentColor 65%, transparent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
.dlTabs__link:hover { color: currentColor; background: color-mix(in srgb, currentColor 7%, transparent); text-decoration: none; }
.dlSupportMoved [data-ips-hook="downloadButtonList"] > li:has( > a.ipsButton--text ) { display: none; }

/* Support link: permanently highlighted in grey (same as the hover state of the tabs) */
.dlTabs__link { background: color-mix(in srgb, currentColor 7%, transparent); color: currentColor; }
.dlTabs__link:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Rating in the author row: filled stars are always yellow, empty ones grey */
.dlStats__rating .ipsRating_on,
.dlStats__rating .ipsRating_on i { color: #f5b301; }
.dlStats__rating .ipsRating_half,
.dlStats__rating .ipsRating_half i { color: #f5b301; }
.dlStats__rating .ipsRating_off,
.dlStats__rating .ipsRating_off i { color: color-mix(in srgb, currentColor 25%, transparent); }

/* ---- Promo price: struck-through regular price, sale price in red ---- */
.dlPrice__badge {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 8px;
	border-radius: 6px;
	background: #dc2626;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	vertical-align: middle;
}
.dlPrice__old {
	display: block;
	margin-top: 4px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	color: color-mix(in srgb, currentColor 55%, transparent);
	text-decoration: line-through;
}
.dlPrice--sale .dlPrice__old + .dlPrice__value { margin-top: 0; }
.dlPrice__value--sale { color: #dc2626; }

/* "Unlimited" support / updates (no renewal term): a larger infinity sign */
.dlPrice__infinity { font-size: 20px; line-height: 1; }

/* Author row stats (rating, purchases, views): larger and more readable */
.dlStats {
	gap: 24px;
	font-size: 16px;
	font-weight: 500;
	color: color-mix(in srgb, currentColor 78%, transparent);
}
.dlStats > li { gap: 8px; }
.dlStats > li > i { font-size: 18px; }
.dlStats__rating { gap: 10px; }
.dlStats__rating a { font-weight: 600; }

/* Stars: let the theme lay out its own overlay of star icons; only scale the whole widget */
.dlStats__rating .ipsRating { font-size: .95em; margin: 0; }

/* Full-height vertical dividers between the author row items.
   The row's own vertical padding is moved inside the primary block so the lines can reach the top and bottom edges. */
.ipsPageHeader__row--footer:has( .dlStats ) { --dl-pad: 16px; padding-block: 0; }
.ipsPageHeader__primary:has( .dlStats ) { align-self: stretch; display: flex; padding-block: var(--dl-pad); }
.ipsPageHeader__primary:has( .dlStats ) .ipsPhotoPanel { flex: 1 1 auto; }
.dlStats {
	align-self: stretch;
	margin-block: calc( var(--dl-pad, 16px) * -1 );
	margin-inline-start: auto;
	gap: 0;
}
.dlStats > li {
	align-self: stretch;
	padding-inline: 22px;
	border-inline-start: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.dlStats > li:last-child { padding-inline-end: 0; }

@media (max-width: 640px) {
	.dlStats > li { padding-inline: 12px; }
	.dlStats { font-size: 14px; }
}