/**
 * WP Featherlight NG — lightbox appearance
 *
 * Ports the visual appearance of WP Featherlight 1.3.4 to a single
 * stylesheet, targeting the native <dialog> element opened via
 * showModal(). Class names are unchanged so existing theme CSS on live
 * sites keeps working.
 *
 * Deliberate departures from the 1.3.4 baseline:
 *  - No vendor prefixes (targets browsers that support <dialog> + ES modules).
 *  - RTL handled via logical properties (inset-inline-start/-end) instead of
 *    a separate -rtl stylesheet. Chevron icons are marked rtl:ignore in the
 *    baseline and must not flip direction here either.
 *  - No z-index: showModal() renders in the browser's top layer.
 */

dialog.featherlight {
  border: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: zoom-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

dialog.featherlight::backdrop {
  background: rgba(0, 0, 0, .9);
}

.featherlight-content {
  background: #000;
  max-width: 90%;
  max-height: 80%;
  animation: fadein .5s;
  margin: auto;
  position: relative;
}

@media screen and (min-width: 980px) {
  .featherlight-content {
    max-height: 90%;
  }
}

.featherlight-image {
  max-width: 100%;
  display: block;
}

.featherlight-content .caption {
  color: #fff;
  font-size: 16px;
  font-weight: lighter;
  line-height: 1.25;
  position: absolute;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.featherlight-content .caption:hover,
.featherlight-content .caption:focus {
  overflow: visible;
  white-space: normal;
}

.featherlight-close-icon {
  position: fixed;
  top: 25px;
  inset-inline-end: 25px;
  width: 30px;
  height: 30px;
  opacity: .6;
  border: 0;
  background: transparent center/100% auto no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M21%204.41L19.59%203%2012%2010.59%204.41%203%203%204.41%2010.59%2012%203%2019.59%204.41%2021%2012%2013.41%2019.59%2021%2021%2019.59%2013.41%2012%2021%204.41z%22/%3E%0A%3C/svg%3E");
  cursor: pointer;
  text-indent: 100%;
  overflow: hidden;
}

.featherlight-previous,
.featherlight-next {
  position: fixed;
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  opacity: .4;
  background-repeat: no-repeat;
  background-size: 100% auto;
  cursor: pointer;
  border: 0;
  text-indent: 100%;
  overflow: hidden;
  user-select: none;
}

/* rtl:ignore */
.featherlight-previous {
  inset-inline-start: 10px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M15.41%207.41L10.83%2012l4.58%204.59L14%2018l-6-6%206-6%201.41%201.41z%22/%3E%0A%3C/svg%3E");
}

/* rtl:ignore */
.featherlight-next {
  inset-inline-end: 10px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8.59%2016.59L13.17%2012%208.59%207.41%2010%206l6%206-6%206-1.41-1.41z%22/%3E%0A%3C/svg%3E");
}

.featherlight-close-icon:hover,
.featherlight-close-icon:focus,
.featherlight-previous:hover,
.featherlight-previous:focus,
.featherlight-next:hover,
.featherlight-next:focus {
  opacity: 1;
}

.featherlight-loading .featherlight-content {
  animation: featherlightLoader 1s infinite linear;
  background: transparent;
  border: 8px solid #909090;
  border-left-color: #fff;
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

[data-wpfl] img {
  cursor: zoom-in;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes featherlightLoader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}