/**
 * Mobile Touch Zone Interface Fixes
 * 
 * This stylesheet addresses critical mobile UX issues:
 * 1. Overlapping touch zones between score button and next image tap zone
 * 2. Z-index layering conflicts
 * 3. Touch target sizing below minimum standards
 * 4. Insufficient spacing between interactive elements
 */

/* ===========================
   Z-INDEX HIERARCHY FIX
   =========================== */
/* 
 * Proper z-index hierarchy (lowest to highest):
 * - Image container: 1
 * - Tap zones: 10 
 * - Image actions (score/AI buttons): 30
 * - Navigation hints: 40
 * - Modals: 100+
 */

/* Lower tap zone z-index to prevent overlap with action buttons */
.hunt-feed .tap-zone {
    z-index: 10 !important; /* Down from 50 */
}

/* Ensure action buttons are above tap zones */
.hunt-feed .image-actions {
    z-index: 30 !important; /* Up from 20 */
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Ensure tap hints don't interfere */
.hunt-feed .tap-hint {
    z-index: 15 !important; /* Above tap zones but below buttons */
}

/* ===========================
   TOUCH TARGET SIZING
   =========================== */
/* Ensure all touch targets meet minimum 44x44px (iOS) standard */

.hunt-feed .action-btn {
    min-width: 48px !important; /* Increased from 56px to ensure circular shape */
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
}

/* Adjust button content to fit properly */
.hunt-feed .action-btn svg {
    width: 24px !important; /* Reduced to fit better */
    height: 24px !important;
}

.hunt-feed .action-btn span {
    display: none !important; /* Hide text labels on mobile to save space */
}

/* ===========================
   LAYOUT & SPACING FIXES
   =========================== */
/* Prevent overlap by adjusting tap zone boundaries */

@media (max-width: 768px) {
    /* Adjust tap zones to not overlap with action buttons */
    .hunt-feed .tap-zone {
        top: 80px !important;
        bottom: 140px !important;
    }
    
    /* CRITICAL FIX: Limit tap zone width to prevent button overlap */
    .hunt-feed .tap-zone-right {
        width: calc(100% - 140px) !important; /* Leave space for buttons */
        right: 0 !important;
        max-width: none !important; /* Remove max-width limit */
        /* Add explicit right boundary to prevent overlap */
        clip-path: polygon(0 0, calc(100% - 140px) 0, calc(100% - 140px) 100%, 0 100%);
    }
    
    .hunt-feed .tap-zone-left {
        width: 25% !important;
        left: 0 !important;
        max-width: 100px !important;
    }
    
    /* Create safe zone for action buttons */
    .hunt-feed .image-actions {
        right: 12px !important;
        /* Add invisible touch target extension */
        padding: 8px;
        margin: -8px;
        /* Ensure buttons stay in fixed position */
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    /* Ensure adequate spacing between buttons */
    .hunt-feed .image-actions {
        gap: 16px !important; /* Increased from 12px */
    }
    
    /* Create invisible barrier between tap zone and buttons */
    .hunt-feed .tap-zone-right::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 140px; /* Match button area width */
        background: transparent;
        pointer-events: none; /* Block tap zone clicks in button area */
    }
}

/* ===========================
   VISUAL BOUNDARIES
   =========================== */
/* Add subtle visual indicators for tap zones during development/testing */

/* Debug mode - uncomment to see tap zone boundaries */
/*
.hunt-feed .tap-zone {
    background: rgba(255, 0, 0, 0.1);
    border: 1px dashed rgba(255, 0, 0, 0.3);
}
*/

/* ===========================
   TOUCH FEEDBACK IMPROVEMENTS
   =========================== */
/* Enhanced touch feedback for better user experience */

.hunt-feed .action-btn:active {
    transform: scale(0.92) !important; /* Slightly less aggressive */
    transition: transform 0.1s ease-out !important;
}

.hunt-feed .tap-zone:active {
    background: rgba(255, 255, 255, 0.08) !important; /* More visible feedback */
}

/* ===========================
   SMALL SCREEN OPTIMIZATIONS
   =========================== */
/* Special handling for very small screens (iPhone SE, etc.) */

@media (max-width: 375px) {
    .hunt-feed .action-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
    }
    
    .hunt-feed .action-btn svg {
        width: 22px !important;
        height: 22px !important;
    }
    
    .hunt-feed .tap-zone {
        width: 20% !important; /* Even narrower on small screens */
    }
    
    .hunt-feed .image-actions {
        gap: 12px !important;
        right: 4px !important;
    }
}

