/* DJ DigiMark Library — frontend styles. Dark cinematic, scoped under .djdigi-library
 * to keep theme bleed-through to a minimum. */

.djdigi-library {
	--djdigi-bg: #0E1116;
	--djdigi-card-bg: #161B22;
	--djdigi-card-border: #232A35;
	--djdigi-text-primary: #FFFFFF;
	--djdigi-text-secondary: #B8C0CC;
	--djdigi-text-muted: #8B95A3;
	--djdigi-text-dim: #5A6573;
	--djdigi-accent-gold: #C8B068;
	--djdigi-accent-gold-light: #E8D08C;
	--djdigi-accent-gold-border: #5A4A28;
	--djdigi-button-bg: #FFFFFF;
	--djdigi-button-text: #0E1116;
	--djdigi-input-bg: #1A1F27;
	--djdigi-toggle-active-bg: #2B3340;
	--djdigi-pill-blue: rgba(110,140,200,0.15);
	--djdigi-pill-blue-text: #8FA8D4;
	--djdigi-pill-pink: rgba(200,110,180,0.15);
	--djdigi-pill-pink-text: #D48FBC;
	--djdigi-pill-green: rgba(110,200,160,0.15);
	--djdigi-pill-green-text: #8FD4B0;

	background: var(--djdigi-bg);
	border-radius: 14px;
	padding: 1.75rem;
	color: var(--djdigi-text-primary);
	font-size: 14px;
	line-height: 1.4;
	box-sizing: border-box;
}

.djdigi-library *,
.djdigi-library *::before,
.djdigi-library *::after {
	box-sizing: border-box;
}

/* ----- Controls (toggle + search) ------------------------------------- */

.djdigi-library .djdigi-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

/* Pill-shaped toggle with a sliding gold indicator that physically moves
 * between Videos and Music positions. The active button's background is
 * actually the absolutely-positioned ::before slider underneath. */

