:root {
  --rto-tc-border: #e0e0e0;
  --rto-tc-accent: #222;
}

.rto-tc-gallery-container {
  max-width: 100%;
  font-family: system-ui, -apple-system, sans-serif;
  display:flex;
  flex-direction: column;
  gap:10px;
}

.rto-tc-gallery-main-stage {
  position: relative;
  width: 100%;
  height: 503px;
  overflow: hidden;
  cursor: zoom-in;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid whitesmoke;
  /* box-shadow: 2px 2px 5px rgba(0,0,0,0.3); */
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
}

.rto-tc-gallery-main-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.15s ease-out;
  /* FIX: Allows the click to reach the main-stage div */
  pointer-events: none; 
}

/* Fullscreen Button */
.rto-tc-gallery-fullscreen-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 38px !important;
  height: 38px !important;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--rto-tc-border) !important;
  color: #444 !important;
  padding: 0 !important;
  cursor: pointer;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rto-tc-gallery-fullscreen-btn:hover {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.7);
}

/* Nav Buttons (Prev / Next) */
.rto-tc-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.15) !important;
  color: #fff  !important;
  border: none  !important;
  border-radius: 50%  !important;
  width: 40px;
  height: 40px;
  font-size: 20px  !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0  !important;
  line-height: 1;
  transition: background 0.2s;
}

.rto-tc-gallery-nav:hover {
  background: rgba(0, 0, 0, 0.75) !important;
}

.rto-tc-gallery-nav--prev { left: 10px; }
.rto-tc-gallery-nav--next { right: 10px; }

.rto-tc-gallery-nav.rto-tc-gallery-nav--hidden {
  display: none;
}

/* Thumbnail Strip */
/* .rto-tc-gallery-thumbnail-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-radius: 15px;
  border: 1px solid whitesmoke;
  box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
  padding:15px;
  background: #fff;
} */

.rto-tc-gallery-thumbnail-bar {
  display: grid;
  /* Creates 3 columns of equal width */
  grid-template-columns: repeat(3, 1fr); 
  gap: 10px;
  padding: 0px;
}


.rto-tc-extra-description {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-radius: 15px;
  border: 1px solid whitesmoke;
  /* box-shadow: 2px 2px 5px rgba(0,0,0,0.3); */
  box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
  padding:15px;
  background: #fff;
}

.rto-tc-gallery-thumb.rto-tc-gallery-active {
  border-color: var(--rto-tc-accent);
  opacity: 0.7;
}

/* Zoom Logic */
.rto-tc-gallery-main-stage.rto-tc-gallery-zoomed {
  cursor: zoom-out;
}

.rto-tc-gallery-main-stage.rto-tc-gallery-zoomed img {
  transform: scale(2.2);
}













.rto-tc-gallery-thumb-wrapper {
  position: relative;
  width: 100px;
  width: 100%; /* Or any width you want */
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #eee; /* Fallback for slow loading */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* THE ILLUSION: The Inset Shadow Overlay */
.rto-tc-gallery-thumb-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* 1. The 1px stroke you wanted */
  /* 2. A radial gradient that creates the 'fading' dark shadow illusion */
  box-shadow: inset 0 0 15px 2px rgba(26, 30, 37, 0.2);
  
  /* Ensuring the shadow sits ABOVE the image */
  z-index: 2; 
  pointer-events: none;
  transition: all 0.3s ease;
}

.rto-tc-gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1; /* Sits BELOW the shadow */
  transition: transform 0.3s ease;
}

/* Pro Hover State: Image zooms slightly while shadow deepens */
.rto-tc-gallery-thumb-wrapper:hover .rto-tc-gallery-thumb {
  transform: scale(1.1);
}

.rto-tc-gallery-thumb-wrapper:hover::before {
  box-shadow: inset 0 0 20px 4px rgba(26, 30, 37, 0.3);
}

/* Active State: Distinct border to show selection */
.rto-tc-gallery-thumb-wrapper.rto-tc-gallery-active::before {
  box-shadow: inset 0 0 0 2px #1a1e25;
}


@media (max-width:480px){
  .rto-tc-gallery-main-stage {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .rto-tc-gallery-thumbnail-bar{
    display:none;
  }
}