.jt-hanging-monitor {
    position: relative;
    margin: 0 auto;
}

.jt-monitor-wrapper {
    position: relative;
    width: 100%;
    line-height: 0;
}

.jt-monitor-frame {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 20; /* Higher z-index to ensure frame is above video */
    pointer-events: none;
    user-select: none;
}

.jt-monitor-screen {
    position: absolute;
    z-index: 1; /* Lower z-index to ensure video is behind frame */
    background: transparent; /* Transparent to eliminate any visible background */
    overflow: hidden; /* Hide any overflow */
    /* Default offsets - adjusted to eliminate white gaps */
    top: 18.0%; /* Reduced from 18.41% to eliminate top gap */
    bottom: 1.2%; /* Reduced from 1.73% to eliminate bottom gap */
    left: 1.84%; /* Keep as is - no gap on left */
    right: 1.6%; /* Reduced from 2.15% to eliminate right gap */
}

.jt-video-container, .jt-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible; /* Allow video to extend beyond container edges */
    background: transparent; /* Ensure no background shows through */
}

.jt-monitor-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none; /* Ensure no border */
    outline: none; /* Ensure no outline */
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.05); /* Scale from center to cover edges */
    min-width: 100%;
    min-height: 100%;
}

/* 
   Overlay & Controls 
   ------------------
*/

.jt-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 15;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Glassmorphism Button Mixin */
.jt-glass-btn {
    background: rgba(255, 255, 255, 0.25); /* More transparent */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Initial Unmute Button (Centered) */
.jt-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    z-index: 20;
    opacity: 0;
    /* Extend glass mixin styles */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.jt-play-button svg {
    width: 22px;
    height: 22px;
    stroke: #fff; /* White icon for better contrast on glass */
    fill: none;
}

/* Hover Red Beam Effect */
.jt-play-button:hover, .jt-control-btn:hover {
    border-color: rgb(203, 20, 20);
    box-shadow: 0 0 15px rgba(203, 20, 20, 0.8), inset 0 0 10px rgba(203, 20, 20, 0.2);
    background: rgba(255, 255, 255, 0.35);
}

/* Keep icons white on hover - only border shows red beam */
.jt-play-button:hover svg, 
.jt-play-button:active svg,
.jt-control-btn:hover svg,
.jt-control-btn:active svg,
.jt-control-btn:focus svg {
    stroke: #fff !important; /* Keep white on hover/active/focus - never red */
}

/* Show initial button on hover if overlay is active */
.jt-video-container:hover .jt-play-button {
    opacity: 1;
}

/* 
   Secondary Controls (Mute, Pause, Fullscreen) 
   Shown on hover AFTER initial unmute
*/
.jt-controls-overlay {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 24px; /* Increased spacing a bit more */
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    align-items: flex-end; /* Align bottom */
}

.jt-control-btn {
    width: 40px;
    height: 40px;
    /* Glass styles */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.jt-control-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
}

/* State Management */
.jt-video-container.is-playing-sound .jt-video-overlay {
    opacity: 0;
    pointer-events: none;
}

.jt-video-container.is-playing-sound .jt-play-button {
    display: none !important; /* Fully remove initial button */
}

/* Show controls on hover when playing sound (Desktop) */
.jt-video-container.is-playing-sound:hover .jt-controls-overlay {
    opacity: 1;
    pointer-events: auto;
}

.jt-video-container.is-playing-sound:hover .jt-controls-overlay.jt-auto-hidden {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Auto-hidden state */
.jt-controls-overlay.jt-auto-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

.jt-play-button.jt-auto-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mobile: Controls shown via JS, fade transition */
.jt-controls-overlay, .jt-play-button {
    transition: opacity 0.3s ease, pointer-events 0s linear 0.3s;
}

/* Image Mode Styles */
.jt-image-container {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.jt-image-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.jt-image-container:hover .jt-image-overlay {
    opacity: 1;
}

.jt-monitor-btn {
    background-color: rgb(203, 20, 20);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: 'Gotham', sans-serif;
    font-size: 12.8px;
    font-weight: 500;
    line-height: 12.8px;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.jt-monitor-btn:hover {
    background-color: rgb(180, 20, 20);
}

/* 
   Elementor Editor Mode - Hide Controls
   -------------------------------------
   Hide all video controls in Elementor editor to show only the monitor frame
*/
body.elementor-editor-active .jt-play-button,
body.elementor-editor-active .jt-controls-overlay,
body.elementor-editor-active .jt-video-overlay,
body.elementor-editor-active .jt-control-btn,
body.elementor-editor-active .jt-icon-mute,
body.elementor-editor-active .jt-icon-volume,
.elementor-editor-preview .jt-play-button,
.elementor-editor-preview .jt-controls-overlay,
.elementor-editor-preview .jt-video-overlay,
.elementor-editor-preview .jt-control-btn,
.elementor-editor-preview .jt-icon-mute,
.elementor-editor-preview .jt-icon-volume {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Also hide SVG icons directly */
body.elementor-editor-active .jt-video-container svg,
.elementor-editor-preview .jt-video-container svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}