/**
 * Stencil Preview Mode CSS
 * Gestisce tutti gli stili specifici per il preview mode
 * Separato dal CSS principale per evitare conflitti
 */

/* ====================================
   PREVIEW MODE OVERLAY SYSTEM
   ==================================== */

/* Page Overlay - copre TUTTO il viewport, z-index basso per stare sotto canvas */
#stencil-preview-page-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: not-allowed !important;
    background-color: rgba(128, 128, 128, 0.5) !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}


/* ====================================
   PREVIEW MODE Z-INDEX HIERARCHY  
   ==================================== */

/* Forza elementi della pagina sotto l'overlay durante preview mode */
body.stencil-preview-active header,
body.stencil-preview-active footer,
body.stencil-preview-active nav,
body.stencil-preview-active .site-header,
body.stencil-preview-active .site-footer,
body.stencil-preview-active .navigation,
body.stencil-preview-active .menu,
body.stencil-preview-active .sidebar,
body.stencil-preview-active .widget,
body.stencil-preview-active .wp-block-navigation,
body.stencil-preview-active .csd-demo-warning,
body.stencil-preview-active #csd-demo-warning,
body.stencil-preview-active .csd-file-upload-wrapper,
body.stencil-preview-active .csd-file-upload-button,
body.stencil-preview-active .upload-main-text,
body.stencil-preview-active .upload-sub-text,
body.stencil-preview-active .csd-section-content,
body.stencil-preview-active #csd-gallery-container,
body.stencil-preview-active #csd-gallery-main-image,
body.stencil-preview-active .csd-gallery-thumbnails,
body.stencil-preview-active .csd-thumb,
body.stencil-preview-active .csd-canvas-thumb {
    z-index: 1 !important;
    position: relative !important;
}

/* Elementi specifici SENZA position relative */
body.stencil-preview-active .csd-icons,
body.stencil-preview-active .csd-debug-pricing,
body.stencil-preview-active #csd-loader-overlay {
    z-index: 1 !important;
}

/* Canvas Container - Solo position senza z-index */
.stencil-preview-active .csd-canvas-container {
    position: relative !important;
}

/* Elementi UI dentro canvas container che devono rimanere sotto overlay */
.stencil-preview-active .csd-canvas-container .csd-demo-warning,
.stencil-preview-active .csd-canvas-container #csd-demo-warning,
.stencil-preview-active .csd-canvas-container .csd-file-upload-wrapper,
.stencil-preview-active .csd-canvas-container .csd-file-upload-button,
.stencil-preview-active .csd-canvas-container .upload-main-text,
.stencil-preview-active .csd-canvas-container .upload-sub-text,
.stencil-preview-active .csd-canvas-container .csd-section-content,
.stencil-preview-active .csd-canvas-container #csd-gallery-container,
.stencil-preview-active .csd-canvas-container #csd-gallery-main-image,
.stencil-preview-active .csd-canvas-container .csd-gallery-thumbnails,
.stencil-preview-active .csd-canvas-container .csd-thumb:not(.csd-canvas-thumb) {
    z-index: 1 !important;
}

/* Paper Container - Intermediate layer */
.stencil-preview-active #csd-paper-container {
    position: relative !important;
    z-index: 1001 !important;
}

/* Canvas Element - Solo z-index senza position */
.stencil-preview-active #csd-paper-canvas {
    z-index: 1002 !important;
}

/* Canvas Controls - Sopra overlay con massima specificità */
.stencil-preview-active .csd-canvas-container .csd-canvas-controls,
body.stencil-preview-active .csd-canvas-container .csd-canvas-controls,
html body.stencil-preview-active .csd-canvas-container div.csd-canvas-controls,
body.stencil-preview-active div.csd-canvas-container div.csd-canvas-controls[class] {
    position: absolute !important;
    z-index: 1003 !important;
}

/* Super specificità per elementi problematici */
.stencil-preview-active .csd-canvas-controls,
body.stencil-preview-active .csd-canvas-controls,
html body.stencil-preview-active div.csd-canvas-controls {
    z-index: 1003 !important;
    position: absolute !important;
}

/* Zoom Controls - Sopra canvas controls */
.stencil-preview-active .csd-canvas-container .csd-canvas-controls .csd-zoom-controls {
    z-index: 1004 !important;
}

/* Color Slider - Layer più alto */
.stencil-preview-active .color-slider-container {
    position: absolute !important;
    z-index: 1005 !important;
}

/* Tooltip Button nel Canvas - Sopra overlay */
.stencil-preview-active .csd-global-info-icon {
    position: relative !important;
    z-index: 1006 !important;
}

/* Tech Message - Sopra overlay */
.stencil-preview-active .csd-tech-message {
    z-index: 1009 !important;
}