.djdigi-library .djdigi-toggle {
	position: relative;
	display: inline-flex;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 999px;
	padding: 5px;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.djdigi-library .djdigi-toggle::before {
	content: '';
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 5px;
	width: calc(50% - 5px);
	border-radius: 999px;
	background: linear-gradient(180deg, #f8f4e8 0%, #d4c4a0 100%);
	box-shadow:
		0 4px 16px rgba(200,176,104,0.25),
		0 2px 4px rgba(0,0,0,0.4),
		inset 0 1px 0 rgba(255,255,255,0.4);
	transform: translateX(0);
	transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
	z-index: 0;
	pointer-events: none;
}

.djdigi-library .djdigi-toggle.djdigi-toggle--music::before {
	transform: translateX(100%);
}

.djdigi-library .djdigi-toggle button {
	position: relative;
	z-index: 1;
	background: transparent;
	border: 0;
	color: rgba(255,255,255,0.55);
	padding: 11px 32px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: color 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.djdigi-library .djdigi-toggle button svg {
	width: 16px;
	height: 16px;
	display: block;
	flex-shrink: 0;
	fill: currentColor;
}

.djdigi-library .djdigi-toggle button:hover:not(.active) {
	color: rgba(255,255,255,0.85);
}

.djdigi-library .djdigi-toggle button.active {
	color: #1a1612;
}

.djdigi-library .djdigi-search {
	position: relative;
	flex: 0 1 320px;
}

.djdigi-library .djdigi-search-input {
	width: 100%;
	background: var(--djdigi-input-bg);
	border: 1px solid var(--djdigi-card-border);
	border-radius: 8px;
	color: var(--djdigi-text-primary);
	font-size: 13px;
	padding: 8px 12px 8px 36px;
	font-family: inherit;
	outline: none;
	transition: border-color 120ms ease;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A3' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 14px;
}

.djdigi-library .djdigi-search-input::placeholder {
	color: var(--djdigi-text-dim);
}

.djdigi-library .djdigi-search-input:focus {
	border-color: var(--djdigi-accent-gold-border);
}

/* ----- Tables --------------------------------------------------------- */

.djdigi-library .djdigi-table {
	margin-bottom: 1rem;
}

.djdigi-library .djdigi-table-header,
.djdigi-library .djdigi-row {
	display: grid;
	gap: 1rem;
	align-items: center;
}

.djdigi-library .djdigi-table--videos .djdigi-table-header,
.djdigi-library .djdigi-table--videos .djdigi-row {
	grid-template-columns: minmax(120px, 1.4fr) minmax(180px, 2fr) 110px 80px 140px;
}

.djdigi-library .djdigi-table--music .djdigi-table-header,
.djdigi-library .djdigi-table--music .djdigi-row {
	grid-template-columns: minmax(120px, 1.4fr) minmax(180px, 2fr) 130px 110px minmax(220px, 1fr) 140px;
}

.djdigi-library .djdigi-table-header {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--djdigi-text-muted);
	padding: 0 14px 10px;
	border-bottom: 1px solid var(--djdigi-card-border);
	margin-bottom: 6px;
}

.djdigi-library .djdigi-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.djdigi-library .djdigi-row {
	background: var(--djdigi-card-bg);
	border: 1px solid var(--djdigi-card-border);
	border-radius: 8px;
	padding: 14px;
	transition: border-color 120ms ease, background 120ms ease;
}

.djdigi-library .djdigi-row:hover {
	border-color: #2d3543;
	background: #181d25;
}

.djdigi-library .djdigi-cell {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.djdigi-library .djdigi-cell--artist {
	color: var(--djdigi-text-primary);
	font-weight: 500;
}

.djdigi-library .djdigi-cell--title {
	color: var(--djdigi-text-secondary);
}

.djdigi-library .djdigi-cell--date {
	color: var(--djdigi-text-muted);
	font-size: 12px;
}

.djdigi-library .djdigi-cell--action {
	display: flex;
	justify-content: flex-end;
	/* Override .djdigi-cell's overflow:hidden — that ellipsis-truncation rule
	 * was clipping the right edge of the Download button when its hover scale
	 * fired. Action cell has no text to truncate, so visible is safe. */
	overflow: visible;
	/* Buffer so even if an Avada parent column clips, the visual scale-up has
	 * room to breathe before reaching the parent's clipping boundary.
	 * Bumped 4px → 8px after reports of recurring clipping on the locked
	 * (gold-bordered) variant in the table rows. */
	padding-right: 8px;
}

.djdigi-library .djdigi-no-preview {
	color: var(--djdigi-text-dim);
}

/* ----- Pills (music type) -------------------------------------------- */

.djdigi-library .djdigi-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.djdigi-library .djdigi-pill--reedit {
	background: var(--djdigi-pill-blue);
	color: var(--djdigi-pill-blue-text);
}

.djdigi-library .djdigi-pill--mashup {
	background: var(--djdigi-pill-pink);
	color: var(--djdigi-pill-pink-text);
}

.djdigi-library .djdigi-pill--megamix {
	background: var(--djdigi-pill-green);
	color: var(--djdigi-pill-green-text);
}

.djdigi-library .djdigi-pill--generic {
	background: rgba(255,255,255,0.05);
	color: var(--djdigi-text-secondary);
}

/* ----- Buttons: shared base ------------------------------------------ */
/* Both library rows AND lightbox actions use these as their shared shape. */

.djdigi-library .djdigi-btn,
.djdigi-lightbox .djdigi-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
	white-space: nowrap;
}

/* Library (table row) variants — original look. */

.djdigi-library .djdigi-btn--download {
	background: transparent;
	border: 1px solid rgba(120,200,140,0.4);
	color: #7ec88c;
}

.djdigi-library .djdigi-btn--download:hover,
.djdigi-library .djdigi-btn--download:focus {
	background: rgba(120,200,140,0.08);
	border-color: rgba(120,200,140,0.6);
	color: #9fd4ad;
}

.djdigi-library .djdigi-btn--access {
	background: transparent;
	border-color: var(--djdigi-accent-gold-border, #5A4A28);
	color: var(--djdigi-accent-gold, #C8B068);
}

.djdigi-library .djdigi-btn--access:hover,
.djdigi-library .djdigi-btn--access:focus {
	background: rgba(200,176,104,0.08);
	color: var(--djdigi-accent-gold-light, #E8D08C);
	border-color: var(--djdigi-accent-gold, #C8B068);
}

.djdigi-library .djdigi-lock {
	font-size: 11px;
}

/* ----- Preview thumbnails (video) ------------------------------------ */

.djdigi-library .djdigi-preview {
	position: relative;
	width: 64px;
	height: 36px;
	border-radius: 5px;
	border: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	background: #000;
	display: inline-block;
}

.djdigi-library .djdigi-preview img,
.djdigi-library .djdigi-preview video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #000;
}

.djdigi-library .djdigi-preview--placeholder {
	background: linear-gradient(135deg, #1c2330 0%, #0e1116 100%);
	border: 1px solid var(--djdigi-card-border);
}

.djdigi-library .djdigi-preview-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 100%);
	transition: background 120ms ease;
}

.djdigi-library .djdigi-preview:hover .djdigi-preview-play {
	background: rgba(0,0,0,0.5);
}

/* ----- Audio mini-player --------------------------------------------- */

.djdigi-library .djdigi-audio {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--djdigi-input-bg);
	border: 1px solid var(--djdigi-card-border);
	border-radius: 6px;
	padding: 6px 10px;
	min-width: 220px;
	max-width: 100%;
}

.djdigi-library .djdigi-audio-play {
	background: transparent;
	border: 0;
	color: var(--djdigi-accent-gold);
	font-size: 14px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background 120ms ease;
}

.djdigi-library .djdigi-audio-play:hover {
	background: rgba(200,176,104,0.12);
}

.djdigi-library .djdigi-audio-track {
	flex: 1;
	height: 4px;
	background: rgba(255,255,255,0.08);
	border-radius: 2px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	min-width: 60px;
}

.djdigi-library .djdigi-audio-progress {
	height: 100%;
	background: var(--djdigi-accent-gold);
	width: 0%;
	border-radius: 2px;
	transition: width 100ms linear;
}

.djdigi-library .djdigi-audio-time {
	font-size: 11px;
	color: var(--djdigi-text-muted);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* ----- Pagination ---------------------------------------------------- */

.djdigi-library .djdigi-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 1.25rem;
}

.djdigi-library .djdigi-page-list {
	display: inline-flex;
	gap: 4px;
}

.djdigi-library .djdigi-page {
	background: var(--djdigi-input-bg);
	border: 1px solid var(--djdigi-card-border);
	color: var(--djdigi-text-secondary);
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
	cursor: pointer;
	font-family: inherit;
	min-width: 32px;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.djdigi-library .djdigi-page:hover:not(:disabled) {
	background: #20262f;
	color: var(--djdigi-text-primary);
	border-color: #2d3543;
}

.djdigi-library .djdigi-page.is-active {
	background: var(--djdigi-toggle-active-bg);
	color: var(--djdigi-text-primary);
	border-color: #3a4453;
}

.djdigi-library .djdigi-page:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.djdigi-library .djdigi-page-ellipsis {
	color: var(--djdigi-text-dim);
	padding: 6px 4px;
	font-size: 12px;
}

/* ----- Empty state --------------------------------------------------- */

.djdigi-library .djdigi-empty {
	color: var(--djdigi-text-muted);
	text-align: center;
	padding: 2rem 1rem;
	background: var(--djdigi-card-bg);
	border: 1px solid var(--djdigi-card-border);
	border-radius: 8px;
}

/* ----- Lightbox ------------------------------------------------------ */

.djdigi-lightbox {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	/* Avada page sections can claim z-index up to 99999 (sticky headers,
	 * one-page nav, etc.). Sit firmly above that range while staying below
	 * the VIP modal at 100001. !important to defeat any theme-level overrides. */
	z-index: 100000 !important;
}

.djdigi-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.85);
	opacity: 0;
	transition: opacity 200ms ease;
}

.djdigi-lightbox--active .djdigi-lightbox-backdrop {
	opacity: 1;
}

.djdigi-lightbox--closing .djdigi-lightbox-backdrop {
	opacity: 0;
	transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.djdigi-lightbox-content {
	position: relative;
	width: min(960px, 92vw);
	background: transparent;
	overflow: visible;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: 92vh;
	opacity: 0;
	transform: scale(0.92);
	transform-origin: center center;
	/* Open: bouncy overshoot — content briefly scales past 1.0 then settles. */
	transition: opacity 340ms cubic-bezier(0.34, 1.56, 0.64, 1),
		transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.djdigi-lightbox--active .djdigi-lightbox-content {
	opacity: 1;
	transform: scale(1);
}

.djdigi-lightbox--closing .djdigi-lightbox-content {
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.djdigi-lightbox-iframe-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	flex-shrink: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		0 0 80px rgba(255,255,255,0.12),
		0 0 160px rgba(200,176,104,0.08),
		0 12px 40px rgba(0,0,0,0.5);
}

.djdigi-lightbox-iframe-wrap iframe,
.djdigi-lightbox-iframe-wrap video,
.djdigi-lightbox-iframe-wrap .djdigi-mp4-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ----- Custom MP4 player (self-hosted videos only) ------------------- */
/* YouTube + Odysee continue to use their native iframe controls. */

.djdigi-lightbox .djdigi-mp4-player {
	background: #000;
	overflow: hidden;
	border-radius: 12px;
}

.djdigi-lightbox .djdigi-mp4-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: #000;
	cursor: pointer;
}

.djdigi-lightbox .djdigi-mp4-controls {
	position: absolute;
	left: 50%;
	bottom: 16px;
	width: 70%;
	max-width: 600px;
	min-width: 280px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	background: rgba(17,17,17,0.6);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	color: #fff;

	/* Hidden state — JS adds .djdigi-mp4-player--show-controls to reveal.
	 * The transition declared here drives the HIDE direction (since this is
	 * the state we transition TO when the modifier class is removed). Opacity
	 * leads with no delay; transform + blur follow 50ms behind so the bar
	 * fades visually before sliding down. */
	opacity: 0;
	transform: translateX(-50%) translateY(20px);
	filter: blur(8px);
	pointer-events: none;
	transition:
		opacity 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms,
		transform 400ms cubic-bezier(0.4, 0, 0.6, 1) 50ms,
		filter 400ms cubic-bezier(0.4, 0, 0.6, 1) 50ms;
}

.djdigi-lightbox .djdigi-mp4-player--show-controls .djdigi-mp4-controls {
	/* Visible state — transitions declared here drive the SHOW direction.
	 * Smooth ease-out, all three properties start together. */
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	filter: blur(0);
	pointer-events: auto;
	transition:
		opacity 350ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
		filter 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.djdigi-lightbox .djdigi-mp4-progress-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.djdigi-lightbox .djdigi-mp4-time {
	font-size: 12px;
	color: rgba(255,255,255,0.85);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	min-width: 38px;
}

.djdigi-lightbox .djdigi-mp4-time--duration {
	text-align: right;
}

.djdigi-lightbox .djdigi-mp4-scrubber {
	flex: 1;
	height: 4px;
	background: rgba(255,255,255,0.25);
	border-radius: 2px;
	cursor: pointer;
	overflow: hidden;
}

.djdigi-lightbox .djdigi-mp4-scrubber-fill {
	height: 100%;
	background: #fff;
	border-radius: 2px;
	width: 0%;
	transition: width 100ms linear;
}

.djdigi-lightbox .djdigi-mp4-buttons-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.djdigi-lightbox .djdigi-mp4-play-btn,
.djdigi-lightbox .djdigi-mp4-mute-btn {
	background: transparent;
	border: 0;
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-family: inherit;
	transition:
		background 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
		transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.djdigi-lightbox .djdigi-mp4-play-btn:hover,
.djdigi-lightbox .djdigi-mp4-mute-btn:hover,
.djdigi-lightbox .djdigi-mp4-play-btn:focus,
.djdigi-lightbox .djdigi-mp4-mute-btn:focus {
	background: rgba(255,255,255,0.1);
	transform: scale(1.06);
	outline: none;
}

.djdigi-lightbox .djdigi-mp4-play-btn svg,
.djdigi-lightbox .djdigi-mp4-mute-btn svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	display: block;
}

.djdigi-lightbox .djdigi-mp4-volume {
	width: 80px;
	height: 4px;
	background: rgba(255,255,255,0.25);
	border-radius: 2px;
	cursor: pointer;
	overflow: hidden;
}

.djdigi-lightbox .djdigi-mp4-volume-fill {
	height: 100%;
	background: #fff;
	border-radius: 2px;
	width: 100%;
	transition: width 120ms ease;
}

/* ----- Lightbox meta panel — premium dark "glass" surface ------------ */
/* All rules below are scoped under .djdigi-lightbox so theme bleed is minimal,
 * and key visual properties use !important because the lightbox lives outside
 * .djdigi-library and is exposed to whatever global theme rules (Avada h3,
 * fusion-body div, etc.) might paint over it. */

.djdigi-lightbox .djdigi-lightbox-meta {
	background: #1a1f28 !important;
	color: #ffffff;
	padding: 1.75rem;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.06);
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
	/* Explicit visible — any axis being non-visible auto-clips both, which
	 * was chopping the hover-scaled Download button's right edge. */
	overflow: visible;
}

.djdigi-lightbox .djdigi-lightbox-artist {
	font-size: 18px;
	font-weight: 400;
	color: rgba(255,255,255,0.85);
	letter-spacing: normal;
	text-transform: none;
	margin: 0 0 6px;
	line-height: 1.3;
}

.djdigi-lightbox h3.djdigi-lightbox-title,
.djdigi-lightbox .djdigi-lightbox-title {
	margin: 0 0 1.25rem !important;
	padding: 0 !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	color: #ffffff !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
	text-transform: none;
}

.djdigi-lightbox .djdigi-lightbox-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	overflow: visible;
}

/* Lightbox download button (member) — green outline + arrow icon, mirrors locked variant. */

.djdigi-lightbox .djdigi-btn--download {
	background: transparent;
	border: 1px solid rgba(120,200,140,0.4);
	color: #7ec88c;
	padding: 9px 18px;
	font-weight: 500;
}

.djdigi-lightbox .djdigi-btn--download:hover,
.djdigi-lightbox .djdigi-btn--download:focus {
	background: rgba(120,200,140,0.08);
	border-color: rgba(120,200,140,0.6);
	color: #9fd4ad;
}

/* Lightbox locked button (non-member) — gold outline + gold text. */

.djdigi-lightbox .djdigi-btn--access {
	background: transparent;
	border: 1px solid rgba(200,176,104,0.4);
	color: #c8b068;
	padding: 9px 18px;
	font-weight: 500;
}

.djdigi-lightbox .djdigi-btn--access:hover,
.djdigi-lightbox .djdigi-btn--access:focus {
	background: rgba(200,176,104,0.08);
	border-color: rgba(200,176,104,0.7);
	color: #e8d08c;
	transform: scale(1.02);
}

.djdigi-lightbox .djdigi-lock {
	font-size: 14px;
	vertical-align: middle;
	margin-right: 6px;
}

/* ----- Premium shimmer + lift on Download / locked buttons ----------- */
/* Applies to BOTH the library table-row buttons and the lightbox actions. */

.djdigi-library .djdigi-btn--download,
.djdigi-library .djdigi-btn--access,
.djdigi-lightbox .djdigi-btn--download,
.djdigi-lightbox .djdigi-btn--access {
	position: relative;
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.1) inset,
		0 4px 12px rgba(0,0,0,0.15);
	transition:
		transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 200ms ease,
		background 120ms ease,
		border-color 120ms ease,
		color 120ms ease;
}

.djdigi-library .djdigi-btn--download::before,
.djdigi-library .djdigi-btn--access::before,
.djdigi-lightbox .djdigi-btn--download::before,
.djdigi-lightbox .djdigi-btn--access::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 100%;
	transform: translateX(-100%);
	transition: transform 600ms ease;
	pointer-events: none;
	mix-blend-mode: overlay;
}

