/* General Container Styles */
.gallery-display,
.gallery-preview {
  padding: 20px;
  margin: 20px 0;
  position: relative;
  overflow: visible !important;
}

/* Titles */
.gallery-display .gallery-title,
.gallery-preview h2,
.gallery-preview h3 {
  color: #333;
  margin-bottom: 20px;
}

/* Gallery Grid / Images */
.gallery-display .gallery-display-images,
.gallery-preview .gallery-preview-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
  align-items: flex-start;
}

/* Filters (for Gallery Display) */
.gallery-display .gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  /* Prevent margin collapse and isolate search container spacing */
  overflow: visible !important;
}
html.dicm-lightbox-open,
body.dicm-lightbox-open {
  overscroll-behavior: none;
}

.gallery-filters.position-above {
  margin-bottom: 20px;
  margin-top: 0;
}

.gallery-filters.position-below {
  margin-top: 20px;
  margin-bottom: 0;
}

.gallery-display .gallery-filters button.et_pb_button {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

/* Layout Styles */
.gallery-masonry .gallery-display-images {
  column-count: 3;
  column-gap: 10px;
}

.gallery-masonry .gallery-display-image-wrapper {
  width: 100%;
  margin-bottom: 10px;
  break-inside: avoid-column;
}


/* Loading Overlay */
.gallery-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}

.gallery-loading-spinner {
  width: 30px;
  height: 30px;
  border: 4px solid #ccc;
  border-top-color: #0073aa;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Slideshow layout */
.gallery-slideshow .gallery-display-images .gallery-display-image-wrapper {
  margin-bottom: 0;
  width: 100%;
  flex: 0 0 100%;
}

/* Each image figure wrapper */
.gallery-display-image-wrapper {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--gallery-image-card-bg, #f0f0f0);
  border: var(--gallery-img-border-width, 0px) var(--gallery-img-border-style, solid) var(--gallery-img-border-color, transparent);
  border-radius: var(--gallery-img-border-radius, 0px);
  box-sizing: border-box;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-display-image-wrapper.gallery-image-error {
  cursor: default;
}

/* Base image (no ratio set) */
.gallery-display-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Ratio container */
.gallery-image-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
}

/* Image stretched in ratio box */
.gallery-image-ratio img.ratio-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Hover Overlay */
.gallery-overlay-info {
  position: absolute;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 15px;
  opacity: 0;
  transition: opacity 0.35s ease;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  top: 0;
}

.gallery-display-image-wrapper:hover .gallery-overlay-info {
  opacity: 1;
}

body.et-fb .gallery-display .gallery-overlay-info,
body.et_pb_editor .gallery-display .gallery-overlay-info,
.et-fb .gallery-display .gallery-overlay-info {
  opacity: 1;
}

.overlay-text {
  margin: 5px 0;
}

.overlay-text.overlay-title {
  font-weight: bold;
  font-size: 1.1em;
}

.overlay-text.overlay-caption {
  font-size: 0.9em;
}

.overlay-text.overlay-credit {
  font-size: 0.8em;
  font-style: italic;
  opacity: 0.9;
}

/* Overlay Position Variants */
.gallery-overlay-pos-top .gallery-overlay-info {
  justify-content: flex-start;
}

.gallery-overlay-pos-middle .gallery-overlay-info {
  justify-content: center;
}

.gallery-overlay-pos-bottom .gallery-overlay-info {
  justify-content: flex-end;
}

.gallery-lightbox-prev,
.gallery-vanilla-lightbox-prev,
.gallery-lightbox-next,
.gallery-vanilla-lightbox-next,
.gallery-lightbox-close,
.gallery-vanilla-lightbox-close,
.dicm-gallery-lightbox-button {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--gallery-lb-ctl-padding, 12px);
  background-color: var(--gallery-lb-ctl-bg-color, var(--gallery-lb-ctl-bg, rgba(255, 255, 255, 0.92)));
  background-image: var(--gallery-lb-ctl-bg-image, none);
  background-position: var(--gallery-lb-ctl-bg-position, center);
  background-size: var(--gallery-lb-ctl-bg-size, auto);
  background-repeat: var(--gallery-lb-ctl-bg-repeat, repeat);
  color: var(--gallery-lb-ctl-icon, #111);
  border-radius: var(--gallery-lb-ctl-radius, 999px);
  box-shadow: var(--gallery-lb-ctl-shadow, 0 10px 25px rgba(0, 0, 0, 0.35));
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: var(--gallery-lb-ctl-border-width, 0px);
  border-style: var(--gallery-lb-ctl-border-style, solid);
  border-color: var(--gallery-lb-ctl-border-color, transparent);
  cursor: pointer;
  z-index: 20;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none !important;
  font: inherit;
  line-height: 1;
  text-indent: 0;
  margin: 0;
  width: auto !important;
  height: auto !important;
  min-width: var(--gallery-lb-ctl-min-size, calc(var(--gallery-lb-ctl-size, 28px) + 24px));
  min-height: var(--gallery-lb-ctl-min-size, calc(var(--gallery-lb-ctl-size, 28px) + 24px));
  box-sizing: border-box;
}

.dicm-gallery-lightbox-button::before,
.dicm-gallery-lightbox-button::after,
.gallery-lightbox-prev::before,
.gallery-lightbox-prev::after,
.gallery-lightbox-next::before,
.gallery-lightbox-next::after,
.gallery-lightbox-close::before,
.gallery-lightbox-close::after,
.gallery-vanilla-lightbox-prev::before,
.gallery-vanilla-lightbox-prev::after,
.gallery-vanilla-lightbox-next::before,
.gallery-vanilla-lightbox-next::after,
.gallery-vanilla-lightbox-close::before,
.gallery-vanilla-lightbox-close::after {
  content: none !important;
  display: none !important;
}

.gallery-lightbox-prev,
.gallery-vanilla-lightbox-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--gallery-lb-nav-offset, 16px);
}

