/**
 * Explainer Tool Help Button - Mobile Hide
 * Hides ONLY the Product Help Explainer button on mobile devices
 * Preserves the "View AI enhanced video" button
 */

/* ============================================
   HIDE EXPLAINER BUTTON ON MOBILE
   ============================================ */

/* Mobile screens (up to 768px) */
@media (max-width: 768px) {
    /* Hide ONLY the PHE start tour button specifically */
    #phe-start-tour {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Ensure the video toggle button stays visible */
    #video-toggle-btn {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Keep the video-toggle-controls container visible */
    .video-toggle-controls {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide other PHE-related elements */
    .phe-help-button-container,
    .phe-help-button:not(#video-toggle-btn),
    .product-help-explainer-button:not(#video-toggle-btn),
    #phe-help-button {
        display: none !important;
    }
    
    /* Hide the entire PHE modal/popup if it exists */
    .phe-modal,
    .phe-overlay,
    .phe-popup,
    .product-help-explainer-modal,
    #phe-modal {
        display: none !important;
    }
}

/* Small tablets (768px to 1024px) - Optional: hide on tablets too */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Uncomment the following if you want to hide on tablets as well */
    /*
    .phe-help-button-container,
    .phe-help-button,
    .product-help-explainer-button {
        display: none !important;
    }
    */
}

/* ============================================
   ADDITIONAL MOBILE OPTIMIZATIONS
   ============================================ */

/* For any edge cases where the button might still appear */
@media screen and (max-width: 768px) {
    /* Hide ONLY the phe-start-tour button */
    #phe-start-tour {
        display: none !important;
    }
    
    /* IMPORTANT: Ensure video toggle button remains visible */
    #video-toggle-btn,
    .video-toggle-button,
    button[onclick*="toggleVideoView"] {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        pointer-events: auto !important;
    }
}

/* Touch device specific hiding */
@media (hover: none) and (pointer: coarse) {
    #phe-start-tour {
        display: none !important;
    }
    
    /* Keep video button visible */
    #video-toggle-btn {
        display: inline-block !important;
    }
}

/* Portrait orientation on mobile */
@media (max-width: 768px) and (orientation: portrait) {
    #phe-start-tour {
        display: none !important;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    #phe-start-tour {
        display: none !important;
    }
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* iPhone SE, iPhone 6/7/8 */
@media (max-width: 375px) {
    #phe-start-tour {
        display: none !important;
    }
}

/* iPhone 6/7/8 Plus */
@media (max-width: 414px) {
    #phe-start-tour {
        display: none !important;
    }
}

/* iPhone X, XS, 11 Pro */
@media (max-width: 375px) and (max-height: 812px) {
    #phe-start-tour {
        display: none !important;
    }
}

/* iPhone XR, 11 */
@media (max-width: 414px) and (max-height: 896px) {
    #phe-start-tour {
        display: none !important;
    }
}

/* iPhone 12/13/14 */
@media (max-width: 390px) {
    #phe-start-tour {
        display: none !important;
    }
}

/* iPhone 12/13/14 Pro Max */
@media (max-width: 428px) {
    #phe-start-tour {
        display: none !important;
    }
}

/* Samsung Galaxy S series */
@media (max-width: 360px) {
    #phe-start-tour {
        display: none !important;
    }
}

/* iPad Mini */
@media (max-width: 768px) {
    #phe-start-tour {
        display: none !important;
    }
}

/* ============================================
   ENSURE CONTENT REFLOWS PROPERLY
   ============================================ */

@media (max-width: 768px) {
    /* Adjust spacing when button is hidden */
    .product-main-content,
    .single-product-content,
    .product-summary {
        /* Remove any padding that was added for the button */
        padding-right: 15px !important;
    }
    
    /* Ensure other buttons remain visible and properly spaced */
    .product-buttons:not(.phe-help-button-container),
    .button-group:not(.phe-help-button-container) {
        display: flex !important;
        gap: 10px;
    }
}

/* ============================================
   FALLBACK FOR INLINE STYLES
   ============================================ */

/* Override any inline styles that might be added by JavaScript */
@media (max-width: 768px) {
    #phe-start-tour[style] {
        display: none !important;
    }
    
    /* Ensure video button stays visible even with inline styles */
    #video-toggle-btn[style] {
        display: inline-block !important;
        visibility: visible !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    #phe-start-tour {
        display: none !important;
    }
}