.lg-backdrop 
{
  background-color: rgba(50, 50, 50, 0.65) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); /* Safari */
  /* backdrop-filter: blur(2px); */

  /* kill the strip’s background */
  .lg-outer .lg-thumb-outer,
  .lg-outer .lg-thumb {background: transparent !important;}
  /* (some themes paint the item bg) */
  .lg-outer .lg-thumb-item {background: transparent !important;}
}





/* 1. Ensure the overall wrapper is set to 100% height */
.lg-outer {
    height: 100vh !important; 
    display: block !important;
}

/* 2. The custom inner wrapper and items must have full dimensions */
.lg-item,
.lg-slide-inner-wrap {
    height: 100%;
}

/* 3. The sidebar itself (CRUCIAL) */
.lg-sidebar-container { /* Renamed for consistency */
    width: 300px; /* Set a fixed width for the sidebar */
    flex-shrink: 0; /* Prevents it from shrinking */
    height: 100%;
    background-color: rgba(10, 10, 10, 0.9); /* Dark background */
    color: #fff;
    padding: 20px;
    overflow-y: auto; /* Allows scrolling */
    box-sizing: border-box;
    z-index: 10;
}

/* 4. Ensure the image viewer container takes up the remaining space */
.lg-slide-container {
    flex-grow: 1; 
    position: relative; 
    width: auto; 
    min-width: 0; 
}