/* Checkout Mobile CSS - ONLY applies when .checkout-wrapper exists on page */

@media (max-width: 767px) {
    /* Target ONLY checkout page elements */
    body.page-checkout .checkout-wrapper .form-control,
    body.page-checkout .checkout-wrapper input:not([type="search"]):not([type="checkbox"]):not([type="radio"]),
    body.page-checkout .checkout-wrapper select,
    body.page-checkout .checkout-wrapper textarea,
    body.page-checkout .payment-checkout-form input:not([type="search"]):not([type="checkbox"]):not([type="radio"]),
    body.page-checkout .payment-checkout-form select,
    body.page-checkout .payment-checkout-form textarea {
        width: 100%;
        height: 48px;
        display: block;
        box-sizing: border-box;
        position: static !important;
        transform: none !important;
        touch-action: manipulation !important;
        padding: 12px 15px;
        font-size: 16px;
        font-family: inherit;
        color: #333;
        background-color: #fff;
        border: 1px solid #e0e2e3;
        border-radius: 4px;
        outline: none;
    }
    
    body.page-checkout .checkout-wrapper textarea,
    body.page-checkout .payment-checkout-form textarea {
        height: auto;
        min-height: 100px;
    }
    
    body.page-checkout .checkout-wrapper .form-input-wrapper,
    body.page-checkout .payment-checkout-form .form-input-wrapper {
        position: static !important;
        transform: none !important;
    }
    
    body.page-checkout .checkout-wrapper .btn,
    body.page-checkout .payment-checkout-form .btn {
        width: 100%;
        height: 50px;
        font-size: 16px;
        padding: 12px 20px;
        margin-top: 10px;
        touch-action: manipulation;
    }
}