/* WKC Article Lightbox */
.entry-content img:not(.wp-smiley):not(.emoji):not(.avatar):not(.wkc-lightbox-ignore){cursor:zoom-in}

.wkc-lightbox-open{overflow:hidden}

.wkc-lightbox{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  direction:rtl;
  background:rgba(3,4,8,.92);
}
.wkc-lightbox.is-open{display:flex}

.wkc-lightbox-dialog{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:100%;
  max-height:100%;
  outline:0;
}

.wkc-lightbox-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  max-height:calc(100vh - 100px);
}

.wkc-lightbox-frame{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  max-width:calc(100vw - 56px);
  max-height:calc(100vh - 118px);
  padding:3px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:#0b0e16;
  box-shadow:0 18px 56px rgba(0,0,0,.5);
}

.wkc-lightbox-image{
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100vw - 64px);
  max-height:calc(100vh - 126px);
  object-fit:contain;
  border-radius:9px;
  background:#05060a;
  user-select:none;
  -webkit-user-drag:none;
}

.wkc-lightbox-close,
.wkc-lightbox-arrow{
  position:absolute;
  z-index:5;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  background:#10131c;
  color:#fff;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.38);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.wkc-lightbox-close:hover,
.wkc-lightbox-arrow:hover{
  background:var(--red,#e50920);
  border-color:var(--red2,#ff384d);
}
.wkc-lightbox-close:focus-visible,
.wkc-lightbox-arrow:focus-visible,
.wkc-lightbox-thumb:focus-visible{
  outline:3px solid rgba(255,85,105,.72);
  outline-offset:3px;
}

.wkc-lightbox-close{
  top:-16px;
  left:-16px;
  width:36px;
  height:36px;
  border-radius:50%;
}
.wkc-lightbox-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round}

.wkc-lightbox-arrow{
  top:50%;
  width:40px;
  height:50px;
  border-radius:13px;
  transform:translateY(-50%);
}
.wkc-lightbox-arrow:hover{transform:translateY(-50%) scale(1.04)}
.wkc-lightbox-arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wkc-lightbox-prev{right:10px}
.wkc-lightbox-next{left:10px}
.wkc-lightbox-arrow[hidden]{display:none}

.wkc-lightbox-thumbs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  max-width:min(720px,calc(100vw - 36px));
  padding:2px 2px 6px;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--red,#e50920) rgba(255,255,255,.08);
}
.wkc-lightbox-thumbs[hidden],
.wkc-lightbox-thumbs:empty{display:none}
.wkc-lightbox-thumb{
  flex:0 0 auto;
  width:52px;
  height:40px;
  padding:2px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:#0b0e16;
  opacity:.58;
  cursor:pointer;
  transition:opacity .18s ease,border-color .18s ease,transform .18s ease;
}
.wkc-lightbox-thumb:hover{opacity:.9;transform:translateY(-1px)}
.wkc-lightbox-thumb.is-active{opacity:1;border-color:var(--red2,#ff384d)}
.wkc-lightbox-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px}

@media (max-width:640px){
  .wkc-lightbox{padding:10px}
  .wkc-lightbox-dialog{gap:8px}
  .wkc-lightbox-stage{max-height:calc(100vh - 88px)}
  .wkc-lightbox-frame{max-width:calc(100vw - 28px);max-height:calc(100vh - 104px);padding:3px;border-radius:11px}
  .wkc-lightbox-image{max-width:calc(100vw - 36px);max-height:calc(100vh - 112px);border-radius:8px}
  .wkc-lightbox-close{top:-12px;left:-10px;width:34px;height:34px}
  .wkc-lightbox-arrow{width:34px;height:44px;border-radius:12px}
  .wkc-lightbox-prev{right:7px}
  .wkc-lightbox-next{left:7px}
  .wkc-lightbox-thumb{width:46px;height:36px}
}

@media (prefers-reduced-motion:reduce){
  .wkc-lightbox-close,.wkc-lightbox-arrow,.wkc-lightbox-thumb{transition:none}
}