/* 
 * HEIDMARK IMKEREI - MOBILE & DEVICE ENHANCEMENTS
 * Advanced responsive optimizations for PayPal and checkout experience  
 * Version: 1.0 - September 2025
 * 
 * IMPORTANT: Only applies to actual mobile devices - desktop experience preserved
 */

/* ==========================================================================
   MOBILE DEVICE DETECTION & OPTIMIZATION
   ========================================================================== */

/* Mobile devices only - using multiple detection methods */
@media screen and (max-width: 768px) and (pointer: coarse), 
       screen and (hover: none) and (pointer: coarse),
       screen and (max-device-width: 768px) {
    
    /* Enhanced touch targets for mobile devices */
    .mobile-touch-target,
    #paypal-direct-modal .btn-primary,
    #paypal-direct-modal .btn-secondary,
    #paypal-direct-modal .btn-success {
        min-height: 48px;
        padding: 14px 20px;
        touch-action: manipulation;
    }
    
    /* Mobile-specific modal adjustments */
    #paypal-direct-modal .modal-content {
        padding: 20px;
        margin: 10px;
        width: calc(100% - 20px);
    }
    
    /* Mobile cart item styling */
    .cart-item {
        padding: 15px;
        margin-bottom: 15px;
    }
}

/* ==========================================================================
   IOS SPECIFIC OPTIMIZATIONS (Mobile Safari only)
   ========================================================================== */

/* iOS Safari specific fixes - only for mobile iOS devices */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 768px) {
        /* Prevent iOS zoom on form inputs - mobile only */
        input[type="email"], 
        input[type="text"], 
        input[type="tel"], 
        textarea {
            font-size: 16px;
        }
        
        /* iOS PayPal button enhancements - mobile only */
        #paypal-direct-modal .btn-primary {
            -webkit-appearance: none;
            appearance: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    }
}

/* ==========================================================================
   ANDROID SPECIFIC OPTIMIZATIONS (Mobile Chrome/WebView only)
   ========================================================================== */

/* Android mobile optimizations */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
    #paypal-direct-modal .btn-primary {
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ==========================================================================
   MOBILE DEVICE BREAKPOINTS
   ========================================================================== */

/* Small mobile phones */
@media screen and (max-width: 480px) {
    #paypal-direct-modal .modal-content {
        padding: 15px;
        margin: 5px;
        width: calc(100% - 10px);
    }
    
    #paypal-direct-modal .btn-primary,
    #paypal-direct-modal .btn-secondary,
    #paypal-direct-modal .btn-success {
        width: 100%;
        margin: 8px 0;
        font-size: 16px;
    }
}

/* Tablets in portrait mode */
@media screen and (min-width: 481px) and (max-width: 768px) {
    #paypal-direct-modal .modal-content {
        padding: 25px;
        margin: 15px;
        max-width: 600px;
    }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS (All devices)
   ========================================================================== */

/* Focus indicators for keyboard navigation */
#paypal-direct-modal .btn-primary:focus,
#paypal-direct-modal .btn-secondary:focus,
#paypal-direct-modal .btn-success:focus {
    outline: 3px solid #0070ba;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #paypal-direct-modal .btn-primary {
        border: 2px solid currentColor;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal-content,
    #paypal-direct-modal .btn-primary,
    #paypal-direct-modal .btn-secondary,
    #paypal-direct-modal .btn-success {
        animation: none;
        transition: none;
    }
}