.uieg-layout,
.uieg-sidebar-categories,
.uieg-gallery-heading,
.uieg-filterbar,
.uieg-grid,
.uieg-pagination {
	font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	box-sizing: border-box;
}
.uieg-layout *, .uieg-filterbar *, .uieg-grid *, .uieg-pagination * { box-sizing: border-box; }

/* ---------- Layout general: sidebar de categorías + columna principal ---------- */
.uieg-layout {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}
.uieg-main-col {
	flex: 1;
	min-width: 0;
}
.uieg-layout:not(.uieg-layout-with-sidebar) .uieg-sidebar-categories {
	display: none;
}

/* ---------- Barra lateral de categorías (rejilla y visor individual) ---------- */
.uieg-sidebar-categories {
	flex: 0 0 220px;
	width: 220px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #101012;
	border: 1px solid #232326;
	border-radius: 14px;
	padding: 10px;
}
.uieg-sidebar-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border-radius: 9px;
	color: #b6b6bd;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	transition: background .15s ease, color .15s ease;
}
.uieg-sidebar-link:hover { color: #fff; background: #18181b; }
.uieg-sidebar-link.is-active { color: #fff; background: #232328; font-weight: 600; }
.uieg-sidebar-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: inherit;
}
.uieg-sidebar-icon svg { width: 100%; height: 100%; }
.uieg-sidebar-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.uieg-sidebar-sep {
	height: 1px;
	background: #232326;
	margin: 6px 4px;
}
.uieg-sidebar-all { font-weight: 600; }

/* ---------- Cabecera (solo aparece cuando el shortcode filtra por categoría) ---------- */
.uieg-gallery-heading { margin: 6px 0 22px; }
.uieg-gallery-title {
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #f5f5f7;
	letter-spacing: -.2px;
}
.uieg-gallery-desc {
	margin: 0;
	color: #9a9aa2;
	font-size: 14.5px;
}

/* ---------- Barra de filtros: todo en una sola línea ---------- */
.uieg-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	background: #101012;
	border: 1px solid #232326;
	border-radius: 14px;
	padding: 12px 14px;
	margin-bottom: 22px;
}

.uieg-type-toggle {
	display: flex;
	align-items: center;
	background: #18181b;
	border: 1px solid #232326;
	border-radius: 10px;
	padding: 3px;
	gap: 2px;
	flex-shrink: 0;
}
.uieg-type-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	color: #9a9aa2;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.uieg-type-btn:hover { color: #dcdce0; }
.uieg-type-btn.is-active { background: #29292f; color: #fff; }

.uieg-select-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #18181b;
	border: 1px solid #232326;
	border-radius: 10px;
	padding: 0 12px;
	height: 38px;
	flex-shrink: 0;
}
.uieg-select-wrap label { font-size: 12.5px; color: #8b8b93; font-weight: 500; white-space: nowrap; }
.uieg-select-wrap select {
	background: transparent;
	border: none;
	color: #e8e8ea;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 4px;
}
.uieg-select-wrap select option { background: #18181b; color: #e8e8ea; }

.uieg-search-wrap {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #18181b;
	border: 1px solid #232326;
	border-radius: 10px;
	padding: 0 14px;
	height: 38px;
	flex: 1 1 220px;
	max-width: 320px;
	color: #6c6c74;
}
.uieg-search-wrap input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: #e8e8ea;
	font-family: inherit;
	font-size: 13px;
}
.uieg-search-wrap input::placeholder { color: #6c6c74; }

@media (max-width: 900px) {
	.uieg-layout { flex-direction: column; }
	.uieg-sidebar-categories { width: 100%; flex-direction: row; overflow-x: auto; }
	.uieg-sidebar-sep { display: none; }
}
@media (max-width: 780px) {
	.uieg-filterbar { flex-direction: column; align-items: stretch; }
	.uieg-search-wrap { max-width: none; }
}

/* ---------- Rejilla de tarjetas: visualización grande, estilo "browse all" ---------- */
.uieg-grid {
	display: grid;
	grid-template-columns: repeat(var(--uieg-cols, 3), 1fr);
	gap: 26px;
	margin: 20px 0;
}

@media (max-width: 1100px) {
	.uieg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.uieg-grid { grid-template-columns: 1fr; }
}

.uieg-card {
	position: relative;
	border-radius: 16px;
	overflow: visible;
	background: #0c0c0e;
	border: 1px solid #1e1e21;
}

.uieg-card-link { display: block; text-decoration: none; color: inherit; }

.uieg-card-preview {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: 16px 16px 0 0;
}
.uieg-bg-claro { background: #ebebeb; }
.uieg-bg-oscuro { background: #1c1c1e; }

.uieg-type-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: #fff;
	padding: 5px 10px;
	border-radius: 6px;
	background: rgba(20, 20, 22, .65);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,.1);
}
.uieg-type-badge-tailwind { color: #38bdf8; }
.uieg-type-badge-css { color: #4da3ff; }

.uieg-shadow-host {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*
 * Único efecto al pasar el ratón por una tarjeta: aparece el overlay con
 * "Get code". Nada de desplazamientos, sombras ni cambios de borde.
 */
.uieg-card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 16px;
	background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.72) 100%);
	opacity: 0;
	transition: opacity .18s ease;
}
.uieg-card:hover .uieg-card-overlay { opacity: 1; }
.uieg-card-getcode {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .1px;
}

.uieg-card-prompt-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 5px;
	color: #e8e8ea;
	font-size: 11px;
	font-weight: 600;
	background: rgba(20, 20, 22, .7);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,.12);
	padding: 5px 9px;
	border-radius: 20px;
}

.uieg-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 15px;
	background: #0c0c0e;
	border-radius: 0 0 16px 16px;
}
.uieg-card-user {
	font-size: 13px;
	font-weight: 600;
	color: #e8e8ea;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.uieg-card-views {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	color: #8b8b93;
	flex-shrink: 0;
}

.uieg-empty { opacity: .7; }

.uieg-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 28px 0;
}
.uieg-btn-page {
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid #2c2c31;
	color: #e8e8ea;
	font-size: 14px;
}
.uieg-btn-page:hover { border-color: #4b4b52; }
.uieg-btn-page.is-disabled {
	pointer-events: none;
	opacity: .35;
}
.uieg-page-count {
	font-size: 13px;
	color: #8b8b93;
}