/* Mobile-responsive Razorpay checkout fixes */
/* Prevents modal cutoff and scrolling issues on mobile devices */

/* Razorpay modal mobile optimizations */
.razorpay-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
}

/* Mobile-specific modal sizing */
@media (max-width: 768px) {
    .razorpay-container .razorpay-checkout-frame {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Prevent body scroll during payment */
    body.razorpay-checkout-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Fix for iOS Safari viewport issues */
    .razorpay-container .razorpay-checkout-frame {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Prevent zoom on input focus (iOS Safari) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-size: 16px !important;
}

/* Mobile checkout form optimizations */
@media (max-width: 768px) {
    .checkout-button {
        min-height: 48px !important;
        font-size: 18px !important;
    }
    
    /* Ensure touch targets are at least 44px */
    button, .button, input[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* Fix for in-app browsers */
@media (max-width: 768px) {
    .razorpay-container {
        z-index: 2147483647 !important;
    }
}