/* =============================================================================
   Download Manager — Front-end CSS
   Uses CSS custom properties injected inline by PHP (DM_Shortcode).
   ============================================================================= */

/* ─── Container ──────────────────────────────────────────────────────────────*/
.dm-container {
	max-width  : 1200px;
	margin     : 0 auto;
	padding    : 0 16px 40px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	             'Helvetica Neue', Arial, sans-serif;
	box-sizing : border-box;
}

.dm-container *,
.dm-container *::before,
.dm-container *::after {
	box-sizing: inherit;
}

/* ─── Search bar ─────────────────────────────────────────────────────────────*/
.dm-search-wrap {
	position     : relative;
	max-width    : 500px;
	margin       : 0 auto 36px;
}

.dm-search-icon {
	position      : absolute;
	left          : 16px;
	top           : 50%;
	transform     : translateY(-50%);
	width         : 20px;
	height        : 20px;
	pointer-events: none;
	z-index       : 1;
	display       : block;
	overflow      : visible;
	fill          : none;
	stroke        : #9ba3ae;
}

.dm-search-input {
	width          : 100%;
	padding        : 14px 20px 14px 48px !important;
	border         : 2px solid #e5e7eb !important;
	border-radius  : 12px !important;
	font-size      : 15px;
	color          : #1d2327;
	background     : #fff !important;
	transition     : border-color 0.2s ease, box-shadow 0.2s ease;
	appearance     : none;
	-webkit-appearance: none;
	outline        : none !important;
	box-shadow     : 0 1px 3px rgba(0,0,0,0.06) !important;
}

.dm-search-input:focus {
	outline     : none !important;
	border-color: var(--dm-primary-color) !important;
	box-shadow  : 0 0 0 4px color-mix(in srgb, var(--dm-primary-color) 12%, transparent), 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.dm-search-input:focus {
		box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
	}
}

.dm-search-input::placeholder {
	color: #9ba3ae;
}

/* ─── Cards grid ─────────────────────────────────────────────────────────────*/

/* Mobile first: 2 columns always */
.dm-grid {
	display              : grid;
	grid-template-columns: repeat(2, 1fr);
	gap                  : 20px;
	transition           : opacity 0.25s ease;
}

/* Desktop: 4 columns */
@media (min-width: 1025px) {
	.dm-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ─── Card ───────────────────────────────────────────────────────────────────*/
.dm-card {
	background   : #ffffff;
	border-radius: 12px;
	overflow     : hidden;
	box-shadow   : 0 2px 10px rgba(0, 0, 0, 0.07);
	display      : flex;
	flex-direction: column;
	transition   : box-shadow 0.25s ease, transform 0.25s ease;
	role         : listitem;
}

.dm-card:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	transform : translateY(-4px);
}

/* ── Card image (3:4 ratio) ── */
.dm-card__image-wrap {
	aspect-ratio: 3 / 4;
	overflow    : hidden;
	flex-shrink : 0;
	display     : block;
	background  : #f3f4f6;
	position    : relative;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 3 / 4) {
	.dm-card__image-wrap {
		padding-top: 133.33%; /* 4/3 = 133.33% */
	}
	.dm-card__image-wrap .dm-card__image {
		position: absolute;
		top: 0;
		left: 0;
	}
}

.dm-card__image {
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	display    : block;
	transition : transform 0.35s ease;
}

.dm-card:hover .dm-card__image {
	transform: scale(1.05);
}

/* ── Card body ── */
.dm-card__body {
	padding       : 14px 16px 16px;
	display       : flex;
	flex-direction: column;
	flex          : 1;
	gap           : 12px;
}

/* ── Card title (max 2 lines) ── */
.dm-card__title {
	margin          : 0;
	font-size       : 14px;
	font-weight     : 600;
	color           : #1d2327;
	text-align      : center;
	line-height     : 1.5;
	/* 2-line clamp */
	display         : -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow        : hidden;
	/* Reserve height for exactly 2 lines to keep cards aligned */
	min-height      : calc(14px * 1.5 * 2);
}

/* ── Download button ── */
.dm-card__btn {
	display        : block;
	width          : 100%;
	padding        : 11px 16px;
	background     : var(--dm-primary-color) !important;
	color          : var(--dm-text-color) !important;
	border         : none !important;
	border-radius  : 8px;
	font-size      : 14px;
	font-weight    : 600;
	text-align     : center;
	text-decoration: none !important;
	cursor         : pointer;
	margin-top     : auto;
	transition     : background-color 0.2s ease, transform 0.15s ease,
	                 box-shadow 0.2s ease;
	line-height    : 1.4;
}