/* Access (locked) keeps the white shimmer band. */
.djdigi-library .djdigi-btn--access::before,
.djdigi-lightbox .djdigi-btn--access::before {
	background: linear-gradient(120deg,
		transparent 30%,
		rgba(255,255,255,0.4) 50%,
		transparent 70%);
}

/* Download (member) gets a green-tinted shimmer band. */
.djdigi-library .djdigi-btn--download::before,
.djdigi-lightbox .djdigi-btn--download::before {
	background: linear-gradient(120deg,
		transparent 30%,
		rgba(120,200,140,0.3) 50%,
		transparent 70%);
}

.djdigi-library .djdigi-btn--download:hover::before,
.djdigi-library .djdigi-btn--access:hover::before,
.djdigi-lightbox .djdigi-btn--download:hover::before,
.djdigi-lightbox .djdigi-btn--access:hover::before {
	transform: translateX(100%);
}

/* Library row buttons are right-aligned in a 140px cell; scale leftward so
 * the right edge stays put and the visual grows into empty cell space. */
.djdigi-library .djdigi-btn--download,
.djdigi-library .djdigi-btn--access {
	transform-origin: right center;
}

/* Lightbox download/locked sits at the left of the action row; scale rightward
 * into the empty middle space so it never approaches the meta panel's right edge. */