/* ===========================
   GESTURE CONFLICT PREVENTION
   =========================== */
/* Prevent accidental triggers and gesture conflicts */

/* Disable pointer events on decorative elements */
.hunt-feed .tap-hint {
    pointer-events: none !important;
}

/* Ensure tap zones don't interfere with scrolling */
.hunt-feed .tap-zone {
    touch-action: manipulation; /* Prevents double-tap zoom */
}

/* ===========================
   ACCESSIBILITY ENHANCEMENTS
   =========================== */
/* Improve touch target accessibility */

/* Add focus indicators for keyboard navigation */
.hunt-feed .action-btn:focus,
.hunt-feed .tap-zone:focus {
    outline: 3px solid var(--thingvalla-primary) !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hunt-feed .action-btn {
        border-width: 2px !important;
        border-color: white !important;
    }
}

/* ===========================
   MOBILE-SPECIFIC BUTTON POSITIONING
   =========================== */
/* Ensure buttons stay accessible on all mobile devices */

@media (max-width: 768px) {
    /* Move action buttons to a fixed position that doesn't conflict with tap zones */
    .hunt-feed .image-container {
        position: relative !important;
    }
    
    .hunt-feed .image-actions {
        /* Create a safe zone for buttons */
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        /* Ensure buttons are always accessible */
        min-width: 120px !important;
        background: transparent !important;
        padding: 8px !important;
        border-radius: 8px !important;
    }
    
    /* Alternative: Move buttons to bottom on very small screens */
    @media (max-width: 375px) {
        .hunt-feed .image-actions {
            position: fixed !important;
            bottom: 100px !important;
            right: 50% !important;
            top: auto !important;
            transform: translateX(50%) !important;
            flex-direction: row !important;
            background: rgba(0, 0, 0, 0.8) !important;
            padding: 12px 20px !important;
            border-radius: 30px !important;
            backdrop-filter: blur(10px) !important;
        }
    }
}

/* ===========================
   ALTERNATIVE SOLUTION: GESTURE ZONES
   =========================== */
/* Better mobile UX with distinct interaction zones */

@media (max-width: 768px) {
    /* Create explicit interaction zones */
    .hunt-feed .interaction-zones {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
    }
    
    /* Navigation zone (left/right edges) */
    .hunt-feed .nav-zone {
        position: absolute;
        top: 20%;
        bottom: 20%;
        width: 80px; /* Wider for easier tap */
        pointer-events: auto;
    }
    
    .hunt-feed .nav-zone-left {
        left: 0;
        /* Visual indicator on tap */
        background: linear-gradient(to right, rgba(255,255,255,0.05), transparent);
        opacity: 0;
        transition: opacity 0.2s;
    }
    
    .hunt-feed .nav-zone-right {
        right: 140px; /* Stay clear of action buttons */
        background: linear-gradient(to left, rgba(255,255,255,0.05), transparent);
        opacity: 0;
        transition: opacity 0.2s;
    }
    
    .hunt-feed .nav-zone:active {
        opacity: 1;
    }
}

/* ===========================
   PERFORMANCE OPTIMIZATIONS
   =========================== */
/* Reduce repaints and improve touch responsiveness */

.hunt-feed .action-btn,
.hunt-feed .tap-zone {
    will-change: transform;
    -webkit-transform: translateZ(0); /* Force GPU acceleration */
    transform: translateZ(0);
}

/* ===========================
   TESTING HELPERS
   =========================== */
/* Classes for automated testing */

.hunt-feed[data-test-mode="true"] .tap-zone {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.5);
}

.hunt-feed[data-test-mode="true"] .action-btn {
    border: 2px solid rgba(255, 0, 0, 0.5);
}