/* Disable Editing CSS - Hides all editing UI elements while keeping them in DOM */

/* Ensure unified background is always visible and properly positioned in exports */
.unified-background {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Critical: Extract unified background from canvas flow in exports */
body .canvas .unified-background {
    /* When unified background is inside canvas, extract it to viewport level */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove editor-specific spacing that breaks unified backgrounds in exports */
.canvas {
    padding-top: 0 !important; /* Remove page navigation spacing */
    padding-bottom: 0 !important; /* Remove bottom button spacing */
}

/* Ensure first and last sections extend to edges for unified backgrounds */
.canvas-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.canvas-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure sections with unified background remain transparent in exports */
.canvas-section[data-unified-background="true"] {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Hide all editing controls and UI elements */
.block-edit-overlay,
.block-edit-btn,
.block-add-btn, 
.block-delete-btn,
.block-section-color-btn,
.column-resize-handle,
.sticker-edit-controls,
.sticker-edit-btn,
.sticker-resize-handle,
.sticker-rotate-handle,
.sticker-delete-btn,
.add-block-btn,
.settings-btn,
.project-name-container,
.property-panel,
.block-menu,
.page-tabs,
.add-page-btn,
/* Section controls */
.section-controls,
.section-color-btn,
/* Spacer block editing guide */
.spacer-guide,
.spacer-line,
.spacer-label,
/* Image block editing controls - BUT NOT CONTENT */
.image-upload-overlay,
.image-change-btn,
.image-upload-btn,
.change-image-btn,
.image-upload-area,
.image-placeholder,
.upload-placeholder,
/* Gallery block editing controls */
.gallery-add-btn,
.add-images-btn,
.gallery-edit-btn,
.gallery-remove-btn,
.gallery-move-btn,
.gallery-move-left,
.gallery-move-right,
.image-edit-overlay,
.image-delete-btn,
.gallery-upload-btn,
.gallery-controls,
.gallery-edit-controls,
/* Navbar/Logo editing controls */
.logo-upload-btn,
.logo-change-btn,
.navbar-edit-btn,
.logo-edit-overlay,
.navbar-logo-edit,
/* Button block editing */
.button-edit-overlay,
.button-edit-btn,
/* Social media editing */
.social-edit-overlay,
.social-edit-btn,
/* Text block editing toolbar */
.text-toolbar,
.text-edit-toolbar,
.formatting-toolbar,
/* Divider editing */
.divider-edit-overlay,
.divider-edit-btn,
/* Catch-all for any editing elements - REFINED to avoid hiding content */
*[class*="edit-"]:not(.button-element):not(.image-element):not(.social-media-link):not(.divider-line),
*[class*="-edit"]:not(.button-element):not(.image-element):not(.social-media-link):not(.divider-line),
*[class*="upload"]:not(.button-element):not(.image-element):not(.social-media-link):not(.divider-line),
*[class*="change-"]:not(.button-element):not(.image-element):not(.social-media-link):not(.divider-line),
*[class*="add-"]:not(.add-to-cart):not(.add-contact):not(.button-element):not(.image-element):not(.social-media-link):not(.divider-line),
*[class*="delete-"]:not(.button-element):not(.image-element):not(.social-media-link):not(.divider-line),
*[class*="remove-"]:not(.button-element):not(.image-element):not(.social-media-link):not(.divider-line),
*[class*="toolbar"]:not(.button-element):not(.image-element):not(.social-media-link):not(.divider-line),
*[class*="controls"]:not(.slideshow-nav):not(.gallery-modal-controls):not(.button-element):not(.image-element):not(.social-media-link):not(.divider-line),
*[data-edit],
*[data-upload],
*[data-delete] {
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
    /* Keep in DOM structure but completely invisible and uninteractable */
}

/* Disable hover effects that show editing UI */
.block:hover .block-edit-overlay,
.sticker:hover .sticker-edit-controls,
.flex-grid-container:hover .column-resize-handle,
/* Section hover effects */
.canvas-section:hover .section-controls,
.canvas-section:hover::before,
.canvas-section:hover::after,
/* Disable hover effects for specific block types */
.image-block:hover .image-upload-overlay,
.image-block:hover .change-image-btn,
.image-block:hover .image-edit-overlay,
.gallery-block:hover .gallery-add-btn,
.gallery-block:hover .add-images-btn,
.gallery-block:hover .gallery-edit-controls,
.gallery-item:hover .image-edit-overlay,
.gallery-item:hover .image-delete-btn,
.navbar-block:hover .logo-edit-overlay,
.navbar-block:hover .navbar-edit-btn,
.navbar-logo-container:hover .logo-change-btn,
.button-block:hover .button-edit-overlay,
.text-block:hover .text-toolbar,
.text-block:hover .formatting-toolbar,
.social-media-block:hover .social-edit-overlay,
.divider-block:hover .divider-edit-overlay {
    visibility: hidden !important;
    display: none !important;
}

/* Remove editing cursors and interactions */
.block,
.sticker,
.column-resize-handle {
    cursor: default !important;
}

/* Disable dragging completely */
[draggable="true"],
.block[draggable],
.sticker {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    draggable: false !important;
}

/* Disable text selection on UI elements that shouldn't be selectable */
.block-edit-overlay,
.sticker-edit-controls,
.column-resize-handle {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Remove borders and hover effects from blocks and stickers */
.block:hover,
.sticker:hover {
    border: none !important;
    box-shadow: none !important;
    /* Keep original block styling, just remove editing visual feedback */
}

/* Ensure blocks maintain their original appearance and are VISIBLE */
.block {
    border: none !important;
    /* Remove any editor-specific borders */
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    min-height: 20px !important;
    position: relative !important;
}

/* Ensure block wrappers are visible and properly aligned */
.block-wrapper {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    position: relative !important;
    /* Fix vertical alignment in flex columns */
    align-self: stretch !important;
}

/* Minimal block row fixes - let original CSS work */
.block-row {
    display: flex !important;
    /* Let original alignment properties work naturally */
}

/* Minimal block alignment - preserve original behavior */
.block {
    /* Let original block styling work naturally */
}

/* Ensure stickers maintain their original appearance */
.sticker {
    border: none !important;
    /* Remove any editor-specific borders */
}

/* Hide any floating panels or modals */
.floating-panel,
.modal-backdrop,
.settings-modal,
.text-editor-modal,
.emoji-picker-modal {
    display: none !important;
}

/* Remove edit mode indicators */
.block.editing,
.sticker.editing,
.edit-mode {
    /* Remove any visual indicators of edit mode */
}

/* Ensure page structure remains intact but hide page management */
.page-container {
    /* Keep page structure but hide management UI */
}

.page-content {
    /* Ensure content remains visible */
}

/* Hide animation controls */
.animation-controls,
.global-animation-controls {
    display: none !important;
}

/* Make sure content remains fully functional */
.text-block,
.image-block,
.navbar-block,
.gallery-block,
.divider-block,
.social-media-block,
.button-block {
    /* All blocks should function normally, just without editing */
}

/* Stickers should display normally */
.sticker-content,
.emoji-content,
.text-content {
    /* Sticker content should be fully visible and functional */
}

/* Responsive considerations */
@media (max-width: 768px) {
    /* Ensure mobile experience is clean */
    .block-edit-overlay,
    .sticker-edit-controls {
        display: none !important;
    }
    
    /* Remove mobile canvas bottom padding for exported sites */
    .canvas {
        padding-bottom: 0 !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .block,
    .sticker {
        /* Maintain accessibility in high contrast mode */
    }
}

/* Focus management - remove focus rings from non-interactive elements */
.block:focus,
.sticker:focus,
.block-edit-overlay:focus,
.sticker-edit-controls:focus {
    outline: none !important;
}

/* Ensure links and buttons in content still work */
.block a,
.block button,
.navbar-block a,
.button-block a,
.button-block button,
.social-media-block a {
    /* Keep these interactive elements fully functional */
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Gallery interactions should still work */
.gallery-item,
.slideshow-nav,
.slideshow-dot {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Override catch-all for important functional elements */
.slideshow-nav,
.slideshow-dot,
.gallery-modal-close,
.nav-link,
.button-element,
.image-element,
.divider-line,
.social-media-link,
.social-media-block a,
.button-block .button-element,
.image-block .image-element,
.divider-block .divider-line,
.social-media-block .social-media-link {
    visibility: visible !important;
    pointer-events: auto !important;
    /* Preserve original display property for flex layout */
}

/* Navbar logo container needs flex layout for proper image+text positioning */
.navbar-logo-container {
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
}

/* Section positioning for exported sites - extend to true viewport edges */
.canvas-section:first-child {
    margin-top: calc(-50px - var(--spacing-xl) - 20px) !important; /* -82px total: full breakout */
    padding-top: calc(50px + var(--spacing-xl) + 20px) !important; /* 82px total: restore spacing */
}

/* Canvas bottom padding removal for exported sites */
.canvas {
    padding-bottom: 0 !important;
}

/* Last section positioning for exported sites - extend to true viewport bottom */
.canvas-section:last-child {
    margin-bottom: -80px !important; /* Full breakout - matches canvas padding */
    padding-bottom: 80px !important; /* Restore content spacing */
}

/* Ensure body has no default margins/padding that interfere with sections */
body {
    margin: 0 !important;
    padding: 0 !important;
}

/* FORCE BLOCK CONTAINERS TO BE VISIBLE - but preserve original layout */
.button-block-content,
.image-block-content, 
.divider-block-content,
.text-block-content {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    /* Let original dimensions and spacing work naturally */
}

/* Social media block content needs flex layout for multiple buttons */
.social-media-block-content {
    visibility: visible !important;
    opacity: 1 !important;
    /* Preserve original display and flex properties */
}

/* Preserve social media buttons container flex layout */
.social-media-buttons {
    visibility: visible !important;
    opacity: 1 !important;
    /* Keep original flex display and layout properties */
}

/* Only force visibility, don't override layout properties */
.text-content {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Minimal image block fixes - preserve natural layout */
.image-element {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    /* Let original margins, padding, and alignment work naturally */
}

/* Force parent blocks to be visible too */
.button-block,
.image-block,
.divider-block,
.social-media-block {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    position: relative !important;
}

/* FORCE VISIBILITY for all content elements but preserve styling */
.image-element,
.divider-line {
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Social media links need to preserve their flex display properties */
.social-media-link {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    /* Don't override display - let original CSS handle flex layout */
    width: auto !important;
    position: relative !important;
}

/* Button elements need special handling to preserve inline styles */
.button-element {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    position: relative !important;
    display: inline-flex !important;
    /* DON'T override height, width, colors - preserve inline styles */
}

/* Specific overrides for divider lines */
.divider-line {
    display: inline-block !important;
    border-top: 2px solid #ddd !important;
    width: 100% !important;
}

/* Hide only empty image placeholders (editing state) */
.image-placeholder:empty,
.upload-placeholder:empty,
.image-block:not(:has(.image-element)) .image-placeholder,
.image-block:not(:has(.image-element)) .upload-placeholder {
    display: none !important;
}

/* Specifically hide common editing elements that might show up */
button[onclick*="upload"],
button[onclick*="change"],
button[onclick*="edit"],
button[onclick*="delete"],
button[onclick*="add"],
.upload-btn,
.edit-btn,
.delete-btn,
.change-btn,
input[type="file"] {
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

/* Ensure slideshow functionality remains */
.slideshow-container,
.slideshow-slides,
.slideshow-slide {
    /* Keep slideshow functionality intact */
}

/* NUCLEAR OPTION: Force all elements in specific blocks to be visible unless they're editing elements */
.button-block *:not([class*="edit"]):not([class*="upload"]):not([class*="change"]):not([class*="delete"]):not([class*="add"]):not([class*="toolbar"]):not(.button-element),
.image-block *:not([class*="edit"]):not([class*="upload"]):not([class*="change"]):not([class*="delete"]):not([class*="add"]):not([class*="toolbar"]):not(.image-placeholder):not(.upload-placeholder):not(.image-element),
.divider-block *:not([class*="edit"]):not([class*="upload"]):not([class*="change"]):not([class*="delete"]):not([class*="add"]):not([class*="toolbar"]):not(.divider-line),
.social-media-block *:not([class*="edit"]):not([class*="upload"]):not([class*="change"]):not([class*="delete"]):not([class*="add"]):not([class*="toolbar"]):not(.social-media-link) {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make sure the main content elements aren't affected by nuclear rules */
.button-element,
.image-element, 
.divider-line,
.social-media-link {
    /* Let these preserve their original styling completely */
}

/* Enhanced button styling for exports - minimal overrides to preserve inline styles */
.button-element {
    /* Only force essential layout properties */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    
    /* Use lighter fallbacks that won't override inline styles */
    transition: all 0.2s ease;
}

/* Only apply default styling if no inline styles exist at all */
.button-element:not([style]) {
    background-color: #4a90e2;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    border: 2px solid #4a90e2;
    font-weight: 500;
    min-height: 44px;
}

/* Hover effects for all buttons */
.button-element:hover {
    transform: translateY(-1px) !important;
    filter: brightness(0.9) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.button-element:active {
    transform: translateY(1px) !important;
    filter: brightness(0.8) !important;
}

.social-media-link {
    /* Let social media styles work normally - just ensure they're visible */
}

.image-element {
    /* Let image styles work normally - just ensure they're visible */
}

/* Mobile Menu Styles for Exported Sites */
.mobile-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    visibility: hidden;
}

.mobile-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 300ms ease;
}

.mobile-menu-overlay-open {
    opacity: 1;
}

.navbar-mobile-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: min(300px, 80vw);
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 300ms ease;
    overflow-y: auto;
}

.mobile-menu-open {
    transform: translateX(0);
}

.mobile-menu-closed {
    transform: translateX(100%);
}

.mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    color: #666;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
}

.mobile-menu-close:hover {
    color: #000;
}

.mobile-nav-links {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}

.mobile-nav-link {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 200ms ease;
    visibility: visible !important;
    pointer-events: auto !important;
}

.mobile-nav-link:hover {
    background-color: #f8f9fa;
}

.mobile-nav-link.nav-link-current {
    font-weight: 500;
}

/* Prevent body scroll when mobile menu is active */
body.mobile-menu-active {
    overflow: hidden;
}

/* Hide mobile menu container on desktop */
@media (min-width: 769px) {
    .mobile-menu-container {
        display: none !important;
    }
}