.gallery-lightbox-next,
.gallery-vanilla-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: var(--gallery-lb-nav-offset, 16px);
}

.gallery-lightbox-close,
.gallery-vanilla-lightbox-close {
  position: absolute;
  top: var(--gallery-lb-nav-offset, 16px);
  right: var(--gallery-lb-nav-offset, 16px);
}

.gallery-lightbox-prev:hover,
.gallery-vanilla-lightbox-prev:hover,
.gallery-lightbox-next:hover,
.gallery-vanilla-lightbox-next:hover,
.gallery-lightbox-close:hover,
.gallery-vanilla-lightbox-close:hover,
.dicm-gallery-lightbox-button:hover {
  background-color: var(--gallery-lb-ctl-hover-bg-color, var(--gallery-lb-ctl-bg-color, var(--gallery-lb-ctl-bg, rgba(255, 255, 255, 0.92))));
  background-image: var(--gallery-lb-ctl-hover-bg-image, var(--gallery-lb-ctl-bg-image, none));
  background-position: var(--gallery-lb-ctl-hover-bg-position, var(--gallery-lb-ctl-bg-position, center));
  background-size: var(--gallery-lb-ctl-hover-bg-size, var(--gallery-lb-ctl-bg-size, auto));
  background-repeat: var(--gallery-lb-ctl-hover-bg-repeat, var(--gallery-lb-ctl-bg-repeat, repeat));
  color: var(--gallery-lb-ctl-hover-icon-custom, var(--gallery-lb-ctl-hover-icon, var(--gallery-lb-ctl-icon, #111)));
  box-shadow: var(--gallery-lb-ctl-hover-shadow, var(--gallery-lb-ctl-shadow, 0 10px 25px rgba(0, 0, 0, 0.35)));
  border-width: var(--gallery-lb-ctl-hover-border-width, var(--gallery-lb-ctl-border-width, 0px));
  border-style: var(--gallery-lb-ctl-hover-border-style, var(--gallery-lb-ctl-border-style, solid));
  border-color: var(--gallery-lb-ctl-hover-border-color, var(--gallery-lb-ctl-border-color, transparent));
}

.gallery-lightbox-prev:hover,
.gallery-vanilla-lightbox-prev:hover,
.gallery-lightbox-next:hover,
.gallery-vanilla-lightbox-next:hover {
  transform: translateY(-50%) scale(1.05);
}

.gallery-lightbox-close:hover,
.gallery-vanilla-lightbox-close:hover {
  transform: scale(1.05);
}

.dicm-lightbox-style-proxies {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

.dicm-lightbox-style-proxy {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Lightbox Backdrop & Content */
.gallery-lightbox-backdrop,
.gallery-vanilla-lightbox-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  z-index: 99999;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 24px 32px;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

.gallery-vanilla-lightbox-backdrop {
  display: none;
}

.gallery-vanilla-lightbox-backdrop.show {
  display: flex !important;
}

.gallery-lightbox-content,
.gallery-vanilla-lightbox-content {
  --gallery-lb-ctl-footprint: calc(var(--gallery-lb-ctl-size, 28px) + (var(--gallery-lb-ctl-padding, 12px) * 2));
  position: relative;
  background: #0f0f10;
  border-radius: 6px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  width: min(var(--dicm-lb-width, 75vw), calc(100vw - 64px));
  max-width: calc(100vw - 64px);
  height: min(var(--dicm-lb-height, 85vh), var(--dicm-lb-available-height, calc(100vh - 0px)));
  max-height: var(--dicm-lb-available-height, calc(100vh - 0px));
  min-height: min(60vh, var(--dicm-lb-available-height, calc(100vh - 0px)));
  border: 1px solid rgba(255, 255, 255, 0.08);
  overscroll-behavior: contain;
}

.gallery-lightbox-body {
  display: flex;
  gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  /* Vertical stack: Upper Row (Img+Ad) then Bottom Row (Text/Banner) */
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  padding: var(--gallery-lb-shell-padding, 32px)
    calc(var(--gallery-lb-shell-padding, 32px) + var(--gallery-lb-nav-offset, 16px) + var(--gallery-lb-ctl-footprint) + var(--gallery-lb-ctl-gap, 12px));
  box-sizing: border-box;
}

.dicm-lightbox-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gallery-lb-ctl-size, 28px);
  height: var(--gallery-lb-ctl-size, 28px);
  flex: 0 0 var(--gallery-lb-ctl-size, 28px);
  color: inherit;
  line-height: 1;
  pointer-events: none;
}

.dicm-lightbox-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dicm-lightbox-icon path {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dicm-gallery-lightbox-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* Wrapper for Image + Ad Rail (Side by Side) */
.gallery-lightbox-upper-row {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  /* Grow to fill available height */
  min-height: 0;
  /* CRITICAL: Allows image to shrink vertically */
  width: 100%;
  gap: 18px;
}

/* Default order: image first (order: 1), ad rail second (order: 2) */
.gallery-lightbox-media {
  order: 1;
}

.gallery-lightbox-ad-rail,
.gallery-vanilla-lightbox-ad-rail {
  order: 2;
}

/* When ad is on left, reverse the order */
.gallery-lightbox-content.ad-position-left .gallery-lightbox-media,
.gallery-vanilla-lightbox-content.ad-position-left .gallery-lightbox-media {
  order: 2;
}

.gallery-lightbox-content.ad-position-left .gallery-lightbox-ad-rail,
.gallery-vanilla-lightbox-content.ad-position-left .gallery-vanilla-lightbox-ad-rail {
  order: 1;
}

/* NEW: Optional middle row so banner can sit on its own line
   between the upper media row and the meta text row. */
.gallery-lightbox-middle-row,
.gallery-vanilla-lightbox-middle-row {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  /* Do not stretch; just take natural height */
  width: 100%;
  gap: 12px;
  order: 2;
}

.gallery-lightbox-media {
  /* Default ratio of image area to sidebar ad rail.
     These values can be overridden via inline styles set by the module. */
  /* Always first visual group */
  height: 100%;
  /* Fill the Upper Row height */
  flex: 2;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  /* Arrows sit outside via absolute positioning; no extra horizontal padding here.
     We now pad the whole body instead so banner/meta/ads line up. */
  padding: 0;
  box-sizing: border-box;
  order: 1; /* Default: image first */
}

.gallery-lightbox-media.has-img-border .gallery-lightbox-image-container,
.gallery-vanilla-lightbox-image-container.has-img-border {
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.gallery-lightbox-ad-rail,
.gallery-vanilla-lightbox-ad-rail {
  order: 2;
  /* Sits next to image */
  flex: 1;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  /* Sidebar Meta Styling */
  justify-content: flex-start;
}

/* Border Logic - uses default border defined in .lightbox-ad-card */

/* If ad border is explicitly OFF, remove default */
.gallery-lightbox-ad-rail:not(.has-ad-border) .lightbox-ad-card,
.gallery-vanilla-lightbox-ad-rail:not(.has-ad-border) .lightbox-ad-card,
.gallery-lightbox-ad-banner:not(.has-ad-border) .lightbox-ad-card,
.gallery-vanilla-lightbox-ad-banner:not(.has-ad-border) .lightbox-ad-card {
  border: none;
  box-shadow: none;
}

/* Ad position left now uses order classes in upper-row instead of flex-direction: row-reverse */

.gallery-lightbox-content.ad-position-banner .gallery-lightbox-body,
.gallery-vanilla-lightbox-content.ad-position-banner .gallery-lightbox-body {
  flex-direction: column;
}

/* Fix for Banner Mode: ensure media takes full width */
.gallery-lightbox-content.ad-position-banner .gallery-lightbox-media,
.gallery-vanilla-lightbox-content.ad-position-banner .gallery-lightbox-media {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

.lightbox-ad-card {
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  color: inherit;
  box-sizing: border-box;
}

.lightbox-ad-slot {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  font-size: 0;
  /* Hide stray text nodes */
  flex-grow: 1;
  /* Ensure it fills the flex child */
}

/* Restore font size for inner content */
.lightbox-ad-slot .lightbox-ad-card {
  font-size: 1rem;
}

.lightbox-ad-title {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.lightbox-ad-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

/* In the side ad rail, make the image flex to fill the remaining vertical
   space so the ad column visually matches the main image column height. */
.gallery-lightbox-ad-rail .lightbox-ad-card,
.gallery-vanilla-lightbox-ad-rail .lightbox-ad-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gallery-lightbox-ad-rail .lightbox-ad-image,
.gallery-vanilla-lightbox-ad-rail .lightbox-ad-image {
  flex: 1 1 auto;
  height: 100%;
  object-fit: cover;
  min-height: 0;
}

/* Ad image fit - can be overridden by inline style */
.gallery-lightbox-ad-rail .lightbox-ad-image,
.gallery-vanilla-lightbox-ad-rail .lightbox-ad-image {
  object-fit: var(--ad-image-fit, cover);
}

/* Mobile ad visibility */
@media (max-width: 980px) {
  .gallery-lightbox-ad-rail.hide-ad-mobile,
  .gallery-vanilla-lightbox-ad-rail.hide-ad-mobile,
  .lightbox-ad-card.hide-ad-mobile,
  .lightbox-ad-slot.hide-ad-mobile {
    display: none !important;
  }
}

.lightbox-ad-description {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #dcdcdc;
}

.gallery-lightbox-ad-banner,
.gallery-vanilla-lightbox-ad-banner {
  flex: 0 0 auto;
  /* Allow natural height */
  width: 100%;
  margin-top: 12px;
  display: grid;
  gap: 12px;
  width: 100%;
}

.gallery-lightbox-image-container,
.gallery-vanilla-lightbox-image-container {
  background: #0a0a0a;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: var(--dicm-lb-available-height, calc(100vh - 0px));
  overflow: hidden;
  position: relative;
  /* Ensure container fills available space */
  width: 100%;
}

/* Hide text content in ::after pseudo-element if it's being used for background images */
.gallery-vanilla-lightbox-image-container::after {
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

/* --- Default Image in Lightbox (when unified scaling is OFF) ---
   IMPORTANT: target ONLY the main image inside the image container,
   not every <img> in the lightbox (so ads/logos keep their natural size). */
.gallery-lightbox-image-container img,
.gallery-vanilla-lightbox-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 3px;
  object-fit: var(--dicm-lb-object-fit, contain);
  object-position: center;
  /* Ensure image covers container completely */
  min-width: 100%;
  min-height: 100%;
}

/* --- Unified Scaling Active --- */
.unified-scaling-active .gallery-lightbox-image-container,
.unified-scaling-active .gallery-vanilla-lightbox-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
}

/*
 * === THE FIX FOR FRONTEND CROPPING ===
 * This rule now targets the image in BOTH the React builder and the vanilla
 * frontend. It forces the height to 100% of its container, which allows
 * the `object-fit: cover` property (applied by JS) to work correctly.
*/
.unified-scaling-active .gallery-lightbox-image-container img,
.unified-scaling-active .gallery-lightbox-image-container .gallery-vanilla-lightbox-img,
.unified-scaling-active .gallery-vanilla-lightbox-image-container img,
.unified-scaling-active .gallery-vanilla-lightbox-image-container .gallery-vanilla-lightbox-img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 3px;
  object-fit: var(--dicm-lb-object-fit, contain);
  object-position: center;
  /* Ensure image covers container completely */
  min-width: 100%;
  min-height: 100%;
}

/* --- JSON Index Autocomplete Dropdown --- */
.dicm-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--gallery-search-ac-bg, #ffffff);
  border: var(--gallery-search-ac-border-width, 1px) solid var(--gallery-search-ac-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--gallery-search-ac-radius, 4px);
  box-shadow: 0 10px var(--gallery-search-ac-shadow, 30px) rgba(0, 0, 0, 0.15);
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 100;
  max-height: var(--gallery-search-ac-max-height, 400px);
  overflow-y: auto;
}

.dicm-autocomplete-item {
  display: flex;
  align-items: center;
  padding: var(--gallery-search-ac-item-padding-y, 10px) 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
  color: var(--gallery-search-ac-text, #333333);
}

.dicm-autocomplete-item:hover {
  background: var(--gallery-search-ac-hover, #f5f5f5);
}

.dicm-autocomplete-item:last-child {
  border-bottom: none;
}

.dicm-autocomplete-thumb {
  width: var(--gallery-search-ac-thumb-size, 40px);
  height: var(--gallery-search-ac-thumb-size, 40px);
  object-fit: cover;
  border-radius: 3px;
  margin-right: 12px;
  flex: 0 0 auto;
}

.dicm-autocomplete-title {
  font-size: var(--gallery-search-ac-title-size, 14px);
  color: var(--gallery-search-ac-text, #333333);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* --- Search Empty State --- */
.gallery-no-results {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background-color: var(--gallery-image-card-bg, #f9f9f9);
  border-radius: 6px;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

.gallery-no-results i {
  font-size: 2.5rem;
  color: #ccc;
  margin-bottom: 15px;
}

.gallery-no-results .dicm-empty-icon {
  font-size: 2.5rem;
  color: #ccc;
  margin-bottom: 15px;
  line-height: 1;
}

.gallery-no-results p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 20px;
}

.gallery-no-results button {
  background: var(--gallery-filter-active-bg, #0073aa);
  color: var(--gallery-filter-active-text, #fff);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.gallery-no-results button:hover {
  opacity: 0.8;
}

/* --- Lightbox Entry Animations --- */

/* Base setup for entering */
.dicm-lb-anim-fade-zoom, 
.dicm-lb-anim-fade, 
.dicm-lb-anim-slide-up {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: both;
}

/* Fade In */
.dicm-lb-anim-fade {
  animation-name: dicm-lb-fadeIn;
}
@keyframes dicm-lb-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fade & Zoom */
.dicm-lb-anim-fade-zoom {
  animation-name: dicm-lb-fadeZoom;
}
@keyframes dicm-lb-fadeZoom {
  from { 
    opacity: 0;
    transform: scale(0.95);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Up */
.dicm-lb-anim-slide-up {
  animation-name: dicm-lb-slideUp;
}
@keyframes dicm-lb-slideUp {
  from { 
    opacity: 0;
    transform: translateY(30px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Lightbox Exit Animations --- */
.dicm-lb-anim-exit-fade-zoom {
  animation: dicm-lb-fadeZoomOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}
@keyframes dicm-lb-fadeZoomOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.9); }
}

.dicm-lb-anim-exit-fade {
  animation: dicm-lb-fadeOut 0.3s ease forwards !important;
}
@keyframes dicm-lb-fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.dicm-lb-anim-exit-slide-down {
  animation: dicm-lb-slideDown 0.3s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}
@keyframes dicm-lb-slideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(50px); opacity: 0; }
}

/* Filter Dropdown Styling */
.gallery-display .gallery-filter-select {
  background-color: var(--gallery-filter-dropdown-bg, #ffffff);
  color: var(--gallery-filter-dropdown-text, #333333);
  border: 1px solid var(--gallery-filter-dropdown-border, #dddddd);
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  min-width: 200px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 35px;
}

.gallery-display .gallery-filter-select:focus {
  border-color: var(--gallery-filter-active-bg, #0073aa);
  box-shadow: 0 0 0 2px rgba(0,115,170,0.1);
}


/* Lightbox meta text container - Moved to root level */
.lightbox-meta-content {
  text-align: left;
  color: #ddd;
  margin-top: 10px;
  flex-shrink: 0;
  /* Now it is a full row item in the vertical stack */
  flex: 0 0 auto;
  width: 100%;
  order: 3;
  /* Default: below image/ad */

  max-height: 35vh;
  /* Safety: Don't let text eat entire screen */
  overflow-y: auto;
  padding-right: 4px;
  color: inherit;
}

.lightbox-meta-content.meta-pos-sidebar {
  max-height: none;
  /* In sidebar, let it flow */
  overflow-y: visible;
  margin: 10px 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

/* Meta position order classes */
.lightbox-meta-content.meta-order-above {
  order: 2;
  /* Above banner */
}

.lightbox-meta-content.meta-order-bottom {
  order: 3;
  /* Below banner (default) */
}

/* Bottom Banner / Meta Order */
[data-banner-order="text_first"] .gallery-lightbox-media,
.banner-order-text_first {
  display: flex;
  flex-direction: column;
}

/* For React DOM specifically, we used a class on the wrapper div, but wait.
   In React we just render them in order if we want.
   But for the CSS-based reordering in Vanilla or mixed containers: */
.gallery-lightbox-media .lightbox-meta-content.banner-order-text_first {
  order: -1;
}

.gallery-lightbox-content.ad-position-banner .gallery-lightbox-media,
.gallery-vanilla-lightbox-content.ad-position-banner .gallery-lightbox-media {
  display: contents;
  /* Allows reordering children with Layout Banner */
}

/* Now Reordering Logic for Banner Mode */
/* Image Container always first */
.gallery-lightbox-content.ad-position-banner .gallery-lightbox-image-container,
.gallery-vanilla-lightbox-content.ad-position-banner .gallery-vanilla-lightbox-image-container {
  order: 1;
  width: 100%;
  /* Ensure full width since parent is now body/column */
  flex: 0 0 auto;
  max-height: 70vh;
  /* Limit height so text/banner fit */
}

/* Default: Text First (Banner below Text) - Current structure */
/* Image(1), Meta(2), Banner(3). 
   Wait, in HTML Banner is *after* Media. So Banner is naturally last.
   So Meta (2), Banner (3). Correct. */

/* Banner / Meta Order Logic
   Structure: Upper Row (order: 1), Middle Row/Banner (order: 2), Meta Content (order: 3)
   
   Banner First: Banner(2), Meta(3) - default
   Text First: Meta(2), Banner(3) - swapped
*/

/* Default: Banner First (Banner above Text) */
[data-banner-order="banner_first"] .gallery-lightbox-middle-row,
[data-banner-order="banner_first"] .gallery-vanilla-lightbox-middle-row,
.gallery-vanilla-lightbox-content.banner-order-banner_first .gallery-vanilla-lightbox-middle-row {
  order: 2;
}

[data-banner-order="banner_first"] .lightbox-meta-content,
.gallery-vanilla-lightbox-content.banner-order-banner_first .lightbox-meta-content {
  order: 3;
}

/* Text First (Text above Banner) */
[data-banner-order="text_first"] .lightbox-meta-content,
.gallery-vanilla-lightbox-content.banner-order-text_first .lightbox-meta-content {
  order: 2;
}

[data-banner-order="text_first"] .gallery-lightbox-middle-row,
[data-banner-order="text_first"] .gallery-vanilla-lightbox-middle-row,
.gallery-vanilla-lightbox-content.banner-order-text_first .gallery-vanilla-lightbox-middle-row {
  order: 3;
}

/* Ensure Meta takes full width in banner mode */
.gallery-lightbox-content.ad-position-banner .lightbox-meta-content {
  width: 100%;
}

.lightbox-title:empty,
.lightbox-caption-text:empty,
.lightbox-credit:empty {
  display: none;
}

.overlay-title:empty,
.overlay-caption:empty,
.overlay-credit:empty {
  display: none;
}

.lightbox-title {
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #fff;
}

.lightbox-caption-text {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 5px;
}

.lightbox-credit {
  margin-top: 8px;
  font-style: italic;
  font-size: 0.9rem;
  opacity: 0.7;
}

.gallery-title:empty {
  margin: 0;
  padding: 0;
  display: none;
}

.gallery-preview .gallery-title:empty {
  display: none;
}

.gallery-preview {
  position: relative;
  z-index: 10;
  /* Boost z-index to stay visible in builder */
  display: block;
  /* Ensure it's not hidden by default */
  min-height: 50px;
  /* Force some height */
}

/* Ensure preview is visible in VB even if lightbox is "open" globally */
/* This rule is intentionally left empty to prevent global hiding in builder */

body:not(.et-fb) .gallery-preview.hidden-by-lightbox {
  visibility: hidden !important;
  opacity: 0 !important;
}

.gallery-lightbox-backdrop .gallery-preview,
.gallery-vanilla-lightbox-backdrop .gallery-preview {
  display: none !important;
}

/* Force the lightbox to sit on top of everything else */
.gallery-lightbox-backdrop,
.gallery-vanilla-lightbox-backdrop {
  z-index: 2147483000 !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.gallery-lightbox-content,
.gallery-vanilla-lightbox-content {
  z-index: 2147483001 !important;
}

@media (max-width: 980px) {
  .gallery-lightbox-body {
    flex-direction: column;
    overflow-y: visible;
    padding: min(var(--gallery-lb-shell-padding, 32px), 16px);
  }

  .gallery-lightbox-ad-rail,
  .gallery-vanilla-lightbox-ad-rail {
    width: 100%;
    min-width: 0;
    order: 2;
    flex: 0 0 auto !important;
    /* Override inline flex ratio on mobile */
  }

  /* Mobile: Stack everything vertically */
  .gallery-lightbox-upper-row {
    flex-direction: column !important;
    height: auto !important;
    flex: 0 0 auto !important;
    /* Don't force grow on mobile scrolling layout */
  }

  .gallery-lightbox-media {
    flex: 0 0 auto !important;
    /* Override inline flex ratio on mobile */
    width: 100% !important;
    height: auto !important;
    /* Let image define height */
  }

  .gallery-lightbox-content,
  .gallery-vanilla-lightbox-content {
    width: min(var(--dicm-lb-width, 75vw), calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: var(--dicm-lb-available-height, calc(100vh - 48px));
    overflow-y: auto;
  }

  .gallery-lightbox-prev,
  .gallery-vanilla-lightbox-prev {
    left: 12px;
  }

  .gallery-lightbox-next,
  .gallery-vanilla-lightbox-next {
    right: 12px;
  }
}

@media (max-width: 640px) {

  .gallery-lightbox-prev,
  .gallery-lightbox-next {
    top: 48%;
  }

  .gallery-lightbox-content,
  .gallery-vanilla-lightbox-content {
    width: min(var(--dicm-lb-width, 75vw), calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

}

@media (max-width: 767px) {
  .gallery-grid-ad-tile.hide-grid-ad-mobile {
    display: none !important;
  }
}

.gallery-display-image-wrapper {
  flex: 0 0 auto;
}

.overlay-icon {
  font-size: 1.2em;
  margin-right: .3em;
}

/* Keeps overlay text readable on tiny thumbnails */
.gallery-display .overlay-text {
  font-size: clamp(12px, 1.5vw, 20px);
}

/* load-more button – keeps padding from stretching the gallery */
.gallery-display .gallery-load-more.et_pb_button {
  display: inline-block;
  /* stops it from going full-width */
  box-sizing: border-box;
  /* include padding inside the width */
}

/* let Divi’s inner span inherit that padding */
.gallery-display .gallery-load-more .et_pb_button_text {
  padding: inherit;
}

/* Search Clear Button */
.gallery-display .gallery-search-container { 
  position: relative; 
  display: block; 
  width: var(--gallery-search-input-width, auto); 
  max-width: 100%;
  box-sizing: border-box;
  /* Ensure padding/margin are visible and container expands */
  min-height: 0;
  /* Allow container to grow with padding */
  overflow: visible;
  /* Ensure container expands to show padding */
  flex-shrink: 0;
}
.gallery-display .gallery-search-container {
  position: relative !important;
  overflow: visible !important;
  z-index: 100;
}
.gallery-display .gallery-search-input-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.gallery-display .gallery-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; background: none; border: none; font-size: 18px; color: #999; padding: 0; line-height: 1; z-index: 5; }
.gallery-display .gallery-search-clear:hover { color: #333; }
.gallery-display .gallery-search-input { 
  padding-right: var(--gallery-search-text-offset-right, 40px) !important; 
  /* Fill the container's content area (inside padding) - this accounts for container padding */
  width: 100%;
  box-sizing: border-box;
  display: block;
  /* Ensure input respects container padding and fills available space */
  margin: 0;
  /* Ensure input expands to fill container - allow it to grow */
  min-height: auto;
  /* Make sure input expands to show container padding */
  height: var(--gallery-top-control-height, auto);
}

/* Inline Search - sits next to filter buttons */
.gallery-filters .gallery-search-container.gallery-search-inline {
  width: var(--gallery-search-input-width, auto);
  flex: 0 1 var(--gallery-search-input-width, auto);
  min-width: 0;
  display: block;
  /* Isolate margin/padding so it doesn't affect filter buttons */
  align-self: flex-start;
  /* Ensure padding doesn't affect flex layout */
  box-sizing: border-box;
  /* Allow container to grow with padding */
  overflow: visible;
}
/* Only apply default margin-right if user hasn't set custom margin - but don't let it affect filter buttons */
.gallery-filters .gallery-search-container.gallery-search-inline:not([style*="margin-right"]):not([style*="margin:"]) {
  margin-right: 0;
}
/* Prevent inline search container margin from affecting filter button alignment */
.gallery-filters > .gallery-search-container.gallery-search-inline {
  /* Isolate this element's spacing from affecting siblings */
  isolation: isolate;
}

.gallery-filters .gallery-search-container.gallery-search-inline .gallery-search-input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 980px) {
  .gallery-display .gallery-search-container,
  .gallery-filters .gallery-search-container.gallery-search-inline {
    width: var(--gallery-search-input-width-tablet, var(--gallery-search-input-width, auto));
  }
}

@media (max-width: 767px) {
  .gallery-display .gallery-search-container,
  .gallery-filters .gallery-search-container.gallery-search-inline {
    width: var(--gallery-search-input-width-phone, var(--gallery-search-input-width-tablet, var(--gallery-search-input-width, auto)));
  }
}

/* --- Phase 4 Advanced Designer Controls Mapping --- */

/* Active Filter Buttons */
.gallery-display.has-custom-filter-active .gallery-filters .et_pb_button.active {
    background-color: var(--gallery-filter-active-bg) !important;
    color: var(--gallery-filter-active-text) !important;
    border-color: var(--gallery-filter-active-border) !important;
}

/* Search Dropdown / Text Offset */
.gallery-display .gallery-search-container {
    z-index: 1000 !important;
}
.gallery-display .gallery-search-input {
    padding-left: var(--gallery-search-text-offset, 16px) !important;
    padding-right: var(--gallery-search-text-offset-right, 40px) !important;
    min-height: var(--gallery-top-control-height, auto);
    height: var(--gallery-top-control-height, auto);
}
.gallery-display .gallery-filter-select {
    min-height: var(--gallery-top-control-height, auto);
    height: var(--gallery-top-control-height, auto);
    box-sizing: border-box;
}

/* Ad Cards */
.lightbox-ad-card {
    background-color: var(--gallery-ad-bg, #151515);
    border: var(--gallery-ad-border-w, 1px) solid var(--gallery-ad-border, rgba(255,255,255,0.06));
    border-radius: var(--gallery-ad-radius, 6px);
}
.lightbox-ad-image {
    border-radius: var(--gallery-ad-img-radius, 4px);
}
.lightbox-ad-title {
    color: var(--gallery-ad-title-color, #ffffff) !important;
    font-size: var(--gallery-ad-title-size, 16px) !important;
}
.lightbox-ad-description {
    color: var(--gallery-ad-desc-color, #dcdcdc) !important;
    font-size: var(--gallery-ad-desc-size, 15px) !important;
}

.lightbox-ad-placeholder {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
}

/* Image Wrapper Background */
.gallery-display-image-wrapper {
    background-color: var(--gallery-image-card-bg, #f0f0f0);
}

.gallery-display .gallery-display-images {
    position: relative;
    z-index: 1;
}

.gallery-display .gallery-filters,
.gallery-display .gallery-search-container,
.gallery-display .gallery-search-input-wrap {
    position: relative;
    overflow: visible !important;
    z-index: 20;
}

/* Search Autocomplete (Google-style) */
.dicm-autocomplete {
  position: absolute;
  top: calc(100% + var(--gallery-search-ac-offset-y, 6px));
  left: 0;
  right: auto;
  width: var(--gallery-search-ac-width, 100%);
  max-width: calc(100vw - 32px);
  background: var(--gallery-search-ac-bg, #ffffff);
  border-radius: var(--gallery-search-ac-radius, 4px);
  box-shadow: 0 10px var(--gallery-search-ac-shadow, 30px) rgba(0, 0, 0, 0.15);
  margin: 0;
  padding: 8px 0;
  list-style: none;
  z-index: 2000;
  max-height: var(--gallery-search-ac-max-height, 400px);
  overflow-y: auto;
  border: var(--gallery-search-ac-border-width, 1px) solid var(--gallery-search-ac-border, rgba(0,0,0,0.08));
  box-sizing: border-box;
}

.dicm-autocomplete-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--gallery-search-ac-item-gap, 12px) !important;
  padding: var(--gallery-search-ac-item-padding-y, 10px) var(--gallery-search-ac-item-padding-x, 16px) !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  color: var(--gallery-search-ac-text, #333333) !important;
  font-size: var(--gallery-search-ac-title-size, 14px) !important;
  border-bottom: var(--gallery-search-ac-divider-width, 1px) solid var(--gallery-search-ac-divider, rgba(0,0,0,0.08)) !important;
  box-sizing: border-box;
}

.dicm-autocomplete-item:hover,
.dicm-autocomplete-item:focus-within {
  background: var(--gallery-search-ac-hover, #f5f5f5) !important;
}

.dicm-autocomplete-item:hover .dicm-autocomplete-title,
.dicm-autocomplete-item:focus-within .dicm-autocomplete-title,
.dicm-autocomplete-item:hover .dicm-autocomplete-secondary,
.dicm-autocomplete-item:focus-within .dicm-autocomplete-secondary {
  color: var(--gallery-search-ac-hover-text, #111111) !important;
}

.dicm-autocomplete-item.no-thumb {
  align-items: center !important;
}

.dicm-autocomplete-thumb {
  width: var(--gallery-search-ac-thumb-size, 40px) !important;
  height: var(--gallery-search-ac-thumb-size, 40px) !important;
  object-fit: cover !important;
  border-radius: var(--gallery-search-ac-thumb-radius, 4px) !important;
  background: #eee !important;
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}

.dicm-autocomplete-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.dicm-autocomplete-title {
  flex: 1 !important;
  font-size: var(--gallery-search-ac-title-size, 14px) !important;
  color: var(--gallery-search-ac-text, #333333) !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: var(--gallery-search-ac-title-lines, 1) !important;
  -webkit-box-orient: vertical !important;
}

.dicm-autocomplete-secondary {
  color: var(--gallery-search-ac-secondary-text, #6b7280) !important;
  font-size: var(--gallery-search-ac-secondary-size, 12px) !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.gallery-grid-ad-tile {
  display: flex;
  text-decoration: none;
  color: inherit;
}

.gallery-grid-ad-card {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gallery-grid-ad-bg, #111111);
  border: var(--gallery-grid-ad-border-width, 1px) solid var(--gallery-grid-ad-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--gallery-grid-ad-radius, 6px);
  overflow: hidden;
}

.gallery-grid-ad-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.06);
}

.gallery-grid-ad-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

.gallery-grid-ad-title {
  color: var(--gallery-grid-ad-title-color, #ffffff);
  font-size: var(--gallery-grid-ad-title-size, 18px);
  font-weight: 700;
  line-height: 1.2;
}

.gallery-grid-ad-description,
.gallery-grid-ad-description p {
  color: var(--gallery-grid-ad-desc-color, #e7e7e7);
  font-size: var(--gallery-grid-ad-desc-size, 14px);
  line-height: 1.5;
}

.gallery-grid-ad-description p:last-child {
  margin-bottom: 0;
}

/* Scrollbar for Autocomplete */
.dicm-autocomplete::-webkit-scrollbar {
  width: 6px;
}
.dicm-autocomplete::-webkit-scrollbar-track {
  background: transparent;
}
.dicm-autocomplete::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}