/* #region InlineImage */
.grid-image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  margin-right: 10px;
}
.grid-image-container.square {
  aspect-ratio: 1 / 1;
}
.grid-image-container.landscape {
  aspect-ratio: 16 / 9;
}
.grid-image-container.portrait {
  aspect-ratio: 3 / 4;
}
.grid-image-container.auto {
  aspect-ratio: auto;
}
.grid-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-radius: 5px;
}
.grid-image-container img:hover {
  transform: scale(0.95);
}
.grid-image-container .hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s ease;
  color: var(--wgl-white);
  font-size: 1.5rem;
}
.grid-image-container:hover .hover-overlay {
  opacity: 1;
}
/* #endregion InlineImage */

/* #region Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay.is-open {
  display: flex;
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.lightbox-figure {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The figure itself is inert so a click in the letterboxed margin reaches the
     backdrop and closes; the image below opts back in, because clicking IT is
     the zoom gesture. */
  pointer-events: none;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
  /* A photo with transparency needs an opaque mat or it composites onto the
     backdrop and reads as a hole. White in both themes on purpose: this is the
     mat a print is laid on, not a page surface, and flipping it to ink would
     make every transparent PNG look like a different image on the dark theme. */
  background: var(--wgl-white);
  pointer-events: auto;
  cursor: zoom-in;
}
/* Nothing to magnify — sourceOf() gave us an image already shown whole, and
   toggleZoom() refuses it. The cursor has to agree, or it promises a gesture
   that does nothing. */
.lightbox-overlay:not(.is-gallery) .lightbox-img[data-fits="1"] { cursor: default; }

/* ── Zoomed: actual size, scrollable ─────────────────────────
   The caps come off and the figure becomes the viewport. `object-fit` has to
   go with them: at natural size it would letterbox inside a box that is now
   bigger than the screen, which is exactly the scrolling we want to allow. */
.lightbox-overlay.is-zoomed .lightbox-figure {
  pointer-events: auto;
  overflow: auto;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: grab;
  overscroll-behavior: contain;
}
.lightbox-overlay.is-zoomed .lightbox-img {
  max-width: none;
  max-height: none;
  object-fit: none;
  border-radius: 0;
  cursor: zoom-out;
  margin: auto;
}
/* The caption would otherwise sit at the far bottom-right of a 4000px canvas. */
.lightbox-overlay.is-zoomed .lightbox-caption { display: none; }

/* ── Loading ─────────────────────────────────────────────────
   Only while a NEW source decodes. Stepping a gallery preloads its neighbours,
   so in practice this shows on the first open and on a slow original. */
.lightbox-overlay.is-loading .lightbox-img { opacity: 0.35; }
.lightbox-img { transition: opacity 0.15s ease; }

.lightbox-caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  margin-top: 10px;
  text-align: center;
  max-width: 60ch;
  pointer-events: none;
}
.lightbox-caption[hidden] { display: none; }
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--wgl-white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--wgl-white);
  font-size: 20px;
  cursor: pointer;
  display: none;
  transition: background 0.2s ease;
}
.lightbox-overlay.is-gallery .lightbox-nav {
  display: block;
}
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}
/* Logical, not left/right: in Arabic the gallery reads right-to-left, so
   "previous" has to sit on the start edge whichever side that is. The glyphs
   are mirrored with it — a ❮ pointing at the next image is a wrong sign. */
.lightbox-prev {
  inset-inline-start: 24px;
}
.lightbox-next {
  inset-inline-end: 24px;
}
[dir="rtl"] .lightbox-prev,
[dir="rtl"] .lightbox-next {
  transform: translateY(-50%) scaleX(-1);
}
.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
body.lightbox-open {
  overflow: hidden;
}
/* #endregion Lightbox */

/* #region DragDropMultiImages */
.drag-drop-container {
  margin-bottom: 20px;
}
.drag-drop-zone {
  width: 100%;
  border: 2px dashed var(--bs-border-color);
  border-radius: 8px;
  padding: 12px;
  background: var(--s-card-bg);
  cursor: pointer;
  transition: all 0.6s ease;
  position: relative;
  min-height: 60px;
}
.drag-drop-zone:hover {
  border-color: var(--accent-color);
  background: var(--bs-secondary-bg);
}
.drag-drop-zone.drag-over {
  border-color: var(--accent-color) !important;
  background: var(--bs-secondary-bg) !important;
  transform: scale(1.02);
}
.drag-drop-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.drag-drop-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.drag-drop-icon {
  font-size: 16px;
  color: var(--s-input-text);
}
.drag-drop-text {
  font-weight: 500;
  color: var(--s-input-text);
  font-size: 13px;
}
.auto-crop-section {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  /* NOT --accent-color: that is the brand yellow, 1.4:1 as text on
     this card. --bs-primary-text-emphasis is the readable step. */
  color: var(--bs-primary-text-emphasis);
}
.auto-crop-checkbox {
  margin: 0 !important;
}
.crop-dimensions {
  color: var(--bs-primary-text-emphasis);
  font-size: 11px;
  margin-left: 4px;
}
.upload-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--bs-body-bg-rgb), 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  z-index: 10;
}
.upload-loading.show {
  display: flex;
}
.loading-content {
  text-align: center;
  color: var(--bs-primary-text-emphasis);
}
.loading-spinner {
  font-size: 18px;
  margin-bottom: 4px;
}
.loading-text {
  font-size: 12px;
}
.image-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--bs-border-color-translucent);
  max-height: 120px;
  overflow-y: auto;
  min-height: 0;
}
.image-previews:empty {
  display: none;
}
.thumbnail-card {
  position: relative;
  width: 85px;
  height: 65px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--s-shadow-xs);
}
.thumbnail-card:hover {
  transform: scale(1.02);
}
.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}
.thumbnail-card:hover .thumbnail-image {
  transform: scale(1.1);
}
.thumbnail-zoom-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
}
.thumbnail-card:hover .thumbnail-zoom-overlay {
  opacity: 1;
}
.zoom-icon {
  color: white;
  font-size: 16px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.thumbnail-overlay {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(var(--bs-danger-rgb), 0.95);
  color: white;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.thumbnail-card:hover .thumbnail-overlay {
  opacity: 1;
}
.thumbnail-overlay:hover {
  background: var(--bs-danger);
  transform: scale(1.1);
}
@media (max-width: 768px) {
  .drag-drop-content {
    flex-direction: column;
    align-items: stretch;
  }
  .drag-drop-info {
    min-width: auto;
  }
  .tool-group {
    justify-content: center;
  }
  .image-previews {
    max-height: 80px;
  }
  .thumbnail-card {
    width: 70px;
    height: 50px;
  }
}
/* #endregion DragDropMultiImages */

/* ===== RTL support — mirror LTR directional rules to match the English layout ===== */
[dir="rtl"] .grid-image-container { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .lightbox-close { right: auto; left: 24px; }
[dir="rtl"] .lightbox-prev { left: auto; right: 24px; }
[dir="rtl"] .lightbox-next { right: auto; left: 24px; }
[dir="rtl"] .crop-dimensions { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .thumbnail-overlay { right: auto; left: 2px; }