.djdigi-lightbox .djdigi-btn--download,
.djdigi-lightbox .djdigi-btn--access {
	transform-origin: left center;
}

.djdigi-library .djdigi-btn--download:hover,
.djdigi-lightbox .djdigi-btn--download:hover {
	transform: scale(1.02);
	box-shadow:
		0 8px 24px rgba(120,200,140,0.2),
		0 4px 8px rgba(0,0,0,0.2);
}

.djdigi-library .djdigi-btn--access:hover,
.djdigi-lightbox .djdigi-btn--access:hover {
	transform: scale(1.02);
	box-shadow:
		0 8px 24px rgba(200,176,104,0.25),
		0 4px 8px rgba(0,0,0,0.2);
}

/* Arrow icon used in member Download buttons. */
.djdigi-library .djdigi-arrow,
.djdigi-lightbox .djdigi-arrow {
	display: inline-flex;
	align-items: center;
	margin-right: 4px;
	vertical-align: middle;
}

.djdigi-library .djdigi-arrow svg,
.djdigi-lightbox .djdigi-arrow svg {
	width: 14px;
	height: 14px;
	display: block;
	fill: currentColor;
}

.djdigi-library .djdigi-btn--download:active,
.djdigi-library .djdigi-btn--access:active,
.djdigi-lightbox .djdigi-btn--download:active,
.djdigi-lightbox .djdigi-btn--access:active {
	transform: scale(0.98);
	transition:
		transform 100ms ease,
		box-shadow 100ms ease;
}

