/**
 * Main image gallery view styles.
 *
 * @package    ACT_Gallery
 * @subpackage ACT_Gallery/public/css
 */

.act-gallery-main-image {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  width: 100%;
  position: relative;
  overflow: visible;
  isolation: isolate; /* Create new stacking context to contain z-index */
  z-index: 1; /* Set base z-index for the gallery */
  min-height: 1px; /* Ensure container takes up space */
}

.act-main-image-section {
  width: 100%;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  overflow: visible;
}

.act-main-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.act-main-image-container {
  position: relative;
  width: 800px; /* Default fixed width */
  height: 600px; /* Default fixed height */
  max-width: 100%; /* Responsive on small screens */
  aspect-ratio: 4/3; /* Default aspect ratio for responsive scaling */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* No background color */
  box-sizing: border-box;
  flex-shrink: 0;
  /* Fixed size prevents container from resizing when images change */
}

.act-main-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain; /* Fit image within fixed container without distortion */
  object-position: center; /* Center the image */
  transition: opacity 0.3s ease; /* Smooth transition between images */
}

.act-main-image-title,
.act-main-image-caption {
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  z-index: 2;
}

.act-main-image-title {
  font-size: 18px;
  font-weight: 600;
  bottom: 0;
}

.act-main-image-caption {
  font-size: 14px;
  opacity: 0.9;
  bottom: 0;
  margin-bottom: 40px; /* Position above title if both are shown */
}

.act-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  width: 44px; /* Touch-friendly minimum size */
  height: 44px; /* Touch-friendly minimum size */
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* Relative to parent isolation context */
  transition: background 0.3s ease, outline 0.2s ease;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

.act-nav-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Focus styles for accessibility */
.act-nav-button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: rgba(0, 0, 0, 0.8);
}

.act-nav-prev {
  left: 10px;
}

.act-nav-next {
  right: 10px;
}