.dm-card__btn:visited {
	color: var(--dm-text-color) !important;
}

.dm-card__btn:hover {
	background-color: var(--dm-hover-color) !important;
	color           : var(--dm-text-color) !important;
	transform       : translateY(-1px);
	box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.2);
	text-decoration : none !important;
}

.dm-card__btn:active {
	transform : translateY(0);
	box-shadow: none;
}

.dm-card__btn--disabled {
	background    : #e5e7eb;
	color         : #9ba3ae;
	cursor        : default;
	pointer-events: none;
}

.dm-card__btn--disabled:hover {
	background: #e5e7eb;
	transform : none;
	box-shadow: none;
}

/* ─── Loading spinner ────────────────────────────────────────────────────────*/
.dm-loader {
	display        : none;
	justify-content: center;
	align-items    : center;
	gap            : 12px;
	padding        : 48px 0;
	color          : #787c82;
	font-size      : 14px;
}

.dm-loader__spinner {
	width        : 26px;
	height       : 26px;
	border       : 3px solid #e5e7eb;
	border-top-color: var(--dm-primary-color);
	border-radius: 50%;
	animation    : dm-spin 0.7s linear infinite;
	flex-shrink  : 0;
}

@keyframes dm-spin {
	to { transform: rotate(360deg); }
}

/* ─── No-results state ───────────────────────────────────────────────────────*/
.dm-no-results {
	display    : none;
	text-align : center;
	padding    : 56px 0;
	color      : #787c82;
}

.dm-no-results__icon {
	font-size     : 52px;
	margin-bottom : 12px;
	opacity       : 0.5;
	display       : block;
}

.dm-no-results p {
	font-size  : 16px;
	margin     : 0;
}

/* ─── Error state ────────────────────────────────────────────────────────────*/
.dm-error {
	text-align   : center;
	color        : #cc1818;
	padding      : 24px 20px;
	background   : #fef2f2;
	border-radius: 10px;
	font-size    : 15px;
	grid-column  : 1 / -1;
	border       : 1px solid #fecaca;
}

/* ─── Pagination ─────────────────────────────────────────────────────────────*/
.dm-pagination {
	display        : flex;
	justify-content: center;
	flex-wrap      : wrap;
	gap            : 8px;
	margin-top     : 40px;
}

.dm-page-btn {
	min-width    : 42px;
	height       : 42px;
	padding      : 0 14px;
	background   : #ffffff;
	color        : #3c434a;
	border       : 2px solid #e5e7eb;
	border-radius: 8px;
	font-size    : 14px;
	font-weight  : 500;
	cursor       : pointer;
	transition   : background 0.15s ease, color 0.15s ease,
	               border-color 0.15s ease, transform 0.1s ease;
	line-height  : 1;
}

.dm-page-btn:hover {
	border-color: var(--dm-primary-color);
	color       : var(--dm-primary-color);
	transform   : translateY(-1px);
}

.dm-page-btn--active {
	background  : var(--dm-primary-color);
	color       : var(--dm-text-color);
	border-color: var(--dm-primary-color);
	cursor      : default;
}

.dm-page-btn--active:hover {
	color    : var(--dm-text-color);
	transform: none;
}

.dm-page-ellipsis {
	display    : inline-flex;
	align-items: center;
	height     : 42px;
	padding    : 0 6px;
	color      : #98a2b3;
	font-size  : 14px;
	user-select: none;
}

/* ─── Accessibility: focus rings ─────────────────────────────────────────────*/
.dm-page-btn:focus-visible,
.dm-card__btn:focus-visible,
.dm-filter-chk:focus-visible,
.dm-btn-clear-filters:focus-visible {
	outline       : 3px solid var(--dm-primary-color);
	outline-offset: 2px;
}

/* ─── Utility ────────────────────────────────────────────────────────────────*/
.dm-hidden {
	display: none !important;
}

/* ─── Layout: sidebar + main ─────────────────────────────────────────────────*/
.dm-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.dm-sidebar {
	flex-shrink: 0;
	width: 220px;
}

.dm-main {
	flex: 1;
	min-width: 0;
}

/* ─── Filter groups ──────────────────────────────────────────────────────────*/
.dm-filter-group {
	margin-bottom: 28px;
}

.dm-filter-group__label {
	font-size    : 13px;
	font-weight  : 700;
	color        : var(--dm-primary-color);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin       : 0 0 10px;
}

