/* ========================= DARK MODE GALLERY ========================= */

/* 1. IMAGE CARD */
.image-container {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: #23232b;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 6px 20px 0 #0008;
  text-decoration: none;
  border: 1px solid #252535;
}
.image-container:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 28px 0 #000c;
}

/* 2. IMAGE FRAME */
.image-frame {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #1a1a22;
}
.image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3. OVERLAY */
.image-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(20,21,28,0.93), rgba(20,21,28,0.45), transparent 70%);
  color: #f3f4f6;
  padding: 0.75rem 1rem;
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 10;
}
.image-frame:hover .image-overlay,
.image-container:hover .image-overlay {
  opacity: 1;
}

/* 4. “NEW” BADGE */
.new-badge {
  background-color: #2563eb; /* blue-600 */
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

/* 5. LOCK BADGE FOR PRIVATE IMAGES */
.private-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: #222a2fdd;
  color: #60a5fa;
  padding: 0.18rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  z-index: 5;
  border: 1px solid #2d3340;
}
.image-container.private .image-frame img {
  filter: grayscale(0.1) brightness(0.75);
  opacity: 0.88;
  border: 1.5px solid #3b82f6;
}

/* 6. METADATA CONTAINER */
.metadata-container {
  background: #22242d;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px #0005, 0 4px 6px -2px #0002;
}

/* 7. ACTIVE CATEGORY BUTTON */
.active {
  background-color: #31324a !important;
  color: #e0e7ef !important;
}

/* 8. MOBILE TWEAKS */
@media (max-width: 768px) {
  .image-frame { height: 200px; }
  .image-overlay { padding: 0.5rem 0.75rem; }
}
@media (max-width: 640px) {
  .login-btn, .admin-btn {
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
  }
  .user-controls { gap: 0.5rem; }
  .grid { gap: 1rem; }
  .image-frame { height: 180px; }
  footer { padding: 1.5rem 0; }
  footer .flex { flex-direction: column; text-align: center; gap: 1rem; }
  #sortSelect { width: 100%; }
}