/**
 * Photo Uploader Responsive CSS
 * Mobile-first responsive overrides with strict device isolation
 * Ensures mobile UI never shows on desktop and vice versa
 */

/* ==========================================================================
   MOBILE DEVICE STYLES (max-width: 768px)
   Mobile UI components - hidden on desktop
   ========================================================================== */

@media (max-width: 768px) {
    .photo-uploader-container {
        padding: var(--pu-spacing-md);
        margin: var(--pu-spacing-sm);
        border-radius: var(--pu-radius-md);
    }

    .photo-uploader-interface {
        gap: var(--pu-spacing-md);
        min-height: 300px;
    }

    .uploader-title {
        font-size: var(--pu-font-size-lg);
    }

    .uploader-description {
        font-size: var(--pu-font-size-sm);
    }

    /* Mobile upload area */
    .upload-area {
        padding: var(--pu-spacing-lg);
        min-height: 160px;
        border-width: 1px;
    }

    .upload-icon {
        font-size: 36px;
    }

    .upload-text {
        font-size: var(--pu-font-size-base);
    }

    .upload-actions {
        flex-direction: column;
        gap: var(--pu-spacing-sm);
    }

    .upload-button {
        width: 100%;
        justify-content: center;
        padding: var(--pu-spacing-lg);
        font-size: var(--pu-font-size-lg);
    }

    /* Mobile gallery - Always show buttons */
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--pu-spacing-sm);
    }

    .gallery-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--pu-spacing-sm);
    }

    .gallery-controls {
        justify-content: center;
    }

    .gallery-item {
        border-radius: var(--pu-radius-sm);
        min-height: 180px;
        /* Ensure minimum height for image + buttons */
    }

    /* Force buttons to always be visible on mobile */
    .gallery-item-buttons-section {
        display: flex !important;
        opacity: 1 !important;
        height: 44px;
        /* Slightly larger touch targets on mobile */
        background: var(--pu-white);
        border-top: 1px solid var(--pu-gray);
    }

    /* Hide desktop overlay on mobile */
    .gallery-item-overlay {
        display: none !important;
    }

    /* Mobile-optimized buttons */
    .gallery-action-btn {
        width: 40px;
        height: 40px;
        min-height: 44px;
        /* iOS touch target minimum */
        min-width: 44px;
        border-radius: var(--pu-radius-md);
        font-size: 16px;
        /* Prevent zoom on iOS */
    }

    .gallery-action-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Ensure image section takes remaining space */
    .gallery-item-image-section {
        min-height: 100px;
        max-height: 140px;
    }

    /* Disable hover effects on mobile */
    .gallery-item:hover {
        transform: none !important;
        box-shadow: var(--pu-shadow-sm) !important;
    }

    .gallery-item:hover img {
        transform: none !important;
    }

    .gallery-item:hover::before {
        opacity: 0 !important;
    }

    /* Mobile pricing */
    .tier-pricing-section {
        padding: var(--pu-spacing-md);
        margin: var(--pu-spacing-md) 0;
    }

    .tier-pricing-title {
        font-size: var(--pu-font-size-lg);
    }

    .tier-strip-container {
        flex-direction: column;
        gap: var(--pu-spacing-sm);
    }

    .tier-item {
        min-width: auto;
        width: 100%;
        padding: var(--pu-spacing-md);
    }

    .pricing-summary {
        padding: var(--pu-spacing-md);
    }

    .pricing-details {
        gap: var(--pu-spacing-sm);
    }

    .pricing-detail {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pu-spacing-xs);
        text-align: left;
    }

    .crop-body {
        flex-direction: column;
    }

    .crop-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--pu-gray);
        max-height: 200px;
    }

    .crop-workspace {
        padding: var(--pu-spacing-md);
    }

    .confirmation-dialog-content {
        width: 95vw;
        margin: var(--pu-spacing-sm);
    }

    /* Mobile buttons */
    .btn {
        padding: var(--pu-spacing-md) var(--pu-spacing-lg);
        min-height: 48px;
        font-size: var(--pu-font-size-base);
    }

    .submit-order-button {
        width: 100%;
        padding: var(--pu-spacing-lg);
        font-size: var(--pu-font-size-lg);
        min-height: 56px;
    }

    .add-more-button {
        width: 100%;
        justify-content: center;
        padding: var(--pu-spacing-md);
    }

    /* Mobile touch targets */
    .gallery-item,
    .tier-item,
    .btn,
    .upload-area {
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Hide desktop-only elements on mobile */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
}

/* ==========================================================================
   DESKTOP DEVICE STYLES (min-width: 769px)
   Desktop UI components - hidden on mobile
   ========================================================================== */

@media (min-width: 769px) {
    .photo-uploader-container {
        max-width: 1200px;
        padding: var(--pu-spacing-xl);
    }

    .photo-uploader-interface {
        gap: var(--pu-spacing-xl);
    }

    /* Desktop upload area */
    .upload-area {
        min-height: 240px;
        padding: var(--pu-spacing-xl);
    }

    .upload-icon {
        font-size: 64px;
    }

    .upload-text {
        font-size: var(--pu-font-size-xl);
    }

    /* Desktop gallery */
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--pu-spacing-lg);
    }

    .gallery-header {
        flex-direction: row;
        align-items: center;
    }

    /* Desktop pricing */
    .tier-pricing-section {
        padding: var(--pu-spacing-xl);
    }

    .tier-strip-container {
        flex-direction: row;
        overflow-x: auto;
    }

    .tier-item {
        min-width: 140px;
        flex: 0 0 auto;
    }



    .crop-body {
        flex-direction: row;
    }

    .crop-sidebar {
        width: 320px;
        border-left: 1px solid var(--pu-gray);
        border-top: none;
        max-height: none;
    }

    /* Desktop hover effects */
    .gallery-item:hover,
    .tier-item:hover,
    .upload-area:hover {
        /* Enhanced hover effects for desktop */
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Hide mobile-only elements on desktop */
    .mobile-only {
        display: none !important;
    }

    /* Show desktop-only elements */
    .desktop-only {
        display: block !important;
    }
}