/* Follow buttons (ghost). */

.djdigi-lightbox .djdigi-btn--ghost {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.85);
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 500;
}

.djdigi-lightbox .djdigi-btn--ghost:hover,
.djdigi-lightbox .djdigi-btn--ghost:focus {
	background: rgba(255,255,255,0.04);
	border-color: rgba(255,255,255,0.25);
	color: #ffffff;
}

/* Social share icon group. */

.djdigi-lightbox .djdigi-share-group {
	display: inline-flex;
	gap: 8px;
	margin-left: auto;
	align-items: center;
}

.djdigi-lightbox .djdigi-share-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.75);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	padding: 0;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.djdigi-lightbox .djdigi-share-icon:hover,
.djdigi-lightbox .djdigi-share-icon:focus {
	background: rgba(255,255,255,0.1);
	border-color: rgba(200,176,104,0.4);
	color: #ffffff;
	transform: translateY(-1px);
}

.djdigi-lightbox .djdigi-share-icon svg {
	width: 16px;
	height: 16px;
	display: block;
	fill: currentColor;
}

/* Copy-link button uses <button> not <a>, but inherits all share-icon styles.
 * .is-copied tints it gold for 1.5s (JS adds/removes the class). */

.djdigi-lightbox .djdigi-share-icon--copy {
	font: inherit;
}

.djdigi-lightbox .djdigi-share-icon.is-copied,
.djdigi-lightbox .djdigi-share-icon.is-copied:hover {
	background: rgba(200,176,104,0.12);
	border-color: rgba(200,176,104,0.6);
	color: #c8b068;
	transform: none;
}

/* ----- VIP Member Access modal --------------------------------------- */
/* Sits on top of the lightbox (z-index above 99999). Same dark glass-panel
 * language as the lightbox meta. !important on visual props for the same
 * theme-override defense as the lightbox title. */

.djdigi-vip-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	/* One above the lightbox so the modal sits on top when both are open. */
	z-index: 100002 !important;
}

.djdigi-vip-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.85);
	animation: djdigi-fade-in 200ms ease;
}

.djdigi-vip-modal-content {
	position: relative;
	background: #1a1f28 !important;
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
	max-width: 440px;
	width: 92vw;
	padding: 2rem;
	max-height: 92vh;
	overflow-y: auto;
	animation: djdigi-fade-in 200ms ease;
}

.djdigi-vip-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.1);
	color: #ffffff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-family: inherit;
	transition: background 120ms ease, border-color 120ms ease;
}

.djdigi-vip-modal-close:hover,
.djdigi-vip-modal-close:focus {
	background: rgba(255,255,255,0.05);
	border-color: rgba(255,255,255,0.2);
}

.djdigi-vip-modal h3.djdigi-vip-modal-title,
.djdigi-vip-modal .djdigi-vip-modal-title {
	font-size: 22px !important;
	font-weight: 500 !important;
	color: #ffffff !important;
	margin: 0 0 0.5rem !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
	text-transform: none;
}

.djdigi-vip-modal-text {
	font-size: 14px;
	color: rgba(255,255,255,0.7);
	line-height: 1.5;
	margin: 0 0 1.5rem;
}

/* Embedded WordPress login form (wp_login_form output). */

.djdigi-vip-modal #djdigi-vip-login-form {
	margin: 0;
}

.djdigi-vip-modal #djdigi-vip-login-form p {
	margin: 0 0 12px;
}

.djdigi-vip-modal #djdigi-vip-login-form label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,0.7);
	margin-bottom: 6px;
	letter-spacing: normal;
	text-transform: none;
}

/* Compound selector + !important to outrank Avada's .input class rules.
 * The input.input[type="text"] form bumps specificity beyond a single .input
 * class selector; !important then closes the gap on any rule with a higher-
 * specificity ancestor (e.g. body.fusion-body .input). */

#djdigi-vip-login-form input.input[type="text"],
#djdigi-vip-login-form input.input[type="email"],
#djdigi-vip-login-form input.input[type="password"],
.djdigi-vip-modal #djdigi-vip-login-form input[type="text"],
.djdigi-vip-modal #djdigi-vip-login-form input[type="email"],
.djdigi-vip-modal #djdigi-vip-login-form input[type="password"] {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	margin-bottom: 12px !important;
	outline: none !important;
	transition:
		border-color 200ms ease,
		box-shadow 200ms ease,
		background-color 200ms ease !important;
}

#djdigi-vip-login-form input.input[type="text"]:focus,
#djdigi-vip-login-form input.input[type="email"]:focus,
#djdigi-vip-login-form input.input[type="password"]:focus,
.djdigi-vip-modal #djdigi-vip-login-form input[type="text"]:focus,
.djdigi-vip-modal #djdigi-vip-login-form input[type="email"]:focus,
.djdigi-vip-modal #djdigi-vip-login-form input[type="password"]:focus {
	/* Border stays 1px so the field doesn't shift size on focus — the
	 * box-shadow does the heavy visual lifting. Brand blue (#29B6F0) used
	 * here only — Download buttons, locked borders, social-icon hover, etc.
	 * all stay gold. */
	border-color: #29B6F0 !important;
	box-shadow:
		0 0 0 3px rgba(41, 182, 240, 0.4),
		0 0 24px rgba(41, 182, 240, 0.5) !important;
	background: rgba(41, 182, 240, 0.08) !important;
	outline: none !important;
}

