/* ==========================================================================
   Image Spyglass v3 – Front-end Styles
   ========================================================================== */

/* ---- CSS custom-property defaults (overridden per-block by inline style) - */
.isg-control-panel {
    --isg-panel-bg:     rgba(20,20,20,0.85);
    --isg-btn-inactive: rgba(255,255,255,0.08);
    --isg-btn-active:   rgba(255,255,255,0.22);
}

/* ---- Outer block wrapper ------------------------------------------------- */
.image-spyglass-block {
    position: relative;
    display: block;
    user-select: none;
    -webkit-user-select: none;
    line-height: 0;
}

.image-spyglass-block.has-control-panel {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}

.image-spyglass-block.panel-top    { flex-direction: column-reverse; }
.image-spyglass-block.panel-bottom { flex-direction: column; }
.image-spyglass-block.panel-left   { flex-direction: row-reverse; }
.image-spyglass-block.panel-right  { flex-direction: row; }

/* ---- Image wrapper + inner transform layer ------------------------------ */
.isg-image-wrap {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 0;
    cursor: crosshair;
    touch-action: none;   /* Let JS handle all touch gestures — required for pinch zoom */
}

/* .isg-inner is the element that receives scale() + translate() for zoom/pan */
.isg-inner {
    position: relative;
    width: 100%;
    transform-origin: 0 0;   /* JS sets transform; origin stays top-left */
    will-change: transform;
}

.isg-inner img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
    image-rendering: -webkit-optimize-contrast; /* Safari */
    image-rendering: high-quality;              /* Chrome/Firefox — best quality upscaling */
}

.isg-img-b {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Image C shares the same stacking position as image B */
.isg-img-c {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.isg-img-a {
    position: relative;
    z-index: 2;
}

.isg-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

/* ---- Slider handle ------------------------------------------------------- */
.isg-slider-handle {
    position: absolute;
    top: 0; left: 50%;
    width: 0; height: 100%;
    z-index: 20;
    pointer-events: none;
    transform: translateX(-50%);
    display: none;
}

.isg-slider-line {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 3px; height: 100%;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
}

.isg-slider-grip {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    color: #333;
    pointer-events: none;
}

/* ---- Control panel ------------------------------------------------------- */
.isg-control-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px 14px;
    background: var(--isg-panel-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    line-height: 1.4;
    flex-shrink: 0;
}

.panel-left  .isg-control-panel,
.panel-right .isg-control-panel {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 140px;
    min-width: 140px;
    gap: 10px;
}

/* ---- Mode buttons -------------------------------------------------------- */
.isg-mode-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.panel-left  .isg-mode-buttons,
.panel-right .isg-mode-buttons { flex-direction: column; gap: 4px; }

.isg-mode-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1;
}

.isg-mode-btn input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0;
}

.isg-mode-btn span {
    display: inline-block;
    padding: 5px 11px;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    background: var(--isg-btn-inactive);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
    cursor: pointer;
}

.isg-mode-btn input[type="radio"]:checked + span {
    color: #fff;
    background: var(--isg-btn-active);
    border-color: rgba(255,255,255,0.6);
}

.isg-mode-btn span:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.13);
}

/* ---- Shared inline-range controls (zoom, radius, transparency) ----------- */
.isg-ctrl-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    cursor: default;
    line-height: 1.3;
}

.panel-left  .isg-ctrl-label,
.panel-right .isg-ctrl-label {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    white-space: normal;
}

/* In a column flex context flex-basis applies to height, making the range
   slider track very tall.  Reset to natural (intrinsic) height. */
.panel-left  .isg-inline-range,
.panel-right .isg-inline-range {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.isg-inline-range {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
    outline: none;
    cursor: pointer;
    flex: 1 1 80px;
    min-width: 60px;
}

.isg-inline-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    cursor: pointer;
}

.isg-inline-range::-moz-range-thumb {
    width: 16px; height: 16px;
    border: none; border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    cursor: pointer;
}

/* Zoom is always visible; radius shown only in spyglass mode;
   fader-control shown only in fader mode – JS adds/removes .is-visible */