/* ==========================================================================
   TABLET STYLES (769px - 1024px)
   Hybrid approach for tablet devices
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .photo-uploader-container {
        padding: var(--pu-spacing-lg);
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .crop-sidebar {
        width: 280px;
    }
}

/* ==========================================================================
   LARGE DESKTOP STYLES (min-width: 1200px)
   Enhanced layouts for large screens
   ========================================================================== */

@media (min-width: 1200px) {
    .photo-uploader-container {
        max-width: 1400px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--pu-spacing-xl);
    }

    .tier-strip-container {
        justify-content: center;
    }

    .tier-item {
        min-width: 160px;
    }
}

/* ==========================================================================
   DEVICE ISOLATION ENFORCEMENT
   Strict separation between mobile and desktop UI
   ========================================================================== */

/* Force hide mobile UI on desktop browsers */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {

    .mobile-touch-interface,
    .mobile-navigation,
    .mobile-specific-controls {
        display: none !important;
        visibility: hidden !important;
    }

    /* Desktop: Hide button section, show overlay on hover */
    .gallery-item-buttons-section {
        display: none;
    }

    .gallery-item-overlay {
        display: flex !important;
    }
}

/* Force mobile UI on touch devices and small screens */
@media (max-width: 768px),
(hover: none),
(pointer: coarse),
(max-device-width: 768px) {

    .desktop-hover-effects,
    .desktop-navigation,
    .desktop-specific-controls {
        display: none !important;
        visibility: hidden !important;
    }

    /* Mobile: Always show button section, hide overlay */
    .gallery-item-buttons-section {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .gallery-item-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Disable all hover effects on mobile */
    .gallery-item:hover,
    .tier-item:hover,
    .upload-area:hover,
    .btn:hover {
        transform: none !important;
        box-shadow: var(--pu-shadow-sm) !important;
    }

    /* Ensure buttons are always accessible */
    .gallery-action-btn {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .gallery-item-buttons-section {
        display: flex !important;
        -webkit-transform: translateZ(0);
        /* Force hardware acceleration */
        transform: translateZ(0);
    }

    .gallery-action-btn {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Android Chrome specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (max-width: 768px) {
    .gallery-item-buttons-section {
        display: flex !important;
        will-change: transform;
    }
}

/* High DPI mobile devices */
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px),
(min-resolution: 192dpi) and (max-width: 768px) {
    .gallery-action-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .gallery-action-btn svg {
        width: 22px;
        height: 22px;
    }
}

/* Container queries for modern browsers */
@container (max-width: 768px) {
    .photo-uploader-interface {
        container-type: inline-size;
        gap: var(--pu-spacing-md);
    }
}

@container (min-width: 769px) {
    .photo-uploader-interface {
        container-type: inline-size;
        gap: var(--pu-spacing-xl);
    }
}

/* ==========================================================================
   MOBILE GALLERY ENHANCEMENTS
   Additional mobile-specific improvements
   ========================================================================== */

/* Small mobile devices (iPhone SE, etc.) */
@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--pu-spacing-xs);
    }

    .gallery-item {
        min-height: 160px;
    }

    .gallery-item-image-section {
        min-height: 80px;
        max-height: 120px;
    }

    .gallery-item-buttons-section {
        height: 40px;
    }

    .gallery-action-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .gallery-action-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Landscape mobile devices */
@media (max-height: 500px) and (orientation: landscape) {
    .gallery-item {
        min-height: 140px;
    }

    .gallery-item-image-section {
        min-height: 80px;
        max-height: 100px;
    }
}

/* Tablet portrait mode */
@media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .gallery-item {
        min-height: 200px;
    }

    .gallery-item-image-section {
        min-height: 120px;
        max-height: 160px;
    }
}

/* Tablet landscape mode */
@media (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* Force mobile layout on touch devices regardless of screen size */
@media (hover: none) and (pointer: coarse) {
    .gallery-item-buttons-section {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .gallery-item-overlay {
        display: none !important;
    }

    /* Ensure touch targets are adequate */
    .gallery-action-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    .gallery-action-btn:focus {
        outline: 2px solid var(--pu-accent);
        outline-offset: 2px;
        z-index: 1;
    }

    .gallery-action-btn:focus-visible {
        outline: 2px solid var(--pu-accent);
        outline-offset: 2px;
    }

    /* Improve button contrast on mobile */
    .gallery-action-btn {
        background: var(--pu-white);
        border: 2px solid var(--pu-gray);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .gallery-action-btn:active {
        background: var(--pu-light-gray);
        transform: scale(0.95);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .gallery-item-buttons-section {
        border-top: 2px solid var(--pu-black);
        background: var(--pu-white);
    }

    .gallery-action-btn {
        border: 2px solid var(--pu-black);
        background: var(--pu-white);
        color: var(--pu-black);
    }

    .gallery-action-btn:hover,
    .gallery-action-btn:focus {
        background: var(--pu-black);
        color: var(--pu-white);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .gallery-item,
    .gallery-action-btn,
    .gallery-item img {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .gallery-item-buttons-section {
        background: #2d3748;
        border-top-color: #4a5568;
    }

    .gallery-action-btn {
        background: #4a5568;
        border-color: #718096;
        color: #e2e8f0;
    }

    .gallery-action-btn:hover {
        background: var(--pu-primary);
        border-color: var(--pu-primary);
    }
}