.djdigi-vip-modal #djdigi-vip-login-form .login-remember {
	margin-bottom: 14px;
}

.djdigi-vip-modal #djdigi-vip-login-form .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: rgba(255,255,255,0.7);
	cursor: pointer;
	text-transform: none;
}

.djdigi-vip-modal #djdigi-vip-login-form .login-remember input[type="checkbox"] {
	margin: 0;
	accent-color: #c8b068;
}

.djdigi-vip-modal #djdigi-vip-login-form .login-submit {
	margin: 0;
}

.djdigi-vip-modal #djdigi-vip-login-form input[type="submit"] {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.25);
	color: #ffffff;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.1) inset,
		0 4px 12px rgba(0,0,0,0.15);
	transition:
		transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
		background 120ms ease,
		border-color 120ms ease,
		box-shadow 200ms ease;
}

.djdigi-vip-modal #djdigi-vip-login-form input[type="submit"]:hover,
.djdigi-vip-modal #djdigi-vip-login-form input[type="submit"]:focus {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.4);
	transform: scale(1.02);
	box-shadow:
		0 8px 24px rgba(255,255,255,0.15),
		0 4px 8px rgba(0,0,0,0.2);
}

.djdigi-vip-modal #djdigi-vip-login-form input[type="submit"]:active {
	transform: scale(0.98);
	transition: transform 100ms ease, box-shadow 100ms ease;
}

.djdigi-vip-modal-lostpw {
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	color: rgba(255,255,255,0.4);
	text-decoration: none;
	transition: color 120ms ease;
}

.djdigi-vip-modal-lostpw:hover,
.djdigi-vip-modal-lostpw:focus {
	color: rgba(255,255,255,0.7);
}

.djdigi-vip-modal-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	font-size: 12px;
	color: rgba(255,255,255,0.5);
	letter-spacing: 0.06em;
}

.djdigi-vip-modal-divider::before,
.djdigi-vip-modal-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(255,255,255,0.1);
}

.djdigi-vip-modal-divider span {
	flex: 0 0 auto;
}

.djdigi-vip-modal-signup {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 12px 18px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	background: transparent;
	border: 1px solid rgba(200,176,104,0.4);
	color: #c8b068;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.djdigi-vip-modal-signup:hover,
.djdigi-vip-modal-signup:focus {
	background: rgba(200,176,104,0.08);
	border-color: rgba(200,176,104,0.7);
	color: #e8d08c;
	transform: scale(1.02);
	box-shadow:
		0 8px 24px rgba(200,176,104,0.25),
		0 4px 8px rgba(0,0,0,0.2);
}

html.djdigi-vip-modal-open {
	overflow: hidden;
}

/* ----- Row highlight (auto-open scroll target) ----------------------- */

.djdigi-library .djdigi-row--highlighted {
	animation: djdigi-row-flash 2s ease-out;
}

@keyframes djdigi-row-flash {
	0%   { background: rgba(200,176,104,0.25); border-color: var(--djdigi-accent-gold); box-shadow: 0 0 0 2px rgba(200,176,104,0.4); }
	100% { background: var(--djdigi-card-bg);  border-color: var(--djdigi-card-border); box-shadow: none; }
}

.djdigi-lightbox-close {
	position: absolute;
	top: -42px;
	right: 0;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 4px;
	font-family: inherit;
	z-index: 1;
	transition: background 120ms ease;
}

.djdigi-lightbox-close:hover {
	background: rgba(255,255,255,0.1);
}

@keyframes djdigi-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

html.djdigi-lightbox-open {
	overflow: hidden;
}

/* ----- Mobile responsive (< 768px) ----------------------------------- */

@media (max-width: 767px) {
	.djdigi-library {
		padding: 1rem;
		border-radius: 10px;
	}

	.djdigi-library .djdigi-controls {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.djdigi-library .djdigi-toggle {
		display: flex;
		width: 100%;
	}

	.djdigi-library .djdigi-toggle button {
		flex: 1 1 50%;
		font-size: 14px;
		padding: 10px 20px;
	}

	.djdigi-library .djdigi-search {
		flex: 1 1 auto;
	}

	/* Reflow rows to a card layout. */
	.djdigi-library .djdigi-table-header {
		display: none;
	}

	.djdigi-library .djdigi-table--videos .djdigi-row,
	.djdigi-library .djdigi-table--music .djdigi-row {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"artist preview"
			"title  preview"
			"meta   action";
		gap: 8px 12px;
		align-items: center;
	}

	.djdigi-library .djdigi-cell--artist {
		grid-area: artist;
		font-size: 14px;
	}

	.djdigi-library .djdigi-cell--title {
		grid-area: title;
		font-size: 13px;
	}

	.djdigi-library .djdigi-cell--preview {
		grid-area: preview;
		justify-self: end;
	}

	.djdigi-library .djdigi-cell--action {
		grid-area: action;
		justify-self: end;
	}

	/* Date + (music) type collapse into a meta row. */
	.djdigi-library .djdigi-cell--date,
	.djdigi-library .djdigi-cell--type {
		grid-area: meta;
		font-size: 11px;
		display: inline-flex;
		align-items: center;
	}

	.djdigi-library .djdigi-table--music .djdigi-row .djdigi-cell--date {
		justify-self: start;
		margin-left: 8px;
	}

	.djdigi-library .djdigi-audio {
		min-width: 0;
		width: 100%;
	}

	.djdigi-library .djdigi-pagination {
		flex-wrap: wrap;
	}

	.djdigi-library .djdigi-page {
		padding: 5px 9px;
		font-size: 11px;
		min-width: 28px;
	}

	.djdigi-lightbox-close {
		top: -36px;
		font-size: 24px;
	}

	.djdigi-lightbox .djdigi-lightbox-meta {
		padding: 1.25rem;
	}

	.djdigi-lightbox h3.djdigi-lightbox-title,
	.djdigi-lightbox .djdigi-lightbox-title {
		font-size: 20px !important;
		margin-bottom: 1rem !important;
	}

	.djdigi-lightbox .djdigi-lightbox-artist {
		font-size: 16px;
	}

	.djdigi-lightbox .djdigi-lightbox-actions {
		gap: 8px;
	}

	.djdigi-lightbox .djdigi-share-group {
		margin-left: 0;
		flex-basis: 100%;
		justify-content: flex-start;
		padding-top: 4px;
	}

	.djdigi-vip-modal-content {
		padding: 1.5rem;
	}

	.djdigi-vip-modal h3.djdigi-vip-modal-title,
	.djdigi-vip-modal .djdigi-vip-modal-title {
		font-size: 20px !important;
	}

	.djdigi-lightbox .djdigi-mp4-controls {
		width: 90%;
		padding: 12px 14px;
	}

	.djdigi-lightbox .djdigi-mp4-time {
		font-size: 11px;
		min-width: 32px;
	}

	.djdigi-lightbox .djdigi-mp4-volume {
		width: 60px;
	}
}

/* ===================================================================
 * SHARED VIDEO CARD + GALLERY + NEWEST SHORTCODES
 * =================================================================== */

/* ----- Shared .djdigi-video-card (used by gallery grid, hero, newest) - */
/* Card is a transparent flex column — the thumb is the only visually-bordered
 * element and the meta block is just clean text on the page background. */

.djdigi-video-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: 0;
	box-shadow: none;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	/* min-width: 0 prevents grid blowout — without this, a card whose content
	 * (long title, wide thumb) intrinsic width exceeds its track width forces
	 * the grid to expand and wrap items to a new row. */
	min-width: 0;
	transition:
		transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.djdigi-video-card:hover,
.djdigi-video-card:focus {
	transform: scale(1.04);
	outline: none;
}

.djdigi-video-card-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #1c2330 0%, #0e1116 100%);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	overflow: hidden;
	transition:
		border-color 250ms ease,
		box-shadow 250ms ease;
}

.djdigi-video-card:hover .djdigi-video-card-thumb,
.djdigi-video-card:focus .djdigi-video-card-thumb {
	border-color: rgba(200,176,104,0.55);
	box-shadow:
		0 12px 32px rgba(200,176,104,0.22),
		0 4px 12px rgba(0,0,0,0.3);
}

.djdigi-video-card-thumb img,
.djdigi-video-card-thumb video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

.djdigi-video-card-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.92);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	opacity: 0;
	transition:
		opacity 250ms ease,
		transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
		background 200ms ease;
	pointer-events: none;
}

