/* ============================================================================
 * MOBILE CAROUSEL NAVIGATION FIX
 * Comprehensive fix for carousel navigation buttons on mobile devices
 * Specifically addresses Poco X3 NFC and similar high-DPI mobile devices
 * ============================================================================ */

/* ========== MOBILE NAVIGATION BUTTON VISIBILITY FIX ========== */

/* Force carousel navigation container to be visible on all mobile devices */
@media (max-width: 768px) {
    /* Ensure carousel container has proper overflow settings for navigation */
    .projects-container {
        overflow: visible !important;
        position: relative !important;
        padding: 0 60px !important; /* Increased padding to accommodate larger buttons */
        margin: 0 auto !important;
    }
    
    /* Navigation container - ensure full visibility */
    .carousel-nav {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 0 !important;
        z-index: 1000 !important;
        pointer-events: none !important;
        transform: translateY(-50%) !important;
        overflow: visible !important;
    }
    
    /* Base navigation button styles for tablets */
    .carousel-prev,
    .carousel-next,
    .carousel-button.carousel-prev,
    .carousel-button.carousel-next {
        position: absolute !important;
        top: 0 !important;
        transform: translateY(-50%) !important;
        width: 45px !important;
        height: 45px !important;
        border: 3px solid #00f3ff !important; /* Thicker border for better visibility */
        background: rgba(26, 26, 46, 0.95) !important;
        color: #00f3ff !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        font-size: 1.1rem !important;
        transition: all 0.3s ease !important;
        pointer-events: auto !important;
        z-index: 1001 !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* Left button positioning for tablets */
    .carousel-prev,
    .carousel-button.carousel-prev {
        left: 15px !important;
        right: auto !important;
    }
    
    /* Right button positioning for tablets */
    .carousel-next,
    .carousel-button.carousel-next {
        right: 15px !important;
        left: auto !important;
    }
    
    /* Enhanced hover states for tablets */
    .carousel-prev:hover,
    .carousel-next:hover,
    .carousel-button.carousel-prev:hover,
    .carousel-button.carousel-next:hover {
        background: #00f3ff !important;
        color: #1a1a2e !important;
        transform: translateY(-50%) scale(1.1) !important;
        box-shadow: 0 4px 20px rgba(0, 243, 255, 0.4) !important;
    }
}

/* ========== MOBILE PHONE NAVIGATION (480px and below) ========== */
@media (max-width: 480px) {
    /* Enhanced container padding for mobile phones */
    .projects-container {
        padding: 0 70px !important; /* Even more padding for mobile */
        overflow: visible !important;
    }
    
    /* Larger, more visible navigation buttons for mobile phones */
    .carousel-prev,
    .carousel-next,
    .carousel-button.carousel-prev,
    .carousel-button.carousel-next {
        width: 50px !important;
        height: 50px !important;
        border: 4px solid #00f3ff !important; /* Even thicker border */
        font-size: 1.3rem !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(15px) !important;
    }
    
    /* Mobile left button - moved further from edge */
    .carousel-prev,
    .carousel-button.carousel-prev {
        left: 10px !important;
        right: auto !important;
    }
    
    /* Mobile right button - CRITICAL FIX for visibility */
    .carousel-next,
    .carousel-button.carousel-next {
        right: 10px !important;
        left: auto !important;
        /* Force visibility with high specificity */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1002 !important;
    }
}

/* ========== EXTRA SMALL DEVICES (360px and below) ========== */
@media (max-width: 360px) {
    /* Ultra-compact devices like Poco X3 NFC in portrait */
    .projects-container {
        padding: 0 75px !important; /* Maximum padding for smallest screens */
    }
    
    /* Slightly smaller but still visible buttons */
    .carousel-prev,
    .carousel-next,
    .carousel-button.carousel-prev,
    .carousel-button.carousel-next {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
    }
    
    /* Ultra-safe positioning for extra small screens */
    .carousel-prev,
    .carousel-button.carousel-prev {
        left: 8px !important;
    }
    
    .carousel-next,
    .carousel-button.carousel-next {
        right: 8px !important;
        /* ULTRA-HIGH SPECIFICITY for problematic devices */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1003 !important;
        pointer-events: auto !important;
    }
}

/* ========== HIGH DPI DEVICE FIXES (Poco X3 NFC Specific) ========== */
@media (max-width: 393px) and (max-height: 851px) and (-webkit-device-pixel-ratio: 2.75) {
    /* Specific fix for Poco X3 NFC dimensions */
    .projects-container {
        padding: 0 80px !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Enhanced navigation for high DPI devices */
    .carousel-prev,
    .carousel-next,
    .carousel-button.carousel-prev,
    .carousel-button.carousel-next {
        width: 52px !important;
        height: 52px !important;
        border: 4px solid #00f3ff !important;
        font-size: 1.4rem !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(20px) !important;
    }
    
    /* Poco X3 NFC left button */
    .carousel-prev,
    .carousel-button.carousel-prev {
        left: 5px !important;
    }
    
    /* Poco X3 NFC right button - CRITICAL */
    .carousel-next,
    .carousel-button.carousel-next {
        right: 5px !important;
        /* MAXIMUM VISIBILITY ENFORCEMENT */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1004 !important;
        pointer-events: auto !important;
        transform: translateY(-50%) !important;
        position: absolute !important;
    }
}

/* ========== LANDSCAPE ORIENTATION FIXES ========== */
@media (max-width: 851px) and (max-height: 393px) and (orientation: landscape) {
    /* Landscape mode adjustments */
    .projects-container {
        padding: 0 60px !important;
    }
    
    .carousel-prev,
    .carousel-next,
    .carousel-button.carousel-prev,
    .carousel-button.carousel-next {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }
    
    .carousel-prev,
    .carousel-button.carousel-prev {
        left: 8px !important;
    }
    
    .carousel-next,
    .carousel-button.carousel-next {
        right: 8px !important;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1005 !important;
    }
}

/* ========== TOUCH INTERACTION IMPROVEMENTS ========== */
@media (max-width: 768px) {
    /* Enhanced touch targets */
    .carousel-prev,
    .carousel-next,
    .carousel-button.carousel-prev,
    .carousel-button.carousel-next {
        /* Minimum touch target size of 44px */
        min-width: 44px !important;
        min-height: 44px !important;
        /* Add touch-friendly padding */
        padding: 8px !important;
        /* Prevent text selection on touch */
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        /* Improve touch responsiveness */
        -webkit-tap-highlight-color: rgba(0, 243, 255, 0.3) !important;
        /* Prevent double-tap zoom */
        touch-action: manipulation !important;
    }
    
    /* Active state for touch feedback */
    .carousel-prev:active,
    .carousel-next:active,
    .carousel-button.carousel-prev:active,
    .carousel-button.carousel-next:active {
        transform: translateY(-50%) scale(0.95) !important;
        background: rgba(0, 243, 255, 0.8) !important;
        color: #1a1a2e !important;
    }
}

/* ========== FALLBACK OVERRIDES ========== */
/* Ultimate fallback for any missed selectors */
.projects-container .carousel-next,
.projects-container .carousel-button.carousel-next,
.projects-carousel .carousel-next,
.projects-carousel .carousel-button.carousel-next,
#projects .carousel-next,
#projects .carousel-button.carousel-next {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1006 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 10px !important;
    left: auto !important;
}

/* Force specific Poco X3 NFC fixes if other rules fail */
@media (max-width: 400px) {
    .carousel-next,
    .carousel-button.carousel-next,
    .projects-container .carousel-next,
    .projects-container .carousel-button.carousel-next {
        right: 5px !important;
        width: 50px !important;
        height: 50px !important;
        background: rgba(26, 26, 46, 0.95) !important;
        border: 4px solid #00f3ff !important;
        border-radius: 50% !important;
        color: #00f3ff !important;
        font-size: 1.3rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1007 !important;
        pointer-events: auto !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(15px) !important;
    }
}

/* ========== DEBUG HELPERS (Remove in production) ========== */
/* Uncomment for debugging navigation button positions */
/*
@media (max-width: 768px) {
    .carousel-next,
    .carousel-button.carousel-next {
        background: rgba(255, 0, 0, 0.8) !important;
        border-color: #ff0000 !important;
        color: #ffffff !important;
    }
    
    .carousel-prev,
    .carousel-button.carousel-prev {
        background: rgba(0, 255, 0, 0.8) !important;
        border-color: #00ff00 !important;
        color: #ffffff !important;
    }
}
*/