.isg-radius-control  { display: none; }
.isg-fader-control   { display: none; }
.isg-zoom-control    { display: flex; }

.isg-radius-control.is-visible,
.isg-fader-control.is-visible  { display: flex; }

.panel-left  .isg-zoom-control,
.panel-right .isg-zoom-control,
.panel-left  .isg-radius-control,
.panel-right .isg-radius-control,
.panel-left  .isg-fader-control,
.panel-right .isg-fader-control { display: block; }

.panel-left  .isg-radius-control,
.panel-right .isg-radius-control,
.panel-left  .isg-fader-control,
.panel-right .isg-fader-control { display: none; }

.panel-left  .isg-radius-control.is-visible,
.panel-right .isg-radius-control.is-visible,
.panel-left  .isg-fader-control.is-visible,
.panel-right .isg-fader-control.is-visible  { display: block; }

/* ---- Background image selector (three-image mode) ----------------------- */
.isg-bg-select-wrap {
    display: flex;
}

.panel-left  .isg-bg-select-wrap,
.panel-right .isg-bg-select-wrap { display: block; }

.isg-bg-select {
    -webkit-appearance: none;
    appearance: none;
    background: var(--isg-btn-inactive);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    color: rgba(255,255,255,0.85);
    font-family: system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 4px 24px 4px 8px;
    cursor: pointer;
    outline: none;
    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.6)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    width: 100%;
}

.isg-bg-select:focus {
    border-color: rgba(255,255,255,0.6);
}

.isg-bg-select option {
    background: #1a1a2e;
    color: #fff;
}

/* ---- Fullscreen button ---------------------------------------------------- */
.isg-fullscreen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin-left: auto;   /* push to far end of the panel row */
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.isg-fullscreen-btn:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

/* In vertical panels, cancel auto-margin and stretch to full column width */
.panel-left  .isg-fullscreen-btn,
.panel-right .isg-fullscreen-btn {
    margin-left: 0;
    width: 100%;
    height: 30px;
}

/* Swap icons based on fullscreen state */
.isg-icon-compress             { display: none; }
.isg-is-fullscreen .isg-icon-compress { display: block; }
.isg-is-fullscreen .isg-icon-expand   { display: none; }

/* ---- Fullscreen state ----------------------------------------------------- */
.isg-is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    z-index: 99999 !important;
    background: #000;
}

/* Image wrap fills remaining flex space and centres content */
.isg-is-fullscreen .isg-image-wrap {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* isg-inner is sized by image A.  We constrain it to the viewport using
   aspect-ratio + max-width/max-height so its box never exceeds the wrap.
   Images B/C fill this exact box and therefore stay letterboxed. */
.isg-is-fullscreen .isg-inner {
    position: relative;
    /* Shrink to the contained image dimensions */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    /* transform-origin preserved from base rule */
}

/* Image A drives the inner box size */
.isg-is-fullscreen .isg-img-a {
    display: block;
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
}

/* Background images B and C: fill the inner box exactly —
   which is now the same size as image A's rendered dimensions. */
.isg-is-fullscreen .isg-img-b,
.isg-is-fullscreen .isg-img-c {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ---- Cursor states ------------------------------------------------------- */
.isg-image-wrap.mode-spyglass { cursor: crosshair; }
.isg-image-wrap.mode-slider   { cursor: col-resize; }
.isg-image-wrap.mode-fader    { cursor: default; }
.isg-image-wrap.is-panning    { cursor: grabbing !important; }
.isg-image-wrap.can-pan       { cursor: grab; }

/* ---- Alignment helpers -------------------------------------------------- */
.image-spyglass-block.alignwide {
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-left: auto; margin-right: auto;
}
.image-spyglass-block.alignfull {
    width: 100vw; max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* ---- Admin notice -------------------------------------------------------- */
.image-spyglass-notice {
    padding: 1em;
    background: #f0f0f0;
    border-left: 4px solid #c00;
    font-style: italic;
    color: #555;
}