/* Always-visible play overlay on no-thumb cards (Odysee/MP4 placeholders). */
.djdigi-video-card.djdigi-video-card--no-thumb .djdigi-video-card-play {
	opacity: 0.9;
	transform: translate(-50%, -50%) scale(1);
}

.djdigi-video-card:hover .djdigi-video-card-play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	background: rgba(0,0,0,0.7);
}

.djdigi-video-card-meta {
	padding: 12px 4px 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.djdigi-video-card-artist {
	font-size: 13px;
	color: rgba(255,255,255,0.6);
	line-height: 1.3;
}

.djdigi-video-card-title {
	font-size: 15px;
	color: #fff;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.djdigi-video-card-action {
	margin-top: 8px;
}

.djdigi-video-card-action .djdigi-btn {
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	padding: 8px 12px;
	font-size: 13px;
}

/* Hero variant of the card — used in [djdigi_gallery] only. The hero gets a
 * subtle gold glow around the thumbnail to mark it as the spotlight piece. */

.djdigi-video-card--hero .djdigi-video-card-thumb {
	border-radius: 14px;
	box-shadow:
		0 0 80px rgba(255,255,255,0.04),
		0 0 160px rgba(200,176,104,0.05),
		0 12px 40px rgba(0,0,0,0.4);
}

.djdigi-video-card--hero:hover .djdigi-video-card-thumb,
.djdigi-video-card--hero:focus .djdigi-video-card-thumb {
	box-shadow:
		0 0 100px rgba(255,255,255,0.06),
		0 0 200px rgba(200,176,104,0.1),
		0 12px 40px rgba(0,0,0,0.5);
	border-color: rgba(200,176,104,0.55);
}

.djdigi-video-card--hero .djdigi-video-card-meta {
	padding: 1.1rem 4px 0;
	gap: 6px;
}

.djdigi-video-card--hero .djdigi-video-card-artist {
	font-size: 16px;
}

.djdigi-video-card--hero .djdigi-video-card-title {
	font-size: 24px;
	-webkit-line-clamp: 1;
	margin-bottom: 0;
}

.djdigi-video-card--hero .djdigi-video-card-play {
	width: 72px;
	height: 72px;
	font-size: 26px;
}

/* ----- [djdigi_gallery] container + layout --------------------------- */

.djdigi-gallery {
	background: linear-gradient(180deg, #14181f 0%, #0e1116 100%);
	border-radius: 16px;
	padding: 2.25rem;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	box-sizing: border-box;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.04),
		0 8px 32px rgba(0,0,0,0.3);
}

.djdigi-gallery *,
.djdigi-gallery *::before,
.djdigi-gallery *::after {
	box-sizing: border-box;
}

.djdigi-gallery-hero {
	margin: 0 0 1.75rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

.djdigi-gallery-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 1.25rem;
}

.djdigi-gallery .djdigi-search.djdigi-gallery-search {
	flex: 0 1 320px;
	position: relative;
}

.djdigi-gallery .djdigi-search-input {
	width: 100%;
	background: #1A1F27;
	border: 1px solid #232A35;
	border-radius: 8px;
	color: #fff;
	font-size: 13px;
	padding: 8px 12px 8px 36px;
	font-family: inherit;
	outline: none;
	transition: border-color 120ms ease;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A3' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 14px;
}

.djdigi-gallery .djdigi-search-input::placeholder {
	color: #5A6573;
}

.djdigi-gallery .djdigi-search-input:focus {
	border-color: #5A4A28;
}

.djdigi-gallery-sort {
	display: inline-flex;
	align-items: center;
}

.djdigi-gallery-sort-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(255,255,255,0.6);
	font-family: inherit;
}

