/* 3. MOBILE KEYBOARD ISSUE FIX */
/* Ensure modal doesn't get pushed off screen or hidden by keyboard */
@media (max-width: 768px) {
    #payment-window {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
    }
    
    #payment-input-area {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    .modal-cart-item > div {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* Fix for mobile viewports */
    .h-screen {
        height: 100dvh !important;
    }
    
    /* Adjust product grid for mobile */
    #product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        padding-bottom: 6rem !important;
    }
    
    /* Cart section on mobile */
    .cart-section-mobile {
        height: 40vh !important;
        max-height: 40vh !important;
        border-top-left-radius: 1.5rem !important;
        border-top-right-radius: 1.5rem !important;
    }
    
    /* Admin sidebar on mobile */
    #admin-sidebar {
        position: fixed !important;
        z-index: 60 !important;
        height: 100dvh !important;
    }
    
    /* Modal adjustments for mobile */
    .modal > div {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0.5rem !important;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    #product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .cart-section-tablet {
        width: 320px !important;
    }
}

/* Large screen adjustments */
@media (min-width: 1025px) {
    #product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    .h-screen {
        height: -webkit-fill-available !important;
    }
    
    #payment-window {
        height: -webkit-fill-available !important;
    }
}

/* Safe area insets for notched devices */
.safe-top {
    padding-top: env(safe-area-inset-top);
}
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}
.safe-left {
    padding-left: env(safe-area-inset-left);
}
.safe-right {
    padding-right: env(safe-area-inset-right);
}

/* Prevent zoom on input focus on mobile */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Touch target sizing for mobile */
@media (max-width: 768px) {
    button, 
    .nav-btn,
    .pay-method-btn,
    .admin-nav-item {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    input[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
    }
}