/**
 * Visual Compare - Frontend Shortcode Styles
 */

/* Wrapper — margin-bottom ensures spacing after the slider even without a caption */
.vcs-shortcode {
        position: relative;
        width: 100%;
        margin: 0 auto 1.5em;
}

.vcs-shortcode .shortcode-container {
        position: relative;
        width: 100%;
}

/* Slider container */
.vcs-container {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        cursor: ew-resize;
        user-select: none;
        transition: opacity 0.3s ease;
}

.vcs-container.vcs-image-compare-vertical {
        cursor: ns-resize;
}

/* Single caption — matches WordPress core figcaption / .wp-caption-text style */
.vcs-caption-wrapper {
        margin-top: 0.5em;
}

.vcs-caption {
        margin: 0;
        font-size: 0.8em;
        color: #767676;
        line-height: 1.4;
        text-align: center;
}

/* Notice for admins */
.vcs-notice {
        padding: 12px 16px;
        background: #fff3cd;
        border-left: 4px solid #ffc107;
        border-radius: 2px;
        font-size: 14px;
}

/* Popup / fullscreen button — top-right corner to avoid mute-toggle overlap on video sliders */
.vcs-container .popup-button {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 60;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 6px 8px;
        line-height: 0;
        cursor: pointer;
        pointer-events: auto;
}

.vcs-container .popup-button:hover {
        background: rgba(0, 0, 0, 0.9);
}

/* Mute toggle button for videos */
.vcs-mute-toggle {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 100;
        background: rgba(0, 0, 0, .5);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 4px 8px;
        cursor: pointer;
        font-size: 16px;
}

/* Video elements */
.vcs-video-compare-before,
.vcs-video-compare-after {
        width: 100%;
        display: block;
        object-fit: cover;
}

/* Block placeholder on frontend */
.vcs-block-placeholder {
        padding: 20px;
        background: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-align: center;
        color: #666;
}

/* Core-owned native Image Compare. */
.te-image-compare-native{
  --te-compare-pos:50%;--te-compare-handle-color:#fff;
  position:relative;width:100%;max-width:100%;overflow:hidden;border-radius:8px;
  background:#111;touch-action:none;user-select:none;isolation:isolate;
}
.te-image-compare-native .te-image-compare-base{position:relative;z-index:1;margin:0;padding:0}
.te-image-compare-native .te-image-compare-overlay{position:absolute;z-index:2;inset:0;overflow:hidden;margin:0;padding:0;pointer-events:none}
.te-image-compare-native[data-orientation="horizontal"] .te-image-compare-overlay{clip-path:inset(0 calc(100% - var(--te-compare-pos)) 0 0)}
.te-image-compare-native[data-orientation="vertical"] .te-image-compare-overlay{clip-path:inset(0 0 calc(100% - var(--te-compare-pos)) 0)}
.te-image-compare-native .te-image-compare-image,
.te-image-compare-native .vcs-image{display:block;width:100%;max-width:none;height:auto;margin:0}
.te-image-compare-native .te-image-compare-overlay .te-image-compare-image,
.te-image-compare-native .te-image-compare-overlay .vcs-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.te-image-compare-native .te-image-compare-handle{position:absolute;z-index:5;border:0;padding:0;background:transparent;touch-action:none;color:#111}
.te-image-compare-native[data-orientation="horizontal"] .te-image-compare-handle{top:0;bottom:0;left:var(--te-compare-pos);width:44px;transform:translateX(-50%);cursor:ew-resize}
.te-image-compare-native[data-orientation="vertical"] .te-image-compare-handle{left:0;right:0;top:var(--te-compare-pos);height:44px;transform:translateY(-50%);cursor:ns-resize}
.te-image-compare-native[data-orientation="horizontal"] .te-image-compare-handle::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--te-compare-handle-color);box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.te-image-compare-native[data-orientation="vertical"] .te-image-compare-handle::before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;transform:translateY(-50%);background:var(--te-compare-handle-color);box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.te-image-compare-native .te-image-compare-handle>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--te-compare-handle-color);color:#111;font:700 17px/1 system-ui,sans-serif;box-shadow:0 2px 12px rgba(0,0,0,.28)}
.te-image-compare-native[data-orientation="vertical"] .te-image-compare-handle>span{transform:translate(-50%,-50%) rotate(90deg)}
.te-image-compare-native .te-image-compare-handle:focus-visible>span{outline:3px solid #ec3535;outline-offset:3px}
.te-image-compare-native .te-image-compare-label{position:absolute;z-index:4;top:14px;padding:5px 8px;border-radius:3px;background:rgba(0,0,0,.60);color:#fff;font:700 11px/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;pointer-events:none}
.te-image-compare-native .te-image-compare-label-before{left:14px}.te-image-compare-native .te-image-compare-label-after{right:14px}
.te-image-compare-native-host{position:relative}
.te-image-compare-popup-button{position:absolute;z-index:20;right:10px;bottom:10px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.65);border-radius:5px;background:rgba(0,0,0,.62);color:#fff;cursor:pointer}
.te-image-compare-popup-button svg{fill:currentColor}.te-image-compare-popup-button:hover{background:rgba(0,0,0,.82)}
body.te-image-compare-open{overflow:hidden}
.te-image-compare-dialog{position:fixed;z-index:100000;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.92)}
.te-image-compare-dialog-inner{position:relative;width:min(1920px,calc(100vw - 48px));max-width:1920px;max-height:calc(100vh - 48px);aspect-ratio:var(--te-image-compare-dialog-aspect,auto)}
.te-image-compare-dialog-inner>.te-image-compare-native{width:100%;max-width:100%;max-height:calc(100vh - 48px)}
.te-image-compare-dialog-inner>.te-image-compare-native .te-image-compare-base img{width:100%;max-width:none;height:auto;max-height:calc(100vh - 48px);object-fit:contain}
.te-image-compare-dialog-inner>.te-image-compare-native .te-image-compare-overlay img{max-height:100%}
.te-image-compare-dialog-close{position:absolute;z-index:30;right:10px;top:10px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font:400 26px/1 system-ui,sans-serif;cursor:pointer}
@media(max-width:640px){.te-image-compare-dialog{padding:14px}.te-image-compare-dialog-inner{width:calc(100vw - 28px);max-height:calc(100vh - 28px)}.te-image-compare-dialog-inner>.te-image-compare-native,.te-image-compare-dialog-inner>.te-image-compare-native .te-image-compare-base img{max-height:calc(100vh - 28px)}}