/* GF4-ASSET-VIEWER-V1 */

.asset-viewer-surface{
  isolation:isolate;
}

.asset-slot-image{
  cursor:zoom-in!important;
}

.asset-viewer-trigger{
  position:absolute;
  top:8px;
  right:8px;
  z-index:20;
  width:32px;
  height:32px;
  margin:0;
  padding:0;
  border:1px solid rgba(210,163,70,.78);
  border-radius:5px;
  background:
    linear-gradient(
      180deg,
      rgba(15,31,41,.94),
      rgba(4,16,24,.96)
    );
  color:#e0bd73;
  box-shadow:
    0 2px 8px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(0,0,0,.55);
  cursor:zoom-in;
  opacity:0;
  transform:translateY(-2px);
  transition:
    opacity .15s ease,
    transform .15s ease,
    border-color .15s ease;
  pointer-events:none;
}

.asset-viewer-trigger::before{
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  left:8px;
  top:7px;
  box-sizing:border-box;
  border:2px solid currentColor;
  border-radius:50%;
}

.asset-viewer-trigger::after{
  content:"";
  position:absolute;
  width:9px;
  height:2px;
  left:17px;
  top:19px;
  border-radius:2px;
  background:currentColor;
  transform:rotate(45deg);
  transform-origin:left center;
}

[data-asset-state="ready"]:hover
.asset-viewer-trigger,
.asset-viewer-trigger:focus-visible{
  opacity:.94;
  transform:translateY(0);
  pointer-events:auto;
}

.asset-viewer-trigger:hover{
  color:#f3d895;
  border-color:#e3b85d;
}

@media (hover:none){
  [data-asset-state="ready"]
  .asset-viewer-trigger{
    opacity:.78;
    transform:none;
    pointer-events:auto;
  }
}


/* ---------------------------------------------------------
   FULLSCREEN VIEWER
   --------------------------------------------------------- */

.asset-viewer-overlay{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  grid-template-rows:
    auto
    minmax(0,1fr)
    auto;
  background:
    radial-gradient(
      circle at center,
      rgba(11,24,31,.92),
      rgba(1,6,10,.985) 72%
    );
  color:#e8dcc1;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  overscroll-behavior:contain;
}

.asset-viewer-overlay[hidden]{
  display:none!important;
}

.asset-viewer-toolbar{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  min-height:48px;
  box-sizing:border-box;
  padding:8px 12px;
  border-bottom:
    1px solid rgba(174,128,47,.35);
  background:
    linear-gradient(
      180deg,
      rgba(7,20,28,.98),
      rgba(4,13,19,.92)
    );
  box-shadow:
    0 5px 18px rgba(0,0,0,.28);
}

.asset-viewer-control{
  box-sizing:border-box;
  min-width:38px;
  height:34px;
  margin:0;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:
    1px solid rgba(189,143,59,.58);
  border-radius:4px;
  background:
    linear-gradient(
      180deg,
      rgba(20,39,49,.96),
      rgba(7,21,29,.96)
    );
  color:#e3c987;
  font:
    700 15px/1
    Georgia,
    "Times New Roman",
    serif;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.38);
}

.asset-viewer-control:hover,
.asset-viewer-control:focus-visible{
  color:#fff0bd;
  border-color:#dfae51;
  outline:none;
}

.asset-viewer-text-control{
  font-size:13px;
}

.asset-viewer-close{
  margin-left:4px;
  width:38px;
  padding:0;
  font-size:25px;
  font-weight:400;
}

.asset-viewer-zoom-readout{
  min-width:58px;
  text-align:center;
  color:#d9c79f;
  font:
    700 13px/1
    Georgia,
    "Times New Roman",
    serif;
  font-variant-numeric:
    tabular-nums;
}

.asset-viewer-stage{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  cursor:default;
}

.asset-viewer-image{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  display:block!important;
  object-fit:initial!important;
  transform-origin:center center;
  will-change:transform;
  user-select:none;
  -webkit-user-drag:none;
  cursor:default;
  box-shadow:
    0 12px 44px rgba(0,0,0,.62);
}

.asset-viewer-image.is-pannable{
  cursor:grab;
}

.asset-viewer-image.is-dragging{
  cursor:grabbing;
}

.asset-viewer-caption{
  position:relative;
  z-index:3;
  min-height:38px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:7px 14px;
  border-top:
    1px solid rgba(174,128,47,.30);
  background:
    rgba(4,14,20,.96);
  color:#cdbd99;
  font-size:12px;
  line-height:1.25;
}

.asset-viewer-caption-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.asset-viewer-caption-meta{
  flex:none;
  color:#9f9278;
  font-variant-numeric:
    tabular-nums;
}

@media (max-width:700px){
  .asset-viewer-toolbar{
    justify-content:center;
    gap:5px;
    padding:6px;
  }

  .asset-viewer-control{
    height:32px;
    min-width:34px;
    padding:0 8px;
  }

  .asset-viewer-original{
    display:none;
  }

  .asset-viewer-caption{
    padding:
      6px 9px;
  }
}