.lightbox {
  --lightbox-frame-padding: clamp(8px, 2vw, 20px);
  --lightbox-max-width: calc(100vw - 32px);
  --lightbox-max-height: calc(100vh - 32px);
}

/* Modal Card (Outer) - Instagram-style */
.lightbox-content {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  overflow: hidden;
  pointer-events: auto;
  padding: 0;
  width: auto;
  height: auto;
  max-width: 80vw;
  max-height: 80vh;
  flex: none;
  transform: none;
  opacity: 0;
  transition: opacity 0.44s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Media Canvas (Inner) - Black canvas that fills modal card */
.lightbox-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  max-width: 80vw;
  max-height: 80vh;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
}

.lightbox-media.lightbox-transition-out-next {
  animation: lightbox-out-next 0.33s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.lightbox-media.lightbox-transition-in-next {
  animation: lightbox-in-next 0.33s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.lightbox-media.lightbox-transition-out-prev {
  animation: lightbox-out-prev 0.33s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.lightbox-media.lightbox-transition-in-prev {
  animation: lightbox-in-prev 0.33s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.lightbox-media--video {
  width: 100%;
  height: 100%;
  overflow: hidden;
  max-width: 80vw;
  max-height: 80vh;
}

.lightbox-unmute {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.lightbox-img {
  width: auto;
  height: auto;
  max-width: 80vw;
  max-height: 80vh;
  display: block;
  margin: 0;
  border-radius: 0 !important;
  background: none;
  border: none;
  box-shadow: none;
  transition: opacity 0.44s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.44s cubic-bezier(0.4, 0, 0.2, 1);
  object-fit: contain;
  object-position: center;
  box-sizing: border-box;
  aspect-ratio: unset !important;
  /* Override any gallery aspect-ratio constraints */
}

@keyframes lightbox-out-next {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-12px) scale(0.98);
  }
}

@keyframes lightbox-in-next {
  0% {
    opacity: 0;
    transform: translateX(12px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes lightbox-out-prev {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(12px) scale(0.98);
  }
}

@keyframes lightbox-in-prev {
  0% {
    opacity: 0;
    transform: translateX(-12px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.lightbox-img--video {
  filter: none;
}

.lightbox-media--video::after {
  display: none;
}

/* For larger screens, constrain proportionally inside viewport */
@media (min-width: 900px) {
  .lightbox {
    --lightbox-max-width: calc(100vw - 32px);
    --lightbox-max-height: calc(100vh - 32px);
  }
}

@media (min-aspect-ratio: 3/4) {
  .lightbox-img {
    max-height: calc(100vh - 24px);
  }
}

/* Navigation Controls */
.lightbox-close,
.close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  transform: none;
  z-index: 1000001;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000 !important;
  font-size: 0;
  font-weight: 600;
  text-decoration: none;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  line-height: 1;
  width: 1.9rem;
  /* match button hit area */
  height: 1.9rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
  opacity: 1;
}

.lightbox-close::before {
  content: '';
  width: 1.8rem;
  height: 1.8rem;
  display: inline-block;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M18 6 6 18M6 6l12 12"/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.lightbox-close:hover,
.lightbox-close:focus,
.close:hover,
.close:focus {
  color: #fff;
  opacity: 0.75;
}

.lightbox--active .lightbox-img {
  box-shadow: none;
}

/* Overlay - Full viewport with blur backdrop */
.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lightbox-frame-padding);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 999999;
  transition: opacity 0.44s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.44s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Dark mode support - data-theme and prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  .lightbox {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }

  .lightbox-content {
    background: transparent;
  }

  .lightbox-img {
    box-shadow: none;
  }

  .lightbox-btn,
  .lb-prev,
  .lb-next {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  .prev-btn::before {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14.5 5.5 8 12l6.5 6.5"/%3E%3C/svg%3E') !important;
  }

  .next-btn::before {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m9.5 5.5 6.5 6.5-6.5 6.5"/%3E%3C/svg%3E') !important;
  }

  .lightbox-btn:hover,
  .lb-prev:hover,
  .lb-next:hover {
    background-color: rgba(255, 255, 255, 0.75);
  }

  .lightbox-close,
  .close {
    color: #ffffff !important;
  }

  .lightbox-close::before {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M18 6 6 18M6 6l12 12"/%3E%3C/svg%3E');
  }
}

html[data-theme="dark"] .lightbox,
body[data-theme="dark"] .lightbox,
html.dark .lightbox,
body.dark .lightbox {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

html[data-theme="dark"] .lightbox-content,
body[data-theme="dark"] .lightbox-content,
html.dark .lightbox-content,
body.dark .lightbox-content {
  background: transparent;
}

html[data-theme="dark"] .lightbox-btn,
body[data-theme="dark"] .lightbox-btn,
html.dark .lightbox-btn,
body.dark .lightbox-btn,
html[data-theme="dark"] .lb-prev,
body[data-theme="dark"] .lb-prev,
html.dark .lb-prev,
body.dark .lb-prev,
html[data-theme="dark"] .lb-next,
body[data-theme="dark"] .lb-next,
html.dark .lb-next,
body.dark .lb-next {
  background-color: #ffffff !important;
  color: #000000 !important;
}

html[data-theme="dark"] .prev-btn::before,
body[data-theme="dark"] .prev-btn::before,
html.dark .prev-btn::before,
body.dark .prev-btn::before {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14.5 5.5 8 12l6.5 6.5"/%3E%3C/svg%3E') !important;
}

html[data-theme="dark"] .next-btn::before,
body[data-theme="dark"] .next-btn::before,
html.dark .next-btn::before,
body.dark .next-btn::before {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m9.5 5.5 6.5 6.5-6.5 6.5"/%3E%3C/svg%3E') !important;
}

html[data-theme="dark"] .lightbox-btn:hover,
body[data-theme="dark"] .lightbox-btn:hover,
html.dark .lightbox-btn:hover,
body.dark .lightbox-btn:hover,
html[data-theme="dark"] .lb-prev:hover,
body[data-theme="dark"] .lb-prev:hover,
html.dark .lb-prev:hover,
body.dark .lb-prev:hover,
html[data-theme="dark"] .lb-next:hover,
body[data-theme="dark"] .lb-next:hover,
html.dark .lb-next:hover,
body.dark .lb-next:hover {
  background-color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .lightbox-close,
body[data-theme="dark"] .lightbox-close,
html.dark .lightbox-close,
body.dark .lightbox-close,
html[data-theme="dark"] .close,
body[data-theme="dark"] .close,
html.dark .close,
body.dark .close {
  color: #ffffff !important;
}

html[data-theme="dark"] .lightbox-close::before,
body[data-theme="dark"] .lightbox-close::before,
html.dark .lightbox-close::before,
body.dark .lightbox-close::before {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M18 6 6 18M6 6l12 12"/%3E%3C/svg%3E');
}

.lightbox-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000000;
  border: none;
  box-sizing: border-box;
}

.lightbox-video-wrapper video {
  width: auto;
  height: auto;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  object-fit: contain;
  object-position: center;
  display: block;
  background: transparent;
  box-sizing: border-box;
}

/* Nudge native controls toward the bottom of the video area (WebKit) */
.lightbox-media--video .lightbox-video-wrapper video::-webkit-media-controls-enclosure {
  position: absolute;
  inset: auto 0 0 0;
}

.lightbox-media--video .lightbox-video-wrapper video::-webkit-media-controls-panel {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  padding: 0 8px 8px;
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-sizing: border-box;
}

.lightbox.lightbox--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox.lightbox--active .lightbox-content {
  transform: scale(1);
  opacity: 1;
}

/* Closing animation - reverse of opening */
.lightbox:not(.lightbox--active) .lightbox-content {
  transform: scale(0.985);
  opacity: 0;
}

/* Navigation buttons - reuse existing classes */
.lightbox-btn,
.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.9rem;
  /* ~30px */
  height: 1.9rem;
  background-color: #000000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, opacity 0.2s ease;
  border: none;
  color: #ffffff !important;
  padding: 0;
  z-index: 1000002;
  font-size: 0;
  line-height: 1;
  box-shadow: none;
}

.lightbox-btn:hover,
.lb-prev:hover,
.lb-next:hover {
  background-color: rgba(0, 0, 0, 0.75);
}

.prev-btn,
.lb-prev {
  left: 1.1rem;
  /* ~18px */
  display: flex !important;
}

.next-btn,
.lb-next {
  right: 1.1rem;
  /* ~18px */
  display: flex !important;
}

.prev-btn::before {
  content: '';
  width: 1.5rem;
  /* ~24px, ~80% of 30px */
  height: 1.5rem;
  display: inline-block;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14.5 5.5 8 12l6.5 6.5"/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
}

.next-btn::before {
  content: '';
  width: 1.5rem;
  /* ~24px, ~80% of 30px */
  height: 1.5rem;
  display: inline-block;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m9.5 5.5 6.5 6.5-6.5 6.5"/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
}

/* Hide buttons on mobile if only one item */
@media (max-width: 768px) {

  .lightbox-btn,
  .lb-prev,
  .lb-next {
    width: 1.6rem;
    /* ~26px */
    height: 1.6rem;
  }

  .prev-btn,
  .lb-prev {
    left: 0.7rem;
    /* ~11px */
  }

  .next-btn,
  .lb-next {
    right: 0.7rem;
    /* ~11px */
  }

  .prev-btn::before {
    width: 1.25rem;
    /* ~20px, ~80% of 26px */
    height: 1.25rem;
  }

  .next-btn::before {
    width: 1.25rem;
    /* ~20px, ~80% of 26px */
    height: 1.25rem;
  }
}

/* Force icon visibility regardless of theme */
.lightbox-close::before,
.lightbox-btn::before {
  opacity: 1;
  filter: none;
}

.lightbox-close,
.lightbox-btn {
  mix-blend-mode: normal;
  isolation: isolate;
}