.media-finder {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.media-finder .grid {
  background: linear-gradient(135deg, rgb(248, 249, 250) 0%, rgb(255, 255, 255) 100%);
  border-radius: 16px;
  border: 2px solid rgb(229, 233, 242);
  width: 160px;
  height: 160px;
  min-width: 160px;
  min-height: 160px;
  max-width: 160px;
  max-height: 160px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.media-finder .grid:focus,
.media-finder .grid:hover {
  border-color: rgb(54, 74, 99);
  box-shadow: rgba(54, 74, 99, 0.15) 0px 8px 24px;
  transform: translateY(-2px);
}
.media-finder .grid .img-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	border-radius: 14px;
}
.media-finder .grid .img-cover img,
.media-finder .grid img[data-find-image],
.media-finder .grid .img-responsive {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  display: block;
}

.media-finder .grid .media-icon {
  text-align: center;
  transform: translate(-50%, -50%);
}

/* Blank card: same look as filled card (same background as .grid / .img-cover area) */
.media-finder .grid .blank-cover {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, rgb(248, 249, 250) 0%, rgb(255, 255, 255) 100%) !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: none !important;
}
.media-finder .grid .blank-cover:hover {
  background: linear-gradient(135deg, rgb(241, 244, 251) 0%, rgb(248, 249, 250) 100%) !important;
}
.media-finder .grid .blank-cover i {
  position: relative !important;
  font-size: 48px !important;
  color: rgb(54, 74, 99) !important;
  transition: all 0.3s ease;
  font-weight: 300;
}
.media-finder .grid .blank-cover:hover i {
  color: rgb(32, 41, 56) !important;
  transform: scale(1.1);
}
.grid .icon-container {
	display: none;
}
/* Filename below image frame - always visible under the grid */
.media-finder .icon-container-below {
	display: block;
	margin-top: 8px;
	text-align: center;
	width: 100%;
	max-width: 160px;
}
.media-finder .icon-container-below span {
	background: rgba(255, 255, 255, 0.95) !important;
	padding: 6px 12px !important;
	border-radius: 8px !important;
	font-size: 12px !important;
	color: #1f2937 !important;
	word-wrap: break-word;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Remove button - always visible when image is selected */
.grid .find-remove-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	z-index: 9999 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(248, 249, 250) 100%) !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	line-height: 36px !important;
	text-align: center !important;
	font-size: 18px !important;
	color: rgb(220, 53, 69) !important;
	box-shadow: rgba(220, 53, 69, 0.25) 0px 4px 12px !important;
	border: 2px solid rgba(220, 53, 69, 0.15) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	opacity: 0.9;
}

.grid .find-remove-button:hover {
	opacity: 1 !important;
	background: linear-gradient(135deg, rgb(220, 53, 69) 0%, rgb(200, 35, 51) 100%) !important;
	color: rgb(255, 255, 255) !important;
	box-shadow: rgba(220, 53, 69, 0.4) 0px 6px 16px !important;
	border-color: rgb(220, 53, 69) !important;
	transform: scale(1.1);
}

.grid .find-button,
.media-finder .grid .blank-cover,
.grid .find-config-button {
	cursor: pointer;
}
.grid a:not(.find-button):not(.blank-cover):not(.find-config-button) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: block;
}
.grid:hover a:not(.find-remove-button):not(.find-button):not(.blank-cover) {
	pointer-events: none;
}
.grid .find-button,
.grid .blank-cover {
	pointer-events: auto !important;
	z-index: 10 !important;
	cursor: pointer !important;
}
/* Legacy icon-container inside grid - kept for backwards compat, icon-container-below is primary */
.grid:hover .icon-container:not(.icon-container-below) {
	display: block;
	top: 40%;
	text-align: center;
	position: absolute;
	width: 100%;
	z-index: 9;
}
.grid:hover .icon-container:not(.icon-container-below) span {
  background-color: var(--bs-gray-100);
  padding: 3px 5px;
  word-wrap: break-word;
}
.grid .find-button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: auto !important;
	z-index: 10 !important;
	cursor: pointer !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.image-list {
	margin-left: -15px;
	margin-right: -15px;
}
.image-list .media-finder {
	float: left;
	margin: 0 15px 25px;
}
.media-finder .input-group-addon i {
	width: 24px;
	display: block;
}