.hfg-legacy-lightbox { cursor:pointer; }
.hfg-legacy-modal {
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  box-sizing:border-box;
  background:rgba(0,0,0,.88);
  color:#eee;
  font-family:Arial, Helvetica, sans-serif;
}
.hfg-legacy-modal::before {
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 7px);
  pointer-events:none;
}
body.light .hfg-legacy-modal {
  background:rgba(238,238,238,.86);
  color:#333;
}
body.light .hfg-legacy-modal::before {
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.045) 0, rgba(0,0,0,.045) 2px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 7px);
}
.hfg-legacy-modal.is-open { display:block; }
.hfg-legacy-modal * { box-sizing:border-box; }
.hfg-legacy-close-top { display:none !important; }

/* v2.0.15: fixed controls, topbar close and background-click close. */
.hfg-legacy-topbar {
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:100004;
  display:flex;
  align-items:center;
  gap:0;
  padding:4px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:4px;
  background:rgba(22,22,22,.82);
  box-shadow:0 3px 16px rgba(0,0,0,.38);
}
.hfg-legacy-topbar button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:30px;
  margin:0;
  padding:0 9px;
  border:0;
  border-right:1px solid rgba(255,255,255,.16);
  background:transparent;
  color:#e6e6e6;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.hfg-legacy-topbar button:last-child { border-right:0; }
.hfg-legacy-top-close { font-size:20px !important; font-weight:bold; }
.hfg-legacy-topbar button:hover { background:rgba(255,255,255,.12); color:#fff; }
.hfg-legacy-counter {
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 10px;
  color:#d8d8d8;
  font-size:12px;
  border-right:1px solid rgba(255,255,255,.16);
  white-space:nowrap;
}
.hfg-legacy-play.is-playing { color:#8fd18f; }
body.light .hfg-legacy-topbar {
  background:rgba(250,250,250,.90);
  border-color:rgba(0,0,0,.18);
  box-shadow:0 3px 15px rgba(0,0,0,.20);
}
body.light .hfg-legacy-topbar button { color:#333; border-right-color:rgba(0,0,0,.14); }
body.light .hfg-legacy-topbar button:hover { background:rgba(0,0,0,.08); color:#000; }
body.light .hfg-legacy-counter { color:#333; border-right-color:rgba(0,0,0,.14); }

.hfg-legacy-stage {
  position:absolute;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 92px 42px;
  cursor:zoom-out;
}
.hfg-legacy-frame {
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:calc(100vw - 150px);
  max-height:calc(100vh - 96px);
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  cursor:default;
}
.hfg-legacy-image-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  max-height:calc(100vh - 96px);
  background:transparent !important;
}
.hfg-legacy-img {
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100vw - 160px);
  max-height:calc(100vh - 96px);
  object-fit:contain;
  border:0;
  opacity:1;
  transition:opacity .16s ease;
}
.hfg-legacy-toolbar { display:none !important; }
.hfg-legacy-side {
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:100004;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:96px;
  border:0;
  border-radius:4px;
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.58);
  cursor:pointer;
  font-size:74px;
  line-height:74px;
  opacity:.92;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.hfg-legacy-prev { left:18px; }
.hfg-legacy-next { right:18px; }
.hfg-legacy-side:hover { color:#fff; opacity:1; background:rgba(0,0,0,.34); }
body.light .hfg-legacy-side { color:rgba(0,0,0,.42); text-shadow:0 1px 8px rgba(255,255,255,.9); }
body.light .hfg-legacy-side:hover { color:#222; background:rgba(255,255,255,.70); }

@media (max-width:768px) {
  .hfg-legacy-stage { display:flex; padding:58px 44px 44px; }
  .hfg-legacy-frame { max-width:calc(100vw - 84px); max-height:calc(100vh - 118px); }
  .hfg-legacy-img { max-width:calc(100vw - 96px); max-height:calc(100vh - 160px); }
  .hfg-legacy-image-wrap { max-height:calc(100vh - 160px); }
  .hfg-legacy-side { width:36px; height:68px; font-size:54px; line-height:54px; background:rgba(0,0,0,.16); }
  .hfg-legacy-prev { left:4px; }
  .hfg-legacy-next { right:4px; }
  .hfg-legacy-topbar { top:10px; max-width:calc(100vw - 58px); }
  .hfg-legacy-counter { display:none; }
  .hfg-legacy-close-top { right:10px; top:10px; }
}