/* Elementi specifici con z-index alti da forzare sotto */
.stencil-preview-active .csd-icons,
.stencil-preview-active .csd-debug-pricing,
.stencil-preview-active #csd-loader-overlay {
    z-index: 1 !important;
}

/* ====================================
   PREVIEW MODE INTERACTIONS
   ==================================== */

/* Elementi che devono rimanere cliccabili durante preview */
.stencil-preview-active .csd-canvas-container .csd-canvas-controls,
.stencil-preview-active .csd-canvas-container .csd-canvas-controls .csd-zoom-controls,
.stencil-preview-active .color-slider-container,
.stencil-preview-active .csd-global-info-icon,
.stencil-preview-active .csd-tech-message,
.stencil-preview-active .wp-picker-container,
.stencil-preview-active .wp-picker-holder,
.stencil-preview-active .iris-picker,
.stencil-preview-active .wp-color-result,
.stencil-preview-active .wp-picker-input-wrap,
.stencil-preview-active .color-slider-header,
.stencil-preview-active .color-slider-reset,
.stencil-preview-active .color-slider-track,
.stencil-preview-active .color-slider-handle,
.stencil-preview-active .color-preview-swatch,
.stencil-preview-active .color-picker-close,
.stencil-preview-active .color-picker-main,
.stencil-preview-active .color-picker-hue,
.stencil-preview-active .color-picker-cursor,
.stencil-preview-active .color-input,
.stencil-preview-active .color-picker-btn,
.stencil-preview-active #csd-paper-canvas {
    pointer-events: auto !important;
    cursor: default !important;
}

/* Pulsanti specifici del canvas */
.stencil-preview-active .csd-canvas-container .csd-canvas-controls .csd-canvas-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: inherit;
}

/* ====================================
   PREVIEW MODE COLOR SLIDER
   ==================================== */

/* Color Slider durante preview mode */
.stencil-preview-active .color-slider-container {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Color picker popup durante preview - MASSIMO Z-INDEX */
.stencil-preview-active .color-picker-popup {
    z-index: 1010 !important;
    position: fixed !important;
}

/* WordPress Color Picker Elements */
.stencil-preview-active .wp-picker-container,
.stencil-preview-active .wp-picker-holder,
.stencil-preview-active .iris-picker,
.stencil-preview-active .wp-color-result,
.stencil-preview-active .wp-picker-input-wrap {
    position: relative !important;
    z-index: 1007 !important;
}

/* Custom Color Picker System - Plugin specifico */
.stencil-preview-active .color-slider-header,
.stencil-preview-active .color-slider-title,
.stencil-preview-active .color-slider-reset,
.stencil-preview-active .color-slider-track,
.stencil-preview-active .color-slider-gradient,
.stencil-preview-active .color-slider-handle,
.stencil-preview-active .color-slider-preview,
.stencil-preview-active .color-preview-swatch,
.stencil-preview-active .color-preview-text,
.stencil-preview-active .color-picker-header,
.stencil-preview-active .color-picker-title,
.stencil-preview-active .color-picker-close,
.stencil-preview-active .color-picker-main,
.stencil-preview-active .color-picker-hue,
.stencil-preview-active .color-picker-cursor,
.stencil-preview-active .color-picker-preview,
.stencil-preview-active .color-preview-large,
.stencil-preview-active .color-picker-info,
.stencil-preview-active .color-input-group,
.stencil-preview-active .color-input-label,
.stencil-preview-active .color-input,
.stencil-preview-active .color-picker-actions,
.stencil-preview-active .color-picker-btn {
    position: relative !important;
    z-index: 1008 !important;
}

/* ====================================
   PREVIEW MODE RESPONSIVE
   ==================================== */

/* Mobile adjustments per preview mode */
@media (max-width: 768px) {
    .stencil-preview-active .csd-canvas-container .csd-canvas-controls {
        top: 5px !important;
        right: 5px !important;
        padding: 4px !important;
    }
    
    .stencil-preview-active .color-slider-container {
        position: fixed !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        max-width: 300px !important;
    }
}

/* ====================================
   PREVIEW MODE ANIMATIONS
   ==================================== */

/* Smooth transitions per preview mode */
.stencil-preview-active .csd-canvas-container,
.stencil-preview-active .csd-canvas-container .csd-canvas-controls,
.stencil-preview-active .color-slider-container {
    transition: z-index 0.3s ease, opacity 0.3s ease;
}

/* Fade in effect per overlay */
#stencil-preview-page-overlay {
    animation: fadeInOverlay 0.3s ease-out;
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ====================================
   PREVIEW MODE DEBUG
   ==================================== */

/* Debug styles (solo se necessario) */
.stencil-preview-debug .csd-canvas-container::before {
    content: "Canvas Container Z:" attr(style);
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    background: yellow;
    padding: 2px;
    z-index: 9999;
}