/* The background backdrop container */ 
#shared-modal { 
  display: none; /* Change to 'flex' via JavaScript when modal is opened */ 
  position: fixed; /* Stays in place relative to the screen */ 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100vh;
  min-height: 100dvh;
  background-color: rgba(0, 0, 0, 0.85); /* Dimmed backdrop */ 
  z-index: 9999; /* Forces it above all other elements */ 
  justify-content: center; 
  align-items: center; 
  flex-direction: row; 
  box-sizing: border-box;
}

/* Appears only when the class is added by JavaScript */ 
#shared-modal.is-active { 
  display: flex; /* Switches from none to flex to show it */ 
  /* touch-action: none; */  /* Disables the "Disable" native Android Chrome pull-to-refresh */
  touch-action: pan-x pan-y; /* Allows normal dual-finger panning gestures */
  overflow: hidden; /* Keeps zoomed image spillovers contained inside the mask */
} 

/* The full size image structure inside the modal */ 
#shared-modal .full-size-image { 
  max-width: 90%;   /* Leaves a small horizontal safety margin */
  max-height: 80vh;  /* Leaves vertical room for description and buttons */
  width: auto;
  height: auto;
  object-fit: contain; /* Keeps aspect ratio intact */
  display: block;
    /* Add these properties below to drive hardware accelerated rendering: */
  transform-origin: center center; /* Zoom shoots outward perfectly from midpoint */
  will-change: transform; /* Alerts browser engine to render matrix math smoothly */
  transition: transform 0.05s ease-out; /* Keeps micro-tracking tracking responsive */
  } 

/* Layout layout styling for control buttons */ 
#shared-modal button { 
  background: rgba(255, 255, 255, 0.2); 
  color: #fff; 
  border: none; 
  padding: 10px 15px; 
  cursor: pointer; 
  font-size: 18px; 
  transition: background 0.2s; 
} 

#shared-modal button:hover { 
  background: rgba(255, 255, 255, 0.4); 
}

/* NEW ADDITIONS BELOW */

/* Layout alignment for the inner modal container */
#shared-modal .modal-content {
  display: flex;
  flex-direction: row; 
  align-items: center; 
  justify-content: center;
  width: 100%;
  max-width: 95vw;
  gap: 20px; 
}

/* Constrain the inner image block size appropriately */
#shared-modal .image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80%; 
}

/* Custom styling for your navigation arrows */
#shared-modal .nav-button {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  font-size: 28px;
  padding: 15px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.2s;
  z-index: 10002;
}

#shared-modal .nav-button:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Position close button in top right corner */
#shared-modal .close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  color: white;
  border: none;
  font-size: 35px; 
  cursor: pointer;
  z-index: 10001; 
  padding: 5px 10px;
}

#shared-modal .close-button:hover {
  color: #ccc;
}

/* Image text description styling */
#shared-modal .image-description {
  color: #fff;
  margin-top: 15px;
  font-family: sans-serif;
  text-align: center;
}