/**
 * Global Pointer Events Fixes & Overlay Removal
 * Solves clickability issues across ALL sections
 * Version: 2.1.0 - Optimized & Secured
 * CSP-Safe: No inline styles, external resources validated
 */

/* === CSS CUSTOM PROPERTIES === */

:root {
    --z-modal: 10000;
    --z-controls: 9999;
    --z-buttons: 10000;
    --z-navigation: 1000;
    --z-content: 100;
    --z-cards: 1;
    --z-background: 0;
    --z-hidden: -1;
    --focus-outline: 2px solid #0066cc;
    --focus-offset: 2px;
}

/* === COMPLETE OVERLAY REMOVAL === */

.background-overlay,
.overlay,
.backdrop,
.hero-overlay,
.section-overlay,
.card-overlay,
[class*="-overlay"],
[class*="overlay-"],
[id*="overlay"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: var(--z-hidden) !important;
}

*::before[class*="overlay"],
*::after[class*="overlay"] {
    content: none !important;
    display: none !important;
}

/* === BACKGROUND ELEMENTS - NON-BLOCKING === */

.background,
.hero-background,
.categories-background,
.lens-background,
.section-background,
.particles,
.particles-js,
.particle-container,
.categories-particles,
.lens-particles,
[class*="-background"],
[class*="background-"],
[class*="particle"] {
    pointer-events: none !important;
    z-index: var(--z-background) !important;
    will-change: auto;
    contain: layout style;
}

/* === GLOBAL PSEUDO-ELEMENT FIXES === */

*::before,
*::after {
    pointer-events: none !important;
    will-change: auto !important;
}

/* === SECTION-SPECIFIC FIXES === */

/* Hero Section */
.hero-section {
    pointer-events: auto !important;
}

.hero-section::before,
.hero-section::after {
    pointer-events: none !important;
    z-index: var(--z-background) !important;
}

.hero-content,
.hero-buttons,
.hero-btn,
.hero-cta {
    pointer-events: auto !important;
    position: relative;
    z-index: var(--z-content) !important;
}

/* Camera Categories & Lens Sections */
.camera-categories-section,
.lens-section {
    pointer-events: auto !important;
    contain: layout style;
}

.categories-grid,
.lens-grid {
    pointer-events: auto !important;
}

.category-card,
.camera-category-card,
.lens-card {
    pointer-events: auto !important;
    position: relative !important;
    z-index: var(--z-cards) !important;
}

.category-card::before,
.category-card::after,
.lens-card::before,
.lens-card::after {
    pointer-events: none !important;
    z-index: var(--z-background) !important;
}

.category-card-content,
.category-card-content *,
.lens-card-content,
.lens-card-content * {
    pointer-events: none !important;
}

/* Slideshow Controls */
.camera-slideshow-controls,
.lens-slideshow-controls {
    pointer-events: auto !important;
    z-index: var(--z-controls) !important;
    contain: layout style;
}

.camera-control-btn,
.lens-control-btn {
    pointer-events: auto !important;
    z-index: var(--z-buttons) !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.camera-progress-bar,
.camera-progress-fill,
.lens-progress-bar,
.lens-progress-fill {
    pointer-events: none !important;
}

/* Quick Access Section */
.quick-access-section {
    pointer-events: auto !important;
    contain: layout style;
}

.quick-card {
    pointer-events: auto !important;
}

.card-features,
.feature-tag,
.card-cta {
    pointer-events: auto !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.feature-tag {
    position: relative !important;
    z-index: 5 !important;
}

.card-cta {
    position: relative !important;
    z-index: 10 !important;
}

.card-icon,
.card-title,
.card-description {
    pointer-events: none !important;
}

/* === ALWAYS CLICKABLE ELEMENTS === */

a,
button,
input,
select,
textarea,
[role="button"],
[onclick],
.clickable,
.btn,
.cta,
.button {
    pointer-events: auto !important;
    position: relative;
    z-index: 10 !important;
}

/* Navigation */
nav,
.navigation,
.menu,
.nav-menu,
.primary-menu,
header {
    pointer-events: auto !important;
    z-index: var(--z-navigation) !important;
}

/* === DECORATIVE ELEMENTS - NON-BLOCKING === */

.category-icon,
.lens-icon,
.category-count,
.badge,
.spec-item,
.category-specs,
.category-description,
.category-title,
.lens-features {
    pointer-events: none !important;
}

/* === GLASS EFFECTS & CONTAINERS === */

[class*="glass"],
[style*="backdrop-filter"],
[style*="-webkit-backdrop-filter"] {
    pointer-events: none !important;
}

.container,
.grid,
.flex,
[class*="-grid"],
[class*="-container"] {
    pointer-events: auto !important;
}

/* === HIDDEN ELEMENTS === */

[hidden],
[aria-hidden="true"],
.hidden,
.d-none,
.invisible,
[style*="display: none"],
[style*="visibility: hidden"] {
    pointer-events: none !important;
    z-index: var(--z-hidden) !important;
}

/* === FOCUS MANAGEMENT === */

*:focus,
*:focus-within {
    pointer-events: auto !important;
}

/* Unified focus styles */
.hero-btn:focus-visible,
.hero-cta:focus-visible,
.category-card:focus-visible,
.lens-card:focus-visible,
.quick-card:focus-visible,
.card-cta:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.hero-btn:focus-visible,
.hero-cta:focus-visible {
    z-index: calc(var(--z-content) + 1) !important;
}

.category-card:focus-visible,
.lens-card:focus-visible {
    z-index: calc(var(--z-cards) + 1) !important;
}

/* === MODAL & POPUP EXCEPTIONS === */

.modal,
.popup,
.dialog,
[role="dialog"],
[aria-modal="true"] {
    pointer-events: auto !important;
    z-index: var(--z-modal) !important;
}

.modal-overlay,
.modal-backdrop {
    pointer-events: auto !important;
    z-index: calc(var(--z-modal) - 1) !important;
}

/* === ACCESSIBILITY === */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

@media (prefers-contrast: high) {
    *:focus-visible {
        outline-width: 3px !important;
    }
}

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

@media print {
    .camera-slideshow-controls,
    .lens-slideshow-controls,
    .camera-progress-bar,
    .lens-progress-bar {
        display: none !important;
    }
    
    *::before,
    *::after {
        box-shadow: none !important;
    }
}

/* === SECURITY - PREVENT STYLE INJECTION === */

[style*="pointer-events"][class*="card"],
[style*="pointer-events"][class*="btn"],
[style*="pointer-events"][class*="control"],
[style*="z-index"][class*="overlay"],
[style*="display"][class*="overlay"] {
    animation: none !important;
}

/* Block common injection patterns */
[style*="javascript:"],
[style*="expression("],
[style*="@import"],
[onclick*="<"],
[onload*="<"] {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}