.djdigi-gallery-sort-select {
	background: #1A1F27;
	border: 1px solid #232A35;
	border-radius: 8px;
	color: #fff;
	font-size: 13px;
	padding: 8px 30px 8px 12px;
	font-family: inherit;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	transition: border-color 120ms ease;
}

.djdigi-gallery-sort-select:focus {
	border-color: #5A4A28;
}

.djdigi-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.djdigi-gallery-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 1.5rem;
}

.djdigi-gallery-pagination .djdigi-page,
.djdigi-gallery-pagination .djdigi-page-list {
	display: inline-flex;
	gap: 4px;
}

.djdigi-gallery-pagination .djdigi-page {
	background: #1A1F27;
	border: 1px solid #232A35;
	color: rgba(255,255,255,0.7);
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
	cursor: pointer;
	font-family: inherit;
	min-width: 32px;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.djdigi-gallery-pagination .djdigi-page:hover:not(:disabled) {
	background: #20262f;
	color: #fff;
	border-color: #2d3543;
}

.djdigi-gallery-pagination .djdigi-page.is-active {
	background: #2B3340;
	color: #fff;
	border-color: #3a4453;
}

.djdigi-gallery-pagination .djdigi-page:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.djdigi-gallery .djdigi-empty {
	grid-column: 1 / -1;
	color: rgba(255,255,255,0.6);
	text-align: center;
	padding: 2rem 1rem;
	background: #161B22;
	border: 1px solid #232A35;
	border-radius: 8px;
}

/* ----- [djdigi_newest] container + layout ---------------------------- */

.djdigi-newest {
	box-sizing: border-box;
}

.djdigi-newest *,
.djdigi-newest *::before,
.djdigi-newest *::after {
	box-sizing: border-box;
}

/* Specificity bump + !important on layout props so Avada's row/column rules
 * (.fusion-body .fusion-builder-row > div etc.) can't collapse the grid. */
.djdigi-newest .djdigi-newest-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 1rem !important;
	width: 100%;
	margin: 0;
	padding: 0;
}

.djdigi-newest-cta {
	text-align: center;
	margin-top: 1.5rem;
}

.djdigi-newest-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid rgba(200,176,104,0.4);
	color: #c8b068;
	padding: 9px 24px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	text-decoration: none;
	font-family: inherit;
	cursor: pointer;
	transition:
		background 200ms ease,
		border-color 200ms ease,
		color 200ms ease,
		transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 200ms ease;
}

.djdigi-newest-cta-btn:hover,
.djdigi-newest-cta-btn:focus {
	background: rgba(200,176,104,0.08);
	border-color: rgba(200,176,104,0.7);
	color: #e8d08c;
	transform: scale(1.02);
	box-shadow: 0 4px 12px rgba(200,176,104,0.2);
	outline: none;
}

.djdigi-newest-cta-arrow {
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.djdigi-newest-cta-btn:hover .djdigi-newest-cta-arrow,
.djdigi-newest-cta-btn:focus .djdigi-newest-cta-arrow {
	transform: translateX(3px);
}

.djdigi-newest .djdigi-empty {
	grid-column: 1 / -1;
	color: rgba(255,255,255,0.6);
	text-align: center;
	padding: 1.5rem;
}

/* ----- Responsive breakpoints --------------------------------------- */

@media (max-width: 1023px) {
	.djdigi-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.djdigi-newest .djdigi-newest-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	.djdigi-gallery {
		padding: 1.1rem;
		border-radius: 12px;
	}
	.djdigi-gallery-hero {
		margin-bottom: 1.25rem;
		padding-bottom: 1.25rem;
	}
	.djdigi-gallery-grid {
		grid-template-columns: 1fr;
	}
	.djdigi-newest .djdigi-newest-grid {
		grid-template-columns: 1fr !important;
	}
	.djdigi-gallery-controls {
		flex-direction: column;
		align-items: stretch;
	}
	.djdigi-gallery .djdigi-search.djdigi-gallery-search {
		flex: 1 1 auto;
	}
	.djdigi-gallery-sort {
		justify-content: flex-end;
	}
	.djdigi-video-card--hero .djdigi-video-card-meta {
		padding: 0.85rem 0 0;
	}
	.djdigi-video-card--hero .djdigi-video-card-title {
		font-size: 18px;
	}
	.djdigi-video-card--hero .djdigi-video-card-artist {
		font-size: 14px;
	}
}