.act-thumbnails-container {
  width: 100%;
  position: relative;
  overflow: visible; /* Allow arrows to be visible outside the scroll area */
  flex-shrink: 0;
  margin: 0 auto;
  /* Add padding to contain the navigation arrows inside the container */
  padding-top: 50px; /* Space for top arrows when thumbnails are on left/right */
  padding-bottom: 50px; /* Space for bottom arrows when thumbnails are on left/right */
  padding-left: 50px; /* Space for left arrows when thumbnails are on top/bottom */
  padding-right: 50px; /* Space for right arrows when thumbnails are on top/bottom */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Adjust padding based on thumbnail position - keep padding for arrows */
.act-gallery-main-image.act-thumbnail-position-top .act-thumbnails-container,
.act-gallery-main-image.act-thumbnail-position-bottom
  .act-thumbnails-container {
  padding-top: 0;
  padding-bottom: 0;
  /* Keep horizontal padding for left/right arrows */
  padding-left: 50px; /* Space for left arrow */
  padding-right: 50px; /* Space for right arrow */
  /* Limit height for top/bottom positions */
  max-height: 150px; /* Reasonable max height for horizontal thumbnail strip */
  height: auto;
}

.act-gallery-main-image.act-thumbnail-position-left .act-thumbnails-container,
.act-gallery-main-image.act-thumbnail-position-right .act-thumbnails-container {
  padding-left: 0;
  padding-right: 0;
  /* Keep vertical padding for up/down arrows */
  padding-top: 50px; /* Space for top arrow */
  padding-bottom: 50px; /* Space for bottom arrow */
  /* Limit width for left/right positions */
  max-width: 200px; /* Reasonable max width for vertical thumbnail strip */
  width: auto;
}

.act-thumbnails-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0; /* No padding - thumbnails should fill container width */
  margin: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  border-radius: 4px;
  align-items: flex-start; /* Align items to top */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  /* Hide scrollbar but allow scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.act-thumbnails-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Thumbnail navigation buttons */
.act-thumb-nav-button {
  position: absolute;
  background: rgba(22, 52, 85, 0.6); /* #163455 with 60% opacity */
  color: #fff;
  border: none;
  width: 44px; /* Touch-friendly minimum size */
  height: 44px; /* Touch-friendly minimum size */
  border-radius: 50%; /* Default round shape */
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.3s ease, opacity 0.3s ease, outline 0.2s ease;
  opacity: 0;
  pointer-events: none;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Focus styles for thumbnail navigation buttons */
.act-thumb-nav-button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: rgba(22, 52, 85, 0.8); /* #163455 with 80% opacity */
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Rectangle shape for navigation icons */
.act-nav-icon-rectangle .act-nav-button,
.act-nav-icon-rectangle .act-thumb-nav-button {
  border-radius: 0 !important;
}

.act-thumbnails-container:hover .act-thumb-nav-button {
  opacity: 1;
  pointer-events: auto;
}

/* Always show arrows for left/right positions */
.act-gallery-main-image.act-thumbnail-position-left .act-thumb-nav-button,
.act-gallery-main-image.act-thumbnail-position-right .act-thumb-nav-button {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Always show arrows for top/bottom positions */
.act-gallery-main-image.act-thumbnail-position-top .act-thumb-nav-button,
.act-gallery-main-image.act-thumbnail-position-bottom .act-thumb-nav-button {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.act-thumb-nav-button:hover {
  background: rgba(22, 52, 85, 0.8); /* #163455 with 80% opacity */
}

.act-thumb-nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Horizontal navigation for bottom/top positions - base styles removed, using specific selectors only */
.act-gallery-main-image.act-thumbnail-position-top .act-thumb-nav-prev,
.act-gallery-main-image.act-thumbnail-position-top .act-thumb-nav-next,
.act-gallery-main-image.act-thumbnail-position-bottom .act-thumb-nav-prev,
.act-gallery-main-image.act-thumbnail-position-bottom .act-thumb-nav-next {
  position: absolute !important;
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 15 !important; /* Relative to parent isolation context */
  top: 50% !important;
  transform: translateY(-50%) translateX(0) !important;
}

.act-gallery-main-image.act-thumbnail-position-top .act-thumb-nav-prev,
.act-gallery-main-image.act-thumbnail-position-bottom .act-thumb-nav-prev {
  left: 10px !important; /* Position inside the padding area */
  right: auto !important;
  transform: translateY(-50%) !important; /* Center vertically only */
  /* Ensure arrows stay inside container bounds */
  margin-left: 0;
}

.act-gallery-main-image.act-thumbnail-position-top .act-thumb-nav-next,
.act-gallery-main-image.act-thumbnail-position-bottom .act-thumb-nav-next {
  right: 10px !important; /* Position inside the padding area */
  left: auto !important;
  transform: translateY(-50%) !important; /* Center vertically only */
  /* Ensure arrows stay inside container bounds */
  margin-right: 0;
}

/* Vertical navigation for left/right positions */
.act-gallery-main-image.act-thumbnail-position-left .act-thumb-nav-button,
.act-gallery-main-image.act-thumbnail-position-right .act-thumb-nav-button {
  /* Reset any conflicting transforms */
  transform: none !important;
}

.act-gallery-main-image.act-thumbnail-position-left .act-thumb-nav-prev,
.act-gallery-main-image.act-thumbnail-position-right .act-thumb-nav-prev {
  top: 10px !important; /* Position inside the padding area at top */
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(0) !important; /* Center horizontally, no vertical translation */
  z-index: 15 !important; /* Relative to parent isolation context */
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  position: absolute !important;
  background: rgba(0, 0, 0, 0.8) !important;
  /* Ensure arrows are positioned relative to container, not edge */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.act-gallery-main-image.act-thumbnail-position-left
  .act-thumb-nav-prev:disabled,
.act-gallery-main-image.act-thumbnail-position-right
  .act-thumb-nav-prev:disabled {
  opacity: 0.3 !important;
}

.act-gallery-main-image.act-thumbnail-position-left .act-thumb-nav-next,
.act-gallery-main-image.act-thumbnail-position-right .act-thumb-nav-next {
  bottom: 10px !important; /* Position inside the padding area at bottom */
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(0) !important; /* Center horizontally, no vertical translation */
  z-index: 15 !important; /* Relative to parent isolation context */
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  /* Ensure arrows are positioned relative to container, not edge */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.act-gallery-main-image.act-thumbnail-position-left
  .act-thumb-nav-next:disabled,
.act-gallery-main-image.act-thumbnail-position-right
  .act-thumb-nav-next:disabled {
  opacity: 0.3 !important;
}

.act-thumbnail-item {
  flex-shrink: 0;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 0.3s ease, border-color 0.3s ease, outline 0.2s ease;
  background: transparent;
  padding: 0;
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 0; /* Prevent extra space from inline-block */
  -webkit-tap-highlight-color: transparent;
}

/* Focus styles for thumbnail items */
.act-thumbnail-item:focus {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
  opacity: 1;
}

.act-thumbnail-item[aria-pressed="true"] {
  opacity: 1;
  border-color: #2271b1;
}

.act-thumbnail-item:hover {
  opacity: 1;
}

.act-thumbnail-item.active {
  opacity: 1;
  border-color: #2271b1;
}

.act-thumbnail-item img {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
}

/* Thumbnail position: top */
.act-gallery-main-image.act-thumbnail-position-top {
  flex-direction: column !important;
  position: relative;
  overflow: visible;
  align-items: center;
}

.act-gallery-main-image.act-thumbnail-position-top .act-thumbnails-container {
  position: relative;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  order: 1 !important;
}

.act-gallery-main-image.act-thumbnail-position-top .act-main-image-section {
  order: 2 !important;
}

/* Thumbnail position: bottom (default) */
.act-gallery-main-image.act-thumbnail-position-bottom {
  flex-direction: column;
}

.act-gallery-main-image.act-thumbnail-position-bottom
  .act-thumbnails-container {
  order: 2 !important;
}

.act-gallery-main-image.act-thumbnail-position-bottom .act-main-image-section {
  order: 1 !important;
}

/* Thumbnail position: left */
.act-gallery-main-image.act-thumbnail-position-left {
  flex-direction: row-reverse;
  align-items: center;
}

.act-gallery-main-image.act-thumbnail-position-left .act-thumbnails-container {
  width: 100px; /* Default width, overridden by dynamic CSS to match thumbnail width */
  max-width: 100px; /* Prevent expansion */
  min-width: 100px; /* Prevent shrinking */
  height: 600px; /* Default height, overridden by dynamic CSS to match main image */
  max-height: 600px; /* Prevent expansion */
  overflow: hidden !important; /* Hide overflow, arrows are positioned inside padding */
  display: block;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}

.act-gallery-main-image.act-thumbnail-position-left .act-thumbnails-scroll {
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* Enable vertical scrolling within fixed height */
  width: 100%;
  max-width: 100%; /* Ensure scroll container doesn't exceed parent */
  height: 100%;
  max-height: 100%;
  position: relative;
  box-sizing: border-box;
}

/* Thumbnail position: right */
.act-gallery-main-image.act-thumbnail-position-right {
  flex-direction: row;
  align-items: center;
}

.act-gallery-main-image.act-thumbnail-position-right .act-thumbnails-container {
  width: 100px; /* Default width, overridden by dynamic CSS to match thumbnail width */
  max-width: 100px; /* Prevent expansion */
  min-width: 100px; /* Prevent shrinking */
  height: 600px; /* Default height, overridden by dynamic CSS to match main image */
  max-height: 600px; /* Prevent expansion */
  overflow: hidden !important; /* Hide overflow, arrows are positioned inside padding */
  display: block;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}

.act-gallery-main-image.act-thumbnail-position-right .act-thumbnails-scroll {
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* Enable vertical scrolling within fixed height */
  width: 100%;
  max-width: 100%; /* Ensure scroll container doesn't exceed parent */
  height: 100%;
  max-height: 100%;
  position: relative;
  box-sizing: border-box;
}

/* Ensure thumbnail items and images don't exceed container width for left/right positions (desktop only) */
@media (min-width: 769px) {
  .act-gallery-main-image.act-thumbnail-position-left .act-thumbnail-item,
  .act-gallery-main-image.act-thumbnail-position-right .act-thumbnail-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .act-gallery-main-image.act-thumbnail-position-left .act-thumbnail-item img,
  .act-gallery-main-image.act-thumbnail-position-right .act-thumbnail-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  /* Reduce gap between main image and thumbnails on mobile */
  .act-gallery-main-image {
    gap: 8px !important;
  }

  /* Make main image container responsive on mobile - use aspect-ratio instead of fixed height */
  .act-gallery-main-image .act-main-image-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /* Override fixed height on mobile */
    min-height: 0 !important;
    aspect-ratio: 4/3 !important; /* Maintain aspect ratio, will be overridden by dynamic CSS if set */
  }

  /* Ensure thumbnail container is properly sized on mobile */
  .act-gallery-main-image .act-thumbnails-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important; /* Prevent buttons from causing layout shifts */
    padding-top: 0 !important; /* Remove vertical padding on mobile */
    padding-bottom: 0 !important; /* Remove vertical padding on mobile */
    padding-left: 0 !important; /* Remove horizontal padding, will be added to scroll container */
    padding-right: 0 !important; /* Remove horizontal padding, will be added to scroll container */
    position: relative !important; /* Ensure positioning context for absolute buttons */
  }

  /* Force horizontal scroll for all thumbnail positions on mobile */
  .act-gallery-main-image .act-thumbnails-scroll {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    gap: 8px !important; /* Reduced spacing between thumbnails */
  }

  .act-gallery-main-image[data-thumb-position="left"],
  .act-gallery-main-image[data-thumb-position="right"] {
    flex-direction: column;
  }

  .act-gallery-main-image[data-thumb-position="left"] .act-thumbnails-container,
  .act-gallery-main-image[data-thumb-position="right"]
    .act-thumbnails-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0;
    margin-right: 0;
    margin-top: 8px; /* Reduced from 15px */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 0 !important; /* Remove vertical padding on mobile */
    padding-bottom: 0 !important; /* Remove vertical padding on mobile */
    padding-left: 0 !important; /* Remove horizontal padding, will be added to scroll container */
    padding-right: 0 !important; /* Remove horizontal padding, will be added to scroll container */
  }

  .act-gallery-main-image[data-thumb-position="left"] .act-thumbnails-scroll,
  .act-gallery-main-image[data-thumb-position="right"] .act-thumbnails-scroll {
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 50px !important; /* Space for left arrow */
    padding-right: 50px !important; /* Space for right arrow */
    padding-bottom: 10px;
  }

  .act-gallery-main-image[data-thumb-position="left"] .act-thumbnail-item,
  .act-gallery-main-image[data-thumb-position="right"] .act-thumbnail-item {
    margin-left: 0;
    margin-right: 8px; /* Reduced from 10px */
    margin-bottom: 0;
    width: auto !important; /* Override desktop 100% width on mobile */
    max-width: 80px !important; /* Reduced from 120px */
  }

  /* Override desktop thumbnail image styles on mobile */
  .act-gallery-main-image[data-thumb-position="left"] .act-thumbnail-item img,
  .act-gallery-main-image[data-thumb-position="right"] .act-thumbnail-item img {
    width: auto !important; /* Override desktop 100% width on mobile */
    max-width: 80px !important; /* Reduced from 120px */
    height: auto !important;
  }

  /* Ensure bottom/top thumbnails are always horizontal on mobile */
  .act-gallery-main-image[data-thumb-position="bottom"]
    .act-thumbnails-container,
  .act-gallery-main-image[data-thumb-position="top"] .act-thumbnails-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-top: 0 !important; /* Remove vertical padding on mobile */
    padding-bottom: 0 !important; /* Remove vertical padding on mobile */
    padding-left: 0 !important; /* Remove horizontal padding, will be added to scroll container */
    padding-right: 0 !important; /* Remove horizontal padding, will be added to scroll container */
  }

  .act-gallery-main-image[data-thumb-position="bottom"] .act-thumbnails-scroll,
  .act-gallery-main-image[data-thumb-position="top"] .act-thumbnails-scroll {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 50px !important; /* Space for left arrow */
    padding-right: 50px !important; /* Space for right arrow */
  }

  /* Increase button sizes for touch on mobile */
  .act-nav-button {
    min-width: 48px;
    min-height: 48px;
    font-size: 28px;
    padding: 12px;
  }

  .act-thumb-nav-button {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  /* Show thumbnail navigation buttons on mobile (always visible for touch) */
  .act-gallery-main-image .act-thumb-nav-button {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 15 !important; /* Relative to parent isolation context */
    position: absolute !important; /* Keep absolute positioning */
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
    touch-action: manipulation !important;
  }

  /* Ensure buttons are clickable even when disabled on mobile */
  .act-gallery-main-image .act-thumb-nav-button:disabled {
    opacity: 0.5 !important;
    pointer-events: auto !important; /* Allow clicks even when disabled */
    cursor: pointer !important; /* Still show pointer cursor */
  }

  /* On mobile, all thumbnail navigation should use horizontal arrows (left/right) */
  .act-gallery-main-image[data-thumb-position="left"] .act-thumb-nav-button,
  .act-gallery-main-image[data-thumb-position="right"] .act-thumb-nav-button,
  .act-gallery-main-image[data-thumb-position="bottom"] .act-thumb-nav-button,
  .act-gallery-main-image[data-thumb-position="top"] .act-thumb-nav-button {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 15 !important; /* Relative to parent isolation context */
    margin: 0 !important; /* Prevent margin from causing shifts */
  }

  .act-gallery-main-image[data-thumb-position="left"] .act-thumb-nav-prev,
  .act-gallery-main-image[data-thumb-position="right"] .act-thumb-nav-prev,
  .act-gallery-main-image[data-thumb-position="bottom"] .act-thumb-nav-prev,
  .act-gallery-main-image[data-thumb-position="top"] .act-thumb-nav-prev {
    left: 5px !important; /* Position inside padding area, not at edge */
    right: auto !important;
    transform: translateY(-50%) !important; /* Only vertical centering, no horizontal offset */
  }

  .act-gallery-main-image[data-thumb-position="left"] .act-thumb-nav-next,
  .act-gallery-main-image[data-thumb-position="right"] .act-thumb-nav-next,
  .act-gallery-main-image[data-thumb-position="bottom"] .act-thumb-nav-next,
  .act-gallery-main-image[data-thumb-position="top"] .act-thumb-nav-next {
    right: 5px !important; /* Position inside padding area, not at edge */
    left: auto !important;
    transform: translateY(-50%) !important; /* Only vertical centering, no horizontal offset */
  }

  /* Fix thumbnail item sizing - container should match image size but limit on mobile */
  .act-gallery-main-image .act-thumbnail-item {
    width: auto !important;
    height: auto !important;
    max-width: 80px !important; /* Reduced from 120px */
    max-height: 80px !important; /* Reduced from 120px */
    flex-shrink: 0 !important;
  }

  .act-gallery-main-image .act-thumbnail-item img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 80px !important; /* Reduced from 120px */
    max-height: 80px !important; /* Reduced from 120px */
    object-fit: contain !important;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  /* Further reduce gap on very small screens */
  .act-gallery-main-image {
    gap: 6px !important;
  }

  .act-main-image-container {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important; /* Override fixed height on very small screens */
    min-height: 0 !important;
  }

  .act-nav-button {
    min-width: 44px;
    min-height: 44px;
    font-size: 24px;
    padding: 10px;
  }

  .act-thumbnail-item {
    min-width: 70px;
    min-height: 70px;
    max-width: 70px !important; /* Reduced from 100px */
    max-height: 70px !important; /* Reduced from 100px */
  }

  .act-thumbnail-item img {
    max-width: 70px !important; /* Reduced from 100px */
    max-height: 70px !important; /* Reduced from 100px */
    object-fit: contain !important;
  }

  /* Reduce spacing between thumbnails on very small screens */
  .act-gallery-main-image .act-thumbnails-scroll {
    gap: 5px !important;
  }

  /* Further reduce margin for left/right positions on very small screens */
  .act-gallery-main-image[data-thumb-position="left"] .act-thumbnails-container,
  .act-gallery-main-image[data-thumb-position="right"] .act-thumbnails-container {
    margin-top: 6px !important; /* Further reduced from 8px */
  }

  .act-main-image-title,
  .act-main-image-caption {
    font-size: 14px;
    padding: 8px;
  }
}