/**
 * Fix for cover-overlay causing iOS Safari issues
 * This targets the specific divider element that's causing problems
 */

/* Only apply these fixes for iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* Fix 1: Prevent cover-overlay from interfering with touch events */
    .template-content .cover-overlay {
        pointer-events: none !important;
        touch-action: none !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Fix 2: Ensure cover-overlay doesn't block scrolling */
    .template-content .droppableElementArea .cover-overlay {
        pointer-events: none !important;
        touch-action: auto !important;
    }
    
    /* Fix 3: Specific fix for divider elements with cover-overlay */
    .template-content .dividerElement .cover-overlay {
        pointer-events: none !important;
        touch-action: auto !important;
        z-index: -999999 !important; /* Push it even further back */
    }
    
    /* Fix 4: Ensure the divider element itself doesn't interfere */
    .template-content .dividerElement {
        pointer-events: auto !important;
        touch-action: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Fix 5: Ensure the hr element inside divider works properly */
    .template-content .dividerElement .dividerElementHR {
        pointer-events: none !important;
        touch-action: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* Fix 6: Prevent any absolute positioned elements from blocking touch */
    .template-content .droppableElementArea[style*="position: absolute"] .cover-overlay {
        pointer-events: none !important;
        touch-action: auto !important;
    }
    
    /* Fix 7: Ensure rowColParentWrapper doesn't have touch issues */
    .template-content .rowColParentWrapper .cover-overlay {
        pointer-events: none !important;
        touch-action: auto !important;
    }
    
    /* Fix 8: Specific fix for the problematic header section */
    #header-block-1 .cover-overlay {
        pointer-events: none !important;
        touch-action: auto !important;
        z-index: -999999 !important;
    }
    
    /* Fix 9: Ensure the elementWrapper allows touch events */
    .template-content .elementWrapper {
        pointer-events: auto !important;
        touch-action: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Fix 10: Prevent any hidden elements from interfering */
    .template-content .cover-overlay[style*="display: none"],
    .template-content .cover-overlay.hidden {
        pointer-events: none !important;
        touch-action: none !important;
    }
}