/*
 * Wing Popup - Popup Library (Popups screen).
 *
 * Loaded only on the Popups page by WDPOP_Library_Screen. Three pieces: the
 * library button the script places after "Add New Popup", the empty-state
 * card it places above the group when there is no popup, and the gallery
 * modal. The modal follows the promo popup's look (rounded dialog, gradient
 * primary action) and sits at z-index 100040 - above the framework's own
 * modals (100000) but below the promo popup (100050), which a locked card
 * opens on top of it.
 */

/*
 * Contents
 *   1. Library button
 *   2. Empty state
 *   3. Modal
 *   4. Toasts
 *   5. Motion / responsive
 */

/* Library button ------------------------------------------------------------ */

.wing-popup--options .wdpop-library-button,
.wdpop_core .button.wdpop-library-button {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	vertical-align: middle;
	text-decoration: none !important;
	color: #6d28d9 !important;
	background: #f5f3ff !important;
	border-color: #c4b5fd !important;
	box-shadow: none !important;
}
.wing-popup--options .wdpop-library-button:hover,
.wdpop_core .button.wdpop-library-button:hover {
	background: #ede9fe !important;
	border-color: #a78bfa !important;
	color: #5b21b6 !important;
}
.wdpop-library-button .fas {
	font-size: 12px;
}

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

/* The empty card already offers both buttons the list toolbar holds. */
#wdpop-library-empty + .wdpop_core-field-group .wdpop_core-list-toolbar.is-empty {
	display: none;
}
.wdpop-library-empty {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	grid-template-areas: "art title" "art text" "art actions";
	column-gap: 24px;
	align-items: center;
	margin: 20px 30px 20px;
	padding: 26px 28px;
	border: 1px dashed #c4b5fd;
	border-radius: 16px;
	background: linear-gradient(135deg, #faf5ff, #eef2ff);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wdpop-library-empty__art {
	grid-area: art;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wdpop-library-empty__mock {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 84px;
	padding: 16px 12px 12px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 30px rgba(79, 70, 229, 0.18);
	transform: rotate(-4deg);
}
.wdpop-library-empty__mock span {
	display: block;
	height: 7px;
	border-radius: 4px;
	background: #e9d5ff;
}
.wdpop-library-empty__mock span:nth-child(1) { width: 70%; background: #c4b5fd; }
.wdpop-library-empty__mock span:nth-child(2) { width: 100%; }
.wdpop-library-empty__mock span:nth-child(3) { width: 55%; height: 14px; border-radius: 7px; background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.wdpop-library-empty__title {
	grid-area: title;
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: #111827;
}
.wdpop-library-empty__text {
	grid-area: text;
	margin: 0 0 12px;
	font-size: 13px;
	color: #4b5563;
}
.wdpop-library-empty__actions {
	grid-area: actions;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.wdpop-library-empty__actions .button-primary {
	background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 8px 18px rgba(79, 70, 229, 0.3) !important;
}

/* Modal ----------------------------------------------------------------------- */

.wdpop-library {
	position: fixed;
	inset: 0;
	z-index: 100040;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
}
.wdpop-library[hidden] {
	display: none;
}
body.wdpop-library-open {
	overflow: hidden;
}
.wdpop-library__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.55);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.wdpop-library__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1080px;
	max-height: calc(100vh - 48px);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
	overflow: hidden;
	transform: translateY(16px) scale(0.98);
	opacity: 0;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.wdpop-library.is-open .wdpop-library__backdrop { opacity: 1; }
.wdpop-library.is-open .wdpop-library__dialog  { transform: none; opacity: 1; }

.wdpop-library__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 26px 16px;
	border-bottom: 1px solid #e5e7eb;
	flex-shrink: 0;
}
.wdpop-library__title {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #111827;
}
.wdpop-library__lead {
	margin: 0;
	font-size: 13px;
	color: #6b7280;
}
.wdpop-library__close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #f3f4f6;
	color: #4b5563;
	font-size: 22px;
	line-height: 34px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.wdpop-library__close:hover,
.wdpop-library__close:focus {
	background: #e5e7eb;
	color: #111827;
}

/* Toolbar */
.wdpop-library__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 26px;
	border-bottom: 1px solid #e5e7eb;
	background: #fafafa;
	flex-shrink: 0;
}
.wdpop-library__search,
.wdpop-library__type {
	height: 36px;
	padding: 0 12px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	box-sizing: border-box;
}
.wdpop-library__search { flex: 1 1 220px; max-width: 320px; }
.wdpop-library__type   { flex: 0 0 auto; max-width: 220px; }
.wdpop-library__search:focus,
.wdpop-library__type:focus {
	outline: none;
	border-color: #7c3aed;
	box-shadow: 0 0 0 1px #7c3aed;
}

/* Chip rows (Mode, Category): a small label, then the chips wrapping after
 * it. Each row takes the full toolbar width so the selects above stay on
 * their own line. The mode row is `hidden` until more than one mode exists. */
.wdpop-library__chip-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	flex: 1 1 100%;
	min-width: 0;
}
.wdpop-library__chip-row[hidden] {
	display: none;
}
.wdpop-library__chip-label {
	flex: 0 0 auto;
	min-width: 62px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #9ca3af;
}
.wdpop-library__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}
.wdpop-library__chip {
	padding: 5px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #fff;
	color: #4b5563;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wdpop-library__chip:hover { border-color: #c4b5fd; color: #5b21b6; }
.wdpop-library__chip.is-active {
	border-color: transparent;
	background: linear-gradient(135deg, #7c3aed, #4f46e5);
	color: #fff;
}

/* Body / grid */
.wdpop-library__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 22px 26px;
	background: #f8fafc;
}
.wdpop-library__notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-left: 3px solid #dc2626;
	border-radius: 0 10px 10px 0;
	background: #fef2f2;
	color: #991b1b;
	font-size: 13px;
}
.wdpop-library__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
}
.wdpop-library__state {
	grid-column: 1 / -1;
	margin: 0;
	padding: 40px 20px;
	text-align: center;
	font-size: 14px;
	color: #6b7280;
}
.wdpop-library__state--error { color: #dc2626; }
.wdpop-library__state .wdpop-library__clear {
	margin-left: 10px;
	vertical-align: middle;
}

/* Card */
.wdpop-library__card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.wdpop-library__card:hover {
	transform: translateY(-3px);
	border-color: #c4b5fd;
	box-shadow: 0 14px 30px rgba(79, 70, 229, 0.12);
}
.wdpop-library__thumb {
	position: relative;
	aspect-ratio: 3 / 2;
	background: #f1f5f9;
	overflow: hidden;
}
.wdpop-library__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wdpop-library__thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 42px;
	font-weight: 800;
	color: #c4b5fd;
}
.wdpop-library__thumb--blank {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #faf5ff, #eef2ff);
}
.wdpop-library__plus {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px dashed #a78bfa;
	color: #6d28d9;
	font-size: 34px;
	font-weight: 300;
	line-height: 52px;
	text-align: center;
}
.wdpop-library__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, #f59e0b, #ef4444);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
.wdpop-library__meta {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 4px;
	padding: 12px 14px 14px;
}
/* Label row: type (accent), then mode and season (muted), dot-separated. */
.wdpop-library__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 0;
	min-width: 0;
}
.wdpop-library__type-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #7c3aed;
}
.wdpop-library__mode-label,
.wdpop-library__season-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: #9ca3af;
	white-space: nowrap;
}
.wdpop-library__mode-label::before,
.wdpop-library__season-label::before {
	content: "\00b7";
	margin: 0 5px;
	color: #d1d5db;
}
.wdpop-library__season-label {
	color: #b45309;
}
.wdpop-library__card-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #111827;
}
.wdpop-library__desc {
	margin: 0 0 6px;
	font-size: 12.5px;
	line-height: 1.45;
	color: #6b7280;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wdpop-library__note {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	color: #b45309;
}
.wdpop-library__note--pro { color: #b45309; }
.wdpop-library__insert {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	padding: 9px 14px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, #7c3aed, #4f46e5);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(79, 70, 229, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wdpop-library__insert:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(79, 70, 229, 0.35);
}
.wdpop-library__insert:disabled {
	cursor: progress;
	opacity: 0.7;
}
.wdpop-library__insert .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}
.wdpop-library__insert--pro {
	background: linear-gradient(135deg, #f59e0b, #ef4444);
	box-shadow: 0 8px 18px rgba(239, 68, 68, 0.25);
}
.wdpop-library__blank {
	background: #fff;
	color: #6d28d9;
	border: 1px solid #c4b5fd;
	box-shadow: none;
}

/* Card states */
.wdpop-library__card.is-unavailable {
	opacity: 0.6;
	filter: grayscale(0.7);
}
.wdpop-library__card.is-unavailable:hover {
	transform: none;
	box-shadow: none;
	border-color: #e5e7eb;
}
.wdpop-library__card.is-busy {
	opacity: 0.7;
}

/* Footer */
.wdpop-library__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 26px;
	border-top: 1px solid #e5e7eb;
	flex-shrink: 0;
}
.wdpop-library__count {
	font-size: 12px;
	color: #6b7280;
}