/* ─── Filter checkbox items ──────────────────────────────────────────────────*/
.dm-filter-item {
	display    : flex;
	align-items: center;
	gap        : 8px;
	cursor     : pointer;
	padding    : 4px 0;
	font-size  : 14px;
	color      : #3c434a;
	user-select: none;
	line-height: 1.4;
}

.dm-filter-item:hover {
	color: var(--dm-primary-color);
}

.dm-filter-chk {
	appearance        : none;
	-webkit-appearance: none;
	width             : 18px;
	height            : 18px;
	border            : 2px solid #d1d5db;
	border-radius     : 4px;
	flex-shrink       : 0;
	cursor            : pointer;
	transition        : background 0.15s ease, border-color 0.15s ease;
	position          : relative;
	margin            : 0;
}

.dm-filter-chk:checked {
	background  : var(--dm-primary-color);
	border-color: var(--dm-primary-color);
}

.dm-filter-chk:checked::after {
	content    : '';
	position   : absolute;
	left       : 4px;
	top        : 1px;
	width      : 6px;
	height     : 10px;
	border     : 2px solid #fff;
	border-top : none;
	border-left: none;
	transform  : rotate(45deg);
}

/* ─── Clear filters button ───────────────────────────────────────────────────*/
.dm-btn-clear-filters {
	display      : block;
	width        : 100%;
	padding      : 10px 16px;
	background   : var(--dm-primary-color);
	color        : var(--dm-text-color);
	border       : none;
	border-radius: 8px;
	font-size    : 13px;
	font-weight  : 700;
	letter-spacing: 0.04em;
	cursor       : pointer;
	margin-top   : 8px;
	transition   : background-color 0.2s ease;
}

.dm-btn-clear-filters:hover {
	background-color: var(--dm-hover-color);
}

/* ─── Grid inside main (3 columns desktop, 2 tablet/mobile) ──────────────────*/
.dm-main .dm-grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
	.dm-main .dm-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ─── Responsive: sidebar collapses above grid on small screens ──────────────*/
@media (max-width: 767px) {
	.dm-layout {
		flex-direction: column;
	}

	.dm-sidebar {
		width: 100%;
	}

	.dm-filter-group {
		margin-bottom: 16px;
	}

	/* Two columns side by side on mobile */
	.dm-filters {
		display              : grid;
		grid-template-columns: 1fr 1fr;
		gap                  : 0 24px;
	}

	.dm-btn-clear-filters {
		max-width: 200px;
	}
}

/* ─── Lightbox ───────────────────────────────────────────────────────────────*/
.dm-lightbox {
	position       : fixed;
	inset          : 0;
	background     : rgba(0, 0, 0, 0.9);
	display        : flex;
	align-items    : center;
	justify-content: center;
	z-index        : 99999;
	opacity        : 0;
	overflow       : hidden;
	transition     : opacity 0.2s ease;
}

.dm-lightbox--open {
	opacity: 1;
}

.dm-lightbox__img {
	/* Scale up small images to at least 60% of the viewport */
	width      : min(90vw, max(60vw, 100%));
	height     : min(85vh, max(60vh, 100%));
	object-fit : contain;
	display    : block;
	transform  : scale(0.95);
	transition : transform 0.25s ease;
	user-select: none;
	-webkit-user-select: none;
}

.dm-lightbox--open .dm-lightbox__img {
	transform: scale(1);
}

/* Toolbar: 4 icon buttons in the top-right corner */
.dm-lightbox__toolbar {
	position: fixed;
	top     : 12px;
	right   : 12px;
	display : flex;
	gap     : 6px;
	z-index : 100000;
}

.dm-lightbox__btn {
	width          : 42px;
	height         : 42px;
	background     : rgba(0, 0, 0, 0.55);
	border         : 1px solid rgba(255, 255, 255, 0.2);
	border-radius  : 6px;
	color          : #ffffff;
	cursor         : pointer;
	display        : flex;
	align-items    : center;
	justify-content: center;
	padding        : 0;
	flex-shrink    : 0;
	transition     : background 0.15s ease, border-color 0.15s ease;
}

.dm-lightbox__btn svg {
	width      : 18px;
	height     : 18px;
	display    : block;
	flex-shrink: 0;
}

.dm-lightbox__btn:hover {
	background  : rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.45);
}

.dm-lightbox__btn:focus-visible {
	outline       : 2px solid #ffffff;
	outline-offset: 2px;
}