.u-gallery-container {
  font-family: 'Source Sans Pro', sans-serif;
  background: #f7fafc;
  margin: 48px auto;
  max-width: 1000px;
  border-radius: 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  user-select: none;
  overflow: hidden;
  position: relative;
  padding: 0;
}

/* ----------- Main Image Area ---------- */
.u-gallery-main-image-container {
  height: 54vh;
  min-height: 340px;
  background: #f7fafc;
  position: relative;
  overflow: hidden;
  z-index: 11;
}
.u-gallery-main-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* -------- Caption -------- */
.u-gallery-caption {
  position: absolute;
  left: 24px;
  top: 20px;
  color: #fff;
  background: #1a365dc9;
  border-radius: 8px;
  padding: 0.5rem 1.3rem;
  font-size: 1rem;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 20;
  transition: opacity 0.15s;
}
.u-gallery-caption.invisible {
  opacity: 0;
  pointer-events: none;
}

/* -------- Tool Buttons: Bottom Right -------- */
.u-gallery-tools {
  position: absolute;
  right: 38px;
  bottom: 28px;
  border-radius: 1rem;
  padding: 0.55em 0.7em;
  display: flex;
  gap: 8px;
  z-index: 30;
}
.u-gallery-tools button {
  background: #3182ce;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.u-gallery-tools button.disabled,
.u-gallery-tools button:disabled {
  background: #ccc !important;
  color: #888 !important;
  cursor: not-allowed !important;
}

/* -------- Navigation Arrows -------- */
.u-gallery-nav-arrow {
  border: none;
  background: #2d3748ed;
  color: #fff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.7rem;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  transition: background 0.2s;
}
#u-gallery-prev-btn { left: 16px; }
#u-gallery-next-btn { right: 16px; }

/* --------- Toolbar/Filters Above Thumb Bar --------- */
.u-gallery-thumbnail-container {
  background: #f7fafc;
  padding: 1.1rem 2rem;
  border-top: 1px solid #e2e8f0;
  z-index: 5;
  position: relative;
}
.u-gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 20px;
}
.u-gallery-toolbar-title { font-family: Inter,sans-serif; font-weight:700; font-size:1.35rem; color:#222; }
.u-gallery-toolbar-right-group { display: flex; align-items: center; gap:14px; }
.u-gallery-toolbar-filter select,
.u-gallery-fullscreen-toolbar-filter select {
  appearance: none;
  border-radius: 4px;
  padding: 6px 33px 6px 16px;
  background: white url('data:image/svg+xml;utf8,<svg fill="gray" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 14px center;
  background-size: 18px 18px;
  border: 1.5px solid #b3c7e6;
  color: #222;
  font-family: inherit;
}
.u-gallery-slideshow-btn, .u-gallery-fullscreen-slideshow-btn {
  padding: 6px 19px;
  border-radius: 5px;
  background: #3182ce;
  color: #fff;
  border: none;
  font-weight: 600;
  transition: all 0.2s;
}
.u-gallery-slideshow-btn.active, .u-gallery-fullscreen-slideshow-btn.active {
  background: #b3d4fc !important;
  color: #222 !important;
}

/* -------- Thumbnails Style -------- */
.u-gallery-thumbnail-row, .u-gallery-fullscreen-thumbnail-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.u-gallery-thumb-arrow, .u-gallery-fullscreen-thumb-arrow {
  width: 38px;
  height: 60px;
  font-size: 1.7em;
  background: #e0e7ef;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #3182ce;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin: 0 8px;
}
.u-gallery-thumb-arrow:disabled, .u-gallery-fullscreen-thumb-arrow:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}
#u-gallery-thumbnail-strip, #u-gallery-fullscreen-thumbnail-strip {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  width: calc(98px * 6 + 0.85rem * 5);
  min-width: 0;
  scroll-behavior: smooth;
  padding: 10px 10px 10px 18px;
}
#u-gallery-thumbnail-strip::-webkit-scrollbar,
#u-gallery-fullscreen-thumbnail-strip::-webkit-scrollbar { display: none; }
.u-gallery-thumbnail-wrap, .u-gallery-fullscreen-thumbnail-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 7px;
  background: none;
  transition: transform 0.18s;
  cursor: pointer;
}
.u-gallery-thumbnail-wrap.active, .u-gallery-fullscreen-thumbnail-wrap.active {
  transform: scale(1.13);
  z-index: 2;
}
.u-gallery-thumbnail, .u-gallery-fullscreen-thumbnail {
  width:98px; flex:0 0 98px; height:68px;
  border-radius:12px; overflow:hidden;
  border:0.8px solid #2563eb; outline:1px solid #93c5fd;
  background:#fff; cursor:pointer;
  filter:grayscale(90%) opacity(0.5);
  transition: filter 0.2s, outline 0.2s, border 0.2s, border-radius 0.2s;
  margin: 0;
}
.u-gallery-thumbnail.active, .u-gallery-fullscreen-thumbnail.active {
  border-color:#1452b7; outline:1px solid #2563eb;
  background:#e3edfb; filter:none !important; opacity:1;
}
.u-gallery-thumbnail img, .u-gallery-fullscreen-thumbnail img {
  width:100%; height:100%; object-fit:contain;
  border-radius:12px; background:#f3f6fa;
  pointer-events:none; user-select:none;
}

/* -------- Fullscreen Overlay & Image -------- */
#u-gallery-fullscreen-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #222d; color: #fff;
  align-items: center; justify-content: center;
  z-index: 200; flex-direction: column;
}
#u-gallery-fullscreen-overlay.active { display: flex; }
.u-gallery-fullscreen-bar {
  display: flex; align-items:center; gap:16px; justify-content:center; width:100%; max-width:920px; margin-bottom:12px;
}
#u-gallery-fullscreen-image {
  max-width:92vw; max-height:64vh; background:#fff; border-radius:20px;
  cursor:grab; transition:transform 0.15s;
  user-drag:none; -webkit-user-drag:none;
  display:block; pointer-events:auto !important;
}
#u-gallery-fullscreen-image.zoomed { cursor: grab; }
#u-gallery-fullscreen-image.panning { cursor: grabbing; }
.u-gallery-fullscreen-thumbbar {
  width:100%; max-width:920px; min-width:320px;
  margin:0 auto; padding:1.1rem 0 0.6rem 0;
  background:rgba(26,38,93,0.03);
  position:relative; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center;
}
.u-gallery-fullscreen-toolbar { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:10px; padding:0 16px; width:100%; max-width:870px; box-sizing:border-box; text-align:center;}
.u-gallery-fullscreen-toolbar-right { display:flex; align-items:center; gap:14px; justify-content:center; }
.u-gallery-fullscreen-toolbar-filter { display:flex; align-items:center; gap:7px; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: 1 !important; }
#u-gallery-fullscreen-prev,#u-gallery-fullscreen-next,#u-gallery-fullscreen-close,#u-gallery-fullscreen-zoom-in,#u-gallery-fullscreen-zoom-out,#u-gallery-fullscreen-zoom-reset {
  background: #2d3748dd;
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 2em;
  cursor: pointer;
  z-index: 5;
  margin: 0 2px;
  transition: background 0.2s;
}
#u-gallery-fullscreen-close { position: fixed; top: 28px; right: 33px; }

#u-gallery-fullscreen-slideshow-timer {
  color: #222 !important;
  background: #fff !important;
  border: 1.5px solid #b3c7e6 !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #222 !important; /* Fix for Safari */
  text-align: center !important;
}