/* Toasts ---------------------------------------------------------------------- */

.wdpop-library-toasts {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 100060;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}
.wdpop-library-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 240px;
	padding: 12px 14px 12px 16px;
	border-radius: 12px;
	background: #111827;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.22s ease, transform 0.22s ease;
	pointer-events: auto;
}
.wdpop-library-toast.is-visible {
	opacity: 1;
	transform: none;
}
.wdpop-library-toast::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #22c55e;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	flex: 0 0 auto;
}
.wdpop-library-toast__text { flex: 1 1 auto; }
.wdpop-library-toast__close {
	border: 0;
	background: none;
	color: #9ca3af;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}
.wdpop-library-toast__close:hover { color: #fff; }

/* Motion / responsive --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wdpop-library__backdrop,
	.wdpop-library__dialog,
	.wdpop-library__card,
	.wdpop-library-toast {
		transition: none !important;
	}
}
@media (max-width: 782px) {
	.wdpop-library { padding: 10px; }
	.wdpop-library__dialog { max-height: calc(100vh - 20px); border-radius: 14px; }
	.wdpop-library__header,
	.wdpop-library__toolbar,
	.wdpop-library__body,
	.wdpop-library__footer { padding-left: 16px; padding-right: 16px; }
	.wdpop-library__grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
	.wdpop-library__search { max-width: none; }
	.wdpop-library__type { flex: 1 1 calc(50% - 5px); max-width: none; min-width: 0; }
	.wdpop-library__chip-label { flex: 1 1 100%; min-width: 0; }
	.wdpop-library-empty { grid-template-columns: 1fr; grid-template-areas: "title" "text" "actions"; margin: 0 16px 16px; }
	.wdpop-library-empty__art { display: none; }
}