/* Disable body scroll while open */
.woa-lb-no-scroll { overflow: hidden; }

/* Overlay */
.woa-lightbox-modal[hidden] { display: none; }
.woa-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .92);
}

/* Backdrop (click-to-close area) */
.woa-lb-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* Stage / shell */
.woa-lb-shell {
  position: relative;
  margin: 0;
  max-width: 90vw;
  max-height: 90vh;
  padding: 0; /* keep tight to your image */
  background: transparent; /* no card feel */
  border-radius: 0;
  box-shadow: none;
  display: block;
}

/* Image */
.woa-lb-img {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  margin: 0 auto;
}

/* Caption */
.woa-lb-cap {
  margin-top: .5rem;
  color: #f2f2f2;
  font-size: .95rem;
  text-align: center;
  min-height: 1.2em;
}

/* Image count */
.woa-lb-count {
  color: #FFFFFF;
  font-size: 1rem;
  text-align: center;
}

.woa-lb-shell {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg, 2rem);
}
.woa-lb-content {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-lg, 2rem);
	align-items: center;
}
.woa-lb-shell button {
	--button-padding: var(--lb-button-padding, 1rem);
	--button-border-radius: var(--lb-button-border-radius, 50%);
	line-height: 1;
	width: var(--lb-button-width, 3rem);
	height: var(--lb-button-height, 3rem);
	--button-border: var(--lb-button-border, 2px solid var(--button-color));
	--button-border-hover: var(--lb-button-border-hover, 2px solid var(--button-color-hover));
	padding: var(--button-padding);
	border-radius: var(--button-border-radius);
	border: var(--button-border);
	color: var(--button-color);
	background: var(--button-background);
}
.woa-lb-shell button:hover, .woa-lb-shell button:active, 
.woa-lb-shell button:focus {
	border: var(--button-border-hover);
	color: var(--button-color-hover);
	background: var(--button-background-hover);
}
button.woa-lb-next, button.woa-lb-prev {
	--button-color: var(--lb-nav-color, var(--color-black, #000000));
	--button-background: var(--lb-nav-background, var(--color-primary, #FFFFFF));
	--button-color-hover: var(--lb-nav-color-hover, #FFFFFF);
	--button-background-hover: var(--lb-nav-background-hover, transparent);
}
button.woa-lb-close {
	--button-background: var(--lb-close-background, transparent);
	--button-color: var(--lb-close-color, #FFFFFF);
	--button-background-hover: var(--lb-close-background-hover, #FFFFFF);
	--button-color-hover: var(--lb-close-color-hover, #000000);
	float: right;
}

/* Hide nav when there’s only one image */
.woa-lightbox-modal.woa-lb-single .woa-lb-prev,
.woa-lightbox-modal.woa-lb-single .woa-lb-next {
  display: none;
}