/**
 * VPD Mobile Enhancements
 * Améliorations complètes pour la version mobile
 * 
 * @package VPD
 * @version 2.2.0
 */

/* ========================================
   MOBILE GLOBAL IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Amélioration générale */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* Header mobile amélioré */
    .vpd-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    
    .vpd-header-inner {
        padding: 0 12px !important;
        height: 60px !important;
        gap: 8px !important;
    }
    
    .vpd-logo-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.2rem !important;
    }
    
    .vpd-header-actions {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .vpd-theme-toggle,
    .vpd-lang-btn,
    .vpd-currency-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px 10px !important;
    }
    
    .vpd-cart-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Hero section mobile */
    .vpd-hero {
        padding: 40px 16px 30px !important;
    }
    
    .vpd-hero-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    
    .vpd-hero-subtitle {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }
    
    .vpd-quick-stats {
        flex-wrap: wrap !important;
        gap: 16px !important;
        margin-top: 24px !important;
        padding: 16px !important;
    }
    
    .vpd-stat {
        flex: 1 1 calc(33.333% - 12px) !important;
        min-width: 0 !important;
    }
    
    .vpd-stat-value {
        font-size: 24px !important;
        line-height: 1 !important;
    }
    
    .vpd-stat-label {
        font-size: 11px !important;
        margin-top: 4px !important;
    }
    
    /* Filtres et recherche mobile */
    .vpd-filters-bar {
        flex-direction: column !important;
        padding: 16px !important;
        gap: 12px !important;
        border-radius: 12px !important;
    }
    
    .vpd-search-wrapper {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    .vpd-search-input {
        padding: 14px 16px 14px 44px !important;
        font-size: 16px !important; /* Évite le zoom sur iOS */
        min-height: 48px !important;
    }
    
    .vpd-filters-group {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .vpd-filter-select-wrapper {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: 0 !important;
    }
    
    .vpd-filter-select {
        width: 100% !important;
        padding: 12px 40px 12px 14px !important;
        font-size: 15px !important;
        min-height: 48px !important;
    }
    
    .vpd-view-toggle {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .vpd-view-btn {
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    /* Grille de produits mobile */
    .vpd-products-grid {
        gap: 16px !important;
        padding: 0 8px !important;
    }
    
    .vpd-product-card {
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    
    .vpd-card-image-wrapper {
        aspect-ratio: 16/10 !important;
    }
    
    .vpd-card-content {
        padding: 16px !important;
    }
    
    .vpd-card-title {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    .vpd-card-description {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    .vpd-card-meta {
        gap: 8px !important;
        margin-bottom: 12px !important;
        padding-top: 12px !important;
    }
    
    .vpd-meta-item {
        font-size: 11px !important;
    }
    
    .vpd-card-footer {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    
    .vpd-card-price {
        font-size: 20px !important;
        justify-content: center !important;
    }
    
    .vpd-add-to-cart-btn,
    .vpd-free-download-btn {
        width: 100% !important;
        min-height: 50px !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        justify-content: center !important;
    }
    
    .vpd-add-to-cart-btn svg,
    .vpd-free-download-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Quick actions toujours visibles sur mobile */
    .vpd-card-quick-actions {
        opacity: 1 !important;
        transform: translateY(0) !important;
        top: 8px !important;
        right: 8px !important;
        gap: 6px !important;
    }
    
    .vpd-quick-favorite,
    .vpd-quick-view {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* Download list mobile */
    .vpd-download-list {
        margin-top: 12px !important;
    }
    
    .vpd-download-list-title {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }
    
    .vpd-download-list-items {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .vpd-download-pill {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-height: 32px !important;
    }
    
    /* Bouton checkout flottant mobile */
    .vpd-checkout-float {
        padding: 12px 16px !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
    }
    
    .vpd-checkout-float-content {
        gap: 12px !important;
        align-items: center !important;
    }
    
    .vpd-checkout-float-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .vpd-checkout-float-count {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    
    .vpd-checkout-float-total {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    
    .vpd-checkout-float-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
        min-height: 48px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .vpd-checkout-float-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Payment banner mobile */
    .vpd-payment-banner {
        padding: 10px 0 !important;
        position: sticky !important;
        top: 60px !important;
        z-index: 999 !important;
    }
    
    .vpd-payment-banner-content {
        padding: 0 16px !important;
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }
    
    .vpd-payment-banner-text {
        font-size: 13px !important;
        justify-content: center !important;
    }
    
    .vpd-payment-methods {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .vpd-payment-method {
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }
    
    /* Main content mobile */
    .vpd-main {
        padding: 0 8px !important;
    }
    
    .vpd-store {
        padding: 20px 8px 100px !important; /* Padding bottom pour le bouton checkout */
    }
    
    /* Toast notifications mobile */
    .vpd-toast {
        left: 16px !important;
        right: 16px !important;
        bottom: 90px !important; /* Au-dessus du bouton checkout */
        max-width: calc(100% - 32px) !important;
        padding: 14px 18px !important;
        font-size: 14px !important;
    }
    
    /* Pagination mobile */
    .vpd-pagination {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        padding: 20px 0 !important;
    }
    
    .vpd-pagination a,
    .vpd-pagination span {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   VERY SMALL MOBILE (< 480px)
   ======================================== */

@media (max-width: 480px) {
    .vpd-hero {
        padding: 32px 12px 24px !important;
    }
    
    .vpd-hero-title {
        font-size: 24px !important;
    }
    
    .vpd-hero-subtitle {
        font-size: 14px !important;
    }
    
    .vpd-quick-stats {
        padding: 12px !important;
        gap: 12px !important;
    }
    
    .vpd-stat {
        flex: 1 1 calc(50% - 6px) !important;
    }
    
    .vpd-stat-value {
        font-size: 20px !important;
    }
    
    .vpd-stat-label {
        font-size: 10px !important;
    }
    
    .vpd-filters-bar {
        padding: 12px !important;
    }
    
    .vpd-filter-select-wrapper {
        flex: 1 1 100% !important;
    }
    
    .vpd-products-grid {
        gap: 12px !important;
        padding: 0 4px !important;
    }
    
    .vpd-card-content {
        padding: 14px !important;
    }
    
    .vpd-card-title {
        font-size: 15px !important;
    }
    
    .vpd-checkout-float {
        padding: 10px 12px !important;
    }
    
    .vpd-checkout-float-total {
        font-size: 16px !important;
    }
    
    .vpd-checkout-float-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    .vpd-checkout-btn-text {
        display: none !important; /* Masquer le texte sur très petits écrans */
    }
    
    .vpd-checkout-float-btn svg {
        margin: 0 !important;
    }
}

/* ========================================
   TOUCH DEVICES OPTIMIZATION
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Augmenter les zones de touch */
    .vpd-add-to-cart-btn,
    .vpd-free-download-btn,
    .vpd-checkout-float-btn,
    .vpd-back-btn {
        min-height: 48px !important;
        min-width: 48px !important;
    }
    
    /* Toujours afficher les actions rapides sur touch */
    .vpd-card-quick-actions {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* Désactiver les hover effects sur touch */
    .vpd-product-card:hover {
        transform: none !important;
    }
    
    .vpd-product-card:active {
        transform: scale(0.98) !important;
    }
    
    /* Améliorer les dropdowns pour touch */
    .vpd-lang-dropdown,
    .vpd-currency-dropdown {
        max-height: 60vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .vpd-lang-option,
    .vpd-currency-option {
        min-height: 48px !important;
        padding: 14px 18px !important;
    }
}

/* ========================================
   SAFE AREA INSETS (iPhone X+)
   ======================================== */

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .vpd-header {
            padding-left: max(12px, env(safe-area-inset-left)) !important;
            padding-right: max(12px, env(safe-area-inset-right)) !important;
        }
        
        .vpd-checkout-float {
            padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
            padding-left: max(16px, env(safe-area-inset-left)) !important;
            padding-right: max(16px, env(safe-area-inset-right)) !important;
        }
        
        .vpd-store {
            padding-left: max(8px, env(safe-area-inset-left)) !important;
            padding-right: max(8px, env(safe-area-inset-right)) !important;
        }
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Réduire les animations sur mobile pour meilleure performance */
    .vpd-product-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    .vpd-product-card:hover {
        transform: none !important;
    }
    
    .vpd-product-card:active {
        transform: scale(0.98) !important;
    }
    
    /* Optimiser les images */
    .vpd-card-image {
        will-change: transform;
    }
    
    /* Réduire les backdrop-filters sur mobile (performance) */
    .vpd-checkout-float,
    .vpd-header {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .vpd-hero {
        padding: 24px 16px 20px !important;
    }
    
    .vpd-hero-title {
        font-size: 22px !important;
    }
    
    .vpd-quick-stats {
        margin-top: 16px !important;
        padding: 12px !important;
    }
    
    .vpd-stat-value {
        font-size: 20px !important;
    }
    
    .vpd-checkout-float {
        padding: 10px 16px !important;
    }
}