/* JSC image lightbox v20.5 */
.jsc-lightbox-trigger{
    position:relative;
    cursor:zoom-in;
}
button.jsc-lightbox-trigger{
    border:0;
    padding:0;
    margin:0;
    width:100%;
    color:inherit;
    font:inherit;
    text-align:inherit;
    background:transparent;
}
.jsc-lightbox-trigger:focus-visible{
    outline:3px solid #d29c15;
    outline-offset:3px;
}
.jsc-lightbox-trigger .jsc-lightbox-hint{
    position:absolute;
    right:9px;
    bottom:9px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(0,0,0,.67);
    color:#fff;
    font-size:10px;
    font-weight:800;
    line-height:1;
    letter-spacing:.1px;
    pointer-events:none;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.jsc-lightbox-trigger::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0);
    transition:background .16s ease;
    pointer-events:none;
}
.jsc-lightbox-trigger:hover::after{background:rgba(0,0,0,.08)}

.jsc-image-lightbox{
    position:fixed;
    inset:0;
    z-index:100000;
    display:none;
    background:rgba(4,14,20,.94);
    color:#fff;
    overscroll-behavior:contain;
}
.jsc-image-lightbox.is-open{display:grid;grid-template-rows:auto minmax(0,1fr)}
.jsc-image-lightbox__toolbar{
    position:relative;
    z-index:3;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    background:rgba(0,0,0,.35);
    border-bottom:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
}
.jsc-image-lightbox__title{
    min-width:0;
    font-size:13px;
    line-height:1.35;
    color:#f1f6f4;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.jsc-image-lightbox__controls{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.jsc-image-lightbox__controls button{
    appearance:none;
    border:1px solid rgba(255,255,255,.24);
    border-radius:7px;
    min-width:38px;
    height:36px;
    padding:0 10px;
    display:inline-grid;
    place-items:center;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    font-size:18px;
    font-weight:800;
    line-height:1;
}
.jsc-image-lightbox__controls button:hover{background:rgba(255,255,255,.16)}
.jsc-image-lightbox__controls button:focus-visible{outline:2px solid #e1ad2d;outline-offset:2px}
.jsc-image-lightbox__zoom-label{
    min-width:52px;
    text-align:center;
    font-size:11px;
    font-weight:800;
    color:#d9e9e4;
}
.jsc-image-lightbox__stage{
    position:relative;
    min-height:0;
    overflow:hidden;
    display:grid;
    place-items:center;
    touch-action:none;
    user-select:none;
}
.jsc-image-lightbox__stage.is-pannable{cursor:grab}
.jsc-image-lightbox__stage.is-dragging{cursor:grabbing}
.jsc-image-lightbox__image{
    display:block;
    max-width:92vw;
    max-height:calc(100vh - 90px);
    width:auto;
    height:auto;
    object-fit:contain;
    transform-origin:center center;
    will-change:transform;
    pointer-events:none;
    box-shadow:0 10px 44px rgba(0,0,0,.45);
}
.jsc-image-lightbox__tip{
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    max-width:90%;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(0,0,0,.48);
    color:#dbe8e4;
    font-size:10px;
    text-align:center;
    pointer-events:none;
}
body.jsc-lightbox-open{overflow:hidden!important}

/* The builder preview used to be a div. As a button it must keep the same card sizing. */
.jfb20-sidebar-image-preview.jsc-lightbox-trigger{
    display:block;
    overflow:hidden;
    border:1px solid #d5e2de;
    border-radius:7px;
    background:#eef3f1;
    aspect-ratio:16/9;
}
.jfb20-sidebar-image-preview.jsc-lightbox-trigger img{display:block;width:100%;height:100%;object-fit:cover}
.jfb20-sidebar-image-preview.jsc-lightbox-trigger[data-ratio="21:9"]{aspect-ratio:21/9}
.jfb20-sidebar-image-preview.jsc-lightbox-trigger[data-ratio="3:2"]{aspect-ratio:3/2}
.jfb20-sidebar-image-preview.jsc-lightbox-trigger[data-ratio="4:3"]{aspect-ratio:4/3}
.jfb20-sidebar-image-preview.jsc-lightbox-trigger[data-ratio="1:1"]{aspect-ratio:1/1}
.jfb20-sidebar-image-preview.jsc-lightbox-trigger[data-ratio="3:4"]{aspect-ratio:3/4}
.jfb20-sidebar-image-preview.jsc-lightbox-trigger[data-ratio="9:16"]{aspect-ratio:9/16}
.jfb20-sidebar-image-preview.jsc-lightbox-trigger[data-ratio="auto"]{aspect-ratio:auto}
.jfb20-sidebar-image-preview.jsc-lightbox-trigger[data-ratio="auto"] img{height:auto}

@media(max-width:640px){
    .jsc-image-lightbox__toolbar{align-items:flex-start;gap:8px;padding:8px 9px}
    .jsc-image-lightbox__title{padding-top:9px;font-size:11px}
    .jsc-image-lightbox__controls{gap:4px}
    .jsc-image-lightbox__controls button{min-width:34px;height:34px;padding:0 7px}
    .jsc-image-lightbox__zoom-label{min-width:42px;font-size:10px}
    .jsc-image-lightbox__image{max-width:96vw;max-height:calc(100vh - 82px)}
    .jsc-lightbox-trigger .jsc-lightbox-hint{font-size:9px;right:6px;bottom:6px}
}